New bundle: left sidebar 3 tabs

[yujonglee]

No description provided.

[coderabbitai]

📝 Walkthrough

Walkthrough

Moves ChatPanelButton from apps/desktop to packages/ui and updates consumers to pass isExpanded/togglePanel. Integrates left/right panel hooks across desktop2 header, layout, and sidebar. Reworks chat UI and main tabs header/content. Adds ScrollArea components to UI package. Extends useTabs with currentTab. Minor global CSS height tweak.

Changes

Cohort / File(s)	Summary
Toolbar refactor (desktop) apps/desktop/src/components/toolbar/bars/main-toolbar.tsx, apps/desktop/src/components/toolbar/buttons/chat-panel-button.tsx	Switches to shared ChatPanelButton from UI package; wires useRightPanel to provide isExpanded/togglePanel. Removes local button implementation file.
Shared UI additions packages/ui/src/components/block/chat-panel-button.tsx, packages/ui/src/components/ui/scroll-area.tsx	Adds reusable ChatPanelButton component with click/shortcut handling; introduces ScrollArea and ScrollBar wrappers around Radix ScrollArea.
Main area header/tabs (desktop2) apps/desktop2/src/components/main/main-area.tsx	Replaces Tabs with TabsHeader/TabItem, integrates left/right panel controls (icons, ChatPanelButton), updates styles and layout.
Left sidebar (desktop2) apps/desktop2/src/components/main/left-sidebar.tsx	Adds toggle icon, new Search tab/view, and tab-aware active highlighting; integrates useLeftSidebar and useTabs.currentTab.
Chat UI restructure (desktop2) apps/desktop2/src/components/chat.tsx	Redesigns “no chat selected” and active chat layouts; adds persistent bottom input area; adjusts headers, scrolling, and styles.
Tabs hook update (desktop2) apps/desktop2/src/hooks/useTabs.ts	Returns new currentTab derived from the active tab.
App layout split (desktop2) apps/desktop2/src/routes/app/main/_layout.index.tsx	Conditionally renders resizable left sidebar; nests right panel as optional resizable split with Chat; updates flag names and structure.
Global styles apps/desktop2/src/styles/globals.css	Sets #root, #__next height to 100%.

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant MainHeader
  participant ChatPanelButton
  participant RightPanelCtx as useRightPanel
  participant Layout as Main Layout

  User->>ChatPanelButton: Click or ⌘/Ctrl+J
  ChatPanelButton->>RightPanelCtx: togglePanel()
  RightPanelCtx-->>ChatPanelButton: isExpanded (updated)
  RightPanelCtx-->>MainHeader: isExpanded
  RightPanelCtx-->>Layout: isExpanded
  alt Right panel expanded
    Layout->>Layout: Render MainContent || Chat (resizable)
  else Collapsed
    Layout->>Layout: Render MainContent only
  end

Loading

sequenceDiagram
  participant User
  participant LeftIcon as PanelLeft(Open/Close) Icon
  participant LeftPanelCtx as useLeftSidebar
  participant Layout

  User->>LeftIcon: Click
  LeftIcon->>LeftPanelCtx: toggle()
  LeftPanelCtx-->>Layout: isExpanded
  alt Left panel expanded
    Layout->>Layout: Render LeftSidebar (resizable) + Main column
  else Collapsed
    Layout->>Layout: Render Main column only
  end

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

• Chat minor fixes  #1197 — Adds Ctrl/Cmd+J shortcut to the local ChatPanelButton; related to moving this logic into the shared UI component.
• Overall optimization #1250 — Modifies right-panel context used here to drive isExpanded/togglePanel.
• Fixes 0814 3 #1348 — Adjusts panel management and controls alongside the same hooks integrated in this PR.

Suggested reviewers

• duckduckhero

Pre-merge checks and finishing touches

❌ Failed checks (3 warnings)

Check name	Status	Explanation	Resolution
Title Check	⚠️ Warning	The title “New bundle: left sidebar 3 tabs” is only tangentially related to part of the changeset and uses a vague term “bundle,” failing to summarize the primary UI refactors, context hook additions, and new chat panel integration introduced across the application. It does not clearly convey the scope or intent of the pull request, which spans multiple components and packages beyond just the left sidebar tabs.	Consider renaming the pull request to a concise, descriptive title that reflects the major changes, for example: “Refactor layout with left sidebar tabs, chat panel integration, and new UI components.”
Description Check	⚠️ Warning	There is no pull request description provided, so there is no information relating the changeset to its objectives or summarizing the scope of work.	Please add a descriptive pull request summary that outlines the key changes, affected components, and intended user or developer impact.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch new-bundle-left-sidebar-3-tabs

---

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 and usage tips.}

[coderabbitai]

Actionable comments posted: 2

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

apps/desktop2/src/components/chat.tsx (1)

