fix: window dragging - use startDragging() API instead of data attribute

src-tauri/capabilities/default.json

@@ -13,6 +13,8 @@
     "core:window:allow-hide",
     "core:window:allow-set-focus",
     "core:window:allow-is-maximized",
+    "core:window:allow-start-dragging",
+    "core:window:allow-toggle-maximize",
     "shell:allow-open",
     "dialog:allow-open",
     "dialog:allow-save",

src/components/TitleBar.vue

@@ -31,18 +31,26 @@ async function toggleMaximize() {
 async function close() {
   await appWindow.close()
 }
+
+async function startDrag() {
+  await appWindow.startDragging()
+}
+
+async function handleDoubleClick() {
+  await toggleMaximize()
+}
 </script>
 
 <template>
   <header
     class="h-10 flex items-center justify-between px-4 bg-bg-surface border-b border-border-subtle select-none shrink-0"
-    data-tauri-drag-region
+    @mousedown.left="startDrag"
+    @dblclick="handleDoubleClick"
   >
     <!-- Left: App name -->
-    <div class="flex items-center" data-tauri-drag-region>
+    <div class="flex items-center">
       <span
         class="text-accent-text text-[0.6875rem] font-medium tracking-[0.1em] uppercase"
-        data-tauri-drag-region
       >
         ZeroClock
       </span>
@@ -52,7 +60,6 @@ async function close() {
     <div
       class="flex items-center gap-3 transition-opacity duration-150"
       :class="timerStore.isRunning ? 'opacity-100' : 'opacity-0 pointer-events-none'"
-      data-tauri-drag-region
     >
       <!-- Pulsing green dot -->
       <div class="w-2 h-2 rounded-full bg-status-running animate-pulse-dot" />
@@ -70,6 +77,7 @@ async function close() {
       <!-- Stop button -->
       <button
         @click="timerStore.stop()"
+        @mousedown.stop
         class="w-5 h-5 flex items-center justify-center text-text-tertiary hover:text-status-error transition-colors duration-150"
         title="Stop timer"
       >
@@ -80,7 +88,7 @@ async function close() {
     </div>
 
     <!-- Right: Window controls -->
-    <div class="flex items-center">
+    <div class="flex items-center" @mousedown.stop>
       <button
         @click="minimize"
         class="w-10 h-10 flex items-center justify-center text-text-tertiary hover:text-text-secondary transition-colors duration-150"