Sidebar Navigation

Sidebar Navigation

The sidebar is the persistent left-panel navigation surface showing the workspace name and a hierarchical page tree. Pages can be selected by clicking to load them in the editor. Parent pages with children show a chevron that expands or collapses the subtree. Pages are sorted alphabetically at each level. The currently-open page is highlighted with an accent left border. Rapid clicks should safely switch to any page without producing errors.

Preconditions

• Workspace is open and the sidebar is visible ([data-tour="page-tree"] exists in DOM)
• Seed workspace contains:
  • At least 3 root-level pages with distinct titles (alphabetically ordered: e.g., “Alpha Page”, “Beta Page”, “Gamma Page”)
  • At least one parent page that has 2 or more child pages (e.g., “Parent Page” containing “Child One” and “Child Two”)
  • At least one page with unique body content to verify editor loads the correct page

Scenarios

Seed: seed.spec.ts

1. Click a root-level page to load it in the editor

Clicking any page entry in the sidebar tree selects that page and displays its content in the main editor area.

Steps:

1. Locate the page tree in the sidebar (role=“tree”)
2. Click on the first root-level page item (e.g., “Alpha Page”)

Expected: The main content area displays the editor for “Alpha Page”. The page title is visible in the editor header or breadcrumb. No error is shown.

2. Active page receives the selected highlight

The currently-open page is visually distinguished from other pages in the sidebar with an accent-colored left border and/or a background highlight.

Steps:

1. Click “Alpha Page” in the sidebar
2. Observe the styling of the “Alpha Page” tree node
3. Click “Beta Page” in the sidebar
4. Observe the styling of both nodes

Expected: After clicking “Alpha Page”, its tree item has aria-selected="true" and a visually distinct background (selected-bg). After clicking “Beta Page”, “Beta Page” becomes aria-selected="true" and “Alpha Page” reverts to the default unselected style.

3. Expand a parent page to reveal children

Clicking the chevron button on a parent page node expands the subtree and reveals child pages beneath it.

Steps:

1. Locate a parent page that has children (indicated by a chevron icon)
2. Confirm the parent’s aria-expanded attribute is "false" (collapsed)
3. Click the chevron (expand) button next to the parent page

Expected: The parent node’s aria-expanded attribute changes to "true". Child page entries appear beneath the parent, indented one level. The chevron rotates 90 degrees to point downward.

4. Collapse an expanded parent page

Clicking the chevron on an already-expanded parent collapses the subtree, hiding its children.

Steps:

1. Expand a parent page (scenario 3)
2. Click the chevron button on the already-expanded parent

Expected: The parent node’s aria-expanded attribute changes to "false". The child page entries disappear from view. The chevron returns to its collapsed orientation.

5. Navigate to a child page after expanding its parent

After expanding a parent, clicking a child page item loads that child page in the editor.

Steps:

1. Expand a parent page with known children
2. Click on “Child One” in the expanded subtree

Expected: The editor displays the content of “Child One”. The “Child One” tree item is aria-selected="true". The parent tree item remains expanded (is still showing children).

6. Parent auto-expands when a child page is the active page

When the app navigates to a child page (e.g., via the command palette or direct selection), the tree auto-expands all ancestor nodes so the active page is visible in the sidebar.

Steps:

1. Use the command palette (Cmd+K) to navigate directly to “Child Two” (a child page whose parent is currently collapsed)
2. Observe the sidebar tree after the navigation completes

Expected: The parent page node is now expanded (aria-expanded="true"). “Child Two” is visible in the tree and marked aria-selected="true". The tree scrolls so “Child Two” is within view.

7. Pages within the same level are displayed in alphabetical order

The page tree respects alphabetical title ordering at each depth level.

Steps:

1. Observe the root-level entries in the sidebar
2. Record the order of at least 3 root pages

Expected: Root-level pages appear in ascending alphabetical order (e.g., “Alpha Page” before “Beta Page” before “Gamma Page”). After expanding a parent with multiple children, the children are also sorted alphabetically.

8. Rapid sequential page switching

Clicking multiple different pages in quick succession (without waiting for each to fully load) results in the last-clicked page being displayed without errors or stale content.

Steps:

1. Click “Alpha Page” in the sidebar
2. Immediately click “Beta Page”
3. Immediately click “Gamma Page”
4. Wait for the editor to settle (1 second pause)

Expected: The editor displays “Gamma Page” — the last page that was clicked. No error messages are visible. The “Gamma Page” tree item is aria-selected="true".

9. Sidebar tree is scrollable when pages exceed viewport height

When the workspace contains more pages than fit in the visible sidebar height, the page tree area scrolls independently, allowing access to pages that are off-screen.

Steps:

1. Confirm the workspace has enough pages to overflow the sidebar (or resize the viewport to a smaller height)
2. Scroll the page tree area down

Expected: Pages that were out of view become visible as the tree scrolls. The workspace header and the footer buttons (Attachments, Trash, Settings) remain fixed and do not scroll out of view.

10. Sidebar shows workspace name in the header

The workspace name appears in the sidebar header area above the search trigger and page tree.

Steps:

1. Observe the top of the sidebar panel

Expected: The workspace name text is displayed as a heading-level element in the sidebar header. It is distinct from page titles in the tree below.

11. Pages without content are visually de-emphasized

A page that has been created but has no editable content (empty body) is rendered with reduced opacity and italic styling in the tree to indicate its empty state. Clicking it should still navigate to it.

Steps:

1. Click the ”+ New Page” button in the sidebar to create a new page without adding any content
2. Navigate away to another page by clicking it in the sidebar
3. Observe the new empty page in the sidebar tree

Expected: The empty page entry appears with opacity-50 and italic text styling. Clicking it still selects it (aria-selected="true") and loads the empty editor.

Test Data

Key	Value	Notes
root_page_1	Alpha Page	First alphabetically at root level
root_page_2	Beta Page	Second alphabetically at root level
root_page_3	Gamma Page	Third alphabetically at root level
parent_page	Parent Page	Has at least 2 child pages
child_page_1	Child One	Child of Parent Page
child_page_2	Child Two	Child of Parent Page

Notes

• The page tree component uses role="tree" on the container and role="treeitem" on each node; use these for accessible selectors
• The data-slug attribute is set on each treeitem div and matches the page slug — use [data-slug="<slug>"] for direct node targeting
• The expand/collapse chevron is a <button> with aria-label="Expand" or aria-label="Collapse" — use these labels in Playwright click actions
• Alphabetical sorting is performed recursively on every tree load — the order is stable and consistent
• Context menu items (“New child page”, “Rename…”, “Move to…”, “Delete”) appear in a role="menu" on hover — testing these is deferred to the page-management specs