Add HaBit brand mark to the app top bar.

Surfaces reusable top-right branding alongside the home logo for consistent pixel-themed app identity.

components/layout/app-top-bar.tsx

@@ -2,6 +2,7 @@
 
 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";
@@ -25,11 +26,12 @@ export function AppTopBar({ className }: AppTopBarProps) {
         paddingTop: "env(safe-area-inset-top, 0px)",
       }}
     >
-      <div className="mx-auto flex h-full max-w-6xl items-center px-4">
+      <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>
     </header>
   );

components/layout/habit-brand.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+const HABIT_LOGO_SRC = "/habit-logo.png";
+
+type HabitBrandProps = {
+  className?: string;
+};
+
+export function HabitBrand({ className }: HabitBrandProps) {
+  const [useText, setUseText] = useState(false);
+
+  return (
+    <div
+      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)]",
+        className,
+      )}
+      aria-label="HaBit"
+    >
+      {!useText ? (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img
+          src={HABIT_LOGO_SRC}
+          alt=""
+          className="size-6 image-pixelated"
+          onError={() => setUseText(true)}
+        />
+      ) : (
+        <span
+          className="select-none text-[10px] uppercase tracking-widest text-primary"
+          aria-hidden="true"
+        >
+          HaBit
+        </span>
+      )}
+    </div>
+  );
+}