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/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>
+  );
+}