From d7c230fae88bedbf60b4fae68fbd3abda3b5d3d3 Mon Sep 17 00:00:00 2001
From: Oleg Proskurin <regx@usul.su>
Date: Sat, 25 Oct 2025 20:04:43 +0700
Subject: [PATCH] feat: add sub nav to admin section

---
 apps/landing/src/app/admin/apikeys/page.tsx | 19 +-----------
 apps/landing/src/app/admin/layout.tsx       | 34 +++++++++++++++++++++
 apps/landing/src/app/admin/master/page.tsx  | 19 +-----------
 apps/landing/src/lib/apikey/types.ts        |  4 +--
 4 files changed, 38 insertions(+), 38 deletions(-)
 create mode 100644 apps/landing/src/app/admin/layout.tsx

diff --git a/apps/landing/src/app/admin/apikeys/page.tsx b/apps/landing/src/app/admin/apikeys/page.tsx
index 94dca19..a73046f 100644
--- a/apps/landing/src/app/admin/apikeys/page.tsx
+++ b/apps/landing/src/app/admin/apikeys/page.tsx
@@ -6,7 +6,6 @@ import { createProjectApiKey, listApiKeys } from '@/lib/actions/apiKeyActions';
 import KeyDisplay from '@/components/admin/KeyDisplay';
 import AdminFormInput from '@/components/admin/AdminFormInput';
 import AdminButton from '@/components/admin/AdminButton';
-import Link from 'next/link';
 
 const STORAGE_KEY = 'banatie_master_key';
 
@@ -69,23 +68,7 @@ export default function ApiKeysPage() {
   }
 
   return (
-    <div className="relative z-10 max-w-6xl mx-auto px-6 py-16">
-      {/* Navigation */}
-      <div className="mb-8 flex gap-4">
-        <Link
-          href="/admin/master"
-          className="px-4 py-2 bg-slate-700 text-slate-300 rounded-lg font-medium hover:bg-slate-600"
-        >
-          Master Key
-        </Link>
-        <Link
-          href="/admin/apikeys"
-          className="px-4 py-2 bg-amber-600 text-white rounded-lg font-medium"
-        >
-          API Keys
-        </Link>
-      </div>
-
+    <div className="max-w-6xl mx-auto px-6 py-8">
       {/* Page Header */}
       <div className="mb-8">
         <h1 className="text-4xl font-bold text-white mb-2">Project API Keys</h1>
diff --git a/apps/landing/src/app/admin/layout.tsx b/apps/landing/src/app/admin/layout.tsx
new file mode 100644
index 0000000..dab1815
--- /dev/null
+++ b/apps/landing/src/app/admin/layout.tsx
@@ -0,0 +1,34 @@
+'use client';
+
+import { ReactNode } from 'react';
+import { usePathname } from 'next/navigation';
+import { SubsectionNav } from '@/components/shared/SubsectionNav';
+
+interface AdminLayoutProps {
+  children: ReactNode;
+}
+
+const navItems = [
+  { label: 'Master Key', href: '/admin/master' },
+  { label: 'API Keys', href: '/admin/apikeys' },
+];
+
+export default function AdminLayout({ children }: AdminLayoutProps) {
+  const pathname = usePathname();
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950">
+      {/* Animated gradient background */}
+      <div className="fixed inset-0 overflow-hidden pointer-events-none">
+        <div className="absolute top-1/4 -left-1/4 w-96 h-96 bg-purple-600/10 rounded-full blur-3xl animate-pulse"></div>
+        <div className="absolute bottom-1/4 -right-1/4 w-96 h-96 bg-cyan-600/10 rounded-full blur-3xl animate-pulse delay-700"></div>
+      </div>
+
+      {/* Subsection Navigation */}
+      <SubsectionNav items={navItems} currentPath={pathname} />
+
+      {/* Page Content */}
+      <div className="relative z-10">{children}</div>
+    </div>
+  );
+}
diff --git a/apps/landing/src/app/admin/master/page.tsx b/apps/landing/src/app/admin/master/page.tsx
index f86a515..23ad318 100644
--- a/apps/landing/src/app/admin/master/page.tsx
+++ b/apps/landing/src/app/admin/master/page.tsx
@@ -5,7 +5,6 @@ import { bootstrapMasterKey } from '@/lib/actions/apiKeyActions';
 import KeyDisplay from '@/components/admin/KeyDisplay';
 import AdminFormInput from '@/components/admin/AdminFormInput';
 import AdminButton from '@/components/admin/AdminButton';
-import Link from 'next/link';
 
 const STORAGE_KEY = 'banatie_master_key';
 
@@ -67,23 +66,7 @@ export default function MasterKeyPage() {
   };
 
   return (
-    <div className="relative z-10 max-w-4xl mx-auto px-6 py-16">
-      {/* Navigation */}
-      <div className="mb-8 flex gap-4">
-        <Link
-          href="/admin/master"
-          className="px-4 py-2 bg-amber-600 text-white rounded-lg font-medium"
-        >
-          Master Key
-        </Link>
-        <Link
-          href="/admin/apikeys"
-          className="px-4 py-2 bg-slate-700 text-slate-300 rounded-lg font-medium hover:bg-slate-600"
-        >
-          API Keys
-        </Link>
-      </div>
-
+    <div className="max-w-4xl mx-auto px-6 py-8">
       {/* Page Header */}
       <div className="mb-8">
         <h1 className="text-4xl font-bold text-white mb-2">Master Key Management</h1>
diff --git a/apps/landing/src/lib/apikey/types.ts b/apps/landing/src/lib/apikey/types.ts
index e45b1fd..84513bb 100644
--- a/apps/landing/src/lib/apikey/types.ts
+++ b/apps/landing/src/lib/apikey/types.ts
@@ -63,8 +63,8 @@ export interface ApiKeyContextValue {
 
   // Focus method for external components
   focus: () => void;
-  inputRef: React.Ref<HTMLInputElement>;
-  containerRef: React.Ref<HTMLInputElement>;
+  inputRef: React.RefObject<HTMLInputElement | null>;
+  containerRef: React.RefObject<HTMLDivElement | null>;
 }
 
 /**