feat(frontend): #55: show grabbing cursor while dragging app window

frontend/src/components/items/AuthLayout.tsx

@@ -3,6 +3,7 @@ import type { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import logo from '@/assets/images/logo.png';
+import { useWindowDrag } from '@/hooks/useWindowDrag';
 
 type AuthLayoutProps = {
   children: ReactNode;
@@ -28,11 +29,16 @@ const features = [
 
 export default function AuthLayout({ children }: AuthLayoutProps) {
   const { t } = useTranslation();
+  const asideDrag = useWindowDrag();
+  const mainDrag = useWindowDrag();
 
   return (
     <div className="h-full w-full">
       <div className="grid h-full lg:grid-cols-2">
-        <aside className="hidden min-h-0 flex-col justify-between overflow-hidden bg-surface-alt p-10 lg:flex [--wails-draggable:drag]">
+        <aside
+          className={`hidden min-h-0 flex-col justify-between overflow-hidden bg-surface-alt p-10 lg:flex [--wails-draggable:drag] ${asideDrag.cursorClass}`}
+          {...asideDrag.dragHandlers}
+        >
           <div className="flex flex-1 flex-col justify-center">
             <div className="flex justify-center">
               <img src={logo} alt="ayo" className="h-36 w-36 rounded-2xl object-contain" />
@@ -60,7 +66,10 @@ export default function AuthLayout({ children }: AuthLayoutProps) {
           <p className="text-sm text-text-faint">{t('auth.brandFooter')}</p>
         </aside>
 
-        <main className="flex min-h-0 overflow-y-auto p-6 sm:p-10 [--wails-draggable:drag]">
+        <main
+          className={`flex min-h-0 overflow-y-auto p-6 sm:p-10 [--wails-draggable:drag] ${mainDrag.cursorClass}`}
+          {...mainDrag.dragHandlers}
+        >
           <div className="m-auto w-full max-w-md [--wails-draggable:no-drag]">{children}</div>
         </main>
       </div>

frontend/src/components/items/Header.tsx

@@ -5,13 +5,15 @@ import { useNavigate } from 'react-router-dom';
 
 import { useAuth } from '@/context/AuthContext';
 import { useSearch } from '@/context/SearchContext';
+import { useWindowDrag } from '@/hooks/useWindowDrag';
 
 export default function Header() {
   const { t } = useTranslation();
   const { session, logout } = useAuth();
   const { query, setQuery, clear } = useSearch();
   const navigate = useNavigate();
   const [menuOpen, setMenuOpen] = useState(false);
+  const { cursorClass, dragHandlers } = useWindowDrag();
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
@@ -31,7 +33,10 @@ export default function Header() {
   };
 
   return (
-    <header className="w-full h-10 shrink-0 bg-background pl-[75px] pr-4 [--wails-draggable:drag] select-none">
+    <header
+      className={`w-full h-10 shrink-0 bg-background pl-[75px] pr-4 [--wails-draggable:drag] select-none ${cursorClass}`}
+      {...dragHandlers}
+    >
       <div className="flex h-full items-center justify-between gap-4">
         {/* Central Search Drive Input (Only visible when logged in) */}
         {session ? (

frontend/src/hooks/useWindowDrag.ts

@@ -0,0 +1,28 @@
+import { useCallback, useEffect, useState } from 'react';
+
+export function useWindowDrag() {
+  const [dragging, setDragging] = useState(false);
+
+  const stopDragging = useCallback(() => setDragging(false), []);
+
+  useEffect(() => {
+    window.addEventListener('mouseup', stopDragging);
+    window.addEventListener('blur', stopDragging);
+    return () => {
+      window.removeEventListener('mouseup', stopDragging);
+      window.removeEventListener('blur', stopDragging);
+    };
+  }, [stopDragging]);
+
+  const dragHandlers = {
+    onMouseDown: useCallback(() => setDragging(true), []),
+    onMouseUp: stopDragging,
+    onMouseLeave: stopDragging,
+  };
+
+  return {
+    dragging,
+    cursorClass: dragging ? 'cursor-grabbing' : '',
+    dragHandlers,
+  };
+}