Global toolbar

src/AppMobile.svelte

@@ -20,6 +20,8 @@
  import "framework7/css/bundle"
  import "./scss/global.scss";
 
+ import GenToolbar from './mobile/GenToolbar.svelte'
+
  import HomePage from './mobile/routes/home.svelte';
  import AboutPage from './mobile/routes/about.svelte';
  import LoginPage from './mobile/routes/login.svelte';
@@ -99,6 +101,8 @@
         masterDetailBreakpoint={768},
         browserHistory=true,
         browserHistoryRoot="/mobile/"
-    />
+    >
+        <GenToolbar/>
+    </View>
 </App>
 {/if}

src/mobile/GenToolbar.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+ import { onMount } from "svelte";
+ import { get } from "svelte/store";
+ import { Pane, Splitpanes } from 'svelte-splitpanes';
+ import { Button } from "@gradio/button";
+ import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp";
+ import { Checkbox } from "@gradio/form"
+ import widgetState from "$lib/stores/widgetState";
+ import nodeState from "$lib/stores/nodeState";
+ import uiState from "$lib/stores/uiState";
+ import { ImageViewer } from "$lib/ImageViewer";
+ import { download } from "$lib/utils"
+
+ import { LGraph, LGraphNode } from "@litegraph-ts/core";
+ import type { ComfyAPIStatus } from "$lib/api";
+ import queueState from "$lib/stores/queueState";
+ import { Page, Navbar, Link, BlockTitle, Block, List, ListItem, Toolbar } from "framework7-svelte"
+ import { getComponentForWidgetState } from "$lib/utils"
+ import { f7 } from "framework7-svelte"
+
+ export let subworkflowID: number = -1;
+ let app: ComfyApp = undefined;
+
+ $: if (!app)
+     app = $uiState.app
+
+ function queuePrompt() {
+     app.queuePrompt(0, 1);
+     showNotification();
+ }
+
+ 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();
+ }
+</script>
+
+<Toolbar bottom>
+    <Link on:click={queuePrompt}>Queue Prompt</Link>
+</Toolbar>

src/mobile/routes/subworkflow.svelte

@@ -24,33 +24,10 @@
  $: if (!app)
      app = $uiState.app
 
- function queuePrompt() {
-     app.queuePrompt(0, 1);
-     showNotification();
- }
-
- 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();
- }
 </script>
 
 <Page name="subworkflow">
     <Navbar title="Workflow {subworkflowID}" backLink="Back" />
-    <Toolbar bottom>
-        <Link on:click={queuePrompt}>Queue Prompt</Link>
-    </Toolbar>
 
     {#each Object.entries($widgetState) as [id, ws]}
         {@const node = app.lGraph.getNodeById(id)}