From 6c91f7fef04d858b8a552d968ced3ab51357fb7c Mon Sep 17 00:00:00 2001
From: hurkicorgi <al0826503@gmail.com>
Date: Mon, 13 Apr 2026 04:58:25 -0600
Subject: [PATCH] UX/UI/perf pass: admin tabs, theme toggle, log polish, mod
 search, JAR cache

- Admin page split into tabs (Server/Players/Chat/Mods/Backups/Logs) with
  hash + localStorage persistence; inactive tabs no longer mount.
- Log viewer: level color-coding, search, level filter chips, auto-scroll
  toggle, copy button, visible-line count.
- Installed mods list: search field + side filter (all/both/server/client)
  with live count; public ModList gets skeleton + empty states and search.
- Theme toggle with no-flash inline init, localStorage + system preference.
- Layout: full OG / Twitter metadata, title template, keywords,
  dual-theme themeColor, metadataBase.
- lib/mods.ts: per-jar mtime+size parse cache (cold 6s -> warm ~45ms on
  /api/mods for the full mod list); cache eviction on mod removal.
- ChatBridge polling eased 3s -> 5s with 2s stale window.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 app/admin/page.tsx         |  37 +++------
 app/layout.tsx             |  54 +++++++++++--
 components/AdminTabs.tsx   |  80 ++++++++++++++++++++
 components/ChatBridge.tsx  |   3 +-
 components/LogViewer.tsx   | 151 ++++++++++++++++++++++++++++++++-----
 components/ModList.tsx     | 102 ++++++++++++++++++-------
 components/ModManager.tsx  |  56 +++++++++++++-
 components/Navbar.tsx      |   2 +
 components/ThemeToggle.tsx |  53 +++++++++++++
 lib/mods.ts                |  41 ++++++++--
 10 files changed, 490 insertions(+), 89 deletions(-)
 create mode 100644 components/AdminTabs.tsx
 create mode 100644 components/ThemeToggle.tsx

diff --git a/app/admin/page.tsx b/app/admin/page.tsx
index e6656d9..c491749 100644
--- a/app/admin/page.tsx
+++ b/app/admin/page.tsx
@@ -1,14 +1,7 @@
 import { auth } from "@/lib/auth";
 import { redirect } from "next/navigation";
 import { Navbar } from "@/components/Navbar";
