[P3] Admin page context separation #112

New Issue

claude · 2026-04-01T22:55:09+02:00

claude commented

2026-04-01 22:55:09 +02:00

Parent Epic

Problem

On Admin pages, the sidebar still shows Applications/Agents/Routes navigation — it's not actionable in the admin context and creates visual noise. The status filter buttons (OK/Warn/Error/Running) also appear on admin pages where they have no effect.

Proposed Solution

When on Admin pages:

Either hide the navigation sidebar entirely (admin has its own tab navigation)
Or collapse the sidebar to icons-only mode
Remove/hide the status filter buttons and KPI strip from the top bar
The breadcrumb already shows "Admin / Tab Name" which is correct

This creates a cleaner admin experience and reinforces that admin is a separate context from operational monitoring.

Acceptance Criteria

Admin pages have a visually distinct layout from operational pages
Status filter buttons hidden on admin pages
Sidebar is either hidden or collapsed on admin pages
Breadcrumb continues to show admin context correctly

## Parent Epic #100 ## Problem On Admin pages, the sidebar still shows Applications/Agents/Routes navigation — it's not actionable in the admin context and creates visual noise. The status filter buttons (OK/Warn/Error/Running) also appear on admin pages where they have no effect. ## Proposed Solution When on Admin pages: - Either hide the navigation sidebar entirely (admin has its own tab navigation) - Or collapse the sidebar to icons-only mode - Remove/hide the status filter buttons and KPI strip from the top bar - The breadcrumb already shows "Admin / Tab Name" which is correct This creates a cleaner admin experience and reinforces that admin is a separate context from operational monitoring. ## Acceptance Criteria - [ ] Admin pages have a visually distinct layout from operational pages - [ ] Status filter buttons hidden on admin pages - [ ] Sidebar is either hidden or collapsed on admin pages - [ ] Breadcrumb continues to show admin context correctly

claude added the ui ux labels 2026-04-01 22:55:09 +02:00

claude referenced this issue

2026-04-01 22:56:35 +02:00

Epic: UX Audit — PMF Readiness for First Market Offer #100

claude commented

2026-04-01 23:11:36 +02:00

Design Specification

Sidebar collapses to 32px icon-only rail on admin pages. Rail shows Cameleer logo + back-arrow to last operational tab. 200ms width transition. Status filters and KPI strip already hidden via existing isAdminPage guard.

Implementation: Pass SidebarRail component (or collapsed prop) when isAdminPage is true in LayoutShell.

## Design Specification Sidebar collapses to 32px icon-only rail on admin pages. Rail shows Cameleer logo + back-arrow to last operational tab. 200ms width transition. Status filters and KPI strip already hidden via existing `isAdminPage` guard. Implementation: Pass `SidebarRail` component (or `collapsed` prop) when `isAdminPage` is true in LayoutShell.

claude commented

2026-04-02 17:00:23 +02:00

Analysis: Current State & What Already Works

Already handled:

ContentTabs (Exchanges/Dashboard/Runtime/Logs) is hidden on admin pages via isAdminPage guard in LayoutShell
Admin breadcrumb shows correct context ("Admin / Users & Roles")
AdminLayout provides its own 6-tab navigation (RBAC, Audit, OIDC, App Config, Database, ClickHouse)
Main content padding adjusts to 1.5rem on admin

The actual problem:
The full operational sidebar (Applications tree, Agents tree, Routes tree, starred items, search box) still renders at full width (~240px) on admin pages. It's completely non-functional in the admin context — clicking an app navigates away from admin. It wastes ~20% of screen width and creates cognitive noise.

Status filters — these are part of ContentTabs which is already hidden. The KPI strip (TabKpis) is also inside ContentTabs. So this acceptance criterion is already met.

Proposed Approaches (3 options)

Option A: No Sidebar (recommended)

Hide the sidebar entirely. Admin already has its own tab nav — the sidebar adds nothing. Use the full viewport width for admin content.

