Mobile gallery

src/mobile/GenToolbar.svelte

@@ -30,14 +30,6 @@
      await app.refreshComboInNodes()
  }
 
- function doSave(): void {
-     if (!fileInput)
-         return;
-
-     navigator.vibrate(20)
-     app.querySave()
- }
-
  function doLoad(): void {
      if (!fileInput)
          return;
@@ -55,25 +47,6 @@
      navigator.vibrate(20)
      app.saveStateToLocalStorage();
  }
-
- let queued: false;
- $: queued = Boolean($queueState.runningNodeID || $queueState.progress)
-
- let running = false;
- $: running = typeof $queueState.queueRemaining === "number" && $queueState.queueRemaining > 0;
-
- let progress;
- $: progress = $queueState.progress
-
- let progressPercent = 0
- let progressText = ""
- $: if (progress) {
-     progressPercent = (progress.value / progress.max) * 100;
-     progressText = progressPercent.toFixed(1) + "%";
- } else {
-     progressPercent = 0
-     progressText = "??.?%"
- }
 </script>
 
 <Toolbar bottom color="red" style="bottom: calc(var(--f7-toolbar-height))">
@@ -83,7 +56,6 @@
     </Link>
     {/if}
     <Link on:click={refreshCombos}>🔄</Link>
-    <Link on:click={doSave}>Save</Link>
     <Link on:click={doSaveLocal}>Save Local</Link>
     <Link on:click={doLoad}>Load</Link>
     <input bind:this={fileInput} id="comfy-file-input" type="file" accept=".json" on:change={loadWorkflow} />

src/mobile/MainToolbar.svelte

@@ -76,7 +76,7 @@
  }
 
  let centerHref = "/workflows/"
- $: if ($interfaceState.selectedWorkflowIndex) {
+ $: if ($interfaceState.selectedWorkflowIndex && !$interfaceState.showingWorkflow) {
      centerHref = `/workflows/${$interfaceState.selectedWorkflowIndex}/`
  }
  else {

src/mobile/routes/gallery.svelte

@@ -8,37 +8,69 @@
  import interfaceState from "$lib/stores/interfaceState";
  import { onMount } from "svelte";
  import GenToolbar from '../GenToolbar.svelte'
+ import { partition, showLightbox } from "$lib/utils";
+	import uiQueueState, { type QueueUIEntry } from "$lib/stores/uiQueueState";
+	import { showMobileLightbox } from "$lib/components/utils";
+
+ export let app: ComfyApp
+
+ let _entries: ReadonlyArray<QueueUIEntry> = []
+ $: _entries = $uiQueueState.historyUIEntries;
+
+ let allEntries: [QueueUIEntry, string][][] = []
+ let allImages: string[] = []
+
+ let gridCols = 3;
+
+ $: buildImageList(_entries);
+
+ function buildImageList(entries: ReadonlyArray<QueueUIEntry>) {
+     const _allEntries = []
+     for (const entry of entries) {
+         for (const image of entry.images) {
+             _allEntries.push([entry, image]);
+         }
+     }
+     allEntries = partition(_allEntries, gridCols);
+     allImages = _allEntries.map(p => p[1]);
+ }
+
+ function handleClick(e: MouseEvent, entry: QueueUIEntry, index: number) {
+     showMobileLightbox(allImages, index)
+ }
+
+
+ async function clearHistory() {
+     await app.clearQueue("history");
+     uiQueueState.updateEntries(true)
+ }
 </script>
 
 <Page name="gallery">
-    <Navbar title="Gallery" />
+    <Navbar>
+        <NavLeft></NavLeft>
+        <NavTitle>Gallery</NavTitle>
+        <NavRight>
+            <Link on:click={clearHistory}>🗑️</Link>
+        </NavRight>
+    </Navbar>
 
     <Block>
-        <div class="grid grid-cols-3 grid-gap">
-            <div>3 cols</div>
-            <div>3 cols</div>
-            <div>3 cols</div>
-        </div>
-        <div class="grid grid-cols-3 grid-gap">
-            <div>3 cols</div>
-            <div>3 cols</div>
-            <div>3 cols</div>
-        </div>
-        <div class="grid grid-cols-3 grid-gap">
-            <div>3 cols</div>
-            <div>3 cols</div>
-            <div>3 cols</div>
-        </div>
-        <div class="grid grid-cols-3 grid-gap">
-            <div>3 cols</div>
-            <div>3 cols</div>
-            <div>3 cols</div>
-        </div>
-        <div class="grid grid-cols-3 grid-gap">
-            <div>3 cols</div>
-            <div>3 cols</div>
-            <div>3 cols</div>
-        </div>
+        {#each allEntries as group, i}
+            <div class="grid grid-cols-{gridCols} grid-gap">
+                {#each group as [entry, image], j}
+                    {@const index = i * gridCols + j}
+                    <div class="grid-entry">
+                        <!-- svelte-ignore a11y-click-events-have-key-events -->
+                        <img class="grid-entry-image"
+                             on:click={(e) => handleClick(e, entry, index)}
+                        src={image}
+                        loading="lazy"
+                        alt="thumbnail" />
+                    </div>
+                {/each}
+            </div>
+        {/each}
     </Block>
 </Page>
 
@@ -59,4 +91,23 @@
  :global(.root-container.mobile > .block > .v-pane) {
      flex-direction: column !important;
  }
+
+ .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;
+     margin-bottom: var(--f7-grid-gap);
+
+     &:hover {
+         cursor: pointer;
+         filter: brightness(120%) contrast(120%);
+     }
+ }
 </style>

src/mobile/routes/workflow.svelte

@@ -18,6 +18,9 @@
 
  function onPageBeforeIn() {
      workflow = $workflowState.openedWorkflows[workflowIndex-1]
+     if (workflow) {
+         workflowState.setActiveWorkflow(app.lCanvas, workflow.id)
+     }
      $interfaceState.selectedWorkflowIndex = workflowIndex
      $interfaceState.showingWorkflow = true;
  }

src/mobile/routes/workflows.svelte

@@ -13,6 +13,7 @@
  async function doLoadDefault() {
      f7.dialog.confirm("Would you like to load the default workflow in a new tab?", async () => {
          await app.initDefaultWorkflow();
+         app.saveStateToLocalStorage(false);
      })
  }
 
@@ -20,7 +21,10 @@
      e.preventDefault();
      e.stopImmediatePropagation();
      f7.dialog.confirm("Are you sure you want to delete this workflow?", workflow.attrs.title || `Workflow: ${workflow.id}`,
-                       () => { app.closeWorkflow(workflow.id); })}
+                       () => {
+                           app.closeWorkflow(workflow.id);
+                           app.saveStateToLocalStorage(false);
+                       })}
 
  function onPageBeforeIn() {
      $interfaceState.selectedWorkflowIndex = null;