Skip to content

Polish Pocket Home Screen name and Apple touch icons - #584

Merged
nedtwigg merged 5 commits into
mainfrom
pocket-app-marketing
Sep 7, 2026
Merged

Polish Pocket Home Screen name and Apple touch icons#584
nedtwigg merged 5 commits into
mainfrom
pocket-app-marketing

Conversation

@nedtwigg

@nedtwigg nedtwigg commented Sep 7, 2026

Copy link
Copy Markdown
Member

Pocket’s Home Screen label used the generic short name “Pocket,” and the Apple touch icon included an inset rounded tile that acquired a second boundary when iOS masked it. Use “Dormouse” for the short name and explicit iOS title, while retaining “Dormouse Pocket” as the full app name.

Replace the website and Pocket Apple touch icons with matching 180 × 180 exports of the original mouse artwork on an edge-to-edge charcoal background. Keep the editable SVG in website/src/assets/apple-touch-icon.svg, outside the public assets.

Validation: Pocket production build passed, including worker and shell checks. A full-page Inkscape render of the saved SVG at 180 × 180 matches both shipped PNGs pixel for pixel; all pixels are opaque and all corners are charcoal (#43423d). git diff --check passed.

@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Sep 7, 2026

Copy link
Copy Markdown

Deploying mouseterm with  Cloudflare Pages  Cloudflare Pages

Latest commit: 165d003
Status: ✅  Deploy successful!
Preview URL: https://8d997e28.mouseterm.pages.dev
Branch Preview URL: https://pocket-app-marketing.mouseterm.pages.dev

View logs

@dormouse-bot dormouse-bot left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewing as a draft — flagging anything that looks worth a quick fix. Mark ready for a full review.

The PNG swap itself is right: the new apple-touch-icon.png is 180 × 180, fully opaque, #43423d to all four corners (0 transparent pixels), so iOS's mask has nothing to double up on. Both copies are byte-identical. Four things below.

1. The checked-in SVG doesn't reproduce the PNG it's filed as the source for. website/public/apple-touch-icon.svg rendered at 180 × 180 gives transparent corners, a white ring, and an inset charcoal tile — the exact artifact this PR removes. Its outer bg-enlarged rect is fill:#ffffff with ry="202.29759", and the #43423d rounded-rect sits inset by roughly 55/1024 after its transform. So the shipped PNG must have come from a cropped or zoomed export region that nothing in the file records; the next person who regenerates from this "source" reintroduces the bug. Worth either baking the edge-to-edge background into the SVG so a plain full-viewBox render matches, or noting the export region beside it.

2. That SVG is a byte-copy of website/public/favicon.svg. Stripping sodipodi:/inkscape: editor attributes and the <sodipodi:namedview> block leaves the two files character-for-character identical (36,240 chars each) — the only real diffs are docname, inkscape:version, and the editor's zoom/window geometry. Nothing references apple-touch-icon.svg, and Vite copies public/ verbatim, so it ships 38 KB of unreferenced Inkscape source (guides, Icon Mask clip path, App Icon Guides symbol) to the deployed site. If the source needs to live somewhere, one copy plus a note that both icons derive from it beats a second near-identical file.

3. The manifest icons still have the old inset tile, so Android keeps the double boundary. lib/pocket/public/icon-192.png and icon-512.png are untouched and both are transparent at all four corners — 13,559/36,864 and 96,280/262,144 fully transparent pixels. Those are the icons entries the manifest points at, so the Chrome/Android Home Screen still composites an inset rounded tile inside the launcher's own mask. The PR title scopes to Apple, so this may be deliberate — but the "second boundary" problem is only half fixed.

4. docs/specs/pocket-app.md isn't updated. AGENTS.md: "When code covered by a spec changes, change the spec." Two rules in "Installable web app" are touched. It states "The manifest and icons must be checked-in source under lib/pocket/public/", and the icon's SVG source landed in website/public/ instead — either the placement or the rule wants adjusting. And the new Home Screen label is a two-places-must-agree invariant: short_name in the manifest and apple-mobile-web-app-title in lib/pocket/index.html have to stay equal or iOS and Android disagree about what the icon is called, which is exactly the kind of rule the spec conventions say to record. Heads-up that pocket-app.md is sitting exactly at its 4,050-word budget, so any addition needs node scripts/spec-lint.mjs --ratchet docs/specs/pocket-app.md in the same commit.

Happy to push a commit for any of these — say which.

How I checked
  • Corner/alpha counts: decoded each PNG's IDAT directly and sampled (0,0), (w-1,0), (0,h-1), (w-1,h-1) plus a full-image count of pixels with A == 0.
  • SVG render: headless Chromium screenshot of website/public/apple-touch-icon.svg at width=180 height=180 with a transparent default background.
  • SVG equality: stripped \s(sodipodi|inkscape):[\w-]+="[^"]*" and the <sodipodi:namedview …/> element from both files, collapsed whitespace, compared.
  • Budget: node scripts/spec-lint.mjs --ratchet docs/specs/pocket-app.md left scripts/spec-word-budgets.json unchanged, so 4,050 is already the rounded-up current size.
  • pnpm lint:specs and public-docs-lint both pass on this head.

