Mobile queue

src/mobile/routes/workflow.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
- import { Page, Navbar, Tabs, Tab, NavLeft, NavTitle, NavRight, Link } from "framework7-svelte"
+ import { Page, Navbar, Tabs, Tab, NavLeft, NavTitle, NavRight, Link, Actions, ActionsGroup, ActionsButton, ActionsLabel, Sheet, Toolbar, PageContent, Block } from "framework7-svelte"
  import WidgetContainer from "$lib/components/WidgetContainer.svelte";
  import type ComfyApp from "$lib/components/ComfyApp";
  import { writable, type Writable } from "svelte/store";
+ import { MenuUp } from 'svelte-bootstrap-icons';
  import type { IDragItem, WritableLayoutStateStore } from "$lib/stores/layoutStates";
  import workflowState, { type ComfyBoxWorkflow, type WorkflowInstID } from "$lib/stores/workflowState";
  import interfaceState from "$lib/stores/interfaceState";
  import { onMount } from "svelte";
  import GenToolbar from '../GenToolbar.svelte'
+	import { onDestroy } from "svelte";
 
  export let workflowIndex: number;
  export let app: ComfyApp
@@ -15,6 +17,7 @@
  let workflow: ComfyBoxWorkflow;
  let root: IDragItem | null;
  let title = ""
+ let actionsOpened = false;
 
  function onPageBeforeIn() {
      workflow = $workflowState.openedWorkflows[workflowIndex-1]
@@ -23,12 +26,23 @@
      }
      $interfaceState.selectedWorkflowIndex = workflowIndex
      $interfaceState.showingWorkflow = true;
+     $interfaceState.selectedTab = 1;
  }
 
  function onPageBeforeOut() {
      $interfaceState.showingWorkflow = false;
  }
 
+ async function refreshCombos() {
+     navigator.vibrate(20)
+     await app.refreshComboInNodes()
+ }
+
+ function doSaveLocal(): void {
+     navigator.vibrate(20)
+     app.saveStateToLocalStorage();
+ }
+
  $: layoutState = workflow?.layout;
  $: title = workflow?.attrs?.title || `Workflow: ${workflow?.id || workflowIndex}`;
 
@@ -47,7 +61,9 @@
         <NavLeft backLink="Back" backLinkUrl="/workflows/" backLinkForce={true}></NavLeft>
         <NavTitle>{title}</NavTitle>
         <NavRight>
-            <Link icon="icon-bars" panelOpen="right"></Link>
+            <Link icon="icon-bars" on:click={() => {actionsOpened = true;}}>
+            <MenuUp />
+            </Link>
         </NavRight>
     </Navbar>
 
@@ -62,6 +78,16 @@
             Workflow not found.
         </div>
     {/if}
+
+  <Actions bind:opened={actionsOpened}>
+    <ActionsGroup>
+      <ActionsLabel>Actions</ActionsLabel>
+      <ActionsButton strong on:click={refreshCombos}>Refresh Dropdowns</ActionsButton>
+      <ActionsButton strong on:click={doSaveLocal}>Save to Local Storage</ActionsButton>
+      <!-- <ActionsButton>Button 2</ActionsButton> -->
+      <ActionsButton color="red">Cancel</ActionsButton>
+    </ActionsGroup>
+  </Actions>
 </Page>
 
 <style lang="scss">
@@ -81,4 +107,8 @@
  :global(.root-container.mobile > .block > .v-pane) {
      flex-direction: column !important;
  }
+
+ .demo-sheet-push {
+     bottom: calc(var(--f7-toolbar-height) * 3);
+ }
 </style>