feat(mobile): Add highlights support for the mobile app

[MohamedBassem]

• Move BookmarkHighligher to shared-react to be able to use it in the mobile app with use dom.
• Move some of the common reader view classNames all the ways to BookmarkHighligher.
• Move some shared shadcn components from the web package to shared-react package to be used by the shared components lib.

[coderabbitai]

Walkthrough

This PR consolidates UI components and utilities into a new shared React package, moves Button, Popover, and Textarea components from the web app into the shared package, and updates imports across web and mobile apps. It introduces a new BookmarkHtmlHighlighterDom wrapper in mobile and adds supporting dependencies and Tailwind configurations for shared component inclusion.

Changes

Cohort / File(s)	Summary
Shared React Package - New UI Components packages/shared-react/components/ui/button.tsx, packages/shared-react/components/ui/popover.tsx, packages/shared-react/components/ui/textarea.tsx	New shared UI components with Radix UI primitives, class-variance-authority variants, and forwardRef support; also includes TextareaProps types and PopoverContent styling composition.
Shared React Package - Utilities & Highlights packages/shared-react/lib/utils.ts, packages/shared-react/components/highlights.ts, packages/shared-react/components/BookmarkHtmlHighlighter.tsx	New cn utility function for Tailwind class merging, HIGHLIGHT_COLOR_MAP constant for color-coded highlights, and updated BookmarkHtmlHighlighter using local UI modules.
Mobile App - New & Updated Components apps/mobile/components/bookmarks/BookmarkHtmlHighlighterDom.tsx, apps/mobile/components/bookmarks/BookmarkLinkPreview.tsx	New BookmarkHtmlHighlighterDom wrapper component; BookmarkLinkPreview refactored to replace WebView HTML rendering with the new highlighter component and adds highlight management hooks.
Mobile App - Configuration apps/mobile/package.json, apps/mobile/tailwind.config.js	Added react-dom and react-native-web dependencies; expanded Tailwind content glob to include shared-react package and added typography plugin.
Web App - UI Component Migrations apps/web/components/ui/button.tsx, apps/web/components/ui/popover.tsx, apps/web/components/ui/textarea.tsx	Replaced local component definitions with re-exports from shared package; ButtonWithTooltip updated to use shared ButtonProps type.
Web App - Import & Usage Updates apps/web/components/dashboard/preview/ReaderView.tsx, apps/web/components/dashboard/preview/highlights.ts, apps/web/components/dashboard/preview/LinkContentSection.tsx, apps/web/app/reader/[bookmarkId]/page.tsx	Updated import paths for BookmarkHTMLHighlighter and HIGHLIGHT_COLOR_MAP to use shared package; removed complex className styling from ReaderView.
Web App - Configuration apps/web/tailwind.config.ts, packages/shared-react/package.json	Expanded Tailwind content paths to include shared-react components; added dependencies for Radix UI, utilities (clsx, tailwind-merge, class-variance-authority), and optional react-dom peer dependency.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly related PRs

• feat: Add collaborative lists #2146 — Modifies BookmarkHTMLHighlighter API to add readOnly behavior, complementing the highlighter wrapper and integration in this PR.
• feat: Add unified reader settings with local overrides #2230 — Updates BookmarkLinkPreview mobile component with reader typography settings, overlapping with the component refactoring and styling changes in this PR.

🚥 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 'feat(mobile): Add highlights support for the mobile app' accurately summarizes the main change—adding highlights support to the mobile app through component migrations.
Description check	✅ Passed	The description clearly relates to the changeset by detailing the three main objectives: moving BookmarkHighligher to shared-react, consolidating classNames, and moving shadcn components to shared-react.

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

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.

---

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.}

[coderabbitai]

🧹 Nitpick comments (3)

apps/web/tailwind.config.ts (1)

6-9: Glob scope inconsistency with mobile config (minor).

apps/web/tailwind.config.ts scans ../../packages/shared-react/components/**/*.{ts,tsx}, while apps/mobile/tailwind.config.js scans ../../packages/shared-react/**/*.{js,jsx,ts,tsx} — broader scope covering lib/ and JS files too. For consistency (and to cover any future utility files that reference class strings outside components/), consider aligning both configs, or document the intentional difference.