@nedtwigg

nedtwigg commented Sep 7, 2026

Copy link
Copy Markdown
Member Author

Addressed the review in d86a819 and 165d003:

  1. Synced the saved SVG. A plain full-page Inkscape export at 180 × 180 now matches both shipped PNGs pixel for pixel. All pixels are opaque and all four corners are #43423d.
  2. Moved the editable source to website/src/assets/apple-touch-icon.svg, outside public/, so Vite no longer publishes it. The saved artwork now differs from favicon.svg: it has an edge-to-edge charcoal background and no white outer tile.
  3. Keeping the Android manifest icons unchanged in this Apple-icon PR, consistent with the requested scope. An Android launcher/maskable-icon update is separate work.
  4. The user explicitly requested no spec edit for these changes. The deployed Pocket manifest and PNG icons remain checked in under lib/pocket/public/; the SVG is an editable artwork master rather than a runtime icon reference.

@dormouse-bot

Copy link
Copy Markdown
Collaborator

Verified 1 and 2 on 165d0036; 3 and 4 are yours to call and I have nothing to add to either.

1 confirms, independently of your export. I re-rendered the saved SVG at 180 × 180 in headless Chromium — a different rasterizer than Inkscape, so this is a cross-check rather than a repeat — and the artifact is gone. The bg-enlarged white rect is deleted and rounded-rect now resolves to exactly (0,0)(1024,1024) with ry="0" after the g1 transform, so any full-viewBox render is edge-to-edge by construction, not by export region. The render has zero transparent pixels and #43423d at all four corners. Against the shipped PNG, 2,473 of 32,400 pixels differ at all, max channel delta 40, and 73% of those sit adjacent to a contrast edge in the reference — antialiasing along the artwork's own outlines, no structural difference. My original concern was that regenerating from the source would reintroduce the inset tile; it no longer can.

2 confirms. The file is out of public/, so Vite no longer publishes the 38 KB of Inkscape source, and it is no longer a byte-copy of favicon.svg (35,938 vs 36,240 chars after stripping editor attributes).

One thing worth putting in the thread since the spec won't carry it: the two-places-must-agree values do agree today — short_name is Dormouse in lib/pocket/public/manifest.webmanifest and apple-mobile-web-app-title is Dormouse in lib/pocket/index.html, so iOS and Android name the icon the same. Noting it here rather than proposing an edit.

How I checked
  • Rect geometry: rounded-rect is x=51.915424 y=53.373917 w=h=917.62146 ry=0 inside g1's matrix(1.1159286,0,0,1.1159286,-57.933906,-59.561482). Applying it: x0=4.2e-07, y0=-1.5e-06, x1=y1=1024.00003. Full-bleed on the 1024 viewBox.
  • Render: chromium --headless --screenshot --window-size=180,180 --default-background-color=00000000 on an <img> of the SVG at width=180 height=180, transparent page background.
  • Pixel comparison: decoded both PNGs' IDAT directly (unfiltered scanlines), compared RGB per pixel, and classified each difference by whether a neighbour in the reference differs in luminance by more than 12. The 44 differences in the 3px border ring are all in the x≈88–100 strip at top and bottom where the artwork itself reaches the edge, deltas of 2–7 — not a background seam.
  • Website and Pocket PNGs are still byte-identical to each other, both 180 × 180, both zero transparent pixels.
  • SVG divergence: stripped \s(sodipodi|inkscape):[\w-]+="[^"]*" and the <sodipodi:namedview …/> element from both files, collapsed whitespace, compared — no longer equal.

@nedtwigg
nedtwigg marked this pull request as ready for review September 7, 2026 05:57
@nedtwigg
nedtwigg merged commit 817a00e into main Sep 7, 2026
10 checks passed
@nedtwigg
nedtwigg deleted the pocket-app-marketing branch September 7, 2026 05:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants