Improve shop UX, starting balance, and top bar branding.

Give new users 100 free points, allow shop previews regardless of balance, rename clothing items with descriptive labels, and show only the HaBit logo in the top-left.
This commit is contained in:
2026-05-24 04:51:01 -06:00
parent 69131ac8eb
commit 5dda46cb87
12 changed files with 286 additions and 49 deletions

View File

@@ -3,7 +3,6 @@
import { usePathname } from "next/navigation";
import { HabitBrand } from "@/components/layout/habit-brand";
import { HomeLogoLink } from "@/components/layout/home-logo-link";
import { routes } from "@/lib/routes";
import { cn } from "@/lib/utils";
@@ -26,12 +25,8 @@ export function AppTopBar({ className }: AppTopBarProps) {
paddingTop: "env(safe-area-inset-top, 0px)",
}}
>
<div className="mx-auto flex h-full max-w-6xl items-center justify-between px-4">
<HomeLogoLink
className="mt-0"
aria-current={isHome ? "page" : undefined}
/>
<HabitBrand />
<div className="mx-auto flex h-full max-w-6xl items-center px-4">
<HabitBrand aria-current={isHome ? "page" : undefined} />
</div>
</header>
);

View File

@@ -1,25 +1,35 @@
"use client";
import Link from "next/link";
import { useState } from "react";
import { routes } from "@/lib/routes";
import { cn } from "@/lib/utils";
const HABIT_LOGO_SRC = "/habit-logo.png";
type HabitBrandProps = {
className?: string;
href?: string;
"aria-current"?: "page" | undefined;
};
export function HabitBrand({ className }: HabitBrandProps) {
export function HabitBrand({
className,
href = routes.avatar,
"aria-current": ariaCurrent,
}: HabitBrandProps) {
const [useText, setUseText] = useState(false);
return (
<div
<Link
href={href}
aria-label="Go to home"
aria-current={ariaCurrent}
className={cn(
"flex shrink-0 items-center justify-center border-2 border-border bg-card/80 px-3 py-1.5 shadow-[var(--retro-shadow-sm)]",
"group flex shrink-0 items-center justify-center border-2 border-border bg-card/80 px-3 py-1.5 shadow-[var(--retro-shadow-sm)] transition-transform hover:-translate-y-0.5 hover:border-primary/60",
className,
)}
aria-label="HaBit"
>
{!useText ? (
// eslint-disable-next-line @next/next/no-img-element
@@ -37,6 +47,6 @@ export function HabitBrand({ className }: HabitBrandProps) {
HaBit
</span>
)}
</div>
</Link>
);
}