feat: styles

frontend/src/components/shared/AppShell.tsx

@@ -1,14 +1,43 @@
-import type { ReactNode } from "react";
+import { useEffect, useState, type ReactNode } from "react";
 import NavBar from "./NavBar";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { Toaster } from "@/components/ui/sonner";
 
+function toRoman(n: number): string {
+  const vals = [1000,900,500,400,100,90,50,40,10,9,5,4,1];
+  const syms = ["M","CM","D","CD","C","XC","L","XL","X","IX","V","IV","I"];
+  let r = "";
+  for (let i = 0; i < vals.length; i++) {
+    while (n >= vals[i]) { r += syms[i]; n -= vals[i]; }
+  }
+  return r;
+}
+
+function RomanClock() {
+  const [time, setTime] = useState(new Date());
+  useEffect(() => {
+    const id = setInterval(() => setTime(new Date()), 1000);
+    return () => clearInterval(id);
+  }, []);
+  const h = time.getHours();
+  const m = time.getMinutes();
+  const s = time.getSeconds();
+  return (
+    <span>{toRoman(h || 12)}:{toRoman(m || 1).padStart(2, " ")}:{toRoman(s || 1).padStart(3, " ")}</span>
+  );
+}
+
 export default function AppShell({ children }: { children: ReactNode }) {
   return (
     <TooltipProvider>
       <div className="flex flex-col h-screen bg-background text-foreground">
         <NavBar />
         <main className="flex-1 overflow-auto">{children}</main>
+        <footer className="flex items-center justify-center gap-3 text-[10px] text-muted-foreground py-4 shrink-0 tracking-widest uppercase">
+          <span>Built with hubris by the demiurge · MMXXVI</span>
+          <span className="text-muted-foreground/50">│</span>
+          <span className="font-mono"><RomanClock /></span>
+        </footer>
       </div>
       <Toaster />
     </TooltipProvider>