From 3b83861dfbd6f7f36835e9724cad1ed81359a04b Mon Sep 17 00:00:00 2001
From: hobokenchicken <dustin@dustin.coffee>
Date: Thu, 23 Apr 2026 10:01:53 -0400
Subject: [PATCH] style: jokey barnyard dashboard with comic sans

---
 frontend/src/app/dashboard/page.tsx | 211 +++++++++++++++++-----------
 frontend/src/app/globals.css        |   4 +-
 2 files changed, 134 insertions(+), 81 deletions(-)

diff --git a/frontend/src/app/dashboard/page.tsx b/frontend/src/app/dashboard/page.tsx
index 8ca3a85..8a5a959 100644
--- a/frontend/src/app/dashboard/page.tsx
+++ b/frontend/src/app/dashboard/page.tsx
@@ -1,8 +1,17 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import {
+	Activity,
+	Egg,
+	ExternalLink,
+	History,
+	LogOut,
+	RefreshCw,
+	Search,
+	Users,
+} from "lucide-react";
 import { useRouter } from "next/navigation";
-import { Terminal } from "lucide-react";
+import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
@@ -49,7 +58,7 @@ export default function DashboardPage() {
 			setWallet(walletRes.data);
 			setPendingRequests(reqRes.data.requests || []);
 		} catch {
-			toast.error("ERR_DASH_LOAD");
+			toast.error("Chickens escaped! Failed to load.");
 		} finally {
 			setIsLoading(false);
 		}
