chore: use electron native app region (#29)

* chore: use electron native app region to move window

* chore: i don't know what is it, but it looks like an animation

apps/stage-tamagotchi/src/renderer/src/pages/index.vue

@@ -10,19 +10,6 @@ import { WindowControlMode } from '../types/window-controls'
 const windowStore = useWindowControlStore()
 useWindowShortcuts()
 
-function handleMouseDown(event: MouseEvent) {
-  if (!windowStore.isControlActive || windowStore.controlMode !== WindowControlMode.MOVE)
-    return
-
-  window.electron.ipcRenderer.send('start-window-drag', event.x, event.y)
-}
-
-function handleMouseUp() {
-  if (windowStore.controlMode === WindowControlMode.MOVE) {
-    window.electron.ipcRenderer.send('end-window-drag')
-  }
-}
-
 const modeIndicatorClass = computed(() => {
   switch (windowStore.controlMode) {
     case WindowControlMode.MOVE:
@@ -48,8 +35,6 @@ const modeIndicatorClass = computed(() => {
     z-2
     h-full
     overflow-hidden
-    @mousedown="handleMouseDown"
-    @mouseup="handleMouseUp"
   >
     <div relative h-full w-full items-end gap-2 class="view">
       <WidgetStage h-full w-full flex-1 mb="<md:18" />
@@ -65,6 +50,27 @@ const modeIndicatorClass = computed(() => {
       <!-- Add debug controls here -->
     </div>
   </div>
+  <Transition
+    enter-active-class="transition-opacity duration-250"
+    enter-from-class="opacity-0"
+    enter-to-class="opacity-100"
+    leave-active-class="transition-opacity duration-250"
+    leave-from-class="opacity-100"
+    leave-to-class="opacity-0"
+  >
+    <div
+      v-if="windowStore.controlMode === WindowControlMode.MOVE"
+      class="drag-region absolute left-0 top-0 z-999 h-full w-full flex items-center justify-center"
+    >
+      <div class="absolute h-32 w-full flex items-center justify-center b-2 b-pink bg-white">
+        <div class="wall absolute top-0 h-8" />
+        <div class="absolute left-0 top-0 h-full w-full flex animate-flash animate-duration-5s animate-count-infinite items-center justify-center text-1.5rem text-pink-300 font-bold">
+          DRAG HERE TO MOVE
+        </div>
+        <div class="wall absolute bottom-0 h-8" />
+      </div>
+    </div>
+  </Transition>
 </template>
 
 <style scoped>
@@ -76,4 +82,33 @@ const modeIndicatorClass = computed(() => {
     }
   }
 }
+
+.drag-region {
+  app-region: drag;
+  cursor: grab !important;
+}
+
+@keyframes wall-move {
+  0% {
+    transform: translateX(calc(var(--wall-width) * -2));
+  }
+  100% {
+    transform: translateX(calc(var(--wall-width) * 1));
+  }
+}
+
+.wall {
+  @apply text-pink-200;
+
+  --wall-width: 8px;
+  animation: wall-move 1s linear infinite;
+  background-image: repeating-linear-gradient(
+    45deg,
+    currentColor,
+    currentColor var(--wall-width),
+    #ff00 var(--wall-width),
+    #ff00 calc(var(--wall-width) * 2)
+  );
+  width: calc(100% + 4 * var(--wall-width));
+}
 </style>