linear v2: Simple Mode (#7734)

A major, full rewrite of linear mode, now under the name "Simple Mode". 
- Fixes widget styling
- Adds a new simplified history
- Adds support for non-image outputs
- Supports right sidebar
- Allows and panning on the output image preview
- Provides support for drag and drop zones
- Moves workflow notes into a popover.
- Allows scrolling through outputs with Ctrl+scroll or arrow keys

The primary means of accessing Simple Mode is a toggle button on the
bottom right. This button is only shown if a feature flag is enabled, or
the user has already seen linear mode during the current session. Simple
Mode can also be accessed by
- Using the toggle linear mode keybind
- Loading a workflow that that was saved in Simple Mode workflow
- Loading a template url with appropriate parameter

<img width="1790" height="1387" alt="image"
src="https://github.com/user-attachments/assets/d86a4a41-dfbf-41e7-a6d9-146473005606"
/>

Known issues:
- Outputs on cloud are not filtered to those produced by the current
workflow.
  - Output filtering has been globally disabled for consistency
- Outputs will load more items on scroll, but does not unload
- Performance may be reduced on weak devices with very large histories.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7734-linear-v2-2d16d73d3650819b8a10f150ff12ea22)
by [Unito](https://www.unito.io)

src/components/sidebar/ModeToggle.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import Button from '@/components/ui/button/Button.vue'
+import { t } from '@/i18n'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useCommandStore } from '@/stores/commandStore'
+
+const canvasStore = useCanvasStore()
+</script>
+<template>
+  <div class="p-1 bg-secondary-background rounded-lg w-10">
+    <Button
+      size="icon"
+      :title="t('linearMode.linearMode')"
+      :variant="canvasStore.linearMode ? 'inverted' : 'secondary'"
+      @click="useCommandStore().execute('Comfy.ToggleLinear')"
+    >
+      <i class="icon-[lucide--panels-top-left]" />
+    </Button>
+    <Button
+      size="icon"
+      :title="t('linearMode.graphMode')"
+      :variant="canvasStore.linearMode ? 'secondary' : 'inverted'"
+      @click="useCommandStore().execute('Comfy.ToggleLinear')"
+    >
+      <i class="icon-[comfy--workflow]" />
+    </Button>
+  </div>
+</template>

src/components/sidebar/SideToolbar.vue

@@ -44,6 +44,7 @@
         <SidebarBottomPanelToggleButton :is-small="isSmall" />
         <SidebarShortcutsToggleButton :is-small="isSmall" />
         <SidebarSettingsButton :is-small="isSmall" />
+        <ModeToggle v-if="showLinearToggle" />
       </div>
     </div>
     <HelpCenterPopups :is-small="isSmall" />
@@ -51,15 +52,17 @@
 </template>
 
 <script setup lang="ts">
-import { useResizeObserver } from '@vueuse/core'
+import { useResizeObserver, whenever } from '@vueuse/core'
 import { debounce } from 'es-toolkit/compat'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 import HelpCenterPopups from '@/components/helpcenter/HelpCenterPopups.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'
@@ -84,6 +87,12 @@ const sideToolbarRef = ref<HTMLElement>()
 const topToolbarRef = ref<HTMLElement>()
 const bottomToolbarRef = ref<HTMLElement>()
 
+const showLinearToggle = ref(useFeatureFlags().flags.linearToggleEnabled)
+whenever(
+  () => canvasStore.linearMode,
+  () => (showLinearToggle.value = true)
+)
+
 const isSmall = computed(
   () => settingStore.get('Comfy.Sidebar.Size') === 'small'
 )

src/components/sidebar/tabs/WorkflowsSidebarTab.vue

@@ -1,6 +1,7 @@
 <template>
   <SidebarTabTemplate
     :title="$t('sideToolbar.workflows')"
+    v-bind="$attrs"
     class="workflows-sidebar-tab"
   >
     <template #tool-buttons>