bingocode 1.0.3 → 1.0.4

package/desktop/src/components/layout/Sidebar.tsx

@@ -1,384 +0,0 @@
-import { useEffect, useState, useCallback, useMemo, useRef } from 'react'
-import { useSessionStore } from '../../stores/sessionStore'
-import { useUIStore } from '../../stores/uiStore'
-import { useTranslation } from '../../i18n'
-import { ProjectFilter } from './ProjectFilter'
-import type { SessionListItem } from '../../types/session'
-import { useTabStore, SETTINGS_TAB_ID, SCHEDULED_TAB_ID } from '../../stores/tabStore'
-import { useChatStore } from '../../stores/chatStore'
-
-const isTauri = typeof window !== 'undefined' && ('__TAURI_INTERNALS__' in window || '__TAURI__' in window)
-const isWindows = typeof navigator !== 'undefined' && /Win/.test(navigator.platform)
-
-type TimeGroup = 'today' | 'yesterday' | 'last7days' | 'last30days' | 'older'
-
-const TIME_GROUP_ORDER: TimeGroup[] = ['today', 'yesterday', 'last7days', 'last30days', 'older']
-
-export function Sidebar() {
-  const sessions = useSessionStore((s) => s.sessions)
-  const selectedProjects = useSessionStore((s) => s.selectedProjects)
-  const error = useSessionStore((s) => s.error)
-  const fetchSessions = useSessionStore((s) => s.fetchSessions)
-  const deleteSession = useSessionStore((s) => s.deleteSession)
-  const renameSession = useSessionStore((s) => s.renameSession)
-  const addToast = useUIStore((s) => s.addToast)
-  const activeTabId = useTabStore((s) => s.activeTabId)
-  const closeTab = useTabStore((s) => s.closeTab)
-  const disconnectSession = useChatStore((s) => s.disconnectSession)
-  const [searchQuery, setSearchQuery] = useState('')
-  const [contextMenu, setContextMenu] = useState<{ id: string; x: number; y: number } | null>(null)
-  const [renamingId, setRenamingId] = useState<string | null>(null)
-  const [renameValue, setRenameValue] = useState('')
-
-  useEffect(() => {
-    fetchSessions()
-  }, [fetchSessions])
-
-  // Close context menu on click outside
-  useEffect(() => {
-    if (!contextMenu) return
-    const close = () => setContextMenu(null)
-    document.addEventListener('click', close)
-    return () => document.removeEventListener('click', close)
-  }, [contextMenu])
-
-  // Filter by selected projects, then by search query
-  const filteredSessions = useMemo(() => {
-    let result = sessions
-    if (selectedProjects.length > 0) {
-      result = result.filter((s) => selectedProjects.includes(s.projectPath))
-    }
-    if (searchQuery) {
-      const q = searchQuery.toLowerCase()
-      result = result.filter((s) => s.title.toLowerCase().includes(q))
-    }
-    return result
-  }, [sessions, selectedProjects, searchQuery])
-
-  // Group by time
-  const timeGroups = useMemo(() => groupByTime(filteredSessions), [filteredSessions])
-
-  const handleContextMenu = useCallback((e: React.MouseEvent, id: string) => {
-    e.preventDefault()
-    setContextMenu({ id, x: e.clientX, y: e.clientY })
-  }, [])
-
-  const handleDelete = useCallback(async (id: string) => {
-    setContextMenu(null)
-    await deleteSession(id)
-    disconnectSession(id)
-    closeTab(id)
-  }, [closeTab, deleteSession, disconnectSession])
-
-  const handleStartRename = useCallback((id: string, currentTitle: string) => {
-    setContextMenu(null)
-    setRenamingId(id)
-    setRenameValue(currentTitle)
-  }, [])
-
-  const handleFinishRename = useCallback(async () => {
-    if (renamingId && renameValue.trim()) {
-      await renameSession(renamingId, renameValue.trim())
-    }
-    setRenamingId(null)
-    setRenameValue('')
-  }, [renamingId, renameValue, renameSession])
-
-  const startDraggingRef = useRef<(() => Promise<void>) | null>(null)
-
-  useEffect(() => {
-    if (!isTauri) return
-    import(/* @vite-ignore */ '@tauri-apps/api/window')
-      .then(({ getCurrentWindow }) => {
-        const win = getCurrentWindow()
-        startDraggingRef.current = () => win.startDragging()
-      })
-      .catch(() => {})
-  }, [])
-
-  const handleSidebarDrag = useCallback((e: React.MouseEvent) => {
-    if ((e.target as HTMLElement).closest('button, input, textarea, select, a, [role="button"]')) return
-    startDraggingRef.current?.()
-  }, [])
-
-  const t = useTranslation()
-
-  const TIME_GROUP_LABELS: Record<TimeGroup, string> = {
-    today: t('sidebar.timeGroup.today'),
-    yesterday: t('sidebar.timeGroup.yesterday'),
-    last7days: t('sidebar.timeGroup.last7days'),
-    last30days: t('sidebar.timeGroup.last30days'),
-    older: t('sidebar.timeGroup.older'),
-  }
-
-  return (
-    <aside onMouseDown={handleSidebarDrag} className="w-[var(--sidebar-width)] h-full flex flex-col bg-[var(--color-surface-sidebar)] border-r border-[var(--color-border)] select-none">
-      {/* Brand logo — extra top padding in desktop to clear macOS traffic lights (not needed on Windows) */}
-      <div className={`px-3 pb-1.5 flex items-center justify-between ${isTauri && !isWindows ? 'pt-[44px]' : 'pt-3'}`}>
-        <div className="flex items-center gap-2.5">
-          <img src="/app-icon.jpg" alt="" className="h-8 w-8 rounded-lg flex-shrink-0" />
-          <span className="text-[13px] font-semibold tracking-tight text-[var(--color-text-primary)]" style={{ fontFamily: 'var(--font-headline)' }}>
-            Claude Code <span className="text-[var(--color-primary-container)]">Haha</span>
-          </span>
-        </div>
-        <a
-          href="https://github.com/NanmiCoder/cc-haha"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="rounded-md p-1 text-[var(--color-text-tertiary)] transition-colors hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)]"
-          title="GitHub"
-        >
-          <GitHubIcon />
-        </a>
-      </div>
-      {/* Navigation */}
-      <div className="px-3 pb-3 flex flex-col gap-0.5">
-        <NavItem
-          active={false}
-          onClick={async () => {
-            try {
-              // Use current active session's workDir as default for new session
-              const currentTabId = useTabStore.getState().activeTabId
-              const currentSession = currentTabId
-                ? useSessionStore.getState().sessions.find((s) => s.id === currentTabId)
-                : null
-              const workDir = currentSession?.workDir || undefined
-              const sessionId = await useSessionStore.getState().createSession(workDir)
-              useTabStore.getState().openTab(sessionId, t('sidebar.newSession'))
-              useChatStore.getState().connectToSession(sessionId)
-            } catch (error) {
-              addToast({
-                type: 'error',
-                message:
-                  error instanceof Error ? error.message : t('sidebar.sessionListFailed'),
-              })
-            }
-          }}
-          icon={<PlusIcon />}
-        >
-          {t('sidebar.newSession')}
-        </NavItem>
-        <NavItem
-          active={activeTabId === SCHEDULED_TAB_ID}
-          onClick={() => useTabStore.getState().openTab(SCHEDULED_TAB_ID, t('sidebar.scheduled'), 'scheduled')}
-          icon={<ClockIcon />}
-        >
-          {t('sidebar.scheduled')}
-        </NavItem>
-      </div>
-
-      {/* Project filter */}
-      <div className="px-3 pb-1 flex items-center justify-between">
-        <ProjectFilter />
-      </div>
-
-      {/* Search */}
-      <div className="px-3 pb-2">
-        <input
-          id="sidebar-search"
-          type="text"
-          placeholder={t('sidebar.searchPlaceholder')}
-          value={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
-          className="w-full h-7 px-2 text-xs rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-text-primary)] placeholder:text-[var(--color-text-tertiary)] outline-none focus:border-[var(--color-border-focus)]"
-        />
-      </div>
-
-      {/* Session list — grouped by time */}
-      <div className="flex-1 overflow-y-auto px-3">
-        {error && (
-          <div className="mx-1 mt-2 rounded-[var(--radius-md)] border border-[var(--color-error)]/20 bg-[var(--color-error)]/5 px-3 py-2">
-            <div className="text-xs font-medium text-[var(--color-error)]">{t('sidebar.sessionListFailed')}</div>
-            <div className="mt-1 text-[11px] text-[var(--color-text-secondary)] break-words">{error}</div>
-            <button
-              onClick={() => fetchSessions()}
-              className="mt-2 text-[11px] font-medium text-[var(--color-brand)] hover:underline"
-            >
-              {t('common.retry')}
-            </button>
-          </div>
-        )}
-        {filteredSessions.length === 0 && (
-          <div className="px-3 py-4 text-xs text-[var(--color-text-tertiary)] text-center">
-            {searchQuery ? t('sidebar.noMatching') : t('sidebar.noSessions')}
-          </div>
-        )}
-        {TIME_GROUP_ORDER.map((group) => {
-          const items = timeGroups.get(group)
-          if (!items || items.length === 0) return null
-          return (
-            <div key={group} className="mb-1">
-              <div className="px-2 pt-3 pb-1 text-[11px] font-semibold text-[var(--color-text-tertiary)] tracking-wide">
-                {TIME_GROUP_LABELS[group]}
-              </div>
-              {items.map((session) => (
-                <div key={session.id} className="relative">
-                  {renamingId === session.id ? (
-                    <input
-                      autoFocus
-                      value={renameValue}
-                      onChange={(e) => setRenameValue(e.target.value)}
-                      onBlur={handleFinishRename}
-                      onKeyDown={(e) => {
-                        if (e.key === 'Enter') handleFinishRename()
-                        if (e.key === 'Escape') { setRenamingId(null); setRenameValue('') }
-                      }}
-                      className="w-full px-3 py-2 text-sm rounded-[var(--radius-md)] border border-[var(--color-border-focus)] bg-[var(--color-surface)] text-[var(--color-text-primary)] outline-none ml-1"
-                    />
-                  ) : (
-                    <button
-                      onClick={() => {
-                        useTabStore.getState().openTab(session.id, session.title)
-                        useChatStore.getState().connectToSession(session.id)
-                      }}
-                      onContextMenu={(e) => handleContextMenu(e, session.id)}
-                      className={`
-                        w-full flex items-center gap-2 pl-4 pr-3 py-1.5 text-sm text-left rounded-[var(--radius-md)] transition-colors duration-200 group
-                        ${session.id === activeTabId
-                          ? 'bg-[var(--color-surface-selected)] text-[var(--color-text-primary)]'
-                          : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)]'
-                        }
-                      `}
-                    >
-                      <span className="w-1 h-1 rounded-full flex-shrink-0" style={{
-                        backgroundColor: session.id === activeTabId ? 'var(--color-brand)' : 'var(--color-text-tertiary)',
-                        opacity: session.id === activeTabId ? 1 : 0.5,
-                      }} />
-                      <span className="truncate flex-1">{session.title || 'Untitled'}</span>
-                      {!session.workDirExists && (
-                        <span
-                          className="text-[10px] text-[var(--color-warning)] flex-shrink-0"
-                          title={session.workDir ?? ''}
-                        >
-                          {t('sidebar.missingDir')}
-                        </span>
-                      )}
-                      <span className="text-[10px] text-[var(--color-text-tertiary)] flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
-                        {formatRelativeTime(session.modifiedAt)}
-                      </span>
-                    </button>
-                  )}
-                </div>
-              ))}
-            </div>
-          )
-        })}
-      </div>
-
-      {/* Settings button at bottom */}
-      <div className="p-3 border-t border-[var(--color-border)]">
-        <NavItem
-          active={activeTabId === SETTINGS_TAB_ID}
-          onClick={() => useTabStore.getState().openTab(SETTINGS_TAB_ID, t('sidebar.settings'), 'settings')}
-          icon={<span className="material-symbols-outlined text-[18px]">settings</span>}
-        >
-          {t('sidebar.settings')}
-        </NavItem>
-      </div>
-
-      {/* Context menu */}
-      {contextMenu && (
-        <div
-          className="fixed z-50 bg-[var(--color-surface)] border border-[var(--color-border)] rounded-[var(--radius-md)] py-1 min-w-[140px]"
-          style={{ left: contextMenu.x, top: contextMenu.y, boxShadow: 'var(--shadow-dropdown)' }}
-        >
-          <button
-            onClick={() => {
-              const session = sessions.find(s => s.id === contextMenu.id)
-              handleStartRename(contextMenu.id, session?.title || '')
-            }}
-            className="w-full px-3 py-1.5 text-xs text-left text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)] transition-colors"
-          >
-            {t('common.rename')}
-          </button>
-          <button
-            onClick={() => handleDelete(contextMenu.id)}
-            className="w-full px-3 py-1.5 text-xs text-left text-[var(--color-error)] hover:bg-[var(--color-surface-hover)] transition-colors"
-          >
-            {t('common.delete')}
-          </button>
-        </div>
-      )}
-    </aside>
-  )
-}
-
-function groupByTime(sessions: SessionListItem[]): Map<TimeGroup, SessionListItem[]> {
-  const groups = new Map<TimeGroup, SessionListItem[]>()
-  const now = new Date()
-  const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime()
-  const startOfYesterday = startOfToday - 86400000
-  const sevenDaysAgo = startOfToday - 7 * 86400000
-  const thirtyDaysAgo = startOfToday - 30 * 86400000
-
-  for (const session of sessions) {
-    const ts = new Date(session.modifiedAt).getTime()
-    let group: TimeGroup
-    if (ts >= startOfToday) group = 'today'
-    else if (ts >= startOfYesterday) group = 'yesterday'
-    else if (ts >= sevenDaysAgo) group = 'last7days'
-    else if (ts >= thirtyDaysAgo) group = 'last30days'
-    else group = 'older'
-
-    if (!groups.has(group)) groups.set(group, [])
-    groups.get(group)!.push(session)
-  }
-
-  return groups
-}
-
-function NavItem({ active, onClick, icon, children }: { active: boolean; onClick: () => void; icon: React.ReactNode; children: React.ReactNode }) {
-  return (
-    <button
-      onClick={onClick}
-      className={`
-        w-full flex items-center gap-2.5 px-3 py-2 text-sm rounded-[var(--radius-md)] transition-colors duration-200
-        ${active
-          ? 'bg-[var(--color-surface-selected)] text-[var(--color-text-primary)] font-medium'
-          : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]'
-        }
-      `}
-    >
-      {icon}
-      {children}
-    </button>
-  )
-}
-
-function formatRelativeTime(dateStr: string): string {
-  const diff = Date.now() - new Date(dateStr).getTime()
-  const min = Math.floor(diff / 60000)
-  if (min < 1) return 'now'
-  if (min < 60) return `${min}m`
-  const hr = Math.floor(min / 60)
-  if (hr < 24) return `${hr}h`
-  const day = Math.floor(hr / 24)
-  if (day < 30) return `${day}d`
-  return `${Math.floor(day / 30)}mo`
-}
-
-function GitHubIcon() {
-  return (
-    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
-      <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z" />
-    </svg>
-  )
-}
-
-function PlusIcon() {
-  return (
-    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <line x1="12" y1="5" x2="12" y2="19" />
-      <line x1="5" y1="12" x2="19" y2="12" />
-    </svg>
-  )
-}
-
-function ClockIcon() {
-  return (
-    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <circle cx="12" cy="12" r="10" />
-      <polyline points="12 6 12 12 16 14" />
-    </svg>
-  )
-}

package/desktop/src/components/layout/StatusBar.tsx

@@ -1,31 +0,0 @@
-import { useSettingsStore } from '../../stores/settingsStore'
-import { useSessionStore } from '../../stores/sessionStore'
-import { useTabStore } from '../../stores/tabStore'
-
-export function StatusBar() {
-  const { currentModel } = useSettingsStore()
-  const activeTabId = useTabStore((s) => s.activeTabId)
-  const projectPath = useSessionStore((s) => s.sessions.find((session) => session.id === activeTabId)?.projectPath)
-
-  const projectName = projectPath
-    ? projectPath.split('-').filter(Boolean).pop() || ''
-    : ''
-
-  return (
-    <div className="h-[var(--statusbar-height)] flex items-center justify-between px-4 border-t border-[var(--color-border)] bg-[var(--color-surface-sidebar)] select-none text-[11px]">
-      <div className="flex items-center gap-3">
-        {projectName && (
-          <span className="text-[var(--color-text-secondary)] font-[var(--font-mono)]">{projectName}</span>
-        )}
-      </div>
-
-      <div className="flex items-center gap-4">
-        {currentModel && (
-          <span className="text-[var(--color-text-tertiary)] font-[var(--font-mono)]">
-            {currentModel.name}
-          </span>
-        )}
-      </div>
-    </div>
-  )
-}

package/desktop/src/components/layout/TabBar.test.tsx

@@ -1,136 +0,0 @@
-import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import '@testing-library/jest-dom'
-
-vi.mock('../../i18n', () => ({
-  useTranslation: () => (key: string) => {
-    const translations: Record<string, string> = {
-      'tabs.close': 'Close',
-      'tabs.closeOthers': 'Close Others',
-      'tabs.closeLeft': 'Close Left',
-      'tabs.closeRight': 'Close Right',
-      'tabs.closeAll': 'Close All',
-      'tabs.closeConfirmTitle': 'Session Running',
-      'tabs.closeConfirmMessage': 'Still running',
-      'tabs.closeConfirmKeep': 'Keep Running',
-      'tabs.closeConfirmStop': 'Stop & Close',
-      'common.cancel': 'Cancel',
-    }
-
-    return translations[key] ?? key
-  },
-}))
-
-vi.mock('./WindowControls', () => ({
-  WindowControls: () => <div data-testid="window-controls" />,
-  showWindowControls: true,
-}))
-
-describe('TabBar', () => {
-  beforeEach(() => {
-    class ResizeObserverMock {
-      constructor(_callback: ResizeObserverCallback) {}
-
-      observe(_target: Element) {}
-
-      disconnect() {}
-      unobserve() {}
-    }
-
-    Object.defineProperty(window, 'ResizeObserver', {
-      configurable: true,
-      value: ResizeObserverMock,
-    })
-
-    vi.resetModules()
-  })
-
-  afterEach(async () => {
-    const { useTabStore } = await import('../../stores/tabStore')
-    const { useChatStore } = await import('../../stores/chatStore')
-
-    useTabStore.setState({ tabs: [], activeTabId: null })
-    useChatStore.setState({
-      sessions: {},
-    } as Partial<ReturnType<typeof useChatStore.getState>>)
-  })
-
-  it('keeps the overflow button flush against window controls on Windows', async () => {
-    const { TabBar } = await import('./TabBar')
-    const { useTabStore } = await import('../../stores/tabStore')
-    const { useChatStore } = await import('../../stores/chatStore')
-
-    useTabStore.setState({
-      tabs: [
-        { sessionId: 'tab-1', title: 'Untitled Session', type: 'session', status: 'idle' },
-        { sessionId: 'tab-2', title: 'Settings', type: 'settings', status: 'idle' },
-        { sessionId: 'tab-3', title: 'hello', type: 'session', status: 'idle' },
-        { sessionId: 'tab-4', title: 'overflow', type: 'session', status: 'idle' },
-      ],
-      activeTabId: 'tab-1',
-    })
-    useChatStore.setState({
-      sessions: {},
-      disconnectSession: vi.fn(),
-    } as Partial<ReturnType<typeof useChatStore.getState>>)
-
-    await act(async () => {
-      render(<TabBar />)
-    })
-
-    const scrollRegion = screen.getByTestId('tab-bar').querySelector('.overflow-x-hidden')
-    expect(scrollRegion).toBeInTheDocument()
-
-    Object.defineProperty(scrollRegion!, 'clientWidth', {
-      configurable: true,
-      get: () => 240,
-    })
-    Object.defineProperty(scrollRegion!, 'scrollWidth', {
-      configurable: true,
-      get: () => 720,
-    })
-    Object.defineProperty(scrollRegion!, 'scrollLeft', {
-      configurable: true,
-      get: () => 0,
-    })
-    Object.defineProperty(scrollRegion!, 'scrollBy', {
-      configurable: true,
-      value: vi.fn(),
-    })
-
-    act(() => {
-      fireEvent.scroll(scrollRegion!)
-    })
-
-    await waitFor(() => {
-      expect(screen.getByTestId('window-controls')).toBeInTheDocument()
-      expect(screen.getByText('chevron_right').closest('button')).toBeInTheDocument()
-    })
-
-    const rightButton = screen.getByText('chevron_right').closest('button')
-    expect(rightButton?.nextElementSibling).toBe(screen.getByTestId('window-controls'))
-  })
-
-  it('marks the tab bar as a native drag region', async () => {
-    const { TabBar } = await import('./TabBar')
-    const { useTabStore } = await import('../../stores/tabStore')
-    const { useChatStore } = await import('../../stores/chatStore')
-
-    useTabStore.setState({
-      tabs: [
-        { sessionId: 'tab-1', title: 'Untitled Session', type: 'session', status: 'idle' },
-      ],
-      activeTabId: 'tab-1',
-    })
-    useChatStore.setState({
-      sessions: {},
-      disconnectSession: vi.fn(),
-    } as Partial<ReturnType<typeof useChatStore.getState>>)
-
-    await act(async () => {
-      render(<TabBar />)
-    })
-
-    expect(screen.getByTestId('tab-bar')).toHaveAttribute('data-tauri-drag-region')
-  })
-})