refactor(dashboard): UI redesign, persistent left sidebar, and light mode compatibility fixes

[yash-pouranik]

This PR focuses on a comprehensive UI/UX overhaul of the web-dashboard client app. It introduces a modern, cohesive Vercel/Supabase-like design language, integrates a persistent responsive Left Sidebar, improves page layouts for various viewport sizes, and resolves multiple critical light mode accessibility issues (such as invisible white-on-white text fields and hardcoded opacity backgrounds).

---

Key Changes & Upgrades

1. Global Navigation & Page Layouts

• Persistent Left Sidebar (Sidebar.jsx, MainLayout.jsx): Removed the horizontal project navigation tabs. Upgraded the sidebar to dynamically show project-specific context (Overview, Database, Auth, Settings, etc.) when inside a project. Added collapsible icons-only state with a chevron toggle and persistent local storage synchronization (urbackend-sidebar-collapsed).
• Global Search Bar (Header.jsx): Integrated a persistent central search input, accessible globally with a keyboard shortcut (Ctrl+K or ⌘+K), which redirects queries directly to the main dashboard search parameters.
• Flat Design Borders: Phased out obsolete .glass-card styling in favor of flat 1px solid var(--color-border) outlines to ensure absolute consistency across theme variations.

2. Database Explorer Polish (Database.jsx, DatabaseSidebar.jsx, DatabaseHeader.jsx)

• Collection Sidebar: Set panel background to var(--color-bg-sidebar) (matching the navigation sidebar) and added a clean border-right for a cohesive panel layout.
• Pill-style Badge: Replaced the hardcoded white collection count badge with a semi-transparent var(--color-surface-hover-strong) pill.
• Prevent Layout Overflow: Updated the action control header (DatabaseHeader) with flexWrap: 'wrap' and dynamic heights, preventing critical controls (RLS, filter, export, add record) from being cut off on narrow viewports.
• Loading State Flash: Added a loadingProject initial spinner condition so the dashboard doesn't briefly flash the empty "No collections found" state while API requests are pending.
• Snippet Domain Resolution: Dynamically imported PUBLIC_API_URL to replace the hardcoded https://api.urbackend.com domain inside the cURL setup instructions snippet.

3. Creation & Schema Builders (CreateProject.jsx, CreateCollection.jsx)

• Create Project Page Redesign: Redesigned the project creation page from a rigid boxed box structure to a clean, flat, open layout.
• Text Visibility Fix (Bug): Fixed a critical layout bug where inputs and textareas used hardcoded color: '#fff'. This was making typed text completely invisible on a light background. It now correctly inherits var(--color-text-main).
• Schema Collection Builder: Switched all hardcoded transparent dark container backgrounds (rgba(0, 0, 0, 0.15), etc.) to theme variables (var(--color-bg-input)) so that fields, array item pickers, and reference dropdowns display correctly in light mode.

---

Files Modified

Component / Page	File	Description of Changes
Global Layout	MainLayout.jsx, Sidebar.jsx, Header.jsx, index.css	Persistent navigation left sidebar, layout math transitions, and global search bar integration.
Project Details	ProjectDetails.jsx, AnalyticsChart.jsx	Flat border design, traffic charts styling fixes, and API response extraction corrections.
Database Page	Database.jsx, DatabaseSidebar.jsx, DatabaseHeader.jsx	Dynamic cURL Snippets, collection sidebar panel backgrounds, pill badge, flex-wrap actions row, and loading spinners.
Schema Builder	CreateCollection.jsx	Theme variable background colors for inputs and sub-fields groups.
Project Setup	CreateProject.jsx	Redesigned flat project creation form and fixed the light mode input text color visibility bug.

---

Verification & Testing

• ESLint Verification: Verified locally using npm run lint --workspace=apps/web-dashboard (0 errors, clean code status).
• Production Bundle Compilation: Ran npm run build --workspace=apps/web-dashboard successfully; Vite built all assets and static bundles without compilation errors.

Summary by CodeRabbit

• New Features

  • Added a persistent, keyboard-accessible global search in the dashboard header.
  • Introduced a collapsible sidebar with saved state for a more flexible layout.

• Bug Fixes

  • Improved responsive header behavior so actions wrap cleanly on smaller screens.
  • Updated navigation highlighting and page loading states for smoother project browsing.

• Style

  • Standardized dashboard and form visuals with theme-based colors and surfaces.
  • Refined database and project setup screens for more consistent appearance.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[coderabbitai]

Warning

Review limit reached

@yash-pouranik, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 43 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: fe165c1f-ba7b-4535-a3de-5b9e68d0a6ba

