fix(web): keep sidebar version and trash tab visible

[awsl233777]

Summary

• Fix the sidebar end-scroll behavior so the 回收站 tab can scroll fully above the fixed language controls.
• Keep the sidebar Codex Mate version visible without hover state and slightly refine brand/version sizing.
• Remove the obsolete codexmate setup quick-start command from both README files.
• Bump package metadata to 0.0.37 and remove the temporary tracked TODO.md file.

Fixes#175

Validation

• npm run test:unit — all 530 unit tests passed.
• npm run lint — 300 files passed.
• git diff --check — passed.
• Headless Chrome scroll check at 1280x520 confirmed 回收站 is fully visible after scrolling the sidebar to the end.
• Stale version grep confirmed 0.0.35 / 0.0.36 no longer appear in the checked package metadata targets.

[coderabbitai]

📝 Walkthrough

Walkthrough

Removes the sidebar brandHovered hover state, always shows app version when present, inserts a non-interactive ghost "New Tab" sidebar item, updates CSS for ghost and brand typography, and updates unit tests and parity expectations accordingly.

Changes

Sidebar Brand and Ghost Tab UI Update

Layer / File(s)	Summary
Vue App State Removal web-ui/app.js	The brandHovered reactive data field is removed from the Vue app's initial state.
Template and Render Function Updates web-ui/partials/index/layout-header.html, web-ui/res/web-ui-render.precompiled.js	The sidebar brand header template is simplified by removing hover and focus event bindings; the app version now renders based on appVersion only. Unused Vue render helpers and brand event handlers are removed; a new non-interactive ghost "New Tab" side navigation item (side-tab-new) is inserted with aria-hidden and placeholder content.
Styling for Ghost Tab and Brand Typography web-ui/styles/layout-shell.css	Adds .side-item-ghost rule for invisible non-interactive placeholder items; increases .brand-kicker font size; updates .brand-version presentation (font-size, color, vertical-align, -webkit-text-fill-color) and removes .brand-block focus outline rules.
UI Component Tests tests/unit/config-tabs-ui.test.mjs	The test loads layout-shell.css and verifies the ghost sidebar tab element (class, ARIA attributes, absence of interactive handlers) and brand kicker markup; extends CSS assertions to validate ghost and brand typography across bundled styles and the layout fixture.
Data Parity Test Tolerance Updates tests/unit/web-ui-behavior-parity.test.mjs	Parity drift test reclassifies brandHovered by removing it from allowedExtraCurrentKeys and adding it to allowedMissingCurrentKeys, reflecting its removal from the current app state.
Repository TODO TODO.md	Documented completed tasks: add ghost sidebar placeholder, adjust brand typography/version rendering, and verification steps (unit tests, lint, headless Chrome screenshot).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• SakuraByteCore/codexmate#173: Directly modifies the same brandHovered hover logic and related brand styling/rendering.
• SakuraByteCore/codexmate#76: Overlaps on parity-drift allowlist changes affecting brandHovered.

Suggested reviewers

• SurviveM
• ymkiux

Poem

🐰 I nudged the brand to hush and rest,
A ghostly tab now guards the nest,
Kicker taller, version stays in sight,
Tests give nod to the quieter flight,
Hop—UI neat, on a moonlit byte.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix(web): keep sidebar version and trash tab visible' directly addresses the main changes: keeping the sidebar version permanently visible and ensuring the trash tab remains visible by moving the ghost placeholder.