CURRENT (problem):
+--------+--------------------------------------------------+
|  SIDE  | Admin / Users & Roles                            |
|  BAR   |--------------------------------------------------|
|  Apps  | [RBAC] [Audit] [OIDC] [AppCfg] [DB] [CH]        |
|  ...   |                                                  |
|  Agents|  +----+ +----+ +----+                            |
|  ...   |  | 12 | |  3 | |  2 |  stat cards               |
|  Routes|  |user| |grp | |role|                            |
|  ...   |  +----+ +----+ +----+                            |
|  240px |                                                  |
|  WASTE |  +-----------------------------------------+     |
|  HERE  |  | admin    | viewer  |  ...               |     |
|        |  +-----------------------------------------+     |
+--------+--------------------------------------------------+

OPTION A: No sidebar
+-----------------------------------------------------------+
| [<] Admin / Users & Roles                 [admin] [Logout]|
|-----------------------------------------------------------|
| [RBAC]  [Audit]  [OIDC]  [App Config]  [Database]  [CH]  |
|                                                           |
|  +------+  +------+  +------+                             |
|  |  12  |  |   3  |  |   2  |  stat cards                |
|  | users|  | groups|  | roles|                            |
|  +------+  +------+  +------+                             |
|                                                           |
|  +---------------------------------------------------+   |
|  | admin     | ADMIN   | admin@... | active  | [Edit]|   |
|  | viewer    | VIEWER  | view@...  | active  | [Edit]|   |
|  | operator  | OPER    | op@...    | active  | [Edit]|   |
|  +---------------------------------------------------+   |
|                                                           |
|  [<] = back to operational view (last visited tab)        |
+-----------------------------------------------------------+

