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

@@ -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>
             ) : (