Window controls

Polishing the window controls — OS-conventional layouts, the unmaximize state, double-click-to-maximize, the edge cases users will report.

Windows vs. macOS controls — different conventions

• Windows: Minimise / Maximise / Close on the RIGHT, in that order. Square boxes, ~12-14px icons.
• macOS: Close / Minimise / Zoom on the LEFT, colored traffic lights (red / yellow / green).

Wails ships the native OS traffic lights on macOS if options.Mac isn't set to hide them. The simplest approach: use Wails's defaults on Mac, draw your own on Windows.

OS detection in React

import { Environment } from '../../wailsjs/runtime/runtime'

let cachedOS: 'windows' | 'darwin' | 'linux' | null = null

export async function detectOS() {
  if (cachedOS) return cachedOS
  const env = await Environment()
  cachedOS = env.platform as any
  return cachedOS
}

Now your titlebar can render OS-appropriate controls or hide them entirely on Mac (Wails handles the traffic lights).

Double-click to maximise

Standard convention — double-click the titlebar maximises / unmaximises. Wire it:

<div
  style={{ '--wails-draggable': 'drag' } as any}
  onDoubleClick={WindowToggleMaximise}
  className="h-10 flex items-center justify-between px-4 ..."
>
  ...

One line. Now power users have the shortcut they expect.

Tracking maximised state for the icon swap

Convention: the maximise button shows a single square when the window is normal, two stacked squares (or a restore icon) when maximised. Listen to the Wails event:

import { EventsOn } from '../../wailsjs/runtime/runtime'

export function useIsMaximised() {
  const [max, setMax] = useState(false)
  useEffect(() => {
    const cleanup = EventsOn('wails:window:maximise', () => setMax(true))
    const cleanup2 = EventsOn('wails:window:unmaximise', () => setMax(false))
    return () => { cleanup(); cleanup2() }
  }, [])
  return max
}

const isMax = useIsMaximised()

<WinBtn onClick={WindowToggleMaximise}>
  {isMax ? <Restore /> : <Square />}
</WinBtn>

Keyboard shortcuts

• Cmd/Ctrl+W — close window. Wire via Wails accelerators or with an HTML keyboard listener.
• Cmd/Ctrl+M — minimise. macOS does this automatically; Wails has it.
• F11 — fullscreen toggle. Wire to WindowFullscreen().

Edge cases users WILL report

• Window remembers wrong size on relaunch. Save the geometry on close, restore on startup. Wails has WindowGetSize / WindowSetPosition for this.
• App restored on a disconnected monitor. Detect off-screen position; reset to centre.
• HiDPI / scale 200%. Test on a high-DPI display. Pixel measurements that look fine at 100% can blur at 200%.

What's next

Chapter 4 — In-app auto-update. The most impactful feature for a shipped desktop app. Bug fixes land without users having to re-download installers.