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)

Author: AustinMroz

src/locales/en/main.json

@@ -2207,6 +2207,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

@@ -15,21 +15,20 @@ import {
   isValidWidgetValue,
   safeWidgetMapper
 } from '@/composables/graph/useGraphNodeManager'
-import { useQueueSidebarTab } from '@/composables/sidebarTabs/useQueueSidebarTab'
+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(() => {
@@ -120,12 +119,12 @@ function openFeedback() {
         <div
           class="sidebar-content-container h-full w-full overflow-x-hidden overflow-y-auto border-r-1 border-node-component-border"
         >
-          <ExtensionSlot :extension="useQueueSidebarTab()" />
+          <ExtensionSlot :extension="useAssetsSidebarTab()" />
         </div>
       </SplitterPanel>
       <SplitterPanel
         :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"
@@ -141,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>