Add color preview pill with animated swap button by superhighfives · Pull Request #198 · superhighfives/pika

superhighfives · 2026-04-03T03:48:18Z

Add preferences.preview.show and color.preview.toggle translations to German locale
Add preferences.preview.show and color.preview.toggle translations to Spanish locale
Add preferences.preview.show and color.preview.toggle translations to French locale
Add preferences.preview.show and color.preview.toggle translations to Croatian locale
Add preferences.preview.show and color.preview.toggle translations to Polish locale
Add preferences.preview.show and color.preview.toggle translations to Chinese Simplified (zh-Hans) locale
Add preferences.preview.show and color.preview.toggle translations to Chinese Traditional (zh-Hant) locale

Adds a new 'Show foreground color on background color' toggle in Preferences (Selection Settings) that displays a preview strip between the color pickers and the footer. The strip renders sample text ("Aa" and a pangram) in the foreground color against the background color, giving a real-time preview of how the two colors look together. Closes #138 https://claude.ai/code/session_01N89CKFrrN1kfSZrNmvZhhu

- Register ColorPreview.swift in project.pbxproj (PBXFileReference, PBXBuildFile for both targets, and Views group membership) - Qualify AnyTransition explicitly to resolve contextual inference errors https://claude.ai/code/session_01N89CKFrrN1kfSZrNmvZhhu

Removes the pangram sentence — the large "Aa" alone is cleaner and less visually busy while still clearly previewing the color pair. https://claude.ai/code/session_01N89CKFrrN1kfSZrNmvZhhu

Instead of a full-width strip between the pickers and footer, the preview is now a capsule-shaped pill (background color fill, foreground color text) that floats at the bottom of the color swatch area via an overlay. Restores the "Aa" + pangram text at a compact size. https://claude.ai/code/session_01N89CKFrrN1kfSZrNmvZhhu

https://claude.ai/code/session_01N89CKFrrN1kfSZrNmvZhhu

@IBAction

- Pill gets a thin strokeBorder: black (40% opacity) in dark mode, white (60% opacity) in light mode - "P" toggles the preview, wired through the same notification/action pattern as "H" for history: notification name, AppDelegate @IBAction, hidden button in NavigationMenu, gear menu item, ContentView handler - Shortcut listed in HelpView Actions group https://claude.ai/code/session_01N89CKFrrN1kfSZrNmvZhhu

Prevents the pill from overlapping the type labels. When the preview is shown the pill itself communicates the color relationship, so the labels are redundant anyway. https://claude.ai/code/session_01N89CKFrrN1kfSZrNmvZhhu

- Translate sample text into all 7 supported languages (de, es, fr, hr, pl, zh-Hans, zh-Hant); ColorPreview now uses NSLocalizedString - Pill border opacity: dark 0.4→0.2, light 0.6→0.3 - Suppress swiftlint line_length on the test assertion that can't be meaningfully shortened https://claude.ai/code/session_01N89CKFrrN1kfSZrNmvZhhu

When color preview is on, the pill replaces the swap button at the top-center of the swatch area — same hover visibility, same position, same swap action. The swap icon sits inside the pill and rotates on click (and on the X shortcut). No more separate centered overlay. Transition is now a plain opacity fade instead of scale+fade. https://claude.ai/code/session_01N89CKFrrN1kfSZrNmvZhhu

- Preview pill is display-only again (no swap integration), always visible when enabled, centered over the swatches - Swap button is independent, original appearance, shows on hover - Pill uses fade-only transition https://claude.ai/code/session_01N89CKFrrN1kfSZrNmvZhhu

When preview is on, the pill and swap button live in a shared HStack centered over the swatches. The swap button slides in from behind the pill (leading edge) on a spring animation, and both end up horizontally centered together. When preview is off, the original top-center hover-to-show swap button is restored. https://claude.ai/code/session_01N89CKFrrN1kfSZrNmvZhhu

