Progressbar on mobile improvement

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,29 +54,50 @@
      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="node-name">
-            <span>Node: {getNodeInfo($queueState.runningNodeID)}</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 class="bars">
+        {#if queued}
+            <div class="node-name">
+                <span>Node: {getNodeInfo($queueState.runningNodeID)} ({progressText})</span>
             </div>
-        </div>
-    {/if}
+        {/if}
+    </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 != ""}
         <Link on:click={queuePrompt}>
-            {workflow.attrs.queuePromptButtonName}
+        {workflow.attrs.queuePromptButtonName}
         </Link>
     {/if}
     <Link on:click={refreshCombos}>🔄</Link>
@@ -94,19 +116,26 @@
  }
 
  .bottom {
-     display: flex;
-     flex-direction: row;
      position: absolute;
      text-align: center;
      width: 100%;
-     height: 2rem;
-     bottom: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
+     font-size: 13pt;
+     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?");
-     if (confirmed) {
+     f7.dialog.confirm("Would you like to load the default workflow in a new tab?", async () => {
          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>
-    <Block>
-        <div>{app} Nodes</div>
-    </Block>
-
-    <List strong inset dividersIos class="components-list searchbar-found">
-        <ListItem link="/subworkflows/" title="Workflows">
-            <i class="icon icon-f7" slot="media" />
-        </ListItem>
-        <ListItem link="/graph/" title="Show Node Graph">
-            <i class="icon icon-f7" slot="media" />
-        </ListItem>
-    </List>
+    {#if $workflowState.openedWorkflows}
+        <List strong inset dividersIos class="components-list searchbar-found">
+            {#each $workflowState.openedWorkflows as workflow}
+                <ListItem link="/workflows/{workflow.id}/" 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" />
+                        </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 | null = null
- let layoutState: WritableLayoutStateStore | null = null;
+ let workflow: ComfyBoxWorkflow;
+ let root: IDragItem | null;
+ let title = ""
 
- $: workflow = $workflowState.activeWorkflow;
- $: layoutState = workflow ? workflow.layout : null;
+ $: workflow = workflowState.getWorkflow(workflowID);
+ $: layoutState = workflow?.layout;
+ $: title = workflow?.attrs?.title || `Workflow: ${workflowID}`;
+
+ $: if (layoutState && $layoutState.root) {
+     root = $layoutState.root
+ } else {
+     root = null;
+ }
 </script>
 
-<Page name="subworkflow">
-    <Navbar title="Workflow {subworkflowID}" backLink="Back" />
+<Page name="workflow">
+    <Navbar title="{title}" backLink="Back" />
 
-    {#if layoutState}
-        <div class="container">
-            <WidgetContainer bind:dragItem={$layoutState.root} {layoutState} isMobile={true} classes={["root-container", "mobile"]} />
+    {#if workflow}
+        {#if root}
+            <div class="container">
+                <WidgetContainer bind:dragItem={root} isMobile={true} classes={["root-container"]} {layoutState} />
+            </div>
+        {/if}
+    {:else}
+        <div>
+            Workflow not found.
         </div>
     {/if}
 </Page>