Simplify UI and seed default Arr links

frontend/src/app.tsx

@@ -16,7 +16,6 @@ export default function App() {
   const [links, setLinks] = useState<LinkItem[]>([]);
   const [page, setPage] = useState<Page>('loading');
   const [query, setQuery] = useState('');
-  const [editing, setEditing] = useState<LinkItem | null>(null);
 
   async function refresh() {
     const current = await api.request<SetupState>('/api/me');
@@ -46,27 +45,14 @@ export default function App() {
     return () => window.removeEventListener('popstate', handlePopState);
   }, []);
 
-  const filtered = useMemo(
-    () => links.filter((l) => l.enabled && `${l.name} ${l.description} ${l.category}`.toLowerCase().includes(query.toLowerCase())),
-    [links, query]
-  );
-  const categories = useMemo(() => {
-    const base = ['All'];
-    const visible = links
-      .filter((link) => link.enabled)
-      .map((link) => link.category)
-      .filter((value, index, array) => value && array.indexOf(value) === index);
-    return base.concat(visible.sort((a, b) => a.localeCompare(b)));
-  }, [links]);
-
-  if (page === 'loading') return <Shell><Centered>Loading Jellomator...</Centered></Shell>;
+  if (page === 'loading') return <Shell><Centered>Loading...</Centered></Shell>;
   if (page === 'setup') return <SetupPage onDone={refresh} />;
   if (page === 'login') return <LoginPage onDone={refresh} />;
 
   if (page === 'admin') {
     return (
       <Shell>
-        <div className="mx-auto max-w-7xl p-4 md:p-8">
+        <div className="container-wrap">
           <AdminHeader
             currentUser={state?.current_user?.username ?? null}
             onBack={() => nav('/')}
@@ -78,13 +64,11 @@ export default function App() {
           />
           <AdminPage
             links={links}
-            editing={editing}
-            setEditing={setEditing}
-            onSave={async (payload, file) => {
+            onSave={async (payload, file, editingId) => {
               const fd = toFormData(payload, file);
-              const url = editing ? `/api/links/${editing.id}` : '/api/links';
+              const url = editingId ? `/api/links/${editingId}` : '/api/links';
               try {
-                await api.request(url, { method: editing ? 'PATCH' : 'POST', body: fd });
+                await api.request(url, { method: editingId ? 'PATCH' : 'POST', body: fd });
               } catch (err) {
                 const message = err instanceof Error ? err.message : String(err);
                 if (message.includes('Link name already exists')) {
@@ -93,12 +77,10 @@ export default function App() {
                 }
                 throw err;
               }
-              setEditing(null);
               await refresh();
             }}
             onDelete={async (id) => {
               await api.request(`/api/links/${id}`, { method: 'DELETE' });
-              if (editing?.id === id) setEditing(null);
               await refresh();
             }}
           />
@@ -109,34 +91,17 @@ export default function App() {
 
   return (
     <Shell>
-      <div className="mx-auto max-w-7xl p-4 md:p-8">
-        <Hero
-          currentUser={state?.current_user?.username ?? null}
-          onAdmin={() => nav('/admin')}
-          onLogout={state?.current_user ? async () => { await api.request('/api/logout', { method: 'POST' }); await refresh(); } : undefined}
-        />
-        <div className="mt-6 grid gap-4 md:grid-cols-[320px_1fr]">
-          <div className="glass rounded-3xl p-4">
-            <input className="input" placeholder="Search services" value={query} onChange={(e) => setQuery(e.target.value)} />
-            <div className="mt-4 space-y-2 text-sm text-slate-400">
-              {categories.map((category) => (
-                <button
-                  key={category}
-                  type="button"
-                  className="block w-full rounded-xl px-3 py-2 text-left hover:bg-white/5"
-                  onClick={() => setQuery(category === 'All' ? '' : category)}
-                >
-                  {category}
-                </button>
-              ))}
-            </div>
-          </div>
-          <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
-            {filtered.map((link) => <Card key={link.id} link={link} />)}
-            {!filtered.length && <EmptyState title="No matching services" body="Try a different search or add a new link in the admin page." />}
-          </div>
-        </div>
-      </div>
+      <Dashboard
+        links={links}
+        query={query}
+        setQuery={setQuery}
+        canLogout={Boolean(state?.current_user)}
+        onAdmin={() => nav('/admin')}
+        onLogout={async () => {
+          await api.request('/api/logout', { method: 'POST' });
+          await refresh();
+        }}
+      />
     </Shell>
   );
 }
@@ -163,69 +128,105 @@ function Shell({ children }: { children: ReactNode }) {
 }
 
 function Centered({ children }: { children: ReactNode }) {
-  return <div className="grid min-h-screen place-items-center p-8 text-slate-400">{children}</div>;
+  return <div className="grid min-h-screen place-items-center p-8 text-slate-500">{children}</div>;
 }
 
-function Hero({ currentUser, onAdmin, onLogout }: { currentUser: string | null; onAdmin: () => void; onLogout?: () => Promise<void> }) {
+function Dashboard({
+  links,
+  query,
+  setQuery,
+  canLogout,
+  onAdmin,
+  onLogout,
+}: {
+  links: LinkItem[];
+  query: string;
+  setQuery: (value: string) => void;
+  canLogout: boolean;
+  onAdmin: () => void;
+  onLogout: () => Promise<void>;
+}) {
+  const activeLinks = useMemo(() => links.filter((link) => link.enabled), [links]);
+
+  const filtered = useMemo(() => {
+    const text = query.trim().toLowerCase();
+    if (!text) return activeLinks;
+    return activeLinks.filter((l) => `${l.name} ${l.description} ${l.category}`.toLowerCase().includes(text));
+  }, [activeLinks, query]);
+
+  const grouped = useMemo(() => {
+    const map = new Map<string, LinkItem[]>();
+    for (const link of filtered) {
+      const key = (link.category || 'General').trim() || 'General';
+      const list = map.get(key) ?? [];
+      list.push(link);
+      map.set(key, list);
+    }
+    return Array.from(map.entries())
+      .map(([category, items]) => ({ category, items: items.sort((a, b) => a.name.localeCompare(b.name)) }))
+      .sort((a, b) => a.category.localeCompare(b.category));
+  }, [filtered]);
+
   return (
-    <div className="glass relative overflow-hidden rounded-3xl p-6 md:p-10">
-      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(244,63,94,.22),transparent_30%)]" />
-      <div className="relative flex flex-col gap-6 md:flex-row md:items-end md:justify-between">
-        <div>
-          <div className="text-sm uppercase tracking-[0.3em] text-accent-300">Jellomator</div>
-          <h1 className="mt-3 text-4xl font-semibold md:text-6xl">Your media stack, one click away.</h1>
-          <p className="mt-4 max-w-2xl text-slate-300">Curated links for Arr* services and custom tools, served from a single database-backed container.</p>
+    <div className="container-wrap">
+      <header className="row-between">
+        <h1 className="title-sm">Jellomator</h1>
+        <div className="flex items-center gap-2">
+          {canLogout ? <button type="button" className="btn-subtle" onClick={onLogout}>Logout</button> : null}
+          <button type="button" className="btn-subtle" onClick={onAdmin}>Admin</button>
         </div>
-        <div className="flex flex-wrap gap-3">
-          {currentUser ? <button type="button" className="btn-secondary" onClick={onLogout}>Logout</button> : null}
-          <button type="button" className="btn-primary" onClick={onAdmin}>Admin</button>
-        </div>
-      </div>
+      </header>
+
+      <input
+        className="input"
+        placeholder="Search links"
+        value={query}
+        onChange={(event) => setQuery(event.target.value)}
+      />
+
+      <main className="mt-4 space-y-4">
+        {grouped.map((group) => (
+          <section key={group.category} className="panel">
+            <h2 className="section-title">{group.category}</h2>
+            <ul className="link-list">
+              {group.items.map((link) => (
+                <li key={link.id}>
+                  <a href={link.url} target="_blank" rel="noreferrer" className="link-row">
+                    <span className="link-name">{link.name}</span>
+                    <span className="link-description">{link.description || link.url}</span>
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </section>
+        ))}
+
+        {!grouped.length && <EmptyState title="No links found" body="No enabled links match your search." />}
+      </main>
     </div>
   );
 }
 
 function AdminHeader({ currentUser, onBack, onLogout }: { currentUser: string | null; onBack: () => void; onLogout: () => Promise<void> }) {
   return (
-    <div className="mb-6 flex flex-wrap items-center justify-between gap-3">
+    <div className="row-between">
       <div>
-        <div className="text-sm uppercase tracking-[0.3em] text-accent-300">Protected admin</div>
-        <h1 className="mt-2 text-3xl font-semibold">Manage links</h1>
-        <p className="mt-2 text-sm text-slate-400">{currentUser ? `Signed in as ${currentUser}` : 'Sign in required'}</p>
+        <h1 className="title-sm">Manage links</h1>
+        <p className="mt-1 text-xs text-slate-500">{currentUser ? `Signed in as ${currentUser}` : 'Sign in required'}</p>
       </div>
-      <div className="flex gap-3">
-        <button type="button" className="btn-secondary" onClick={onBack}>Back to dashboard</button>
-        <button type="button" className="btn-secondary" onClick={onLogout}>Logout</button>
+      <div className="flex gap-2">
+        <button type="button" className="btn-subtle" onClick={onBack}>Back</button>
+        <button type="button" className="btn-subtle" onClick={onLogout}>Logout</button>
       </div>
     </div>
   );
 }
 
-function Card({ link }: { link: LinkItem }) {
-  return (
-    <a href={link.url} target="_blank" rel="noreferrer" className="glass block rounded-3xl p-5 transition hover:-translate-y-1">
-      <div className="flex items-start gap-4">
-        <div className="grid h-12 w-12 place-items-center overflow-hidden rounded-2xl bg-white/5 p-1">
-          {link.icon_url ? <img src={link.icon_url} className="h-full w-full object-contain" alt="" /> : <span className="font-semibold text-accent-300">{link.name[0]}</span>}
-        </div>
-        <div className="min-w-0">
-          <div className="flex items-center gap-2">
-            <h3 className="font-semibold">{link.name}</h3>
-            <span className="rounded-full bg-accent-500/10 px-2 py-0.5 text-xs text-accent-200">{link.category}</span>
-          </div>
-          <p className="mt-1 text-sm text-slate-400">{link.description}</p>
-        </div>
-      </div>
-      <div className="mt-4 text-sm text-accent-300">Launch service →</div>
-    </a>
-  );
-}
-
 function EmptyState({ title, body }: { title: string; body: string }) {
   return (
-    <div className="glass rounded-3xl p-10 text-slate-400">
-      <h3 className="text-lg font-medium text-slate-100">{title}</h3>
-      <p className="mt-2 text-sm">{body}</p>
+    <div className="panel text-slate-500">
+      <h3 className="text-sm font-medium text-slate-200">{title}</h3>
+      <p className="mt-1 text-sm">{body}</p>
     </div>
   );
 }
@@ -273,18 +274,18 @@ function AuthCard({
   return (
     <div className="grid min-h-screen place-items-center p-4">
       <form
-        className="glass w-full max-w-md space-y-4 rounded-3xl p-6"
+        className="panel w-full max-w-sm space-y-3"
         onSubmit={async (e) => {
           e.preventDefault();
           await onSubmit(new FormData(e.currentTarget));
           location.reload();
         }}
       >
-        <h1 className="text-2xl font-semibold">{title}</h1>
+        <h1 className="title-sm">{title}</h1>
         {fields.map((f) => (
           <input key={f} name={f} type={f === 'password' ? 'password' : 'text'} className="input" placeholder={f} required />
         ))}
-        <button className="btn-primary w-full" type="submit">{action}</button>
+        <button className="btn-subtle w-full" type="submit">{action}</button>
       </form>
     </div>
   );
@@ -292,119 +293,77 @@ function AuthCard({
 
 function AdminPage({
   links,
-  editing,
-  setEditing,
   onSave,
   onDelete,
 }: {
   links: LinkItem[];
-  editing: LinkItem | null;
-  setEditing: (link: LinkItem | null) => void;
-  onSave: (payload: LinkForm, file?: File | null) => Promise<void>;
+  onSave: (payload: LinkForm, file?: File | null, editingId?: number) => Promise<void>;
   onDelete: (id: number) => Promise<void>;
 }) {
   const [form, setForm] = useState<LinkForm>(emptyForm());
   const [file, setFile] = useState<File | null>(null);
-  const [preview, setPreview] = useState<string | null>(null);
+  const [editingId, setEditingId] = useState<number | null>(null);
 
-  useEffect(() => {
-    if (editing) {
-      setForm({
-        name: editing.name,
-        url: editing.url,
-        description: editing.description,
-        category: editing.category,
-        icon_url: editing.icon_url ?? '',
-        enabled: editing.enabled,
-      });
-      setFile(null);
-      setPreview(editing.icon_url);
-    } else {
-      setForm(emptyForm());
-      setFile(null);
-      setPreview(null);
-    }
-  }, [editing]);
+  const startEdit = (link: LinkItem) => {
+    setEditingId(link.id);
+    setFile(null);
+    setForm({
+      name: link.name,
+      url: link.url,
+      description: link.description,
+      category: link.category,
+      icon_url: link.icon_url ?? '',
+      enabled: link.enabled,
+    });
+  };
 
-  useEffect(() => {
-    if (!file) return;
-    const objectUrl = URL.createObjectURL(file);
-    setPreview(objectUrl);
-    return () => URL.revokeObjectURL(objectUrl);
-  }, [file]);
+  const reset = () => {
+    setEditingId(null);
+    setFile(null);
+    setForm(emptyForm());
+  };
 
   return (
-    <div className="grid gap-6 lg:grid-cols-[420px_1fr]">
-      <div className="glass rounded-3xl p-6">
-        <div className="flex items-center justify-between">
-          <h2 className="text-xl font-semibold">{editing ? 'Edit link' : 'Create link'}</h2>
-          {editing ? <button type="button" className="btn-secondary px-3 py-2" onClick={() => setEditing(null)}>Reset</button> : null}
+    <div className="mt-4 grid gap-4 lg:grid-cols-[320px_1fr]">
+      <form
+        className="panel space-y-2"
+        onSubmit={async (event) => {
+          event.preventDefault();
+          await onSave(form, file, editingId ?? undefined);
+          reset();
+        }}
+      >
+        <input className="input" value={form.name} placeholder="name" onChange={(e) => setForm({ ...form, name: e.target.value })} required />
+        <input className="input" value={form.url} placeholder="url" onChange={(e) => setForm({ ...form, url: e.target.value })} required />
+        <input className="input" value={form.description} placeholder="description" onChange={(e) => setForm({ ...form, description: e.target.value })} />
+        <input className="input" value={form.category} placeholder="category" onChange={(e) => setForm({ ...form, category: e.target.value })} />
+        <input className="input" value={form.icon_url} placeholder="icon URL" onChange={(e) => setForm({ ...form, icon_url: e.target.value })} />
+        <input className="input" type="file" accept="image/*" onChange={(e) => setFile(e.target.files?.[0] ?? null)} />
+        <label className="flex items-center gap-2 text-xs text-slate-400">
+          <input type="checkbox" checked={form.enabled} onChange={(e) => setForm({ ...form, enabled: e.target.checked })} />
+          Enabled
+        </label>
+        <div className="flex gap-2 pt-1">
+          <button type="submit" className="btn-subtle">{editingId ? 'Update' : 'Add'}</button>
+          {editingId ? <button type="button" className="btn-subtle" onClick={reset}>Cancel</button> : null}
         </div>
+      </form>
 
-        <div className="mt-5 space-y-3">
-          <input className="input" value={form.name} placeholder="name" onChange={(e) => setForm({ ...form, name: e.target.value })} />
-          <input className="input" value={form.url} placeholder="url" onChange={(e) => setForm({ ...form, url: e.target.value })} />
-          <input className="input" value={form.description} placeholder="description" onChange={(e) => setForm({ ...form, description: e.target.value })} />
-          <input className="input" value={form.category} placeholder="category" onChange={(e) => setForm({ ...form, category: e.target.value })} />
-          <input className="input" value={form.icon_url} placeholder="icon URL fallback" onChange={(e) => setForm({ ...form, icon_url: e.target.value })} />
-          <input className="input file:mr-4 file:rounded-lg file:border-0 file:bg-accent-500 file:px-4 file:py-2 file:text-white" type="file" accept="image/*" onChange={(e) => setFile(e.target.files?.[0] ?? null)} />
-          <label className="flex items-center gap-2 text-sm text-slate-300">
-            <input type="checkbox" checked={form.enabled} onChange={(e) => setForm({ ...form, enabled: e.target.checked })} />
-            Enabled
-          </label>
-          <div className="flex flex-wrap gap-3">
-            <button type="button" className="btn-primary" onClick={() => onSave(form, file)}>Save link</button>
-            <button type="button" className="btn-secondary" onClick={() => setEditing(null)}>New</button>
-          </div>
-        </div>
-
-        <div className="mt-6">
-          <div className="text-sm text-slate-400">Live preview</div>
-          <div className="mt-3 rounded-2xl border border-white/10 bg-white/5 p-4">
-            <div className="flex items-start gap-4">
-              <div className="grid h-12 w-12 place-items-center overflow-hidden rounded-2xl bg-white/5 p-1">
-                {preview ? <img src={preview} className="h-full w-full object-contain" alt="" /> : <span className="font-semibold text-accent-300">{form.name ? form.name[0] : 'S'}</span>}
+      <div className="panel">
+        <ul className="admin-list">
+          {links.map((link) => (
+            <li key={link.id} className="admin-row">
+              <div className="min-w-0">
+                <div className="truncate text-sm text-slate-100">{link.name}</div>
+                <div className="truncate text-xs text-slate-500">{link.category || 'General'} | {link.enabled ? 'enabled' : 'disabled'}</div>
               </div>
-              <div>
-                <div className="font-semibold">{form.name || 'Service name'}</div>
-                <div className="text-sm text-slate-400">{form.description || 'Description preview'}</div>
-                <div className="mt-2 text-xs text-accent-300">{form.category || 'Category'}</div>
+              <div className="flex gap-2">
+                <button type="button" className="btn-subtle" onClick={() => startEdit(link)}>Edit</button>
+                <button type="button" className="btn-subtle" onClick={() => onDelete(link.id)}>Delete</button>
               </div>
-            </div>
-            <div className="mt-3 text-xs text-slate-500">{file ? `Selected file: ${file.name}` : 'File upload or icon URL fallback will be used for the service icon.'}</div>
-          </div>
-        </div>
-      </div>
-
-      <div className="space-y-6">
-        <div className="glass rounded-3xl p-6">
-          <h2 className="text-xl font-semibold">Existing links</h2>
-          <div className="mt-4 overflow-hidden rounded-2xl border border-white/10">
-            <table className="w-full text-left text-sm">
-              <thead className="bg-slate-900">
-                <tr>
-                  <th className="p-3">Name</th>
-                  <th className="p-3">Category</th>
-                  <th className="p-3">State</th>
-                  <th className="p-3 text-right"></th>
-                </tr>
-              </thead>
-              <tbody>
-                {links.map((link) => (
-                  <tr key={link.id} className="border-t border-white/5">
-                    <td className="p-3">{link.name}</td>
-                    <td className="p-3 text-slate-400">{link.category}</td>
-                    <td className="p-3 text-slate-400">{link.enabled ? 'Enabled' : 'Disabled'}</td>
-                    <td className="p-3 text-right space-x-2">
-                      <button type="button" className="btn-secondary px-3 py-1" onClick={() => setEditing(link)}>Edit</button>
-                      <button type="button" className="btn-secondary px-3 py-1" onClick={() => onDelete(link.id)}>Delete</button>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </div>
+            </li>
+          ))}
+        </ul>
       </div>
     </div>
   );

frontend/src/styles.css

@@ -2,16 +2,67 @@
 @tailwind components;
 @tailwind utilities;
 
-:root { color-scheme: dark; }
+:root {
+  color-scheme: dark;
+}
+
+* {
+  box-sizing: border-box;
+}
+
 body {
   @apply bg-slate-950 text-slate-100;
-  background-image:
-    radial-gradient(circle at top, rgba(244,63,94,.18), transparent 35%),
-    linear-gradient(180deg, rgba(15,23,42,1) 0%, rgba(2,6,23,1) 100%);
+  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
+}
+
+.container-wrap {
+  @apply mx-auto max-w-4xl p-4 md:p-6;
+}
+
+.panel {
+  @apply rounded-xl border border-slate-800 bg-slate-900/80 p-4;
+}
+
+.row-between {
+  @apply mb-4 flex items-center justify-between gap-3;
+}
+
+.title-sm {
+  @apply text-base font-semibold tracking-wide;
+}
+
+.section-title {
+  @apply mb-2 text-xs uppercase tracking-[0.18em] text-slate-400;
+}
+
+.input {
+  @apply w-full rounded-lg border border-slate-800 bg-slate-950 px-3 py-2 text-sm text-slate-100 placeholder:text-slate-600 outline-none transition focus:border-slate-600;
+}
+
+.btn-subtle {
+  @apply inline-flex items-center justify-center rounded-md border border-slate-700 bg-slate-900 px-3 py-1.5 text-xs text-slate-200 transition hover:border-slate-500 hover:text-white;
+}
+
+.link-list {
+  @apply space-y-1;
+}
+
+.link-row {
+  @apply block rounded-md px-2 py-2 transition hover:bg-slate-800;
+}
+
+.link-name {
+  @apply block text-sm font-medium text-slate-100;
+}
+
+.link-description {
+  @apply block truncate text-xs text-slate-500;
+}
+
+.admin-list {
+  @apply divide-y divide-slate-800;
+}
+
+.admin-row {
+  @apply flex items-center justify-between gap-3 py-2;
 }
-* { box-sizing: border-box; }
-.glass { @apply bg-white/5 backdrop-blur-xl border border-white/10; }
-.input { @apply w-full rounded-xl border border-white/10 bg-slate-900/80 px-4 py-3 text-slate-100 placeholder:text-slate-500 outline-none transition focus:border-accent-500 focus:ring-2 focus:ring-accent-500/20; }
-.btn { @apply inline-flex items-center justify-center rounded-xl px-4 py-3 font-medium transition; }
-.btn-primary { @apply btn bg-accent-500 text-white hover:bg-accent-400 shadow-glow; }
-.btn-secondary { @apply btn bg-white/5 text-slate-100 hover:bg-white/10 border border-white/10; }