feat: add overflow menu with checklist actions and action bar cleanup

- Add vertical dots (⋮) overflow menu to NoteEditor bottom action bar
- New checklist actions: "Delete checked" and "Uncheck all"
- Move secondary actions to menu: checklist toggle, markdown toggle,
  version history, move to trash
- Promote archive to the action bar for quick access
- Keep in bar: color picker, image upload, share, archive, ⋮, close
- Menu renders as fixed-position portal to escape card overflow-hidden
- Click-outside handler closes the menu
- Update e2e tests to use overflow menu for checklist/markdown toggles

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Frederic Cabassut
2026-03-22 19:47:02 +01:00
co-authored by Claude Opus 4.6
parent f1198dae84
commit 7046d77853
3 changed files with 229 additions and 53 deletions
+10 -4
View File
@@ -13,11 +13,17 @@ async function runTiptapCommand(page: Page, commandFn: string) {
);
}
/** Toggle markdown mode via the overflow menu. */
async function toggleMarkdownMode(page: Page) {
await page.getByTestId('overflow-menu-btn').click();
await page.getByTestId('markdown-toggle').click();
}
/** Type content into the TipTap editor via markdown mode (reliable for e2e) */
async function typeViaMarkdown(page: Page, content: string) {
await page.getByTestId('markdown-toggle').click();
await toggleMarkdownMode(page);
await page.getByTestId('note-content-input').fill(content);
await page.getByTestId('markdown-toggle').click();
await toggleMarkdownMode(page);
}
test.describe('Rich text formatting', () => {
@@ -34,7 +40,7 @@ test.describe('Rich text formatting', () => {
await expect(editor.locator('strong')).toHaveText('world');
// And the markdown content contains bold syntax
await page.getByTestId('markdown-toggle').click();
await toggleMarkdownMode(page);
await expect(page.getByTestId('note-content-input')).toHaveValue('hello **world**');
});
@@ -95,7 +101,7 @@ test.describe('Rich text formatting', () => {
await expect(editor.locator('strong')).toHaveText('bold');
// When the user toggles markdown mode
await page.getByTestId('markdown-toggle').click();
await toggleMarkdownMode(page);
// Then the raw markdown textarea is shown with the markdown source
await expect(page.getByTestId('note-content-input')).toBeVisible();