More mobile overhauling

src/AppMobile.svelte

@@ -56,7 +56,16 @@
  let loading = true;
  let lastSize = Number.POSITIVE_INFINITY;
 
+ $: f7 && f7.setDarkMode($interfaceState.isDarkMode)
+
  onMount(async () => {
+     let isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+     $interfaceState.isDarkMode = isDarkMode;
+
+     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+         $interfaceState.isDarkMode = event.matches;
+     });
+
      appSetupPromise = app.setup().then(() => {
          loading = false
      });
@@ -75,12 +84,12 @@
      })
  })
 
-     /*
-        Now we need to map components to routes.
-        We need to pass them along with the F7 app parameters to <App> component
-      */
+ /*
+    Now we need to map components to routes.
+    We need to pass them along with the F7 app parameters to <App> component
+  */
 
-     let f7params: Framework7Parameters = {
+ let f7params: Framework7Parameters = {
      routes: [
          {
              path: '/',
@@ -112,7 +121,7 @@
          //     }
          // },
          {
-             path: '/workflows/:workflowID/',
+             path: '/workflows/:workflowIndex/',
              component: WorkflowPage,
              options: {
                  props: { app }
@@ -135,8 +144,23 @@
          tapHold: true
      }
  }
+
+ let body;
+ const bindBody = (node) => (body = node);
+ function setDarkClass(isDark: boolean) {
+     if (!body)
+         return;
+     if (isDark) {
+         body.classList.add("dark");
+     } else {
+         body.classList.remove("dark");
+     }
+ };
+ $: setDarkClass($interfaceState.isDarkMode);
 </script>
 
+<svelte:body use:bindBody />
+
 <App theme="auto" name="ComfyBox" {...f7params}>
     {#if appSetupPromise}
         {#await appSetupPromise}
@@ -159,7 +183,7 @@
                     <GenToolbar {app} />
                 {/if}
             </View>
-        {:catch error}
+    {:catch error}
             <div class="comfy-loading-error">
                 <div>
                     Error loading app

src/lib/notify.ts

@@ -34,7 +34,8 @@ function notifyf7(text: string, options: NotifyOptions) {
         text: text,
         closeOnClick: true,
         closeTimeout,
-        on
+        on,
+        icon: options.imageUrl
     });
     notification.open();
 }

src/lib/stores/interfaceState.ts

@@ -16,6 +16,8 @@ export type InterfaceState = {
 
     selectedWorkflowID: WorkflowInstID | null
     showingWorkflow: boolean
+
+    isDarkMode: boolean
 }
 
 type InterfaceStateOps = {
@@ -34,7 +36,9 @@ const store: Writable<InterfaceState> = writable(
         isJumpingToNode: false,
 
         selectedWorkflowID: null,
-        showingWorkflow: false
+        showingWorkflow: false,
+
+        isDarkMode: false,
     })
 
 const debounceDrag = debounce(() => { store.update(s => { s.showIndicator = false; return s }) }, 1000)

src/mobile/GenToolbar.svelte

@@ -102,4 +102,8 @@
  #comfy-file-input {
      display: none;
  }
+
+ :global(.dark .toolbar.color-red) {
+     background: var(--neutral-700) !important;
+ }
 </style>

src/mobile/MainToolbar.svelte

@@ -3,7 +3,7 @@
  import queueState from "$lib/stores/queueState";
  import workflowState, { ComfyBoxWorkflow } from "$lib/stores/workflowState";
  import { getNodeInfo } from "$lib/utils"
- import { Image, LayoutTextSidebarReverse } from "svelte-bootstrap-icons";
+ import { LayoutTextSidebarReverse, Image, Grid } from "svelte-bootstrap-icons";
 
  import { Link, Toolbar } from "framework7-svelte"
  import ProgressBar from "$lib/components/ProgressBar.svelte";
@@ -86,6 +86,7 @@
  let toolbarCount = 0;
  $: toolbarCount = $interfaceState.showingWorkflow ? 2 : 1;
 
+ const ICON_SIZE = "1.5rem";
 </script>
 
 <div class="bottom" style:--toolbarCount={toolbarCount}>
@@ -106,10 +107,16 @@
         {/if}
     </div>
 </div>
-<Toolbar bottom>
-    <Link transition="f7-dive" href="/about/">Tab 1</Link>
-    <Link transition="f7-dive" href={centerHref} tabLinkActive><Image /></Link>
-    <Link transition="f7-dive" href="/login/"><LayoutTextSidebarReverse /></Link>
+<Toolbar bottom tabbar color="blue" class={toolbarCount > 1 ? "hasGenToolbar" : ""}>
+    <Link transition="f7-dive" href="/about/">
+        <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/">
+        <Grid width={ICON_SIZE} height={ICON_SIZE} />
+    </Link>
 </Toolbar>
 {#if $interfaceState.showIndicator}
     <Indicator value={$interfaceState.indicatorValue} />
@@ -120,6 +127,22 @@
      display: none;
  }
 
+ :global(.progressbar.color-blue) {
+     background: var(--neutral-400) !important;
+ }
+
+ :global(.dark .progressbar.color-blue) {
+     background: var(--neutral-500) !important;
+ }
+
+ :global(.dark .toolbar.color-blue) {
+     background: var(--neutral-800) !important;
+ }
+
+ :global(.dark .toolbar.color-blue.hasGenToolbar) {
+     border-top: 2px solid var(--neutral-600);
+ }
+
  .bottom {
      --toolbarCount: 1;
      position: absolute;
@@ -141,7 +164,8 @@
 
      .node-name {
          flex-grow: 1;
-         background-color: var(--secondary-300);
+         background-color: var(--comfy-node-name-background);
+         color: var(--comfy-node-name-foreground);
          padding: 0.2em;
          display: flex;
          justify-content: center;

src/mobile/routes/workflow.svelte

@@ -9,7 +9,7 @@
  import { onMount } from "svelte";
  import GenToolbar from '../GenToolbar.svelte'
 
- export let workflowID: WorkflowInstID;
+ export let workflowIndex: number;
  export let app: ComfyApp
 
  let workflow: ComfyBoxWorkflow;
@@ -17,7 +17,13 @@
  let title = ""
 
  function onPageBeforeIn() {
-     $interfaceState.selectedWorkflowID = workflowID;
+     workflow = $workflowState.openedWorkflows[workflowIndex-1]
+     if (workflow) {
+         $interfaceState.selectedWorkflowID = workflow.id;
+     }
+     else {
+         $interfaceState.selectedWorkflowID = null;
+     }
      $interfaceState.showingWorkflow = true;
  }
 
@@ -25,14 +31,8 @@
      $interfaceState.showingWorkflow = false;
  }
 
- $: {
-     workflow = workflowState.getWorkflow(workflowID);
-     if (workflow) {
-         workflowState.setActiveWorkflow(app.lCanvas, workflow.id);
-     }
- }
  $: layoutState = workflow?.layout;
- $: title = workflow?.attrs?.title || `Workflow: ${workflowID}`;
+ $: title = workflow?.attrs?.title || `Workflow: ${workflow?.id || workflowIndex}`;
 
  $: if (layoutState && $layoutState.root) {
      root = $layoutState.root

src/mobile/routes/workflows.svelte

@@ -32,8 +32,8 @@
 
     {#if $workflowState.openedWorkflows}
         <List strong inset dividersIos class="components-list searchbar-found">
-            {#each $workflowState.openedWorkflows as workflow}
-                <ListItem link="/workflows/{workflow.id}/" transition="f7-cover" title={workflow.attrs.title || `Workflow: ${workflow.id}`}>
+            {#each $workflowState.openedWorkflows as workflow, i}
+                <ListItem link="/workflows/{i+1}/" transition="f7-cover" title={workflow.attrs.title || `Workflow: ${workflow.id}`}>
                     <svelte:fragment slot="media">
                         <div on:pointerdown={(e) => onClickDelete(workflow, e)}>
                             <XCircle width="1.5em" height="1.5em" />

src/scss/global.scss

@@ -77,11 +77,9 @@ body {
     --comfy-node-name-foreground: var(--body-text-color);
     --comfy-spinner-main-color: var(--neutral-600);
     --comfy-spinner-accent-color: var(--secondary-600);
-}
 
-.mobile {
-    --comfy-progress-bar-background: lightgrey;
-    --comfy-progress-bar-foreground: #B3D8A9
+    --f7-navbar-color: var(--body-text-color);
+    --f7-navbar-bg-color: var(--neutral-800);
 }
 
 @mixin square-button {