adding the ui

2026-05-19 17:11:45 -04:00 · 2026-05-19 17:11:45 -04:00 · eaeac63ef3
commit eaeac63ef3
parent 14445e7242
12 changed files with 2638 additions and 0 deletions
--- a/clio-ui/components/Sidebar.jsx
+++ b/clio-ui/components/Sidebar.jsx
@ -0,0 +1,99 @@
+// 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 });