[WEB-5569] chore: top nav search enhancements

[anmolsinghbhatia]

Description

This PR includes enhancements for top nav search.

Type of Change

• Improvement
• Code refactoring

Summary by CodeRabbit

• New Features

  • Added keyboard shortcut support (Cmd/Ctrl+F) to trigger the expandable search functionality.

• Bug Fixes

  • Improved search panel closing behavior to ensure proper coordination between components.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[makeplane]

Linked to Plane Work Item(s)

• [WEB-5569] Search modal does not close after selecting a result from search bar

This comment was auto-generated by Plane

[coderabbitai]

Walkthrough

This pull request adds prop forwarding for a search menu close handler across the component hierarchy, from top-nav-power-k through commands-list to search-menu. Additionally, the expandable search hook now tracks keyboard triggers (Cmd/Ctrl+F) to distinguish keyboard-initiated focus from programmatic focus restoration.

Changes

Cohort / File(s)	Summary
Search menu close handler prop pipeline apps/web/core/components/navigation/top-nav-power-k.tsx, apps/web/core/components/power-k/ui/modal/commands-list.tsx, apps/web/core/components/power-k/ui/modal/search-menu.tsx	Added handleSearchMenuClose as optional prop parameter, threaded through component hierarchy from top-nav down to search-menu. In search-menu, introduced handleClosePalette function that calls the handler before closing modal, replacing direct toggle.
Keyboard trigger tracking apps/web/core/hooks/use-expandable-search.ts	Added keyboard listener via useEffect to detect Cmd/Ctrl+F and track state in wasKeyboardTriggeredRef. Updated focus logic to open expandable search when either keyboard shortcut or explicit click occurred, clearing flags afterward.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Minor complexity: straightforward prop forwarding pattern across three related components
• Keyboard tracking logic is linear and self-contained within the hook
• All changes follow established patterns with no novel architectural decisions

Poem

🐰 A whisker of a patch, so clean and neat,
Props flow downward—a keyboard heartbeat!
Close handlers pass like carrots through a row,
While Cmd+F now tells the search where to go. 🔍✨

Pre-merge checks and finishing touches

❌ 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.
Description check	❓ Inconclusive	The description is incomplete. While Type of Change is properly filled, the Description section is vague and lacks detail about what enhancements were made. Test Scenarios, Screenshots, and References sections are entirely missing.	Expand the Description section with specific details about the enhancements made, add Test Scenarios to document verification steps, and include any related issue references.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main changes: enhancements to top nav search functionality including prop forwarding, keyboard trigger tracking, and search panel closing logic.

✨ 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 refactor-top-nav-power-k

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5f7ffcb and b5fad10.

📒 Files selected for processing (4)

• apps/web/core/components/navigation/top-nav-power-k.tsx (1 hunks)
• apps/web/core/components/power-k/ui/modal/commands-list.tsx (3 hunks)
• apps/web/core/components/power-k/ui/modal/search-menu.tsx (3 hunks)
• apps/web/core/hooks/use-expandable-search.ts (4 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,tsx,mts,cts}

📄 CodeRabbit inference engine (.github/instructions/typescript.instructions.md)

**/*.{ts,tsx,mts,cts}: Use const type parameters for more precise literal inference in TypeScript 5.0+
Use the satisfies operator to validate types without widening them
Leverage inferred type predicates to reduce the need for explicit is return types in filter/check functions
Use NoInfer<T> utility to block inference for specific type arguments when they should be determined by other arguments
Utilize narrowing in switch(true) blocks for control flow analysis (TypeScript 5.3+)
Rely on narrowing from direct boolean comparisons for type guards
Trust preserved narrowing in closures when variables aren't modified after the check (TypeScript 5.4+)
Use constant indices to narrow object/array properties (TypeScript 5.5+)
Use standard ECMAScript decorators (Stage 3) instead of legacy experimentalDecorators
Use using declarations for explicit resource management with Disposable pattern instead of manual cleanup (TypeScript 5.2+)
Use with { type: "json" } for import attributes; avoid deprecated assert syntax (TypeScript 5.3/5.8+)
Use import type explicitly when importing types to ensure they are erased during compilation, respecting verbatimModuleSyntax flag
Use .ts, .mts, .cts extensions in import type statements (TypeScript 5.2+)
Use import type { Type } from "mod" with { "resolution-mode": "import" } for specific module resolution contexts (TypeScript 5.3+)
Use new iterator methods (map, filter, etc.) if targeting modern environments (TypeScript 5.6+)
Utilize new Set methods like union, intersection, etc., when available (TypeScript 5.5+)
Use Object.groupBy / Map.groupBy standard methods for grouping instead of external libraries (TypeScript 5.4+)
Use Promise.withResolvers() for creating promises with exposed resolve/reject functions (TypeScript 5.7+)
Use copying array methods (toSorted, toSpliced, with) for immutable array operations (TypeScript 5.2+)
Avoid accessing instance fields via super in classes (TypeScript 5....

Files:

• apps/web/core/hooks/use-expandable-search.ts
• apps/web/core/components/navigation/top-nav-power-k.tsx
• apps/web/core/components/power-k/ui/modal/commands-list.tsx
• apps/web/core/components/power-k/ui/modal/search-menu.tsx

🧠 Learnings (2)

📚 Learning: 2025-10-09T20:42:31.843Z

Learnt from: lifeiscontent
Repo: makeplane/plane PR: 7922
File: apps/admin/app/(all)/(dashboard)/ai/form.tsx:19-19
Timestamp: 2025-10-09T20:42:31.843Z
Learning: In the makeplane/plane repository, React types are globally available through TypeScript configuration. Type annotations like React.FC, React.ReactNode, etc. can be used without explicitly importing the React namespace. The codebase uses the modern JSX transform, so React imports are not required for JSX or type references.

Applied to files:

• apps/web/core/hooks/use-expandable-search.ts

📚 Learning: 2025-10-21T17:22:05.204Z

Learnt from: lifeiscontent
Repo: makeplane/plane PR: 7989
File: apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx:45-46
Timestamp: 2025-10-21T17:22:05.204Z
Learning: In the makeplane/plane repository, the refactor from useParams() to params prop is specifically scoped to page.tsx and layout.tsx files in apps/web/app (Next.js App Router pattern). Other components (hooks, regular client components, utilities) should continue using the useParams() hook as that is the correct pattern for non-route components.

Applied to files:

• apps/web/core/hooks/use-expandable-search.ts

🧬 Code graph analysis (1)

apps/web/core/components/power-k/ui/modal/search-menu.tsx (1)

apps/web/core/components/power-k/ui/modal/search-results.tsx (1)

• PowerKModalSearchResults (18-72)

⏰ 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). (4)

• GitHub Check: CodeQL analysis (javascript-typescript)
• GitHub Check: Agent
• GitHub Check: Build and lint web apps
• GitHub Check: Analyze (javascript)

🔇 Additional comments (6)

apps/web/core/components/power-k/ui/modal/search-menu.tsx (1)

25-25: LGTM! Clean callback pattern for parent-controlled closing.

The optional handleSearchMenuClose prop and handleClosePalette wrapper allow the parent component to inject cleanup logic (e.g., closing the expandable search panel) before the PowerK modal closes. The optional chaining ensures backward compatibility.

Also applies to: 29-29, 72-75, 106-106

apps/web/core/hooks/use-expandable-search.ts (3)

1-1: Good: Added keyboard trigger tracking.

The new wasKeyboardTriggeredRef and updated imports enable the hook to distinguish keyboard-initiated focus (Cmd/Ctrl+F) from programmatic focus restoration.

Also applies to: 11-11, 23-23

---

62-69: LGTM! Flag-based focus handling prevents unwanted opens.

The updated handleFocus correctly opens the panel only when explicitly triggered by click or keyboard shortcut, preventing opens on programmatic focus restoration. Both flags are properly cleared after use.

---

42-55: Cmd+F integration with global PowerK handler verified.

The keyboard listener correctly tracks Cmd/Ctrl+F presses. The complete flow works as expected: PowerK's global ShortcutHandler handles the Cmd+F modifier shortcut, calls preventDefault() to block the browser's find dialog, executes the focus_top_nav_search action which focuses the search input via focusTopNavSearch, and this hook detects the keyboard trigger via wasKeyboardTriggeredRef to open the search panel when focus occurs.

apps/web/core/components/navigation/top-nav-power-k.tsx (1)

275-275: LGTM! Completes the close handler callback chain.

Wiring closePanel() to handleSearchMenuClose allows the child search menu to trigger closing of the parent expandable search panel. The inline arrow function is acceptable since closePanel is stable from the useExpandableSearch hook.

apps/web/core/components/power-k/ui/modal/commands-list.tsx (1)

14-14: LGTM! Straightforward prop pass-through.

The optional handleSearchMenuClose prop is correctly forwarded from parent to PowerKModalSearchMenu, completing the callback chain with proper typing.

Also applies to: 26-26, 37-37

---

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

[Copilot]

Pull request overview

This PR enhances the top navigation search component to support keyboard shortcut triggering (Cmd+F / Ctrl+F) and ensures the search panel closes properly when a search result is selected.

• Adds keyboard shortcut detection to useExpandableSearch hook to recognize when Cmd+F triggers focus
• Threads handleSearchMenuClose callback through components to enable proper panel closure from TopNavPowerK
• Updates documentation to reflect support for keyboard shortcut-triggered search

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

File	Description
apps/web/core/hooks/use-expandable-search.ts	Adds keyboard event listener to detect Cmd+F shortcut and opens panel when focus is triggered by keyboard; updates documentation
apps/web/core/components/power-k/ui/modal/search-menu.tsx	Adds optional handleSearchMenuClose prop and calls it before closing PowerK modal to support dual close behavior
apps/web/core/components/power-k/ui/modal/commands-list.tsx	Threads handleSearchMenuClose prop from parent to PowerKModalSearchMenu component
apps/web/core/components/navigation/top-nav-power-k.tsx	Passes closePanel as handleSearchMenuClose to ensure top nav search closes when results are selected

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.