Polish: album-art accent + liquid-glass clock + blurred backdrop

[tirthfx]

What changed

Folds in the album-art accent color polish item and reworks the lock-screen expanded/lyrics states to match the Apple-Music reference (image 2).

Album-art accent color (both surfaces)

• New AlbumArtColor samples a vibrant tone from the current art — downsample to 24×24, saturation-weighted average that discounts near-black/near-white areas, then normalized (min saturation/brightness) so it always reads as an accent, never muddy. Falls back to white.
• MediaMetadataService publishes it as accentColor (recomputed via didSet only when the art actually changes).
• It tints: the current lyric line on both the notch and the lock screen, the album-art bloom, and the glass rims on the widget / control pill.

Lyrics state → image 2

• Blur instead of dim. Expanding now frosts the wallpaper (blur + a light 0.34 tint) rather than fading it to near-black, so the wallpaper stays present as a frosted backdrop.
• Liquid-glass clock. Frosted, material-filled numerals over the blur with a soft light bloom — compact at the top in the expanded/lyrics states, large/centered at the widget level. Content sits below it so the clock no longer overlaps the lyrics (the overlap visible in "before").
• Layout. Clock small top-center, album art + control pill on the left, synced lyrics on the right — the Apple-Music arrangement.

Base

Stacked on phase-9-volume-gesture (open PR #9). The lock-screen stack is now 5 → 6 → 7 → 8 → 9 → this.

Notes for review — needs your eyes in Xcode

• Can't verify visuals headlessly. Confirmed: builds clean, launches without crashing, notch unaffected.
• Please check on the Mac: ⌃⌘L → expand → swipe to lyrics. Expect: wallpaper frosted (not black), a small glassy clock at top, the current lyric line tinted with the album's accent color, and a matching bloom around the art.
• Two tuning knobs if needed: backdropBlur / backdropTint in LockScreenBackdropView (how frosted/dark), and the accent normalization floors in AlbumArtColor (how strong the tint is). The glass numerals use .regularMaterial as a text fill — if that reads too faint on a bright wallpaper, bump the white overlay opacity in GlassClockView.glassNumerals.

🤖 Generated with Claude Code

[gemini-code-assist]

Code Review

This pull request introduces dynamic album-art accent color extraction and integrates it across various UI components, including the lyrics panel, control pills, and lock-screen widgets. It also refactors the lock-screen backdrop to support a frosted wallpaper blur and a liquid-glass clock style. The review feedback highlights critical performance and safety improvements: optimizing the album art downsampling algorithm to prevent main-thread UI stutters, replacing expensive wallpaper blur animations with hardware-accelerated material overlays, and safely unwrapping the optional graphics context during image drawing.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

Downsampling to a 24x24 grid requires 576 iterations of colorAt(x:y:) and usingColorSpace(.sRGB) on the main thread, which is highly inefficient and can cause noticeable UI micro-stutters during track changes.

By reducing the downsample size to 12 (144 pixels) and removing the redundant .usingColorSpace(.sRGB) call (since the bitmap is already initialized in deviceRGB), we can achieve a virtually identical accent color with a fraction of the CPU overhead.

Suggested change

	let side = 24
	guard let rep = downsampledBitmap(side: side) else { return .white }
	var rSum = 0.0, gSum = 0.0, bSum = 0.0, weight = 0.0
	for y in 0..<side {
	for x in 0..<side {
	guard let pixel = rep.colorAt(x: x, y: y)?.usingColorSpace(.sRGB) else { continue }
	let s = Double(pixel.saturationComponent)
	let v = Double(pixel.brightnessComponent)
	// Favor colorful, mid-bright pixels; heavily discount flat
	// dark/bright areas (letterboxing, white sleeves, shadows).
	let w = s * ((v > 0.12 && v < 0.97) ? 1.0 : 0.08)
	rSum += Double(pixel.redComponent) * w
	gSum += Double(pixel.greenComponent) * w
	bSum += Double(pixel.blueComponent) * w
	weight += w
	}
	}
	let side = 12
	guard let rep = downsampledBitmap(side: side) else { return .white }
	var rSum = 0.0, gSum = 0.0, bSum = 0.0, weight = 0.0
	for y in 0..<side {
	for x in 0..<side {
	guard let pixel = rep.colorAt(x: x, y: y) else { continue }
	let s = Double(pixel.saturationComponent)
	let v = Double(pixel.brightnessComponent)
	// Favor colorful, mid-bright pixels; heavily discount flat
	// dark/bright areas (letterboxing, white sleeves, shadows).
	let w = s * ((v > 0.12 && v < 0.97) ? 1.0 : 0.08)
	rSum += Double(pixel.redComponent) * w
	gSum += Double(pixel.greenComponent) * w
	bSum += Double(pixel.blueComponent) * w
	weight += w
	}
	}

[gemini-code-assist]

Animating .blur(radius:) on a high-resolution desktop wallpaper image is extremely expensive on macOS and typically causes severe frame drops during the transition.

Using SwiftUI's native material overlays (like .ultraThinMaterial) is hardware-accelerated, performs beautifully at 60 FPS, and achieves the same frosted aesthetic without the performance penalty.

                WallpaperView()
                if isExpanded {
                    Rectangle()
                        .fill(.ultraThinMaterial)
                        .overlay(Color.black.opacity(0.2))
                        .ignoresSafeArea()
                        .transition(.opacity)
                }

[gemini-code-assist]

In AppKit, NSGraphicsContext(bitmapImageRep:) returns an optional context. Setting NSGraphicsContext.current directly without checking if the context is non-nil can lead to silent drawing failures or unexpected behavior if context creation fails.

Suggested change

	NSGraphicsContext.saveGraphicsState()
	NSGraphicsContext.current = NSGraphicsContext(bitmapImageRep: rep)
	draw(in: NSRect(x: 0, y: 0, width: side, height: side),
	from: .zero, operation: .copy, fraction: 1)
	NSGraphicsContext.restoreGraphicsState()
	guard let context = NSGraphicsContext(bitmapImageRep: rep) else { return nil }
	NSGraphicsContext.saveGraphicsState()
	NSGraphicsContext.current = context
	draw(in: NSRect(x: 0, y: 0, width: side, height: side),
	from: .zero, operation: .copy, fraction: 1)
	NSGraphicsContext.restoreGraphicsState()