dtoro/micronomicon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: styles

Browse Source
This commit is contained in:
authentik Default Admin
2026-04-01 23:07:00 +02:00
parent a95594f446
commit 462d6bf289
11 changed files with 823 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/src/components/shared/AppShell.tsx
View File

@@ -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>

120
frontend/src/components/shared/NavBar.tsx
View File

@@ -1,90 +1,46 @@
import { useState } from "react";
import { NavLink } from "react-router-dom";
import { toast } from "sonner";
import { RotateCcw } from "lucide-react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { useNavigate } from "react-router-dom";
import baldothSvg from "@/assets/baldoth.min.svg";
const navLink = ({ isActive }: { isActive: boolean }) =>
cn(
"px-3 py-1.5 text-sm rounded-md transition-colors",
isActive
? "bg-accent text-accent-foreground font-medium"
: "text-muted-foreground hover:text-foreground hover:bg-accent"
);
const TITLE = ` █████ ██ ██
██████ █████ █████ █
██ █ █ █████ █████ ███
█ █ █ █ ██ █ ██ █
█ █ █ █ ███ ████ ████ ████
██ ██ █ █ ███ ████ ████ ████ █ █ ███ ████ ████ █ ███ ████ ████ ████ ███ ████ █ ███ ████ ████
██ ██ █ █ ███ █ ███ █ ██ ████ █ ████ ████ ████ █ █ ████ ███ ████ ███ █ ███ █ ███ █ █ ████ ████ ████ █
██ ██ █ █ ██ █ ████ ██ ██ ██ ██ ████ ██ ██ ██ ████ ████ ██ █ ████ ██ ██ ██ ████
██ ██ █ █ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██ ██ █ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
█ ██ █ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
█ █ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
████ █ ██ ██ ███ █ ███ ██████ ██ ██ ██████ ██ ██ ██ ██ ███ █ ██████ ██ ██
█ █████ ██ ███ █ ███████ ███ ████ ███ ███ ████ ███ ███ ███ ███ █ ███████ ████ ███ ███
█ ██ ███ █████ ███ ███ ███ ███ ███ ███ █████ ███ ███
█
█
██`;
export default function NavBar() {
const [restartOpen, setRestartOpen] = useState(false);
const [restarting, setRestarting] = useState(false);
const handleRestart = async () => {
setRestarting(true);
try {
const res = await fetch("/api/restart", { method: "POST" });
if (!res.ok) throw new Error(await res.text());
toast.success("NomadNet restarted");
} catch (e) {
toast.error(`Restart failed: ${e}`);
} finally {
setRestarting(false);
setRestartOpen(false);
}
};
const navigate = useNavigate();
return (
<nav className="flex items-center gap-1 px-4 h-12 border-b bg-card shrink-0">
<span className="mr-6 text-primary font-bold tracking-widest" title="Micronomicon"
style={{ fontVariantLigatures: "none" }}
>╠═ MICRONOMICON ═╣</span>
<NavLink to="/" end className={navLink}>
Dashboard
</NavLink>
<NavLink to="/editor/new" className={navLink}>
New Page
</NavLink>
<NavLink to="/graph" className={navLink}>
Graph
</NavLink>
<div className="flex-1" />
<Button
variant="outline"
size="sm"
disabled={restarting}
onClick={() => setRestartOpen(true)}
<div className="flex flex-col items-center pt-6 pb-3 shrink-0 gap-2">
<button
onClick={() => navigate("/")}
className="hover:opacity-80 transition-opacity cursor-pointer flex flex-col items-center gap-2"
title="Go to Dashboard"
>
<RotateCcw className="w-4 h-4 mr-2" />
Restart NomadNet
</Button>
<AlertDialog open={restartOpen} onOpenChange={setRestartOpen}>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Restart NomadNet?</AlertDialogTitle>
<AlertDialogDescription>
This will briefly interrupt mesh network connectivity.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction onClick={handleRestart}>
Restart
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</nav>
<div
className="h-28 w-28"
style={{
backgroundColor: "var(--primary)",
opacity: 0.5,
mask: `url(${baldothSvg}) center/contain no-repeat`,
WebkitMask: `url(${baldothSvg}) center/contain no-repeat`,
}}
/>
<pre className="text-[4px] leading-[1] tracking-tighter select-none text-primary/40">{TITLE}</pre>
</button>
</div>
);
}