MailUI4Agents/client/electron/src/components/NarrowNav.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,
  ContactsIcon,
  PersonIcon,
  CalendarIcon
} from './icons';
import { ConnectionIndicator } from './ConnectionIndicator';
import { countPendingPermissions, splitByPermission } from '../lib/mailGroups';

/**
 * 窄屏底部导航。
 *
 * 移动端把主导航放底部而不是顶部：拇指够得到。
 * 宽屏用的是左侧竖条（Sidebar），两者共用 uiStore 的 viewMode，
 * 所以从窄拖到宽不会丢失当前位置。
 *
 * 这里只放最常用的几项 + 一个「更多」入口（打开抽屉式 Sidebar）——
 * 底部塞满图标会挤成一排看不懂的小方块。
 */
const items: {
  short: string;
  mode: ViewMode;
  /** 哪些 viewMode 算这一项选中（「通信」含三个子页签） */
  modes?: ViewMode[];
  Icon: (p: { className?: string }) => JSX.Element;
  adminOnly?: boolean;
}[] = [
  // 与桌面侧栏同一套合并（用户：「导航项就只剩通信，日历，联系人」）：
  // 收件/发件/授权 = 一项「通信」，进去由 CommTabs 区分；管理移到「我的」页底部。
  { short: '通信', mode: 'inbox', modes: ['inbox', 'sent', 'permissions'], Icon: InboxIcon },
    { short: '日历', mode: 'calendar', Icon: CalendarIcon },
    { short: '联系人', mode: 'contacts', Icon: ContactsIcon }
];

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

  const inbox = useMailStore(s => s.inbox);
  // 与 Sidebar 同一判据：权限请求归「授权」，不算进收件箱未读
  const { normal, permissions } = splitByPermission(inbox);
  const unread = normal.filter(m => m.status === 'unread').length;
  const pendingPerms = countPendingPermissions(permissions);
  const contacts = useContactStore(s => s.contacts);

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

  const visible = items.filter(n => !n.adminOnly || isAdmin);
  // 点「通信」回到上次用的子页签（与桌面侧栏同一语义）
  const commTab = useUIStore(s => s.commTab);

  return (
    <nav
      // 悬浮玻璃条的样式全在 index.css 的 .narrow-nav 里（含安全区外边距）：
      // 这里不再写 border-t/bg-chrome-900 —— 那是"贴底通栏"的写法，与悬浮冲突
      className="narrow-nav shrink-0 flex items-stretch"
    >
      {visible.map(({ short, mode, modes, Icon }) => {
        const itemModes = modes ?? [mode];
        // 详情栏打开时不高亮任何导航项：此刻用户看的是某封邮件
        const active =
          itemModes.includes(viewMode) && !composing && narrowPane === 'list';
        // 「通信」合并了三项：徽标 = 未读 + 待决策（授权信息不能因为合并而消失）
        const isComm = itemModes.includes('inbox');
        const badge = isComm
          ? unread + pendingPerms
          : itemModes.includes('contacts')
          ? contacts.length
          : 0;
        const badgeTone = isComm && pendingPerms > 0 ? 'perm' : isComm ? 'unread' : 'plain';
        return (
          <button
            key={short}
            onClick={() => setViewMode(isComm ? commTab : mode)}
            data-active={active}
            className="nav-item relative flex-1 py-2 flex flex-col items-center justify-center gap-0.5"
          >
            <Icon />
            <span className="text-3xs leading-none">{short}</span>
            {badge > 0 && (
              <span
                className={`absolute top-1 right-[22%] min-w-[15px] h-[15px] px-1 rounded-full text-3xs font-bold flex items-center justify-center ${
                  badgeTone === 'unread'
                    ? 'bg-red-600 text-white'
                    : badgeTone === 'perm'
                    ? 'bg-orange-700 text-white'
                    : 'bg-chrome-600 text-chrome-100'
                }`}
              >
                {badge > 99 ? '99+' : badge}
              </span>
            )}
            {active && <span className="absolute top-0 left-1/4 right-1/4 h-0.5 bg-blue-400" />}
          </button>
        );
      })}
      {/* 新建改到列表栏的悬浮圆钮（ComposeFab），与桌面一致 */}

      <button
        onClick={() => setViewMode('account')}
        data-active={viewMode === 'account' && !composing}
        className="nav-item flex-1 py-2 flex flex-col items-center justify-center gap-0.5"
      >
        <div className="relative">
          <PersonIcon />
          <span className="absolute -top-0.5 -right-1.5">
            <ConnectionIndicator />
          </span>
        </div>
        <span className="text-3xs leading-none">我的</span>
      </button>
    </nav>
  );
}