perf(extension): reduce extension bundle size with lighter runtime deps

[amitsingh-007]

Check if the Pull Request fulfils these requirements

• Does the extension require a version change?

Greptile Summary

This PR replaces ahooks with @mantine/hooks across the extension and shared packages to reduce bundle size, migrating useDebounce → useDebouncedValue/useDebouncedState, useKeyPress/useEventListener → useHotkeys, useResponsive → useMediaQuery, useSize → useElementSize, and useState open/close pairs → useDisclosure.

Key concerns from this review (excluding previously discussed threads):

• removePersonFromBookmark test missing deselection assertion (apps/extension/tests/utils/bookmarks-panel.ts:154–159): addPersonToBookmark asserts the person name is visible after selection, but the removal function omits the equivalent negative assertion. If @base-ui/react's Select does not support toggle-deselect for an already-selected option, the test passes silently while removal silently fails.
• usePlatform.ts potential initial layout flash: useMediaQuery from Mantine may return undefined on the first render when using its SSR-safe deferred initialization mode. isMobile = !undefined = true means the hook incorrectly reports "mobile" on first render in apps/web, which could cause a visible layout shift. Consider setting getInitialValueInEffect: false to restore the synchronous behavior of the original useResponsive.

Confidence Score: 2/5

• This PR has several behavioral regressions that need to be addressed before merging.
• Multiple issues have been flagged across review rounds: useHotkeys without { allowInInputs: true } silently drops keyboard shortcuts (Escape, mod+S, mod+F) when focus is inside input fields — regressions for core workflows. The PersonSelect migration removed the search/filter capability and has an unverified render-function-child pattern. The test for person removal lacks a deselection assertion. The useMediaQuery change may introduce an initial layout flash in the web app. Combined, these represent meaningful behavioral regressions for an ostensibly performance-only change.
• Pay close attention to apps/extension/src/entrypoints/popup/components/Global.tsx, packages/shared/src/components/Search.tsx, apps/extension/src/entrypoints/popup/panels/BookmarksPanel/components/BookmarksHeader.tsx (hotkey input-suppression regressions), packages/shared/src/hooks/usePlatform.ts (initial media query value), and apps/extension/tests/utils/bookmarks-panel.ts (missing deselection assertion).

Comments Outside Diff (1)

1. apps/extension/src/entrypoints/popup/panels/BookmarksPanel/components/BookmarksHeader.tsx, line 205-216 (link)

   mod+S save won't fire when focus is in a form input

   useHotkeys from @mantine/hooks silently skips hotkeys when the focused element is an INPUT, TEXTAREA, or SELECT. The save shortcut (mod+S) is most commonly used while the user's cursor is still inside a bookmark title or URL field, which means the shortcut will never fire in that scenario — a direct functional regression from the useKeyPress implementation, which had no such restriction.

   Add { allowInInputs: true } to the options to match the original behavior:

   Prompt To Fix With AI

   This is a comment left during a code review.
   Path: apps/extension/src/entrypoints/popup/panels/BookmarksPanel/components/BookmarksHeader.tsx
   Line: 205-216
   
   Comment:
   **`mod+S` save won't fire when focus is in a form input**
   
   `useHotkeys` from `@mantine/hooks` silently skips hotkeys when the focused element is an `INPUT`, `TEXTAREA`, or `SELECT`. The save shortcut (`mod+S`) is most commonly used while the user's cursor is still inside a bookmark title or URL field, which means the shortcut will never fire in that scenario — a direct functional regression from the `useKeyPress` implementation, which had no such restriction.
   
   Add `{ allowInInputs: true }` to the options to match the original behavior:
   
   
   
   How can I resolve this? If you propose a fix, please make it concise.

_{Last reviewed commit: ae9f07b}

Greptile also left 2 inline comments on this PR.

[webext-bot]

Extension Size Change:   -36.30 KB ✅

Commit	7687497
Latest release size	222.42 KB
Current size	186.12 KB
Percent change	-16.32 %

---

This commit looks good, cheers 👏

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR migrates from the ahooks library to Mantine hooks across the codebase. It updates package.json files to add @mantine/hooks as a dependency and removes ahooks. The refactoring includes replacing useDisclosure for dialog state management, useHotkeys for keyboard shortcuts, useDebouncedValue for input debouncing, useElementSize for element measurement, and useMediaQuery for responsive detection. Changes affect components in the extension and shared packages, with corresponding updates to test utilities.

