Ui Tweaks

[sanchitrk]

Lots of Ui tweak

Summary by CodeRabbit

• New Features

  • Introduced a client-side database powered by Dexie.js for real-time workspace data management and synchronization, including members, customers, threads, and labels.
  • Added a comprehensive right sidebar system with responsive design, keyboard shortcuts, and customizable menu components.
  • Implemented reusable header and splash components for dashboard and onboarding flows.
  • Enabled virtualized thread lists for improved performance.
  • Added CLI-style loader animation for splash screens.

• Bug Fixes

  • Improved consistency and accuracy of live data updates and filter persistence across thread-related views.

• Refactor

  • Migrated from server-driven live queries to client-side IndexedDB (Dexie) for all thread and member data.
  • Unified and simplified sidebar, header, and thread detail UI components.
  • Updated and reorganized route structure and naming for clarity.

• Chores

  • Upgraded and added multiple frontend dependencies for better performance and maintainability.

• Revert

  • Removed legacy sidebar, sheet, and thread list components in favor of new Dexie-based and modular implementations.

[coderabbitai[bot]]

[!IMPORTANT]

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

This update introduces a comprehensive migration of the frontend workspace and thread management system from a server-driven, SQL-based live query architecture to a client-side, Dexie.js-powered IndexedDB model. New modules for database models, constants, schema validation, and utility functions are added, along with React hooks and API abstraction layers. The thread list and sidebar components are refactored for improved UI consistency, virtualization, and responsive behavior. Route logic is updated to leverage the new Dexie database, with loaders and components now using live queries and effect hooks for state synchronization and filter persistence. Several obsolete files and server-centric implementations are removed, and naming conventions are standardized across the codebase.

Changes