Replaces the separate pill overlay and swap button with a single SwapPreviewButton at the swap button's position (top center, hover to show). - No preview: behaves exactly like the old swap button (icon only, "Swap" label slides in on hover) - Preview on: always expanded — shows icon + "Swap" + separator + "Aa" + sample text, using the foreground/background colors as fill/text; hover label expansion is skipped since it's already full Removes label-hiding from EyedropperButton since there is no longer a centered pill to conflict with. https://claude.ai/code/session_01N89CKFrrN1kfSZrNmvZhhu

Copilot

Pull request overview

This PR introduces an optional “color preview pill” UI that shows sample foreground text rendered on the current background color, integrates a new toggle (Preferences + menu + P shortcut), and refactors the swap control to animate/expand alongside the preview mode.

Changes:

Added a new preview + swap composite control (SwapPreviewButton / PreviewPill) and wired it into the main picker UI.
Introduced a persisted preference (showColorPreview) with UI + menu actions + keyboard shortcut + help entry.
Updated swap button style to support an expanded “Swap” label state and adjusted some UI affordances (history clear icon).

Reviewed changes

Copilot reviewed 20 out of 22 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
Pika/Views/ColorPreview.swift	New preview pill + swap composite view and its transitions/animations.
Pika/Views/ContentView.swift	Uses the new composite control and adds notification handling to toggle preview mode.
Pika/ButtonStyles/SwapButtonStyle.swift	Adds “expanded” state and updates animation behavior for label reveal.
Pika/Constants/Defaults.swift	Adds persisted `showColorPreview` default key.
Pika/Constants/Constants.swift	Adds notification + localized text constants for preview toggle and preference label.
Pika/AppDelegate.swift	Adds an action to dispatch the toggle preview notification.
Pika/Views/PreferencesView.swift	Adds Preferences toggle for `showColorPreview`.
Pika/Views/NavigationMenu.swift	Adds hidden keyboard shortcut handler (`p`) for toggling preview.
Pika/Views/NavigationMenuItems.swift	Adds menu item for toggling preview.
Pika/Views/HelpView.swift	Documents the new `P` shortcut in help.
Pika/Views/EyedropperButton.swift	Fades out “Foreground/Background” labels when preview mode is enabled.
Pika/Views/ColorHistoryDrawer.swift	Changes clear-history icon to `trash.fill`.
Pika/Assets/en.lproj/Localizable.strings	Adds new preview-related localized strings (toggle, preference label, sample text).
Pika/Assets/de.lproj/Localizable.strings	Adds sample preview text localization.
Pika/Assets/es.lproj/Localizable.strings	Adds sample preview text localization.
Pika/Assets/fr.lproj/Localizable.strings	Adds sample preview text localization.
Pika/Assets/hr.lproj/Localizable.strings	Adds sample preview text localization.
Pika/Assets/pl.lproj/Localizable.strings	Adds sample preview text localization.
Pika/Assets/zh-Hans.lproj/Localizable.strings	Adds Simplified Chinese localization file (currently appears corrupted).
Pika/Assets/zh-Hant.lproj/Localizable.strings	Adds Traditional Chinese localization file (currently appears corrupted).
PikaTests/NSColorHexTests.swift	SwiftLint line-length suppression for a long XCTest failure message.
Pika.xcodeproj/project.pbxproj	Adds `ColorPreview.swift` to the Xcode project build sources.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Pika/Views/ColorPreview.swift

Pika/Assets/de.lproj/Localizable.strings

Pika/Assets/es.lproj/Localizable.strings

Pika/Assets/fr.lproj/Localizable.strings

Pika/Assets/hr.lproj/Localizable.strings

Pika/Assets/pl.lproj/Localizable.strings

…le keys - Replace DispatchQueue.main.asyncAfter with cancellable Task for the preview/standalone fade transition to handle rapid toggles safely - Add .allowsHitTesting(fadePhase == .visible) to prevent ghost clicks during fade-out - Add missing preferences.preview.show and color.preview.toggle keys to de, es, fr, hr, pl locale files Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

superhighfives · 2026-04-03T06:24:34Z

@copilot, do we need to also update the localizable strings for the chinese localizations:

/* Show preview after picking */
"preferences.preview.show"
/* Toggle color preview */
"color.preview.toggle"

