Sidebar.tsx

import { WalletMeta } from '../api';

type TabKey = 'overview' | 'utxos' | 'addresses' | 'history' | 'network';

interface SidebarProps {
  wallets: WalletMeta[];
  currentWalletName: string | undefined;
  onSelectWallet: (path: string) => void;
  activeTab: TabKey;
  onTabChange: (tab: TabKey) => void;
  onNewWallet: () => void;
  utxoCount?: number;
}

const navItems: { key: TabKey; label: string; icon: string }[] = [
  { key: 'overview', label: 'Overview', icon: '◉' },
  { key: 'utxos', label: 'UTXOs', icon: '◇' },
  { key: 'addresses', label: 'Addresses', icon: '◈' },
  { key: 'history', label: 'History', icon: '◷' },
  { key: 'network', label: 'Network', icon: '⬡' },
];

export default function Sidebar({
  wallets,
  currentWalletName,
  onSelectWallet,
  activeTab,
  onTabChange,
  onNewWallet,
  utxoCount,
}: SidebarProps) {
  return (
    <aside className="sidebar">
      <div className="sidebar-header">
        <div className="sidebar-logo">
          <div className="sidebar-logo-icon">₿</div>
          <div>
            <div className="sidebar-logo-text">BTC Wallet</div>
            <div className="sidebar-logo-sub">Self-custody</div>
          </div>
        </div>
      </div>

      <div className="sidebar-section">
        <div className="sidebar-section-title">Navigation</div>
        <ul className="sidebar-nav">
          {navItems.map(item => (
            <li key={item.key}>
              <button
                className={`sidebar-nav-item ${activeTab === item.key ? 'active' : ''}`}
                onClick={() => onTabChange(item.key)}
              >
                <span className="sidebar-nav-icon">{item.icon}</span>
                {item.label}
                {item.key === 'utxos' && utxoCount && utxoCount > 0 && (
                  <span className="sidebar-nav-badge">{utxoCount}</span>
                )}
              </button>
            </li>
          ))}
        </ul>
      </div>

      {wallets.length > 0 && (
        <div className="sidebar-section" style={{ marginTop: 'auto', borderTop: '1px solid var(--border)', paddingTop: '16px' }}>
          <div className="sidebar-section-title" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '0 8px', marginBottom: '8px' }}>
            <span>Wallets</span>
            <span
              style={{ fontSize: '10px', color: 'var(--text-tertiary)', cursor: 'pointer' }}
              onClick={onNewWallet}
            >
              + New
            </span>
          </div>
          <div className="sidebar-wallet-list">
            {wallets.map(w => (
              <button
                key={w.path}
                className={`sidebar-wallet-item ${currentWalletName === w.name ? 'active' : ''}`}
                onClick={() => onSelectWallet(w.path)}
              >
                <span className={`sidebar-wallet-dot ${w.encrypted ? 'locked' : ''}`} />
                <span className="sidebar-wallet-name">{w.name}</span>
                <span className="sidebar-wallet-fp">{w.fingerprint}</span>
              </button>
            ))}
          </div>
        </div>
      )}
    </aside>
  );
}