From e77f23a5852ddc597c19358136f0d88d4b7ab552 Mon Sep 17 00:00:00 2001 From: Logan Johnson Date: Sat, 28 Mar 2026 22:56:04 -0400 Subject: [PATCH] feat(penpal): show "Home" label on home screen sidebar MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Displays "Home" text next to the ⌂ icon when viewing the home screen. Closes PENPAL-17 Co-Authored-By: Claude Opus 4.6 --- apps/penpal/ERD.md | 3 +++ apps/penpal/PRODUCT.md | 2 ++ apps/penpal/TESTING.md | 1 + .../penpal/frontend/src/components/Layout.test.tsx | 14 ++++++++++++++ apps/penpal/frontend/src/components/Layout.tsx | 2 ++ apps/penpal/frontend/src/index.css | 7 +++++++ 6 files changed, 29 insertions(+) diff --git a/apps/penpal/ERD.md b/apps/penpal/ERD.md index 259bc8b80..3b8f96366 100644 --- a/apps/penpal/ERD.md +++ b/apps/penpal/ERD.md @@ -261,6 +261,9 @@ see-also: - **E-PENPAL-HOME-SIDEBAR**: In home mode (no active project), `Layout.tsx` renders a sidebar tree with: ⌂ header with "+" add button and sort toggle, expandable workspace items (with child projects), standalone project items as top-level peers, and global "In Review" / "Recent" `NavLink`s in a global nav section. Visual dividers (`.home-section-divider`) separate the workspaces section, standalone projects section, and global navigation section; sections with no items are omitted along with their dividers. Workspace items show agent dots when any child project has `agentConnected`. Projects show: name (with branch as tooltip), agent dot, and expandable worktree children (when multiple worktrees exist). Non-main worktrees display a worktree icon; the main worktree does not. State: `expandedWorkspaces` and `expandedWorktreeProjects` `Set`. Clicking a project navigates to `/project/{qn}`. `useProjectSort` hook controls ordering; projects with zero files sort last and are visually dimmed (`.deemphasized` class). ← [P-PENPAL-HOME](PRODUCT.md#P-PENPAL-HOME), [P-PENPAL-HOME-TREE](PRODUCT.md#P-PENPAL-HOME-TREE), [P-PENPAL-HOME-PROJECT-ITEM](PRODUCT.md#P-PENPAL-HOME-PROJECT-ITEM), [P-PENPAL-HOME-NAVIGATE](PRODUCT.md#P-PENPAL-HOME-NAVIGATE) +- **E-PENPAL-FE-HOME-LABEL**: When `isProjectMode` is false (home screen), the sidebar home header renders the text "Home" in a `` next to the ⌂ icon. The label inherits the header's font weight and uses `margin-right: auto` to push action buttons to the right side. + ← [P-PENPAL-HOME-LABEL](PRODUCT.md#P-PENPAL-HOME-LABEL) + - **E-PENPAL-SORT**: `useProjectSort` hook uses `useSyncExternalStore` backed by localStorage key `penpal-project-sort` (default `'alpha'`). Subscribes to `storage` events for cross-tab sync. Home sidebar sorts by `localeCompare` for alpha or uses server order (sorted by `cache.ProjectsSortedByModTime()`) for recent. Projects with `fileCount === 0` always sort last and get `.deemphasized` styling. The sort toggle in the home sidebar header switches between the two modes. ← [P-PENPAL-SORT](PRODUCT.md#P-PENPAL-SORT) diff --git a/apps/penpal/PRODUCT.md b/apps/penpal/PRODUCT.md index dbc192d27..72169c44a 100644 --- a/apps/penpal/PRODUCT.md +++ b/apps/penpal/PRODUCT.md @@ -120,6 +120,8 @@ The home view is the top-level navigation state. It shows all workspaces and sta - **P-PENPAL-HOME**: The home view sidebar shows a flat list of workspaces, standalone projects, and global navigation links (In Review, Recent). A ⌂ icon header identifies the view. A "+" button allows adding new workspaces or standalone projects. +- **P-PENPAL-HOME-LABEL**: When on the home screen, the word "Home" appears next to the ⌂ icon at the top of the sidebar. + - **P-PENPAL-HOME-TREE**: Workspaces are expandable tree items. Expanding a workspace reveals its child projects. Standalone projects appear as top-level peers of workspaces, not nested under any workspace. Visual dividers separate the workspaces section, standalone projects section, and global navigation section. Sections with no items are not shown (and their dividers are omitted). Global In Review and Recent links appear in the global navigation section. The In Review link shows a right-aligned count (matching the project view's source header count style) of all files currently in review across all projects; the link is dimmed when the count is zero. - **P-PENPAL-HOME-PROJECT-ITEM**: Each project in the home tree shows: project name and agent dot (when an agent is active). No file counts or review counts are shown on individual project items. Git branch is available as a tooltip. Multi-worktree projects are expandable, showing each worktree as a child item. Non-main worktrees display a worktree icon; the main worktree does not. Git branch is shown as a tooltip on each worktree. The tree does not use vertical guide lines or dirty status indicators. diff --git a/apps/penpal/TESTING.md b/apps/penpal/TESTING.md index 931393b98..4dabf4b60 100644 --- a/apps/penpal/TESTING.md +++ b/apps/penpal/TESTING.md @@ -99,6 +99,7 @@ see-also: | View Tracking (E-PENPAL-ACTIVITY) | — | — | — | view-tracking.spec.ts | | File Handler (P-PENPAL-FILE-HANDLER) | — | — | api_manage_test.go | — | | Source Disambiguation (P-PENPAL-SRC-DISAMBIG) | — | Layout.test.tsx | — | — | +| Home Label (P-PENPAL-HOME-LABEL) | — | Layout.test.tsx | — | — | ## Known Coverage Gaps diff --git a/apps/penpal/frontend/src/components/Layout.test.tsx b/apps/penpal/frontend/src/components/Layout.test.tsx index f97ed3ff3..606d9f91d 100644 --- a/apps/penpal/frontend/src/components/Layout.test.tsx +++ b/apps/penpal/frontend/src/components/Layout.test.tsx @@ -112,6 +112,20 @@ describe('Layout', () => { expect(screen.getByText('In Review')).toBeInTheDocument(); }); + // E-PENPAL-FE-HOME-LABEL: "Home" label appears on home screen sidebar + it('shows "Home" label next to house icon on home screen', async () => { + render( + + + , + ); + + const sidebar = screen.getByTestId('sidebar'); + const homeLabel = sidebar.querySelector('.home-label'); + expect(homeLabel).toBeInTheDocument(); + expect(homeLabel).toHaveTextContent('Home'); + }); + it('renders theme toggle', () => { render( diff --git a/apps/penpal/frontend/src/components/Layout.tsx b/apps/penpal/frontend/src/components/Layout.tsx index 5aa88daa6..b1494f694 100644 --- a/apps/penpal/frontend/src/components/Layout.tsx +++ b/apps/penpal/frontend/src/components/Layout.tsx @@ -1086,8 +1086,10 @@ export default function Layout() { ) : ( <> {/* Home view sidebar */} + {/* E-PENPAL-FE-HOME-LABEL: show "Home" label next to house icon on home screen */}
⌂ + Home