feat(desktop): Add sidebar empty states and align content (#162)

* feat(desktop): add sidebar empty states

* fix(desktop): align sidebar rail content

* Avoid false no-results hints for pinned matches

Co-authored-by: oratorio-integration[bot] <281657135+oratorio-integration[bot]@users.noreply.github.com>

---------

Co-authored-by: oratorio-integration[bot] <281657135+oratorio-integration[bot]@users.noreply.github.com>

Author: AkiKurisu

desktop/src/renderer/components/sidebar/ThreadList.tsx

@@ -44,7 +44,7 @@ import { addToast } from '../../stores/toastStore'
 import { PinIcon, ThreadEntry } from './ThreadEntry'
 import { WorkspaceOptionsMenu } from './WorkspaceHeader'
 import { useAddProjectFlow } from '../projects/AddProject'
-import { SIDEBAR_ROW_MIN_HEIGHT } from './sidebarNavRowStyles'
+import { SIDEBAR_RAIL_CONTENT_INSET, SIDEBAR_ROW_MIN_HEIGHT } from './sidebarNavRowStyles'
 import {
   isRemoteProjectKey,
   normalizeWorkspaceProjectKey,
@@ -265,8 +265,12 @@ export function ThreadList({
               <ProjectThreadSkeletonList />
             ) : (
               <>
-                {projectThreads.length === 0 && project.loaded && searchQuery && (
-                  <ProjectHint label={t('threadList.noSearchResults')} />
+                {project.loaded && rawProjectThreads.length === 0 && (
+                  <ProjectHint
+                    label={searchQuery
+                      ? t('threadList.noSearchResults')
+                      : t('projectsRail.noChats')}
+                  />
                 )}
                 {projectThreads.map((thread) => (
                   isForeground ? (
@@ -314,6 +318,9 @@ export function ThreadList({
         )}
         {showProjects && (
           <CollapsibleThreads collapsed={projectsSectionCollapsed} marginTop={0}>
+            {projectsForRender.length === 0 && (
+              <ProjectHint label={t('projectsRail.noProjects')} alignment="section" />
+            )}
             {ordinaryProjects.map(renderProjectBlock)}
           </CollapsibleThreads>
         )}
@@ -1694,10 +1701,11 @@ function ProjectHint({
     <div
       style={{
         padding: alignment === 'section'
-          ? `4px ${SIDEBAR_SECTION_INSET} 8px`
+          ? `4px ${SIDEBAR_RAIL_CONTENT_INSET} 8px`
           : '4px 16px 8px 32px',
         color: 'var(--text-dimmed)',
         fontSize: 'var(--type-secondary-size)',
+        fontWeight: 400,
         lineHeight: 'var(--type-secondary-line-height)'
       }}
     >
@@ -2109,14 +2117,12 @@ function projectFolderPaths(project: WorkspaceProjectSummary): string[] {
   })
 }
 
-const SIDEBAR_SECTION_INSET = '8px'
-
 const sidebarSectionHeaderStyle: CSSProperties = {
   display: 'flex',
   alignItems: 'center',
   gap: '4px',
   minHeight: '28px',
-  padding: `8px ${SIDEBAR_SECTION_INSET} 2px`,
+  padding: `8px ${SIDEBAR_RAIL_CONTENT_INSET} 2px`,
   cursor: 'pointer',
   userSelect: 'none'
 }

desktop/src/renderer/components/sidebar/sidebarNavRowStyles.ts

@@ -7,6 +7,13 @@ import type { CSSProperties } from 'react'
  */
 export const SIDEBAR_ROW_MIN_HEIGHT = '30px'
 
+/**
+ * Shared horizontal origin for expanded-sidebar section labels, project icon
+ * slots, and section-level empty states. Full-width rows reach this origin via
+ * their 4px outer inset plus 12px inner padding.
+ */
+export const SIDEBAR_RAIL_CONTENT_INSET = '16px'
+
 /** Shared geometry for New chat, Search, Automations, Skills, Settings, and project header rows. */
 export const SIDEBAR_NAV_ROW_OUTER: CSSProperties = {
   width: 'calc(100% - 8px)',

desktop/src/renderer/tests/ThreadListProjects.test.tsx

@@ -381,7 +381,7 @@ describe('ThreadList project-first layout', () => {
 
   it('keeps cold projects collapsed and starts them only on double click', () => {
     useWorkspaceProjectsStore.getState().setPayload({
-      foregroundWorkspacePath: '/workspace/a',
+      foregroundWorkspacePath: '',
       secondaryLimit: 8,
       projects: [
         {
@@ -413,7 +413,7 @@ describe('ThreadList project-first layout', () => {
     expect(workspaceSwitch).toHaveBeenCalledWith('/workspace/cold')
   })
 
-  it('does not repeat empty chat copy for loaded empty projects', () => {
+  it('shows a thread-aligned empty state for each loaded empty project', () => {
     useWorkspaceProjectsStore.getState().setPayload({
       foregroundWorkspacePath: '/workspace/a',
       secondaryLimit: 8,
@@ -445,6 +445,35 @@ describe('ThreadList project-first layout', () => {
 
     expect(screen.getByRole('button', { name: 'a' })).toHaveAttribute('aria-expanded', 'true')
     expect(screen.getByRole('button', { name: 'b' })).toHaveAttribute('aria-expanded', 'true')
+    const projectEmptyStates = screen.getAllByText('No chats')
+    expect(projectEmptyStates).toHaveLength(2)
+    for (const emptyState of projectEmptyStates) {
+      expect(emptyState).toHaveStyle({ padding: '4px 16px 8px 32px' })
+    }
+  })
+
+  it('shows search feedback instead of the ordinary project empty state', () => {
+    useThreadStore.getState().setSearchQuery('missing')
+    useWorkspaceProjectsStore.getState().setPayload({
+      foregroundWorkspacePath: '/workspace/a',
+      secondaryLimit: 8,
+      projects: [
+        {
+          path: '/workspace/a',
+          name: 'a',
+          state: 'foreground',
+          running: true,
+          loaded: true,
+          threadCount: 1,
+          threads: [makeThread('thread-a', 'Existing thread')],
+          pinnedThreadIds: []
+        }
+      ]
+    })
+
+    renderList()
+
+    expect(screen.getByText('No threads match your search.')).toBeInTheDocument()
     expect(screen.queryByText('No chats')).not.toBeInTheDocument()
   })
 
@@ -955,6 +984,66 @@ describe('ThreadList project-first layout', () => {
     })
   })
 
+  it('shows section-aligned empty states when there are no configured projects or recent chats', () => {
+    useWorkspaceProjectsStore.getState().setPayload({
+      foregroundWorkspacePath: '/chats',
+      foregroundProjectId: '/chats',
+      secondaryLimit: 8,
+      projects: [],
+      chat: {
+        projectId: '/chats',
+        kind: 'chat',
+        path: '/chats',
+        name: '/chats',
+        state: 'foreground',
+        running: true,
+        loaded: true,
+        threadCount: 0,
+        threads: [],
+        pinnedThreadIds: []
+      }
+    })
+
+    renderList({ workspacePath: '/chats' })
+
+    expect(screen.getByText('Projects')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Toggle Projects section' }))
+      .toHaveStyle({ padding: '8px 16px 2px' })
+    expect(screen.getByText('No projects')).toHaveStyle({ padding: '4px 16px 8px' })
+    expect(screen.getByText('Recents')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Toggle Recents section' }))
+      .toHaveStyle({ padding: '8px 16px 2px' })
+    expect(screen.getByText('No chats')).toHaveStyle({ padding: '4px 16px 8px' })
+  })
+
+  it('does not report No projects when every configured project is pinned', () => {
+    useWorkspaceProjectsStore.getState().setPayload({
+      foregroundWorkspacePath: '/workspace/a',
+      foregroundProjectId: '/workspace/a',
+      secondaryLimit: 8,
+      projects: [
+        {
+          path: '/workspace/a',
+          name: 'Pinned project',
+          state: 'foreground',
+          running: true,
+          loaded: true,
+          pinned: true,
+          threadCount: 0,
+          threads: [],
+          pinnedThreadIds: []
+        }
+      ]
+    })
+
+    renderList()
+
+    expect(screen.getByText('Pinned')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Pinned project' })).toBeInTheDocument()
+    expect(screen.getByText('Projects')).toBeInTheDocument()
+    expect(screen.queryByText('No projects')).not.toBeInTheDocument()
+  })
+
   it('renders a Recents group with default chat workspace threads after Projects', () => {
     useWorkspaceProjectsStore.getState().setPayload({
       foregroundWorkspacePath: '/workspace/a',
@@ -991,8 +1080,8 @@ describe('ThreadList project-first layout', () => {
 
     const projectsHeading = screen.getByText('Projects')
     const recentsHeading = screen.getByText('Recents')
-    expect(projectsHeading.parentElement).toHaveStyle({ padding: '8px 8px 2px' })
-    expect(recentsHeading.parentElement).toHaveStyle({ padding: '8px 8px 2px' })
+    expect(projectsHeading.parentElement).toHaveStyle({ padding: '8px 16px 2px' })
+    expect(recentsHeading.parentElement).toHaveStyle({ padding: '8px 16px 2px' })
     // Recents renders as its own group, after Projects.
     expect(projectsHeading.compareDocumentPosition(recentsHeading) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
     expect(screen.getByText('General chat thread')).toBeInTheDocument()
@@ -1033,8 +1122,12 @@ describe('ThreadList project-first layout', () => {
 
     renderList()
 
-    expect(screen.getByText('Recents')).toBeInTheDocument()
-    expect(screen.getByText('No chats')).toHaveStyle({ padding: '4px 8px 8px' })
+    const recentsHeading = screen.getByText('Recents')
+    const recentsGroup = recentsHeading.parentElement?.parentElement
+    expect(recentsGroup).not.toBeNull()
+    expect(within(recentsGroup as HTMLElement).getByText('No chats')).toHaveStyle({
+      padding: '4px 16px 8px'
+    })
   })
 
   it('shows mutually exclusive waiting and running counts in project details', async () => {