Migrate bookmarks panel

[amitsingh-007]

Check if the Pull Request fulfils these requirements

• Does the extension require a version change?

Greptile Summary

This PR migrates the bookmarks panel and several shared components from Mantine UI to shadcn/base-ui primitives, continuing the broader feat-migrate-to-shadcn effort. Key changes include:

• Forms: Migrated from @mantine/form to @tanstack/react-form with zod/mini schema validation in BookmarkAddEditDialog and FolderAddEditDialog
• UI Components: Replaced Mantine Modal, Select, MultiSelect, Box, Flex, Text, Avatar, Tooltip, HoverCard with shadcn equivalents (Dialog, Select, Combobox, Tailwind utility classes, etc.)
• Icons: Replaced react-icons with @hugeicons/core-free-icons + @hugeicons/react
• Context Menu: Migrated from mantine-contextmenu to a new @base-ui/react/context-menu wrapper
• Notifications: Replaced @mantine/notifications with sonner toast
• Caching: Refactored addToCache to use wretch for individual fetches with error handling (instead of cache.add()), and added addAllToCache batch helper. Fixed deleteAllCache to properly await all deletions
• Keyboard shortcuts: Migrated from @mantine/hooks useHotkeys to ahooks useKeyPress — note that mod+x/mod+v (cross-platform) was replaced with meta.x/meta.v (Mac-only) in BookmarkContextMenu
• File reorganization: Moved tabs.ts and lastVisited.ts utils into the popup-specific directory, removed the scripting.ts wrapper in favor of direct browser.scripting.executeScript calls
• CSS cleanup: Removed multiple CSS module files in favor of Tailwind utility classes, and removed shared/styles/global.css and shared/styles/bookmarks/styles.module.css

Confidence Score: 3/5

• The migration is well-structured but has one cross-platform keyboard shortcut regression that should be addressed before merging.
• Score of 3 reflects a thorough UI migration with clean component conversions, but the keyboard shortcut change from cross-platform mod+x/mod+v to Mac-only meta.x/meta.v is a functional regression for Windows/Linux users. The rest of the changes (form library swap, UI component migration, caching improvements) are well-executed.
• Pay attention to BookmarkContextMenu.tsx for the cross-platform keyboard shortcut regression, and ConfirmationDialog.tsx for keyboard accessibility.

_{Last reviewed commit: fdbb36e}

[webext-bot]

Extension Size Change:   99.03 KB 🔺

Commit	be800b5
Latest release size	191.01 KB
Current size	290.04 KB
Percent change	51.85 %

---

Significant size increase in this commit ⚠️

[webext-bot]

Extension Size Change:   99.71 KB 🔺

Commit	0879787
Latest release size	191.01 KB
Current size	290.71 KB
Percent change	52.20 %

---

Significant size increase in this commit ⚠️

[webext-bot]

Extension Size Change:   112.02 KB 🔺

Commit	b5c4f67
Latest release size	191.01 KB
Current size	303.03 KB
Percent change	58.65 %

---

Significant size increase in this commit ⚠️

[webext-bot]

Extension Size Change:   112.68 KB 🔺

Commit	14fa6a1
Latest release size	191.01 KB
Current size	303.69 KB
Percent change	58.99 %

---

Significant size increase in this commit ⚠️

[webext-bot]

Extension Size Change:   141.11 KB 🔺

Commit	ef4fde0
Latest release size	191.01 KB
Current size	332.11 KB
Percent change	73.88 %

---

Significant size increase in this commit ⚠️

[webext-bot]

Extension Size Change:   141.39 KB 🔺

Commit	6c5d5d5
Latest release size	191.01 KB
Current size	332.40 KB
Percent change	74.03 %

---

Significant size increase in this commit ⚠️

[webext-bot]

Extension Size Change:   135.17 KB 🔺

Commit	8b8f68f
Latest release size	191.01 KB
Current size	326.18 KB
Percent change	70.77 %

---

Significant size increase in this commit ⚠️

[webext-bot]

Extension Size Change:   135.16 KB 🔺

