[Desktop] Native window virtual menu bar (#2215)

package-lock.json

@@ -10,7 +10,7 @@
       "license": "GPL-3.0-only",
       "dependencies": {
         "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
-        "@comfyorg/comfyui-electron-types": "^0.4.6",
+        "@comfyorg/comfyui-electron-types": "^0.4.7",
         "@comfyorg/litegraph": "^0.8.60",
         "@primevue/themes": "^4.0.5",
         "@tiptap/core": "^2.10.4",
@@ -1935,9 +1935,9 @@
       "dev": true
     },
     "node_modules/@comfyorg/comfyui-electron-types": {
-      "version": "0.4.6",
-      "resolved": "https://registry.npmjs.org/@comfyorg/comfyui-electron-types/-/comfyui-electron-types-0.4.6.tgz",
-      "integrity": "sha512-LY6AI7kMucMHU7UOAV9gGUPBUHrXXo1vxoabxupCL7xF2e8c14yHnJ4ngQogQrbwnLLax1mZfXNj/O9SyNtc9Q==",
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/@comfyorg/comfyui-electron-types/-/comfyui-electron-types-0.4.7.tgz",
+      "integrity": "sha512-APC3C4VZOo9W6h0xiAGxnsU9iNp3T8rN9w/5KmOCI0GUoKtKg5U2OaicTmnMwcDSQe5Jxflmej53GyJ1nH9oRw==",
       "license": "GPL-3.0-only"
     },
     "node_modules/@comfyorg/litegraph": {

package.json

@@ -83,7 +83,7 @@
   },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
-    "@comfyorg/comfyui-electron-types": "^0.4.6",
+    "@comfyorg/comfyui-electron-types": "^0.4.7",
     "@comfyorg/litegraph": "^0.8.60",
     "@primevue/themes": "^4.0.5",
     "@tiptap/core": "^2.10.4",

src/assets/css/style.css

@@ -764,3 +764,11 @@ audio.comfy-audio.empty-audio-widget {
 .p-tree-node-content {
   padding: var(--comfy-tree-explorer-item-padding) !important;
 }
+
+.app-drag {
+  app-region: drag;
+}
+
+.no-drag {
+  app-region: no-drag;
+}

src/views/templates/BaseViewTemplate.vue

@@ -1,18 +1,28 @@
 <template>
   <div
-    class="font-sans w-screen h-screen flex items-center justify-center pointer-events-auto overflow-auto"
+    class="font-sans w-screen h-screen flex flex-col pointer-events-auto"
     :class="[
       props.dark
         ? 'text-neutral-300 bg-neutral-900 dark-theme'
         : 'text-neutral-900 bg-neutral-300'
     ]"
   >
-    <slot></slot>
+    <!-- Virtual top menu for native window (drag handle) -->
+    <div
+      v-show="isNativeWindow"
+      ref="topMenuRef"
+      class="app-drag w-full h-[var(--comfy-topbar-height)]"
+    />
+    <div
+      class="flex-grow w-full flex items-center justify-center overflow-auto"
+    >
+      <slot></slot>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { nextTick, onMounted, ref } from 'vue'
 
 import { electronAPI, isElectron } from '@/utils/envUtil'
 
@@ -35,9 +45,19 @@ const lightTheme = {
   symbolColor: '#171717'
 }
 
-onMounted(() => {
+const topMenuRef = ref<HTMLDivElement | null>(null)
+const isNativeWindow = ref(false)
+onMounted(async () => {
   if (isElectron()) {
-    electronAPI().changeTheme(props.dark ? darkTheme : lightTheme)
+    const windowStyle = await electronAPI().Config.getWindowStyle()
+    isNativeWindow.value = windowStyle === 'custom'
+
+    await nextTick()
+
+    electronAPI().changeTheme({
+      ...(props.dark ? darkTheme : lightTheme),
+      height: topMenuRef.value.getBoundingClientRect().height
+    })
   }
 })
 </script>