feat: add inline rename to sidebar page tree context menu (#1164)

[sw-factory-automations]

Closes #1164

What

Adds a "Rename" action to the sidebar page tree context menu that converts the page title into an inline text input for quick renaming without navigating to the page.

How

• Added handleRename to usePageTreeActions — optimistically updates local state, persists via Supabase, dispatches pages-changed event and router.refresh() to sync breadcrumb/editor title.
• Added isRenaming / onStartRename / onRename props to PageTreeItem. When renaming, the title button is replaced with a focused, pre-selected <input>. Enter and blur commit; Escape cancels.
• Added "Rename" menu item (with Pencil icon) between "Duplicate" and the move actions separator.
• renamingId state is managed in PageTree and passed down through the tree.

Testing

• 5 new E2E tests in e2e/sidebar-rename.spec.ts: menu item visibility, inline input focus, Enter saves, Escape cancels, blur saves.
• Added Renaming story to page-tree-item.stories.tsx.
• pnpm lint && pnpm typecheck && pnpm test pass (0 errors, 1975 unit tests).
• E2E tests pass (all 5 sidebar-rename tests green).

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
memo	Ready	Preview, Comment	May 21, 2026 12:49pm

[sw-factory-automations]

✅ UI verification passed — design spec compliance confirmed.

Checks performed:

Check	Result
Color tokens	✅ All colors use CSS variables / Tailwind tokens (ring-accent, bg-transparent, bg-overlay-active, text-label-subtle, text-muted-foreground)
Typography	✅ text-sm for inline input and menu items — matches UI labels spec
Spacing	✅ Tailwind scale only (px-0.5, gap-0.5, gap-2). No arbitrary values
Component usage	✅ DropdownMenuItem for context menu, native <input> appropriate for inline edit
Button variants	✅ ghost for toolbar actions, destructive for delete
Loading states	✅ Optimistic update in handleRename
Transitions	✅ No decorative animations added
Accessibility	✅ aria-label="Rename page" on input, keyboard handling (Enter/Escape/blur), e.stopPropagation() prevents tree nav interference
Dark mode	✅ Token variables only — no hardcoded colors
Borders	✅ ring-1 ring-accent for focus indication
Corners	✅ rounded-sm on inline input — consistent with floating element exception
Menu item	✅ Pencil icon h-4 w-4 (16px) + label with gap-2 — matches dropdown spec

Storybook visual regression: 1/1 passed — all story baselines match, including new "Inline rename active" story.

Live site vs Storybook: No discrepancies. The inline rename input renders identically in the real sidebar context — no layout differences, clipping, or overflow issues.

Live site screenshots (desktop dark + mobile): Sidebar page tree renders correctly. No broken layouts, proper hierarchy, correct token usage. Mobile correctly hides sidebar (Sheet pattern).

[sw-factory-automations]

✅ Post-merge verification passed.

E2E tests (live site):

• e2e/sidebar-rename.spec.ts — 5/5 passed (rename menu item, inline input focus, Enter saves, Escape cancels, blur saves)
• e2e/auth.spec.ts — 8/8 passed
• e2e/page-crud.spec.ts — 5/5 passed
• e2e/sidebar-drag.spec.ts — 2/2 passed

Ad-hoc smoke tests:

• Landing page (/) — OK (title: "Memo")
• Sign-in page (/sign-in) — OK (email input present)
• Health endpoint (/api/health) — OK
• Dashboard (/dashboard) — OK (no 5xx)
• Auth flow — OK (login redirects to workspace)

Interaction smoke test (inline rename feature):

• Page actions menu opens on hover — ✓
• Rename option visible in context menu — ✓
• Clicking Rename shows focused inline input ([data-testid="rename-input"]) — ✓
• Escape dismisses the rename input — ✓
• Enter commits the rename and updates the sidebar — ✓
• No console errors during interaction — ✓

Skipped:

• No page buttons with timestamp text found in workspace for editor route test (ad-hoc smoke)
• Full E2E suite run (timed out in CI-like environment; ran key test files individually instead)