-import { ClientOnly } from "@/components/ClientOnly";
-import { ServerControls } from "@/components/ServerControls";
-import { Analytics } from "@/components/Analytics";
-import { PlayerManager } from "@/components/PlayerManager";
-import { ChatBridge } from "@/components/ChatBridge";
-import { ModManager } from "@/components/ModManager";
-import { BackupManager } from "@/components/BackupManager";
-import { LogViewer } from "@/components/LogViewer";
+import { AdminTabs } from "@/components/AdminTabs";
 import Link from "next/link";
 
 export default async function AdminPage() {
@@ -28,26 +21,18 @@ export default async function AdminPage() {
         </div>
       </div>
 
-      <ClientOnly>
-        <div className="max-w-5xl mx-auto px-3 py-4 sm:p-6 space-y-4 sm:space-y-6 w-full overflow-x-hidden">
-          <ServerControls />
-          <Analytics />
-          <PlayerManager />
-          <ChatBridge />
-          <ModManager />
-          <BackupManager />
-          <LogViewer />
+      <div className="max-w-5xl mx-auto px-3 py-4 sm:p-6 w-full overflow-x-hidden">
+        <AdminTabs />
 
-          <div className="text-center">
-            <Link
-              href="/"
-              className="text-sm text-muted-foreground hover:text-foreground transition"
-            >
-              Back to dashboard
-            </Link>
-          </div>
+        <div className="text-center mt-6">
+          <Link
+            href="/"
+            className="text-sm text-muted-foreground hover:text-foreground transition"
+          >
+            Back to dashboard
+          </Link>
         </div>
-      </ClientOnly>
+      </div>
     </>
   );
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index 561ff35..2f3dcde 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -13,28 +13,68 @@ const geistMono = Geist_Mono({
   subsets: ["latin"],
 });
 
+const SITE_URL = "https://minecraft.hurkicorgi.com";
+const SITE_TITLE = "HurkiCorgi MC";
+const SITE_DESCRIPTION =
+  "Modded Minecraft Forge 1.20.1 server — Create & Engineering, Raids, Survival. Live status, mod list, and installer.";
+
 export const metadata: Metadata = {
-  title: "HurkiCorgi MC",
-  description: "Create & Engineering | Raids | Survival - Minecraft Server",
+  metadataBase: new URL(SITE_URL),
+  title: {
+    default: SITE_TITLE,
+    template: `%s · ${SITE_TITLE}`,
+  },
+  description: SITE_DESCRIPTION,
   manifest: "/manifest.json",
+  applicationName: SITE_TITLE,
+  keywords: ["Minecraft", "Forge", "Create mod", "modded server", "HurkiCorgi"],
   appleWebApp: {
     capable: true,
     statusBarStyle: "black-translucent",
-    title: "HurkiCorgi MC",
+    title: SITE_TITLE,
   },
   icons: {
     icon: "/icon.svg",
     apple: "/icon.svg",
   },
+  openGraph: {
+    type: "website",
+    url: SITE_URL,
+    title: SITE_TITLE,
+    description: SITE_DESCRIPTION,
+    siteName: SITE_TITLE,
+    images: [{ url: "/icon.svg", width: 512, height: 512, alt: SITE_TITLE }],
+  },
+  twitter: {
+    card: "summary",
+    title: SITE_TITLE,
+    description: SITE_DESCRIPTION,
+    images: ["/icon.svg"],
+  },
+  robots: { index: true, follow: true },
 };
 
 export const viewport: Viewport = {
   width: "device-width",
   initialScale: 1,
   maximumScale: 1,
-  themeColor: "#1a1a2e",
+  themeColor: [
+    { media: "(prefers-color-scheme: dark)", color: "#1a1a2e" },
+    { media: "(prefers-color-scheme: light)", color: "#f8fafc" },
+  ],
 };
 
+const themeInit = `
+try {
+  var s = localStorage.getItem('theme');
+  var m = window.matchMedia('(prefers-color-scheme: light)').matches;
+  var t = s || (m ? 'light' : 'dark');
+  var h = document.documentElement;
+  h.classList.add(t);
+  h.style.colorScheme = t;
+} catch (e) { document.documentElement.classList.add('dark'); }
+`;
+
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -43,8 +83,12 @@ export default function RootLayout({
   return (
     <html
       lang="en"
-      className={`dark ${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+      suppressHydrationWarning
     >
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: themeInit }} />
+      </head>
       <body className="min-h-full flex flex-col overflow-x-hidden">
         <Providers>
           <div className="flex flex-col flex-1 w-full overflow-x-hidden">
diff --git a/components/AdminTabs.tsx b/components/AdminTabs.tsx
new file mode 100644
index 0000000..486f6b4
--- /dev/null
+++ b/components/AdminTabs.tsx
@@ -0,0 +1,80 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { ServerControls } from "@/components/ServerControls";
+import { Analytics } from "@/components/Analytics";
+import { PlayerManager } from "@/components/PlayerManager";
+import { ChatBridge } from "@/components/ChatBridge";
+import { ModManager } from "@/components/ModManager";
+import { BackupManager } from "@/components/BackupManager";
+import { LogViewer } from "@/components/LogViewer";
+
+const TABS = [
+  { value: "server", label: "Server" },
+  { value: "players", label: "Players" },
+  { value: "chat", label: "Chat" },
+  { value: "mods", label: "Mods" },
+  { value: "backups", label: "Backups" },
+  { value: "logs", label: "Logs" },
+];
+
+export function AdminTabs() {
+  const [mounted, setMounted] = useState(false);
+  const [value, setValue] = useState<string>("server");
+
+  useEffect(() => {
+    setMounted(true);
+    const hash = window.location.hash.replace("#", "");
+    if (hash && TABS.some((t) => t.value === hash)) {
+      setValue(hash);
+      return;
+    }
+    const saved = localStorage.getItem("admin-tab");
+    if (saved && TABS.some((t) => t.value === saved)) setValue(saved);
+  }, []);
+
+  useEffect(() => {
+    if (!mounted) return;
+    localStorage.setItem("admin-tab", value);
+    history.replaceState(null, "", `#${value}`);
+  }, [value, mounted]);
+
+  if (!mounted) return null;
+
+  return (
+    <Tabs
+      value={value}
+      onValueChange={(v) => setValue(v as string)}
+      className="w-full"
+    >
+      <TabsList className="flex w-full flex-wrap h-auto sm:h-9 gap-1 p-1 overflow-x-auto justify-start sm:justify-center">
+        {TABS.map((t) => (
+          <TabsTrigger key={t.value} value={t.value} className="text-xs sm:text-sm">
+            {t.label}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+
+      <TabsContent value="server" className="mt-4 space-y-4 sm:space-y-6">
+        <ServerControls />
+        <Analytics />
+      </TabsContent>
+      <TabsContent value="players" className="mt-4">
+        <PlayerManager />
+      </TabsContent>
+      <TabsContent value="chat" className="mt-4" keepMounted={false}>
+        <ChatBridge />
+      </TabsContent>
+      <TabsContent value="mods" className="mt-4">
+        <ModManager />
+      </TabsContent>
+      <TabsContent value="backups" className="mt-4">
+        <BackupManager />
+      </TabsContent>
+      <TabsContent value="logs" className="mt-4" keepMounted={false}>
+        <LogViewer />
+      </TabsContent>
+    </Tabs>
+  );
+}
diff --git a/components/ChatBridge.tsx b/components/ChatBridge.tsx
index d57e8bc..4656ba3 100644
--- a/components/ChatBridge.tsx
+++ b/components/ChatBridge.tsx
@@ -29,7 +29,8 @@ export function ChatBridge() {
   const { data: messages = [] } = useQuery<ChatMessage[]>({
     queryKey: ["chat"],
     queryFn: () => fetch("/api/chat?lines=50").then((r) => r.json()),
-    refetchInterval: 3000,
+    refetchInterval: 5000,
+    staleTime: 2000,
   });
 
   const send = useMutation({
diff --git a/components/LogViewer.tsx b/components/LogViewer.tsx
index 45abad6..23c02e3 100644
--- a/components/LogViewer.tsx
+++ b/components/LogViewer.tsx
@@ -1,8 +1,9 @@
 "use client";
 
 import { useQuery } from "@tanstack/react-query";
-import { useRef, useEffect, useState } from "react";
+import { useMemo, useRef, useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 import {
   Card,
   CardContent,
@@ -11,11 +12,36 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 
+type Level = "ERROR" | "WARN" | "INFO" | "DEBUG" | "OTHER";
+
+const LEVEL_ORDER: Level[] = ["ERROR", "WARN", "INFO", "DEBUG", "OTHER"];
+
+const levelClass: Record<Level, string> = {
+  ERROR: "text-red-300",
+  WARN: "text-amber-300",
+  INFO: "text-muted-foreground",
+  DEBUG: "text-blue-300/70",
+  OTHER: "text-muted-foreground/70",
+};
+
+function detectLevel(line: string): Level {
+  if (/\b(ERROR|FATAL|SEVERE|Exception|Traceback)\b/i.test(line)) return "ERROR";
+  if (/\b(WARN|WARNING)\b/i.test(line)) return "WARN";
+  if (/\bINFO\b/i.test(line)) return "INFO";
+  if (/\bDEBUG\b/i.test(line)) return "DEBUG";
+  return "OTHER";
+}
+
 export function LogViewer() {
-  const logRef = useRef<HTMLPreElement>(null);
+  const logRef = useRef<HTMLDivElement>(null);
   const [autoRefresh, setAutoRefresh] = useState(false);
   const [lines, setLines] = useState(100);
-  const [hasLoaded, setHasLoaded] = useState(false);
+  const [search, setSearch] = useState("");
+  const [levelFilter, setLevelFilter] = useState<Set<Level>>(
+    new Set(LEVEL_ORDER)
+  );
+  const [autoScroll, setAutoScroll] = useState(true);
+  const [copied, setCopied] = useState(false);
   const autoScrollRef = useRef(true);
 
   const { data, refetch, isFetching, isError, error } = useQuery<{ logs: string }>({
@@ -25,16 +51,31 @@ export function LogViewer() {
       if (!res.ok) throw new Error(`Failed to load logs (${res.status})`);
       return res.json();
     },
-    enabled: hasLoaded,
     refetchInterval: autoRefresh ? 3000 : false,
   });
 
-  // Auto-scroll only if user is near the bottom
+  const parsed = useMemo(() => {
+    if (!data?.logs) return [] as { line: string; level: Level }[];
+    return data.logs
+      .split("\n")
+      .filter((l) => l.length > 0)
+      .map((line) => ({ line, level: detectLevel(line) }));
+  }, [data?.logs]);
+
+  const filtered = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    return parsed.filter(
+      (r) =>
+        levelFilter.has(r.level) &&
+        (!q || r.line.toLowerCase().includes(q))
+    );
+  }, [parsed, search, levelFilter]);
+
   useEffect(() => {
-    if (logRef.current && autoScrollRef.current) {
+    if (autoScroll && logRef.current && autoScrollRef.current) {
       logRef.current.scrollTop = logRef.current.scrollHeight;
     }
-  }, [data]);
+  }, [filtered, autoScroll]);
 
   const handleScroll = () => {
     if (!logRef.current) return;
@@ -42,10 +83,22 @@ export function LogViewer() {
     autoScrollRef.current = scrollHeight - scrollTop - clientHeight < 80;
   };
 
-  // Fetch on mount
-  useEffect(() => {
-    setHasLoaded(true);
-  }, []);
+  const toggleLevel = (lvl: Level) => {
+    setLevelFilter((prev) => {
+      const next = new Set(prev);
+      if (next.has(lvl)) next.delete(lvl);
+      else next.add(lvl);
+      return next;
+    });
+  };
+
+  const copyAll = async () => {
+    try {
+      await navigator.clipboard.writeText(filtered.map((r) => r.line).join("\n"));
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch {}
+  };
 
   return (
     <Card>
@@ -55,14 +108,14 @@ export function LogViewer() {
             <CardTitle>Console Logs</CardTitle>
             <CardDescription>Server output from journalctl</CardDescription>
           </div>
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-2 flex-wrap">
             <select
               value={lines}
               onChange={(e) => {
                 setLines(Number(e.target.value));
                 setTimeout(() => refetch(), 50);
               }}
-              className="h-10 rounded-md border border-input bg-muted px-2 text-sm text-foreground focus:outline-none"
+              className="h-9 rounded-md border border-input bg-muted px-2 text-sm text-foreground focus:outline-none"
             >
               <option value={50}>50 lines</option>
               <option value={100}>100 lines</option>
@@ -89,19 +142,77 @@ export function LogViewer() {
             </Button>
           </div>
         </div>
+
+        <div className="flex flex-wrap items-center gap-2 pt-3">
+          <Input
+            placeholder="Search logs..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="h-8 text-sm max-w-[220px]"
+          />
+          <div className="flex gap-1">
+            {LEVEL_ORDER.map((lvl) => {
+              const active = levelFilter.has(lvl);
+              return (
+                <button
+                  key={lvl}
+                  onClick={() => toggleLevel(lvl)}
+                  className={`text-[10px] font-semibold uppercase rounded px-2 py-1 border transition ${
+                    active
+                      ? `${levelClass[lvl]} border-current/40 bg-muted`
+                      : "text-muted-foreground/40 border-transparent hover:text-muted-foreground"
+                  }`}
+                >
+                  {lvl}
+                </button>
+              );
+            })}
+          </div>
+          <label className="flex items-center gap-1.5 text-xs text-muted-foreground ml-auto">
+            <input
+              type="checkbox"
+              checked={autoScroll}
+              onChange={(e) => setAutoScroll(e.target.checked)}
+              className="h-3.5 w-3.5 accent-primary"
+            />
+            Auto-scroll
+          </label>
+          <Button size="sm" variant="ghost" onClick={copyAll} className="text-xs h-8">
+            {copied ? "Copied" : "Copy"}
+          </Button>
+        </div>
       </CardHeader>
       <CardContent>
-        <pre
+        <div
           ref={logRef}
           onScroll={handleScroll}
-          className={`rounded-lg border bg-background p-3 sm:p-4 h-[300px] sm:h-[450px] overflow-y-auto font-mono text-xs leading-relaxed whitespace-pre-wrap break-all ${
-            isError ? "border-red-500/30 text-red-300" : "border-border text-muted-foreground"
+          className={`rounded-lg border bg-background p-3 sm:p-4 h-[300px] sm:h-[450px] overflow-y-auto font-mono text-xs leading-relaxed ${
+            isError ? "border-red-500/30" : "border-border"
           }`}
         >
-          {isError
-            ? `Failed to load logs: ${error instanceof Error ? error.message : "unknown error"}`
-            : data?.logs || (isFetching ? "Loading logs..." : "No logs available.")}
-        </pre>
+          {isError ? (
+            <p className="text-red-300">
+              Failed to load logs:{" "}
+              {error instanceof Error ? error.message : "unknown error"}
+            </p>
+          ) : filtered.length === 0 ? (
+            <p className="text-muted-foreground">
+              {isFetching ? "Loading logs..." : "No log lines match the current filter."}
+            </p>
+          ) : (
+            filtered.map((r, i) => (
+              <div
+                key={i}
+                className={`whitespace-pre-wrap break-all ${levelClass[r.level]}`}
+              >
+                {r.line}
+              </div>
+            ))
+          )}
+        </div>
+        <p className="text-[10px] text-muted-foreground mt-2 tabular-nums">
+          {filtered.length} / {parsed.length} lines
+        </p>
       </CardContent>
     </Card>
   );
diff --git a/components/ModList.tsx b/components/ModList.tsx
index 78dcba4..d54242a 100644
--- a/components/ModList.tsx
+++ b/components/ModList.tsx
@@ -1,8 +1,11 @@
 "use client";
 
 import { useQuery } from "@tanstack/react-query";
+import { useMemo, useState } from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Skeleton } from "@/components/ui/skeleton";
 
 type Mod = {
   modId: string;
@@ -13,44 +16,87 @@ type Mod = {
 };
 
 export function ModList() {
-  const { data: mods = [] } = useQuery<Mod[]>({
+  const [query, setQuery] = useState("");
+
+  const { data: mods, isLoading, isError } = useQuery<Mod[]>({
     queryKey: ["mods"],
     queryFn: () => fetch("/api/mods").then((r) => r.json()),
     staleTime: 5 * 60 * 1000,
   });
 
+  const filtered = useMemo(() => {
+    if (!mods) return [];
+    const q = query.trim().toLowerCase();
+    if (!q) return mods;
+    return mods.filter(
+      (m) =>
+        m.displayName.toLowerCase().includes(q) ||
+        m.modId.toLowerCase().includes(q) ||
+        m.filename.toLowerCase().includes(q)
+    );
+  }, [mods, query]);
+
   return (
     <Card>
       <CardHeader className="pb-0">
-        <CardTitle className="text-base">
-          Installed Mods ({mods.length})
-        </CardTitle>
+        <div className="flex items-center justify-between gap-3 flex-wrap">
+          <CardTitle className="text-base">
+            Installed Mods {mods ? `(${mods.length})` : ""}
+          </CardTitle>
+          {mods && mods.length > 6 && (
+            <Input
+              placeholder="Search mods..."
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              className="h-8 text-sm max-w-[220px]"
+            />
+          )}
+        </div>
       </CardHeader>
-      <CardContent className="">
-        <ul className="max-h-[350px] sm:max-h-[400px] overflow-y-auto -mx-1">
-          {mods.map((mod, i) => (
-            <li
-              key={mod.filename}
-              className={`flex justify-between items-center px-3 py-2.5 rounded-md ${
-                i % 2 === 1 ? "bg-muted/50" : ""
-              }`}
-            >
-              <div className="flex items-center gap-2 min-w-0">
-                <span className="text-sm font-medium truncate">
-                  {mod.displayName}
+      <CardContent>
+        {isLoading ? (
+          <ul className="-mx-1 space-y-1">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <li key={i} className="flex justify-between items-center px-3 py-2.5">
+                <Skeleton className="h-4 w-40" />
+                <Skeleton className="h-3 w-12" />
+              </li>
+            ))}
+          </ul>
+        ) : isError ? (
+          <p className="text-sm text-red-300 py-4 text-center">
+            Failed to load mods.
+          </p>
+        ) : filtered.length === 0 ? (
+          <p className="text-sm text-muted-foreground py-8 text-center">
+            {query ? `No mods match "${query}"` : "No mods installed."}
+          </p>
+        ) : (
+          <ul className="max-h-[350px] sm:max-h-[400px] overflow-y-auto -mx-1">
+            {filtered.map((mod, i) => (
+              <li
+                key={mod.filename}
+                className={`flex justify-between items-center px-3 py-2.5 rounded-md ${
+                  i % 2 === 1 ? "bg-muted/50" : ""
+                }`}
+              >
+                <div className="flex items-center gap-2 min-w-0">
+                  <span className="text-sm font-medium truncate">
+                    {mod.displayName}
+                  </span>
+                  {mod.version && (
+                    <Badge variant="secondary" className="text-xs px-1.5 py-0 shrink-0 hidden sm:inline-flex">
+                      {mod.version}
+                    </Badge>
+                  )}
+                </div>
+                <span className="text-xs text-muted-foreground whitespace-nowrap ml-3 tabular-nums">
+                  {mod.size}
                 </span>
-                {mod.version && (
-                  <Badge variant="secondary" className="text-xs px-1.5 py-0 shrink-0 hidden sm:inline-flex">
-                    {mod.version}
-                  </Badge>
-                )}
-              </div>
-              <span className="text-xs text-muted-foreground whitespace-nowrap ml-3 tabular-nums">
-                {mod.size}
-              </span>
-            </li>
-          ))}
-        </ul>
+              </li>
+            ))}
+          </ul>
+        )}
       </CardContent>
     </Card>
   );
diff --git a/components/ModManager.tsx b/components/ModManager.tsx
index 6f2aae4..bf2f43f 100644
--- a/components/ModManager.tsx
+++ b/components/ModManager.tsx
@@ -122,6 +122,8 @@ export function ModManager() {
   const [confirmRemove, setConfirmRemove] = useState<string | null>(null);
   const [confirmRestore, setConfirmRestore] = useState<string | null>(null);
   const [confirmDeleteSnap, setConfirmDeleteSnap] = useState<string | null>(null);
+  const [installedQuery, setInstalledQuery] = useState("");
+  const [sideFilter, setSideFilter] = useState<"all" | ModSide>("all");
   const debounceRef = useRef<ReturnType<typeof setTimeout>>(null);
 
   // Installed mods
@@ -690,11 +692,57 @@ export function ModManager() {
             <>
               <Separator />
               <div>
-                <h3 className="text-sm font-semibold mb-3">
-                  Installed Mods ({mods.length})
-                </h3>
+                <div className="flex items-center justify-between gap-3 mb-3 flex-wrap">
+                  <h3 className="text-sm font-semibold">
+                    Installed Mods ({(() => {
+                      const q = installedQuery.trim().toLowerCase();
+                      const count = mods.filter((m) =>
+                        (sideFilter === "all" || m.side === sideFilter) &&
+                        (!q ||
+                          m.displayName.toLowerCase().includes(q) ||
+                          m.modId.toLowerCase().includes(q) ||
+                          m.filename.toLowerCase().includes(q))
+                      ).length;
+                      return count === mods.length ? mods.length : `${count} / ${mods.length}`;
+                    })()})
+                  </h3>
+                  <div className="flex items-center gap-2 flex-wrap">
+                    <div className="flex gap-1">
+                      {(["all", "both", "server", "client"] as const).map((s) => (
+                        <button
+                          key={s}
+                          onClick={() => setSideFilter(s)}
+                          className={`text-[10px] font-semibold uppercase rounded px-2 py-1 border transition ${
+                            sideFilter === s
+                              ? "border-primary/40 bg-primary/10 text-primary"
+                              : "border-transparent text-muted-foreground hover:text-foreground"
+                          }`}
+                        >
+                          {s}
+                        </button>
+                      ))}
+                    </div>
+                    <Input
+                      placeholder="Search installed..."
+                      value={installedQuery}
+                      onChange={(e) => setInstalledQuery(e.target.value)}
+                      className="h-8 text-sm max-w-[200px]"
+                    />
+                  </div>
+                </div>
                 <ul className="max-h-[400px] overflow-y-auto space-y-1">
-                  {mods.map((mod) => (
+                  {mods
+                    .filter((m) => {
+                      if (sideFilter !== "all" && m.side !== sideFilter) return false;
+                      const q = installedQuery.trim().toLowerCase();
+                      if (!q) return true;
+                      return (
+                        m.displayName.toLowerCase().includes(q) ||
+                        m.modId.toLowerCase().includes(q) ||
+                        m.filename.toLowerCase().includes(q)
+                      );
+                    })
+                    .map((mod) => (
                     <li
                       key={mod.filename}
                       className="flex items-center justify-between gap-2 px-3 py-2 rounded-md bg-muted/50 group"
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 2afa752..9d7ad63 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -3,6 +3,7 @@
 import { useSession, signOut } from "next-auth/react";
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
+import { ThemeToggle } from "@/components/ThemeToggle";
 
 export function Navbar() {
   const { data: session } = useSession();
@@ -14,6 +15,7 @@ export function Navbar() {
           HurkiCorgi MC
         </Link>
         <div className="flex items-center gap-1 sm:gap-2">
+          <ThemeToggle />
           {session ? (
             <>
               <Button variant="ghost" size="sm" render={<Link href="/admin" />}>
diff --git a/components/ThemeToggle.tsx b/components/ThemeToggle.tsx
new file mode 100644
index 0000000..74c7862
--- /dev/null
+++ b/components/ThemeToggle.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+
+type Theme = "light" | "dark";
+
+function applyTheme(t: Theme) {
+  const html = document.documentElement;
+  html.classList.toggle("dark", t === "dark");
+  html.classList.toggle("light", t === "light");
+  html.style.colorScheme = t;
+}
+
+export function ThemeToggle() {
+  const [theme, setTheme] = useState<Theme>("dark");
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    const saved = (localStorage.getItem("theme") as Theme | null) ?? null;
+    const prefers =
+      typeof window !== "undefined" &&
+      window.matchMedia("(prefers-color-scheme: light)").matches
+        ? "light"
+        : "dark";
+    const initial: Theme = saved ?? prefers;
+    setTheme(initial);
+    applyTheme(initial);
+    setMounted(true);
+  }, []);
+
+  const toggle = () => {
+    const next: Theme = theme === "dark" ? "light" : "dark";
+    setTheme(next);
+    applyTheme(next);
+    localStorage.setItem("theme", next);
+  };
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      onClick={toggle}
+      aria-label="Toggle theme"
+      className="px-2 text-muted-foreground"
+      title={mounted ? `${theme === "dark" ? "Light" : "Dark"} mode` : undefined}
+    >
+      <span aria-hidden="true" className="text-base leading-none">
+        {mounted ? (theme === "dark" ? "☀" : "☾") : "☾"}
+      </span>
+    </Button>
+  );
+}
diff --git a/lib/mods.ts b/lib/mods.ts
index e638602..ce960a0 100644
--- a/lib/mods.ts
+++ b/lib/mods.ts
@@ -81,12 +81,18 @@ function extractToml(content: string, key: string): string | null {
   return match ? match[1] : null;
 }
 
-function extractModMeta(
+type JarParseCacheEntry = {
+  mtimeMs: number;
+  size: number;
+  meta: Omit<ModMeta, "side">;
+};
+
+const jarParseCache = new Map<string, JarParseCacheEntry>();
+
+function parseJarMeta(
   dir: string,
   filename: string
 ): Omit<ModMeta, "side"> {
-  const filePath = join(dir, filename);
-  const stat = statSync(filePath);
   let modId = "unknown";
   let displayName = filename
     .replace(/-(\d)/, " $1")
@@ -95,7 +101,7 @@ function extractModMeta(
   let version = "";
 
   try {
-    const zip = new AdmZip(filePath);
+    const zip = new AdmZip(join(dir, filename));
     const toml = zip.getEntry("META-INF/mods.toml");
     if (toml) {
       const content = toml.getData().toString("utf8");
@@ -112,10 +118,33 @@ function extractModMeta(
     displayName,
     version,
     filename,
-    size: (stat.size / 1024 / 1024).toFixed(1) + " MB",
+    size: "",
   };
 }
 
+function extractModMeta(
+  dir: string,
+  filename: string
+): Omit<ModMeta, "side"> {
+  const filePath = join(dir, filename);
+  const stat = statSync(filePath);
+  const cacheKey = filePath;
+  const cached = jarParseCache.get(cacheKey);
+
+  if (cached && cached.mtimeMs === stat.mtimeMs && cached.size === stat.size) {
+    return { ...cached.meta, size: (stat.size / 1024 / 1024).toFixed(1) + " MB" };
+  }
+
+  const meta = parseJarMeta(dir, filename);
+  jarParseCache.set(cacheKey, {
+    mtimeMs: stat.mtimeMs,
+    size: stat.size,
+    meta,
+  });
+
+  return { ...meta, size: (stat.size / 1024 / 1024).toFixed(1) + " MB" };
+}
+
 export function getModDetails(): ModMeta[] {
   return memo(MODS_CACHE_KEY, MODS_CACHE_TTL, computeModDetails);
 }
@@ -155,8 +184,10 @@ export function removeMod(filename: string): void {
 
   if (existsSync(serverPath)) {
     unlinkSync(serverPath);
+    jarParseCache.delete(serverPath);
   } else if (existsSync(clientPath)) {
     unlinkSync(clientPath);
+    jarParseCache.delete(clientPath);
   } else {
     throw new Error(`Mod "${filename}" not found`);
   }