-
-
Notifications
You must be signed in to change notification settings - Fork 790
fix(ui): Add back button in Create Search Space Page #207
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(ui): Add back button in Create Search Space Page #207
Conversation
|
@masabinhok is attempting to deploy a commit to the Rohan Verma's projects Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughA back button with a left-arrow icon was added to the header of the Search Space form. This button uses Next.js routing to navigate the user to the dashboard page when clicked. The header layout was updated to align the title, description, and new button horizontally. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant SearchSpaceForm
participant Router
User->>SearchSpaceForm: Clicks Back Button
SearchSpaceForm->>Router: router.push('/dashboard')
Router-->>User: Navigates to /dashboard
Poem
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
✨ No issues found! Your code is sparkling clean! ✨ Need help? Join our Discord for support! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
🧹 Nitpick comments (1)
surfsense_web/components/search-space-form.tsx (1)
120-143: Enhance accessibility and consider configurability.The back button implementation is well-styled and functional, but could benefit from accessibility improvements and better maintainability.
Consider these improvements:
<button + aria-label="Go back to dashboard" + title="Back to Dashboard" className="group relative rounded-full p-3 bg-background/80 hover:bg-muted border border-border hover:border-primary/20 shadow-sm hover:shadow-md transition-all duration-200 backdrop-blur-sm" onClick={() => { router.push('/dashboard') }} > <MoveLeftIcon size={18} className="text-muted-foreground group-hover:text-foreground transition-colors duration-200" /> - <div className="absolute inset-0 rounded-full bg-gradient-to-r from-blue-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300" /> </button>Optional considerations:
- Add
aria-labelandtitlefor better accessibility- Consider making the navigation route configurable via props
- The gradient overlay might be unnecessary visual complexity
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
surfsense_web/components/search-space-form.tsx(7 hunks)
🔇 Additional comments (4)
surfsense_web/components/search-space-form.tsx (4)
6-6: LGTM! Clean import addition.The
MoveLeftIconimport is correctly added to the existing lucide-react imports and follows the established pattern.
36-36: LGTM! Correct Next.js navigation import.The
useRouterimport from "next/navigation" is the correct choice for Next.js 13+ app router navigation.
63-63: LGTM! Proper router instance creation.The router instance is correctly created using the
useRouterhook and follows React conventions.
144-145: Formatting changes look good.The spacing adjustments maintain consistent code formatting.
|
@masabinhok Thanks 👍 |
…backButton fix(ui): Add back button in Create Search Space Page
…backButton fix(ui): Add back button in Create Search Space Page
Description
This PR introduces a back navigation button to the top-right corner of the Create Search Space page. The button is styled with MoveLeftIcon and redirects users to /dashboard using next/navigation.
Fixes: #196
Why
Improves UX by giving users an intuitive way to return to the dashboard without relying on browser navigation.
Changes
Imported MoveLeftIcon from lucide-react
Used router.push('/dashboard') to handle navigation
Styled button with hover effect and gradient feedback
Summary by CodeRabbit
New Features
Style