Commit	427d11d
Latest release size	191.01 KB
Current size	326.16 KB
Percent change	70.76 %

---

Significant size increase in this commit ⚠️

[amitsingh-007]

/gemini review

[webext-bot]

Extension Size Change:   135.16 KB 🔺

Commit	8f410b7
Latest release size	191.01 KB
Current size	326.16 KB
Percent change	70.76 %

---

Significant size increase in this commit ⚠️

[amitsingh-007]

@coderabbitai Please review complete PR

[coderabbitai]

@amitsingh-007, I'll perform a complete review of this PR. This is a comprehensive UI migration from Mantine to shadcn/ui components for the bookmarks panel, and I'll analyze all the changes including:

• Migration from Mantine form components to TanStack Form with Zod validation
• Dialog component updates (BookmarkAddEditDialog, FolderAddEditDialog, ConfirmationDialog)
• Notification system changes (from @mantine/notifications to sonner)
• Utility file reorganization
• New UI components (Combobox, Field, Select, ButtonGroup, ContextMenu)
• Styling updates from Mantine to Tailwind CSS
• Cache implementation changes

I'll provide detailed feedback shortly.

✅ Actions performed

Full review triggered.

[amitsingh-007]

@greptileai Did I miss anything during the migration of bookmarks panel?

[amitsingh-007]

@coderabbitai Did I miss anything during the migration of bookmarks panel?

[greptile-apps]

Yes, you missed a few things during the bookmarks panel migration:

1. Mantine dependencies still in package.json

The following Mantine packages are still listed as dependencies in apps/extension/package.json but should be removed if no longer needed:

• @mantine/core
• @mantine/form
• @mantine/hooks
• @mantine/notifications
• @mantine/nprogress
• mantine-contextmenu
• postcss-preset-mantine

2. Mantine still being used outside bookmarks panel

Several files still use Mantine components:

• apps/extension/src/entrypoints/popup/index.tsx - Still imports and uses MantineProvider and ContextMenuProvider from mantine-contextmenu
• apps/extension/src/entrypoints/popup/components/Global.tsx - Still uses @mantine/nprogress (NavigationProgress) and @mantine/notifications (Notifications)
• apps/extension/src/entrypoints/popup/components/ContextMenu.tsx - Likely uses mantine-contextmenu
• Several utility files use @mantine/hooks (useWindowEvent) and @mantine/nprogress (nprogress functions)

What you need to do:

If your goal is to fully migrate away from Mantine, you'll need to:

