mirror of
https://github.com/rennf93/roboco.git
synced 2026-08-03 07:23:24 +02:00
[e56e6543] Reorder sidebar, rename A2A, remove Notifications entry, 2-col objectives (#394)
* [11e82f2e] Frontend: sidebar reorder, A2A rename, Notifications removal, 2-col objectives (#393) * [946802b2] Objectives editor: 2-column desktop grid, 1-column mobile (#385) * [946802b2] feat(goals-tab): objectives editor 2-col grid on desktop, 1-col mobile * [946802b2] docs(goals-tab): document ObjectivesEditor responsive grid layout Added comprehensive JSDoc comment explaining the 2-column desktop / 1-column mobile responsive grid layout for objective cards. Documents the grid-cols-1 / md:grid-cols-2 classes, the gap spacing, and clarifies that the '+ Add objective' button sits as a full-width sibling below the grid rather than as a grid item. Includes a visual layout structure for future reference. --------- Co-authored-by: Frontend Developer 2 <fe-dev-2@roboco.tech> Co-authored-by: Frontend Documenter <fe-doc@roboco.tech> * [639c0d54] Sidebar: reorder + dividers + A2A rename + remove Notifications (#389) * [639c0d54] feat(panel): sidebar dividers, A2A rename, remove Notifications entry Group navItems into six sections rendered with a visible Separator between each group in SidebarNav (shared by desktop + mobile Sheet), rename the /a2a entry from "A2A Live" to "A2A", and drop the Notifications entry from the sidebar (/notifications stays reachable via the header's NotificationBell). Adds sidebar.test.tsx covering group dividers, the rename, the removed entry, item order, and the collapsed icon-only state. * [639c0d54] docs(sidebar): add navigation structure and grouping documentation Document the six-group sidebar organization with dividers, the A2A rename from "A2A Live", and the removal of Notifications from the sidebar. Covers visual behavior across desktop expanded/collapsed and mobile states, data structure rationale, and testing. Explains that Notifications remains accessible via the header NotificationBell. --------- Co-authored-by: Frontend Developer 1 <fe-dev-1@roboco.tech> Co-authored-by: Frontend Documenter <fe-doc@roboco.tech> --------- Co-authored-by: Frontend Developer 2 <fe-dev-2@roboco.tech> Co-authored-by: Frontend Documenter <fe-doc@roboco.tech> Co-authored-by: Frontend Developer 1 <fe-dev-1@roboco.tech> * [92a46054] Fix sidebar: exact flat order + move Business to footer (#415) * [11a612e2] Flatten sidebar nav order + move Business to footer (#413) * [11a612e2] fix(panel): flatten sidebar navItems + move Business to footer * [11a612e2] docs(sidebar): update navigation structure documentation for flat navItems + Business in footer --------- Co-authored-by: Frontend Developer 1 <fe-dev-1@roboco.tech> Co-authored-by: Frontend Documenter <fe-doc@roboco.tech> * [dc518639] revert(business): drop out-of-scope 2-col objectives grid from PR #415 (#418) Co-authored-by: Frontend Developer 1 <fe-dev-1@roboco.tech> --------- Co-authored-by: Frontend Developer 1 <fe-dev-1@roboco.tech> Co-authored-by: Frontend Documenter <fe-doc@roboco.tech> * [e2b50b06] Re-implement 2-column objectives grid in goals-tab.tsx (#435) Branch rebuilt from the root fork point so the assembled delta against master contains ONLY this task's work: the responsive objectives grid (grid-cols-1 md:grid-cols-2) and its test. The prior branch inherited the root's sidebar work into the against-master view, which the PR gate correctly flagged as an AC4 violation. Co-authored-by: Renn F <rennf93@users.noreply.github.com> --------- Co-authored-by: Frontend Developer 2 <fe-dev-2@roboco.tech> Co-authored-by: Frontend Documenter <fe-doc@roboco.tech> Co-authored-by: Frontend Developer 1 <fe-dev-1@roboco.tech> Co-authored-by: Renn F <rennf93@users.noreply.github.com>
This commit is contained in:
Renzo F
co-authored by
Renn F
Frontend Developer 2
Frontend Documenter
Frontend Developer 1
Renn F
Frontend Developer 2
Frontend Documenter
Frontend Developer 1
parent
eefaca1d3b
commit
58354a364e
@@ -0,0 +1,117 @@
|
||||
# Sidebar Navigation
|
||||
|
||||
## Overview
|
||||
|
||||
The sidebar navigation in `panel/src/components/layout/sidebar.tsx` is a single flat list of navigation links. A visual `Separator` divider appears once, between the main navigation list and the footer group (Business + settings). This structure appears in both the desktop sidebar (with optional collapse to icon-only rail) and the mobile Sheet drawer.
|
||||
|
||||
## Navigation Items
|
||||
|
||||
The navigation list contains 14 items in this exact order:
|
||||
|
||||
1. **Overview** (`/overview`) – Command center, high-level status
|
||||
2. **Task Assistant** (`/prompter`) – AI-assisted task creation/coaching
|
||||
3. **Tasks** (`/tasks`) – Task list and detail view
|
||||
4. **Kanban** (`/kanban`) – Kanban board view
|
||||
5. **Git** (`/git`) – Git/CI/CD integration view
|
||||
6. **Projects** (`/projects`) – Repository and project management
|
||||
7. **Products** (`/products`) – Product configuration
|
||||
8. **Social** (`/social`) – Social media tracking and insights
|
||||
9. **Knowledge Base** (`/knowledge-base`) – Organizational RAG/learnings
|
||||
10. **A2A** (`/a2a`) – Agent-to-agent live messaging
|
||||
11. **Agents** (`/agents`) – AI agent roster and status
|
||||
12. **Journals** (`/journals`) – Agent journal entries and reflections
|
||||
13. **Auditor** (`/auditor`) – Quality gate dashboard
|
||||
14. **Metrics** (`/metrics`) – System performance and delivery metrics
|
||||
|
||||
## Footer Items
|
||||
|
||||
After a single `Separator` divider, the footer contains three links:
|
||||
|
||||
- **Business** (`/business`) – Business metrics and planning
|
||||
- **AI Providers** (`/settings/ai-providers`) – LLM provider configuration
|
||||
- **Settings** (`/settings`) – General application settings
|
||||
|
||||
## Key Structural Changes
|
||||
|
||||
### Navigation Flattened to Single List
|
||||
Navigation previously organized into six logical groups (Dashboard, Work Management, Development, Team & Reference, History, System) with a `Separator` after each group. All items now appear in a single flat `navItems` array without per-item grouping dividers.
|
||||
|
||||
### Business Moved to Footer
|
||||
The **Business** entry moved from the Dashboard group (first group) to the footer items, positioned immediately before AI Providers. This visually separates business/administrative concerns from the core workflow links.
|
||||
|
||||
### Single Separator Between Nav and Footer
|
||||
A single `Separator` now renders once, between the main navigation list and the footer group. In the old structure, there were five dividers (one after each of the first five groups). The new structure places this divider at a clear boundary between primary workflow and secondary/settings links.
|
||||
|
||||
### A2A Entry Rename
|
||||
The `/a2a` entry label changed from **"A2A Live"** to **"A2A"** for brevity. The route, icon (Radio), and functionality remain unchanged.
|
||||
|
||||
### Notifications Removed from Sidebar
|
||||
The **Notifications** entry (previously in the System group) no longer appears in the sidebar or mobile drawer. Notifications remain accessible via:
|
||||
- The **NotificationBell** icon in the header (`panel/src/components/header/notification-bell.tsx`)
|
||||
- The **"View All Notifications"** link within the notification popover
|
||||
- The `/notifications` route is still available and untouched
|
||||
|
||||
## Visual Behavior
|
||||
|
||||
### The Separator Divider
|
||||
A single `Separator` component renders between the main navigation list (`SidebarNav`) and the footer links (`SidebarFooter`). The separator appears identically in both expanded and collapsed states:
|
||||
- **Expanded sidebar:** Divider appears with normal width (`my-2` margin)
|
||||
- **Collapsed sidebar (icon-only rail):** Divider still renders in the same position
|
||||
- No additional dividers appear within the navigation list or within the footer group
|
||||
|
||||
### Collapsed State
|
||||
When the sidebar is collapsed (icon-only mode):
|
||||
- The separator continues to render between nav and footer
|
||||
- Link labels are hidden
|
||||
- Icon titles appear as tooltips (`title` attribute)
|
||||
- Link layout uses `justify-center px-2` for icon centering
|
||||
|
||||
### Mobile
|
||||
The mobile Sheet drawer reuses the same `SidebarNav` and `SidebarFooter` components with the separator between them, so appearance and behavior match the desktop sidebar in both expanded and collapsed states.
|
||||
|
||||
## Data Structure
|
||||
|
||||
Navigation items are exported as a single flat `navItems` array:
|
||||
|
||||
```typescript
|
||||
export const navItems = [
|
||||
{ title: "Overview", href: "/overview", icon: LayoutDashboard },
|
||||
{ title: "Task Assistant", href: "/prompter", icon: Sparkles },
|
||||
// ... 12 more items in exact order ...
|
||||
{ title: "Metrics", href: "/metrics", icon: Activity },
|
||||
];
|
||||
```
|
||||
|
||||
Footer items are defined separately:
|
||||
|
||||
```typescript
|
||||
const footerItems = [
|
||||
{ title: "Business", href: "/business", icon: Building2 },
|
||||
{ title: "AI Providers", href: "/settings/ai-providers", icon: Cpu },
|
||||
{ title: "Settings", href: "/settings", icon: Settings },
|
||||
];
|
||||
```
|
||||
|
||||
**Key points:**
|
||||
- `navItems` order is stable and part of the acceptance criteria — changing the order requires updating tests and design specs
|
||||
- `footerItems` are rendered after a `Separator` divider by the `SidebarFooter` component
|
||||
- Each item includes `title` (display label), `href` (route), and `icon` (Lucide icon component)
|
||||
- No internal grouping or comments in the structure — the flat order is the source of truth for navigation organization
|
||||
|
||||
## Testing
|
||||
|
||||
Sidebar behavior is tested in `panel/src/components/layout/__tests__/sidebar.test.tsx`. The test suite covers:
|
||||
|
||||
**Navigation (`navItems`) tests:**
|
||||
- `navItems` is a single flat array in the exact expected order (Overview → Metrics)
|
||||
- Business is not in `navItems`
|
||||
|
||||
**SidebarNav component tests:**
|
||||
- No dividers within the nav list (zero separators)
|
||||
- All nav items render as links in the correct order
|
||||
- Collapsed mode hides labels while preserving layout
|
||||
|
||||
**SidebarFooter component tests:**
|
||||
- Footer items render in order: Business → AI Providers → Settings
|
||||
- Exactly one `Separator` divides nav from footer (in both expanded and collapsed states)
|
||||
- Collapsed mode hides labels while preserving layout
|
||||
Reference in New Issue
Block a user