From 9b860ee3c05836c6e58447f7a554b1461f36f6b1 Mon Sep 17 00:00:00 2001
From: Josh Berman <joshberman@ssw.com.au>
Date: Mon, 21 Sep 2026 15:32:56 +1000
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Turn=20the=20admin=20link=20into?=
 =?UTF-8?q?=20an=20orange=20Edit=20button=20with=20the=20Tina=20llama?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 src/app/docs-layout.tsx                |  2 -
 src/components/docs/layout/top-nav.tsx |  2 +
 src/components/icons/tina-icon.svg     | 12 ------
 src/components/icons/tina-icon.tsx     | 13 ++++++
 src/components/ui/admin-link.tsx       | 59 ++++++++++++--------------
 5 files changed, 43 insertions(+), 45 deletions(-)
 delete mode 100644 src/components/icons/tina-icon.svg
 create mode 100644 src/components/icons/tina-icon.tsx

diff --git a/src/app/docs-layout.tsx b/src/app/docs-layout.tsx
index 8818544f..31996c42 100644
--- a/src/app/docs-layout.tsx
+++ b/src/app/docs-layout.tsx
@@ -1,5 +1,4 @@
 import "@/styles/global.css";
-import AdminLink from "@/components/ui/admin-link";
 import { TailwindIndicator } from "@/components/ui/tailwind-indicator";
 import { ThemeSelector } from "@/components/ui/theme-selector";
 import settings from "@/content/settings/config.json";
