🍕 chore(icons): replace placeholder S logo with Clay icon everywhere

[jjpaulino]

Why

The toolbar icon, `chrome://extensions` tile, and Web Store listing have been showing a generic red S placeholder since v1. The actual Clay character (the one used for the FAB and the in-page panel header) wasn't wired into the browser-chrome surfaces. This unifies the brand — the same character now appears everywhere the user sees the extension.

What changed

Surface	Before	After
Chrome toolbar (16×16, 32×32)	Red square "S"	Clay icon
`chrome://extensions` tile (48, 128)	Red square "S"	Clay icon
Chrome Web Store listing (128)	Red square "S"	Clay icon
Popup window (40×40 logo)	Red square "S"	Clay icon
Options page header (32×32 logo)	Red square "S"	Clay icon
FAB (already done)	Clay icon	Clay icon (no change)
In-page panel header (already done)	Clay icon	Clay icon (no change)

Files

• `public/icons/icon-{16,32,48,128}.png` regenerated from `src/assets/clay-icon.png`:
  • 32 / 48 / 128 sized straight from the 200×200 source so they keep the cute floating-in-space padding.
  • 16 cropped to 160×160 first so the character's head + face actually fill the tiny toolbar slot — without the crop, the transparent padding eats most of the icon and you just see a faint blob.
• `src/popup/Popup.tsx` + `popup.css`: drop the colored-square + "S" letter, render `` instead.
• `src/options/Options.tsx` + `options.css`: same swap in the settings-page header.

Why ?inline for the popup/options

The popup and options bundles are extension-internal pages, so a normal asset import would also work. Using `?inline` (base64 data URL) keeps them consistent with the FAB and Header (which need it because they're injected into the host page's Shadow DOM), and sidesteps any future path-resolution surprises if someone refactors the bundles.

Test plan

• `npm run validate` (113/113 tests, no behavior change)
• `npm run build` produces `dist/icons/icon-{16,32,48,128}.png` with the new bytes
• Verified each generated size renders the Clay character recognizably
• Reload unpacked extension → toolbar icon shows the Clay character
• Visit `chrome://extensions` → tile shows the Clay character at the larger size
• Click toolbar icon on a non-Clay page → popup shows the Clay character at the top, no red square
• Open Options → settings page header shows the Clay character

No manifest changes were needed — Chrome picks up the new icon bytes on the next reload.

Made with Cursor