From 43e6d4b53cca73b5e1dd9a93e6d614e3f965d613 Mon Sep 17 00:00:00 2001
From: Ender <enderyildirim@outlook.com>
Date: Wed, 22 Oct 2025 00:52:25 +0200
Subject: [PATCH] feat(admin): add MUI AdminLayout and persist auth; wrap
 EditorShell with layout and logout

---
 apps/admin/src/components/EditorShell.tsx | 14 ++++++++++----
 apps/admin/src/layout/AdminLayout.tsx     | 22 ++++++++++++++++++++++
 2 files changed, 32 insertions(+), 4 deletions(-)
 create mode 100644 apps/admin/src/layout/AdminLayout.tsx

diff --git a/apps/admin/src/components/EditorShell.tsx b/apps/admin/src/components/EditorShell.tsx
index fa80b0f..b6706e0 100644
--- a/apps/admin/src/components/EditorShell.tsx
+++ b/apps/admin/src/components/EditorShell.tsx
@@ -1,9 +1,15 @@
 import { Typography } from '@mui/material';
+import AdminLayout from '../layout/AdminLayout';
 
-export default function EditorShell() {
+export default function EditorShell({ onLogout }: { onLogout?: () => void }) {
   return (
-    <Typography variant="h4" sx={{ p: 3 }}>
-      Welcome to VoxBlog Editor
-    </Typography>
+    <AdminLayout title="VoxBlog Admin" onLogout={onLogout}>
+      <Typography variant="h4" sx={{ mb: 2 }}>
+        Welcome to VoxBlog Editor
+      </Typography>
+      <Typography variant="body1">
+        Coming next: audio recorder, rich editor, AI tools, and Ghost publish flow.
+      </Typography>
+    </AdminLayout>
   );
 }
diff --git a/apps/admin/src/layout/AdminLayout.tsx b/apps/admin/src/layout/AdminLayout.tsx
new file mode 100644
index 0000000..7985516
--- /dev/null
+++ b/apps/admin/src/layout/AdminLayout.tsx
@@ -0,0 +1,22 @@
+import { AppBar, Box, Button, Container, Toolbar, Typography } from '@mui/material';
+import type { ReactNode } from 'react';
+
+export default function AdminLayout({ title, onLogout, children }: { title?: string; onLogout?: () => void; children: ReactNode }) {
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
+      <AppBar position="static">
+        <Toolbar>
+          <Typography variant="h6" sx={{ flexGrow: 1 }}>
+            {title || 'VoxBlog Admin'}
+          </Typography>
+          {onLogout && (
+            <Button color="inherit" onClick={onLogout}>Logout</Button>
+          )}
+        </Toolbar>
+      </AppBar>
+      <Container maxWidth="lg" sx={{ py: 3, flex: 1 }}>
+        {children}
+      </Container>
+    </Box>
+  );
+}