Updates for mobile

src/mobile/GenToolbar.svelte

@@ -1,38 +1,101 @@
 <script lang="ts">
  import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp";
+	import notify from "$lib/notify";
  import uiState from "$lib/stores/uiState";
+ import queueState from "$lib/stores/queueState";
+ import { getNodeInfo } from "$lib/utils"
 
  import { Link, Toolbar } from "framework7-svelte"
- import { f7 } from "framework7-svelte"
+ import ProgressBar from "$lib/components/ProgressBar.svelte";
 
  export let subworkflowID: number = -1;
  let app: ComfyApp = undefined;
+ let fileInput: HTMLInputElement = undefined;
 
  $: if (!app)
      app = $uiState.app
 
  function queuePrompt() {
      app.queuePrompt(0, 1);
-     showNotification();
+     notify("Prompt was queued", "Queued");
  }
 
- let notification;
- const showNotification = () => {
-     if (!notification) {
-         notification = f7.notification.create({
-             title: 'Queued',
-             titleRightText: 'now',
-             // subtitle: 'Notification with close on click',
-             text: 'Prompt was queued',
-             closeOnClick: true,
-             closeTimeout: 3000,
-         });
-     }
-     // Open it
-     notification.open();
+ function doLoad(): void {
+     if (!app?.lGraph || !fileInput)
+         return;
+
+     fileInput.click();
  }
+
+ function loadWorkflow(): void {
+     app.handleFile(fileInput.files[0]);
+     fileInput.files = null;
+}
 </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>
+        </div>
+    {/if}
+</div>
 <Toolbar bottom>
     <Link on:click={queuePrompt}>Queue Prompt</Link>
+    <Link on:click={() => app.refreshComboInNodes()}>🔄</Link>
+    <Link on:click={doLoad}>Load</Link>
+    <input bind:this={fileInput} id="comfy-file-input" type="file" accept=".json" on:change={loadWorkflow} />
 </Toolbar>
+
+<style lang="scss">
+ #comfy-file-input {
+     display: none;
+ }
+
+ .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));
+     z-index: var(--layer-top);
+     background-color: grey;
+
+     .node-name {
+         flex-grow: 1;
+         background-color: var(--color-red-300);
+         padding: 0.2em;
+         display: flex;
+         justify-content: center;
+         align-items: center;
+     }
+
+     .progress-bar {
+         flex-grow: 10;
+         background-color: var(--color-red-300);
+         display: flex;
+         justify-content: center;
+         align-items: center;
+     }
+
+     .queue-remaining {
+         flex-grow: 1;
+         padding: 0.2em;
+         &.in-progress {
+             background-color: var(--secondary-300);
+         }
+     }
+ }
+</style>