Share button and Assets Panel in Linear Mode (#6794)

- Re-enables the share button in Linear Mode and have it export the
current workflow
- Not as nice as having it copy an actual URL, but good enough for the
interim and it help with dead space
- Display the Media Assets Panel on the left hand side to replace the
removed Queue Panel

<img width="806" alt="image"
src="https://github.com/user-attachments/assets/93786dfa-8fbb-4368-8594-b9c98bbeb79e"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6794-Share-button-and-Assets-Panel-in-Linear-Mode-2b26d73d36508178aef9ededa38d47f1)
by [Unito](https://www.unito.io)

src/locales/en/main.json

@@ -2199,6 +2199,10 @@
   "vueNodesMigrationMainMenu": {
     "message": "Switch back to Nodes 2.0 anytime from the main menu."
   },
+  "linearMode": {
+    "share": "Share",
+    "openWorkflow": "Open Workflow"
+  },
   "missingNodes": {
     "cloud": {
       "title": "These nodes aren't available on Comfy Cloud yet",

src/views/LinearView.vue

@@ -5,6 +5,7 @@ import Splitter from 'primevue/splitter'
 import SplitterPanel from 'primevue/splitterpanel'
 import { computed } from 'vue'
 
+import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
 import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
 import LoginButton from '@/components/topbar/LoginButton.vue'
 import TopbarBadges from '@/components/topbar/TopbarBadges.vue'
@@ -14,20 +15,20 @@ import {
   isValidWidgetValue,
   safeWidgetMapper
 } from '@/composables/graph/useGraphNodeManager'
+import { useAssetsSidebarTab } from '@/composables/sidebarTabs/useAssetsSidebarTab'
 import { t } from '@/i18n'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { useTelemetry } from '@/platform/telemetry'
+import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import NodeWidgets from '@/renderer/extensions/vueNodes/components/NodeWidgets.vue'
 import WidgetInputNumberInput from '@/renderer/extensions/vueNodes/widgets/components/WidgetInputNumber.vue'
 import { app } from '@/scripts/app'
 import { useCommandStore } from '@/stores/commandStore'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
-//import { useQueueStore } from '@/stores/queueStore'
 import { useQueueSettingsStore } from '@/stores/queueStore'
 import { isElectron } from '@/utils/envUtil'
 
-//const queueStore = useQueueStore()
 const nodeOutputStore = useNodeOutputStore()
 const commandStore = useCommandStore()
 const nodeDatas = computed(() => {
@@ -114,9 +115,16 @@ function openFeedback() {
       class="h-[calc(100%-38px)] w-full bg-comfy-menu-secondary-bg"
       :pt="{ gutter: { class: 'bg-transparent w-4 -mx-3' } }"
     >
+      <SplitterPanel :size="1" class="min-w-min bg-comfy-menu-bg">
+        <div
+          class="sidebar-content-container h-full w-full overflow-x-hidden overflow-y-auto border-r-1 border-node-component-border"
+        >
+          <ExtensionSlot :extension="useAssetsSidebarTab()" />
+        </div>
+      </SplitterPanel>
       <SplitterPanel
-        :size="99"
+        :size="98"
-        class="flex flex-row overflow-y-auto flex-wrap min-w-min gap-4"
+        class="flex flex-row overflow-y-auto flex-wrap min-w-min gap-4 m-4"
       >
         <img
           v-for="previewUrl in nodeOutputStore.latestOutput"
@@ -132,18 +140,26 @@ function openFeedback() {
       </SplitterPanel>
       <SplitterPanel :size="1" class="flex flex-col gap-1 p-1 min-w-min">
         <div
-          class="actionbar-container flex h-12 items-center rounded-lg border border-[var(--interface-stroke)] p-2 gap-2 bg-comfy-menu-bg justify-center"
+          class="actionbar-container flex h-12 items-center rounded-lg border border-[var(--interface-stroke)] p-2 gap-2 bg-comfy-menu-bg justify-end"
         >
-          <Button label="Feedback" severity="secondary" @click="openFeedback" />
           <Button
-            label="Open Workflow"
+            :label="t('g.feedback')"
+            severity="secondary"
+            @click="openFeedback"
+          />
+          <Button
+            :label="t('linearMode.openWorkflow')"
             severity="secondary"
             class="min-w-max"
             icon="icon-[comfy--workflow]"
             icon-pos="right"
             @click="useCanvasStore().linearMode = false"
           />
-          <!--<Button label="Share" severity="contrast" />  Temporarily disabled-->
+          <Button
+            :label="t('linearMode.share')"
+            severity="contrast"
+            @click="useWorkflowService().exportWorkflow('workflow', 'workflow')"
+          />
           <CurrentUserButton v-if="isLoggedIn" />
           <LoginButton v-else-if="isDesktop" />
         </div>