From 263d62cb34605acf47a15b8398ea0ea301929ce2 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Wed, 31 May 2023 17:04:00 -0500
Subject: [PATCH] By index instead of workflow ID

---
 src/AppMobile.svelte               | 15 ++++++-------
 src/lib/stores/interfaceState.ts   |  4 ++--
 src/mobile/GenToolbar.svelte       |  9 --------
 src/mobile/MainToolbar.svelte      |  8 +++----
 src/mobile/routes/gallery.svelte   | 34 ++++++++++++++++++++++++++++++
 src/mobile/routes/queue.svelte     | 34 ++++++++++++++++++++++++++++++
 src/mobile/routes/workflow.svelte  |  7 +-----
 src/mobile/routes/workflows.svelte |  2 +-
 8 files changed, 83 insertions(+), 30 deletions(-)
 create mode 100644 src/mobile/routes/gallery.svelte
 create mode 100644 src/mobile/routes/queue.svelte

diff --git a/src/AppMobile.svelte b/src/AppMobile.svelte
index 67a3e21..bfb44c4 100644
--- a/src/AppMobile.svelte
+++ b/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 LoginPage from './mobile/routes/login.svelte';
- import GraphPage from './mobile/routes/graph.svelte';
+ import QueuePage from './mobile/routes/queue.svelte';
+ import GalleryPage from './mobile/routes/gallery.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/',
-             component: AboutPage,
+             path: '/queue/',
+             component: QueuePage,
          },
          {
-             path: '/login/',
-             component: LoginPage,
+             path: '/gallery/',
+             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>
diff --git a/src/lib/stores/interfaceState.ts b/src/lib/stores/interfaceState.ts
index de43ecf..0d70b14 100644
--- a/src/lib/stores/interfaceState.ts
+++ b/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,
diff --git a/src/mobile/GenToolbar.svelte b/src/mobile/GenToolbar.svelte
index 16634ba..61d063e 100644
--- a/src/mobile/GenToolbar.svelte
+++ b/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))">
diff --git a/src/mobile/MainToolbar.svelte b/src/mobile/MainToolbar.svelte
index 6b19a71..b923f6a 100644
--- a/src/mobile/MainToolbar.svelte
+++ b/src/mobile/MainToolbar.svelte
@@ -76,8 +76,8 @@
  }
 
  let centerHref = "/workflows/"
- $: if ($interfaceState.selectedWorkflowID) {
-     centerHref = `/workflows/${$interfaceState.selectedWorkflowID}/`
+ $: if ($interfaceState.selectedWorkflowIndex) {
+     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>
diff --git a/src/mobile/routes/gallery.svelte b/src/mobile/routes/gallery.svelte
new file mode 100644
index 0000000..27bd613
--- /dev/null
+++ b/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>
diff --git a/src/mobile/routes/queue.svelte b/src/mobile/routes/queue.svelte
new file mode 100644
index 0000000..7ca7871
--- /dev/null
+++ b/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>
diff --git a/src/mobile/routes/workflow.svelte b/src/mobile/routes/workflow.svelte
index 3696d58..aba64e7 100644
--- a/src/mobile/routes/workflow.svelte
+++ b/src/mobile/routes/workflow.svelte
@@ -18,12 +18,7 @@
 
  function onPageBeforeIn() {
      workflow = $workflowState.openedWorkflows[workflowIndex-1]
-     if (workflow) {
-         $interfaceState.selectedWorkflowID = workflow.id;
-     }
-     else {
-         $interfaceState.selectedWorkflowID = null;
-     }
+     $interfaceState.selectedWorkflowIndex = workflowIndex
      $interfaceState.showingWorkflow = true;
  }
 
diff --git a/src/mobile/routes/workflows.svelte b/src/mobile/routes/workflows.svelte
index f51135e..94d2b8c 100644
--- a/src/mobile/routes/workflows.svelte
+++ b/src/mobile/routes/workflows.svelte
@@ -23,7 +23,7 @@
                        () => { app.closeWorkflow(workflow.id); })}
 
  function onPageBeforeIn() {
-     $interfaceState.selectedWorkflowID = null;
+     $interfaceState.selectedWorkflowIndex = null;
  }
 </script>