Progressbar on mobile improvement

package.json

@@ -30,7 +30,7 @@
     "prettier-plugin-svelte": "^2.10.0",
     "rollup-plugin-visualizer": "^5.9.0",
     "sass": "^1.61.0",
-    "svelte": "^3.58.0",
+    "svelte": "^3.59.0",
     "svelte-check": "^3.2.0",
     "svelte-dnd-action": "^0.9.22",
     "typescript": "^5.0.3",

pnpm-lock.yaml

@@ -27,7 +27,7 @@ importers:
         version: 6.11.0
       '@dogagenc/svelte-markdown':
         specifier: ^0.2.4
-        version: 0.2.4(svelte@3.58.0)
+        version: 0.2.4(svelte@3.59.1)
       '@gradio/accordion':
         specifier: workspace:*
         version: link:gradio/js/accordion
@@ -93,7 +93,7 @@ importers:
         version: link:litegraph/packages/tsconfig
       '@sveltejs/vite-plugin-svelte':
         specifier: ^2.1.1
-        version: 2.1.1(svelte@3.58.0)(vite@4.3.8)
+        version: 2.1.1(svelte@3.59.1)(vite@4.3.8)
       '@tsconfig/svelte':
         specifier: ^4.0.1
         version: 4.0.1
@@ -156,13 +156,13 @@ importers:
         version: 1.5.2
       svelte-preprocess:
         specifier: ^5.0.3
-        version: 5.0.3(sass@1.61.0)(svelte@3.58.0)(typescript@5.0.3)
+        version: 5.0.3(sass@1.61.0)(svelte@3.59.1)(typescript@5.0.3)
       svelte-select:
         specifier: ^5.5.3
         version: 5.5.3
       svelte-splitpanes:
         specifier: ^0.7.13
-        version: 0.7.13(svelte@3.58.0)
+        version: 0.7.13(svelte@3.59.1)
       svelte-tiny-virtual-list:
         specifier: ^2.0.5
         version: 2.0.5
@@ -190,7 +190,7 @@ importers:
         version: 1.2.8
       '@zerodevx/svelte-toast':
         specifier: ^0.9.3
-        version: 0.9.3(svelte@3.58.0)
+        version: 0.9.3(svelte@3.59.1)
       eslint:
         specifier: ^8.37.0
         version: 8.37.0
@@ -199,7 +199,7 @@ importers:
         version: 8.8.0(eslint@8.37.0)
       eslint-plugin-svelte3:
         specifier: ^4.0.0
-        version: 4.0.0(eslint@8.37.0)(svelte@3.58.0)
+        version: 4.0.0(eslint@8.37.0)(svelte@3.59.1)
       happy-dom:
         specifier: ^9.18.3
         version: 9.18.3
@@ -211,7 +211,7 @@ importers:
         version: 2.8.7
       prettier-plugin-svelte:
         specifier: ^2.10.0
-        version: 2.10.0(prettier@2.8.7)(svelte@3.58.0)
+        version: 2.10.0(prettier@2.8.7)(svelte@3.59.1)
       rollup-plugin-visualizer:
         specifier: ^5.9.0
         version: 5.9.0
@@ -219,14 +219,14 @@ importers:
         specifier: ^1.61.0
         version: 1.61.0
       svelte:
-        specifier: ^3.58.0
+        specifier: ^3.59.0
-        version: 3.58.0
+        version: 3.59.1
       svelte-check:
         specifier: ^3.2.0
-        version: 3.2.0(sass@1.61.0)(svelte@3.58.0)
+        version: 3.2.0(sass@1.61.0)(svelte@3.59.1)
       svelte-dnd-action:
         specifier: ^0.9.22
-        version: 0.9.22(svelte@3.58.0)
+        version: 0.9.22(svelte@3.59.1)
       typescript:
         specifier: ^5.0.3
         version: 5.0.3
@@ -1363,6 +1363,7 @@ packages:
       '@codemirror/language': ^6.0.0
       '@codemirror/state': ^6.0.0
       '@codemirror/view': ^6.0.0
+      '@lezer/common': ^1.0.0
     dependencies:
       '@codemirror/language': 6.6.0
       '@codemirror/state': 6.2.0
@@ -1506,14 +1507,14 @@ packages:
       w3c-keyname: 2.2.6
     dev: false
 
