Switchable sidebars

src/lib/components/ComfyPaneView.svelte

@@ -8,36 +8,97 @@
   */
  import workflowState from "$lib/stores/workflowState";
  import type ComfyApp from "./ComfyApp";
+ import { Sliders2, LayoutTextSidebarReverse } from "svelte-bootstrap-icons";
 
  import ComfyBoxWorkflowView from "./ComfyBoxWorkflowView.svelte";
  import ComfyGraphView from "./ComfyGraphView.svelte";
  import ComfyProperties from "./ComfyProperties.svelte";
  import ComfyQueue from "./ComfyQueue.svelte";
+	import { SvelteComponent } from "svelte";
 
  export let app: ComfyApp
  export let mode: ComfyPaneMode = "none";
+ export let showSwitcher: boolean = false;
 
+ const MODES: [ComfyPaneMode, typeof SvelteComponent][] = [
+     ["properties", Sliders2],
+     ["queue", LayoutTextSidebarReverse]
+ ]
+
+ function switchMode(newMode: ComfyPaneMode) {
+     console.warn("switch", mode, newMode)
+     mode = newMode;
+ }
 </script>
 
-<div class="pane-wrapper">
-    {#if mode === "activeWorkflow"}
-        <ComfyBoxWorkflowView {app} workflow={$workflowState.activeWorkflow} />
-    {:else if mode === "graph"}
-        <ComfyGraphView {app} />
-    {:else if mode === "properties"}
-        <ComfyProperties workflow={$workflowState.activeWorkflow} />
-    {:else if mode === "queue"}
-        <ComfyQueue {app} />
-    {:else}
-        <div class="blank-panel">(Blank)</div>
+<div class="pane">
+    <div class="pane-wrapper" class:has-switcher={showSwitcher}>
+        {#if mode === "activeWorkflow"}
+            <ComfyBoxWorkflowView {app} workflow={$workflowState.activeWorkflow} />
+        {:else if mode === "graph"}
+            <ComfyGraphView {app} />
+        {:else if mode === "properties"}
+            <ComfyProperties workflow={$workflowState.activeWorkflow} />
+        {:else if mode === "queue"}
+            <ComfyQueue {app} />
+        {:else}
+            <div class="blank-panel">(Blank)</div>
+        {/if}
+    </div>
+    {#if showSwitcher}
+        <div class="switcher">
+            {#each MODES as [theMode, icon]}
+                <!-- svelte-ignore a11y-click-events-have-key-events -->
+                <button class="mode-button ternary"
+                        disabled={mode === theMode}
+                        class:selected={mode === theMode}
+                        on:click={() => switchMode(theMode)}>
+                    <svelte:component this={icon} width="100%" height="100%" />
+                </button>
+            {/each}
+        </div>
     {/if}
 </div>
 
 
 <style lang="scss">
- .pane-wrapper {
+ $button-height: 2.5rem;
+
+ .pane {
      width: 100%;
      height: 100%;
-     overflow: auto;
+
+     .pane-wrapper {
+         width: 100%;
+         height: 100%;
+         overflow-x: hidden;
+         overflow-y: auto;
+         &.has-switcher {
+             height: calc(100% - $button-height);
+         }
+     }
+
+     .switcher {
+         height: $button-height;
+         display: flex;
+         flex-direction: row;
+         color: var(--comfy-accent-soft);
+
+         .mode-button {
+             height: 100%;
+             width: 100%;
+             padding: 0.5rem;
+
+             @include square-button;
+
+             &:hover {
+                 color: var(--body-text-color);
+             }
+             &.selected {
+                 color: var(--body-text-color);
+                 background-color: var(--panel-background-fill);
+             }
+         }
+     }
  }
 </style>