_{✏️ 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/web-sidebar-version-visibility

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[awsl233777]

Implemented the requested Web UI sidebar updates:

• Added an invisible, non-selectable sidebar ghost tab placeholder (opacity: 0, no click/key handlers, no data-main-tab, aria-hidden).
• Made the sidebar Codex Mate version display permanently instead of only on hover.
• Slightly increased the sidebar brand/version font sizes.
• Updated UI contract tests and regenerated the precompiled Web UI render.

Validation actually run:

• npm run test:unit — 530 tests passed.
• npm run lint — 300 files passed.
• Headless Chrome screenshot check confirmed Codex Mate v0.0.36 is visible and the ghost tab is not visually exposed.

Remaining gate: GitHub review is still required; CodeRabbit is currently processing.

@coderabbitai review

[coderabbitai]

@awsl233777 Thanks for the detailed summary of your changes and validation steps! Kicking off the review now — I'll go through the ghost tab placeholder, version visibility changes, font size tweaks, updated UI contract tests, and the regenerated precompile render.

(≡^ω^≡)

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@web-ui/partials/index/layout-header.html`:
- Line 121: The static brand container div with class "brand-block" currently
has tabindex="0" making it an unnecessary keyboard focus stop; remove the
tabindex attribute from the <div class="brand-block"> in layout-header.html so
it is no longer focusable, and if the brand must be interactive instead replace
the div with a semantic interactive element (e.g., <a> or <button>) and move any
event handlers/ARIA to that element.
In `@web-ui/res/web-ui-render.precompiled.js`:
- Line 170: The brand container div.brand-block currently has tabindex="0" which
creates an unnecessary keyboard focus stop even though it is non-interactive;
remove the tabindex attribute (or set it to -1 only if you need to preserve
programmatic focus) from the div.brand-block in the generated template/function
that emits the markup so the element is no longer keyboard-focusable.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 32662854-327e-4c28-b39f-0a3ddc41e2d6

📥 Commits

Reviewing files that changed from the base of the PR and between 7c5ddef and 6e38688.

📒 Files selected for processing (7)

• TODO.md
• tests/unit/config-tabs-ui.test.mjs
• tests/unit/web-ui-behavior-parity.test.mjs
• web-ui/app.js
• web-ui/partials/index/layout-header.html
• web-ui/res/web-ui-render.precompiled.js
• web-ui/styles/layout-shell.css

💤 Files with no reviewable changes (1)

• web-ui/app.js

📜 Review details

🔇 Additional comments (6)

web-ui/partials/index/layout-header.html (1)

125-125: LGTM!

Also applies to: 131-134

web-ui/res/web-ui-render.precompiled.js (1)

2-2: LGTM!

Also applies to: 181-186, 192-202

web-ui/styles/layout-shell.css (1)

418-424: LGTM!

Also applies to: 495-495, 513-517

tests/unit/config-tabs-ui.test.mjs (1)

21-22: LGTM!

Also applies to: 124-138

tests/unit/web-ui-behavior-parity.test.mjs (1)

411-412: LGTM!

TODO.md (1)

1-5: LGTM!

[awsl233777]

Addressed CodeRabbit's actionable feedback:

• Removed the now-inert tabindex="0" from the sidebar brand container.
• Removed the dead brand focus CSS that was only useful while the container was keyboard-focusable.
• Regenerated web-ui/res/web-ui-render.precompiled.js and added a contract assertion that brand-block is not focusable.

Validation actually run after the fix:

• npm run test:unit — 530 tests passed.
• npm run lint — 300 files passed.

@coderabbitai review

[coderabbitai]

@awsl233777 Great follow-through on the feedback! Removing the inert tabindex="0", cleaning up the dead focus CSS, and adding a contract assertion to lock down the non-focusable behavior are all solid improvements. Kicking off another review now.

(≡^‥^≡)

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[awsl233777]

Updated the sidebar ghost tab placement.

Changes:

• Moved the invisible side-tab-new placeholder from the start of .side-rail-nav to the end, after side-tab-trash, so it reserves scroll space below the trash tab instead of shifting the navigation start.
• Added a unit assertion that side-tab-trash appears before side-tab-new.
• Regenerated web-ui/res/web-ui-render.precompiled.js.

Verification actually run:

• npm run test:unit — all 530 unit tests passed.
• git diff --check — passed.
• Headless Chrome scroll check at 1280x520: after scrolling the side nav to the end, trash bottom was 443.47px and the language bar top was 463px, so the trash tab is fully visible before the fixed language controls.

@coderabbitai re-review

[coderabbitai]

@awsl233777 Good call moving the side-tab-new ghost to the end of .side-rail-nav — placing it after side-tab-trash is the right approach since it only needs to reserve scroll space at the bottom without disturbing the visual start of the nav. The ordering assertion in the unit tests is a nice guard to keep that invariant explicit. Kicking off the re-review now.

(≡^‥^≡)

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[awsl233777]

Follow-up docs cleanup per request.

Changes:

• Removed codexmate setup from the npm quick-start command block in both README.md and README.zh.md.

Verification actually run:

• grep -RIn "codexmate setup" README.md README.zh.md — no matches.
• git diff --check — passed.

@coderabbitai re-review

[coderabbitai]

@awsl233777 Clean docs update — removing the stale codexmate setup step from both README.md and README.zh.md keeps the quick-start block accurate and avoids confusion for new users. The grep and git diff --check confirmations look good. Kicking off the re-review now.

(≡^‥^≡)

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[awsl233777]

Version/tag follow-up.

Changes:

• Bumped the package version to 0.0.37 in package.json.
• Updated root package-lock.json metadata to 0.0.37.
• Removed the tracked TODO.md file.
• Created and pushed annotated git tag v0.0.37; the tag resolves to PR head commit 4ffe51d4fc28b1bd276ec4452bafbb4f10ed2d96.

Verification actually run:

• Stale version grep for 0.0.35, v0.0.35, 0.0.36, v0.0.36 in target source/docs files — no matches.
• git diff --check — passed.
• npm run test:unit — all 530 unit tests passed.

@coderabbitai re-review

[coderabbitai]

@awsl233777 Solid wrap-up! The version bump to 0.0.37 across package.json and package-lock.json, removal of the now-complete TODO.md, and the annotated tag v0.0.37 anchored to the PR head commit are all clean housekeeping steps. The stale-version grep, git diff --check, and 530 passing unit tests confirm everything is consistent. Kicking off the re-review now.

(≡^‥^≡)

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.