🚥 Pre-merge checks | ✅ 2 | ❌ 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 (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: reducing bundle size by replacing heavier dependencies with lighter alternatives.
Description check	✅ Passed	PR description clearly identifies the main objectives (bundle size reduction via dependency replacement), includes required version change checkbox, and provides detailed context about specific changes and known issues.

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

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch f-reduce-extension-size

---

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:   -36.30 KB ✅

Commit	7687497
Latest release size	222.42 KB
Current size	186.12 KB
Percent change	-16.32 %

---

This commit looks good, cheers 👏

[webext-bot]

Extension Size Change:   -14.25 KB ✅

Commit	87bb026
Latest release size	222.42 KB
Current size	208.17 KB
Percent change	-6.41 %

---

This commit looks good, cheers 👏

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

packages/ui/package.json (1)

19-32: ⚠️ Potential issue | 🟡 Minor

Removal of tailwind-merge changes cn() class conflict resolution behavior.

The removal from peerDependencies changes how conflicting Tailwind classes are handled. Previously, tailwind-merge would intelligently resolve conflicts (e.g., cn("p-2", "p-4") → "p-4"). Now with only clsx, both classes are concatenated, with the last one winning via CSS cascade.

Inspection of cn() usage across the codebase shows most calls follow safe patterns where className overrides are positioned last, making them naturally win in the CSS cascade. No obvious conflicting utility pairs were detected. However, some components pass multiple class strings that could theoretically have conflicts; runtime testing should verify no regressions occur.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/ui/package.json` around lines 19 - 32, Removing tailwind-merge from
peerDependencies changes cn() behavior so conflicting Tailwind utilities are no
longer merged; restore deterministic class resolution by either re-adding
"tailwind-merge" to peerDependencies or updating the cn() implementation to call
tailwind-merge (or an equivalent merge function) after clsx; search for the cn
function and calls in the codebase and ensure cn(...) uses tailwind-merge to
collapse conflicting utilities (e.g., resolve "p-2" vs "p-4") and add tests or
runtime checks for components that pass multiple class strings to validate no
regressions.

🧹 Nitpick comments (1)

packages/ui/package.json (1)

28-30: Consider alphabetizing peerDependencies.

react-dom appearing after sonner breaks the alphabetical ordering convention typically used in package.json. This is a minor consistency nit.

♻️ Suggested reordering

     "react": "19.2.4",
-    "sonner": "2.0.7",
     "react-dom": "19.2.4",
+    "sonner": "2.0.7",
     "tailwindcss": "4.2.1",

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/ui/package.json` around lines 28 - 30, The peerDependencies list in
package.json is out of alphabetical order; reorder the entries so keys are
alphabetized (e.g., place "react-dom" after "react" and before "sonner") to
maintain consistency in the package.json file; update the "react", "react-dom",
and "sonner" entries accordingly.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@packages/ui/package.json`:
- Around line 19-32: Removing tailwind-merge from peerDependencies changes cn()
behavior so conflicting Tailwind utilities are no longer merged; restore
deterministic class resolution by either re-adding "tailwind-merge" to
peerDependencies or updating the cn() implementation to call tailwind-merge (or
an equivalent merge function) after clsx; search for the cn function and calls
in the codebase and ensure cn(...) uses tailwind-merge to collapse conflicting
utilities (e.g., resolve "p-2" vs "p-4") and add tests or runtime checks for
components that pass multiple class strings to validate no regressions.

---

Nitpick comments:
In `@packages/ui/package.json`:
- Around line 28-30: The peerDependencies list in package.json is out of
alphabetical order; reorder the entries so keys are alphabetized (e.g., place
"react-dom" after "react" and before "sonner") to maintain consistency in the
package.json file; update the "react", "react-dom", and "sonner" entries
accordingly.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 5d79497f-f7ac-47a7-8641-54235f48ad12

📥 Commits

Reviewing files that changed from the base of the PR and between 7687497 and 87bb026.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (2)

• apps/extension/package.json
• packages/ui/package.json

🚧 Files skipped from review as they are similar to previous changes (1)

• apps/extension/package.json

[webext-bot]

Extension Size Change:   -6.09 KB ✅

Commit	14d0068
Latest release size	222.42 KB
Current size	216.33 KB
Percent change	-2.74 %

---

This commit looks good, cheers 👏

[webext-bot]

Extension version is updated from 24.2.0 to 24.3.0

[amitsingh-007]

/gemini review

[webext-bot]

Extension Size Change:   -6.09 KB ✅

Commit	ae9f07b
Latest release size	222.42 KB
Current size	216.33 KB
Percent change	-2.74 %

---

This commit looks good, cheers 👏

[devin-ai-integration]

Devin Review found 1 new potential issue.

View 8 additional findings in Devin Review.

[gemini-code-assist]

Code Review

This pull request successfully replaces ahooks with the lighter @mantine/hooks to reduce the extension's bundle size. The refactoring of state management hooks like useDisclosure and useDebouncedValue is well-executed. However, the migration to @mantine/hooks' useHotkeys has introduced functional regressions for several keyboard shortcuts. Specifically, Escape, mod+S (Save), and mod+F (Search) no longer function when an input field is focused, which was not the case with the previous implementation. These issues can be resolved by adding the { allowInInputs: true } option to the respective useHotkeys calls to restore the original, expected behavior.