File(s) / Group	Change Summary
frontend/package.json	Bumped various dependencies and devDependencies, upgraded pnpm, added new dependencies (dexie, dexie-react-hooks, turndown, etc.), and updated TypeScript, ESLint, and Vite plugins.
frontend/src/_db/constants.ts frontend/src/_db/db.ts frontend/src/_db/hooks.ts frontend/src/_db/models.ts frontend/src/_db/schema.ts frontend/src/_db/utils.ts	Introduced new modules for database constants, Dexie DB abstraction with sync and query helpers, React hooks for state sync, model/type definitions, Zod schemas, and utility functions.
frontend/src/api/api.ts frontend/src/api/errors.ts	Added a new API abstraction layer with typed fetch functions, schema validation, error handling, and sync helpers; introduced a custom HTTPError class.
frontend/src/components/custom/sidebar.tsx	Implemented a new, fully-featured sidebar system with context, variants, responsive behavior, and modular subcomponents.
frontend/src/components/features/dashboard/header.tsx frontend/src/components/features/onboarding/header.tsx	Added new header components for dashboard and onboarding, handling layout, branding, and sign-out functionality.
frontend/src/components/features/dashboard/sidebar.tsx	Refactored sidebar and menu components, renamed for consistency, added a new footer menu, and reorganized imports.
frontend/src/components/features/dashboard/splash.tsx	Added a CLI-style loader animation and a new workspace splash layout using the new sidebar system.
frontend/src/components/features/dashboard/thread-list.tsx	Introduced a virtualized thread list component, replaced previous implementation, and refined UI for compactness.
frontend/src/components/features/thread/activity-list-item.tsx frontend/src/components/features/thread/activity-list.tsx frontend/src/components/features/thread/markdown-renderer.tsx frontend/src/components/features/thread/priority-form.tsx frontend/src/components/features/thread/status-form.tsx frontend/src/components/features/thread/thread-summary.tsx	Adjusted import paths, styling, and minor UI tweaks for thread-related components.
frontend/src/components/features/thread/assignee-form.tsx frontend/src/components/features/thread/detail-sidebar.tsx frontend/src/components/features/thread/thread-labels.tsx	Refactored to use prop-driven data and Dexie-based live queries for assignees, members, and labels; updated component signatures.
frontend/src/components/features/thread/message-editor.tsx	Replaced custom markdown serialization with Turndown, finalized save handler, and adjusted layout.
frontend/src/components/features/thread/thread-queue.tsx	Updated imports and compacted UI for thread queue items; no logic changes.
frontend/src/db/api.ts	Removed user/workspace API calls; reintroduced a simplified getWorkspace function.
frontend/src/lib/search-params.ts	Updated import paths for constants and Zod adapter.
frontend/src/main.tsx	Added diagnostic logging for authentication loading state.
frontend/src/routeTree.gen.ts	Renamed the /workspaces/add route to /workspaces/create throughout the route tree.
frontend/src/routes/__root.tsx	Corrected import path for router devtools.
frontend/src/routes/_auth/route.tsx	Refactored to use separate beforeLoad and loader hooks for token and user data, updated component to use loader data and added lifecycle logging.
frontend/src/routes/_auth/workspaces/$workspaceId/_workspace/index.tsx	Removed explicit component property, now only redirects in the loader.
frontend/src/routes/_auth/workspaces/$workspaceId/_workspace/route.tsx	Refactored to remove abort signal usage, simplified loader, updated sidebar, and removed sync status checks.
frontend/src/routes/_auth/workspaces/$workspaceId/_workspace/threads/done.tsx hold.tsx me.tsx needs-first-response.tsx needs-next-response.tsx route.tsx todo.tsx unassigned.tsx waiting-on-customer.tsx	Migrated all thread-related routes to use Dexie DB for data fetching, live queries for reactivity, and effect hooks for queue path sync and filter persistence; updated UI to use new header and filter components.
frontend/src/routes/_auth/workspaces/$workspaceId/route.tsx	Centralized Dexie DB instance management, removed explicit sync logic, simplified component to render outlet.
frontend/src/routes/_auth/workspaces/$workspaceId/threads.$threadId.tsx	Refactored loader to use Dexie for thread, members, filters, and labels; updated component to use new sidebar and live data, renamed and simplified UI logic.
frontend/src/routes/_auth/workspaces/create.tsx	Changed route path, updated header import, icon usage, and minor form tweaks.
frontend/src/routes/_auth/workspaces/index.tsx	Switched to API-based workspace fetching, updated header, renamed component, and adjusted UI.
frontend/src/routes/index.tsx	Updated imports and simplified page layout and styling.
Deleted: frontend/src/components/thread/leftbar/sheet.tsx sidebar.tsx rightbar/sheet.tsx workspace/filters.tsx sidebar-footer-menu.tsx splash.tsx thread-list.tsx frontend/src/routes/_auth/workspaces/$workspaceId/route.tsx.backup threads.$threadId.tsx.txt	Removed obsolete or replaced components and backup/legacy files related to old sidebar, sheet, workspace splash, and thread detail implementations.

Sequence Diagram(s)

sequenceDiagram
    participant UI as React Component
    participant DexieDB as IndexedDB (Dexie)
    participant API as Backend API

    UI->>DexieDB: Query members, threads, labels (live queries)
    DexieDB-->>UI: Return live data (reactive updates)
    UI->>API: Fetch user/workspace/token as needed
    API-->>UI: Return validated data
    UI->>DexieDB: Upsert filters, persist sort/queue path
    Note right of UI: UI updates on DexieDB changes (via hooks)
    UI->>DexieDB: On filter/sort change, update DB and localStorage

Poem

In the garden of Dexie, the data now grows,
Threads and members, where the indexed wind blows.
Sidebars slide smoothly, menus appear with delight,
Filters and queues keep the workflow just right.
Old sheets and SQL have hopped far away—
The rabbit now dances where live queries play!
🐇✨

---

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

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)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[sanchitrk]

@coderabbitai full review

[coderabbitai[bot]]

:white_check_mark: Actions performed

Full review triggered.

[coderabbitai[bot]]

:white_check_mark: Actions performed

Full review triggered.