From 9e73eaaea7b23af80a9ae6fb62c2ea580976c7a6 Mon Sep 17 00:00:00 2001
From: Harkamal Randhawa <harkamalsr@gmail.com>
Date: Sun, 24 May 2026 04:06:39 -0600
Subject: [PATCH] Add home logo link to app page headers.

Show a pixel pet logo in the top-right of AppPageHeader that links to the pet home screen.
---
 components/layout/app-page-header.tsx | 33 ++++++++++++++--------
 components/layout/home-logo-link.tsx  | 40 +++++++++++++++++++++++++++
 2 files changed, 61 insertions(+), 12 deletions(-)
 create mode 100644 components/layout/home-logo-link.tsx

diff --git a/components/layout/app-page-header.tsx b/components/layout/app-page-header.tsx
index 432ba11..6243919 100644
--- a/components/layout/app-page-header.tsx
+++ b/components/layout/app-page-header.tsx
@@ -1,3 +1,4 @@
+import { HomeLogoLink } from "@/components/layout/home-logo-link";
 import { cn } from "@/lib/utils";
 
 type AppPageHeaderProps = {
@@ -15,18 +16,26 @@ export function AppPageHeader({
 }: AppPageHeaderProps) {
   return (
     <header className="border-b-2 border-border bg-card/60 shadow-[var(--retro-shadow-sm)]">
-      <div className={cn("mx-auto px-5 py-5", wide ? "max-w-6xl" : "max-w-lg")}>
-        {eyebrow ? (
-          <p className="mb-2 text-xs uppercase tracking-[0.2em] text-muted-foreground">
-            {eyebrow}
-          </p>
-        ) : null}
-        <h1 className="text-sm">{title}</h1>
-        {description ? (
-          <p className="mt-2 text-xs leading-relaxed text-muted-foreground">
-            {description}
-          </p>
-        ) : null}
+      <div
+        className={cn(
+          "mx-auto flex items-start justify-between gap-4 px-5 py-5",
+          wide ? "max-w-6xl" : "max-w-lg",
+        )}
+      >
+        <div className="min-w-0 flex-1">
+          {eyebrow ? (
+            <p className="mb-2 text-xs uppercase tracking-[0.2em] text-muted-foreground">
+              {eyebrow}
+            </p>
+          ) : null}
+          <h1 className="text-sm">{title}</h1>
+          {description ? (
+            <p className="mt-2 text-xs leading-relaxed text-muted-foreground">
+              {description}
+            </p>
+          ) : null}
+        </div>
+        <HomeLogoLink className="mt-0.5" />
       </div>
     </header>
   );
diff --git a/components/layout/home-logo-link.tsx b/components/layout/home-logo-link.tsx
new file mode 100644
index 0000000..38ddf28
--- /dev/null
+++ b/components/layout/home-logo-link.tsx
@@ -0,0 +1,40 @@
+import Link from "next/link";
+
+import { routes } from "@/lib/routes";
+import { cn } from "@/lib/utils";
+
+type HomeLogoLinkProps = {
+  className?: string;
+};
+
+export function HomeLogoLink({ className }: HomeLogoLinkProps) {
+  return (
+    <Link
+      href={routes.avatar}
+      aria-label="Go to home"
+      className={cn(
+        "group flex shrink-0 items-center justify-center border-2 border-border bg-card/80 p-2 shadow-[var(--retro-shadow-sm)] transition-transform hover:-translate-y-0.5 hover:border-primary/60",
+        className,
+      )}
+    >
+      <svg
+        viewBox="0 0 16 16"
+        aria-hidden="true"
+        className="size-8"
+        style={{ imageRendering: "pixelated" }}
+      >
+        <rect x="5" y="2" width="6" height="5" fill="#fdba74" stroke="#1e1b4b" strokeWidth="1" />
+        <rect x="4" y="3" width="1" height="1" fill="#1e1b4b" />
+        <rect x="11" y="3" width="1" height="1" fill="#1e1b4b" />
+        <rect x="6" y="5" width="1" height="1" fill="#1e1b4b" />
+        <rect x="9" y="5" width="1" height="1" fill="#1e1b4b" />
+        <rect x="7" y="6" width="2" height="1" fill="#f472b6" />
+        <rect x="4" y="7" width="8" height="5" fill="#6366f1" stroke="#1e1b4b" strokeWidth="1" />
+        <rect x="5" y="12" width="2" height="3" fill="#334155" />
+        <rect x="9" y="12" width="2" height="3" fill="#334155" />
+        <rect x="2" y="4" width="1" height="1" fill="#f472b6" className="opacity-0 group-hover:opacity-100" />
+        <rect x="13" y="4" width="1" height="1" fill="#f472b6" className="opacity-0 group-hover:opacity-100" />
+      </svg>
+    </Link>
+  );
+}