feat(web-demo): 新增 GitHub 儲存庫連結圖示

[doggy8088]

摘要

在 Browser Lab 頂端列右上角新增 GitHub 儲存庫連結圖示，讓使用者能直接回到 MiniExcel.Rust 上游儲存庫。

變更內容

• 在頂端列最右側加入 GitHub 標誌圖示，連結至 https://github.com/mini-software/MiniExcel-Rust。
• 使用原生 <a> 元素進行網址導覽，並以 target="_blank" 與 rel="noopener noreferrer" 安全開啟外部頁面。
• 使用內嵌 SVG 呈現圖示，透過 aria-label 提供可存取名稱，並將 SVG 標記為裝飾內容。
• 新增一般、滑鼠移入與鍵盤 focus 狀態的樣式，維持現有 Browser Lab 視覺系統。
• 更新 Browser Lab E2E 測試，驗證 GitHub 連結的可見名稱與目標網址。

影響範圍

• web-demo/public/index.html：新增右上角 GitHub 連結與 SVG 圖示。
• web-demo/public/styles.css：新增圖示連結的尺寸、色彩、邊框與互動樣式。
• web-demo/tests/browser.spec.mjs：加入桌面版與行動版 GitHub 連結斷言。

驗證

• npm ci
• npm run build
• npm run test:e2e：14 項通過、4 項依既有桌面／行動版測試篩選條件跳過。
• 已檢查桌面版與 Pixel 7 行動版截圖：圖示位於右上角，沒有遮擋或橫向溢位。

注意事項

• 目前分支已 rebase 至 upstream/main。
• 本 PR 不修改 Rust 核心程式碼，也不改變既有 Browser Lab 工作流程。

Summary by CodeRabbit

• New Features

  • Added a GitHub link to the top navigation, opening the MiniExcel Rust repository in a new tab.
  • Added a styled icon button with hover states and accessible labeling.
  • Added secure external-link handling for improved browsing safety.

• Tests

  • Expanded browser coverage to verify the repository link, new-tab behavior, and secure link attributes.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Advanced

Run ID: c8e50513-f849-4fe3-9db2-8e42bf5fc262

📥 Commits

Reviewing files that changed from the base of the PR and between 9e9fde6 and 5e2d04e.

📒 Files selected for processing (1)

• web-demo/tests/browser.spec.mjs

Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review.

---

📝 Walkthrough

Walkthrough

The web demo adds a GitHub repository link to the top navigation, styles it as an icon button, and verifies its destination and link attributes in the browser test.

Changes

GitHub Repository Link

Layer / File(s)	Summary
Navigation link and browser validation web-demo/public/index.html, web-demo/public/styles.css, web-demo/tests/browser.spec.mjs	The navigation adds a protected external GitHub link with an accessible label and inline SVG icon. CSS adds its default and hover styles. The browser test verifies the repository URL, _blank target, and noopener noreferrer relationship.

Priority: ⬇️ Low

Estimated code review effort: 1 (Trivial) | ~5 minutes

Change: Feature

Suggested reviewers: shps951023

Merge Risk: ⚪ Minimal · up to 5e2d0

The repository-link change is localized and its URL, accessibility, security attributes, and focus behavior are covered by the supplied evidence.

🚥 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 clearly identifies the web demo feature: adding a GitHub repository link icon. It matches the primary change in the pull request.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1…
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

[Copilot]

🟡 Changes recommended

Address the narrow-width overflow risk and strengthen assertions for target and rel.

Get a fresh assessment by requesting another Copilot review.

Pull request overview

Adds an accessible GitHub repository link icon to the Browser Lab header.

Changes:

• Added external GitHub link with inline SVG.
• Added styling for hover and focus states.
• Added desktop and mobile E2E coverage.

File summaries

File	Review summary
web-demo/tests/browser.spec.mjs	Nit (3 votes): also assert target and rel.
web-demo/public/styles.css	Moderate (1 vote): address potential 320px mobile overflow and add narrow-width E2E coverage.
web-demo/public/index.html	Adds the GitHub link and SVG icon.

Review details

Suppressed comments (1)

web-demo/public/styles.css:198

• The mobile .topbar remains a single non-wrapping flex row, while this adds another fixed 34px item to the badge, implementation switch, gaps, and brand. At the declared 320px minimum viewport, those intrinsic widths exceed the 296px content width and can introduce horizontal overflow; the current check only covers Pixel 7 (412px). Add a narrow-width fallback (such as allowing the actions to shrink/wrap or collapsing the badge) and cover that width in E2E.

  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;

• Files reviewed: 3/3 changed files
• Comments generated: 1
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.