jason/polaris-task-force
1
0
Fork 0
Code Issues Wiki Activity

feat(sidebar): add sparkle accent to mini XP display

Browse source 
Show a sparkle icon next to the XP number in the collapsed sidebar
XP strip; inline the level-name/XP spans per prettier.
This commit is contained in:
Jason Fraley 2026-08-25 12:31:54 -04:00
parent 3348466f3b
commit 41b9d62e15
1 changed files with 6 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/components/frontend/blocks/AppSidebar.tsx
View file

@ -17,6 +17,7 @@ import {
Warehouse, Warehouse,
Maximize, Maximize,
Minimize, Minimize,
SparkleIcon,
} from "lucide-react"; } from "lucide-react";
import { NavCore } from "@/components/frontend/blocks/NavCore"; import { NavCore } from "@/components/frontend/blocks/NavCore";
@ -29,7 +30,7 @@ import {
SidebarHeader, SidebarHeader,
SidebarMenu, SidebarMenu,
SidebarMenuButton, SidebarMenuButton,
SidebarMenuItem, SidebarMenuItem,
} from "@/components/ui/sidebar"; } from "@/components/ui/sidebar";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
@ -177,7 +178,7 @@ export function AppSidebar({
preferences?: NonNullable<User["preferences"]>; preferences?: NonNullable<User["preferences"]>;
} & React.ComponentProps<typeof Sidebar>) { } & React.ComponentProps<typeof Sidebar>) {
const [isMiniMode, setIsMiniMode] = React.useState<boolean>( 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()). // 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"> <div className="flex items-center justify-between">
{isMiniMode ? ( {isMiniMode ? (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="text-xs text-muted-foreground uppercase"> <div className="text-xs text-muted-foreground uppercase">{xpLevel.levelName}</div>
{xpLevel.levelName} <SparkleIcon className="w-4 h-4" />
</div> <span className="text-xs font-bold">{xpLevel.xp.toLocaleString()}</span>
<span className="text-xs font-bold">
{xpLevel.xp.toLocaleString()}
</span>
<Progress value={xpLevel.progress} className="w-20 h-1" /> <Progress value={xpLevel.progress} className="w-20 h-1" />
</div> </div>
) : ( ) : (