Pros: Maximum content width, cleanest separation, simplest to implement (just pass collapsed={true} or don't render <Sidebar> at all).
Cons: Need a "back" affordance to return to operational view.

Option B: Icon Rail (32-48px)

Collapse sidebar to a narrow rail with just the logo and a back arrow. No tree navigation, no search.

OPTION B: Icon rail
+----+------------------------------------------------------+
| [C]| Admin / Users & Roles                [admin] [Logout]|
|    |------------------------------------------------------|
| [<]| [RBAC]  [Audit]  [OIDC]  [App Config]  [DB]  [CH]  |
|    |                                                      |
|    |  +------+  +------+  +------+                        |
|    |  |  12  |  |   3  |  |   2  |                        |
|    |  | users|  | groups|  | roles|                        |
|    |  +------+  +------+  +------+                        |
|    |                                                      |
|    |  +------------------------------------------------+  |
|    |  | admin    | ADMIN  | admin@... | active | [Edit]|  |
|    |  +------------------------------------------------+  |
|    |                                                      |
| 40 |  [C] = Cameleer logo                                 |
| px |  [<] = back arrow to operational view                |
+----+------------------------------------------------------+

Pros: Visual continuity with operational view (sidebar "collapses" rather than disappearing), logo stays visible.
Cons: 40px of wasted space for just two icons. Over-engineered for what it does.

Option C: Admin Sidebar

Replace the operational sidebar with an admin-specific one listing the 6 admin sections vertically.

OPTION C: Admin sidebar
+-----------+-----------------------------------------------+
|  ADMIN    | Admin / Users & Roles         [admin] [Logout]|
|           |-----------------------------------------------|
|  [<] Back |                                               |
|-----------|  +------+  +------+  +------+                 |
| > RBAC    |  |  12  |  |   3  |  |   2  |                |
|   Audit   |  | users|  | groups|  | roles|                |
|   OIDC    |  +------+  +------+  +------+                 |
|   App Cfg |                                               |
|   Database|  +---------------------------------------------+
|   CH      |  | admin    | ADMIN  | admin@... | active     |
|           |  +---------------------------------------------+
|           |                                               |
|   160px   |                                               |
+-----------+-----------------------------------------------+

Pros: Familiar sidebar pattern, admin sections always visible.
Cons: Duplicates the AdminLayout tabs — now there are two nav mechanisms for the same 6 pages. Confusing. Also wastes width for only 6 items that already fit in a horizontal tab bar.

Recommendation: Option A

Option A is the cleanest. The admin context already has its own horizontal tab navigation (6 tabs in AdminLayout). Adding a sidebar — whether icon rail or admin-specific — either wastes space (B) or duplicates navigation (C).

Implementation is simple:

In LayoutShell, conditionally render <Sidebar> only when !isAdminPage
Add a back button in the TopBar breadcrumb area (or just make the logo/breadcrumb "Admin" clickable to go back)
The AppShell from the design system likely needs to handle the "no sidebar" case gracefully (full-width content)

The back affordance could be as simple as making the breadcrumb's first segment ("Admin") a link back to the last operational tab, or adding a [<-] icon to the left of the breadcrumb.

## Analysis: Current State & What Already Works **Already handled:** - `ContentTabs` (Exchanges/Dashboard/Runtime/Logs) is hidden on admin pages via `isAdminPage` guard in `LayoutShell` - Admin breadcrumb shows correct context ("Admin / Users & Roles") - `AdminLayout` provides its own 6-tab navigation (RBAC, Audit, OIDC, App Config, Database, ClickHouse) - Main content padding adjusts to `1.5rem` on admin **The actual problem:** The full operational sidebar (Applications tree, Agents tree, Routes tree, starred items, search box) still renders at full width (~240px) on admin pages. It's completely non-functional in the admin context — clicking an app navigates away from admin. It wastes ~20% of screen width and creates cognitive noise. **Status filters** — these are part of `ContentTabs` which is already hidden. The KPI strip (`TabKpis`) is also inside `ContentTabs`. So this acceptance criterion is already met. --- ## Proposed Approaches (3 options) ### Option A: No Sidebar (recommended) Hide the sidebar entirely. Admin already has its own tab nav — the sidebar adds nothing. Use the full viewport width for admin content. ``` CURRENT (problem): +--------+--------------------------------------------------+ | SIDE | Admin / Users & Roles | | BAR |--------------------------------------------------| | Apps | [RBAC] [Audit] [OIDC] [AppCfg] [DB] [CH] | | ... | | | Agents| +----+ +----+ +----+ | | ... | | 12 | | 3 | | 2 | stat cards | | Routes| |user| |grp | |role| | | ... | +----+ +----+ +----+ | | 240px | | | WASTE | +-----------------------------------------+ | | HERE | | admin | viewer | ... | | | | +-----------------------------------------+ | +--------+--------------------------------------------------+ OPTION A: No sidebar +-----------------------------------------------------------+ | [<] Admin / Users & Roles [admin] [Logout]| |-----------------------------------------------------------| | [RBAC] [Audit] [OIDC] [App Config] [Database] [CH] | | | | +------+ +------+ +------+ | | | 12 | | 3 | | 2 | stat cards | | | users| | groups| | roles| | | +------+ +------+ +------+ | | | | +---------------------------------------------------+ | | | admin | ADMIN | admin@... | active | [Edit]| | | | viewer | VIEWER | view@... | active | [Edit]| | | | operator | OPER | op@... | active | [Edit]| | | +---------------------------------------------------+ | | | | [<] = back to operational view (last visited tab) | +-----------------------------------------------------------+ ``` **Pros:** Maximum content width, cleanest separation, simplest to implement (just pass `collapsed={true}` or don't render `<Sidebar>` at all). **Cons:** Need a "back" affordance to return to operational view. ### Option B: Icon Rail (32-48px) Collapse sidebar to a narrow rail with just the logo and a back arrow. No tree navigation, no search. ``` OPTION B: Icon rail +----+------------------------------------------------------+ | [C]| Admin / Users & Roles [admin] [Logout]| | |------------------------------------------------------| | [<]| [RBAC] [Audit] [OIDC] [App Config] [DB] [CH] | | | | | | +------+ +------+ +------+ | | | | 12 | | 3 | | 2 | | | | | users| | groups| | roles| | | | +------+ +------+ +------+ | | | | | | +------------------------------------------------+ | | | | admin | ADMIN | admin@... | active | [Edit]| | | | +------------------------------------------------+ | | | | | 40 | [C] = Cameleer logo | | px | [<] = back arrow to operational view | +----+------------------------------------------------------+ ``` **Pros:** Visual continuity with operational view (sidebar "collapses" rather than disappearing), logo stays visible. **Cons:** 40px of wasted space for just two icons. Over-engineered for what it does. ### Option C: Admin Sidebar Replace the operational sidebar with an admin-specific one listing the 6 admin sections vertically. ``` OPTION C: Admin sidebar +-----------+-----------------------------------------------+ | ADMIN | Admin / Users & Roles [admin] [Logout]| | |-----------------------------------------------| | [<] Back | | |-----------| +------+ +------+ +------+ | | > RBAC | | 12 | | 3 | | 2 | | | Audit | | users| | groups| | roles| | | OIDC | +------+ +------+ +------+ | | App Cfg | | | Database| +---------------------------------------------+ | CH | | admin | ADMIN | admin@... | active | | | +---------------------------------------------+ | | | | 160px | | +-----------+-----------------------------------------------+ ``` **Pros:** Familiar sidebar pattern, admin sections always visible. **Cons:** Duplicates the `AdminLayout` tabs — now there are two nav mechanisms for the same 6 pages. Confusing. Also wastes width for only 6 items that already fit in a horizontal tab bar. --- ## Recommendation: Option A Option A is the cleanest. The admin context already has its own horizontal tab navigation (6 tabs in `AdminLayout`). Adding a sidebar — whether icon rail or admin-specific — either wastes space (B) or duplicates navigation (C). Implementation is simple: 1. In `LayoutShell`, conditionally render `<Sidebar>` only when `!isAdminPage` 2. Add a back button in the TopBar breadcrumb area (or just make the logo/breadcrumb "Admin" clickable to go back) 3. The `AppShell` from the design system likely needs to handle the "no sidebar" case gracefully (full-width content) The back affordance could be as simple as making the breadcrumb's first segment ("Admin") a link back to the last operational tab, or adding a `[<-]` icon to the left of the breadcrumb.

claude commented

2026-04-02 17:05:22 +02:00

Revised Proposal: Option A-Slim

After discussion, the refined approach hides both the sidebar and the TopBar on admin pages. The TopBar's features (breadcrumb, search, time range, status filters) are all irrelevant in admin context. Only logout and a back button are needed.

Final Mock

OPTION A-SLIM: No sidebar, no TopBar — minimal admin bar
+-----------------------------------------------------------+
| [<- Back]                    ADMIN        [admin] [Logout] |
|-----------------------------------------------------------|
| [RBAC]  [Audit]  [OIDC]  [App Config]  [Database]  [CH]  |
|                                                           |
|  +------+  +------+  +------+                             |
|  |  12  |  |   3  |  |   2  |                             |
|  | users|  | groups|  | roles|                             |
|  +------+  +------+  +------+                             |
|                                                           |
|  +---------------------------------------------------+   |
|  | admin     | ADMIN   | admin@... | active  | [Edit]|   |
|  | viewer    | VIEWER  | view@...  | active  | [Edit]|   |
|  +---------------------------------------------------+   |
+-----------------------------------------------------------+

Implementation Summary

LayoutShell — skip <Sidebar> and <TopBar> when isAdminPage, render <Outlet> full-width
AdminLayout — add a slim header bar with back arrow (navigate to last operational tab) and user/logout
AppShell (design system) — must handle "no sidebar" case (full-width content without sidebar column)
Back button — navigates to /exchanges (or last visited tab if we track it)

This is the approved direction for implementation.

## Revised Proposal: Option A-Slim After discussion, the refined approach hides **both** the sidebar and the TopBar on admin pages. The TopBar's features (breadcrumb, search, time range, status filters) are all irrelevant in admin context. Only logout and a back button are needed. ### Final Mock ``` OPTION A-SLIM: No sidebar, no TopBar — minimal admin bar +-----------------------------------------------------------+ | [<- Back] ADMIN [admin] [Logout] | |-----------------------------------------------------------| | [RBAC] [Audit] [OIDC] [App Config] [Database] [CH] | | | | +------+ +------+ +------+ | | | 12 | | 3 | | 2 | | | | users| | groups| | roles| | | +------+ +------+ +------+ | | | | +---------------------------------------------------+ | | | admin | ADMIN | admin@... | active | [Edit]| | | | viewer | VIEWER | view@... | active | [Edit]| | | +---------------------------------------------------+ | +-----------------------------------------------------------+ ``` ### Implementation Summary 1. **LayoutShell** — skip `<Sidebar>` and `<TopBar>` when `isAdminPage`, render `<Outlet>` full-width 2. **AdminLayout** — add a slim header bar with back arrow (navigate to last operational tab) and user/logout 3. **AppShell (design system)** — must handle "no sidebar" case (full-width content without sidebar column) 4. **Back button** — navigates to `/exchanges` (or last visited tab if we track it) This is the approved direction for implementation.