Agent-Logs-Url: https://github.com/superhighfives/pika/sessions/c424733f-8daa-42d9-b158-9916242cc08a Co-authored-by: superhighfives <449385+superhighfives@users.noreply.github.com>

Copilot · 2026-04-03T06:26:42Z

@copilot, do we need to also update the localizable strings for the chinese localizations:

...

Yes, both zh-Hans.lproj and zh-Hant.lproj were missing those keys. Fixed in 7966df1 — added both preferences.preview.show and color.preview.toggle to each:

zh-Hans: "在背景颜色上显示前景颜色" / "切换颜色预览"
zh-Hant: "在背景顏色上顯示前景顏色" / "切換顏色預覽"

…ding - Add 6 missing history keys to zh-Hans and zh-Hant locale files - Convert both Chinese files from UTF-16LE to UTF-8 for consistent encoding and proper git diff/merge support - Fix untranslated app.designed in zh-Hans ("Designed by" → "设计者") - Fix incomplete color.swap.detail in both zh-Hans and zh-Hant - Fix French app.designed mistranslation ("Idée de" → "Conçu par") Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Fix missing and corrupted locale translations

Add geometryGroup() to isolate the pill's internal text layout from the parent HStack animation, and clipShape() to prevent text overflow. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Add eye icon button to navigation menu for toggling color preview - Load history colors in Eyedroppers init to avoid animated transition on launch - Even out icon button spacing in navigation menu Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

claude and others added 13 commits April 2, 2026 02:19

Simplify color preview strip to just "Aa"

c6f930a

Removes the pangram sentence — the large "Aa" alone is cleaner and less visually busy while still clearly previewing the color pair. https://claude.ai/code/session_01N89CKFrrN1kfSZrNmvZhhu

Center color preview pill vertically over the color swatches

e6e1dd6

https://claude.ai/code/session_01N89CKFrrN1kfSZrNmvZhhu

Built out buttons

264624e

Copilot AI review requested due to automatic review settings April 3, 2026 03:48

Copilot started reviewing on behalf of superhighfives April 3, 2026 03:48 View session

Copilot AI reviewed Apr 3, 2026

View reviewed changes

Copilot started work on behalf of superhighfives April 3, 2026 06:24 View session

Add missing localization keys to Chinese locale files (zh-Hans, zh-Hant)

7966df1

Agent-Logs-Url: https://github.com/superhighfives/pika/sessions/c424733f-8daa-42d9-b158-9916242cc08a Co-authored-by: superhighfives <449385+superhighfives@users.noreply.github.com>

Copilot finished work on behalf of superhighfives April 3, 2026 06:27

Fix some Chinese translations, need to fix remaining

4e5c724

superhighfives mentioned this pull request Apr 3, 2026

Option to show foreground color on top of background color with text. #138

Closed

superhighfives and others added 6 commits April 3, 2026 22:47

Bump version to 1.6.0-beta1 (build 75)

8765420

Merge pull request #199 from superhighfives/fix/locale-audit

b6101c4

Fix missing and corrupted locale translations

Fix preview pill text flickering during swap button hover animation

23d6975

Add geometryGroup() to isolate the pill's internal text layout from the parent HStack animation, and clipShape() to prevent text overflow. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Improve preview pill shadow and delay label fade-in on preview dismiss

7ec2c03

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

superhighfives merged commit bdda75c into main Apr 7, 2026
1 check passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add color preview pill with animated swap button#198

Add color preview pill with animated swap button#198
superhighfives merged 22 commits intomainfrom
claude/add-foreground-color-option-NtW9E

superhighfives commented Apr 3, 2026 •

edited by Copilot AI

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

superhighfives commented Apr 3, 2026 •

edited

Loading

Uh oh!

Copilot AI commented Apr 3, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

superhighfives commented Apr 3, 2026 • edited by Copilot AI Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

superhighfives commented Apr 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI commented Apr 3, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

superhighfives commented Apr 3, 2026 •

edited by Copilot AI

Loading

superhighfives commented Apr 3, 2026 •

edited

Loading