migrated to react

2026-03-27 22:15:50 +01:00
parent 11ac1e008f
commit 176f821598
24 changed files with 2281 additions and 888 deletions
@@ -0,0 +1,115 @@
+import { useState, useEffect } from 'react';
+import { getConfig, updateConfig, ApiError } from '../../../lib/api';
+import type { SiteConfig } from '../../../lib/types';
+
+export default function Settings() {
+  const [config, setConfig] = useState<Partial<SiteConfig>>({});
+  const [alert, setAlert] = useState<{ msg: string; type: 'success' | 'error' } | null>(null);
+
+  useEffect(() => {
+    getConfig()
+      .then(setConfig)
+      .catch(() => showAlert('Failed to load settings from server.', 'error'));
+  }, []);
+
+  function showAlert(msg: string, type: 'success' | 'error') {
+    setAlert({ msg, type });
+    setTimeout(() => setAlert(null), 5000);
+  }
+
+  function update(key: keyof SiteConfig, value: string) {
+    setConfig(prev => ({ ...prev, [key]: value }));
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    try {
+      await updateConfig(config);
+      showAlert('Settings saved successfully! Refresh to see changes.', 'success');
+    } catch (e) {
+      showAlert(e instanceof ApiError ? `Error: ${e.message}` : 'Failed to save settings.', 'error');
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-8">
+      {alert && (
+        <div className={`p-4 rounded-lg mb-6 text-sm font-semibold text-center backdrop-blur-sm ${
+          alert.type === 'success'
+            ? 'bg-green/15 text-green border border-green/30'
+            : 'bg-red/15 text-red border border-red/30'
+        }`}>
+          {alert.msg}
+        </div>
+      )}
+
+      <section className="space-y-6">
+        <h2 className="text-xl font-bold text-lavender border-l-4 border-lavender pl-4">General Identity</h2>
+        <div className="grid md:grid-cols-2 gap-6">
+          <Field label="Blog Title (Nav)" value={config.title || ''} onChange={v => update('title', v)} />
+          <Field label="Nav Subtitle" value={config.subtitle || ''} onChange={v => update('subtitle', v)} />
+          <Field label="Welcome Title (Frontpage)" value={config.welcome_title || ''} onChange={v => update('welcome_title', v)} />
+          <Field label="Welcome Subtitle" value={config.welcome_subtitle || ''} onChange={v => update('welcome_subtitle', v)} />
+        </div>
+        <div>
+          <Field label="Favicon URL" value={config.favicon || ''} onChange={v => update('favicon', v)} hint="URL to the icon shown in browser tabs." />
+        </div>
+      </section>
+
+      <section className="space-y-6">
+        <h2 className="text-xl font-bold text-blue border-l-4 border-blue pl-4">Appearance</h2>
+        <div>
+          <label className="block text-sm font-medium text-subtext1 mb-2">Color Theme (Catppuccin)</label>
+          <select
+            value={config.theme || 'mocha'}
+            onChange={e => update('theme', e.target.value)}
+            className="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors"
+          >
+            <option value="mocha">Mocha (Dark, High Contrast)</option>
+            <option value="macchiato">Macchiato (Dark, Medium Contrast)</option>
+            <option value="frappe">Frappe (Dark, Low Contrast)</option>
+            <option value="latte">Latte (Light Mode)</option>
+            <option value="scaled-and-icy">Scaled and Icy (Vibrant Light)</option>
+          </select>
+          <p className="text-[10px] text-subtext0 mt-1">Select a predefined Catppuccin color palette.</p>
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-subtext1 mb-2">Custom CSS</label>
+          <textarea
+            value={config.custom_css || ''}
+            onChange={e => update('custom_css', e.target.value)}
+            rows={4}
+            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 text-xs"
+            placeholder="body { ... }"
+          />
+          <p className="text-[10px] text-subtext0 mt-1">Inject custom CSS styles globally.</p>
+        </div>
+      </section>
+
+      <section className="space-y-6">
+        <h2 className="text-xl font-bold text-teal border-l-4 border-teal pl-4">Footer</h2>
+        <Field label="Footer Text" value={config.footer || ''} onChange={v => update('footer', v)} />
+      </section>
+
+      <button type="submit" className="w-full md:w-auto bg-mauve text-crust font-bold py-4 px-12 rounded-lg hover:bg-pink transition-all transform hover:scale-[1.02] active:scale-[0.98]">
+        Save Site Configuration
+      </button>
+    </form>
+  );
+}
+
+function Field({ label, value, onChange, hint }: { label: string; value: string; onChange: (v: string) => void; hint?: string }) {
+  return (
+    <div>
+      <label className="block text-sm font-medium text-subtext1 mb-2">{label}</label>
+      <input
+        type="text"
+        value={value}
+        onChange={e => onChange(e.target.value)}
+        required
+        className="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors"
+      />
+      {hint && <p className="text-[10px] text-subtext0 mt-1">{hint}</p>}
+    </div>
+  );
+}