@@ -80,123 +89,167 @@ export default function DashboardPage() {
 
 	if (isLoading)
 		return (
-			<div className="flex min-h-screen items-center justify-center bg-background font-mono text-primary">
-				_LOADING_COOP_V1.0.4
+			<div className="flex min-h-screen flex-col items-center justify-center bg-background text-primary gap-4 font-display">
+				<Egg className="h-12 w-12 animate-bounce" />
+				<span>Sitting on eggs...</span>
 			</div>
 		);
 
 	return (
-		<div className="min-h-screen bg-background font-mono text-foreground p-2 sm:p-4 selection:bg-primary selection:text-primary-foreground">
-			<div className="mx-auto max-w-7xl border-2 border-foreground bg-card shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]">
-				<div className="flex items-center justify-between border-b-2 border-foreground bg-primary p-2 text-primary-foreground">
-					<div className="flex items-center gap-2 font-bold uppercase tracking-tighter">
-						<Terminal className="h-4 w-4" />
-						<span>COOP_STATION_V1 // {new Date().toLocaleDateString()}</span>
+		<div className="min-h-screen bg-background p-4 sm:p-6 lg:p-8 font-sans">
+			<div className="mx-auto max-w-6xl space-y-6">
+				{/* Barn Header */}
+				<div className="flex flex-col items-center justify-between gap-4 rounded-3xl border-4 border-primary bg-accent/20 p-6 shadow-[8px_8px_0px_0px_rgba(192,111,74,1)] md:flex-row">
+					<div className="flex items-center gap-4">
+						<div className="rounded-full bg-primary p-3 text-primary-foreground shadow-lg">
+							<Egg className="h-8 w-8" />
+						</div>
+						<div>
+							<h1 className="font-display text-4xl leading-none text-primary uppercase italic tracking-tighter">
+								The Big Coop
+							</h1>
+							<p className="text-sm font-bold text-muted-foreground">
+								Welcome back to the flock! 🐔
+							</p>
+						</div>
 					</div>
-					<div className="flex items-center gap-4 text-xs">
-						<button
-							type="button"
-							onClick={handleRefresh}
-							className="hover:underline"
-						>
-							[REFRESH]
-						</button>
-						<button
-							type="button"
-							onClick={handleLogout}
-							className="hover:underline"
-						>
-							[LOGOUT]
-						</button>
-					</div>
-				</div>
 
-				<div className="grid grid-cols-2 gap-0 border-b-2 border-foreground sm:grid-cols-4">
-					<div className="border-r-2 border-foreground p-3">
-						<div className="text-[10px] uppercase text-muted-foreground underline">
-							User_Balance
-						</div>
-						<div className="text-xl font-black">
-							{formatNumber(wallet?.balance || 0)} $COOP
-						</div>
-					</div>
-					<div className="border-r-2 border-foreground p-3 bg-secondary/20">
-						<div className="text-[10px] uppercase text-muted-foreground underline">
-							In_Transit
-						</div>
-						<div className="text-xl font-black">
-							{pendingRequests.length} PKTS
-						</div>
-					</div>
-					<div className="border-r-2 border-foreground p-3 hidden sm:block">
-						<div className="text-[10px] uppercase text-muted-foreground underline">
-							Sys_Costs
-						</div>
-						<div className="text-xl font-black">
-							{requestCosts.movie}/{requestCosts.tv}
-						</div>
-					</div>
-					<div className="p-3 bg-primary/10">
+					<div className="flex flex-wrap items-center justify-center gap-2">
 						<Button
 							onClick={() => setIsSearchModalOpen(true)}
-							className="h-full w-full rounded-none border-2 border-foreground bg-primary font-bold uppercase shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[1px] hover:translate-y-[1px] hover:shadow-none transition-none"
+							className="rounded-full bg-primary px-6 font-bold text-lg hover:scale-105 transition-transform"
 						>
-							[+] NEW_REQ
+							<Search className="mr-2 h-5 w-5" />
+							PECK FOR FEED
+						</Button>
+						<Button
+							variant="outline"
+							onClick={handleRefresh}
+							className="rounded-full border-2 border-primary bg-background font-bold text-primary hover:bg-primary/10"
+						>
+							<RefreshCw className="h-5 w-5" />
+						</Button>
+						<Button
+							variant="ghost"
+							onClick={handleLogout}
+							className="rounded-full font-bold text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
+						>
+							<LogOut className="h-5 w-5" />
 						</Button>
 					</div>
 				</div>
 
-				<div className="grid lg:grid-cols-[1fr_300px]">
-					<div className="border-r-2 border-foreground min-h-[600px]">
+				{/* Nest Stats */}
+				<div className="grid gap-4 sm:grid-cols-3">
+					<div className="group relative rounded-3xl border-4 border-foreground bg-card p-6 shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-2px] hover:translate-y-[-2px] hover:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] transition-all">
+						<div className="text-xs font-black uppercase tracking-widest text-muted-foreground">
+							Your Nest Egg
+						</div>
+						<div className="mt-2 text-4xl font-black text-primary">
+							{formatNumber(wallet?.balance || 0)}{" "}
+							<span className="text-sm">$COOP</span>
+						</div>
+						<div className="absolute top-4 right-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">
+							🥚
+						</div>
+					</div>
+
+					<div className="group relative rounded-3xl border-4 border-foreground bg-secondary p-6 shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-2px] hover:translate-y-[-2px] hover:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] transition-all">
+						<div className="text-xs font-black uppercase tracking-widest text-secondary-foreground/60">
+							Eggs Cooking
+						</div>
+						<div className="mt-2 text-4xl font-black text-secondary-foreground">
+							{pendingRequests.length} <span className="text-sm">Requests</span>
+						</div>
+						<div className="absolute top-4 right-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">
+							🔥
+						</div>
+					</div>
+
+					<div className="group relative rounded-3xl border-4 border-foreground bg-accent p-6 shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-2px] hover:translate-y-[-2px] hover:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] transition-all">
+						<div className="text-xs font-black uppercase tracking-widest text-accent-foreground/60">
+							Market Price
+						</div>
+						<div className="mt-2 text-2xl font-black text-accent-foreground">
+							{requestCosts.movie} <span className="text-sm">/</span>{" "}
+							{requestCosts.tv}
+						</div>
+						<div className="text-[10px] font-bold text-accent-foreground/50 uppercase">
+							Movie / TV Series
+						</div>
+						<div className="absolute top-4 right-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">
+							🌽
+						</div>
+					</div>
+				</div>
+
+				{/* Main Yard */}
+				<div className="grid gap-8 lg:grid-cols-[1fr_320px]">
+					<div className="rounded-[3rem] border-4 border-foreground bg-card shadow-[12px_12px_0px_0px_rgba(0,0,0,0.1)]">
 						<Tabs defaultValue="history" className="w-full">
-							<TabsList className="flex w-full rounded-none border-b-2 border-foreground bg-muted p-0">
+							<TabsList className="grid w-full grid-cols-3 gap-2 bg-muted/30 p-3 rounded-t-[2.75rem] border-b-4 border-foreground">
 								<TabsTrigger
 									value="history"
-									className="flex-1 rounded-none border-r-2 border-foreground py-2 font-bold uppercase data-[state=active]:bg-background data-[state=active]:text-primary data-[state=active]:shadow-none transition-none"
+									className="rounded-full py-3 font-black uppercase data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:scale-105 transition-all"
 								>
-									HIST
+									<History className="mr-2 h-4 w-4" /> WATCHED
 								</TabsTrigger>
 								<TabsTrigger
 									value="requests"
-									className="flex-1 rounded-none border-r-2 border-foreground py-2 font-bold uppercase data-[state=active]:bg-background data-[state=active]:text-primary data-[state=active]:shadow-none transition-none"
+									className="rounded-full py-3 font-black uppercase data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:scale-105 transition-all"
 								>
-									REQS
+									<ExternalLink className="mr-2 h-4 w-4" /> ORDERS
 								</TabsTrigger>
 								<TabsTrigger
 									value="leaderboard"
-									className="flex-1 rounded-none py-2 font-bold uppercase data-[state=active]:bg-background data-[state=active]:text-primary data-[state=active]:shadow-none transition-none"
+									className="rounded-full py-3 font-black uppercase data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:scale-105 transition-all"
 								>
-									FLCK
+									<Users className="mr-2 h-4 w-4" /> THE FLOCK
 								</TabsTrigger>
 							</TabsList>
-							<div className="p-4">
-								<TabsContent value="history" className="mt-0">
+							<div className="p-6">
+								<TabsContent
+									value="history"
+									className="mt-0 focus-visible:outline-none"
+								>
 									<WatchHistory />
 								</TabsContent>
-								<TabsContent value="requests" className="mt-0">
+								<TabsContent
+									value="requests"
+									className="mt-0 focus-visible:outline-none"
+								>
 									<RequestHistory onRefresh={handleRefresh} />
 								</TabsContent>
-								<TabsContent value="leaderboard" className="mt-0">
+								<TabsContent
+									value="leaderboard"
+									className="mt-0 focus-visible:outline-none"
+								>
 									<Leaderboard />
 								</TabsContent>
 							</div>
 						</Tabs>
 					</div>
 
-					<div className="bg-muted/30">
-						<div className="border-b-2 border-foreground bg-secondary/40 p-2 font-bold uppercase text-[10px] tracking-widest">
-							&gt;&gt; SYSTEM_LOG
+					<div className="space-y-6">
+						<div className="rounded-3xl border-4 border-foreground bg-accent/10 p-6 shadow-sm">
+							<div className="mb-4 flex items-center gap-2">
+								<Activity className="h-5 w-5 text-primary" />
+								<h3 className="font-display text-2xl font-bold uppercase italic text-primary">
+									Barn Noise
+								</h3>
+							</div>
+							<div className="max-h-[500px] overflow-y-auto pr-2 scrollbar-hide">
+								<ActivityFeed />
+							</div>
 						</div>
-						<div className="p-2 text-[11px] leading-tight">
-							<ActivityFeed />
+
+						<div className="rounded-3xl border-4 border-primary bg-primary/5 p-6 text-center italic">
+							<p className="text-sm font-bold text-primary">
+								"The early bird gets the 4K stream."
+							</p>
 						</div>
 					</div>
 				</div>
-
-				<div className="border-t-2 border-foreground bg-muted p-1 text-[9px] uppercase flex justify-between px-2">
-					<span>COOP OS // ALL_SYSTEMS_GO</span>
-					<span>LATENCY: 42MS // BH: {wallet?.totalEarned || 0}</span>
-				</div>
 			</div>
 
 			<SearchRequestModal
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 2dd53b6..e01a5e3 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -1,8 +1,8 @@
 @import "tailwindcss";
 
 @theme {
-  --font-sans: "JetBrains Mono", "Fira Code", monospace;
-  --font-display: "JetBrains Mono", monospace;
+  --font-sans: "Comic Sans MS", "Chalkboard SE", "Comic Neue", sans-serif;
+  --font-display: "Comic Sans MS", "Chalkboard SE", "Comic Neue", sans-serif;
 
   --color-border: hsl(var(--border));
   --color-input: hsl(var(--input));