MailUI4Agents/web/src/components/Sidebar.tsx

import { useUIStore, type ViewMode } from '../stores/uiStore';
import { useMailStore } from '../stores/mailStore';
import { useContactStore } from '../stores/contactStore';
import { useAuthStore } from '../stores/authStore';
import {
  InboxIcon,
  SentIcon,
  ContactsIcon,
  ComposeIcon,
  UsersIcon,
  LogoutIcon
} from './icons';
import { ConnectionIndicator } from './ConnectionIndicator';

const navItems: {
  short: string;
  title: string;
  mode: ViewMode;
  Icon: (p: { className?: string }) => JSX.Element;
  adminOnly?: boolean;
}[] = [
  { short: '收件', title: '收件箱', mode: 'inbox', Icon: InboxIcon },
  { short: '发件', title: '发件箱', mode: 'sent', Icon: SentIcon },
  { short: '联系', title: '联系人', mode: 'contacts', Icon: ContactsIcon },
  { short: '用户', title: '用户管理', mode: 'admin', Icon: UsersIcon, adminOnly: true }
];

export default function Sidebar() {
  const viewMode = useUIStore(s => s.viewMode);
  const setViewMode = useUIStore(s => s.setViewMode);
  const composing = useUIStore(s => s.composing);
  const startCompose = useUIStore(s => s.startCompose);

  const inbox = useMailStore(s => s.inbox);
  const unread = inbox.filter(m => m.status === 'unread').length;
  const contacts = useContactStore(s => s.contacts);

  const user = useAuthStore(s => s.user);
  const logout = useAuthStore(s => s.logout);
  const isAdmin = user?.role === 'admin';

  return (
    <div className="w-[60px] h-full shrink-0 flex flex-col items-center py-3 gap-1 bg-slate-900"
      style={{ paddingBottom: 'calc(0.75rem + env(safe-area-inset-bottom))' }}
    >
      {navItems
        .filter(n => !n.adminOnly || isAdmin)
        .map(({ short, title, mode, Icon }) => {
          const active = viewMode === mode && !composing;
          const badge = mode === 'inbox' ? unread : mode === 'contacts' ? contacts.length : 0;
          return (
            <button
              key={mode}
              onClick={() => setViewMode(mode)}
              title={title}
              className={`relative w-12 h-12 rounded-lg flex flex-col items-center justify-center gap-0.5 transition-colors ${
                active
                  ? 'bg-slate-700 text-white'
                  : 'text-slate-400 hover:bg-slate-800 hover:text-slate-100'
              }`}
            >
              <Icon />
              <span className="text-[9px] leading-none">{short}</span>
              {badge > 0 && (
                <span
                  className={`absolute top-0.5 right-1 min-w-[15px] h-[15px] px-1 rounded-full text-[9px] font-bold flex items-center justify-center ${
                    mode === 'inbox' ? 'bg-red-500 text-white' : 'bg-slate-600 text-slate-100'
                  }`}
                >
                  {badge > 99 ? '99+' : badge}
                </span>
              )}
            </button>
          );
        })}

      <div className="flex-1" />

      <button
        onClick={() => startCompose()}
        title="新建邮件"
        className={`w-12 h-12 rounded-lg flex flex-col items-center justify-center gap-0.5 text-white transition-colors ${
          composing ? 'bg-blue-500 ring-2 ring-blue-300' : 'bg-blue-600 hover:bg-blue-500'
        }`}
      >
        <ComposeIcon />
        <span className="text-[9px] leading-none">新建</span>
      </button>

      <div className="mt-2 pt-2 w-full flex flex-col items-center gap-1 border-t border-slate-700">
        <button
          onClick={() => setViewMode('account')}
          title={`${user?.display_name || user?.username}（点击管理账号）`}
          className={`relative w-9 h-9 rounded-full flex items-center justify-center text-[11px] font-semibold transition-colors ${
            viewMode === 'account' && !composing
              ? 'bg-blue-500 text-white'
              : 'bg-slate-700 text-slate-200 hover:bg-slate-600'
          }`}
        >
          {(user?.display_name || user?.username || '?').slice(0, 2)}
          {/* 连接状态点：不遮挡文字，贴在右下角 */}
          <span className="absolute -bottom-0.5 -right-0.5">
            <ConnectionIndicator />
          </span>
        </button>
        <button
          onClick={logout}
          title="退出登录"
          className="w-9 h-7 rounded flex items-center justify-center text-slate-400 hover:text-white hover:bg-slate-800"
        >
          <LogoutIcon className="w-3.5 h-3.5" />
        </button>
      </div>
    </div>
  );
}