Improve sidebars

package.json

@@ -22,6 +22,7 @@
     "eslint-plugin-svelte3": "^4.0.0",
     "prettier": "^2.8.7",
     "prettier-plugin-svelte": "^2.10.0",
+    "sass": "^1.61.0",
     "svelte": "^3.58.0",
     "svelte-check": "^3.2.0",
     "svelte-dnd-action": "^0.9.22",

pnpm-lock.yaml

@@ -23,6 +23,7 @@ importers:
       prettier: ^2.8.7
       prettier-plugin-svelte: ^2.10.0
       radix-icons-svelte: ^1.2.1
+      sass: ^1.61.0
       svelte: ^3.58.0
       svelte-check: ^3.2.0
       svelte-dnd-action: ^0.9.22
@@ -48,7 +49,7 @@ importers:
       events: 3.3.0
       pollen-css: 4.6.2
       radix-icons-svelte: 1.2.1
-      svelte-preprocess: 5.0.3_ex2livsgfbezl6rd73hucsky7y
+      svelte-preprocess: 5.0.3_3gubijbxbisgisegeglxqngyuq
       svelte-splitpanes: 0.7.13_svelte@3.58.0
       tailwindcss: 3.3.1
       typed-emitter: github.com/andywer/typed-emitter/9a139b6fa0ec6b0db6141b5b756b784e4f7ef4e4
@@ -61,13 +62,14 @@ importers:
       eslint-plugin-svelte3: 4.0.0_4gllgxcu6gmiyy5rrmqexpx7de
       prettier: 2.8.7
       prettier-plugin-svelte: 2.10.0_ur5pqdgn24bclu6l6i7qojopk4
+      sass: 1.61.0
       svelte: 3.58.0
-      svelte-check: 3.2.0_svelte@3.58.0
+      svelte-check: 3.2.0_sass@1.61.0+svelte@3.58.0
       svelte-dnd-action: 0.9.22_svelte@3.58.0
       typescript: 5.0.3
-      vite: 4.2.1
+      vite: 4.2.1_sass@1.61.0
       vite-tsconfig-paths: 4.0.8_mqt6hr36lqfsnn3kcfure5ceka
-      vitest: 0.25.8
+      vitest: 0.25.8_sass@1.61.0
 
 packages:
 
@@ -381,7 +383,7 @@ packages:
       svelte: 3.58.0
       tiny-glob: 0.2.9
       undici: 5.20.0
-      vite: 4.2.1
+      vite: 4.2.1_sass@1.61.0
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -399,7 +401,7 @@ packages:
       magic-string: 0.30.0
       svelte: 3.58.0
       svelte-hmr: 0.15.1_svelte@3.58.0
-      vite: 4.2.1
+      vite: 4.2.1_sass@1.61.0
       vitefu: 0.2.4_vite@4.2.1
     transitivePeerDependencies:
       - supports-color
@@ -989,6 +991,9 @@ packages:
     engines: {node: '>= 4'}
     dev: true
 
+  /immutable/4.3.0:
+    resolution: {integrity: sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==}
+
   /import-fresh/3.3.0:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
     engines: {node: '>=6'}
@@ -1492,6 +1497,15 @@ packages:
       mkdirp: 0.5.6
       rimraf: 2.7.1
 