1. Migrate NavigationProgress to an alternative progress bar component
2. Replace Notifications with the sonner toast (which you're already using for bookmarks)
3. Replace ContextMenuProvider with shadcn's ContextMenu
4. Replace useWindowEvent from @mantine/hooks with plain event listeners or React hooks
5. Remove MantineProvider wrapper
6. Remove all Mantine dependencies from package.json

The PR description says it's for "bookmarks panel" migration, so this is fine if you're doing it incrementally. But if the goal was complete Mantine removal, these parts need attention.

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

@amitsingh-007, let me analyze the PR to check if anything was missed during the bookmarks panel migration.

---

🏁 Script executed:

#!/bin/bash

echo "=== Checking for remaining Mantine imports in bookmarks-related files ==="
rg -n "@mantine" --type=ts --type=tsx -g "*bookmark*" -g "*popup*" -C2

echo -e "\n=== Checking package.json for Mantine dependencies ==="
fd -t f "package.json" --exec jq '.dependencies, .devDependencies' {} \; 2>/dev/null | rg -i "mantine" || echo "No Mantine dependencies found"

echo -e "\n=== Checking for TODO comments in bookmarks-related files ==="
rg -n "TODO|FIXME" --type=ts --type=tsx -g "*bookmark*" -g "*popup*" || echo "No TODO/FIXME comments found"

echo -e "\n=== Checking for potential broken imports in bookmarks panel ==="
rg -n "from ['\"]@mantine" packages/extension/src/entrypoints/popup/ -C2 || echo "No Mantine imports found in popup"

echo -e "\n=== Listing all bookmark-related component files ==="
fd -e ts -e tsx . packages/extension/src/entrypoints/popup/pages/bookmarks/

Length of output: 988

---

🏁 Script executed:

#!/bin/bash

echo "=== Checking for any references to old utility paths ==="
rg -n "from ['\"].*src/utils/(tabs|lastVisited)" packages/extension/src/entrypoints/popup/ -C1 || echo "No old utility path references found"

echo -e "\n=== Checking Dialog components for consistency ==="
rg -n "Dialog\.|DialogContent|DialogHeader" packages/extension/src/entrypoints/popup/pages/bookmarks/ -A1 -B1

echo -e "\n=== Checking notification/toast usage ==="
rg -n "showNotification|notifications\.|toast\(" packages/extension/src/entrypoints/popup/pages/bookmarks/ -C1

echo -e "\n=== Checking form implementations ==="
rg -n "useForm|@tanstack/react-form" packages/extension/src/entrypoints/popup/pages/bookmarks/ -C1

Length of output: 603

---

🏁 Script executed:

#!/bin/bash

echo "=== Checking for Select/Combobox component usage ==="
rg -n "Select|Combobox" packages/extension/src/entrypoints/popup/pages/bookmarks/ --type=tsx --type=ts -C1

echo -e "\n=== Checking for any remaining Mantine hooks ==="
rg -n "useMantine|useStyles|createStyles" packages/extension/src/entrypoints/popup/ || echo "No Mantine hooks found"

echo -e "\n=== Checking ContextMenu implementation ==="
fd "ContextMenu" packages/extension/src/entrypoints/popup/pages/bookmarks/ --exec cat {}

echo -e "\n=== Checking PersonSelect component ==="
cat packages/extension/src/entrypoints/popup/pages/bookmarks/components/PersonSelect.tsx 2>/dev/null || echo "PersonSelect not found at expected path"

Length of output: 506

---

🏁 Script executed:

#!/bin/bash

echo "=== Finding the correct directory structure ==="
fd -t d "popup" | head -20

echo -e "\n=== Finding bookmarks directory ==="
fd -t d "bookmarks" | head -20

echo -e "\n=== Listing root directory structure ==="
ls -la

Length of output: 2300

---

🏁 Script executed:

#!/bin/bash

echo "=== Finding all bookmark-related files ==="
fd "bookmark" -e ts -e tsx | head -30

echo -e "\n=== Finding package.json files ==="
fd "package.json" --max-depth 2

Length of output: 1642

---

🏁 Script executed:

#!/bin/bash

echo "=== Searching for Mantine imports in all TypeScript files ==="
rg -n "@mantine" --type=typescript --type=ts -g "!node_modules" -g "!*.lock" | head -50

echo -e "\n=== Checking for popup entrypoint ==="
fd -t f "popup" -e tsx -e ts | head -20

Length of output: 376

---

🏁 Script executed:

#!/bin/bash

echo "=== Checking for remaining Mantine imports in bookmarks panel ==="
rg -n "@mantine" apps/extension/src/entrypoints/popup/panels/BookmarksPanel/ -C2

echo -e "\n=== Checking for Mantine imports in entire popup directory ==="
rg -n "@mantine" apps/extension/src/entrypoints/popup/ -C1

echo -e "\n=== Checking package.json dependencies ==="
cat apps/extension/package.json | jq '.dependencies, .devDependencies' | rg -i "mantine"

Length of output: 5191

---

🏁 Script executed:

#!/bin/bash

echo "=== Checking for TODO/FIXME in bookmarks panel ==="
rg -n "TODO|FIXME" apps/extension/src/entrypoints/popup/panels/BookmarksPanel/

echo -e "\n=== Listing all files in BookmarksPanel ==="
fd . apps/extension/src/entrypoints/popup/panels/BookmarksPanel/ -t f

echo -e "\n=== Check PersonSelect component ==="
fd "PersonSelect" apps/extension/src/entrypoints/popup/panels/BookmarksPanel/ --exec cat {}

Length of output: 6173

---

🏁 Script executed:

#!/bin/bash

echo "=== Checking for old utility path references ==="
rg -n "from ['\"].*src/utils/(tabs|lastVisited)" apps/extension/src/entrypoints/popup/

echo -e "\n=== Checking Dialog usage ==="
rg -n "Dialog" apps/extension/src/entrypoints/popup/panels/BookmarksPanel/ | head -30

echo -e "\n=== Checking toast/notification usage ==="
rg -n "toast|showNotification|notifications\." apps/extension/src/entrypoints/popup/panels/BookmarksPanel/

Length of output: 4455

---

🏁 Script executed:

#!/bin/bash

echo "=== Checking form implementations ==="
rg -n "useForm|@tanstack/react-form|@mantine/form" apps/extension/src/entrypoints/popup/panels/BookmarksPanel/

echo -e "\n=== Checking for Mantine hooks usage ==="
rg -n "useMantine|useStyles|createStyles|useDisclosure" apps/extension/src/entrypoints/popup/panels/BookmarksPanel/

echo -e "\n=== Checking Select/Combobox usage ==="
rg -n "import.*Select|import.*Combobox" apps/extension/src/entrypoints/popup/panels/BookmarksPanel/

Length of output: 1268

---

🏁 Script executed:

#!/bin/bash

echo "=== Checking ContextMenu files ==="
cat apps/extension/src/entrypoints/popup/panels/BookmarksPanel/components/BookmarkContextMenu.tsx

echo -e "\n=== Checking FolderContextMenu ==="
fd "FolderContextMenu" apps/extension/src/entrypoints/popup/panels/BookmarksPanel/ --exec cat {}

Length of output: 4276

---

🏁 Script executed:

#!/bin/bash

echo "=== Checking if BookmarksPanel imports any components from other panels that use Mantine ==="
rg -n "from.*panels/(ShortcutsPanel|PersonsPanel)" apps/extension/src/entrypoints/popup/panels/BookmarksPanel/

echo -e "\n=== Checking if utility files were properly moved ==="
rg -n "tabs\\.ts|lastVisited\\.ts" apps/extension/src/entrypoints/popup/ | grep -v node_modules

echo -e "\n=== Checking for any lingering mantine-contextmenu usage in BookmarksPanel ==="
rg -n "mantine-contextmenu|useContextMenu" apps/extension/src/entrypoints/popup/panels/BookmarksPanel/

echo -e "\n=== Checking cache.ts implementation ==="
cat packages/shared/src/utils/cache.ts

Length of output: 2015

---

🏁 Script executed:

#!/bin/bash

echo "=== Checking if there's a FolderContextMenu component ==="
fd "FolderContextMenu" apps/extension/ --type f

echo -e "\n=== Checking FolderRow component for context menu ==="
cat apps/extension/src/entrypoints/popup/panels/BookmarksPanel/components/FolderRow.tsx

echo -e "\n=== Checking if wretch is properly imported in cache.ts ==="
rg -n "wretch" packages/shared/src/utils/cache.ts -C2

Length of output: 3290

---

🏁 Script executed:

#!/bin/bash

echo "=== Checking BookmarkAddEditDialog for complete migration ==="
cat apps/extension/src/entrypoints/popup/panels/BookmarksPanel/components/BookmarkAddEditDialog.tsx | head -100

echo -e "\n=== Checking for any Button/ButtonGroup usage ==="
rg -n "ButtonGroup" apps/extension/src/entrypoints/popup/panels/BookmarksPanel/

Length of output: 2880

---

🏁 Script executed:

#!/bin/bash

echo "=== Checking package.json for new dependencies added ==="
cat apps/extension/package.json | jq '.dependencies' | rg -i "tanstack|zod|sonner|wretch"

echo -e "\n=== Checking if old utility files still exist ==="
fd "tabs.ts|lastVisited.ts" apps/extension/src/utils/ 2>/dev/null || echo "Old utility files not found in src/utils/"

echo -e "\n=== Checking new utility files location ==="
fd "tabs.ts|lastVisited.ts" apps/extension/src/entrypoints/popup/utils/ 2>/dev/null || echo "New utility files not found"

Length of output: 397

---

@amitsingh-007, I've thoroughly analyzed the BookmarksPanel migration. Great job! The BookmarksPanel migration is complete and well-executed. Here's what I found:

✅ Successfully Migrated

1. Forms: Migrated from @mantine/form to @tanstack/react-form with Zod validation
2. Dialogs: All dialogs (BookmarkAddEditDialog, FolderAddEditDialog, ConfirmationDialog) use shadcn/ui components
3. Notifications: Using sonner toast instead of @mantine/notifications
4. Context Menus: Using custom ContextMenu component (both BookmarkContextMenu and FolderRow)
5. Components: PersonSelect properly uses new Combobox component with chip-based multi-select
6. Utilities: tabs.ts and lastVisited.ts properly moved to popup/utils/
7. Cache: Properly updated to use wretch
8. Styling: Completely Tailwind-based, no Mantine styles
9. Dependencies: All new dependencies added (@tanstack/react-form, zod, sonner, wretch)

📌 Expected Remaining Items

The following Mantine references are intentionally left because other panels still use them:

1. Mantine dependencies in package.json - Cannot be removed yet because:

   • ShortcutsPanel still uses: Box, Button, Flex, LoadingOverlay, notifications
   • PersonsPanel still uses: Button, Switch, Modal, TextInput, @mantine/form, etc.
   • Global.tsx still uses: Notifications, useWindowEvent from @mantine/hooks

2. popup/index.tsx still has:

   • MantineProvider and ContextMenuProvider (needed for other panels)
   • Commented-out Mantine CSS imports (can be removed)

3. popup/components/Global.tsx still has:

   • @mantine/notifications/styles.css import
   • Notifications component from Mantine
   • useWindowEvent from @mantine/hooks

🎯 Recommendations

1. Optional cleanup: You can remove the commented-out Mantine CSS imports from popup/index.tsx:

   // import '@mantine/core/styles.css';
   // import 'mantine-contextmenu/styles.css';

2. Future migrations: Once ShortcutsPanel and PersonsPanel are migrated, you can:

   • Remove all Mantine dependencies from package.json
   • Remove MantineProvider and ContextMenuProvider from popup/index.tsx
   • Migrate Global.tsx to use sonner instead of @mantine/notifications

Verdict: You didn't miss anything in the BookmarksPanel migration! The remaining Mantine code exists only in other panels that haven't been migrated yet. The BookmarksPanel itself is 100% Mantine-free. 🎉

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request performs a comprehensive migration from Mantine UI components to a custom UI component library (@bypass/ui) built on base-ui primitives. The changes include replacing icon libraries with Hugeicons, migrating form management to @tanstack/react-form with zod validation, and switching notification handling from Mantine to Sonner toast. Multiple UI components are refactored across the extension and web app, CSS modules are removed or simplified, and new reusable components are added to the UI package including ButtonGroup, Combobox, ContextMenu, Dialog, Field, HoverCard, and Select. Import paths are updated throughout, caching utilities are enhanced with batch operations, and the favicon provider is changed from Yandex to Google.

🚥 Pre-merge checks | ✅ 3 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Migrate bookmarks panel' clearly summarizes the main change—migration of the bookmarks panel UI from Mantine to shadcn/ui—which is directly supported by the file-level summaries showing pervasive replacement of Mantine components with shadcn/ui equivalents throughout the bookmarks panel and related modules.
Merge Conflict Detection	✅ Passed	✅ No merge conflicts detected when merging into feat-migrate-to-shadcn
Description check	✅ Passed	The PR description is comprehensive and well-structured, covering all major changes including component migrations, form library updates, icon replacements, and file reorganization.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat-add-shadcn-ui-components

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[webext-bot]

Extension Size Change:   135.20 KB 🔺

Commit	fdbb36e
Latest release size	191.01 KB
Current size	326.21 KB
Percent change	70.79 %

---

Significant size increase in this commit ⚠️

[greptile-apps]

_{72 files reviewed, 3 comments}

_{Edit Code Review Agent Settings | Greptile}