@@ -70,7 +69,6 @@ export function DocsLayout({
 
 const Content = ({ children }: { children?: React.ReactNode }) => (
   <>
-    <AdminLink />
     <TailwindIndicator />
     <div className="font-sans flex min-h-screen flex-col bg-background-color">
       <div className="flex flex-1 flex-col items-center">{children}</div>
diff --git a/src/components/docs/layout/top-nav.tsx b/src/components/docs/layout/top-nav.tsx
index 52557abd..8b2b452b 100644
--- a/src/components/docs/layout/top-nav.tsx
+++ b/src/components/docs/layout/top-nav.tsx
@@ -2,6 +2,7 @@ import { MobileNavSidebar } from "@/components/navigation/mobile-navigation-side
 import * as Tabs from "@radix-ui/react-tabs";
 import type React from "react";
 import { Search } from "../../search-docs/search";
+import AdminLink from "../../ui/admin-link";
 import LightDarkSwitch from "../../ui/light-dark-switch";
 import { CtaButton } from "./cta-button";
 import { LanguageSwitcher } from "./language-switcher";
@@ -51,6 +52,7 @@ export const TopNav = ({
           <div className="w-full hidden lg:flex justify-end">
             <LightDarkSwitch />
           </div>
+          <AdminLink />
         </div>
       </div>
     </div>
diff --git a/src/components/icons/tina-icon.svg b/src/components/icons/tina-icon.svg
deleted file mode 100644
index b02b7bfa..00000000
--- a/src/components/icons/tina-icon.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<svg
-  viewBox="0 0 49 68"
-  fill="inherit"
-  xmlns="http://www.w3.org/2000/svg"
-  role="img"
-  aria-labelledby="title desc"
->
-  <title>Tina</title>
-  <desc>A proud llama</desc>
-  <path d="M31.4615 30.1782C34.763 27.4475 36.2259 11.3098 37.6551 5.50906C39.0843 -0.291715 44.995 0.00249541 44.995 0.00249541C44.995 0.00249541 43.4605 2.67299 44.0864 4.66584C44.7123 6.65869 49 8.44005 49 8.44005L48.0752 10.8781C48.0752 10.8781 46.1441 10.631 44.995 12.9297C43.8459 15.2283 45.7336 37.9882 45.7336 37.9882C45.7336 37.9882 38.8271 51.6106 38.8271 57.3621C38.8271 63.1136 41.5495 67.9338 41.5495 67.9338H37.7293C37.7293 67.9338 32.1252 61.2648 30.9759 57.9318C29.8266 54.5988 30.2861 51.2658 30.2861 51.2658C30.2861 51.2658 24.1946 50.921 18.7931 51.2658C13.3915 51.6106 9.78922 56.2539 9.13908 58.8512C8.48894 61.4486 8.21963 67.9338 8.21963 67.9338H5.19906C3.36057 62.2603 1.90043 60.2269 2.69255 57.3621C4.88665 49.4269 4.45567 44.9263 3.94765 42.9217C3.43964 40.9172 0 39.1676 0 39.1676C1.68492 35.7349 3.4048 34.0854 10.8029 33.9133C18.201 33.7413 28.1599 32.9088 31.4615 30.1782Z" />
-  <path d="M12.25 57.03C12.25 57.03 13.0305 64.2533 17.1773 67.9342H20.7309C17.1773 63.9085 16.7897 53.415 16.7897 53.415C14.9822 54.0035 12.4799 56.1106 12.25 57.03Z" />
-</svg>
\ No newline at end of file
diff --git a/src/components/icons/tina-icon.tsx b/src/components/icons/tina-icon.tsx
new file mode 100644
index 00000000..18eab0a1
--- /dev/null
+++ b/src/components/icons/tina-icon.tsx
@@ -0,0 +1,13 @@
+export const TinaIcon = ({ className }: { className?: string }) => (
+  <svg
+    viewBox="0 0 49 68"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+    role="img"
+    aria-label="Tina llama"
+    className={className}
+  >
+    <path d="M31.4615 30.1782C34.763 27.4475 36.2259 11.3098 37.6551 5.50906C39.0843 -0.291715 44.995 0.00249541 44.995 0.00249541C44.995 0.00249541 43.4605 2.67299 44.0864 4.66584C44.7123 6.65869 49 8.44005 49 8.44005L48.0752 10.8781C48.0752 10.8781 46.1441 10.631 44.995 12.9297C43.8459 15.2283 45.7336 37.9882 45.7336 37.9882C45.7336 37.9882 38.8271 51.6106 38.8271 57.3621C38.8271 63.1136 41.5495 67.9338 41.5495 67.9338H37.7293C37.7293 67.9338 32.1252 61.2648 30.9759 57.9318C29.8266 54.5988 30.2861 51.2658 30.2861 51.2658C30.2861 51.2658 24.1946 50.921 18.7931 51.2658C13.3915 51.6106 9.78922 56.2539 9.13908 58.8512C8.48894 61.4486 8.21963 67.9338 8.21963 67.9338H5.19906C3.36057 62.2603 1.90043 60.2269 2.69255 57.3621C4.88665 49.4269 4.45567 44.9263 3.94765 42.9217C3.43964 40.9172 0 39.1676 0 39.1676C1.68492 35.7349 3.4048 34.0854 10.8029 33.9133C18.201 33.7413 28.1599 32.9088 31.4615 30.1782Z" />
+    <path d="M12.25 57.03C12.25 57.03 13.0305 64.2533 17.1773 67.9342H20.7309C17.1773 63.9085 16.7897 53.415 16.7897 53.415C14.9822 54.0035 12.4799 56.1106 12.25 57.03Z" />
+  </svg>
+);
diff --git a/src/components/ui/admin-link.tsx b/src/components/ui/admin-link.tsx
index b002f3c4..cb464870 100644
--- a/src/components/ui/admin-link.tsx
+++ b/src/components/ui/admin-link.tsx
@@ -1,46 +1,43 @@
 "use client";
 
-import { XMarkIcon } from "@heroicons/react/24/outline";
-import React from "react";
-import { useEffect } from "react";
+import { TinaIcon } from "@/components/icons/tina-icon";
+import { useEffect, useState } from "react";
 import { useEditState } from "tinacms/dist/react";
 
+const hasTinaSession = () => {
+  const raw = window.localStorage.getItem("tinacms-auth");
+  if (!raw) return false;
+  try {
+    const auth: unknown = JSON.parse(raw);
+    return (
+      typeof auth === "object" &&
+      auth !== null &&
+      "access_token" in auth &&
+      Boolean(auth.access_token)
+    );
+  } catch {
+    return false;
+  }
+};
+
 const AdminLink = () => {
   const { edit } = useEditState();
-  const [showAdminLink, setShowAdminLink] = React.useState(false);
+  const [showAdminLink, setShowAdminLink] = useState(false);
 
   useEffect(() => {
-    setShowAdminLink(
-      !edit &&
-        JSON.parse((window.localStorage.getItem("tinacms-auth") as any) || "{}")
-          ?.access_token
-    );
+    setShowAdminLink(!edit && hasTinaSession());
   }, [edit]);
 
-  const handleDismiss = () => {
-    setShowAdminLink(false);
-  };
+  if (!showAdminLink) return null;
 
   return (
-    <>
-      {showAdminLink && (
-        <div className="fixed right-4 top-4 z-50 flex items-center justify-between rounded-full bg-blue-500 px-3 py-1 text-white">
-          <a
-            href={`/admin/index.html#/~${window.location.pathname}`}
-            className="text-xs"
-          >
-            Edit This Page
-          </a>
-          <button
-            type="button"
-            onClick={handleDismiss}
-            className="ml-2 text-sm"
-          >
-            <XMarkIcon className="size-4" />
-          </button>
-        </div>
-      )}
-    </>
+    <a
+      href={`/admin/index.html#/~${window.location.pathname}`}
+      className="flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full bg-[#EC4815] px-3 py-1.5 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-[#D13F13]"
+    >
+      <TinaIcon className="h-5 w-auto" />
+      Edit ✏️
+    </a>
   );
 };