native os window snapping

src/renderer/popouts/ScopePopoutWindow.tsx

@@ -5,7 +5,6 @@ import { DEFAULT_SCOPE_SETTINGS, type ScopeSettings } from '../../types/settings
 import { applyResolvedThemeToDocument, createDefaultTheme, resolveTheme } from '../../shared/themeState'
 import ScopeModule from '../components/ScopeModule'
 import ScopeSettingsSection from '../components/ScopeSettingsSection'
-import WindowResizeOverlay from '../components/WindowResizeOverlay'
 import { usePerformanceStore } from '../stores/performanceStore'
 import { useUiStore } from '../stores/uiStore'
 import { getRendererWindowCapabilities } from '../windowCapabilities'
@@ -67,7 +66,7 @@ export default function ScopePopoutWindow({ scopeKind }: ScopePopoutWindowProps)
   const setMiniSettingsOpen = useUiStore((s) => s.setSettingsOpen)
   const frameScheduler = useMemo(() => new FrameScheduler({ frameTarget }), [])
   const dataSource = useMemo(() => new ScopePopoutDataSource(scopeKind), [scopeKind])
-  const useNativeDragRegions = getRendererWindowCapabilities().useNativeDragRegions
+  const useWindowManagerDragRegions = getRendererWindowCapabilities().useNativeDragRegions
 
   useEffect(() => {
     void window.electronAPI.isAlwaysOnTop().then(setIsAlwaysOnTop)
@@ -148,14 +147,14 @@ export default function ScopePopoutWindow({ scopeKind }: ScopePopoutWindowProps)
   }
 
   const handleDragStart = useCallback((event: ReactPointerEvent<HTMLButtonElement>): void => {
-    if (useNativeDragRegions || event.button !== 0) return
+    if (useWindowManagerDragRegions || event.button !== 0) return
     event.preventDefault()
     event.currentTarget.setPointerCapture(event.pointerId)
     window.electronAPI.startWindowMove()
-  }, [useNativeDragRegions])
+  }, [useWindowManagerDragRegions])
 
   const handleDragEnd = useCallback((event: ReactPointerEvent<HTMLButtonElement>): void => {
-    if (useNativeDragRegions) {
+    if (useWindowManagerDragRegions) {
       return
     }
 
@@ -163,10 +162,10 @@ export default function ScopePopoutWindow({ scopeKind }: ScopePopoutWindowProps)
       event.currentTarget.releasePointerCapture(event.pointerId)
     }
     window.electronAPI.stopWindowMove()
-  }, [useNativeDragRegions])
+  }, [useWindowManagerDragRegions])
 
   const handleAltDragStart = useCallback((event: ReactMouseEvent<HTMLDivElement>): void => {
-    if (useNativeDragRegions || !event.altKey || event.button !== 0) return
+    if (useWindowManagerDragRegions || !event.altKey || event.button !== 0) return
 
     const target = event.target
     if (target instanceof Element && target.closest('.scope-popout__drag-handle')) {
@@ -175,15 +174,15 @@ export default function ScopePopoutWindow({ scopeKind }: ScopePopoutWindowProps)
 
     event.preventDefault()
     window.electronAPI.startWindowMove()
-  }, [useNativeDragRegions])
+  }, [useWindowManagerDragRegions])
 
   const handleAltDragEnd = useCallback((): void => {
-    if (useNativeDragRegions) {
+    if (useWindowManagerDragRegions) {
       return
     }
 
     window.electronAPI.stopWindowMove()
-  }, [useNativeDragRegions])
+  }, [useWindowManagerDragRegions])
 
   useLayoutEffect(() => {
     if (miniSettingsOpen && !prevMiniSettingsOpenRef.current) {
@@ -210,8 +209,8 @@ export default function ScopePopoutWindow({ scopeKind }: ScopePopoutWindowProps)
       onMouseEnter={() => setCursorInsideWindow(true)}
       onMouseMove={() => setCursorInsideWindow(true)}
       onMouseLeave={() => setCursorInsideWindow(false)}
-      onMouseDown={useNativeDragRegions ? undefined : handleAltDragStart}
-      onMouseUp={useNativeDragRegions ? undefined : handleAltDragEnd}
+      onMouseDown={useWindowManagerDragRegions ? undefined : handleAltDragStart}
+      onMouseUp={useWindowManagerDragRegions ? undefined : handleAltDragEnd}
     >
       <div
         className="scope-popout__viewport"
@@ -224,15 +223,15 @@ export default function ScopePopoutWindow({ scopeKind }: ScopePopoutWindowProps)
             cursorInsideWindow ? 'is-cursor-inside' : '',
           ].join(' ').trim()}
         >
-          <header className={`scope-popout__header ${useNativeDragRegions ? 'is-native-drag' : ''}`.trim()}>
+          <header className={`scope-popout__header ${useWindowManagerDragRegions ? 'is-native-drag' : ''}`.trim()}>
             <div className="scope-popout__drag">
               <button
                 type="button"
-                className={`scope-popout__drag-handle ${useNativeDragRegions ? 'is-native-drag' : ''}`.trim()}
-                onPointerDown={useNativeDragRegions ? undefined : handleDragStart}
-                onPointerUp={useNativeDragRegions ? undefined : handleDragEnd}
-                onPointerCancel={useNativeDragRegions ? undefined : handleDragEnd}
-                onLostPointerCapture={useNativeDragRegions ? undefined : handleDragEnd}
+                className={`scope-popout__drag-handle ${useWindowManagerDragRegions ? 'is-native-drag' : ''}`.trim()}
+                onPointerDown={useWindowManagerDragRegions ? undefined : handleDragStart}
+                onPointerUp={useWindowManagerDragRegions ? undefined : handleDragEnd}
+                onPointerCancel={useWindowManagerDragRegions ? undefined : handleDragEnd}
+                onLostPointerCapture={useWindowManagerDragRegions ? undefined : handleDragEnd}
                 aria-label="Drag window"
                 title="Drag window"
               >
@@ -305,8 +304,6 @@ export default function ScopePopoutWindow({ scopeKind }: ScopePopoutWindowProps)
           </div>
         </div>
       )}
-
-      <WindowResizeOverlay />
     </div>
   )
 }