Enhanced notification & configure default queue action

src/mobile/GenToolbar.svelte

@@ -2,6 +2,7 @@
  import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp";
 	import notify from "$lib/notify";
  import uiState from "$lib/stores/uiState";
+ import layoutState from "$lib/stores/layoutState";
  import queueState from "$lib/stores/queueState";
  import { getNodeInfo } from "$lib/utils"
 
@@ -16,14 +17,28 @@
  let fileInput: HTMLInputElement = undefined;
 
  function queuePrompt() {
-     app.queuePrompt(0, 1);
-     notify("Prompt was queued", "Queued");
+     navigator.vibrate(20)
+     app.runDefaultQueueAction()
+ }
+
+ function refreshCombos() {
+     navigator.vibrate(20)
+     app.refreshComboInNodes()
+ }
+
+ function doSave(): void {
+     if (!app?.lGraph || !fileInput)
+         return;
+
+     navigator.vibrate(20)
+     app.querySave()
  }
 
  function doLoad(): void {
      if (!app?.lGraph || !fileInput)
          return;
 
+     navigator.vibrate(20)
      fileInput.click();
  }
 
@@ -31,6 +46,15 @@
      app.handleFile(fileInput.files[0]);
      fileInput.files = null;
 }
+
+ function doSaveLocal(): void {
+     if (!app?.lGraph)
+         return;
+
+     navigator.vibrate(20)
+     app.saveStateToLocalStorage();
+     notify("Saved to local storage.")
+ }
 </script>
 
 <div class="bottom">
@@ -51,7 +75,14 @@
     {/if}
 </div>
 <Toolbar bottom>
-    <Link on:click={() => app.refreshComboInNodes()}>🔄</Link>
+    {#if $layoutState.attrs.queuePromptButtonName != ""}
+        <Link on:click={queuePrompt}>
+        {$layoutState.attrs.queuePromptButtonName}
+        </Link>
+    {/if}
+    <Link on:click={refreshCombos}>🔄</Link>
+    <Link on:click={doSave}>Save</Link>
+    <Link on:click={doSaveLocal}>Save Local</Link>
     <Link on:click={doLoad}>Load</Link>
     <input bind:this={fileInput} id="comfy-file-input" type="file" accept=".json" on:change={loadWorkflow} />
 </Toolbar>

src/mobile/routes/home.svelte

@@ -1,21 +1,17 @@
 <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 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 } from "framework7-svelte"
+ import { Page, Navbar, Button, BlockTitle, Block, List, ListItem } from "framework7-svelte"
+ import defaultGraph from "$lib/defaultGraph";
 
  export let app: ComfyApp | null = null;
 
+ async function doLoadDefault() {
+     var confirmed = confirm("Are you sure you want to clear the current workflow and load the default graph?");
+     if (confirmed) {
+         await app.deserialize(defaultGraph)
+     }
+ }
 </script>
 
 <Page name="home">
@@ -34,4 +30,7 @@
             <i class="icon icon-f7" slot="media" />
         </ListItem>
     </List>
+    <Block strong outlineIos>
+        <Button fill={true} onClick={doLoadDefault}>Load Default Graph</Button>
+    </Block>
 </Page>

src/mobile/routes/subworkflow.svelte

@@ -21,6 +21,9 @@
 <style lang="scss">
  .container {
      overflow-x: hidden;
+
+     // Disable pull to refresh
+     overscroll-behavior-y: contain;
  }
 
  // TODO generalize this to all properties!