zclaw_openfang/desktop/src/components/SimpleSidebar.tsx

/**
 * SimpleSidebar - Trae Solo 风格的简洁侧边栏
 *
 * 仅显示：对话列表
 * 底部：模式切换 + 设置
 */

import { useState } from 'react';
import {
  Settings, LayoutGrid, SquarePen,
  Search, X,
} from 'lucide-react';
import { ConversationList } from './ConversationList';
import { useChatStore } from '../store/chatStore';

interface SimpleSidebarProps {
  onOpenSettings?: () => void;
  onToggleMode?: () => void;
}

export function SimpleSidebar({ onOpenSettings, onToggleMode }: SimpleSidebarProps) {
  const [searchQuery, setSearchQuery] = useState('');
  const newConversation = useChatStore((s) => s.newConversation);

  const handleNewConversation = () => {
    newConversation();
  };

  return (
    <aside className="w-64 sidebar-bg border-r border-[#e8e6e1] dark:border-gray-800 flex flex-col h-full shrink-0">
      {/* Logo area */}
      <div className="h-14 flex items-center px-4 border-b border-[#e8e6e1]/50 dark:border-gray-800">
        <span className="text-lg font-semibold tracking-tight bg-gradient-to-r from-orange-500 to-amber-500 bg-clip-text text-transparent">
          ZCLAW
        </span>
        <button
          onClick={handleNewConversation}
          className="ml-auto p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-md transition-colors text-gray-600 dark:text-gray-400"
          title="新对话"
        >
          <SquarePen className="w-4 h-4" />
        </button>
      </div>

      {/* 内容区域 */}
      <div className="flex-1 overflow-hidden">
        <div className="p-2 h-full overflow-y-auto">
          {/* 新对话按钮 */}
          <button
            onClick={handleNewConversation}
            className="w-full flex items-center gap-3 px-3 py-2 rounded-lg bg-black/5 dark:bg-white/5 text-sm font-medium text-gray-900 dark:text-gray-100 hover:bg-black/10 dark:hover:bg-white/10 transition-colors mb-2"
          >
            <SquarePen className="w-4 h-4" />
            新对话
          </button>
          {/* 搜索框 */}
          <div className="relative mb-2">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-4 h-4" />
            <input
              type="text"
              placeholder="搜索对话..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="w-full pl-9 pr-8 py-1.5 bg-white/60 dark:bg-gray-800 border border-[#e8e6e1] dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:border-gray-400 transition-all text-gray-700 dark:text-gray-300 placeholder-gray-400"
            />
            {searchQuery && (
              <button
                onClick={() => setSearchQuery('')}
                className="absolute right-2 top-1/2 -translate-y-1/2 p-1 hover:bg-gray-200 dark:hover:bg-gray-700 rounded text-gray-400"
              >
                <X className="w-3 h-3" />
              </button>
            )}
          </div>
          <ConversationList searchQuery={searchQuery} />
        </div>
      </div>

      {/* 底部操作栏 */}
      <div className="p-2 border-t border-[#e8e6e1] dark:border-gray-700 space-y-1">
        <button
          onClick={onToggleMode}
          className="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-gray-600 dark:text-gray-400 hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
        >
          <LayoutGrid className="w-4 h-4" />
          <span>专业模式</span>
        </button>
        <button
          onClick={onOpenSettings}
          aria-label="打开设置"
          title="设置和更多"
          className="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-gray-600 dark:text-gray-400 hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
        >
          <Settings className="w-4 h-4" />
          <span>设置</span>
        </button>
      </div>
    </aside>
  );
}