add webview store

src/components/actionbar/ComfyActionbar.vue

@@ -1,5 +1,6 @@
 <template>
   <Panel
+    v-if="!webviewStore.hasActiveWebview"
     class="actionbar w-fit"
     :style="style"
     :class="{ 'is-dragging': isDragging, 'is-docked': isDocked }"
@@ -26,10 +27,12 @@ import Panel from 'primevue/panel'
 import { Ref, computed, inject, nextTick, onMounted, ref, watch } from 'vue'
 
 import { useSettingStore } from '@/stores/settingStore'
+import { useWebviewStore } from '@/stores/webviewStore'
 
 import ComfyQueueButton from './ComfyQueueButton.vue'
 
 const settingsStore = useSettingStore()
+const webviewStore = useWebviewStore()
 
 const visible = computed(
   () => settingsStore.get('Comfy.UseNewMenu') !== 'Disabled'

src/components/graph/GraphCanvas.vue

@@ -3,7 +3,12 @@
   <!-- If load immediately, the top-level splitter stateKey won't be correctly
   synced with the stateStorage (localStorage). -->
   <LiteGraphCanvasSplitterOverlay
-    v-if="comfyAppReady && betaMenuEnabled && !workspaceStore.focusMode"
+    v-if="
+      comfyAppReady &&
+      betaMenuEnabled &&
+      !workspaceStore.focusMode &&
+      !webviewStore.hasActiveWebview
+    "
   >
     <template #side-bar-panel>
       <SideToolbar />
@@ -69,6 +74,7 @@ import { useCommandStore } from '@/stores/commandStore'
 import { useCanvasStore } from '@/stores/graphStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useSettingStore } from '@/stores/settingStore'
+import { useWebviewStore } from '@/stores/webviewStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 
@@ -78,6 +84,7 @@ const settingStore = useSettingStore()
 const nodeDefStore = useNodeDefStore()
 const workspaceStore = useWorkspaceStore()
 const canvasStore = useCanvasStore()
+const webviewStore = useWebviewStore()
 const betaMenuEnabled = computed(
   () => settingStore.get('Comfy.UseNewMenu') !== 'Disabled'
 )

src/components/graph/GraphCanvasMenu.vue

@@ -1,5 +1,6 @@
 <template>
   <ButtonGroup
+    v-if="!webviewStore.hasActiveWebview"
     class="p-buttongroup-vertical absolute bottom-[10px] right-[10px] z-[1000]"
   >
     <Button
@@ -69,11 +70,13 @@ import { useI18n } from 'vue-i18n'
 import { useCommandStore } from '@/stores/commandStore'
 import { useCanvasStore } from '@/stores/graphStore'
 import { useSettingStore } from '@/stores/settingStore'
+import { useWebviewStore } from '@/stores/webviewStore'
 
 const { t } = useI18n()
 const commandStore = useCommandStore()
 const canvasStore = useCanvasStore()
 const settingStore = useSettingStore()
+const webviewStore = useWebviewStore()
 
 const linkHidden = computed(
   () => settingStore.get('Comfy.LinkRenderMode') === LiteGraph.HIDDEN_LINK

src/components/topbar/BottomPanelToggleButton.vue

@@ -1,6 +1,9 @@
 <template>
   <Button
-    v-show="bottomPanelStore.bottomPanelTabs.length > 0"
+    v-show="
+      bottomPanelStore.bottomPanelTabs.length > 0 &&
+      !webviewStore.hasActiveWebview
+    "
     severity="secondary"
     text
     :aria-label="$t('menu.toggleBottomPanel')"
@@ -19,7 +22,9 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
 
+import { useWebviewStore } from '@/stores/webviewStore'
 import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
 
 const bottomPanelStore = useBottomPanelStore()
+const webviewStore = useWebviewStore()
 </script>

src/components/topbar/WorkflowTabs.vue

@@ -19,6 +19,7 @@
       >
         <template #option="{ option }">
           <WorkflowTab
+            @click="() => webviewStore.hideActiveWebview()"
             @contextmenu="showContextMenu($event, option)"
             @click.middle="onCloseWorkflow(option)"
             :workflow-option="option"
@@ -50,6 +51,7 @@ import { useI18n } from 'vue-i18n'
 import WorkflowTab from '@/components/topbar/WorkflowTab.vue'
 import { useWorkflowService } from '@/services/workflowService'
 import { useCommandStore } from '@/stores/commandStore'
+import { useWebviewStore } from '@/stores/webviewStore'
 import { ComfyWorkflow, useWorkflowBookmarkStore } from '@/stores/workflowStore'
 import { useWorkflowStore } from '@/stores/workflowStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
@@ -68,6 +70,7 @@ const workspaceStore = useWorkspaceStore()
 const workflowStore = useWorkflowStore()
 const workflowService = useWorkflowService()
 const workflowBookmarkStore = useWorkflowBookmarkStore()
+const webviewStore = useWebviewStore()
 const rightClickedTab = ref<WorkflowOption>(null)
 const menu = ref()
 

src/components/webviews/WebviewContainer.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="w-full h-full relative pointer-events-auto">
+    <KeepAlive>
+      <component
+        v-if="
+          webviewStore.activeWebviewId && webviewStore.activeWebview.keepAlive
+        "
+        :is="webviewStore.activeWebview.component"
+        :key="webviewStore.activeWebviewId"
+        v-bind="webviewStore.activeWebview.props || {}"
+      />
+    </KeepAlive>
+
+    <component
+      v-if="
+        webviewStore.activeWebviewId && !webviewStore.activeWebview.keepAlive
+      "
+      :is="webviewStore.activeWebview.component"
+      :key="webviewStore.activeWebviewId"
+      v-bind="webviewStore.activeWebview.props || {}"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useWebviewStore } from '@/stores/webviewStore'
+
+const webviewStore = useWebviewStore()
+</script>