From 41b9d62e15ab9e0715072a042cf7d1f090f62572 Mon Sep 17 00:00:00 2001
From: Z8MB1E <jason@onyxsimple.com>
Date: Tue, 25 Aug 2026 12:31:54 -0400
Subject: [PATCH] feat(sidebar): add sparkle accent to mini XP display

Show a sparkle icon next to the XP number in the collapsed sidebar
XP strip; inline the level-name/XP spans per prettier.
---
 src/components/frontend/blocks/AppSidebar.tsx | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/frontend/blocks/AppSidebar.tsx b/src/components/frontend/blocks/AppSidebar.tsx
index 2bdc8cf..6be0dd0 100644
--- a/src/components/frontend/blocks/AppSidebar.tsx
+++ b/src/components/frontend/blocks/AppSidebar.tsx
@@ -17,6 +17,7 @@ import {
   Warehouse,
   Maximize,
   Minimize,
+  SparkleIcon,
 } from "lucide-react";
 
 import { NavCore } from "@/components/frontend/blocks/NavCore";
@@ -29,7 +30,7 @@ import {
   SidebarHeader,
   SidebarMenu,
   SidebarMenuButton,
-   SidebarMenuItem,
+  SidebarMenuItem,
 } from "@/components/ui/sidebar";
 import Image from "next/image";
 import Link from "next/link";
@@ -177,7 +178,7 @@ export function AppSidebar({
   preferences?: NonNullable<User["preferences"]>;
 } & React.ComponentProps<typeof Sidebar>) {
   const [isMiniMode, setIsMiniMode] = React.useState<boolean>(
-    preferences?.display?.xpDisplayMini ?? false
+    preferences?.display?.xpDisplayMini ?? false,
   );
 
   // Re-sync when the saved preference changes (e.g. account page save + router.refresh()).
@@ -276,12 +277,9 @@ export function AppSidebar({
           <div className="flex items-center justify-between">
             {isMiniMode ? (
               <div className="flex items-center gap-2">
-                <div className="text-xs text-muted-foreground uppercase">
-                  {xpLevel.levelName}
-                </div>
-                <span className="text-xs font-bold">
-                  {xpLevel.xp.toLocaleString()}
-                </span>
+                <div className="text-xs text-muted-foreground uppercase">{xpLevel.levelName}</div>
+                <SparkleIcon className="w-4 h-4" />
+                <span className="text-xs font-bold">{xpLevel.xp.toLocaleString()}</span>
                 <Progress value={xpLevel.progress} className="w-20 h-1" />
               </div>
             ) : (