-
- )}
-
+
+ + {formatSlug(slug)} +
+ {isAdmin && ( + + + Edit + + )} +
+
+
+ );
+}
diff --git a/frontend/src/components/react/admin/AssetManager.tsx b/frontend/src/components/react/admin/AssetManager.tsx
new file mode 100644
index 0000000..03072b1
--- /dev/null
+++ b/frontend/src/components/react/admin/AssetManager.tsx
@@ -0,0 +1,115 @@
+import { useState, useEffect, useRef } from 'react';
+import { getAssets, uploadAsset, deleteAsset as deleteAssetApi, ApiError } from '../../../lib/api';
+import type { Asset } from '../../../lib/types';
+
+interface Props {
+ mode?: 'manage' | 'select';
+ onSelect?: (asset: Asset) => void;
+}
+
+export default function AssetManager({ mode = 'manage', onSelect }: Props) {
+ const [assets, setAssets] = useState
+
+
+
+ {alert && (
+
+ );
+}
diff --git a/frontend/src/components/react/admin/Dashboard.tsx b/frontend/src/components/react/admin/Dashboard.tsx
new file mode 100644
index 0000000..1816edc
--- /dev/null
+++ b/frontend/src/components/react/admin/Dashboard.tsx
@@ -0,0 +1,117 @@
+import { useState, useEffect } from 'react';
+import { useAuth } from '../../../stores/auth';
+import { getPosts, deletePost, ApiError } from '../../../lib/api';
+import type { Post } from '../../../lib/types';
+
+export default function Dashboard() {
+ const [posts, setPosts] = useState
+ {alert.msg}
+
+ )}
+
+ {/* Upload Zone */}
+ fileRef.current?.click()}
+ onDragOver={e => { e.preventDefault(); e.stopPropagation(); }}
+ onDrop={e => { e.preventDefault(); e.stopPropagation(); if (e.dataTransfer.files.length) handleUpload(e.dataTransfer.files); }}
+ >
+ { if (e.target.files?.length) handleUpload(e.target.files); }} />
+
+
+ {/* Grid */}
+ {assets.length === 0 ? (
+
+
+
+ Click or drag to upload assets
+Any file type up to 50MB
+No assets uploaded yet.
+ ) : (
+
+ {assets.map(asset => (
+
+ )}
+
+
+ ))}
+
+ {isImage(asset.name) ? (
+ 
+ ) : (
+
+
+
+ {asset.name.split('.').pop()?.toUpperCase()}
+
+ )}
+ {/* Hover overlay */}
+
+ {mode === 'select' && onSelect && (
+
+ )}
+
+
+ {asset.name}
+
+
+
+
+ {/* Quick Links */}
+
+
+
+ {/* Posts List */}
+ + + Manage Posts +
+
+ {loading && (
+
+
+
+ )}
+ {error &&
+
+
+
+ {error}
}
+ {!loading && posts.length === 0 && !error && (
+ No posts yet.
+ )}
+ {posts.map(post => (
+
+
+ ))}
+
+
+ {post.slug}
+/posts/{post.slug}
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/components/react/admin/Editor.tsx b/frontend/src/components/react/admin/Editor.tsx
new file mode 100644
index 0000000..6ff3c9a
--- /dev/null
+++ b/frontend/src/components/react/admin/Editor.tsx
@@ -0,0 +1,321 @@
+import { useState, useEffect, useRef } from 'react';
+import { EditorView, keymap, placeholder as cmPlaceholder } from '@codemirror/view';
+import { EditorState } from '@codemirror/state';
+import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
+import { languages } from '@codemirror/language-data';
+import { defaultKeymap, indentWithTab } from '@codemirror/commands';
+import { getPost, savePost, deletePost, getAssets, ApiError } from '../../../lib/api';
+import type { Asset } from '../../../lib/types';
+import AssetManager from './AssetManager';
+
+interface Props {
+ editSlug?: string;
+}
+
+// CodeMirror theme matching the Catppuccin narlblog style
+const narlblogTheme = EditorView.theme({
+ '&': {
+ backgroundColor: 'var(--crust)',
+ color: 'var(--text)',
+ border: '1px solid var(--surface1)',
+ borderRadius: '0.75rem',
+ fontSize: '14px',
+ },
+ '.cm-content': {
+ fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
+ padding: '1rem',
+ caretColor: 'var(--text)',
+ },
+ '.cm-cursor': { borderLeftColor: 'var(--text)' },
+ '.cm-selectionBackground': { backgroundColor: 'var(--surface2) !important' },
+ '&.cm-focused .cm-selectionBackground': { backgroundColor: 'var(--surface2) !important' },
+ '.cm-activeLine': { backgroundColor: 'var(--surface0)' },
+ '.cm-gutters': {
+ backgroundColor: 'var(--mantle)',
+ color: 'var(--overlay0)',
+ border: 'none',
+ },
+ '.cm-activeLineGutter': { backgroundColor: 'var(--surface0)' },
+}, { dark: true });
+
+export default function Editor({ editSlug }: Props) {
+ const editorRef = useRef
+ {ICONS[icon]}
+
+
+
+ {title}
+{desc}
+
+ {alert.msg}
+
+ )}
+
+ {/* Actions bar */}
+
+ {originalSlug && (
+
+ )}
+
+ {originalSlug && (
+
+
+ View Post
+
+ )}
+
+
+
+ {/* Slug */}
+
-
-
-
+
+ setSlug(e.target.value)}
+ required
+ placeholder="my-awesome-post"
+ className="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors font-mono"
+ />
+
+
+ {/* Summary */}
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Assets Library
- -
-
-
-
-
-
+
-
-
-
-
-
-
- Asset Library
-Click 'Insert' to add an asset to your post.
-
-
- Create/Edit post.
+
-
-
-
-
-
-
-
-
-
-
-
-
-
- Write Post
-Create or edit markdown posts.
-
-
-
-
-
-
-
-
-
-
- Asset Library
-Manage images and uploads.
-
-
-
-
-
-
-
-
- Settings
-Site title and themes.
-- - Manage Posts -
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
- Admin Login
-Enter your admin token to access the dashboard.
- - -Configure how your blog looks and feels globally.
- - - - +