Skip to content

UI refactor: extract reusable database components and standardize design#58

Merged
Yashh56 merged 11 commits intoRelwave:developfrom
Yashh56:code-improvement
Apr 7, 2026
Merged

UI refactor: extract reusable database components and standardize design#58
Yashh56 merged 11 commits intoRelwave:developfrom
Yashh56:code-improvement

Conversation

@Yashh56
Copy link
Copy Markdown
Member

@Yashh56 Yashh56 commented Apr 7, 2026

This pull request introduces several UI improvements and refactors to the database connection and overview components, focusing on consistency, code reuse, and enhanced user experience. The main changes include extracting and reusing UI components for database details, updating the visual style of statistics and cards, and introducing new utility UI components.

Component refactoring and reuse:

  • Extracted the connection details and statistics grid from DatabaseDetail into a new reusable DatabaseOverviewPanel component, simplifying DatabaseDetail and improving maintainability. (src/features/home/components/DatabaseDetail.tsx, src/features/home/components/DatabaseOverviewPanel.tsx) [1] [2]
  • Moved the connection details section into its own ConnectionDetails component for better separation of concerns and reusability. (src/features/home/components/ConnectionDetails.tsx, src/features/home/components/DatabaseOverviewPanel.tsx) [1] [2]

UI consistency and enhancements:

  • Updated the layout of the connections list and discovered databases to use the Card, CardContent, and related components for a more consistent and modern UI. This includes changes to the quick stats footer and discovered databases list. (src/features/home/components/ConnectionList.tsx, src/features/home/components/DiscoveredDatabasesCard.tsx) [1] [2] [3] [4]
  • Improved section headers and statistics presentation in the connections list for clarity and visual hierarchy. (src/features/home/components/ConnectionList.tsx)

New UI utilities:

  • Added a new Empty component suite (Empty, EmptyHeader, EmptyTitle, etc.) to standardize empty state presentations throughout the app. (src/components/ui/empty.tsx)

Minor UI adjustments:

  • Removed the logo/brand section from the VerticalIconBar for a cleaner sidebar appearance. (src/components/layout/VerticalIconBar.tsx)
  • Added a "Back" button to the DatabaseDetail component for improved navigation. (src/features/home/components/DatabaseDetail.tsx)

These changes collectively improve code organization, promote reuse of UI elements, and enhance the overall user interface consistency across the application.

@Yashh56 Yashh56 merged commit 1d0dbc7 into Relwave:develop Apr 7, 2026
2 of 3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant