gatekeeper/net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add global dev status banner to admin layout

Browse Source
This commit is contained in:
cawcenter
2025-12-15 13:44:28 -05:00
parent d4df588067
commit 08298f3e79
1 changed files with 245 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

245
god-mode/src/layouts/AdminLayout.astro Normal file
View File

@@ -0,0 +1,245 @@
---
interface Props {
title: string;
}
const { title } = Astro.props;
const currentPath = Astro.url.pathname;
import SystemStatus from '@/components/admin/SystemStatus';
import SystemStatusBar from '@/components/admin/SystemStatusBar';
import DevStatus from '@/components/admin/DevStatus.astro';
import { GlobalToaster, CoreProvider } from '@/components/providers/CoreProviders';
const navGroups = [
{
title: 'Command Station',
items: [
{ href: '/admin', label: 'Mission Control', icon: 'home' },
{ href: '/admin/sites/jumpstart', label: 'Jumpstart Test 🚀', icon: 'rocket_launch' },
{ href: '/admin/content-factory', label: 'Content Factory', icon: 'factory' },
]
},
{
title: 'Intelligence Library',
items: [
{ href: '/admin/content/avatars', label: 'Avatar Intelligence', icon: 'users' },
{ href: '/admin/collections/avatar-variants', label: 'Avatar Variants', icon: 'users' },
{ href: '/admin/collections/geo-intelligence', label: 'Geo Intelligence', icon: 'map' },
{ href: '/admin/collections/spintax-dictionaries', label: 'Spintax Dictionaries', icon: 'puzzle' },
{ href: '/admin/collections/cartesian-patterns', label: 'Cartesian Patterns', icon: 'hub' },
]
},
{
title: 'Content Engine',
items: [
{ href: '/admin/collections/campaign-masters', label: 'Campaigns', icon: 'web' },
{ href: '/admin/collections/content-fragments', label: 'Content Fragments', icon: 'puzzle' },
{ href: '/admin/collections/headline-inventory', label: 'Headlines', icon: 'puzzle' },
{ href: '/admin/collections/offer-blocks', label: 'Offer Blocks', icon: 'puzzle' },
{ href: '/admin/collections/generation-jobs', label: 'Generation Queue', icon: 'history' },
]
},
{
title: 'Production',
items: [
{ href: '/admin/sites', label: 'Sites & Deployments', icon: 'web' },
{ href: '/admin/seo/articles', label: 'Generated Articles', icon: 'newspaper' },
{ href: '/admin/leads', label: 'Leads & Inquiries', icon: 'users' },
{ href: '/admin/media/templates', label: 'Media Assets', icon: 'image' },
]
},
{
title: 'System',
items: [
{ href: '/admin/settings', label: 'Configuration', icon: 'settings' },
{ href: '/admin/content/work_log', label: 'System Logs', icon: 'history' },
]
}
];
function isActive(href: string) {
if (href === '/admin') return currentPath === '/admin';
return currentPath.startsWith(href);
}
---
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{title} | Spark Admin</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<style is:global>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--primary: 217.2 91.2% 59.8%;
--primary-foreground: 222.2 47.4% 11.2%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 224.3 76.3% 48%;
--radius: 0.5rem;
}
* {
border-color: hsl(var(--border));
}
body {
font-family: 'Inter', sans-serif;
background-color: hsl(var(--background));
color: hsl(var(--foreground));
}
</style>
</head>
<body class="min-h-screen flex antialiased">
<!-- Sidebar -->
<aside class="w-64 bg-gray-900 border-r border-gray-800 flex flex-col fixed h-full overflow-y-auto">
<div class="p-6 border-b border-gray-800 sticky top-0 bg-gray-900 z-10">
<a href="/admin" class="flex items-center gap-3">
<div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<span class="text-xl font-bold text-white">Spark Admin</span>
</a>
</div>
<nav class="flex-1 p-4 space-y-8">
{navGroups.map((group) => (
<div>
<h3 class="px-4 text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">
{group.title}
</h3>
<div class="space-y-1">
{group.items.map((item) => (
<a
href={item.href}
class={`flex items-center gap-3 px-4 py-2 rounded-lg transition-colors text-sm ${
isActive(item.href)
? 'bg-primary/20 text-primary font-medium'
: 'text-gray-400 hover:bg-gray-800 hover:text-white'
}`}
>
<span class="w-5 h-5 flex-shrink-0">
{item.icon === 'home' && (
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /></svg>
)}
{item.icon === 'rocket_launch' && (
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.59 14.37a6 6 0 01-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 006.16-12.12A14.98 14.98 0 009.631 8.41m5.96 5.96a14.926 14.926 0 01-5.841 2.58m-.119-8.54a6 6 0 00-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 00-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 01-2.448-2.448 14.9 14.9 0 01.06-.312m-2.24 2.39a4.493 4.493 0 00-1.757 4.306 4.493 4.493 0 004.306-1.758M16.5 9a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" /></svg>
)}
{item.icon === 'factory' && (
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m8-2a2 2 0 00-2-2H9a2 2 0 00-2 2v2m7-2a2 2 0 00-2-2h-1a2 2 0 00-2 2v2m-6-2a2 2 0 00-2-2h-1a2 2 0 00-2 2v2" /></svg>
)}
{item.icon === 'users' && (
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" /></svg>
)}
{item.icon === 'map' && (
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" /></svg>
)}
{item.icon === 'puzzle' && (
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z" /></svg>
)}
{item.icon === 'hub' && (
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /></svg>
)}
{item.icon === 'web' && (
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" /></svg>
)}
{item.icon === 'newspaper' && (
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" /></svg>
)}
{item.icon === 'image' && (
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
)}
{item.icon === 'settings' && (
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
)}
{item.icon === 'history' && (
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
)}
</span>
<span class="font-medium">{item.label}</span>
</a>
))}
</div>
</div>
))}
</nav>
<div class="px-4 pb-4 mt-auto">
<SystemStatus client:load />
</div>
<div class="p-4 border-t border-gray-800">
<a
href="/"
target="_blank"
class="flex items-center gap-3 px-4 py-3 rounded-lg text-gray-400 hover:bg-gray-800 hover:text-white transition-colors"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
</svg>
<span class="font-medium">View Site</span>
</a>
</div>
</aside>
<!-- Main Content -->
<div class="flex-1 ml-64">
<header class="sticky top-0 z-40 bg-gray-900/80 backdrop-blur-lg border-b border-gray-800 px-8 py-4">
<div class="flex items-center justify-between">
<h1 class="text-2xl font-bold text-white">{title}</h1>
<div class="flex items-center gap-4">
<button class="p-2 text-gray-400 hover:text-white rounded-lg hover:bg-gray-800 transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</button>
<div class="w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full flex items-center justify-center text-white font-semibold">
A
</div>
</div>
</div>
</header>
<main class="p-8 pb-24">
<CoreProvider client:load>
<slot />
</CoreProvider>
</main>
</div>
<!-- Full-Width System Status Bar -->
<SystemStatusBar client:load />
<GlobalToaster client:load />
<!-- Universal Dev Status -->
<DevStatus
pageStatus="active"
dbStatus="connected"
/>
</body>
</html>