Refactor code structure for improved readability and maintainability

webapp/src/App.tsx

@@ -64,6 +64,48 @@ const SIGNALR_UPDATE_TYPE_LOG_OUT = 11;
 const SIGNALR_UPDATE_TYPE_DEVICE_STATUS = 12;
 
 type ThemePreference = 'system' | 'light' | 'dark';
+const MAGNETIC_SELECTOR = '.topbar .btn, .topbar .user-chip, .side-link, .mobile-tab';
+
+function installMagneticUiFeedback() {
+  if (typeof window === 'undefined' || typeof document === 'undefined') return () => {};
+  if (typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return () => {};
+  if (typeof window.matchMedia === 'function' && window.matchMedia('(pointer: coarse)').matches) return () => {};
+
+  const resetNode = (node: HTMLElement) => {
+    node.style.setProperty('--mag-x', '0px');
+    node.style.setProperty('--mag-y', '0px');
+    node.style.removeProperty('--mx');
+    node.style.removeProperty('--my');
+  };
+
+  const onPointerMove = (event: PointerEvent) => {
+    const node = event.target instanceof Element ? event.target.closest<HTMLElement>(MAGNETIC_SELECTOR) : null;
+    if (!node) return;
+    const rect = node.getBoundingClientRect();
+    const localX = event.clientX - rect.left;
+    const localY = event.clientY - rect.top;
+    const dx = (localX - rect.width / 2) / Math.max(rect.width / 2, 1);
+    const dy = (localY - rect.height / 2) / Math.max(rect.height / 2, 1);
+    node.style.setProperty('--mx', `${localX}px`);
+    node.style.setProperty('--my', `${localY}px`);
+    node.style.setProperty('--mag-x', `${dx * 6}px`);
+    node.style.setProperty('--mag-y', `${dy * 4}px`);
+  };
+
+  const onPointerLeave = (event: Event) => {
+    const node = event.target instanceof Element ? event.target.closest<HTMLElement>(MAGNETIC_SELECTOR) : null;
+    if (!node) return;
+    resetNode(node);
+  };
+
+  document.addEventListener('pointermove', onPointerMove, { passive: true });
+  document.addEventListener('pointerleave', onPointerLeave, true);
+
+  return () => {
+    document.removeEventListener('pointermove', onPointerMove);
+    document.removeEventListener('pointerleave', onPointerLeave, true);
+  };
+}
 
 function readThemePreference(): ThemePreference {
   if (typeof window === 'undefined') return 'system';
@@ -218,6 +260,8 @@ export default function App() {
     window.localStorage.setItem(THEME_STORAGE_KEY, themePreference);
   }, [themePreference]);
 
+  useEffect(() => installMagneticUiFeedback(), []);
+
   function handleToggleTheme() {
     setThemePreference((prev) => {
       const current = prev === 'system' ? systemTheme : prev;