[backport] Share button and Assets Panel in Linear Mode (#6794) (#6935)

## Summary
Backport of #6794 to cloud/1.32

- Re-enables share button in Linear Mode (exports workflow)
- Displays Assets Panel in left sidebar instead of Queue Panel
- Adds margin to main content area

## Conflict Resolution
Resolved conflict in `src/views/LinearView.vue`:
- Replaced `useQueueSidebarTab` → `useAssetsSidebarTab` (the intended
change from the original PR)

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

Co-authored-by: AustinMroz <austin@comfy.org>
This commit is contained in:
Christian Byrne
2025-11-25 14:36:59 -08:00
committed by GitHub
parent 427bc312e4
commit a10f9fa30b
2 changed files with 20 additions and 9 deletions

View File

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

View File

@@ -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>