clio/clio-ui/components/Sidebar.jsx

// Sidebar navigation component
const NAV_ITEMS = [
  { id: 'dashboard', label: 'Dashboard', icon: '▦' },
  { id: 'calendar', label: 'Calendar', icon: '◫' },
  { id: 'search', label: 'Search', icon: '⌕' },
  { id: 'highlights', label: 'Highlights', icon: '◈' },
];

function Sidebar({ view, setView, data }) {
  const totalGB = (data.recordings.reduce((a, r) => a + r.fileSizeMB, 0) / 1024).toFixed(1);
  const totalCount = data.recordings.length;

  return (
    <div style={{
      width: 'var(--sidebar-w)', flexShrink: 0,
      background: 'var(--bg2)', borderRight: '1px solid var(--border)',
      display: 'flex', flexDirection: 'column', height: '100%',
    }}>
      {/* Logo */}
      <div style={{ padding: '18px 16px 14px', borderBottom: '1px solid var(--border)' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text3)', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 4 }}>RecordingsViewer</div>
        <div style={{ display: 'flex', gap: 12, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text2)' }}>
          <span><span style={{ color: 'var(--amber)' }}>{totalCount}</span> files</span>
          <span><span style={{ color: 'var(--amber)' }}>{totalGB}</span> GB</span>
        </div>
      </div>

      {/* Nav */}
      <nav style={{ flex: 1, padding: '10px 0' }}>
        {NAV_ITEMS.map(item => (
          <button
            key={item.id}
            onClick={() => setView(item.id)}
            style={{
              width: '100%', display: 'flex', alignItems: 'center', gap: 10,
              padding: '9px 16px', textAlign: 'left',
              background: view === item.id ? 'var(--amber-glow)' : 'none',
              color: view === item.id ? 'var(--amber)' : 'var(--text2)',
              borderLeft: view === item.id ? '2px solid var(--amber)' : '2px solid transparent',
              fontSize: 13, fontWeight: view === item.id ? 500 : 400,
              transition: 'all 0.12s',
            }}
          >
            <span style={{ fontSize: 15, fontFamily: 'var(--font-mono)', opacity: 0.8 }}>{item.icon}</span>
            {item.label}
          </button>
        ))}
      </nav>

      {/* Device status */}
      <DeviceStatus devices={data.devices} />
    </div>
  );
}

function DeviceStatus({ devices }) {
  const now = new Date();

  function hoursSince(date) {
    return (now - date) / (1000 * 60 * 60);
  }

  function fmtSince(date) {
    const h = hoursSince(date);
    if (h < 1) return `${Math.round(h * 60)}m ago`;
    if (h < 24) return `${Math.round(h)}h ago`;
    return `${Math.round(h / 24)}d ago`;
  }

  return (
    <div style={{ borderTop: '1px solid var(--border)', padding: '12px 16px 16px' }}>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text3)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 10 }}>Devices</div>
      {Object.entries(devices).map(([key, dev]) => {
        const hours = hoursSince(dev.lastSeen);
        const bad = hours > 24;
        const color = bad ? 'var(--red)' : 'var(--green)';
        const dotColor = bad ? 'var(--red)' : 'var(--green)';
        return (
          <div key={key} style={{ marginBottom: 10 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 2 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <span style={{
                  width: 6, height: 6, borderRadius: '50%', background: dotColor,
                  boxShadow: bad ? 'none' : `0 0 4px ${dotColor}`,
                  flexShrink: 0, display: 'inline-block',
                }}></span>
                <span style={{ fontSize: 12, color: 'var(--text)', textTransform: 'capitalize' }}>{key}</span>
              </div>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color }}>{fmtSince(dev.lastSeen)}</span>
            </div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text3)', paddingLeft: 12 }}>{dev.model}</div>
          </div>
        );
      })}
    </div>
  );
}

Object.assign(window, { Sidebar, DeviceStatus });