📥 Commits

Reviewing files that changed from the base of the PR and between 1cab6de and d6adf26.

📒 Files selected for processing (11)

• apps/web-dashboard/src/components/Database/DatabaseHeader.jsx
• apps/web-dashboard/src/components/DatabaseSidebar.jsx
• apps/web-dashboard/src/components/Layout/Header.jsx
• apps/web-dashboard/src/components/Layout/MainLayout.jsx
• apps/web-dashboard/src/components/Layout/ProjectNavbar.jsx
• apps/web-dashboard/src/components/Layout/Sidebar.jsx
• apps/web-dashboard/src/index.css
• apps/web-dashboard/src/pages/CreateCollection.jsx
• apps/web-dashboard/src/pages/CreateProject.jsx
• apps/web-dashboard/src/pages/Dashboard.jsx
• apps/web-dashboard/src/pages/Database.jsx

📝 Walkthrough

Walkthrough

Replaces the hover-based mini sidebar with a class-driven collapsible sidebar persisted in localStorage, moves global project search into the Header component (synced to URL q param), removes ProjectNavbar, and migrates hardcoded colors to CSS theme variables across multiple pages and components.

Changes

Layout Refactor: Collapsible Sidebar, Global Search, Theme Token Cleanup

Layer / File(s)	Summary
CSS sidebar collapse rules apps/web-dashboard/src/index.css	Defines --sidebar-width: 240px / --sidebar-width-collapsed: 68px, replaces hover expansion with .sidebar.collapsed selectors that hide labels and shrink the sidebar, adds .sidebar-collapsed .main-content margin rule, and removes the project navigation bar CSS block.
Sidebar component apps/web-dashboard/src/components/Layout/Sidebar.jsx	Adds isCollapsed/onToggleCollapse props, updates isActive to use exact match for project root and prefix match for subroutes, adds collapse/expand footer button, renames "Authentication" to "Auth", and adds "Mail" nav link.
MainLayout wiring apps/web-dashboard/src/components/Layout/MainLayout.jsx	Introduces isSidebarCollapsed state initialized from localStorage (try/catch), a toggleSidebarCollapse handler that persists state, conditional sidebar-collapsed class on app-shell, and unconditional rendering of Header and Sidebar (removes ProjectNavbar and route-gated conditionals).
Header: global search and breadcrumbs apps/web-dashboard/src/components/Layout/Header.jsx	Replaces children slot with internal search input synced to q URL param, fetches project name for breadcrumbs, handles Cmd/Ctrl+K shortcut to focus input, and computes paddingLeft from isSidebarCollapsed.
Dashboard: URL-param search apps/web-dashboard/src/pages/Dashboard.jsx	Removes useLayout, useRef, and the header-injection effect; derives searchTerm from useSearchParams q param.
Database page: loadingProject and RLS theming apps/web-dashboard/src/pages/Database.jsx	Adds loadingProject state with spinner gate, try/catch/finally on project fetch with toast on error, PUBLIC_API_URL in the cURL snippet, and CSS variable tokens in the RLS dialog.
Theme token migration apps/web-dashboard/src/components/Database/DatabaseHeader.jsx, apps/web-dashboard/src/components/DatabaseSidebar.jsx, apps/web-dashboard/src/pages/CreateCollection.jsx, apps/web-dashboard/src/pages/CreateProject.jsx	Replaces hardcoded RGBA/dark colors with var(--color-*) theme tokens; DatabaseHeader also gains flexWrap: 'wrap' and height: 'auto' for responsive layout.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~50 minutes

Possibly related PRs

• geturbackend/urBackend#190: Modifies the same Database.jsx cURL snippet logic and RLS dialog markup, directly overlapping with the PUBLIC_API_URL and RLS styling changes in this PR.

Suggested labels

frontend, type:design, type:refactor

Suggested reviewers

• Nitin-kumar-yadav1307

🐇 The sidebar no longer peeks on hover,
It collapses with a click — tidy and sure!
Search lives in the header, Cmd+K to find,
No more navbar ghosts haunting the UI behind.
CSS vars replace every hardcoded hue,
A cleaner dashboard — hooray, it's brand new! 🎉

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 22.22% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the dashboard UI redesign, persistent left sidebar, and light-mode fixes shown in the changeset.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feature/project-layout-redesign

---

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

[yash-pouranik]

@coderabbitai full review

[coderabbitai]

✅ Action performed

Full review finished.

[yash-pouranik]

@coderabbitai
please review

[coderabbitai]

@yash-pouranik On it — I’ll review the latest changes.

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.