-  /@dogagenc/svelte-markdown@0.2.4(svelte@3.58.0):
+  /@dogagenc/svelte-markdown@0.2.4(svelte@3.59.1):
     resolution: {integrity: sha512-UmmHHZ7rilAbBYiNsxuL5d8Ac79EhFXrhjsUNr30BPzn+T7ohJR8kHMFjDYDQc0tOQOfKbICvkPAQ6cprqS3Eg==}
     peerDependencies:
       svelte: ^3.0.0
     dependencies:
       '@types/marked': 4.3.1
       marked: 4.3.0
-      svelte: 3.58.0
+      svelte: 3.59.1
     dev: false
 
   /@esbuild/android-arm64@0.17.18:
@@ -2275,7 +2276,7 @@ packages:
       - supports-color
     dev: true
 
-  /@sveltejs/vite-plugin-svelte@2.1.1(svelte@3.58.0)(vite@4.3.8):
+  /@sveltejs/vite-plugin-svelte@2.1.1(svelte@3.59.1)(vite@4.3.8):
     resolution: {integrity: sha512-7YeBDt4us0FiIMNsVXxyaP4Hwyn2/v9x3oqStkHU3ZdIc5O22pGwUwH33wUqYo+7Itdmo8zxJ45Qvfm3H7UUjQ==}
     engines: {node: ^14.18.0 || >= 16}
     peerDependencies:
@@ -2286,8 +2287,8 @@ packages:
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.0
-      svelte: 3.58.0
+      svelte: 3.59.1
-      svelte-hmr: 0.15.1(svelte@3.58.0)
+      svelte-hmr: 0.15.1(svelte@3.59.1)
       vite: 4.3.8(sass@1.61.0)
       vitefu: 0.2.4(vite@4.3.8)
     transitivePeerDependencies:
@@ -2604,12 +2605,12 @@ packages:
       pretty-format: 27.5.1
     dev: false
 
-  /@zerodevx/svelte-toast@0.9.3(svelte@3.58.0):
+  /@zerodevx/svelte-toast@0.9.3(svelte@3.59.1):
     resolution: {integrity: sha512-VPKWR4A9y01fyXRscu9HiTj7tV2hFrpRKZvGwMmaPXfHIXR1D9+NNsz0HXcQ7qZ0C5UaHS3n9uNtPtIcAXT7RQ==}
     peerDependencies:
       svelte: ^3.57.0
     dependencies:
-      svelte: 3.58.0
+      svelte: 3.59.1
     dev: true
 
   /abab@2.0.6:
@@ -3117,6 +3118,8 @@ packages:
       '@codemirror/search': 6.4.0
       '@codemirror/state': 6.2.0
       '@codemirror/view': 6.11.0
+    transitivePeerDependencies:
+      - '@lezer/common'
     dev: false
 
   /codemirror@6.0.1(@lezer/common@1.0.2):
@@ -3941,14 +3944,14 @@ packages:
       - typescript
     dev: true
 
-  /eslint-plugin-svelte3@4.0.0(eslint@8.37.0)(svelte@3.58.0):
+  /eslint-plugin-svelte3@4.0.0(eslint@8.37.0)(svelte@3.59.1):
     resolution: {integrity: sha512-OIx9lgaNzD02+MDFNLw0GEUbuovNcglg+wnd/UY0fbZmlQSz7GlQiQ1f+yX0XvC07XPcDOnFcichqI3xCwp71g==}
     peerDependencies:
       eslint: '>=8.0.0'
       svelte: ^3.2.0
     dependencies:
       eslint: 8.37.0
-      svelte: 3.58.0
+      svelte: 3.59.1
     dev: true
 
   /eslint-scope@5.1.1:
@@ -5988,14 +5991,14 @@ packages:
     engines: {node: '>= 0.8.0'}
     dev: true
 
-  /prettier-plugin-svelte@2.10.0(prettier@2.8.7)(svelte@3.58.0):
+  /prettier-plugin-svelte@2.10.0(prettier@2.8.7)(svelte@3.59.1):
     resolution: {integrity: sha512-GXMY6t86thctyCvQq+jqElO+MKdB09BkL3hexyGP3Oi8XLKRFaJP1ud/xlWCZ9ZIa2BxHka32zhHfcuU+XsRQg==}
     peerDependencies:
       prettier: ^1.16.4 || ^2.0.0
       svelte: ^3.2.0
     dependencies:
       prettier: 2.8.7
-      svelte: 3.58.0
+      svelte: 3.59.1
     dev: true
 
   /prettier@2.8.7:
@@ -6656,7 +6659,7 @@ packages:
       - sugarss
     dev: true
 
-  /svelte-check@3.2.0(sass@1.61.0)(svelte@3.58.0):
+  /svelte-check@3.2.0(sass@1.61.0)(svelte@3.59.1):
     resolution: {integrity: sha512-6ZnscN8dHEN5Eq5LgIzjj07W9nc9myyBH+diXsUAuiY/3rt0l65/LCIQYlIuoFEjp2F1NhXqZiJwV9omPj9tMw==}
     hasBin: true
     peerDependencies:
@@ -6668,8 +6671,8 @@ packages:
       import-fresh: 3.3.0
       picocolors: 1.0.0
       sade: 1.8.1
-      svelte: 3.58.0
+      svelte: 3.59.1
-      svelte-preprocess: 5.0.3(sass@1.61.0)(svelte@3.58.0)(typescript@5.0.3)
+      svelte-preprocess: 5.0.3(sass@1.61.0)(svelte@3.59.1)(typescript@5.0.3)
       typescript: 5.0.3
     transitivePeerDependencies:
       - '@babel/core'
@@ -6683,18 +6686,18 @@ packages:
       - sugarss
     dev: true
 
-  /svelte-dnd-action@0.9.22(svelte@3.58.0):
+  /svelte-dnd-action@0.9.22(svelte@3.59.1):
     resolution: {integrity: sha512-lOQJsNLM1QWv5mdxIkCVtk6k4lHCtLgfE59y8rs7iOM6erchbLC9hMEFYSveZz7biJV0mpg7yDSs4bj/RT/YkA==}
     peerDependencies:
       svelte: '>=3.23.0'
     dependencies:
-      svelte: 3.58.0
+      svelte: 3.59.1
     dev: true
 
   /svelte-feather-icons@4.0.0:
     resolution: {integrity: sha512-4ieUsjp+VYa1r6y80jDt9zRiRUZyJNbESpRdHdJJhiBubyuXX96A7f1UZSK4olxzP6Qsg5ZAuyZlnmvD+/swAA==}
     dependencies:
-      svelte: 3.58.0
+      svelte: 3.59.1
     dev: false
 
   /svelte-floating-ui@1.2.8:
@@ -6718,6 +6721,16 @@ packages:
       svelte: '>=3.19.0'
     dependencies:
       svelte: 3.58.0
+    dev: true
+
+  /svelte-hmr@0.15.1(svelte@3.59.1):
+    resolution: {integrity: sha512-BiKB4RZ8YSwRKCNVdNxK/GfY+r4Kjgp9jCLEy0DuqAKfmQtpL38cQK3afdpjw4sqSs4PLi3jIPJIFp259NkZtA==}
+    engines: {node: ^12.20 || ^14.13.1 || >= 16}
+    peerDependencies:
+      svelte: '>=3.19.0'
+    dependencies:
+      svelte: 3.59.1
+    dev: false
 
   /svelte-preprocess@4.10.1(postcss-load-config@3.1.4)(postcss@8.4.21)(svelte@3.58.0)(typescript@4.5.4):
     resolution: {integrity: sha512-NSNloaylf+o9UeyUR2KvpdxrAyMdHl3U7rMnoP06/sG0iwJvlUM4TpMno13RaNqovh4AAoGsx1jeYcIyuGUXMw==}
@@ -6825,7 +6838,7 @@ packages:
       typescript: 5.0.3
     dev: true
 
-  /svelte-preprocess@5.0.3(sass@1.61.0)(svelte@3.58.0)(typescript@5.0.3):
+  /svelte-preprocess@5.0.3(sass@1.61.0)(svelte@3.59.1)(typescript@5.0.3):
     resolution: {integrity: sha512-GrHF1rusdJVbOZOwgPWtpqmaexkydznKzy5qIC2FabgpFyKN57bjMUUUqPRfbBXK5igiEWn1uO/DXsa2vJ5VHA==}
     engines: {node: '>= 14.10.0'}
     requiresBuild: true
