🔖 style(Bookmarks): Simplify card actions and consolidate delete functionality#11586
🔖 style(Bookmarks): Simplify card actions and consolidate delete functionality#11586
Conversation
… update translations for bookmark deletion confirmation
…ions for bookmark actions
There was a problem hiding this comment.
Pull request overview
Refactors the bookmarks side panel UI by consolidating edit/delete actions into BookmarkCardActions, simplifying the component structure and improving accessibility text.
Changes:
- Removes standalone
DeleteBookmarkButtonandEditBookmarkButtoncomponents and updates exports accordingly. - Updates bookmark action UI to use a single consolidated actions component with updated delete confirmation content.
- Adds/adjusts English i18n strings to support more descriptive ARIA labels and screen-reader text.
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| client/src/locales/en/translation.json | Updates delete confirmation copy and adds new bookmark-related ARIA/screen-reader strings. |
| client/src/components/SidePanel/Bookmarks/BookmarkTable.tsx | Moves “new bookmark” accessible label to the tooltip anchor for the create button trigger. |
| client/src/components/SidePanel/Bookmarks/BookmarkCardActions.tsx | Consolidates card edit/delete actions and updates delete dialog content and labeling. |
| client/src/components/SidePanel/Bookmarks/BookmarkCard.tsx | Improves count badge accessibility with sr-only text for screen readers. |
| client/src/components/Bookmarks/index.ts | Removes exports for deleted standalone bookmark action components and reorders remaining exports. |
| client/src/components/Bookmarks/EditBookmarkButton.tsx | Deleted (standalone edit button component removed). |
| client/src/components/Bookmarks/DeleteBookmarkButton.tsx | Deleted (standalone delete button component removed). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| selection={ | ||
| <Button onClick={handleDelete} variant="destructive"> | ||
| {isDeleting ? <Spinner /> : localize('com_ui_delete')} | ||
| </Button> | ||
| } |
There was a problem hiding this comment.
OGDialogTemplate's selection prop expects an object ({ selectHandler, selectText, isLoading, ... }), not a JSX element. Passing a <Button /> here means the confirm-delete button won't render (and TypeScript should complain), so deletion can't be confirmed. Use selection={{ selectHandler: handleDelete, selectText: localize('com_ui_delete'), isLoading: isDeleting, selectClasses: ... }} or pass a custom confirm button via the buttons prop instead.
| selection={ | |
| <Button onClick={handleDelete} variant="destructive"> | |
| {isDeleting ? <Spinner /> : localize('com_ui_delete')} | |
| </Button> | |
| } | |
| selection={{ | |
| selectHandler: handleDelete, | |
| selectText: localize('com_ui_delete'), | |
| isLoading: isDeleting, | |
| }} |
| "com_ui_bookmarks_create_exists": "This bookmark already exists", | ||
| "com_ui_bookmarks_create_success": "Bookmark created successfully", | ||
| "com_ui_bookmarks_delete": "Delete Bookmark", | ||
| "com_ui_bookmarks_count": "{{0}} conversations in {{1}}", |
There was a problem hiding this comment.
com_ui_bookmarks_count is always pluralized as "{{0}} conversations...", but bookmark.count can be 1, which will produce ungrammatical screen-reader text ("1 conversations"). Consider adding singular/plural variants (e.g., separate keys) or restructure the string so the code can reuse the existing com_ui_conversation vs com_ui_conversations logic.
| "com_ui_bookmarks_count": "{{0}} conversations in {{1}}", | |
| "com_ui_bookmarks_count": "{{0}} in {{1}}", |
Summary
Removes standalone
DeleteBookmarkButtonandEditBookmarkButtoncomponents in favor of integrated actions withinBookmarkCardActions. Streamlines the bookmark management UI with a more cohesive interaction pattern. Updates translations for bookmark deletion confirmation dialog. Reduces component fragmentation and improves maintainabilityChange Type
Testing
Checklist