+  /sass/1.61.0:
+    resolution: {integrity: sha512-PDsN7BrVkNZK2+dj/dpKQAWZavbAQ87IXqVvw2+oEYI+GwlTWkvbQtL7F2cCNbMqJEYKPh1EcjSxsnqIb/kyaQ==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+    dependencies:
+      chokidar: 3.5.3
+      immutable: 4.3.0
+      source-map-js: 1.0.2
+
   /set-cookie-parser/2.6.0:
     resolution: {integrity: sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ==}
     dev: true
@@ -1588,7 +1602,7 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
-  /svelte-check/3.2.0_svelte@3.58.0:
+  /svelte-check/3.2.0_sass@1.61.0+svelte@3.58.0:
     resolution: {integrity: sha512-6ZnscN8dHEN5Eq5LgIzjj07W9nc9myyBH+diXsUAuiY/3rt0l65/LCIQYlIuoFEjp2F1NhXqZiJwV9omPj9tMw==}
     hasBin: true
     peerDependencies:
@@ -1601,7 +1615,7 @@ packages:
       picocolors: 1.0.0
       sade: 1.8.1
       svelte: 3.58.0
-      svelte-preprocess: 5.0.3_ex2livsgfbezl6rd73hucsky7y
+      svelte-preprocess: 5.0.3_3gubijbxbisgisegeglxqngyuq
       typescript: 5.0.3
     transitivePeerDependencies:
       - '@babel/core'
@@ -1632,7 +1646,7 @@ packages:
       svelte: 3.58.0
     dev: true
 
-  /svelte-preprocess/5.0.3_ex2livsgfbezl6rd73hucsky7y:
+  /svelte-preprocess/5.0.3_3gubijbxbisgisegeglxqngyuq:
     resolution: {integrity: sha512-GrHF1rusdJVbOZOwgPWtpqmaexkydznKzy5qIC2FabgpFyKN57bjMUUUqPRfbBXK5igiEWn1uO/DXsa2vJ5VHA==}
     engines: {node: '>= 14.10.0'}
     requiresBuild: true
@@ -1673,6 +1687,7 @@ packages:
       '@types/pug': 2.0.6
       detect-indent: 6.1.0
       magic-string: 0.27.0
+      sass: 1.61.0
       sorcery: 0.11.0
       strip-indent: 3.0.0
       svelte: 3.58.0
@@ -1841,7 +1856,7 @@ packages:
     dependencies:
       picocolors: 1.0.0
       picomatch: 2.3.1
-      vite: 4.2.1
+      vite: 4.2.1_sass@1.61.0
     dev: false
 
   /vite-tsconfig-paths/4.0.8_mqt6hr36lqfsnn3kcfure5ceka:
@@ -1855,45 +1870,13 @@ packages:
       debug: 4.3.4
       globrex: 0.1.2
       tsconfck: 2.1.1_typescript@5.0.3
-      vite: 4.2.1
+      vite: 4.2.1_sass@1.61.0
     transitivePeerDependencies:
       - supports-color
       - typescript
     dev: true
 
-  /vite/4.2.1:
+  /vite/4.2.1_4q5mxzltflcgkzvnigcbiggbqa:
-    resolution: {integrity: sha512-7MKhqdy0ISo4wnvwtqZkjke6XN4taqQ2TBaTccLIpOKv7Vp2h4Y+NpmWCnGDeSvvn45KxvWgGyb0MkHvY1vgbg==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    hasBin: true
-    peerDependencies:
-      '@types/node': '>= 14'
-      less: '*'
-      sass: '*'
-      stylus: '*'
-      sugarss: '*'
-      terser: ^5.4.0
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-      less:
-        optional: true
-      sass:
-        optional: true
-      stylus:
-        optional: true
-      sugarss:
-        optional: true
-      terser:
-        optional: true
-    dependencies:
-      esbuild: 0.17.15
-      postcss: 8.4.21
-      resolve: 1.22.2
-      rollup: 3.20.2
-    optionalDependencies:
-      fsevents: 2.3.2
-
-  /vite/4.2.1_@types+node@18.15.11:
     resolution: {integrity: sha512-7MKhqdy0ISo4wnvwtqZkjke6XN4taqQ2TBaTccLIpOKv7Vp2h4Y+NpmWCnGDeSvvn45KxvWgGyb0MkHvY1vgbg==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
@@ -1923,10 +1906,44 @@ packages:
       postcss: 8.4.21
       resolve: 1.22.2
       rollup: 3.20.2
+      sass: 1.61.0
     optionalDependencies:
       fsevents: 2.3.2
     dev: true
 
+  /vite/4.2.1_sass@1.61.0:
+    resolution: {integrity: sha512-7MKhqdy0ISo4wnvwtqZkjke6XN4taqQ2TBaTccLIpOKv7Vp2h4Y+NpmWCnGDeSvvn45KxvWgGyb0MkHvY1vgbg==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': '>= 14'
+      less: '*'
+      sass: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+    dependencies:
+      esbuild: 0.17.15
+      postcss: 8.4.21
+      resolve: 1.22.2
+      rollup: 3.20.2
+      sass: 1.61.0
+    optionalDependencies:
+      fsevents: 2.3.2
+
   /vitefu/0.2.4_vite@4.2.1:
     resolution: {integrity: sha512-fanAXjSaf9xXtOOeno8wZXIhgia+CZury481LsDaV++lSvcU2R9Ch2bPh3PYFyoHW+w9LqAeYRISVQjUIew14g==}
     peerDependencies:
@@ -1935,10 +1952,10 @@ packages:
       vite:
         optional: true
     dependencies:
-      vite: 4.2.1
+      vite: 4.2.1_sass@1.61.0
     dev: true
 
-  /vitest/0.25.8:
+  /vitest/0.25.8_sass@1.61.0:
     resolution: {integrity: sha512-X75TApG2wZTJn299E/TIYevr4E9/nBo1sUtZzn0Ci5oK8qnpZAZyhwg0qCeMSakGIWtc6oRwcQFyFfW14aOFWg==}
     engines: {node: '>=v14.16.0'}
     hasBin: true
@@ -1973,7 +1990,7 @@ packages:
       tinybench: 2.4.0
       tinypool: 0.3.1
       tinyspy: 1.1.1
-      vite: 4.2.1_@types+node@18.15.11
+      vite: 4.2.1_4q5mxzltflcgkzvnigcbiggbqa
     transitivePeerDependencies:
       - less
       - sass

src/lib/components/ComfyApp.svelte

@@ -37,6 +37,18 @@
      }
  }
 
+ let sidebarSize = 20;
+
+ function toggleSidebar() {
+     if (sidebarSize == 0) {
+         sidebarSize = 20;
+         app.resizeCanvas();
+     }
+     else {
+         sidebarSize = 0;
+     }
+ }
+
  let graphResizeTimer: typeof Timer = -1;
 
  onMount(async () => {
@@ -64,17 +76,17 @@
     <Splitpanes theme="comfy" on:resize={refreshView}>
         <Pane>
             <Splitpanes theme="comfy" on:resize={refreshView} horizontal="{true}">
-                <Pane minSize={15}>
+                <Pane>
                     <ComfyUIPane bind:this={uiPane} {app} />
                 </Pane>
-                <Pane snapSize={10} bind:size={graphSize}>
+                <Pane bind:size={graphSize}>
                     <div class="canvas-wrapper">
                         <canvas id="graph-canvas" />
                     </div>
                 </Pane>
             </Splitpanes>
         </Pane>
-        <Pane size={20} snapSize={10}>
+        <Pane bind size={sidebarSize}>
             <div>
                 Sidebar
             </div>
@@ -86,11 +98,16 @@
         Run
     </Button>
     <Button variant="secondary" on:click={toggleGraph}>
-        Show/Hide Graph
+        Toggle Graph
+    </Button>
+    <Button variant="secondary" on:click={toggleSidebar}>
+        Toggle Sidebar
     </Button>
 </div>
 
-<style>
+<style lang="scss">
+ @import '../../scss/shared.scss';
+
  #container {
      height: calc(100vh - 60px);
      max-width: 100vw;
@@ -142,6 +159,17 @@
      font-family: Arial;
  }
 
+ :global(.splitpanes.comfy>.splitpanes__splitter) {
+     background-color: var(--secondary-100);
+
+     &:hover:not([disabled]) {
+         background-color: var(--secondary-300);
+     }
+     &:active:not([disabled]) {
+         background-color: var(--secondary-400);
+     }
+ }
+
  :global(.splitpanes.comfy.splitpanes--horizontal>.splitpanes__splitter) {
      min-height: 20px;
      cursor: row-resize;