🤖 Prompt for AI Agents

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

In `@apps/web/tailwind.config.ts` around lines 6 - 9, Update the content glob in
the apps/web tailwind config to match the mobile config: replace the current
entry that references "../../packages/shared-react/components/**/*.{ts,tsx}"
with a broader glob like "../../packages/shared-react/**/*.{js,jsx,ts,tsx}" so
the content array (spread of web.content) scans the same files as apps/mobile;
alternatively, if the narrower scope is intentional, add a comment in the
tailwind.config.ts next to the content array explaining why only components/* is
scanned to prevent accidental future drift.

packages/shared-react/components/highlights.ts (1)

9-14: Consider a more ergonomic key name for ["border-l"].

Using a computed string key forces callers to write HIGHLIGHT_COLOR_MAP["border-l"][color] instead of dot notation. A camelCase alternative like borderL would be more idiomatic and easier to autocomplete without any functional difference.

♻️ Suggested rename

-  ["border-l"]: {
+  borderL: {
     red: "border-l-red-200",
     green: "border-l-green-200",
     blue: "border-l-blue-200",
     yellow: "border-l-yellow-200",
   } as const,

🤖 Prompt for AI Agents

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

In `@packages/shared-react/components/highlights.ts` around lines 9 - 14, Rename
the computed key ["border-l"] in the HIGHLIGHT_COLOR_MAP to a camelCase property
like borderL so callers can use dot notation
(HIGHLIGHT_COLOR_MAP.borderL[color]) and get better autocompletion; update the
map definition (the object with ["border-l"] currently) to use borderL and
adjust any references/usages across the codebase to the new property name,
preserving the same value strings and keeping the as const typing intact.

apps/mobile/components/bookmarks/BookmarkLinkPreview.tsx (1)

95-97: No user feedback on highlight mutation success/error.

The web counterpart in ReaderView.tsx (lines 49-89) shows toast notifications on highlight create/update/delete success and error. Here, the mutation hooks are instantiated without any onSuccess/onError callbacks, so the user gets no feedback when a highlight operation succeeds or fails. Consider adding mobile-appropriate feedback (e.g., a toast or haptic) for at least error cases so users know when an operation didn't persist.

🤖 Prompt for AI Agents

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

In `@apps/mobile/components/bookmarks/BookmarkLinkPreview.tsx` around lines 95 -
97, Add user feedback callbacks to the highlight mutation hooks in
BookmarkLinkPreview.tsx so create/update/delete operations notify
success/errors: when instantiating useCreateHighlight, useUpdateHighlight, and
useDeleteHighlight, pass onSuccess and onError handlers that trigger
mobile-appropriate feedback (e.g., a toast and/or haptic) — call the success
handler to show a short confirmation and call the error handler to show an error
message with details so users know the operation failed; reference the mutate
aliases createHighlight, updateHighlight, and deleteHighlight when wiring these
callbacks.

🤖 Prompt for all review comments with AI agents

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

Duplicate comments:
In `@apps/mobile/tailwind.config.js`:
- Line 54: The Tailwind typography plugin referenced in the plugins array of
tailwind.config.js (require("@tailwindcss/typography")) is not listed in
package.json; add "@tailwindcss/typography" to the devDependencies in
apps/mobile's package.json (match the version format used for other Tailwind
plugins), then run your package manager install to update lockfile and ensure
the plugin can be resolved at runtime.

In `@packages/shared-react/components/ui/popover.tsx`:
- Around line 1-30: The import of cn from "@/lib/utils" may break after moving
components; update the Popover component to use a safe import path or the
project path-mapping: change the import in this file so Popover (Popover,
PopoverTrigger, PopoverContent) references the correct utils module (either a
relative path to the utils file or ensure tsconfig/next alias is configured) so
the cn utility is resolved at runtime/build like the other moved components.

In `@packages/shared-react/components/ui/textarea.tsx`:
- Around line 1-22: The import using the "@/lib/utils" alias in the Textarea
component should be replaced or resolved: update the Textarea component's import
of cn (used in the Textarea forwardRef) to use the correct relative module path
matching the component's new location (or ensure project path aliases are
configured so "@/lib/utils" resolves during build), and apply the same fix to
other moved components that still reference "@/lib/utils".

---

Nitpick comments:
In `@apps/mobile/components/bookmarks/BookmarkLinkPreview.tsx`:
- Around line 95-97: Add user feedback callbacks to the highlight mutation hooks
in BookmarkLinkPreview.tsx so create/update/delete operations notify
success/errors: when instantiating useCreateHighlight, useUpdateHighlight, and
useDeleteHighlight, pass onSuccess and onError handlers that trigger
mobile-appropriate feedback (e.g., a toast and/or haptic) — call the success
handler to show a short confirmation and call the error handler to show an error
message with details so users know the operation failed; reference the mutate
aliases createHighlight, updateHighlight, and deleteHighlight when wiring these
callbacks.

In `@apps/web/tailwind.config.ts`:
- Around line 6-9: Update the content glob in the apps/web tailwind config to
match the mobile config: replace the current entry that references
"../../packages/shared-react/components/**/*.{ts,tsx}" with a broader glob like
"../../packages/shared-react/**/*.{js,jsx,ts,tsx}" so the content array (spread
of web.content) scans the same files as apps/mobile; alternatively, if the
narrower scope is intentional, add a comment in the tailwind.config.ts next to
the content array explaining why only components/* is scanned to prevent
accidental future drift.

In `@packages/shared-react/components/highlights.ts`:
- Around line 9-14: Rename the computed key ["border-l"] in the
HIGHLIGHT_COLOR_MAP to a camelCase property like borderL so callers can use dot
notation (HIGHLIGHT_COLOR_MAP.borderL[color]) and get better autocompletion;
update the map definition (the object with ["border-l"] currently) to use
borderL and adjust any references/usages across the codebase to the new property
name, preserving the same value strings and keeping the as const typing intact.

[greptile-apps]

Greptile Summary

This PR adds highlights support to the mobile app by extracting BookmarkHTMLHighlighter and its dependencies (shadcn Button, Popover, Textarea, highlights color map, and a cn utility) from the web app into the shared-react package. The mobile app then uses this shared component via Expo's "use dom" directive, which renders it inside a web view. The common prose Tailwind classes for the reader view are consolidated into the shared BookmarkHTMLHighlighter component, simplifying the call sites in both the web reader page and the preview panel.

• Moved BookmarkHTMLHighlighter from apps/web to packages/shared-react with the prose typography classes now baked in
• Moved shadcn Button, Popover, and Textarea components to shared-react; web re-exports them to maintain existing imports
• Replaced the raw WebView-based reader in the mobile app with the shared highlighter component, enabling full create/update/delete highlight functionality
• Added react-dom, react-native-web, and @tailwindcss/typography to the mobile app to support DOM components and prose classes
• Updated Tailwind configs for both web and mobile to scan shared-react component paths

Confidence Score: 4/5

• This PR is a well-structured refactoring that moves existing, proven code to a shared package with minimal logic changes — safe to merge.
• The changes are primarily code movement and re-exporting. The shared BookmarkHTMLHighlighter is nearly identical to the original web version. The mobile integration follows established Expo DOM component patterns. Two minor style issues were flagged (pre-existing from the original code) but neither would cause runtime failures.
• Pay attention to packages/shared-react/components/BookmarkHtmlHighlighter.tsx — it has a useEffect without dependencies and direct state mutations that could cause subtle issues on mobile.

Important Files Changed

Filename	Overview
packages/shared-react/components/BookmarkHtmlHighlighter.tsx	Core component moved from web to shared-react. Adds base prose Tailwind classes directly. Minor: useEffect without dependency array (pre-existing), direct state mutation in handleSave (pre-existing).
apps/mobile/components/bookmarks/BookmarkHtmlHighlighterDom.tsx	New "use dom" wrapper component for using the shared BookmarkHTMLHighlighter in the Expo mobile app via DOM components.
apps/mobile/components/bookmarks/BookmarkLinkPreview.tsx	Replaces the raw WebView-based reader with the shared BookmarkHtmlHighlighterDom component, adding full highlight support (create, update, delete).
apps/mobile/tailwind.config.js	Adds shared-react path to Tailwind content scanning and adds @tailwindcss/typography plugin for prose class support.
apps/web/components/ui/button.tsx	Re-exports Button, buttonVariants, and ButtonProps from shared-react. Keeps ButtonWithTooltip as web-specific.
packages/shared-react/package.json	Adds dependencies for UI components (radix, cva, clsx, lucide-react, tailwind-merge) and optional react-dom peer dep.
apps/web/tailwind.config.ts	Adds shared-react components path to Tailwind content scanning for the web app.

_{Last reviewed commit: 97766e2}

[greptile-apps]

_{20 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

Additional Comments (2)

packages/shared-react/components/BookmarkHtmlHighlighter.tsx
Missing dependency array on useEffect

This useEffect has no dependency array, so it runs on every render — clearing all highlight <span> elements from the DOM and re-applying them each time. This involves querySelectorAll, DOM tree manipulation, and TreeWalker traversal for each highlight. On mobile devices (where this component is now being shared to), this could cause noticeable jank during interactions that trigger re-renders (e.g., typing in the note textarea).

Consider adding a dependency array with [highlights, htmlContent] to limit re-runs to when the data actually changes.

Prompt To Fix With AI

This is a comment left during a code review.
Path: packages/shared-react/components/BookmarkHtmlHighlighter.tsx
Line: 171-192

Comment:
**Missing dependency array on `useEffect`**

This `useEffect` has no dependency array, so it runs on every render — clearing all highlight `<span>` elements from the DOM and re-applying them each time. This involves `querySelectorAll`, DOM tree manipulation, and `TreeWalker` traversal for each highlight. On mobile devices (where this component is now being shared to), this could cause noticeable jank during interactions that trigger re-renders (e.g., typing in the note textarea).

Consider adding a dependency array with `[highlights, htmlContent]` to limit re-runs to when the data actually changes.

How can I resolve this? If you propose a fix, please make it concise.

---

packages/shared-react/components/BookmarkHtmlHighlighter.tsx
Direct mutation of React state objects

pendingHighlight and selectedHighlight are state values set via useState. Mutating them directly (e.g., pendingHighlight.color = color) rather than creating new objects is against React's immutability convention and can cause subtle bugs — for example, if a child component or effect compares references to detect changes, it will miss these mutations. Consider creating a new object:

  const handleSave = (color: ZHighlightColor, note: string | null) => {
    if (pendingHighlight) {
      const updated = { ...pendingHighlight, color, note };
      onHighlight?.(updated);
    } else if (selectedHighlight) {
      const updated = { ...selectedHighlight, color, note };
      onUpdateHighlight?.(updated);
    }
    closeForm();
  };

Prompt To Fix With AI

This is a comment left during a code review.
Path: packages/shared-react/components/BookmarkHtmlHighlighter.tsx
Line: 263-274

Comment:
**Direct mutation of React state objects**

`pendingHighlight` and `selectedHighlight` are state values set via `useState`. Mutating them directly (e.g., `pendingHighlight.color = color`) rather than creating new objects is against React's immutability convention and can cause subtle bugs — for example, if a child component or effect compares references to detect changes, it will miss these mutations. Consider creating a new object:

```suggestion
  const handleSave = (color: ZHighlightColor, note: string | null) => {
    if (pendingHighlight) {
      const updated = { ...pendingHighlight, color, note };
      onHighlight?.(updated);
    } else if (selectedHighlight) {
      const updated = { ...selectedHighlight, color, note };
      onUpdateHighlight?.(updated);
    }
    closeForm();
  };
```

How can I resolve this? If you propose a fix, please make it concise.

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 97766e23c1

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Preserve demo-mode guard on highlight deletion

This delete action now uses the plain Button, which drops the demo-mode disable logic that previously came from ActionButton (useClientConfig().demoMode in apps/web/components/ui/action-button.tsx). In web demo environments where the reader is writable, users can now click delete and trigger highlight mutations that were previously blocked at the UI layer, causing unintended state changes or repeated mutation errors.

Useful? React with 👍 / 👎.