Show header status badge for shared (read-only) views and refine header responsiveness/styles - #107
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request refactors the header UI, improves mobile responsiveness, and updates the share indicator logic. Key changes include layout adjustments, the addition of a status badge, and accessibility enhancements via ARIA labels. Feedback suggests centralizing hardcoded UI strings and removing redundant CSS rules to improve maintainability.
| const timeBox = document.querySelector('.data-time-box'); | ||
| header.insertBefore(indicator, timeBox); | ||
| const headerStatusBadge = document.getElementById('headerStatusBadge'); | ||
| if (headerStatusBadge) headerStatusBadge.textContent = '僅供檢視'; |
There was a problem hiding this comment.
The status text '僅供檢視' is hardcoded here. To improve maintainability and simplify potential future internationalization, consider defining UI strings as constants in a central location rather than hardcoding them directly in the component logic.
| .time-label { | ||
| display: none; | ||
| } |
There was a problem hiding this comment.
This rule is redundant because .time-label is already set to display: none; in frontend/styles/header.css for all screen sizes. Removing this rule will help keep the stylesheets DRY and easier to maintain.
There was a problem hiding this comment.
Pull request overview
Updates the app header to better communicate shared-link read-only status and to improve header responsiveness/truncation across breakpoints, aligning UI controls and styles with the revised header layout.
Changes:
- Replace the DOM-inserted shared-link indicator with a dedicated
#headerStatusBadgeelement in the header and set its text inshare.js. - Refine header markup (subtitle row, status badge, ARIA labels) and adjust multiple header/responsive CSS rules for spacing, truncation, and button sizing.
- Update
public/index.htmlto reference the latest built/dist/*asset filenames.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| public/index.html | Adds header status badge element + subtitle row wrapper, tweaks header button labels/ARIA, updates built asset filenames. |
| frontend/share.js | Sets read-only header badge text for shared-link views instead of inserting an indicator element. |
| frontend/styles/header.css | Implements truncation/min-width fixes and adds styling/visibility rules for the new header status badge; adjusts header sizing. |
| frontend/styles/responsive.css | Refines header layout behavior at 768px/480px breakpoints (wrapping, spacing, hiding text on very small screens). |
| frontend/styles/compatibility.css | Updates read-only-mode header layout rules. |
| frontend/styles/utilities.css | Adjusts theme toggle sizing and removes the old .readonly-badge utility style. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Motivation
public/index.htmlafter a build.Description
frontend/share.jswith setting the text of a new#headerStatusBadgeelement and retainedbody.read-only-modeclass for styling..header-status-badgeelement to the header inpublic/index.htmland adjusted header markup to include a.subtitle-rowwrapper and ARIA labels on header buttons.frontend/styles/header.css,frontend/styles/compatibility.css,frontend/styles/responsive.cssandfrontend/styles/utilities.cssto tighten paddings, adjust icon sizes, enable truncation/overflow handling, show the status badge whenbody.read-only-modeis active, and improve responsive wrapping/spacing for narrow viewports.public/index.htmlto the new build filenames and tweaked some button labels (for clarity/localization).Testing
npm run buildand the build completed successfully.npm run lintand no lint errors were reported.Codex Task