Move Style entry to pet portrait and drop it from bottom nav.

Add a palette shortcut on the habitat LCD and keep customize at /customize.
This commit is contained in:
2026-05-24 04:38:22 -06:00
parent 831170573b
commit 2d12b663c9
4 changed files with 29 additions and 3 deletions

View File

@@ -6,7 +6,6 @@ import { forwardRef } from "react";
import {
Home,
ListPlus,
Palette,
ShoppingBag,
Sparkles,
UserRound,
@@ -26,7 +25,6 @@ const gridColsClass = {
const navIcons = {
[routes.avatar]: Home,
[routes.customize]: Palette,
[routes.habits]: ListPlus,
[routes.dailyQuiz]: Sparkles,
[routes.shop]: ShoppingBag,

View File

@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
import { AnimatedPetSprite } from "@/components/pet/animated-pet-sprite";
import { ParallaxRoomBackground } from "@/components/pet/parallax-room-background";
import { PetStyleLink } from "@/components/pet/pet-style-link";
import { PixelGauge } from "@/components/pet/pixel-gauge";
import type { AvatarCustomization } from "@/lib/avatar-customization-storage";
import {
@@ -70,6 +71,9 @@ export function PetHabitat({ customization, className }: PetHabitatProps) {
<PixelGauge type="heart" value={condition.health} variant="overlay" />
<PixelGauge type="energy" value={condition.energy} variant="overlay" />
</div>
<div className="absolute right-2 top-2 z-20">
<PetStyleLink />
</div>
<div className="pointer-events-none absolute inset-x-0 bottom-0 z-[2] h-8 bg-gradient-to-t from-black/35 to-transparent" />
</div>
</div>

View File

@@ -0,0 +1,25 @@
import Link from "next/link";
import { Palette } from "lucide-react";
import { routes } from "@/lib/routes";
import { cn } from "@/lib/utils";
type PetStyleLinkProps = {
className?: string;
};
export function PetStyleLink({ className }: PetStyleLinkProps) {
return (
<Link
href={routes.customize}
aria-label="Customize pet style"
title="Style"
className={cn(
"flex shrink-0 items-center justify-center border-2 border-border bg-card/90 p-2 shadow-[var(--retro-shadow-sm)] transition-transform hover:-translate-y-0.5 hover:border-primary/60",
className,
)}
>
<Palette aria-hidden="true" className="size-5" strokeWidth={2.5} />
</Link>
);
}