Grid view for history

src/lib/components/ComfyQueueGridDisplay.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+	import type { QueueItemType } from "$lib/api";
+ import { truncateString } from "$lib/utils";
+ import type { QueueUIEntry } from "./ComfyQueue.svelte";
+
+ export let entries: QueueUIEntry[] = [];
+ export let showPrompt: (entry: QueueUIEntry) => void;
+ export let showLightbox: (images: string[], index: number, e: Event) => void;
+ export let mode: QueueItemType = "queue";
+
+ let allEntries: [QueueUIEntry, string][] = []
+ let allImages: string[] = []
+ let gridColumns: number = 3;
+
+ $: buildImageList(entries);
+
+ function buildImageList(entries: QueueUIEntry[]) {
+     allEntries = []
+     for (const entry of entries) {
+         for (const image of entry.images) {
+             allEntries.push([entry, image]);
+         }
+     }
+     allImages = allEntries.map(p => p[1]);
+ }
+
+ function handleClick(e: MouseEvent, entry: QueueUIEntry, index: number) {
+     if (e.ctrlKey) {
+         showPrompt(entry);
+     }
+     else {
+         showLightbox(allImages, index, e)
+     }
+ }
+</script>
+
+<div class="grid-wrapper">
+    <div class="grid-columns">
+        <div>
+            <input type="range" bind:value={gridColumns} min={1} max={8} step={1} />
+        </div>
+    </div>
+    <div class="grid-entries">
+        <div class="grid" style:--cols={gridColumns}>
+            {#each allEntries as [entry, image], i}
+                <div class="grid-entry">
+                    <!-- svelte-ignore a11y-click-events-have-key-events -->
+                    <img class="grid-entry-image"
+                         on:click={(e) => handleClick(e, entry, i)}
+                    src={image}
+                    alt="thumbnail" />
+                </div>
+            {/each}
+        </div>
+    </div>
+</div>
+
+<style lang="scss">
+ $grid-columns-control-height: 3rem;
+
+ .grid-wrapper {
+     height: 100%;
+ }
+
+ .grid-columns {
+     width: 100%;
+     height: $grid-columns-control-height;
+     position: relative;
+     display: flex;
+     flex-direction: column;
+     padding: var(--spacing-lg) 0;
+
+     > div {
+         width: 100%;
+         margin: auto;
+         padding: 0 1rem;
+         input {
+             width: 100%;
+             margin: auto;
+         }
+     }
+ }
+
+ .grid-entries {
+     height: calc(100% - #{$grid-columns-control-height});
+     padding: 0 var(--spacing-lg) var(--spacing-lg) var(--spacing-lg);
+     overflow-y: auto;
+ }
+
+ .grid {
+     --cols: 3;
+     width: 100%;
+     display: grid;
+     position: relative;
+     top: 0px;
+     grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
+     grid-auto-rows: 1fr;
+     gap: var(--spacing-lg);
+ }
+
+ .grid-entry {
+     display: flex;
+     justify-content: center;
+     align-items: center;
+     aspect-ratio: 1 / 1;
+     object-fit: cover;
+ }
+
+ .grid-entry-image {
+     aspect-ratio: 1 / 1;
+     object-fit: cover;
+
+     &:hover {
+         cursor: pointer;
+         filter: brightness(120%) contrast(120%);
+     }
+ }
+</style>