More mobile overhauling

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" />