[IMPLEMENT]: search feature (username / token ID)#99
[IMPLEMENT]: search feature (username / token ID)#99Nikuunj wants to merge 2 commits intoStabilityNexus:mainfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughAdded a new search feature enabling users to search identities by username or Token ID. The Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant Navbar
participant SearchModal
participant Router
User->>Navbar: Click search or hamburger menu
Navbar->>SearchModal: Render with isOpen=true
activate SearchModal
User->>SearchModal: Type search query (username/Token ID)
Note over SearchModal: Debounce 300ms timeout
User->>SearchModal: Press Enter or click submit
SearchModal->>Router: router.push(`/${value}`)
Router->>User: Navigate to search results
SearchModal->>SearchModal: onClose() & reset state
deactivate SearchModal
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested labels
Poem
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@components/ui/SearchModal.tsx`:
- Around line 43-49: The debug console.log inside the debounce timeout should be
removed or replaced with a proper logger call that can be disabled in
production: update the setTimeout callback (the debounceRef.current block that
trims value) to remove console.log("Debounced search term:", trimmed) and either
call your app logging utility (e.g., logger.debug or debugLog) or guard the log
behind a NODE_ENV check so it’s omitted in production; ensure you keep the
trimmed truthy check and the placeholder for the elasticsearch fetch intact.
- Around line 135-141: The modal container in SearchModal uses hardcoded inline
styles (backgroundColor "#18191D" and border "rgba(255,255,255,0.06)"); replace
the style prop on the div with theme-aware Tailwind classes (e.g., use
bg/rounded/shadow and border utilities with dark: and light: variants to match
the app theme) so the modal follows dark/light themes consistently—update the
div whose className starts with "animate-in zoom-in-95 relative w-full max-w-md
rounded-2xl p-6 shadow-2xl duration-200" by removing the style prop and adding
appropriate Tailwind classes (including dark: and/or ring/opacity utilities) to
represent the same visual appearance.
- Around line 52-63: In SearchModal, remove any stray console.log debug
statements, externalize all user-facing strings (e.g., placeholders and labels
like "Search by username or Token ID…", "Search Identity", "Press Enter") into
the i18n resource and replace inline usages with i18n lookups, replace the
inline style object used for the modal background/border with appropriate
Tailwind (or theme-aware) utility classes (e.g., use a dark background class and
a semi-transparent border class instead of backgroundColor:"#18191D" and
border:"1px solid rgba(255,255,255,0.06)"), and update the handleSubmit function
so router.push uses an encoded path
(router.push(`/${encodeURIComponent(value)}`)) while still clearing inputRef,
calling onClose, and updating setHasValue as before.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: dfb7eccc-a3b5-40e4-9ecc-addf8eb49a93
📒 Files selected for processing (2)
components/Navbar.tsxcomponents/ui/SearchModal.tsx
| debounceRef.current = setTimeout(() => { | ||
| const trimmed = value.trim(); | ||
| if (trimmed) { | ||
| console.log("Debounced search term:", trimmed); | ||
| // TODO: Add elasticsearch fetch here | ||
| } | ||
| }, 300); |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Remove console.log before production.
Debug logging should be removed or replaced with a proper logging utility that can be disabled in production builds.
♻️ Proposed fix
debounceRef.current = setTimeout(() => {
const trimmed = value.trim();
if (trimmed) {
- console.log("Debounced search term:", trimmed);
// TODO: Add elasticsearch fetch here
}
}, 300);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| debounceRef.current = setTimeout(() => { | |
| const trimmed = value.trim(); | |
| if (trimmed) { | |
| console.log("Debounced search term:", trimmed); | |
| // TODO: Add elasticsearch fetch here | |
| } | |
| }, 300); | |
| debounceRef.current = setTimeout(() => { | |
| const trimmed = value.trim(); | |
| if (trimmed) { | |
| // TODO: Add elasticsearch fetch here | |
| } | |
| }, 300); |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@components/ui/SearchModal.tsx` around lines 43 - 49, The debug console.log
inside the debounce timeout should be removed or replaced with a proper logger
call that can be disabled in production: update the setTimeout callback (the
debounceRef.current block that trims value) to remove console.log("Debounced
search term:", trimmed) and either call your app logging utility (e.g.,
logger.debug or debugLog) or guard the log behind a NODE_ENV check so it’s
omitted in production; ensure you keep the trimmed truthy check and the
placeholder for the elasticsearch fetch intact.
| const handleSubmit = useCallback( | ||
| (e?: React.FormEvent) => { | ||
| e?.preventDefault(); | ||
| const value = inputRef.current?.value.trim(); | ||
| if (!value) return; | ||
| router.push(`/${value}`); | ||
| onClose(); | ||
| if (inputRef.current) inputRef.current.value = ""; | ||
| setHasValue(false); | ||
| }, | ||
| [router, onClose] | ||
| ); |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check how the username parameter is used in the destination page
ast-grep --pattern 'params.$_.$_'
rg -n 'username' --type ts --type tsx -g '!node_modules'
cat app/\[username\]/page.tsx 2>/dev/null || fd -t f 'page.tsx' -x grep -l 'username' {}Repository: StabilityNexus/IdentityTokens-EVM-Frontend
Length of output: 525
🏁 Script executed:
#!/bin/bash
# Get full SearchModal.tsx content to verify all mentioned issues
fd -t f 'SearchModal.tsx' | head -1 | xargs wc -lRepository: StabilityNexus/IdentityTokens-EVM-Frontend
Length of output: 119
🏁 Script executed:
#!/bin/bash
# Read SearchModal.tsx to check for console.log, inline styles, and i18n issues
fd -t f 'SearchModal.tsx' | head -1 | xargs cat -nRepository: StabilityNexus/IdentityTokens-EVM-Frontend
Length of output: 7327
🏁 Script executed:
#!/bin/bash
# Check if there are i18n files in the project
fd -t d 'locales\|i18n\|translations' | head -10Repository: StabilityNexus/IdentityTokens-EVM-Frontend
Length of output: 68
Remove console.log, externalize strings to i18n, and replace hardcoded inline styles with Tailwind classes.
The code has three issues:
-
console.log on line 46: Remove the production debug statement.
-
Hardcoded user-visible strings: Lines 85, 154–175 contain hard-coded strings ("Search by username or Token ID…", "Search Identity", "Press Enter", etc.). Externalize these to an i18n resource file per the coding guidelines.
-
Hardcoded inline styles (lines 137–140): Replace the inline
styleobject with Tailwind classes or CSS variables for theme consistency:backgroundColor: "#18191D"→ Use a theme-aware background classborder: "1px solid rgba(255,255,255,0.06)"→ Use a theme-aware border class
Also consider using encodeURIComponent() when constructing the navigation path on line 57 to ensure special characters in usernames are safely encoded.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@components/ui/SearchModal.tsx` around lines 52 - 63, In SearchModal, remove
any stray console.log debug statements, externalize all user-facing strings
(e.g., placeholders and labels like "Search by username or Token ID…", "Search
Identity", "Press Enter") into the i18n resource and replace inline usages with
i18n lookups, replace the inline style object used for the modal
background/border with appropriate Tailwind (or theme-aware) utility classes
(e.g., use a dark background class and a semi-transparent border class instead
of backgroundColor:"#18191D" and border:"1px solid rgba(255,255,255,0.06)"), and
update the handleSubmit function so router.push uses an encoded path
(router.push(`/${encodeURIComponent(value)}`)) while still clearing inputRef,
calling onClose, and updating setHasValue as before.
| <div | ||
| className="animate-in zoom-in-95 relative w-full max-w-md rounded-2xl p-6 shadow-2xl duration-200" | ||
| style={{ | ||
| backgroundColor: "#18191D", | ||
| border: "1px solid rgba(255,255,255,0.06)", | ||
| }} | ||
| onClick={(e) => e.stopPropagation()} |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Prefer theme-aware classes over hardcoded inline styles.
The modal container uses hardcoded colors (#18191D, rgba(255,255,255,0.06)) which bypass the dark/light theme system used elsewhere in the component. Consider using Tailwind classes for consistency.
♻️ Proposed fix using theme-aware classes
<div
- className="animate-in zoom-in-95 relative w-full max-w-md rounded-2xl p-6 shadow-2xl duration-200"
- style={{
- backgroundColor: "#18191D",
- border: "1px solid rgba(255,255,255,0.06)",
- }}
+ className="animate-in zoom-in-95 relative w-full max-w-md rounded-2xl bg-slate-900 p-6 shadow-2xl duration-200 dark:bg-slate-900 border border-white/5"
onClick={(e) => e.stopPropagation()}
>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@components/ui/SearchModal.tsx` around lines 135 - 141, The modal container in
SearchModal uses hardcoded inline styles (backgroundColor "#18191D" and border
"rgba(255,255,255,0.06)"); replace the style prop on the div with theme-aware
Tailwind classes (e.g., use bg/rounded/shadow and border utilities with dark:
and light: variants to match the app theme) so the modal follows dark/light
themes consistently—update the div whose className starts with "animate-in
zoom-in-95 relative w-full max-w-md rounded-2xl p-6 shadow-2xl duration-200" by
removing the style prop and adding appropriate Tailwind classes (including dark:
and/or ring/opacity utilities) to represent the same visual appearance.
1 participant
Addressed Issues:
Fixes #97
This PR implements a comprehensive search feature for the Identity Tokens frontend application, allowing users to search for identities by username or Token ID. The feature includes debounced search, a responsive design for both mobile and desktop, and full theme support.
The useRef hook is used to reduce unnecessary re-renders and improve performance.
Screenshots/Recordings:
Screen.Recording.2026-04-07.135207.mp4
Check one of the checkboxes below:
Checklist
Summary by CodeRabbit