Sidebar cleanup, toggle as feature flag

src/components/sidebar/ModeToggle.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import Button from '@/components/ui/button/Button.vue'
+import { t } from '@/i18n'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+
+const canvasStore = useCanvasStore()
+</script>
+<template>
+  <div class="p-1 bg-secondary-background rounded-lg w-10">
+    <Button
+      class="disabled:opacity-100"
+      size="icon"
+      :title="t('Simple Mode')"
+      :disabled="canvasStore.linearMode"
+      :variant="canvasStore.linearMode ? 'inverted' : 'secondary'"
+      @click="canvasStore.linearMode = true"
+    >
+      <i class="icon-[lucide--panels-top-left]" />
+    </Button>
+    <Button
+      class="disabled:opacity-100"
+      size="icon"
+      :title="t('Graph Mode')"
+      :disabled="!canvasStore.linearMode"
+      :variant="canvasStore.linearMode ? 'secondary' : 'inverted'"
+      @click="canvasStore.linearMode = false"
+    >
+      <i class="icon-[comfy--workflow]" />
+    </Button>
+  </div>
+</template>

src/components/sidebar/SideToolbar.vue

@@ -44,6 +44,12 @@
         <SidebarBottomPanelToggleButton :is-small="isSmall" />
         <SidebarShortcutsToggleButton :is-small="isSmall" />
         <SidebarSettingsButton :is-small="isSmall" />
+        <ModeToggle
+          v-if="
+            useFeatureFlags().flags.linearToggleEnabled ||
+            canvasStore.linearMode
+          "
+        />
       </div>
     </div>
   </nav>
@@ -55,9 +61,11 @@ import { debounce } from 'es-toolkit/compat'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 import ComfyMenuButton from '@/components/sidebar/ComfyMenuButton.vue'
+import ModeToggle from '@/components/sidebar/ModeToggle.vue'
 import SidebarBottomPanelToggleButton from '@/components/sidebar/SidebarBottomPanelToggleButton.vue'
 import SidebarSettingsButton from '@/components/sidebar/SidebarSettingsButton.vue'
 import SidebarShortcutsToggleButton from '@/components/sidebar/SidebarShortcutsToggleButton.vue'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'

src/composables/useFeatureFlags.ts

@@ -14,7 +14,8 @@ export enum ServerFeatureFlag {
   ASSET_UPDATE_OPTIONS_ENABLED = 'asset_update_options_enabled',
   PRIVATE_MODELS_ENABLED = 'private_models_enabled',
   ONBOARDING_SURVEY_ENABLED = 'onboarding_survey_enabled',
-  HUGGINGFACE_MODEL_IMPORT_ENABLED = 'huggingface_model_import_enabled'
+  HUGGINGFACE_MODEL_IMPORT_ENABLED = 'huggingface_model_import_enabled',
+  LINEAR_TOGGLE_ENABLED = 'linear_toggle_enabled'
 }
 
 /**
@@ -73,6 +74,15 @@ export function useFeatureFlags() {
           false
         )
       )
+    },
+    get linearToggleEnabled() {
+      return (
+        remoteConfig.value.linear_toggle_enabled ??
+        api.getServerFeature(
+          ServerFeatureFlag.HUGGINGFACE_MODEL_IMPORT_ENABLED,
+          false
+        )
+      )
     }
   })
 

src/platform/remoteConfig/types.ts

@@ -39,4 +39,5 @@ export type RemoteConfig = {
   private_models_enabled?: boolean
   onboarding_survey_enabled?: boolean
   huggingface_model_import_enabled?: boolean
+  linear_toggle_enabled?: boolean
 }

src/views/LinearView.vue

@@ -16,6 +16,7 @@ import { computed, ref, shallowRef, useTemplateRef, watch } from 'vue'
 
 import { downloadFile } from '@/base/common/downloadUtil'
 import Load3dViewerContent from '@/components/load3d/Load3dViewerContent.vue'
+import SidebarTemplatesButton from '@/components/sidebar/SidebarTemplatesButton.vue'
 import TopbarBadges from '@/components/topbar/TopbarBadges.vue'
 import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
 import Popover from '@/components/ui/Popover.vue'
@@ -394,18 +395,19 @@ onKeyStroke('ArrowUp', gotoPreviousOutput)
     >
       <SplitterPanel :size="1" class="min-w-38 bg-comfy-menu-bg flex">
         <div
-          class="h-full flex flex-col items-end align-center w-14 p-2 border-r border-node-component-border"
+          class="h-full flex flex-col w-14 shrink-0 overflow-hidden items-center p-2 border-r border-node-component-border"
         >
           <Button class="bg-transparent">
             <i class="size-4 icon-[comfy--workflow] bg-muted-foreground" />
           </Button>
+          <SidebarTemplatesButton />
           <div class="flex-1" />
           <div class="p-1 bg-secondary-background rounded-lg w-10">
-            <!--FIXME: pointer-events-none means no tooltips-->
             <Button
-              class="pointer-events-none"
+              class="disabled:opacity-100"
               size="icon"
               :title="t('Simple Mode')"
+              disabled
               variant="inverted"
             >
               <i class="icon-[lucide--panels-top-left]" />