first commit

2026-02-20 17:31:01 +01:00
commit 61ab24490d
160 changed files with 17034 additions and 0 deletions
--- a/frontend/src/components/layout/AppShell.tsx
+++ b/frontend/src/components/layout/AppShell.tsx
@@ -0,0 +1,17 @@
+import { Outlet } from 'react-router-dom';
+import Sidebar from './Sidebar';
+import MobileNav from './MobileNav';
+
+export default function AppShell() {
+  return (
+    <div className="flex min-h-screen text-gray-100">
+      <Sidebar />
+      <div className="flex-1 flex flex-col">
+        <MobileNav />
+        <main className="flex-1 p-4 lg:p-8 animate-fade-in">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/components/layout/MobileNav.tsx
+++ b/frontend/src/components/layout/MobileNav.tsx
@@ -0,0 +1,88 @@
+import { useState } from 'react';
+import { NavLink } from 'react-router-dom';
+import { useAuthStore } from '../../stores/authStore';
+
+const navItems = [
+  { to: '/watchlist', label: 'Watchlist' },
+  { to: '/scanner', label: 'Scanner' },
+  { to: '/rankings', label: 'Rankings' },
+];
+
+export default function MobileNav() {
+  const [open, setOpen] = useState(false);
+  const { role, username, logout } = useAuthStore();
+
+  return (
+    <div className="lg:hidden">
+      <div className="flex items-center justify-between px-4 py-3 glass rounded-none border-x-0 border-t-0">
+        <h1 className="text-lg font-semibold text-gradient">Signal Dashboard</h1>
+        <button
+          onClick={() => setOpen((v) => !v)}
+          className="p-2 text-gray-400 hover:text-gray-200 transition-colors duration-200"
+          aria-label="Toggle menu"
+        >
+          {open ? (
+            <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          ) : (
+            <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+            </svg>
+          )}
+        </button>
+      </div>
+
+      <div
+        className={`overflow-hidden transition-all duration-300 ease-out glass rounded-none border-x-0 border-t-0 ${
+          open ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0 border-b-0'
+        }`}
+      >
+        <nav className="px-3 py-2 space-y-1">
+          {navItems.map(({ to, label }) => (
+            <NavLink
+              key={to}
+              to={to}
+              onClick={() => setOpen(false)}
+              className={({ isActive }) =>
+                `block px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 ${
+                  isActive
+                    ? 'bg-white/[0.08] text-white'
+                    : 'text-gray-400 hover:bg-white/[0.04] hover:text-gray-200'
+                }`
+              }
+            >
+              {label}
+            </NavLink>
+          ))}
+          {role === 'admin' && (
+            <NavLink
+              to="/admin"
+              onClick={() => setOpen(false)}
+              className={({ isActive }) =>
+                `block px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 ${
+                  isActive
+                    ? 'bg-white/[0.08] text-white'
+                    : 'text-gray-400 hover:bg-white/[0.04] hover:text-gray-200'
+                }`
+              }
+            >
+              Admin
+            </NavLink>
+          )}
+        </nav>
+        <div className="px-4 py-3 border-t border-white/[0.06]">
+          {username && (
+            <p className="text-xs text-gray-500 mb-2 truncate">{username}</p>
+          )}
+          <button
+            onClick={() => { logout(); setOpen(false); }}
+            className="w-full text-left px-3 py-2 text-sm text-gray-400 hover:text-gray-200 hover:bg-white/[0.04] rounded-lg transition-all duration-200"
+          >
+            Logout
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -0,0 +1,90 @@
+import { NavLink } from 'react-router-dom';
+import { useQuery } from '@tanstack/react-query';
+import { useAuthStore } from '../../stores/authStore';
+import { check as healthCheck } from '../../api/health';
+
+const navItems = [
+  { to: '/watchlist', label: 'Watchlist', icon: '◈' },
+  { to: '/scanner', label: 'Scanner', icon: '⬡' },
+  { to: '/rankings', label: 'Rankings', icon: '△' },
+];
+
+export default function Sidebar() {
+  const { role, username, logout } = useAuthStore();
+
+  const health = useQuery({
+    queryKey: ['health'],
+    queryFn: healthCheck,
+    refetchInterval: 30_000,
+    retry: 1,
+  });
+
+  const isBackendUp = health.isSuccess;
+
+  return (
+    <aside className="hidden lg:flex lg:flex-col lg:w-64 h-screen sticky top-0 glass border-r border-white/[0.06] rounded-none border-l-0 border-t-0 border-b-0">
+      {/* Logo area */}
+      <div className="px-6 py-6 border-b border-white/[0.06]">
+        <h1 className="text-lg font-semibold text-gradient">Signal Dashboard</h1>
+        <p className="text-[11px] text-gray-500 mt-0.5 tracking-wide">TRADING INTELLIGENCE</p>
+      </div>
+
+      <nav className="flex-1 px-3 py-5 space-y-1">
+        {navItems.map(({ to, label, icon }) => (
+          <NavLink
+            key={to}
+            to={to}
+            className={({ isActive }) =>
+              `flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 ${
+                isActive
+                  ? 'bg-white/[0.08] text-white shadow-lg shadow-blue-500/5 border border-white/[0.08]'
+                  : 'text-gray-400 hover:bg-white/[0.04] hover:text-gray-200 border border-transparent'
+              }`
+            }
+          >
+            <span className="text-base opacity-60">{icon}</span>
+            {label}
+          </NavLink>
+        ))}
+        {role === 'admin' && (
+          <NavLink
+            to="/admin"
+            className={({ isActive }) =>
+              `flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 ${
+                isActive
+                  ? 'bg-white/[0.08] text-white shadow-lg shadow-blue-500/5 border border-white/[0.08]'
+                  : 'text-gray-400 hover:bg-white/[0.04] hover:text-gray-200 border border-transparent'
+              }`
+            }
+          >
+            <span className="text-base opacity-60">⚙</span>
+            Admin
+          </NavLink>
+        )}
+      </nav>
+
+      <div className="px-4 py-4 border-t border-white/[0.06] space-y-3">
+        <div className="flex items-center gap-2 px-1">
+          <span
+            className={`inline-block h-2 w-2 rounded-full ${
+              isBackendUp ? 'bg-emerald-400 shadow-lg shadow-emerald-400/50' : 'bg-red-400 shadow-lg shadow-red-400/50'
+            }`}
+            aria-label={isBackendUp ? 'Backend online' : 'Backend offline'}
+          />
+          <span className="text-xs text-gray-500">
+            {isBackendUp ? 'Backend online' : 'Backend offline'}
+          </span>
+        </div>
+        {username && (
+          <p className="text-xs text-gray-500 truncate px-1">{username}</p>
+        )}
+        <button
+          onClick={logout}
+          className="w-full px-3 py-2 text-sm text-gray-400 hover:text-gray-200 hover:bg-white/[0.04] rounded-lg transition-all duration-200"
+        >
+          Logout
+        </button>
+      </div>
+    </aside>
+  );
+}