Add per-view app-drag / no-drag

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/DownloadGitView.vue

@@ -1,7 +1,7 @@
 <template>
-  <BaseViewTemplate>
+  <BaseViewTemplate class="app-drag">
     <div
-      class="max-w-screen-sm flex flex-col gap-8 p-8 bg-[url('/assets/images/Git-Logo-White.svg')] bg-no-repeat bg-right-top bg-origin-padding"
+      class="no-drag max-w-screen-sm flex flex-col gap-8 p-8 bg-[url('/assets/images/Git-Logo-White.svg')] bg-no-repeat bg-right-top bg-origin-padding"
     >
       <!-- Header -->
       <h1 class="mt-24 text-4xl font-bold text-red-500">

src/views/InstallView.vue

@@ -1,10 +1,10 @@
 <template>
-  <BaseViewTemplate dark>
+  <BaseViewTemplate dark class="app-drag">
     <!-- h-full to make sure the stepper does not layout shift between steps
     as for each step the stepper height is different. Inherit the center element
     placement from BaseViewTemplate would cause layout shift. -->
     <Stepper
-      class="h-full p-8 2xl:p-16"
+      class="no-drag h-full p-8 2xl:p-16"
       value="0"
       @update:value="setHighestStep"
     >

src/views/ManualConfigurationView.vue

@@ -1,8 +1,8 @@
 <template>
-  <BaseViewTemplate dark>
+  <BaseViewTemplate dark class="app-drag">
     <!-- Installation Path Section -->
     <div
-      class="comfy-installer grow flex flex-col gap-4 text-neutral-300 max-w-110"
+      class="no-drag comfy-installer grow flex flex-col gap-4 text-neutral-300 max-w-110"
     >
       <h2 class="text-2xl font-semibold text-neutral-100">
         {{ $t('install.manualConfiguration.title') }}

src/views/NotSupportedView.vue

@@ -1,6 +1,6 @@
 <template>
-  <BaseViewTemplate>
-    <div class="sad-container">
+  <BaseViewTemplate class="app-drag">
+    <div class="no-drag sad-container">
       <!-- Right side image -->
       <img
         class="sad-girl"

src/views/ServerStartView.vue

@@ -1,5 +1,5 @@
 <template>
-  <BaseViewTemplate dark class="flex-col">
+  <BaseViewTemplate dark class="app-drag flex-col">
     <h2 class="text-2xl font-bold">
       {{ t(`serverStart.process.${status}`) }}
       <span v-if="status === ProgressStatus.ERROR">
@@ -8,7 +8,7 @@
     </h2>
     <div
       v-if="status === ProgressStatus.ERROR"
-      class="flex flex-col items-center gap-4"
+      class="no-drag flex flex-col items-center gap-4"
     >
       <div class="flex items-center my-4 gap-2">
         <Button
@@ -37,7 +37,11 @@
         @click="terminalVisible = true"
       />
     </div>
-    <BaseTerminal v-show="terminalVisible" @created="terminalCreated" />
+    <BaseTerminal
+      v-show="terminalVisible"
+      class="no-drag"
+      @created="terminalCreated"
+    />
   </BaseViewTemplate>
 </template>
 

src/views/UserSelectView.vue

@@ -1,8 +1,8 @@
 <template>
-  <BaseViewTemplate dark>
+  <BaseViewTemplate dark class="app-drag">
     <main
       id="comfy-user-selection"
-      class="min-w-84 relative rounded-lg bg-[var(--comfy-menu-bg)] p-5 px-10 shadow-lg"
+      class="no-drag min-w-84 relative rounded-lg bg-[var(--comfy-menu-bg)] p-5 px-10 shadow-lg"
     >
       <h1 class="my-2.5 mb-7 font-normal">ComfyUI</h1>
       <div class="flex w-full flex-col items-center">

src/views/WelcomeView.vue

@@ -1,6 +1,6 @@
 <template>
-  <BaseViewTemplate dark>
-    <div class="flex flex-col items-center justify-center gap-8 p-8">
+  <BaseViewTemplate dark class="app-drag">
+    <div class="no-drag flex flex-col items-center justify-center gap-8 p-8">
       <!-- Header -->
       <h1 class="animated-gradient-text text-glow select-none">
         {{ $t('welcome.title') }}