admin layout redesign

2026-05-09 10:47:41 +02:00
parent 9c913adacd
commit 12c7ead7df
8 changed files with 364 additions and 182 deletions
@@ -0,0 +1,117 @@
+import { useEffect, useState } from 'react';
+import AssetManager from './admin/AssetManager';
+
+interface Props {
+  className?: string;
+  label?: string;
+}
+
+export default function AssetsButton({
+  className = 'inline-flex items-center gap-2 bg-surface0 hover:bg-surface1 text-subtext1 hover:text-text px-3 py-2 rounded-lg border border-surface1 transition-colors text-sm',
+  label = 'Assets',
+}: Props) {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    function onKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') setOpen(false);
+    }
+    window.addEventListener('keydown', onKey);
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+      window.removeEventListener('keydown', onKey);
+      document.body.style.overflow = prev;
+    };
+  }, [open]);
+
+  return (
+    <>
+      <button type="button" onClick={() => setOpen(true)} className={className}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden="true"
+        >
+          <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
+          <circle cx="9" cy="9" r="2" />
+          <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
+        </svg>
+        {label}
+      </button>
+
+      {open && (
+        <div
+          className="fixed inset-0 z-[200] flex items-center justify-center p-4 md:p-8"
+          role="dialog"
+          aria-modal="true"
+          aria-label="Asset library"
+          onClick={() => setOpen(false)}
+        >
+          <div className="absolute inset-0 bg-crust/80 backdrop-blur-md" aria-hidden="true" />
+          <div
+            className="relative w-full max-w-5xl max-h-[90vh] bg-mantle border border-surface1 rounded-2xl shadow-2xl overflow-hidden flex flex-col animate-in fade-in slide-in-from-bottom-4 duration-200"
+            onClick={e => e.stopPropagation()}
+          >
+            <div className="flex items-center justify-between px-5 py-4 border-b border-surface1">
+              <div className="flex items-center gap-3">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="18"
+                  height="18"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="text-mauve"
+                  aria-hidden="true"
+                >
+                  <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
+                  <circle cx="9" cy="9" r="2" />
+                  <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
+                </svg>
+                <h2 className="text-lg font-semibold text-lavender">Asset Library</h2>
+              </div>
+              <button
+                type="button"
+                onClick={() => setOpen(false)}
+                aria-label="Close"
+                className="p-1.5 rounded-md text-subtext0 hover:text-text hover:bg-surface0 transition-colors"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="18"
+                  height="18"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  aria-hidden="true"
+                >
+                  <path d="M18 6 6 18" />
+                  <path d="m6 6 12 12" />
+                </svg>
+              </button>
+            </div>
+
+            <div className="flex-1 overflow-y-auto p-5">
+              <AssetManager mode="manage" />
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
@@ -0,0 +1,159 @@
+import { useEffect, useRef, useState } from 'react';
+import { updateConfig } from '../../lib/api';
+import type { SiteConfig } from '../../lib/types';
+
+type ConfigKey = keyof SiteConfig;
+
+interface Props {
+  initial: string;
+  fieldKey: ConfigKey;
+  isAdmin?: boolean;
+  className?: string;
+  multiline?: boolean;
+  ariaLabel?: string;
+  pencilPosition?: 'inline' | 'overlay';
+}
+
+export default function EditableText({
+  initial,
+  fieldKey,
+  isAdmin = false,
+  className = '',
+  multiline = false,
+  ariaLabel,
+  pencilPosition = 'inline',
+}: Props) {
+  const [value, setValue] = useState(initial);
+  const [draft, setDraft] = useState(initial);
+  const [editing, setEditing] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);
+
+  useEffect(() => {
+    if (editing) {
+      requestAnimationFrame(() => {
+        inputRef.current?.focus();
+        if (inputRef.current && 'select' in inputRef.current) inputRef.current.select();
+      });
+    }
+  }, [editing]);
+
+  if (!isAdmin) {
+    return <span className={className}>{value}</span>;
+  }
+
+  function startEdit(e?: React.MouseEvent) {
+    e?.preventDefault();
+    e?.stopPropagation();
+    setDraft(value);
+    setError(null);
+    setEditing(true);
+  }
+
+  function cancel() {
+    setDraft(value);
+    setError(null);
+    setEditing(false);
+  }
+
+  async function save() {
+    if (saving) return;
+    const next = draft.trim();
+    if (next === value) {
+      setEditing(false);
+      return;
+    }
+    setSaving(true);
+    setError(null);
+    try {
+      await updateConfig({ [fieldKey]: next } as Partial<SiteConfig>);
+      setValue(next);
+      setEditing(false);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Save failed');
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  function onKey(e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      cancel();
+    } else if (e.key === 'Enter' && !multiline) {
+      e.preventDefault();
+      save();
+    } else if (e.key === 'Enter' && multiline && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault();
+      save();
+    }
+  }
+
+  if (editing) {
+    const sharedClass = `bg-crust border border-mauve/50 rounded px-2 py-0.5 outline-none focus:border-mauve text-text ${className}`;
+    return (
+      <span className="inline-flex items-baseline gap-2 max-w-full">
+        {multiline ? (
+          <textarea
+            ref={el => { inputRef.current = el; }}
+            value={draft}
+            onChange={e => setDraft(e.target.value)}
+            onKeyDown={onKey}
+            onBlur={save}
+            disabled={saving}
+            rows={2}
+            aria-label={ariaLabel}
+            className={`${sharedClass} resize-y w-full max-w-full`}
+          />
+        ) : (
+          <input
+            ref={el => { inputRef.current = el; }}
+            type="text"
+            value={draft}
+            onChange={e => setDraft(e.target.value)}
+            onKeyDown={onKey}
+            onBlur={save}
+            disabled={saving}
+            aria-label={ariaLabel}
+            className={`${sharedClass} w-full max-w-full`}
+          />
+        )}
+        {error && <span className="text-xs text-red">{error}</span>}
+      </span>
+    );
+  }
+
+  const overlay = pencilPosition === 'overlay';
+
+  return (
+    <span className={`relative inline-flex items-baseline gap-1.5 group/edit ${overlay ? 'block' : ''}`}>
+      <span className={className}>{value}</span>
+      <button
+        type="button"
+        onClick={startEdit}
+        title="Edit"
+        aria-label={ariaLabel ? `Edit ${ariaLabel}` : 'Edit'}
+        className={`text-subtext0 hover:text-mauve transition-colors p-0.5 rounded opacity-0 group-hover/edit:opacity-100 focus:opacity-100 ${
+          overlay ? 'absolute -top-1 -right-5 md:-right-6' : ''
+        }`}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="12"
+          height="12"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden="true"
+        >
+          <path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" />
+          <path d="m15 5 4 4" />
+        </svg>
+      </button>
+    </span>
+  );
+}
@@ -1,116 +0,0 @@
-import { useState, useEffect, type ReactElement } 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<Post[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState('');
-  const logout = useAuth(s => s.logout);
-
-  async function loadPosts() {
-    setLoading(true);
-    setError('');
-    try {
-      setPosts(await getPosts());
-    } catch (e) {
-      setError(e instanceof ApiError ? e.message : 'Failed to load posts.');
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  useEffect(() => { loadPosts(); }, []);
-
-  async function handleDelete(slug: string) {
-    if (!confirm(`Are you sure you want to delete "${slug}"?`)) return;
-    try {
-      await deletePost(slug);
-      loadPosts();
-    } catch {
-      setError('Failed to delete post.');
-    }
-  }
-
-  function handleLogout() {
-    logout();
-  }
-
-  return (
-    <>
-      <div className="flex justify-end mb-4">
-        <button onClick={handleLogout} className="text-red hover:text-maroon transition-colors font-medium">
-          Logout
-        </button>
-      </div>
-
-      {/* Quick Links */}
-      <div className="grid md:grid-cols-3 gap-8 mb-12">
-        <QuickLink href="/admin/editor" icon="write" title="Write Post" desc="Create or edit markdown posts." color="mauve" hoverColor="pink" />
-        <QuickLink href="/admin/assets" icon="assets" title="Asset Library" desc="Manage images and uploads." color="teal" hoverColor="green" />
-        <QuickLink href="/admin/settings" icon="settings" title="Settings" desc="Site title and themes." color="blue" hoverColor="sky" />
-      </div>
-
-      {/* Posts List */}
-      <section>
-        <h2 className="text-2xl font-bold text-mauve mb-6 flex items-center gap-3">
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
-          Manage Posts
-        </h2>
-        <div className="space-y-4">
-          {loading && (
-            <div className="animate-pulse flex space-x-4 p-8 glass">
-              <div className="flex-1 space-y-4 py-1">
-                <div className="h-4 bg-surface1 rounded w-3/4" />
-                <div className="h-4 bg-surface1 rounded w-1/2" />
-              </div>
-            </div>
-          )}
-          {error && <div className="glass p-8 text-center text-red">{error}</div>}
-          {!loading && posts.length === 0 && !error && (
-            <div className="glass p-8 text-center text-subtext0">No posts yet.</div>
-          )}
-          {posts.map(post => (
-            <div key={post.slug} className="glass p-6 flex justify-between items-center group hover:bg-surface0/50 transition-colors">
-              <div>
-                <h3 className="font-bold text-lavender text-lg">{post.title || post.slug}</h3>
-                <p className="text-xs text-subtext0" style={{ color: 'var(--subtext0)' }}>/posts/{post.slug}</p>
-              </div>
-              <div className="flex gap-3">
-                <a href={`/admin/editor?edit=${encodeURIComponent(post.slug)}`} className="p-2 text-blue hover:bg-blue/10 rounded transition-colors" title="Edit">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
-                </a>
-                <button onClick={() => handleDelete(post.slug)} className="p-2 text-red hover:bg-red/10 rounded transition-colors" title="Delete">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
-                </button>
-              </div>
-            </div>
-          ))}
-        </div>
-      </section>
-    </>
-  );
-}
-
-const ICONS: Record<string, ReactElement> = {
-  write: <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>,
-  assets: <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>,
-  settings: <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>,
-};
-
-function QuickLink({ href, icon, title, desc, color, hoverColor }: { href: string; icon: string; title: string; desc: string; color: string; hoverColor: string }) {
-  return (
-    <a href={href} className="group">
-      <div className="bg-surface0/50 p-8 rounded-xl border border-white/5 transition-all hover:bg-surface0 hover:scale-[1.02] h-full flex flex-col items-center text-center gap-4">
-        <div className={`bg-${color}/20 p-4 rounded-full text-${color}`}>
-          {ICONS[icon]}
-        </div>
-        <div>
-          <h2 className={`text-xl font-bold text-lavender group-hover:text-${hoverColor} transition-colors`}>{title}</h2>
-          <p className="text-xs text-subtext0 mt-1">{desc}</p>
-        </div>
-      </div>
-    </a>
-  );
-}