fix(shell): stop the brand dot reading as a fourth traffic light

hiddenInset paints the native controls across x=20-72, but the titlebar
only reserved 64px and the inner row added 12 more, so the dot's ring
landed a pixel off the green button -- same row, same size, same circle.

macOS already has its left edge anchored, so the dot now renders on
win32/linux only, and the inset grows to 80px so the first menu button's
hover pill does not take its place against the green button.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: guasam

app/shell/titlebar.tsx

@@ -33,11 +33,13 @@ export function Titlebar({ title = 'Electron React App' }: { title?: string }) {
     <header
       className={cn(
         'relative flex h-10 shrink-0 items-center border-b border-border bg-card select-none [-webkit-app-region:drag]',
-        isMac && 'pl-16'
+        isMac && 'pl-20'
       )}
     >
       <div className="flex items-center gap-2.5 pl-3 [-webkit-app-region:no-drag]">
-        <span className="size-3.25 rounded-lg bg-brand ring-[3px] ring-brand/20" />
+        {/* The native traffic lights already anchor the left edge on macOS, where a same-sized dot
+            beside them just reads as a fourth window control. */}
+        {!isMac && <span className="size-3.25 rounded-lg bg-brand ring-[3px] ring-brand/20" />}
         {menuVisible && <TitlebarMenu />}
       </div>