Updated layout

package.json

@@ -17,6 +17,7 @@
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "lucide-react": "^0.528.0",
+        "motion": "^12.23.12",
         "next": "15.4.4",
         "next-themes": "^0.4.6",
         "react": "19.1.0",

pnpm-lock.yaml

@@ -29,6 +29,9 @@ importers:
       lucide-react:
         specifier: ^0.528.0
         version: 0.528.0(react@19.1.0)
+      motion:
+        specifier: ^12.23.12
+        version: 12.23.12(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       next:
         specifier: 15.4.4
         version: 15.4.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -1275,6 +1278,20 @@ packages:
     resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
     engines: {node: '>= 0.4'}
 
+  framer-motion@12.23.12:
+    resolution: {integrity: sha512-6e78rdVtnBvlEVgu6eFEAgG9v3wLnYEboM8I5O5EXvfKC8gxGQB8wXJdhkMy10iVcn05jl6CNw7/HTsTCfwcWg==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
   function-bind@1.1.2:
     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
 
@@ -1649,6 +1666,26 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  motion-dom@12.23.12:
+    resolution: {integrity: sha512-RcR4fvMCTESQBD/uKQe49D5RUeDOokkGRmz4ceaJKDBgHYtZtntC/s2vLvY38gqGaytinij/yi3hMcWVcEF5Kw==}
+
+  motion-utils@12.23.6:
+    resolution: {integrity: sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==}
+
+  motion@12.23.12:
+    resolution: {integrity: sha512-8jCD8uW5GD1csOoqh1WhH1A6j5APHVE15nuBkFeRiMzYBdRwyAHmSP/oXSuW0WJPZRXTFdBoG4hY9TFWNhhwng==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
@@ -3321,6 +3358,15 @@ snapshots:
     dependencies:
       is-callable: 1.2.7
 
+  framer-motion@12.23.12(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+    dependencies:
+      motion-dom: 12.23.12
+      motion-utils: 12.23.6
+      tslib: 2.8.1
+    optionalDependencies:
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+
   function-bind@1.1.2: {}
 
   function.prototype.name@1.1.8:
@@ -3679,6 +3725,20 @@ snapshots:
 
   mkdirp@3.0.1: {}
 
+  motion-dom@12.23.12:
+    dependencies:
+      motion-utils: 12.23.6
+
+  motion-utils@12.23.6: {}
+
+  motion@12.23.12(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+    dependencies:
+      framer-motion: 12.23.12(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      tslib: 2.8.1
+    optionalDependencies:
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+
   ms@2.1.3: {}
 
   nanoid@3.3.11: {}

src/app/(main)/layout.tsx

@@ -1,3 +1,4 @@
+import { ThemeSwitcher } from "@/components/theme-switcher"
 import { Button } from "@/components/ui/button"
 import { Settings } from "lucide-react"
 import Link from "next/link"
@@ -6,15 +7,20 @@ import { ReactNode } from "react"
 export default function RootLayout({ children }: Readonly<{ children: ReactNode }>) {
     return (
         <>
-            <nav className="flex items-center justify-between px-6 py-4 border-b">
+            <header className="fixed w-screen bg-background/50 backdrop-blur-sm">
-                <Link href="/">
+                <nav className="flex justify-between items-center px-6 border-b h-header">
-                    <span className="font-semibold text-lg">Hypixel Stats</span>
+                    <Link href="/">
-                </Link>
+                        <span className="text-lg font-semibold">Hypixel Stats</span>
-                <Button variant="ghost" size="icon" aria-label="Settings">
+                    </Link>
-                    <Settings className="h-5 w-5" />
+                    <div className="flex items-center">
-                </Button>
+                        <ThemeSwitcher />
-            </nav>
+                        <Button variant="ghost" size="icon" aria-label="Settings">
-            <div>
+                            <Settings className="w-5 h-5" />
+                        </Button>
+                    </div>
+                </nav>
+            </header>
+            <div className="pt-header">
                 {children}
             </div>
         </>

src/app/(stats)/layout.tsx

@@ -1,4 +1,5 @@
 import { SearchBar } from "@/components/search-bar"
+import { ThemeSwitcher } from "@/components/theme-switcher"
 import { Button } from "@/components/ui/button"
 import { Settings } from "lucide-react"
 import Link from "next/link"
@@ -13,12 +14,15 @@ export default function StatsLayout({ children }: Readonly<{ children: ReactNode
                         <span className="text-lg font-semibold">Hypixel Stats</span>
                     </Link>
                     <SearchBar navbar />
-                    <Button variant="ghost" size="icon" aria-label="Settings">
+                    <div className="flex items-center">
-                        <Settings className="w-5 h-5" />
+                        <ThemeSwitcher />
-                    </Button>
+                        <Button variant="ghost" size="icon" aria-label="Settings">
+                            <Settings className="w-5 h-5" />
+                        </Button>
+                    </div>
                 </nav>
             </header>
-            <div className="pt-header">
+            <div className="pt-header min-h-content">
                 {children}
             </div>
         </>

src/app/(stats)/player/[ign]/_stats/bedwars/bedwars.tsx

@@ -6,7 +6,7 @@ import { Separator } from "@/components/ui/separator"
 import { getBWLevelForExp, getTotalExpForLevel } from "@/lib/hypixel/bedwarsLevel"
 import { getProgress } from "@/lib/hypixel/general"
 import { Player } from "@/lib/schema/player"
-import { ChevronDown, ChevronUp, Menu } from "lucide-react"
+import { ChevronDown, ChevronUp } from "lucide-react"
 import { useEffect, useRef, useState } from "react"
 import CollapsedStats from "../../_components/CollapsedStats"
 import { BedwarsLevel, BedwarsProgress } from "./bedwars-components"
@@ -56,7 +56,7 @@ export default function BedwarsStats({ stats }: { stats: Player["player"]["stats
             <CardContent>
                 <Collapsible ref={ref}>
                     <div className="flex justify-between">
-                        <h1 className="text-xl font-bold">Bedwars</h1>
+                        <h1 className="text-xl font-bold">BedWars</h1>
                         <div className="flex gap-4">
                             <CollapsedStats
                                 stats={[
@@ -87,12 +87,9 @@ export default function BedwarsStats({ stats }: { stats: Player["player"]["stats
                                 ]}
                             />
                         </div>
-                        <div className="flex gap-2 items-center">
+                        <CollapsibleTrigger className="transition-all">
-                            <CollapsibleTrigger className="transition-all">
+                            {opened === false ? <ChevronDown /> : <ChevronUp />}
-                                {opened === false ? <ChevronDown /> : <ChevronUp />}
+                        </CollapsibleTrigger>
-                            </CollapsibleTrigger>
-                            <Menu />
-                        </div>
                     </div>
                     <CollapsibleContent>
                         <Separator className="my-4" />

src/app/(stats)/player/[ign]/page.tsx

@@ -54,7 +54,7 @@ async function SuspendedPage({ ign: pign }: { ign: string }) {
     const level = getExactLevel(player.networkExp)
 
     return (
-        <div className="flex flex-col items-center min-h-screen">
+        <div className="flex flex-col items-center">
             <h1 className="text-3xl font-bold mt-25">
                 <DisplayName
                     ign={player.displayname}
@@ -71,7 +71,7 @@ async function SuspendedPage({ ign: pign }: { ign: string }) {
             </h1>
             <div className="flex gap-6 px-6 mt-8 w-full max-w-7xl">
                 <Sidebar level={level} ign={pign} player={player} guild={guild ?? undefined} />
-                <div className="w-3/4">
+                <div className="space-y-4 w-3/4">
                     <BedwarsStats stats={player.stats.Bedwars} />
                 </div>
             </div>

src/app/layout.tsx

@@ -1,13 +1,16 @@
 import { ReactNode } from "react"
 import "./globals.css"
+import ThemeProvider from "@/components/ThemeProvider"
 import { Toaster } from "@/components/ui/sonner"
 
 export default function RootLayout({ children }: Readonly<{ children: ReactNode }>) {
     return (
         <html lang="en" suppressHydrationWarning>
-            <body className="antialiased dark">
+            <body className="antialiased">
-                {children}
+                <ThemeProvider>
-                <Toaster />
+                    {children}
+                    <Toaster />
+                </ThemeProvider>
             </body>
         </html>
     )

src/components/ThemeProvider.tsx

@@ -0,0 +1,14 @@
+import { ThemeProvider as OriginalThemeProvider } from "next-themes"
+import { ReactNode } from "react"
+
+export default function ThemeProvider({ children }: Readonly<{ children: ReactNode }>) {
+    return (
+        <OriginalThemeProvider
+            attribute="class"
+            defaultTheme="system"
+            enableSystem
+        >
+            {children}
+        </OriginalThemeProvider>
+    )
+}

src/components/theme-switcher.tsx

@@ -0,0 +1,88 @@
+"use client"
+
+import { cn } from "@/lib/utils"
+import { Monitor, Moon, Sun } from "lucide-react"
+import { motion } from "motion/react"
+import { useTheme } from "next-themes"
+import { useCallback, useEffect, useState } from "react"
+
+const themes = [
+    {
+        key: "light",
+        icon: Sun,
+        label: "Light theme"
+    },
+    {
+        key: "dark",
+        icon: Moon,
+        label: "Dark theme"
+    },
+    {
+        key: "system",
+        icon: Monitor,
+        label: "System theme"
+    }
+]
+
+export type ThemeSwitcherProps = {
+    className?: string
+    vertical?: boolean
+}
+
+export function ThemeSwitcher({ className, vertical = false }: ThemeSwitcherProps) {
+    const { theme, setTheme } = useTheme()
+    const [mounted, setMounted] = useState(false)
+
+    const handleThemeClick = useCallback(
+        (themeKey: "light" | "dark" | "system") => {
+            setTheme(themeKey)
+        },
+        [setTheme]
+    )
+
+    useEffect(() => {
+        setMounted(true)
+    }, [])
+
+    if (!mounted) {
+        return null
+    }
+
+    return (
+        <div
+            className={cn(
+                "relative isolate flex p-1 rounded-full bg-background ring-1 ring-border",
+                vertical ? "flex-col h-auto w-8" : "h-8",
+                className
+            )}
+        >
+            {themes.map(({ key, icon: Icon, label }) => {
+                const isActive = theme === key
+
+                return (
+                    <button
+                        aria-label={label}
+                        className="relative w-6 h-6 rounded-full"
+                        key={key}
+                        onClick={() => handleThemeClick(key as "light" | "dark" | "system")}
+                        type="button"
+                    >
+                        {isActive && (
+                            <motion.div
+                                className="absolute inset-0 rounded-full bg-secondary"
+                                layoutId={vertical ? "activeThemeVertical" : "activeTheme"}
+                                transition={{ type: "spring", duration: 0.5 }}
+                            />
+                        )}
+                        <Icon
+                            className={cn(
+                                "relative z-10 m-auto h-4 w-4",
+                                isActive ? "text-foreground" : "text-muted-foreground"
+                            )}
+                        />
+                    </button>
+                )
+            })}
+        </div>
+    )
+}

src/lib/hypixel/validatePlayer.ts

@@ -27,4 +27,3 @@ export async function validatePlayer(ign: string) {
         message: "Player found"
     }
 }
-

src/lib/schema/stats.ts

@@ -21,8 +21,8 @@ export const bedwarsStatsSchema = z.looseObject({
     slumber: z.looseObject({
         tickets: z.number().default(0),
         bag_type: z.string(),
-        total_tickets_earned: z.number(),
+        total_tickets_earned: z.number().default(0),
-        doublers: z.number(),
+        doublers: z.number().default(0),
         room: z.record(z.string(), z.boolean())
     }).optional(),
     eight_one_winstreak: z.number().optional(),