30-113: Prevent orphan messages when no chat is selected

When currentChatGroupId is falsy (initial load or after hitting reset), we still render the submit form. Submitting it writes a message with chat_group_id === "", so the new message is orphaned and never shows up. We need to bail out of handleSubmitMessage when no chat group is chosen (or disable the form in that state) before shipping.

Please add an early return, e.g.

   const handleSubmitMessage = useCallback((e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();

     const formData = new FormData(e.currentTarget);
     const message = formData.get("message");
-    if (message) {
+    if (message && currentChatGroupId) {
       handleAddMessage({
         user_id: "TODO",
         chat_group_id: currentChatGroupId,

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between eba33e1 and 9dd5b5d.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (10)

• apps/desktop/src/components/toolbar/bars/main-toolbar.tsx (3 hunks)
• apps/desktop/src/components/toolbar/buttons/chat-panel-button.tsx (0 hunks)
• apps/desktop2/src/components/chat.tsx (1 hunks)
• apps/desktop2/src/components/main/left-sidebar.tsx (4 hunks)
• apps/desktop2/src/components/main/main-area.tsx (7 hunks)
• apps/desktop2/src/hooks/useTabs.ts (1 hunks)
• apps/desktop2/src/routes/app/main/_layout.index.tsx (2 hunks)
• apps/desktop2/src/styles/globals.css (1 hunks)
• packages/ui/src/components/block/chat-panel-button.tsx (1 hunks)
• packages/ui/src/components/ui/scroll-area.tsx (1 hunks)

💤 Files with no reviewable changes (1)

• apps/desktop/src/components/toolbar/buttons/chat-panel-button.tsx

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{js,ts,tsx,rs}

⚙️ CodeRabbit configuration file

**/*.{js,ts,tsx,rs}: 1. Do not add any error handling. Keep the existing one.
2. No unused imports, variables, or functions.
3. For comments, keep it minimal. It should be about "Why", not "What".

Files:

• apps/desktop2/src/hooks/useTabs.ts
• apps/desktop2/src/components/chat.tsx
• packages/ui/src/components/block/chat-panel-button.tsx
• apps/desktop2/src/routes/app/main/_layout.index.tsx
• apps/desktop2/src/components/main/main-area.tsx
• packages/ui/src/components/ui/scroll-area.tsx
• apps/desktop/src/components/toolbar/bars/main-toolbar.tsx
• apps/desktop2/src/components/main/left-sidebar.tsx

🧬 Code graph analysis (7)

apps/desktop2/src/components/chat.tsx (1)

apps/desktop2/src/tinybase/store/persisted.ts (2)

• ChatGroup (114-114)
• ChatMessage (115-115)

packages/ui/src/components/block/chat-panel-button.tsx (2)

packages/ui/src/components/ui/button.tsx (1)

• Button (37-89)

packages/ui/src/lib/utils.ts (1)

• cn (4-6)

apps/desktop2/src/routes/app/main/_layout.index.tsx (4)

packages/utils/src/contexts/right-panel.tsx (1)

• useRightPanel (112-118)

packages/utils/src/contexts/left-sidebar.tsx (1)

• useLeftSidebar (42-48)

apps/desktop2/src/components/main/left-sidebar.tsx (1)

• LeftSidebar (16-67)

apps/desktop2/src/components/main/main-area.tsx (1)

• MainHeader (26-82)

apps/desktop2/src/components/main/main-area.tsx (4)

packages/utils/src/contexts/right-panel.tsx (1)

• useRightPanel (112-118)

packages/utils/src/contexts/left-sidebar.tsx (1)

• useLeftSidebar (42-48)

packages/ui/src/components/block/chat-panel-button.tsx (1)

• ChatPanelButton (7-37)

apps/desktop2/src/hooks/useTabs.ts (1)

• useTabs (4-77)

packages/ui/src/components/ui/scroll-area.tsx (1)

packages/ui/src/lib/utils.ts (1)

• cn (4-6)

apps/desktop/src/components/toolbar/bars/main-toolbar.tsx (2)

packages/utils/src/contexts/right-panel.tsx (1)

• useRightPanel (112-118)

packages/ui/src/components/block/chat-panel-button.tsx (1)

• ChatPanelButton (7-37)

apps/desktop2/src/components/main/left-sidebar.tsx (2)

packages/utils/src/contexts/left-sidebar.tsx (1)

• useLeftSidebar (42-48)

apps/desktop2/src/hooks/useTabs.ts (1)

• useTabs (4-77)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: ci (windows, windows-latest)
• GitHub Check: ci (macos, macos-14)

🔇 Additional comments (1)

apps/desktop2/src/routes/app/main/_layout.index.tsx (1)

82-107: Layout refactor looks consistent.
Conditional left/right panels, sizing, and nested groups are wired coherently with the new contexts. Nice work.