style: optimize the titlebar for Windows compatibility (#136)

Author: VisionView

src/assets/index.css

@@ -77,7 +77,6 @@ body {
   background-color: hsl(var(--background));
   color: hsl(var(--foreground));
   font-size: 14px;
-  -webkit-app-region: drag;
 }
 
 [data-tauri-drag-region] {

src/components/layout/AppHeader.vue

@@ -32,38 +32,42 @@ const trafficLightInset = computed(() => {
 
 <template>
   <div
-    class="pr-2 border-b bg-muted/30 flex shrink-0 gap-1 h-10 items-center overflow-hidden"
+    class="border-b bg-muted/30 flex shrink-0 gap-1 h-10 items-center overflow-hidden"
     :style="{ paddingLeft: trafficLightInset }"
+    :class="[
+      isMac ? '' : 'flex-row-reverse',
+    ]"
     data-tauri-drag-region
   >
     <WindowControls />
-    <span class="text-xs text-muted-foreground font-semibold select-none">SqlKit</span>
-    <div class="flex-1" data-tauri-drag-region />
+    <div class="px-2 flex flex-1 h-full w-0 items-center">
+      <span class="text-xs text-muted-foreground font-semibold select-none">SqlKit</span>
+      <div class="flex-1" data-tauri-drag-region />
+      <TooltipProvider>
+        <Tooltip v-if="!hideAiButton">
+          <TooltipTrigger as-child>
+            <Button variant="ghost" size="icon" class="h-8 w-8" @click="emit('toggleAi')">
+              <span class="i-carbon-chat-bot h-4 w-4" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>{{ $t('aside.aiAssistant') }}</TooltipContent>
+        </Tooltip>
 
-    <TooltipProvider>
-      <Tooltip v-if="!hideAiButton">
-        <TooltipTrigger as-child>
-          <Button variant="ghost" size="icon" class="h-8 w-8" @click="emit('toggleAi')">
-            <span class="i-carbon-chat-bot h-4 w-4" />
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>{{ $t('aside.aiAssistant') }}</TooltipContent>
-      </Tooltip>
-
-      <Tooltip>
-        <TooltipTrigger as-child>
-          <Button variant="ghost" size="icon" class="h-8 w-8 relative" @click="emit('toggleTaskManager')">
-            <span class="i-carbon-list-boxes h-4 w-4" />
-            <span
-              v-if="taskCount > 0"
-              class="text-[9px] text-white font-bold px-1 rounded-full bg-red-500 flex h-4 min-w-4 items-center justify-center absolute -right-0.5 -top-0.5"
-            >
-              {{ taskCount > 9 ? '9+' : taskCount }}
-            </span>
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>{{ $t('transfer.tasks.title') }}</TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <Button variant="ghost" size="icon" class="h-8 w-8 relative" @click="emit('toggleTaskManager')">
+              <span class="i-carbon-list-boxes h-4 w-4" />
+              <span
+                v-if="taskCount > 0"
+                class="text-[9px] text-white font-bold px-1 rounded-full bg-red-500 flex h-4 min-w-4 items-center justify-center absolute -right-0.5 -top-0.5"
+              >
+                {{ taskCount > 9 ? '9+' : taskCount }}
+              </span>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>{{ $t('transfer.tasks.title') }}</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    </div>
   </div>
 </template>

src/components/layout/WindowControls.vue

@@ -7,7 +7,7 @@ const { isMac, platformReady } = usePlatform()
 </script>
 
 <template>
-  <div v-if="platformReady && !isMac" class="mr-2 flex items-stretch">
+  <div v-if="platformReady && !isMac" class="flex items-stretch">
     <button
       class="inline-flex h-10 w-11 transition-colors items-center justify-center hover:bg-foreground/10"
       @click="minimize"