@@ -6869,7 +6882,7 @@ packages:
       sass: 1.61.0
       sorcery: 0.11.0
       strip-indent: 3.0.0
-      svelte: 3.58.0
+      svelte: 3.59.1
       typescript: 5.0.3
 
   /svelte-range-slider-pips@2.0.1:
@@ -6883,13 +6896,13 @@ packages:
       svelte-floating-ui: 1.2.8
     dev: false
 
-  /svelte-splitpanes@0.7.13(svelte@3.58.0):
+  /svelte-splitpanes@0.7.13(svelte@3.59.1):
     resolution: {integrity: sha512-LiAf4OEZqRJanoax9mextXtQ0JzrdCqX2tOgVO+yJu2XNyGz5j5fGbw8+5AXgOasPi/m1nv8n2Lt+XYFRfvIGg==}
     peerDependencies:
       svelte: ^3.54.0
     dependencies:
       esm-env-robust: 0.0.3
-      svelte: 3.58.0
+      svelte: 3.59.1
     dev: false
 
   /svelte-tiny-virtual-list@2.0.5:
@@ -6912,6 +6925,10 @@ packages:
     resolution: {integrity: sha512-brIBNNB76mXFmU/Kerm4wFnkskBbluBDCjx/8TcpYRb298Yh2dztS2kQ6bhtjMcvUhd5ynClfwpz5h2gnzdQ1A==}
     engines: {node: '>= 8'}
 
+  /svelte@3.59.1:
+    resolution: {integrity: sha512-pKj8fEBmqf6mq3/NfrB9SLtcJcUvjYSWyePlfCqN9gujLB25RitWK8PvFzlwim6hD/We35KbPlRteuA6rnPGcQ==}
+    engines: {node: '>= 8'}
+
   /swiper@9.2.4:
     resolution: {integrity: sha512-L7y3K/iiMXNYQ94FbfcJn7jex4QPnS4+voXGupTdC+UHW4XrR40QDdm4c9hXJ+Br0Il7PP0vP1W3goM9/Ly6Sg==}
     engines: {node: '>= 4.7.0'}

src/AppMobile.svelte

@@ -2,7 +2,7 @@
  import { onMount } from "svelte";
  import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp";
 
- import { App, View } from "framework7-svelte"
+ import { App, View, Preloader } from "framework7-svelte"
 
  import { f7, f7ready } from 'framework7-svelte';
 
@@ -15,8 +15,7 @@
  import AboutPage from './mobile/routes/about.svelte';
  import LoginPage from './mobile/routes/login.svelte';
  import GraphPage from './mobile/routes/graph.svelte';
- import ListSubWorkflowsPage from './mobile/routes/list-subworkflows.svelte';
+ import WorkflowPage from './mobile/routes/workflow.svelte';
- import SubWorkflowPage from './mobile/routes/subworkflow.svelte';
  import type { Framework7Parameters, Modal } from "framework7/types";
 
  export let app: ComfyApp;
@@ -51,11 +50,28 @@
      }
  }
 
