UI: introduce top app bar, convert sidebar to navigation rail, refresh styling and tokens - #28
Conversation
|
Bugbot is not enabled for your account, so this pull request was not reviewed. Enable Bugbot in the Cursor dashboard to get automatic reviews on future PRs. |
![kilo-code-bot[bot]](https://avatars.githubusercontent.com/in/2193792?s=60&v=4){kind=small}
| <div class="kicker">Field robotics</div> | ||
| <div class="title">TWFarmBot</div> | ||
| <aside id="sidebar" aria-label="Primary navigation rail"> | ||
| <div class="brand" aria-label="TWFarmBot"> |
There was a problem hiding this comment.
SUGGESTION: aria-label on a plain <div> without a role is ignored by assistive technology.
The label won't be exposed to screen readers. If an accessible name is intended here, add an explicit role (e.g. role="img" for the brand mark) or move the label to an element with an implicit role. The parent <aside> already provides a navigation landmark label. The aria-hidden="true" on .brand-mark also means the visible brand text is the only exposed part, so the extra label adds no value as written.
Reply with @kilocode-bot fix it to have Kilo Code address this issue.
Code Review SummaryStatus: 1 Issue Found | Recommendation: Address before merge Overview
Issue Details (click to expand)SUGGESTION
Files Reviewed (3 files)
Fix these issues in Kilo Cloud Reviewed by hy3-20260706:free · Input: 74.4K · Output: 7.5K · Cached: 168.6K |
There was a problem hiding this comment.
Pull request overview
This PR modernizes the UI chrome by introducing a fixed Material 3–styled top app bar, converting the left sidebar into a compact navigation rail, and refreshing spacing/radii/elevation tokens to improve layout hierarchy and responsiveness.
Changes:
- Added a fixed
#top-app-barlayout and moved status + primary actions (Refresh/ESTOP) into the header. - Refreshed design tokens (spacing, radii, elevation/state colors) and updated surfaces (cards/metrics/map) to new Material 3 styling.
- Minor JS refactor to extract a
refreshAllhandler and bind it to the refresh button.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| apps/ui/src/twfarmbot_ui/static/js/main.js | Extracts and reuses a refreshAll click handler for the refresh button. |
| apps/ui/src/twfarmbot_ui/static/index.html | Reworks chrome markup: navigation rail <aside> + new top app bar header content/actions. |
| apps/ui/src/twfarmbot_ui/static/app.css | Introduces new tokens and restyles navigation rail/top bar and key surfaces with updated elevation/spacing. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <span class="brand-mark" aria-hidden="true">eco</span> | ||
| <span class="brand-wordmark">TWFarmBot</span> | ||
| </div> | ||
| <nav id="nav" aria-label="Main navigation"></nav> |
| .nav-item:hover::before { background: var(--md-state-hover); } | ||
| .nav-item.active { color: var(--md-sys-color-on-secondary-container); font-weight: 600; } | ||
| .nav-item.active::before { background: var(--md-sys-color-secondary-container); } |
Motivation
Description
--space-10,--radius-xl,--topbar-h,--md-elevation-1/2,--md-state-hover,--md-state-focus) and migrated many surfaces tocolor-mixand elevation shadows.--sidebar-w, adjusting.brand,.nav-item,.nav-label, hover/active indicators, and updating cards/metrics/garden-map to new radii/shadows and spacing.#top-app-barwith.top-app-bar-title,.top-app-bar-subtitle, and.top-app-bar-actions, moved the status block and action buttons into the header, and added ARIA labels and updated markup inindex.html(brand mark/wordmark, header structure).js/main.jsto extractrefreshAlland bind it to the refresh button, leaving ESTOP handling unchanged.Testing
Codex Task