From fb02b62a5446df2d9dc27d1226fb221a9c4ebdca Mon Sep 17 00:00:00 2001
From: Frank Stellmacher <f.stellmacher@gmail.com>
Date: Tue, 21 Apr 2026 19:11:24 +0200
Subject: [PATCH] fix(titlebar): hide traffic-light glyphs until hover (#243)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(titlebar): hide traffic-light glyphs until hover

The lucide Minus/Square/X icons at 9×9 with stroke-width 2.5 looked
chunky at all times — especially the Square for maximize. Match real
macOS behaviour: glyphs fade in only when the controls group is hovered
(or a button is keyboard-focused).

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

* fix(titlebar): drop traffic-light glyphs entirely, add coloured hover glow

Following review feedback: even on-hover the lucide glyphs at 9×9
weren't pleasant. Remove them outright and signal hover with a soft
coloured glow matching each button (red/yellow/green) plus a subtle
brightness lift. Keyboard focus uses a white outer ring for accessibility.

- TitleBar.tsx: remove lucide imports + icon children, add aria-label
- layout.css: drop svg sizing rules, add per-variant box-shadow hover,
  add focus-visible ring, transition box-shadow

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

---------

Co-authored-by: Psychotoxical <dev@psysonic.app>
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/TitleBar.tsx | 16 ++++++----------
 src/styles/layout.css       | 22 +++++++++++-----------
 2 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/src/components/TitleBar.tsx b/src/components/TitleBar.tsx
index d645db68..d21d5a78 100644
--- a/src/components/TitleBar.tsx
+++ b/src/components/TitleBar.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { getCurrentWindow } from '@tauri-apps/api/window';
-import { X, Minus, Square } from 'lucide-react';
 import { usePlayerStore } from '../store/playerStore';
 
 export default function TitleBar() {
@@ -27,25 +26,22 @@ export default function TitleBar() {
           onClick={() => win.minimize()}
           data-tooltip="Minimize"
           data-tooltip-pos="bottom"
-        >
-          <Minus size={10} />
-        </button>
+          aria-label="Minimize"
+        />
         <button
           className="titlebar-btn titlebar-btn-maximize"
           onClick={() => win.toggleMaximize()}
           data-tooltip="Maximize"
           data-tooltip-pos="bottom"
-        >
-          <Square size={9} />
-        </button>
+          aria-label="Maximize"
+        />
         <button
           className="titlebar-btn titlebar-btn-close"
           onClick={() => win.close()}
           data-tooltip="Close"
           data-tooltip-pos="bottom"
-        >
-          <X size={12} />
-        </button>
+          aria-label="Close"
+        />
       </div>
     </div>
   );
diff --git a/src/styles/layout.css b/src/styles/layout.css
index b0f9d574..fb7da77d 100644
--- a/src/styles/layout.css
+++ b/src/styles/layout.css
@@ -142,38 +142,38 @@
   border-radius: 50%;
   cursor: pointer;
   box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.18);
-  transition: filter var(--transition-fast);
-}
-
-.titlebar-btn svg {
-  width: 9px;
-  height: 9px;
-  stroke-width: 2.5;
+  transition: filter var(--transition-fast), box-shadow var(--transition-fast);
 }
 
 .titlebar-btn-close {
   background: #ff5f57;
-  color: #4d0000;
 }
 
 .titlebar-btn-minimize {
   background: #febc2e;
-  color: #7a4a00;
 }
 
 .titlebar-btn-maximize {
   background: #28c840;
-  color: #004d00;
 }
 
 .titlebar-btn:hover {
-  filter: brightness(1.08);
+  filter: brightness(1.1);
 }
 
+.titlebar-btn-close:hover    { box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.18), 0 0 6px rgba(255, 95, 87, 0.75); }
+.titlebar-btn-minimize:hover { box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.18), 0 0 6px rgba(254, 188, 46, 0.75); }
+.titlebar-btn-maximize:hover { box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.18), 0 0 6px rgba(40, 200, 64, 0.75); }
+
 .titlebar-btn:active {
   filter: brightness(0.92);
 }
 
+.titlebar-btn:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.18), 0 0 0 2px rgba(255, 255, 255, 0.5);
+}
+
 /* Resizer handles must start below the titlebar */
 .app-shell[data-titlebar] .resizer {
   top: var(--titlebar-height);