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/renderer/extensions/vueNodes/components/LGraphNode.vue

@@ -40,7 +40,7 @@
         transform: `translate(${position.x ?? 0}px, ${(position.y ?? 0) - LiteGraph.NODE_TITLE_HEIGHT}px)`,
         zIndex: zIndex,
         opacity: nodeOpacity,
-        '--component-node-background': nodeBodyBackgroundColor
+        '--component-node-background': applyLightThemeColor(nodeData.bgcolor)
       }
     ]"
     v-bind="remainingPointerHandlers"
@@ -186,7 +186,6 @@ import { applyLightThemeColor } from '@/renderer/extensions/vueNodes/utils/nodeS
 import { app } from '@/scripts/app'
 import { useExecutionStore } from '@/stores/executionStore'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
-import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { isTransparent } from '@/utils/colorUtil'
 import {
@@ -248,19 +247,6 @@ const bypassed = computed(
 )
 const muted = computed((): boolean => nodeData.mode === LGraphEventMode.NEVER)
 
-const nodeBodyBackgroundColor = computed(() => {
-  const colorPaletteStore = useColorPaletteStore()
-
-  if (!nodeData.bgcolor) {
-    return ''
-  }
-
-  return applyLightThemeColor(
-    nodeData.bgcolor,
-    Boolean(colorPaletteStore.completedActivePalette.light_theme)
-  )
-})
-
 const nodeOpacity = computed(() => {
   const globalOpacity = useSettingStore().get('Comfy.Node.Opacity') ?? 1
 

src/renderer/extensions/vueNodes/components/NodeHeader.vue

@@ -11,7 +11,10 @@
         headerShapeClass
       )
     "
-    :style="headerStyle"
+    :style="{
+      backgroundColor: applyLightThemeColor(nodeData?.color),
+      opacity: useSettingStore().get('Comfy.Node.Opacity') ?? 1
+    }"
     :data-testid="`node-header-${nodeData?.id || ''}`"
     @dblclick="handleDoubleClick"
   >
@@ -104,7 +107,6 @@ import NodeBadge from '@/renderer/extensions/vueNodes/components/NodeBadge.vue'
 import { useNodeTooltips } from '@/renderer/extensions/vueNodes/composables/useNodeTooltips'
 import { applyLightThemeColor } from '@/renderer/extensions/vueNodes/utils/nodeStyleUtils'
 import { app } from '@/scripts/app'
-import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 import {
   getLocatorIdFromNodeData,
@@ -156,23 +158,6 @@ const enterSubgraphTooltipConfig = computed(() => {
   return createTooltipConfig(st('enterSubgraph', 'Enter Subgraph'))
 })
 
-const headerStyle = computed(() => {
-  const colorPaletteStore = useColorPaletteStore()
-
-  const opacity = useSettingStore().get('Comfy.Node.Opacity') ?? 1
-
-  if (!nodeData?.color) {
-    return { backgroundColor: '', opacity }
-  }
-
-  const headerColor = applyLightThemeColor(
-    nodeData.color,
-    Boolean(colorPaletteStore.completedActivePalette.light_theme)
-  )
-
-  return { backgroundColor: headerColor, opacity }
-})
-
 const resolveTitle = (info: VueNodeData | undefined) => {
   const title = (info?.title ?? '').trim()
   if (title.length > 0) return title