feat(web): add Stack-chan icons by meganetaaan · Pull Request #405 · stack-chan/stack-chan

meganetaaan · 2026-04-30T11:25:00Z

Summary

Add the two provided Stack-chan icon images under web/assets/
Use the line-art icon as the favicon / app icon for the Web UI pages
Show the illustrated icon on the Web development landing page
Add a small Node-based asset reference test for the Web UI

Closes #404

Test Plan

npm test from web/
npx prettier --check package.json icon-assets.test.mjs from web/
Local browser smoke test at / via python3 -m http.server 4173
Browser console check: no JS errors

Summary by CodeRabbit

New Features
- Added favicon and Apple touch icon support across all pages for improved branding visibility.
- Redesigned homepage with visual icon display and improved layout featuring better spacing and card-based navigation.
Tests
- Introduced automated tests to validate icon and favicon configuration across the web interface.

coderabbitai · 2026-04-30T11:25:13Z

📝 Walkthrough

Walkthrough

The pull request adds Stack-chan icon assets to the web UI by wiring favicon and Apple touch icon metadata across HTML pages, introducing CSS styling for responsive icon display, restructuring the main index page layout to showcase an icon, implementing a validation test module to ensure icon file references are correct, and adding a corresponding npm test script.

Changes

Cohort / File(s)	Summary
Favicon & Icon Metadata `web/flash/index.html`, `web/preference/index.html`	Added `<link rel="icon">` and `<link rel="apple-touch-icon">` tags referencing `../assets/stackchan-symbol.png` to enable browser tab and Apple device icon display.
Main Index Page `web/index.html`	Added favicon/apple-touch-icon links, linked global stylesheet, and restructured body content to feature a Stack-chan icon image within a styled card layout alongside navigation links.
Icon Styling `web/global.css`	Changed `.app` layout from fixed `height: 100%` to `min-height: 100%` for flexible container growth; added `.dev-home` class for spacing and centered flex alignment; added `.app-icon` class for responsive icon sizing with drop-shadow effect.
Icon Asset Validation `web/icon-assets.test.mjs`, `web/package.json`	Introduced new test module validating icon file existence and HTML icon link references; added `test` npm script to execute icon validation.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 Hops with pure delight!
Stack-chan icons now shimmer bright,
Favicons dance in tabs so neat,
Testing ensures validation's sweet,
CSS paints them just right,
Web UI shines in full might! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'feat(web): add Stack-chan icons' accurately and concisely describes the primary change in the pull request, which is adding Stack-chan icon assets to the web UI.
Linked Issues check	✅ Passed	All coding objectives from issue `#404` are met: icons placed in assets directory, Web UI pages reference icons as favicons/app icons, new test validates icon references, and existing tests/rendering remain functional.
Out of Scope Changes check	✅ Passed	All changes are directly related to the stated objectives of adding Stack-chan icons. CSS updates support the new icon display layouts, test validates icon wiring, and HTML updates incorporate icon references as required.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch feat/issue-404-stackchan-icons

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Review rate limit: 7/8 reviews remaining, refill in 7 minutes and 30 seconds.}

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: b7af464f91

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

chatgpt-codex-connector · 2026-04-30T11:27:20Z

+  <link rel="icon" href="assets/stackchan-symbol.png" type="image/png">
+  <link rel="apple-touch-icon" href="assets/stackchan-symbol.png">


Use optimized favicon assets for page icon links

The new icon links point to assets/stackchan-symbol.png, which is a full-size 1254×1254 PNG (~800 KB) and will be fetched as the tab/app icon on every page load. In environments where this web UI is served over a network (not just localhost), this adds avoidable transfer and latency for a non-critical resource. Please reference a small optimized favicon/touch-icon variant (for example 32×32 and 180×180 outputs) instead of the original source image.

Useful? React with 👍 / 👎.

coderabbitai

🧹 Nitpick comments (1)

web/icon-assets.test.mjs (1)

12-17: ⚡ Quick win

Also validate apple-touch-icon links in this test.

Right now this loop only guards rel="icon". Since Line 8-9 were added in each page head, a missing rel="apple-touch-icon" would slip through.

Proposed diff

 for (const [page, iconPath] of pages) {
   const html = await readFile(new URL(`./${page}`, import.meta.url), 'utf8')
   if (!html.includes(`rel="icon" href="${iconPath}"`)) {
     throw new Error(`${page} should reference ${iconPath} as favicon`)
   }
+  if (!html.includes(`rel="apple-touch-icon" href="${iconPath}"`)) {
+    throw new Error(`${page} should reference ${iconPath} as apple-touch-icon`)
+  }
 }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@web/icon-assets.test.mjs` around lines 12 - 17, The test loop that iterates
over pages and iconPath currently only checks for rel="icon"; update the check
inside the for-loop (the code using pages, iconPath and html from readFile) to
also assert that the page includes the apple-touch-icon link—for example require
html.includes(`rel="icon" href="${iconPath}"`) AND
html.includes(`rel="apple-touch-icon" href="${iconPath}"`) (or the appropriate
apple-specific path if you have a separate mapping); throw the same Error if
either check fails so missing rel="apple-touch-icon" links are caught.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@web/icon-assets.test.mjs`:
- Around line 12-17: The test loop that iterates over pages and iconPath
currently only checks for rel="icon"; update the check inside the for-loop (the
code using pages, iconPath and html from readFile) to also assert that the page
includes the apple-touch-icon link—for example require html.includes(`rel="icon"
href="${iconPath}"`) AND html.includes(`rel="apple-touch-icon"
href="${iconPath}"`) (or the appropriate apple-specific path if you have a
separate mapping); throw the same Error if either check fails so missing
rel="apple-touch-icon" links are caught.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 8e768a38-d022-4b3c-8524-c98ba6e1c605

📥 Commits

Reviewing files that changed from the base of the PR and between caca377 and b7af464.

⛔ Files ignored due to path filters (2)

web/assets/stackchan-icon.png is excluded by !**/*.png
web/assets/stackchan-symbol.png is excluded by !**/*.png

📒 Files selected for processing (6)

web/flash/index.html
web/global.css
web/icon-assets.test.mjs
web/index.html
web/package.json
web/preference/index.html

feat(web): add Stack-chan icons

b7af464

chatgpt-codex-connector Bot reviewed Apr 30, 2026

View reviewed changes

coderabbitai Bot reviewed Apr 30, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(web): add Stack-chan icons#405

feat(web): add Stack-chan icons#405
meganetaaan wants to merge 1 commit intodev/v1.0from
feat/issue-404-stackchan-icons

meganetaaan commented Apr 30, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Apr 30, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

chatgpt-codex-connector Bot left a comment

Uh oh!

chatgpt-codex-connector Bot Apr 30, 2026

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

		<link rel="icon" href="assets/stackchan-symbol.png" type="image/png">
		<link rel="apple-touch-icon" href="assets/stackchan-symbol.png">

Uh oh!

Conversation

meganetaaan commented Apr 30, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test Plan

Summary by CodeRabbit

Uh oh!

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

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot Apr 30, 2026

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

meganetaaan commented Apr 30, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Apr 30, 2026 •

edited

Loading