Add interactive hover and active states for search components

[ComputelessComputer]

No description provided.

[netlify]

✅ Deploy Preview for hyprnote ready!

Name	Link
🔨 Latest commit	6ef7dbf
🔍 Latest deploy log	https://app.netlify.com/projects/hyprnote/deploys/6944e1d38c59aa0008c7218e
😎 Deploy Preview	https://deploy-preview-2418--hyprnote.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for hyprnote-storybook ready!

Name	Link
🔨 Latest commit	6ef7dbf
🔍 Latest deploy log	https://app.netlify.com/projects/hyprnote-storybook/deploys/6944e1d36c3e770008b38013
😎 Deploy Preview	https://deploy-preview-2418--hyprnote-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

Warning

Rate limit exceeded

@ComputelessComputer has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 7 minutes and 5 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between fdc4fb5 and 6ef7dbf.

📒 Files selected for processing (1)

• apps/web/src/components/search.tsx (4 hunks)

📝 Walkthrough

Walkthrough

Styling updates to the search component's SearchTrigger, adding group utilities for nested hover and active states, and refactoring the keyboard badge visuals with updated borders, colors, shadows, and transitions across multiple variants.

Changes

Cohort / File(s)	Summary
SearchTrigger Styling Updates apps/web/src/components/search.tsx	Added "group" utility to sidebar header and base variant classes to enable group-hover/group-active effects. Updated keyboard badge styling with neutral-300 border, gradient background, neutral-400 text color, shadow, and transition-all with duration-100 for all variants. Maintained functional behavior of SearchTrigger and SearchCommandPalette.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~5–10 minutes

• Focus areas: Verify consistency of group utility application across all SearchTrigger variants and confirm keyboard badge styling changes render correctly in both hover and active states.

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	No pull request description was provided by the author, making it impossible to assess whether the description is related to the changeset.	Add a pull request description explaining the motivation, changes, and any relevant context for the interactive state improvements to the search components.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: adding interactive hover and active states to search components, which aligns with the styling adjustments and transition effects in the changeset.

---

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: 1

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8225f86 and fdc4fb5.

📒 Files selected for processing (1)

• apps/web/src/components/search.tsx (4 hunks)

🧰 Additional context used

📓 Path-based instructions (4)

**/*

📄 CodeRabbit inference engine (AGENTS.md)

Format using dprint fmt from the root. Do not use cargo fmt.

Files:

• apps/web/src/components/search.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{ts,tsx}: Avoid creating a bunch of types/interfaces if they are not shared. Especially for function props. Just inline them.
Never do manual state management for form/mutation. Use useForm from tanstack-form and useQuery/useMutation from tanstack-query for 99% cases.

Files:

• apps/web/src/components/search.tsx

**/*.{ts,tsx,rs,js,jsx}

📄 CodeRabbit inference engine (AGENTS.md)

By default, avoid writing comments at all. If you write one, it should be about 'Why', not 'What'.

Files:

• apps/web/src/components/search.tsx

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{ts,tsx,js,jsx}: If there are many classNames with conditional logic, use cn (import from @hypr/utils). Always pass an array and split by logical grouping.
Use motion/react instead of framer-motion.

Files:

• apps/web/src/components/search.tsx

🧠 Learnings (2)

📚 Learning: 2025-12-16T07:24:35.987Z

Learnt from: CR
Repo: fastrepl/hyprnote PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-16T07:24:35.987Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : If there are many classNames with conditional logic, use `cn` (import from `hypr/utils`). Always pass an array and split by logical grouping.

Applied to files:

• apps/web/src/components/search.tsx

📚 Learning: 2025-11-24T16:32:19.706Z

Learnt from: CR
Repo: fastrepl/hyprnote PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T16:32:19.706Z
Learning: Applies to **/*.{ts,tsx} : If there are many classNames with conditional logic, use `cn` (import from `hypr/utils`), similar to `clsx`. Always pass an array and split by logical grouping.

Applied to files:

• apps/web/src/components/search.tsx

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

• GitHub Check: Redirect rules - hyprnote
• GitHub Check: Header rules - hyprnote
• GitHub Check: Pages changed - hyprnote
• GitHub Check: ci
• GitHub Check: fmt

🔇 Additional comments (2)

apps/web/src/components/search.tsx (2)

104-104: LGTM! Group class enables nested hover/active states.

The addition of the "group" class correctly enables the group-hover and group-active pseudo-selectors for the keyboard badge animation below.

---

156-156: LGTM! Consistent interactive states added.

The "group" class and hover/active transitions are correctly implemented, matching the sidebar variant pattern. The button press effect (translate-y on hover/active) provides good visual feedback.

Also applies to: 170-172