From 6b15b34a269473cbc2fefff13e1ff91206ee8c99 Mon Sep 17 00:00:00 2001 From: cottongin Date: Tue, 22 Sep 2026 11:56:04 -0400 Subject: [PATCH] docs: add app icon implementation plan Co-authored-by: Cursor --- docs/superpowers/plans/2026-09-22-app-icon.md | 403 ++++++++++++++++++ 1 file changed, 403 insertions(+) create mode 100644 docs/superpowers/plans/2026-09-22-app-icon.md diff --git a/docs/superpowers/plans/2026-09-22-app-icon.md b/docs/superpowers/plans/2026-09-22-app-icon.md new file mode 100644 index 0000000..7265c70 --- /dev/null +++ b/docs/superpowers/plans/2026-09-22-app-icon.md @@ -0,0 +1,403 @@ +# App Icon Implementation Plan + +> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. + +**Goal:** Create an SVG app icon (scissors cutting a film strip) in five color variants, let the user pick one, and generate all platform icon files. + +**Architecture:** Hand-craft a single base SVG icon, generate color variants via shell script, use `npx tauri icon` to produce all platform-specific icon files (PNG, ICNS, ICO). Replace the default Tauri branding. + +**Tech Stack:** SVG (hand-authored), `rsvg-convert` (SVG→PNG), `npx tauri icon` (multi-platform icon generation), bash (variant generation script) + +## Global Constraints + +- Canvas: 512×512px SVG viewBox, full-square (no rounded corners, no shadows — Google Play adds dynamically) +- Safe zone: inner 66% (338×338px centered, 87px inset) — all critical artwork within this area +- Color space: sRGB +- Background: solid `#18181b` (zinc-900) +- All five color variants must be generated and previewed before selecting final +- Spec: `docs/superpowers/specs/2026-09-22-app-icon-design.md` + +--- + +### Task 1: Create the Base SVG Icon (Blue Variant) + +**Files:** +- Create: `src-tauri/icons/icon.svg` + +**Interfaces:** +- Consumes: nothing +- Produces: `src-tauri/icons/icon.svg` — the blue accent variant, used as the template for all other variants. Contains three accent hex values that the variant script substitutes: `#60a5fa` (blade tip), `#2563eb` (blade pivot), `#3b82f6` (cut accent). + +- [ ] **Step 1: Create the icons directory** + +```bash +mkdir -p src-tauri/icons +``` + +- [ ] **Step 2: Create the base SVG file** + +Create `src-tauri/icons/icon.svg` with the following content. This is the blue accent variant — scissors cutting diagonally across a film strip on a dark background. + +```xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +Key geometry decisions: +- Film strip spans x=72–440 (extends beyond safe zone for graceful clipping on round masks), y=220–292 (72px tall) +- Cut line from (269, 216) to (243, 296) — gentle diagonal matching the 20° scissors rotation +- Left half polygon: (72,220)→(265,220)→(239,292)→(72,292) — the right edge is the diagonal cut +- Right half polygon: (273,220)→(440,220)→(440,292)→(247,292) — the left edge is the diagonal cut +- Gap between halves: ~8px perpendicular to the cut line +- Scissors: symmetric blades (triangular tapers, 20px wide at pivot → 0 at tip, 130px long), rotated 20° as a group +- Handles: tapered quadrilaterals, ~90px from pivot to ring +- Rings: 20px radius circles with zinc-400 stroke, zinc-900 fill (transparent to background) +- Blade gradient: light blue (`#60a5fa`) at tips, darker (`#2563eb`) near pivot + +- [ ] **Step 3: Verify visually in browser** + +```bash +open src-tauri/icons/icon.svg +``` + +Open the SVG in a browser. Verify: +1. Dark background fills the square +2. Film strip is visible as a horizontal band with a diagonal gap +3. Sprocket holes are visible as darker rectangles along the strip edges +4. Scissors blades cross through the gap at a diagonal angle +5. Blade gradient goes from lighter (tips) to darker (pivot) +6. Handles taper from the pivot to the rings +7. Rings are visible as circular outlines +8. Pivot screw is centered +9. All critical elements (scissors, film strip center) are within the inner 66% safe zone + +If any element needs adjustment (position, size, proportions), edit the coordinates in `icon.svg` and refresh. This visual tuning is expected — hand-authored SVG coordinates are approximate starting points. + +- [ ] **Step 4: Commit** + +```bash +git add src-tauri/icons/icon.svg +git commit -m "feat: add base SVG app icon (blue variant)" +``` + +--- + +### Task 2: Generate Color Variant SVGs + +**Files:** +- Create: `scripts/generate-icon-variants.sh` +- Create: `src-tauri/icons/variants/icon-blue.svg` +- Create: `src-tauri/icons/variants/icon-purple.svg` +- Create: `src-tauri/icons/variants/icon-green.svg` +- Create: `src-tauri/icons/variants/icon-orange.svg` +- Create: `src-tauri/icons/variants/icon-mono.svg` + +**Interfaces:** +- Consumes: `src-tauri/icons/icon.svg` — the blue variant template containing hex values `#60a5fa`, `#2563eb`, `#3b82f6` +- Produces: five SVG files in `src-tauri/icons/variants/`, one per color accent. User picks their preferred variant in the next task. + +- [ ] **Step 1: Create the variant generation script** + +Create `scripts/generate-icon-variants.sh`: + +```bash +#!/bin/bash +set -euo pipefail + +SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)" +ROOT_DIR="$(cd "$SCRIPT_DIR/.." && pwd)" +SOURCE="$ROOT_DIR/src-tauri/icons/icon.svg" +OUT_DIR="$ROOT_DIR/src-tauri/icons/variants" + +mkdir -p "$OUT_DIR" + +# Blue is the base template — copy as-is +cp "$SOURCE" "$OUT_DIR/icon-blue.svg" + +# Each variant substitutes three accent hex values: +# #60a5fa = blade tip (lighter) +# #2563eb = blade pivot (darker) +# #3b82f6 = cut edge accent +create_variant() { + local name="$1" tip="$2" pivot="$3" accent="$4" + sed \ + -e "s/#60a5fa/$tip/g" \ + -e "s/#2563eb/$pivot/g" \ + -e "s/#3b82f6/$accent/g" \ + "$SOURCE" > "$OUT_DIR/icon-${name}.svg" + echo "Created icon-${name}.svg" +} + +create_variant "purple" "#c084fc" "#7c3aed" "#a855f7" +create_variant "green" "#34d399" "#059669" "#10b981" +create_variant "orange" "#fb923c" "#ea580c" "#f97316" +create_variant "mono" "#d4d4d8" "#71717a" "#a1a1aa" + +echo "All variants generated in $OUT_DIR" +``` + +- [ ] **Step 2: Run the script** + +```bash +chmod +x scripts/generate-icon-variants.sh +./scripts/generate-icon-variants.sh +``` + +Expected output: +``` +Created icon-purple.svg +Created icon-green.svg +Created icon-orange.svg +Created icon-mono.svg +All variants generated in /path/to/src-tauri/icons/variants +``` + +- [ ] **Step 3: Verify all five variants exist and differ only in accent colors** + +```bash +ls -la src-tauri/icons/variants/ +diff <(grep -v '#60a5fa\|#2563eb\|#3b82f6' src-tauri/icons/variants/icon-blue.svg) \ + <(grep -v '#c084fc\|#7c3aed\|#a855f7' src-tauri/icons/variants/icon-purple.svg) +``` + +Expected: `diff` produces no output (files are identical once accent colors are removed). + +- [ ] **Step 4: Open all variants for visual comparison** + +```bash +open src-tauri/icons/variants/icon-blue.svg \ + src-tauri/icons/variants/icon-purple.svg \ + src-tauri/icons/variants/icon-green.svg \ + src-tauri/icons/variants/icon-orange.svg \ + src-tauri/icons/variants/icon-mono.svg +``` + +Visually confirm each variant renders with the correct accent color on the scissor blades and cut line. + +- [ ] **Step 5: Commit** + +```bash +git add scripts/generate-icon-variants.sh src-tauri/icons/variants/ +git commit -m "feat: add icon color variant generation script and 5 variants" +``` + +--- + +### Task 3: User Selects Variant and Generate Platform Icons + +**Files:** +- Modify: `src-tauri/icons/icon.svg` (replaced with chosen variant if not blue) +- Create: `src-tauri/icons/32x32.png` (generated) +- Create: `src-tauri/icons/128x128.png` (generated) +- Create: `src-tauri/icons/128x128@2x.png` (generated) +- Create: `src-tauri/icons/icon.icns` (generated) +- Create: `src-tauri/icons/icon.ico` (generated) +- Create: `static/favicon.svg` + +**Interfaces:** +- Consumes: the user's chosen variant from `src-tauri/icons/variants/icon-{color}.svg` +- Produces: all platform icon files referenced by `tauri.conf.json`, plus `static/favicon.svg` + +- [ ] **Step 1: Present variants to the user and get their choice** + +Ask the user which color variant they prefer: blue, purple, green, orange, or mono. + +- [ ] **Step 2: Copy the chosen variant to primary locations** + +Replace `CHOSEN` with the selected variant name (e.g., `purple`): + +```bash +cp src-tauri/icons/variants/icon-CHOSEN.svg src-tauri/icons/icon.svg +cp src-tauri/icons/variants/icon-CHOSEN.svg static/favicon.svg +``` + +- [ ] **Step 3: Generate a high-res PNG from the SVG for Tauri icon generation** + +```bash +rsvg-convert -w 1024 -h 1024 src-tauri/icons/icon.svg -o src-tauri/icons/app-icon-1024.png +``` + +Verify the PNG was created and is 1024×1024: + +```bash +sips -g pixelHeight -g pixelWidth src-tauri/icons/app-icon-1024.png +``` + +Expected: +``` + pixelHeight: 1024 + pixelWidth: 1024 +``` + +- [ ] **Step 4: Run Tauri icon generator** + +```bash +npx tauri icon src-tauri/icons/app-icon-1024.png -o src-tauri/icons +``` + +This generates all platform icon files into `src-tauri/icons/`: +- `32x32.png` +- `128x128.png` +- `128x128@2x.png` +- `icon.icns` +- `icon.ico` +- Plus iOS and Android variants if applicable + +- [ ] **Step 5: Verify generated icon files exist and match tauri.conf.json references** + +```bash +ls -la src-tauri/icons/32x32.png \ + src-tauri/icons/128x128.png \ + src-tauri/icons/128x128@2x.png \ + src-tauri/icons/icon.icns \ + src-tauri/icons/icon.ico +``` + +All five files should exist and be non-empty. + +Cross-check with the icon paths in `tauri.conf.json`: +```json +"icon": [ + "icons/32x32.png", + "icons/128x128.png", + "icons/128x128@2x.png", + "icons/icon.icns", + "icons/icon.ico" +] +``` + +All referenced paths must have corresponding generated files. + +- [ ] **Step 6: Generate a 32px favicon PNG fallback** + +```bash +rsvg-convert -w 32 -h 32 src-tauri/icons/icon.svg -o static/favicon-32.png +``` + +- [ ] **Step 7: Clean up the intermediate 1024px source PNG** + +```bash +rm src-tauri/icons/app-icon-1024.png +``` + +- [ ] **Step 8: Commit** + +```bash +git add src-tauri/icons/ static/favicon.svg static/favicon-32.png +git commit -m "feat: generate platform icons from chosen variant" +``` + +--- + +### Task 4: Update Project References + +**Files:** +- Delete: `static/tauri.svg` (replaced by `favicon.svg`) +- Modify: `index.html` (add favicon link) + +**Interfaces:** +- Consumes: `static/favicon.svg` and `static/favicon-32.png` from Task 3 +- Produces: the app loads the new icon at all touchpoints (window icon, favicon, dock icon) + +- [ ] **Step 1: Remove the default Tauri SVG** + +```bash +rm static/tauri.svg +``` + +No source files reference `tauri.svg` — it is only a static asset. No further cleanup needed. + +- [ ] **Step 2: Add a favicon link to `index.html`** + +The current `index.html` has no favicon ``. Add one inside the `` tag, after the `` element: + +```html +<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> +<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" /> +``` + +The full `<head>` section should look like: + +```html +<head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <title>Video Clipper + + + +``` + +- [ ] **Step 3: Verify the app builds** + +```bash +npm run build +``` + +Build should succeed with no missing asset errors. + +- [ ] **Step 4: Commit** + +```bash +git add -A +git commit -m "chore: replace default Tauri branding with app icon" +```