# Badge Polish: Gear Animation + Custom Color Picker

**Date:** 2026-08-26
**Commits:** 2abd18e..8462148 (6 commits)

## Task Description

Two improvements to the subreddit badge system:
1. Animate the gear icon reveal on hover (remove permanent padding gap)
2. Replace all native `<input type="color">` elements with a custom tabbed inline color picker

## Changes Made

### New Files
- `content/tweaks/color-picker.js` — Tabbed color picker widget with three panels: Palette (Tailwind/shadcn colors), Named Colors (148 CSS named colors), Custom (HSV picker with canvas SV square + hue bar). Exposes `window.RedditTweaks.colorPicker.create()` API.

### Modified Files
- `content/styles/badges.css` — Gear animation CSS (padding-right 6px→18px on hover, 150ms transition). Swatch div selector replacing `input[type="color"]`. Full picker widget CSS with dark mode support.
- `content/tweaks/color-popover.js` — Replaced native color inputs with swatch divs. Integrated custom picker between color rows and preview. Added popover repositioning when picker opens.
- `popup/popup.html` — Replaced 12 `<input type="color">` elements with swatch divs. Added color-picker.js script tag.
- `popup/popup.js` — Full rewrite to use swatch divs + custom picker. Added `getColorValue`/`setColorValue` helpers, debounced saves during drag, per-subreddit dirty-mode tracking via `onBeforeChange` callback.
- `popup/popup.css` — Updated swatch selectors. Added picker widget CSS. Added subreddit entry swatch styles.
- `manifest.json` — Added `color-picker.js` to content scripts array.

### Specs & Plans
- `docs/superpowers/specs/2026-08-26-badge-polish-design.md` — Updated design spec with tabbed picker interface
- `docs/superpowers/plans/2026-08-26-badge-polish.md` — Implementation plan

## Follow-up Items
- Manual browser verification on old.reddit.com (not possible in this session)
- `prefers-reduced-motion` media query for gear animation (accessibility)
- Touch/pointer events for Custom HSV tab (currently mouse-only)
- Escape key could close picker first, then popover on second press