+ let appSetupPromise: Promise<void> = null;
+ let loading = true;
+ let lastSize = Number.POSITIVE_INFINITY;
+
  onMount(async () => {
-     await app.setup();
+     appSetupPromise = app.setup().then(() => {
+         loading = false
+     });
      window.addEventListener("backbutton", onBackKeyDown, false);
      window.addEventListener("popstate", onBackKeyDown, false);
- });
+
+     // Blur any input elements when the virtual keyboard closes
+     // Otherwise tapping on other input events can refocus the input from way
+     // off the screen
+     window.visualViewport.addEventListener("resize", function(e) {
+         if (e.target.height > lastSize) {
+             // Assume keyboard was hidden
+             (document.activeElement as HTMLElement)?.blur();
+         }
+         lastSize = e.target.height
+     })
+ })
 
      /*
         Now we need to map components to routes.
@@ -79,23 +95,16 @@
              path: '/login/',
              component: LoginPage,
          },
+         // {
+         //     path: '/graph/',
+         //     component: GraphPage,
+         //     options: {
+         //         props: { app }
+         //     }
+         // },
          {
-             path: '/graph/',
+             path: '/workflows/:workflowID/',
-             component: GraphPage,
+             component: WorkflowPage,
-             options: {
-                 props: { app }
-             }
-         },
-         {
-             path: '/subworkflows/',
-             component: ListSubWorkflowsPage,
-             options: {
-                 props: { app }
-             }
-         },
-         {
-             path: '/subworkflows/:subworkflowID/',
-             component: SubWorkflowPage,
              options: {
                  props: { app }
              }
@@ -113,11 +122,21 @@
      actions: {
          closeOnEscape: true,
      },
+     touch: {
+         tapHold: true
+     }
  }
 </script>
 
-{#if app}
 <App theme="auto" name="ComfyBox" {...f7params}>
+    {#if appSetupPromise}
+        {#await appSetupPromise}
+            <div class="comfy-app-loading">
+                <div>
+                    <Preloader color="blue" size={100} />
+                </div>
+            </div>
+        {:then}
             <View
                 url="/"
                 main={true}
@@ -128,8 +147,47 @@
             >
                 <GenToolbar {app} />
             </View>
+        {:catch error}
+            <div class="comfy-loading-error">
+                <div>
+                    Error loading app
+                </div>
+                <div>{error}</div>
+                {#if error != null && error.stack}
+                    {@const lines = error.stack.split("\n")}
+                    {#each lines as line}
+                        <div style:font-size="16px">{line}</div>
+                    {/each}
+                {/if}
+            </div>
+        {/await}
+    {/if}
 </App>
 <div class="canvas-wrapper pane-wrapper" style="display: none">
     <canvas id="graph-canvas" />
 </div>
-{/if}
+
+<style lang="scss">
+ .comfy-app-loading, .comfy-loading-error {
+     font-size: 40px;
+     color: var(--body-text-color);
+     justify-content: center;
+     margin: auto;
+     width: 100%;
+     height: 100%;
+     text-align: center;
+     flex-direction: column;
+     display: flex;
+     position: absolute;
+     z-index: 100000000;
+     pointer-events: none;
+     user-select: none;
+     top: 0px;
+ }
+
+ .comfy-app-loading > span {
+     display: flex;
+     flex-direction: row;
+     justify-content: center;
+ }
+</style>

src/lib/components/f7/progressbar.svelte

@@ -0,0 +1,58 @@
+<!--
+Fix a framework7 issue
+https://github.com/framework7io/framework7/issues/4183
+-->
+<script>
+ let className = undefined;
+ export { className as class };
+
+ export let progress = 0;
+ export let infinite = false;
+
+ function colorClasses(props) {
+     const { color, textColor, bgColor, borderColor, rippleColor, dark } = props;
+
+     return {
+         dark,
+         [`color-${color}`]: color,
+         [`text-color-${textColor}`]: textColor,
+         [`bg-color-${bgColor}`]: bgColor,
+         [`border-color-${borderColor}`]: borderColor,
+         [`ripple-color-${rippleColor}`]: rippleColor,
+     };
+ }
+
+ function classNames(...args) {
+     const classes = [];
+     args.forEach((arg) => {
+         if (typeof arg === 'object' && arg.constructor === Object) {
+             Object.keys(arg).forEach((key) => {
+                 if (arg[key]) classes.push(key);
+             });
+         } else if (arg) classes.push(arg);
+     });
+     const uniqueClasses = [];
+     classes.forEach((c) => {
+         if (uniqueClasses.indexOf(c) < 0) uniqueClasses.push(c);
+     });
+     return uniqueClasses.join(' ');
+ }
+
+ let classes
+ $: classes = classNames(
+     className,
+     'progressbar',
+     {
+         'progressbar-infinite': infinite,
+     },
+     colorClasses($$props),
+ );
+
+ let transformStyle = ""
+ $: transformStyle = progress ? `translate3d(${-100 + progress}%, 0, 0)` : '';
+</script>
+
+<span class={classes}
+      data-progress={progress} >
+    <span style:transform={transformStyle} />
+</span>

src/lib/nodes/widgets/ComfyMarkdownNode.ts

@@ -42,6 +42,7 @@ export default class ComfyMarkdownNode extends ComfyWidgetNode<string> {
             },
             {
                 multiline: true,
+
                 inputStyle: { fontFamily: "monospace" }
             }
         )

src/lib/widgets/ComboWidget.svelte

@@ -74,26 +74,10 @@
      }
  }
 
- function onSelect(e: CustomEvent<any>) {
-     if (input)
-         input.blur();
-     navigator.vibrate(20)
-
-     const item = e.detail
-
-     console.debug("[ComboWidget] SELECT", item, item.index)
-     $nodeValue = item.value;
-     activeIndex = item.index;
-     listOpen = false;
- }
-
  let activeIndex = null;
  let hoverItemIndex = null;
  let filterText = "";
  let listOpen = null;
- let scrollToIndex = null;
- let start = 0;
- let end = 0;
 
  function handleHover(index: number) {
      // console.warn("HOV", index)
@@ -108,7 +92,9 @@
      $nodeValue = item.value
      listOpen = false;
      filterText = ""
-     input?.blur()
+     setTimeout(() => {
+         input?.blur();
+     }, 100)
  }
 
  function onFilter() {
@@ -174,7 +160,10 @@
             on:select={(e) => handleSelect(e.detail.index)}
             on:blur
             on:filter={onFilter}>
-            <div class="comfy-select-list" slot="list" let:filteredItems style:--maxLabelWidth={node.maxLabelWidthChars || 100}>
+            <div class="comfy-select-list" slot="list"
+                 class:mobile={isMobile}
+                 let:filteredItems
+                 style:--maxLabelWidth={node.maxLabelWidthChars || 100}>
                 {#if filteredItems.length > 0}
                     {@const itemSize = isMobile ? 50 : 25}
                     {@const itemsToShow = isMobile ? 10 : 30}
@@ -292,9 +281,14 @@
 
  .comfy-select-list {
      --maxLabelWidth: 100;
+     --maxListWidth: 50vw;
+     &.mobile {
+         --maxListWidth: 80vw;
+     }
+
      font-size: 14px;
-     width: min(calc((var(--maxLabelWidth) + 10) * 1ch), 50vw);
      color: var(--item-color);
+     width: min(calc((var(--maxLabelWidth) + 10) * 1ch), var(--maxListWidth));
 
      > :global(.virtual-list-wrapper) {
          box-shadow: var(--block-shadow);

src/mobile/GenToolbar.svelte

@@ -6,6 +6,7 @@
 
  import { Link, Toolbar } from "framework7-svelte"
  import ProgressBar from "$lib/components/ProgressBar.svelte";
+ import Progressbar from "$lib/components/f7/progressbar.svelte";
 	import Indicator from "./Indicator.svelte";
 	import interfaceState from "$lib/stores/interfaceState";
 	import type { WritableLayoutStateStore } from "$lib/stores/layoutStates";
@@ -53,24 +54,45 @@
      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>
 
 <div class="bottom">
-    {#if $queueState.runningNodeID || $queueState.progress}
+    <div class="bars">
+        {#if queued}
             <div class="node-name">
-            <span>Node: {getNodeInfo($queueState.runningNodeID)}</span>
+                <span>Node: {getNodeInfo($queueState.runningNodeID)} ({progressText})</span>
-        </div>
-        <div class="progress-bar">
-            <ProgressBar value={$queueState.progress?.value} max={$queueState.progress?.max} />
             </div>
         {/if}
-    {#if typeof $queueState.queueRemaining === "number" && $queueState.queueRemaining > 0}
-        <div class="queue-remaining in-progress">
-            <div>
-                Queued prompts: {$queueState.queueRemaining}.
-            </div>
     </div>
+    <div class="wrapper">
+        {#if queued}
+            {#if progress}
+                <Progressbar color="blue" progress={progressPercent} />
+            {:else if running}
+                <Progressbar color="blue" infinite />
             {/if}
+        {/if}
+    </div>
 </div>
 <Toolbar bottom>
     {#if workflow != null && workflow.attrs.queuePromptButtonName != ""}
@@ -94,19 +116,26 @@
  }
 
  .bottom {
-     display: flex;
-     flex-direction: row;
      position: absolute;
      text-align: center;
      width: 100%;
-     height: 2rem;
+     font-size: 13pt;
-     bottom: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
+     bottom: calc(var(--f7-toolbar-height));
      z-index: var(--layer-top);
-     background-color: grey;
+ }
+
+ .bars {
+     display: flex;
+     flex-direction: row;
+
+     .bars {
+         display: flex;
+         flex-direction: row;
+     }
 
      .node-name {
          flex-grow: 1;
-         background-color: var(--color-red-300);
+         background-color: var(--secondary-300);
          padding: 0.2em;
          display: flex;
          justify-content: center;

src/mobile/routes/home.svelte

@@ -1,34 +1,44 @@
 <script lang="ts">
  import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp";
+ import workflowState, { ComfyBoxWorkflow, type WorkflowInstID } from "$lib/stores/workflowState";
+ import { f7 } from 'framework7-svelte';
+ import { XCircle } from 'svelte-bootstrap-icons';
 
  import { Page, Navbar, Button, BlockTitle, Block, List, ListItem } from "framework7-svelte"
 
  export let app: ComfyApp | null = null;
 
  async function doLoadDefault() {
-     var confirmed = confirm("Would you like to load the default workflow in a new tab?");
+     f7.dialog.confirm("Would you like to load the default workflow in a new tab?", async () => {
-     if (confirmed) {
          await app.initDefaultWorkflow();
+     })
  }
- }
+
+ function onClickDelete(workflow: ComfyBoxWorkflow, e: Event) {
+     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); })}
 </script>
 
 <Page name="home">
     <Navbar title="Home Page" />
 
-    <BlockTitle>Yo</BlockTitle>
+    {#if $workflowState.openedWorkflows}
-    <Block>
-        <div>{app} Nodes</div>
-    </Block>
-
         <List strong inset dividersIos class="components-list searchbar-found">
-        <ListItem link="/subworkflows/" title="Workflows">
+            {#each $workflowState.openedWorkflows as workflow}
-            <i class="icon icon-f7" slot="media" />
+                <ListItem link="/workflows/{workflow.id}/" title={workflow.attrs.title || `Workflow: ${workflow.id}`}>
-        </ListItem>
+                    <svelte:fragment slot="media">
-        <ListItem link="/graph/" title="Show Node Graph">
+                        <div on:pointerdown={(e) => onClickDelete(workflow, e)}>
-            <i class="icon icon-f7" slot="media" />
+                            <XCircle width="1.5em" height="1.5em" />
+                        </div>
+                    </svelte:fragment>
                 </ListItem>
+            {/each}
         </List>
+    {:else}
+        (No workflows opened.)
+    {/if}
     <Block strong outlineIos>
         <Button fill={true} onClick={doLoadDefault}>Load Default Graph</Button>
     </Block>

src/mobile/routes/workflow.svelte

@@ -4,25 +4,38 @@
  import type ComfyApp from "$lib/components/ComfyApp";
  import { writable, type Writable } from "svelte/store";
  import type { WritableLayoutStateStore } from "$lib/stores/layoutStates";
- import workflowState, { type ComfyBoxWorkflow } from "$lib/stores/workflowState";
+ import workflowState, { type ComfyBoxWorkflow, type WorkflowInstID } from "$lib/stores/workflowState";
 
- export let subworkflowID: number = -1;
+ export let workflowID: WorkflowInstID;
  export let app: ComfyApp
 
- // TODO move
+ let workflow: ComfyBoxWorkflow;
- let workflow: ComfyBoxWorkflow | null = null
+ let root: IDragItem | null;
- let layoutState: WritableLayoutStateStore | null = null;
+ let title = ""
 
- $: workflow = $workflowState.activeWorkflow;
+ $: workflow = workflowState.getWorkflow(workflowID);
- $: layoutState = workflow ? workflow.layout : null;
+ $: layoutState = workflow?.layout;
+ $: title = workflow?.attrs?.title || `Workflow: ${workflowID}`;
+
+ $: if (layoutState && $layoutState.root) {
+     root = $layoutState.root
+ } else {
+     root = null;
+ }
 </script>
 
-<Page name="subworkflow">
+<Page name="workflow">
-    <Navbar title="Workflow {subworkflowID}" backLink="Back" />
+    <Navbar title="{title}" backLink="Back" />
 
-    {#if layoutState}
+    {#if workflow}
+        {#if root}
             <div class="container">
-            <WidgetContainer bind:dragItem={$layoutState.root} {layoutState} isMobile={true} classes={["root-container", "mobile"]} />
+                <WidgetContainer bind:dragItem={root} isMobile={true} classes={["root-container"]} {layoutState} />
+            </div>
+        {/if}
+    {:else}
+        <div>
+            Workflow not found.
         </div>
     {/if}
 </Page>