feat: Add search bar to highlights page

[MohamedBassem]

Fixes #2063

[coderabbitai]

Walkthrough

Adds a paginated search: a client-side debounced search UI that switches queries, a new Highlight.search model method performing cursor-based database searches, and a tRPC router endpoint exposing the search API.

Changes

Cohort / File(s)	Summary
Frontend search UI apps/web/components/dashboard/highlights/AllHighlights.tsx	Added client-side search state with debounced input, conditional switching between getAll and search infinite queries, search input UI with icons/clear action, and integrated results/pagination handling.
Backend model packages/trpc/models/highlights.ts	Added Highlight.search(ctx, searchText, cursor?, limit) implementing owner-scoped text/note matching with cursor-based pagination (uses limit+1 to compute nextCursor) and returns highlights plus nextCursor.
tRPC router packages/trpc/routers/highlights.ts	Added search endpoint accepting { text, cursor, limit }, invoking Highlight.search, and returning results mapped to the existing public highlight response schema.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Review pagination correctness and ordering in Highlight.search (limit+1, nextCursor computation).
• Verify input validation and zod typing for the new search router endpoint.
• Check interaction between debounced input and query enabling/disabling to avoid redundant fetches or stale UI state.

Pre-merge checks

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.
Linked Issues check	❓ Inconclusive	The PR implements search functionality for highlights with debounced search input and paginated results. However, the implementation adds a dedicated highlights search endpoint instead of using the suggested 'is:highlight' qualifier in the existing search syntax.	Clarify whether the dedicated search endpoint is the intended solution or if integration with the existing search query language and 'is:highlight' qualifier is required per the issue's suggested implementation.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'feat: Add search bar to highlights page' directly matches the main change: implementing search functionality for highlights with a UI search bar component.
Description check	✅ Passed	The description 'Fixes #2063' is minimal but properly references the linked issue that defines the feature request being implemented.
Out of Scope Changes check	✅ Passed	All changes are focused on adding search functionality to the highlights page: frontend search UI, backend search method, and new router endpoint. No unrelated changes detected.

---

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]

Actionable comments posted: 2

🧹 Nitpick comments (2)

packages/trpc/routers/highlights.ts (1)

54-74: Search endpoint mirrors getAll correctly; consider minor hardening and scope check

The search procedure correctly:

• Reuses DEFAULT_NUM_HIGHLIGHTS_PER_PAGE for pagination.
• Returns the same zGetAllHighlightsResponseSchema shape.
• Delegates to Highlight.search and maps to asPublicHighlight() like getAll.

Two follow‑ups to consider:

• Add some basic constraints to text (e.g., .trim().min(1).max(256)) to avoid empty/overly long search strings hitting the DB.
• The linked FR mentions an is:highlight qualifier in the existing global search language; this endpoint implements a dedicated highlights search instead. Confirm that this local, page‑specific search fully satisfies #2063 or whether a query‑language integration is still desired separately.

packages/trpc/models/highlights.ts (1)

2-2: Search implementation is consistent with getAll; consider empty-text guard and future indexing

The new Highlight.search method looks correct and consistent with getAll:

• Auth is preserved via eq(highlights.userId, ctx.user.id).
• Pagination window and nextCursor computation mirror getAll, so infinite queries behave identically.
• Using like on text and note with a %${searchText}% pattern is straightforward and safe with Drizzle parameterization.

A couple of optional improvements:

• Treat empty/whitespace‑only searchText as a special case (e.g., if (!searchText.trim()) return Highlight.getAll(ctx, cursor, limit);) to avoid generating a LIKE '%%' clause that behaves like an unfiltered scan if this method is ever called directly without frontend trimming.
• At larger scales you may eventually want a dedicated index or FTS virtual table on highlight content to keep these LIKE queries fast; current schema only indexes userId and bookmarkId.

Also applies to: 117-161

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1b44eaf and 03eec00.

📒 Files selected for processing (3)

• apps/web/components/dashboard/highlights/AllHighlights.tsx (3 hunks)
• packages/trpc/models/highlights.ts (2 hunks)
• packages/trpc/routers/highlights.ts (1 hunks)

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025-11-16T13:02:08.919Z

Learnt from: MohamedBassem
Repo: karakeep-app/karakeep PR: 2141
File: packages/db/schema.ts:160-165
Timestamp: 2025-11-16T13:02:08.919Z
Learning: In this codebase using Drizzle ORM with SQLite, enum definitions (e.g., `text("status", { enum: ["value1", "value2"] })`) only provide TypeScript-level type safety and do not require database migrations when values are added or modified. SQLite stores these as TEXT columns without database-level CHECK constraints, so schema changes to enums don't need corresponding migration files.

Applied to files:

• packages/trpc/models/highlights.ts

🧬 Code graph analysis (3)

packages/trpc/routers/highlights.ts (3)

packages/trpc/index.ts (1)

• authedProcedure (100-121)

packages/shared/types/highlights.ts (2)

• DEFAULT_NUM_HIGHLIGHTS_PER_PAGE (5-5)
• zGetAllHighlightsResponseSchema (37-40)

packages/trpc/models/highlights.ts (1)

• Highlight (16-205)

packages/trpc/models/highlights.ts (3)

packages/trpc/index.ts (1)

• AuthedContext (30-36)

packages/shared/types/pagination.ts (1)

• zCursorV2 (3-6)

packages/db/schema.ts (1)

• highlights (272-302)

apps/web/components/dashboard/highlights/AllHighlights.tsx (2)

packages/trpc/models/highlights.ts (1)

• Highlight (16-205)

apps/web/components/dashboard/preview/BookmarkHtmlHighlighter.tsx (1)

• Highlight (85-91)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: typecheck
• GitHub Check: tests

🔇 Additional comments (2)

apps/web/components/dashboard/highlights/AllHighlights.tsx (2)

52-89: Debounced search + conditional infinite queries look solid

The debouncing and useSearchQuery flag combined with enabled on the two infinite queries are wired correctly and avoid double‑fetching while keeping initial SSR data via initialData. Switching between the base list and search results based on debouncedSearch.trim().length > 0 is clean and maintains the existing pagination shape.

Also applies to: 91-93

---

142-155: Infinite “Load More” behavior correctly shared between list and search

Reusing the same hasNextPage, isFetchingNextPage, and fetchNextPage wiring for both base and search queries via the useSearchQuery ? searchQueryResult : getAllQuery selection is a nice way to keep the pagination UI consistent across modes.

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

Differentiate “no highlights yet” vs “no search results”

Right now the same t("highlights.no_highlights") message is shown both when the user has no highlights at all and when a search yields zero matches. That can be confusing when searching.

Consider branching on useSearchQuery and adding a dedicated “no search results” message key so users understand whether there are simply no highlights or just no matches for the current query.

---

I'll verify the review comment by examining the component structure and searching for related code patterns.

---

🏁 Script executed:

#!/bin/bash
# Get the full component file to understand its structure and state management
cat "apps/web/components/dashboard/highlights/AllHighlights.tsx"

Length of output: 4812

---

🏁 Script executed:

#!/bin/bash
# Search for useSearchQuery usage in the codebase to understand the pattern
rg -n "useSearchQuery" --type=ts --type=tsx -C 3

Length of output: 27

---

🏁 Script executed:

#!/bin/bash
# Search for search-related state or filters in the highlights context/hooks
rg -n "search" "apps/web/components/dashboard/highlights/" --type=ts --type=tsx -i -C 2

Length of output: 27

---

🏁 Script executed:

#!/bin/bash
# Look for i18n keys related to highlights and search
rg -n "highlights\." --type=ts --type=tsx -C 1 | grep -E "highlights\.(no_|search)" || echo "No search-related highlight keys found"

Length of output: 66

---

🏁 Script executed:

#!/bin/bash
# Check if there are any search-related props or parameters in the component
rg -n "search" "apps/web/components/dashboard/highlights/AllHighlights.tsx" -i

Length of output: 1029

---

---

🏁 Script executed:

#!/bin/bash
# Search for translation files with highlights keys
find . -type f \( -name "*.json" -o -name "*.ts" -o -name "*.js" \) -path "*/locales/*" -o -path "*/i18n/*" -o -path "*/translations/*" | head -20

Length of output: 774

---

🏁 Script executed:

#!/bin/bash
# Look for translation keys in common i18n file patterns
fd -t f "en\." --type f | head -20

Length of output: 93

---

🏁 Script executed:

#!/bin/bash
# Search for highlights translation keys in the codebase
rg "highlights\.no" -A 2 -B 2 | head -30

Length of output: 813

---

🏁 Script executed:

#!/bin/bash
# Check public or language directories for translation files
find . -type d \( -name "locales" -o -name "i18n" -o -name "translations" -o -name "lang" \) 2>/dev/null

Length of output: 47

---

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

packages/trpc/routers/highlights.ts (1)

55-75: Well-structured search endpoint with room for input validation improvements.

The implementation correctly follows the existing getAll pattern and properly scopes results to the authenticated user. The use of zCursorV2.nullish() for cursor typing (line 59) is an improvement over getAll's z.any().nullish() (line 43).

However, consider adding validation for the text parameter:

• Empty string handling: An empty search string would generate the pattern %%, matching all highlights. This could be expensive and may not reflect user intent.
• Minimum length: Short search terms (1-2 characters) can be costly with LIKE queries and may return too many results.

Apply this diff to add input validation:

   .input(
     z.object({
-      text: z.string(),
+      text: z.string().min(1, "Search text cannot be empty").max(500, "Search text too long"),
       cursor: zCursorV2.nullish(),
       limit: z.number().optional().default(DEFAULT_NUM_HIGHLIGHTS_PER_PAGE),
     }),
   )

Optional performance consideration: The LIKE '%pattern%' query with leading wildcards cannot leverage database indexes efficiently. For large datasets, consider adding full-text search indexes or using a dedicated search service if search performance becomes a concern.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 03eec00 and 5f3390b.

📒 Files selected for processing (2)

• apps/web/components/dashboard/highlights/AllHighlights.tsx (3 hunks)
• packages/trpc/routers/highlights.ts (2 hunks)

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

• apps/web/components/dashboard/highlights/AllHighlights.tsx

🧰 Additional context used

🧬 Code graph analysis (1)

packages/trpc/routers/highlights.ts (4)

packages/trpc/index.ts (1)

• authedProcedure (100-121)

packages/shared/types/pagination.ts (1)

• zCursorV2 (3-6)

packages/shared/types/highlights.ts (2)

• DEFAULT_NUM_HIGHLIGHTS_PER_PAGE (5-5)
• zGetAllHighlightsResponseSchema (37-40)

packages/trpc/models/highlights.ts (1)

• Highlight (16-205)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: tests
• GitHub Check: typecheck

🔇 Additional comments (1)

packages/trpc/routers/highlights.ts (1)

10-10: LGTM!

The import is necessary for the new search endpoint and properly typed.