By index instead of workflow ID

src/AppMobile.svelte

@@ -13,9 +13,8 @@
  import GenToolbar from './mobile/GenToolbar.svelte'
 
  import WorkflowsPage from './mobile/routes/workflows.svelte';
- import AboutPage from './mobile/routes/about.svelte';
+ import QueuePage from './mobile/routes/queue.svelte';
- import LoginPage from './mobile/routes/login.svelte';
+ import GalleryPage from './mobile/routes/gallery.svelte';
- import GraphPage from './mobile/routes/graph.svelte';
  import WorkflowPage from './mobile/routes/workflow.svelte';
  import type { Framework7Parameters, Modal } from "framework7/types";
  import interfaceState from "$lib/stores/interfaceState";
@@ -106,12 +105,12 @@
              }
          },
          {
-             path: '/about/',
+             path: '/queue/',
-             component: AboutPage,
+             component: QueuePage,
          },
          {
-             path: '/login/',
+             path: '/gallery/',
-             component: LoginPage,
+             component: GalleryPage,
          },
          // {
          //     path: '/graph/',
@@ -179,7 +178,7 @@
                 browserHistoryRoot="/mobile/"
             >
                 <MainToolbar {app} />
-                {#if $interfaceState.selectedWorkflowID && $interfaceState.showingWorkflow}
+                {#if $interfaceState.selectedWorkflowIndex && $interfaceState.showingWorkflow}
                     <GenToolbar {app} />
                 {/if}
             </View>

src/lib/stores/interfaceState.ts

@@ -14,7 +14,7 @@ export type InterfaceState = {
     graphTransitioning: boolean,
     isJumpingToNode: boolean,
 
-    selectedWorkflowID: WorkflowInstID | null
+    selectedWorkflowIndex: number | null
     showingWorkflow: boolean
 
     isDarkMode: boolean
@@ -35,7 +35,7 @@ const store: Writable<InterfaceState> = writable(
         graphTransitioning: false,
         isJumpingToNode: false,
 
-        selectedWorkflowID: null,
+        selectedWorkflowIndex: null,
         showingWorkflow: false,
 
         isDarkMode: false,

src/mobile/GenToolbar.svelte

@@ -74,15 +74,6 @@
      progressPercent = 0
      progressText = "??.?%"
  }
-
- let centerHref = "/workflows/"
- $: if ($interfaceState.selectedWorkflowID) {
-     centerHref = `/workflows/${$interfaceState.selectedWorkflowID}/`
- }
- else {
-     centerHref = "/workflows/";
- }
-
 </script>
 
 <Toolbar bottom color="red" style="bottom: calc(var(--f7-toolbar-height))">

src/mobile/MainToolbar.svelte

@@ -76,8 +76,8 @@
  }
 
  let centerHref = "/workflows/"
- $: if ($interfaceState.selectedWorkflowID) {
+ $: if ($interfaceState.selectedWorkflowIndex) {
-     centerHref = `/workflows/${$interfaceState.selectedWorkflowID}/`
+     centerHref = `/workflows/${$interfaceState.selectedWorkflowIndex}/`
  }
  else {
      centerHref = "/workflows/";
@@ -108,13 +108,13 @@
     </div>
 </div>
 <Toolbar bottom tabbar color="blue" class={toolbarCount > 1 ? "hasGenToolbar" : ""}>
-    <Link transition="f7-dive" href="/about/">
+    <Link transition="f7-dive" href="/queue/">
         <LayoutTextSidebarReverse width={ICON_SIZE} height={ICON_SIZE} />
     </Link>
     <Link transition="f7-dive" href={centerHref} tabLinkActive>
         <Image width={ICON_SIZE} height={ICON_SIZE} />
     </Link>
-    <Link transition="f7-dive" href="/login/">
+    <Link transition="f7-dive" href="/gallery/">
         <Grid width={ICON_SIZE} height={ICON_SIZE} />
     </Link>
 </Toolbar>

src/mobile/routes/gallery.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+ import { Page, Navbar, Tabs, Tab, NavLeft, NavTitle, NavRight, Link } from "framework7-svelte"
+ import WidgetContainer from "$lib/components/WidgetContainer.svelte";
+ import type ComfyApp from "$lib/components/ComfyApp";
+ import { writable, type Writable } from "svelte/store";
+ import type { IDragItem, WritableLayoutStateStore } from "$lib/stores/layoutStates";
+ import workflowState, { type ComfyBoxWorkflow, type WorkflowInstID } from "$lib/stores/workflowState";
+ import interfaceState from "$lib/stores/interfaceState";
+ import { onMount } from "svelte";
+ import GenToolbar from '../GenToolbar.svelte'
+</script>
+
+<Page name="gallery">
+    <Navbar title="Gallery" />
+</Page>
+
+<style lang="scss">
+ .container {
+     overflow-x: hidden;
+
+     // Disable pull to refresh
+     overscroll-behavior-y: contain;
+
+     // framework7's css conflicts with gradio's
+     :global(.block) {
+         z-index: unset; // f7 sets it to 1
+     }
+ }
+
+ // TODO generalize this to all properties!
+ :global(.root-container.mobile > .block > .v-pane) {
+     flex-direction: column !important;
+ }
+</style>

src/mobile/routes/queue.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+ import { Page, Navbar, Tabs, Tab, NavLeft, NavTitle, NavRight, Link } from "framework7-svelte"
+ import WidgetContainer from "$lib/components/WidgetContainer.svelte";
+ import type ComfyApp from "$lib/components/ComfyApp";
+ import { writable, type Writable } from "svelte/store";
+ import type { IDragItem, WritableLayoutStateStore } from "$lib/stores/layoutStates";
+ import workflowState, { type ComfyBoxWorkflow, type WorkflowInstID } from "$lib/stores/workflowState";
+ import interfaceState from "$lib/stores/interfaceState";
+ import { onMount } from "svelte";
+ import GenToolbar from '../GenToolbar.svelte'
+</script>
+
+<Page name="queue">
+    <Navbar title="Queue" />
+</Page>
+
+<style lang="scss">
+ .container {
+     overflow-x: hidden;
+
+     // Disable pull to refresh
+     overscroll-behavior-y: contain;
+
+     // framework7's css conflicts with gradio's
+     :global(.block) {
+         z-index: unset; // f7 sets it to 1
+     }
+ }
+
+ // TODO generalize this to all properties!
+ :global(.root-container.mobile > .block > .v-pane) {
+     flex-direction: column !important;
+ }
+</style>

src/mobile/routes/workflow.svelte

@@ -18,12 +18,7 @@
 
  function onPageBeforeIn() {
      workflow = $workflowState.openedWorkflows[workflowIndex-1]
-     if (workflow) {
+     $interfaceState.selectedWorkflowIndex = workflowIndex
-         $interfaceState.selectedWorkflowID = workflow.id;
-     }
-     else {
-         $interfaceState.selectedWorkflowID = null;
-     }
      $interfaceState.showingWorkflow = true;
  }
 

src/mobile/routes/workflows.svelte

@@ -23,7 +23,7 @@
                        () => { app.closeWorkflow(workflow.id); })}
 
  function onPageBeforeIn() {
-     $interfaceState.selectedWorkflowID = null;
+     $interfaceState.selectedWorkflowIndex = null;
  }
 </script>