Header & responsive layout polish; add read-only status badge for shared links

[alvin000009238]

Motivation

• Surface read-only state for shared links in the header instead of injecting a separate DOM node to make the UI more consistent and accessible.
• Improve header spacing, sizing and truncation to work across viewport sizes and avoid layout breaks.
• Consolidate styles for read-only mode and refine button sizes/labels for clarity and accessibility.

Description

• Update checkSharedLink in frontend/share.js to set the text of existing .header-status-badge elements to 僅供檢視 instead of creating and inserting a new indicator element.
• Add a .header-status-badge element into the header markup in public/index.html and add aria-live support for status updates; add aria-label attributes and adjust the import/share button text.
• Add and modify CSS rules across frontend/styles/header.css, frontend/styles/compatibility.css, frontend/styles/responsive.css, and frontend/styles/utilities.css to refine header padding/gaps, icon sizes, truncation behavior, read-only mode visuals, responsive wrapping behavior, and the new badge styling.
• Remove the old inline readonly-badge usage and wire read-only visibility via body.read-only-mode rules while ensuring the data-time box layout adapts on small screens.
• Update asset references in public/index.html to the new built CSS/JS filenames.

Testing

• Ran npm run build to produce production assets and the build completed successfully.
• Ran npm run lint and automated linting passed without errors.

---

Codex Task

[gemini-code-assist]

Code Review

This pull request refactors the header UI and read-only mode indicators. Key changes include replacing the manual share indicator with a dedicated status badge component, improving layout responsiveness and text truncation handling in the header, and updating button labels and accessibility attributes. CSS was also cleaned up to remove unused classes and adjust component sizing. I have no feedback to provide as no review comments were submitted.

[Copilot]

Pull request overview

Refines the header’s shared-link read-only indicator by reusing an existing status badge element and updating it via class selection, improving consistency and enabling better responsive/accessibility behavior.

Changes:

• Update header markup to remove the id-based status badge hook and keep a class-based .header-status-badge element with aria-live.
• Update checkSharedLink() to set the read-only text (僅供檢視) on all .header-status-badge elements instead of targeting a single #headerStatusBadge.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
public/index.html	Adjusts the status badge element to be class-based (removes id) while keeping an ARIA live region.
frontend/share.js	Updates shared-link detection to set read-only status text on .header-status-badge elements.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Because the JS now updates all .header-status-badge elements, having aria-live on each badge instance can cause duplicate announcements if multiple badges exist on the page. Consider making only one dedicated live region (e.g., add role=\"status\" and optionally aria-atomic=\"true\" on a single badge), and mark any additional visible duplicates as aria-hidden=\"true\" so screen readers announce the status only once.

[Copilot]

If the intent is to have a single status badge, updating a NodeList via querySelectorAll(...).forEach(...) is unnecessary and slightly obscures intent. Prefer selecting a single element (or explicitly documenting that multiple badges are expected) to keep the DOM contract clear and avoid accidentally updating badges in other parts of the UI that reuse the same class.

Suggested change

	document.querySelectorAll('.header-status-badge')
	.forEach((headerStatusBadge) => {
	headerStatusBadge.textContent = '僅供檢視';
	});
	const headerStatusBadge = document.querySelector('.header-status-badge');
	if (headerStatusBadge) {
	headerStatusBadge.textContent = '僅供檢視';
	}