Fix macOS window controls

.github/VOUCHED.td

@@ -18,3 +18,5 @@ kikaraage gogogogo!
 BlockedPath macOS terminal report #253
 
 Chris79OG WSL work #139
+
+marcinkardas macOS bug reports and PR #288

docs/changelog.md

@@ -12,6 +12,7 @@
 - Updated Pi SDK/runtime packages to 0.79.1.
 - Bumped app/build dependencies, including Electron 41.7.2.
 - Added headless/browser mode, including LAN access with token auth and browser-side file uploads.
+- Fixed macOS window dragging and native Cmd+A select-all.
 
 #### 0.1.66 Hotfixes (because .67 has to be more special)
 

src/app/app-shell/app-shell-layout-view.tsx

@@ -324,10 +324,19 @@ function AppShellToast(props: AppShellLayoutViewProps) {
   )
 }
 
+function MacWindowDragZones() {
+  return (
+    <div className="mac-window-drag-zones" aria-hidden="true">
+      <div className="mac-window-drag-zone mac-window-drag-zone--titlebar" />
+    </div>
+  )
+}
+
 export function AppShellLayoutView(props: AppShellLayoutViewProps) {
   return (
     <>
       <div className={appShellRootClass}>
+        <MacWindowDragZones />
         <DesktopSidebarFrame {...props} />
         <CompactSidebarOverlay {...props} />
         <CompactSidebarPanel {...props} />

src/electron/main/app/application-menu.ts

@@ -144,6 +144,8 @@ export async function installApplicationMenu(input: {
           { role: 'cut' },
           { role: 'copy' },
           { role: 'paste' },
+          { type: 'separator' },
+          { role: 'selectAll' },
         ],
       },
     ]),

src/main.tsx

@@ -13,6 +13,10 @@ import { queryClient } from './app/query/query-client'
 function applyDesktopPlatformAttribute() {
   const platform = window.piDesktop?.platform ?? 'browser'
   document.documentElement.setAttribute('data-desktop-platform', platform)
+  document.documentElement.setAttribute(
+    'data-desktop-shell',
+    window.piDesktop && !window.howcodeDevWebBridge ? 'electron' : 'browser',
+  )
 }
 
 if (import.meta.env.DEV) {

src/styles/base.css

@@ -22,6 +22,28 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+.mac-window-drag-zones {
+  display: none;
+}
+
+:root[data-desktop-platform="darwin"][data-desktop-shell="electron"] .mac-window-drag-zones {
+  display: block;
+}
+
+.mac-window-drag-zone {
+  position: fixed;
+  z-index: 45;
+  background: transparent;
+  -webkit-app-region: drag;
+}
+
+.mac-window-drag-zone--titlebar {
+  top: 0;
+  left: 5.5rem;
+  width: 13.25rem;
+  height: 2rem;
+}
+
 button,
 input,
 textarea {

src/test/macos-window-controls.test.ts

@@ -0,0 +1,36 @@
+import { readFileSync } from 'node:fs'
+import path from 'node:path'
+import { describe, expect, it } from 'vitest'
+
+const projectRoot = path.resolve(__dirname, '..', '..')
+const macDragZonesPattern =
+  /:root\[data-desktop-platform="darwin"\]\[data-desktop-shell="electron"\] \.mac-window-drag-zones\s*\{[^}]*display:\s*block;/s
+const dragRegionPattern = /\.mac-window-drag-zone\s*\{[^}]*-webkit-app-region:\s*drag;/s
+
+function readProjectFile(filePath: string) {
+  return readFileSync(path.join(projectRoot, filePath), 'utf8')
+}
+
+describe('macOS window controls', () => {
+  it('keeps native select-all in the Electron Edit menu', () => {
+    const applicationMenuSource = readProjectFile('src/electron/main/app/application-menu.ts')
+
+    expect(applicationMenuSource).toContain("{ role: 'selectAll' }")
+  })
+
+  it('keeps invisible macOS drag zones mounted in the app shell', () => {
+    const appShellLayout = readProjectFile('src/app/app-shell/app-shell-layout-view.tsx')
+
+    expect(appShellLayout).toContain('function MacWindowDragZones()')
+    expect(appShellLayout).toContain('<MacWindowDragZones />')
+  })
+
+  it('keeps macOS drag zones platform-scoped and draggable', () => {
+    const baseStyles = readProjectFile('src/styles/base.css')
+
+    expect(baseStyles).toMatch(macDragZonesPattern)
+    expect(baseStyles).toMatch(dragRegionPattern)
+    expect(baseStyles).not.toContain('mac-window-drag-zone--left-edge')
+    expect(baseStyles).not.toContain('mac-window-drag-zone--bottom-left')
+  })
+})