feat: Minecraft theme overhaul, fix points bug, add history

frontend/src/components/app-nav.tsx

@@ -5,6 +5,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
 
 import { PixelAvatar } from "@/components/pixel-avatar";
 import { useUiPreferences } from "@/components/ui-preference-provider";
+import { XpBar } from "@/components/xp-bar";
 import { apiFetch } from "@/lib/api";
 import { clearToken, readToken } from "@/lib/auth";
 import type { ThemeId } from "@/themes/types";
@@ -199,9 +200,8 @@ export function AppNav() {
                     <div key={group.key} className="relative">
                       <button
                         type="button"
-                        className={`rounded-md border px-3 py-1 text-sm ${
-                          active ? "border-zinc-900 bg-zinc-900 text-white" : "hover:bg-zinc-100"
-                        }`}
+                        className={`rounded-md border px-3 py-1 text-sm ${active ? "border-zinc-900 bg-zinc-900 text-white" : "hover:bg-zinc-100"
+                          }`}
                         aria-expanded={opened}
                         onClick={() =>
                           setDesktopOpenGroup((prev) => (prev === group.key ? null : group.key))
@@ -211,9 +211,8 @@ export function AppNav() {
                       </button>
                       {opened && (
                         <div
-                          className={`absolute left-0 top-full z-50 mt-2 rounded-md border bg-[color:var(--surface)] p-1 shadow-lg ${
-                            group.key === "account" ? "min-w-[18rem]" : "min-w-[11rem]"
-                          }`}
+                          className={`absolute left-0 top-full z-50 mt-2 rounded-md border bg-[color:var(--surface)] p-1 shadow-lg ${group.key === "account" ? "min-w-[18rem]" : "min-w-[11rem]"
+                            }`}
                         >
                           {group.links.map((item) => {
                             const linkActive = isActivePath(pathname, item.href);
@@ -221,9 +220,8 @@ export function AppNav() {
                               <button
                                 key={item.href}
                                 type="button"
-                                className={`block w-full rounded px-3 py-1.5 text-left text-sm ${
-                                  linkActive ? "bg-zinc-900 text-white" : "hover:bg-zinc-100"
-                                }`}
+                                className={`block w-full rounded px-3 py-1.5 text-left text-sm ${linkActive ? "bg-zinc-900 text-white" : "hover:bg-zinc-100"
+                                  }`}
                                 onClick={() => {
                                   setDesktopOpenGroup(null);
                                   router.push(item.href);
@@ -306,9 +304,8 @@ export function AppNav() {
                       <button
                         key={group.key}
                         type="button"
-                        className={`rounded-md border px-3 py-1 text-sm ${
-                          active ? "border-zinc-900 bg-zinc-900 text-white" : "hover:bg-zinc-100"
-                        }`}
+                        className={`rounded-md border px-3 py-1 text-sm ${active ? "border-zinc-900 bg-zinc-900 text-white" : "hover:bg-zinc-100"
+                          }`}
                         onClick={() => router.push(group.links[0]?.href ?? "/")}
                       >
                         {group.label}
@@ -391,12 +388,19 @@ export function AppNav() {
             {hasToken ? t("nav.logged_in") : t("nav.logged_out")}
           </span>
           {hasToken && (
-            <PixelAvatar
-              seed={avatarSeed}
-              size={24}
-              className="border-zinc-700"
-              alt={meProfile?.username ? `${meProfile.username} avatar` : "avatar"}
-            />
+            <>
+              {theme === "minecraft" && (
+                <div className="hidden md:block w-32 mr-2">
+                  <XpBar level={5} currentXp={750} nextLevelXp={1000} />
+                </div>
+              )}
+              <PixelAvatar
+                seed={avatarSeed}
+                size={24}
+                className="border-zinc-700"
+                alt={meProfile?.username ? `${meProfile.username} avatar` : "avatar"}
+              />
+            </>
           )}
           {hasToken && (
             <button