Add Accounts menu and mobile card layouts; reorganize admin IA.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/admin-ui/src/app/accounts/page.tsx

@@ -0,0 +1,575 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { Nav, useAuth } from "@/components/Nav";
+
+interface AddonTokenRow {
+  id: string;
+  label: string | null;
+  revoked: boolean;
+  createdAt: string;
+  hasIptv?: boolean;
+  iptvOk?: boolean;
+}
+
+interface IptvForm {
+  label: string;
+  baseUrl: string;
+  username: string;
+  password: string;
+  enableLive: boolean;
+  enableVod: boolean;
+  enableSeries: boolean;
+  lastOkAt?: string | null;
+  lastError?: string | null;
+  hasPassword?: boolean;
+}
+
+const emptyIptv = (): IptvForm => ({
+  label: "",
+  baseUrl: "",
+  username: "",
+  password: "",
+  enableLive: true,
+  enableVod: true,
+  enableSeries: true,
+});
+
+const MASTER_URL = "https://master.vonas.nl";
+
+export default function AccountsPage() {
+  useAuth();
+  const [tokens, setTokens] = useState<AddonTokenRow[]>([]);
+  const [addonToken, setAddonToken] = useState("");
+  const [installUrl, setInstallUrl] = useState("");
+  const [label, setLabel] = useState("Stremio");
+  const [iptvTokenId, setIptvTokenId] = useState<string | null>(null);
+  const [iptv, setIptv] = useState<IptvForm>(emptyIptv());
+  const [iptvBusy, setIptvBusy] = useState(false);
+  const [iptvMsg, setIptvMsg] = useState<string | null>(null);
+  const [iptvErr, setIptvErr] = useState<string | null>(null);
+  const [adminEmail, setAdminEmail] = useState("");
+  const [currentPassword, setCurrentPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [pwBusy, setPwBusy] = useState(false);
+  const [pwMsg, setPwMsg] = useState<string | null>(null);
+  const [pwErr, setPwErr] = useState<string | null>(null);
+
+  const loadTokens = useCallback(() => {
+    fetch("/api/v1/admin/addon-tokens", { credentials: "include" })
+      .then((r) => r.json())
+      .then((d) => setTokens(d.tokens ?? []));
+  }, []);
+
+  useEffect(() => {
+    loadTokens();
+    fetch("/api/v1/auth/me", { credentials: "include" })
+      .then((r) => r.json())
+      .then((d) => setAdminEmail(d.user?.email ?? ""))
+      .catch(() => undefined);
+  }, [loadTokens]);
+
+  async function changePassword() {
+    setPwMsg(null);
+    setPwErr(null);
+    if (!currentPassword || !newPassword) {
+      setPwErr("Vul huidig en nieuw wachtwoord in");
+      return;
+    }
+    if (newPassword.length < 8) {
+      setPwErr("Nieuw wachtwoord moet minstens 8 tekens zijn");
+      return;
+    }
+    if (newPassword !== confirmPassword) {
+      setPwErr("Nieuwe wachtwoorden komen niet overeen");
+      return;
+    }
+    setPwBusy(true);
+    try {
+      const res = await fetch("/api/v1/auth/change-password", {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ currentPassword, newPassword, confirmPassword }),
+      });
+      const data = await res.json().catch(() => ({}));
+      if (!res.ok) {
+        setPwErr(data.error?.message ?? "Wachtwoord wijzigen mislukt");
+        return;
+      }
+      setCurrentPassword("");
+      setNewPassword("");
+      setConfirmPassword("");
+      setPwMsg("Wachtwoord gewijzigd. Andere sessies zijn uitgelogd.");
+    } finally {
+      setPwBusy(false);
+    }
+  }
+
+  async function createAddonToken() {
+    const res = await fetch("/api/v1/admin/addon-tokens", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      credentials: "include",
+      body: JSON.stringify({ label }),
+    });
+    const data = await res.json();
+    if (!res.ok) {
+      alert(data.error?.message ?? "Aanmaken mislukt");
+      return;
+    }
+    setAddonToken(data.token);
+    setInstallUrl(`${MASTER_URL}/stremio/${data.token}/manifest.json`);
+    loadTokens();
+  }
+
+  async function revokeToken(id: string) {
+    if (!confirm("Addon deactiveren? Bestaande Stremio-installaties stoppen met werken.")) return;
+    await fetch(`/api/v1/admin/addon-tokens/${id}/revoke`, {
+      method: "POST",
+      credentials: "include",
+    });
+    loadTokens();
+  }
+
+  async function activateToken(id: string) {
+    await fetch(`/api/v1/admin/addon-tokens/${id}/activate`, {
+      method: "POST",
+      credentials: "include",
+    });
+    loadTokens();
+  }
+
+  async function deleteToken(id: string) {
+    if (!confirm("Addon definitief verwijderen? Dit kan niet ongedaan worden gemaakt.")) return;
+    await fetch(`/api/v1/admin/addon-tokens/${id}`, {
+      method: "DELETE",
+      credentials: "include",
+    });
+    if (iptvTokenId === id) {
+      setIptvTokenId(null);
+      setIptv(emptyIptv());
+    }
+    loadTokens();
+  }
+
+  async function openIptv(tokenId: string) {
+    setIptvTokenId(tokenId);
+    setIptvMsg(null);
+    setIptvErr(null);
+    setIptvBusy(true);
+    try {
+      const res = await fetch(`/api/v1/admin/addon-tokens/${tokenId}/iptv`, {
+        credentials: "include",
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        setIptvErr(data.error?.message ?? "Laden mislukt");
+        setIptv(emptyIptv());
+        return;
+      }
+      if (data.iptv) {
+        setIptv({
+          label: data.iptv.label ?? "",
+          baseUrl: data.iptv.baseUrl ?? "",
+          username: data.iptv.username ?? "",
+          password: "",
+          enableLive: data.iptv.enableLive ?? true,
+          enableVod: data.iptv.enableVod ?? true,
+          enableSeries: data.iptv.enableSeries ?? true,
+          lastOkAt: data.iptv.lastOkAt,
+          lastError: data.iptv.lastError,
+          hasPassword: data.iptv.hasPassword,
+        });
+      } else {
+        setIptv(emptyIptv());
+      }
+    } finally {
+      setIptvBusy(false);
+    }
+  }
+
+  async function saveIptv() {
+    if (!iptvTokenId) return;
+    setIptvBusy(true);
+    setIptvMsg(null);
+    setIptvErr(null);
+    try {
+      const res = await fetch(`/api/v1/admin/addon-tokens/${iptvTokenId}/iptv`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        credentials: "include",
+        body: JSON.stringify({
+          label: iptv.label || undefined,
+          baseUrl: iptv.baseUrl,
+          username: iptv.username,
+          password: iptv.password || undefined,
+          enableLive: iptv.enableLive,
+          enableVod: iptv.enableVod,
+          enableSeries: iptv.enableSeries,
+        }),
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        setIptvErr(data.error?.message ?? "Opslaan mislukt");
+        return;
+      }
+      setIptvMsg(
+        `Verbonden · ${data.iptv?.liveCategories ?? 0} live-bouquets. Herlaad de Stremio-addon om Live TV te zien.`
+      );
+      setIptv((s) => ({ ...s, password: "", hasPassword: true, lastError: null }));
+      loadTokens();
+      await openIptv(iptvTokenId);
+    } finally {
+      setIptvBusy(false);
+    }
+  }
+
+  async function testIptv() {
+    if (!iptvTokenId) return;
+    setIptvBusy(true);
+    setIptvMsg(null);
+    setIptvErr(null);
+    try {
+      const res = await fetch(`/api/v1/admin/addon-tokens/${iptvTokenId}/iptv/test`, {
+        method: "POST",
+        credentials: "include",
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        setIptvErr(data.error?.message ?? "Test mislukt");
+        return;
+      }
+      setIptvMsg(
+        `OK · status ${data.status}` +
+          (data.expDate ? ` · exp ${data.expDate}` : "") +
+          ` · live ${data.liveCategories} · films ${data.vodCategories} · series ${data.seriesCategories}`
+      );
+      loadTokens();
+    } finally {
+      setIptvBusy(false);
+    }
+  }
+
+  async function deleteIptv() {
+    if (!iptvTokenId) return;
+    if (!confirm("IPTV-userline ontkoppelen van deze addon?")) return;
+    setIptvBusy(true);
+    setIptvErr(null);
+    try {
+      await fetch(`/api/v1/admin/addon-tokens/${iptvTokenId}/iptv`, {
+        method: "DELETE",
+        credentials: "include",
+      });
+      setIptv(emptyIptv());
+      setIptvMsg("IPTV ontkoppeld");
+      loadTokens();
+    } finally {
+      setIptvBusy(false);
+    }
+  }
+
+  const activeToken = tokens.find((t) => t.id === iptvTokenId);
+
+  return (
+    <>
+      <Nav />
+      <div className="container">
+        <div className="page-header">
+          <div>
+            <div className="page-kicker">Access</div>
+            <h1>Accounts</h1>
+          </div>
+        </div>
+
+        <section className="stack-section">
+          <div className="section-head">
+            <h2 className="section-title">Admin-login</h2>
+            <p className="muted">Ingelogd als {adminEmail || "…"}</p>
+          </div>
+          <div className="card">
+            {pwErr && <div className="error">{pwErr}</div>}
+            {pwMsg && (
+              <p className="muted" style={{ color: "var(--ok)", marginBottom: "0.75rem" }}>
+                {pwMsg}
+              </p>
+            )}
+            <div className="form-group">
+              <label>Huidig wachtwoord</label>
+              <input
+                type="password"
+                value={currentPassword}
+                onChange={(e) => setCurrentPassword(e.target.value)}
+                autoComplete="current-password"
+              />
+            </div>
+            <div className="form-group">
+              <label>Nieuw wachtwoord</label>
+              <input
+                type="password"
+                value={newPassword}
+                onChange={(e) => setNewPassword(e.target.value)}
+                autoComplete="new-password"
+              />
+            </div>
+            <div className="form-group">
+              <label>Bevestig nieuw wachtwoord</label>
+              <input
+                type="password"
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                autoComplete="new-password"
+              />
+            </div>
+            <button type="button" onClick={changePassword} disabled={pwBusy}>
+              {pwBusy ? "Bezig…" : "Wachtwoord wijzigen"}
+            </button>
+          </div>
+        </section>
+
+        <section className="stack-section">
+          <div className="section-head">
+            <h2 className="section-title">Stremio-addons</h2>
+            <p className="muted">Eén addon = één kijker-label in Streams (Live).</p>
+          </div>
+
+          <div className="card">
+            <h3 className="card-subtitle">Nieuwe addon</h3>
+            <div className="form-group">
+              <label>Label</label>
+              <input
+                value={label}
+                onChange={(e) => setLabel(e.target.value)}
+                placeholder="bijv. Jos / Thuis / TV"
+              />
+            </div>
+            <button onClick={createAddonToken}>Addon aanmaken</button>
+            {addonToken && (
+              <>
+                <p className="muted" style={{ marginTop: "1rem" }}>
+                  Installatie-URL (nu kopiëren — wordt maar één keer getoond):
+                </p>
+                <div className="token-display">{installUrl}</div>
+              </>
+            )}
+          </div>
+
+          <div className="card">
+            <h3 className="card-subtitle">Bestaande addons</h3>
+
+            <div className="desktop-table">
+              <table>
+                <thead>
+                  <tr>
+                    <th>Label</th>
+                    <th>Status</th>
+                    <th>IPTV</th>
+                    <th>Aangemaakt</th>
+                    <th>Acties</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {tokens.map((t) => (
+                    <tr key={t.id} className={iptvTokenId === t.id ? "row-selected" : undefined}>
+                      <td>{t.label || "—"}</td>
+                      <td>
+                        <span className={`status ${t.revoked ? "revoked" : "online"}`}>
+                          {t.revoked ? "Inactief" : "Actief"}
+                        </span>
+                      </td>
+                      <td>
+                        {t.hasIptv ? (
+                          <span className={`status ${t.iptvOk ? "online" : "revoked"}`}>
+                            {t.iptvOk ? "Live TV" : "Fout"}
+                          </span>
+                        ) : (
+                          <span className="status offline">Geen</span>
+                        )}
+                      </td>
+                      <td>{new Date(t.createdAt).toLocaleString()}</td>
+                      <td>
+                        <div className="action-row">
+                          <button type="button" className="btn-cyan" onClick={() => openIptv(t.id)}>
+                            IPTV
+                          </button>
+                          {t.revoked ? (
+                            <button type="button" className="btn-ok" onClick={() => activateToken(t.id)}>
+                              Activeren
+                            </button>
+                          ) : (
+                            <button type="button" className="btn-warn" onClick={() => revokeToken(t.id)}>
+                              Deactiveren
+                            </button>
+                          )}
+                          <button type="button" className="danger" onClick={() => deleteToken(t.id)}>
+                            Verwijderen
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                  {tokens.length === 0 && (
+                    <tr>
+                      <td colSpan={5} className="muted" style={{ textAlign: "center" }}>
+                        Nog geen addons
+                      </td>
+                    </tr>
+                  )}
+                </tbody>
+              </table>
+            </div>
+
+            <div className="list-cards">
+              {tokens.map((t) => (
+                <article key={t.id} className={`list-card${iptvTokenId === t.id ? " selected" : ""}`}>
+                  <div className="list-card-top">
+                    <strong>{t.label || "Zonder label"}</strong>
+                    <span className={`status ${t.revoked ? "revoked" : "online"}`}>
+                      {t.revoked ? "Inactief" : "Actief"}
+                    </span>
+                  </div>
+                  <div className="list-card-meta">
+                    <span>
+                      IPTV:{" "}
+                      {t.hasIptv ? (t.iptvOk ? "OK" : "Fout") : "geen"}
+                    </span>
+                    <span>{new Date(t.createdAt).toLocaleDateString()}</span>
+                  </div>
+                  <div className="action-row">
+                    <button type="button" className="btn-cyan" onClick={() => openIptv(t.id)}>
+                      IPTV
+                    </button>
+                    {t.revoked ? (
+                      <button type="button" className="btn-ok" onClick={() => activateToken(t.id)}>
+                        Activeren
+                      </button>
+                    ) : (
+                      <button type="button" className="btn-warn" onClick={() => revokeToken(t.id)}>
+                        Deactiveren
+                      </button>
+                    )}
+                    <button type="button" className="danger" onClick={() => deleteToken(t.id)}>
+                      Verwijderen
+                    </button>
+                  </div>
+                </article>
+              ))}
+              {tokens.length === 0 && <p className="muted">Nog geen addons</p>}
+            </div>
+          </div>
+        </section>
+
+        {iptvTokenId && (
+          <section className="stack-section">
+            <div className="card iptv-card">
+              <div className="section-head row">
+                <div>
+                  <h2 className="section-title">IPTV · Xtream / XUI</h2>
+                  <p className="muted">
+                    Userline voor{" "}
+                    <strong style={{ color: "var(--text-bright)" }}>
+                      {activeToken?.label || iptvTokenId.slice(0, 8)}
+                    </strong>
+                  </p>
+                </div>
+                <button
+                  type="button"
+                  className="ghost"
+                  onClick={() => {
+                    setIptvTokenId(null);
+                    setIptv(emptyIptv());
+                    setIptvMsg(null);
+                    setIptvErr(null);
+                  }}
+                >
+                  Sluiten
+                </button>
+              </div>
+
+              <div className="form-grid">
+                <div className="form-group" style={{ marginBottom: 0 }}>
+                  <label>Label</label>
+                  <input
+                    value={iptv.label}
+                    onChange={(e) => setIptv({ ...iptv, label: e.target.value })}
+                    placeholder="bijv. Thuis XUI"
+                  />
+                </div>
+                <div className="form-group form-span" style={{ marginBottom: 0 }}>
+                  <label>Server-URL</label>
+                  <input
+                    value={iptv.baseUrl}
+                    onChange={(e) => setIptv({ ...iptv, baseUrl: e.target.value })}
+                    placeholder="http://host:port"
+                    autoComplete="off"
+                  />
+                </div>
+                <div className="form-group" style={{ marginBottom: 0 }}>
+                  <label>Gebruikersnaam</label>
+                  <input
+                    value={iptv.username}
+                    onChange={(e) => setIptv({ ...iptv, username: e.target.value })}
+                    autoComplete="off"
+                  />
+                </div>
+                <div className="form-group" style={{ marginBottom: 0 }}>
+                  <label>Wachtwoord {iptv.hasPassword ? "(leeg = behouden)" : ""}</label>
+                  <input
+                    type="password"
+                    value={iptv.password}
+                    onChange={(e) => setIptv({ ...iptv, password: e.target.value })}
+                    placeholder={iptv.hasPassword ? "••••••••" : ""}
+                    autoComplete="new-password"
+                  />
+                </div>
+              </div>
+
+              <div className="check-row">
+                {(
+                  [
+                    ["enableLive", "Live TV + EPG"],
+                    ["enableVod", "IPTV Films"],
+                    ["enableSeries", "IPTV Series"],
+                  ] as const
+                ).map(([key, text]) => (
+                  <label key={key} className="check-label">
+                    <input
+                      type="checkbox"
+                      checked={iptv[key]}
+                      onChange={(e) => setIptv({ ...iptv, [key]: e.target.checked })}
+                      style={{ width: "auto", margin: 0 }}
+                    />
+                    {text}
+                  </label>
+                ))}
+              </div>
+
+              {iptvMsg && <p style={{ color: "var(--ok)", fontSize: "0.875rem" }}>{iptvMsg}</p>}
+              {iptvErr && <div className="error">{iptvErr}</div>}
+
+              <div className="action-row">
+                <button type="button" onClick={saveIptv} disabled={iptvBusy}>
+                  {iptvBusy ? "Bezig…" : "Opslaan & verbinden"}
+                </button>
+                <button
+                  type="button"
+                  className="btn-ok"
+                  onClick={testIptv}
+                  disabled={iptvBusy || !iptv.hasPassword}
+                >
+                  Testen
+                </button>
+                {iptv.hasPassword && (
+                  <button type="button" className="danger" onClick={deleteIptv} disabled={iptvBusy}>
+                    Ontkoppelen
+                  </button>
+                )}
+              </div>
+            </div>
+          </section>
+        )}
+      </div>
+    </>
+  );
+}

apps/admin-ui/src/app/dashboard/page.tsx

@@ -158,121 +158,109 @@ export default function DashboardPage() {
         {error && <div className="error">{error}</div>}
         {data && (
           <>
+            <section className="stack-section">
+              <div className="section-head">
+                <h2 className="section-title">Cluster</h2>
+              </div>
               <div className="grid">
                 <div className="card">
-                <h2>Nodes Online</h2>
+                  <h2>Nodes online</h2>
                   <div className="value">{data.nodesOnline ?? 0}</div>
                 </div>
                 <div className="card">
-                <h2>Nodes Offline</h2>
+                  <h2>Nodes offline</h2>
                   <div className="value">{data.nodesOffline ?? 0}</div>
                 </div>
                 <div className="card">
-                <h2>Films (uniek)</h2>
+                  <h2>Live streams</h2>
+                  <div className="value">{data.activeStreams ?? 0}</div>
+                </div>
+                <div className="card">
+                  <h2>Total storage</h2>
+                  <div className="value" style={{ fontSize: "1.35rem" }}>
+                    {formatBytes(data.totalStorage)}
+                  </div>
+                </div>
+                <div className="card">
+                  <h2>Free storage</h2>
+                  <div className="value" style={{ fontSize: "1.35rem" }}>
+                    {formatBytes(data.freeStorage)}
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            <section className="stack-section">
+              <div className="section-head">
+                <h2 className="section-title">Bibliotheek</h2>
+              </div>
+              <div className="grid">
+                <div className="card">
+                  <h2>Films</h2>
                   <div className="value">{data.availableMovies ?? data.movies ?? 0}</div>
-                <p className="muted" style={{ marginTop: "0.5rem", fontSize: "0.75rem" }}>
+                  <p className="muted tiny" style={{ marginTop: "0.5rem" }}>
                     {data.movies ?? 0} rijen totaal
                   </p>
                 </div>
                 <div className="card">
-                <h2>Series (uniek)</h2>
+                  <h2>Series</h2>
                   <div className="value">{data.availableSeries ?? data.series ?? 0}</div>
-                <p className="muted" style={{ marginTop: "0.5rem", fontSize: "0.75rem" }}>
+                  <p className="muted tiny" style={{ marginTop: "0.5rem" }}>
                     {data.series ?? 0} rijen totaal
                   </p>
                 </div>
                 <div className="card">
                   <h2>Bestanden</h2>
                   <div className="value">{data.availableFiles ?? 0}</div>
-                <p className="muted" style={{ marginTop: "0.5rem", fontSize: "0.75rem" }}>
+                  <p className="muted tiny" style={{ marginTop: "0.5rem" }}>
-                  {data.scannedFiles ?? 0} gescand op nodes
+                    {data.scannedFiles ?? 0} gescand
                   </p>
                 </div>
                 <div className="card">
                   <h2>Episodes</h2>
                   <div className="value">{data.episodes ?? 0}</div>
                 </div>
-              <div className="card">
-                <h2>Active Streams</h2>
-                <div className="value">{data.activeStreams ?? 0}</div>
               </div>
-              <div className="card">
+            </section>
-                <h2>Total Storage</h2>
+
-                <div className="value" style={{ fontSize: "1.35rem" }}>
+            <section className="stack-section">
-                  {formatBytes(data.totalStorage)}
+              <div className="section-head">
+                <h2 className="section-title">Onderhoud</h2>
+                <p className="muted">Alleen gebruiken bij migratie of catalogusproblemen.</p>
               </div>
-              </div>
+              <div className="card tools-card">
-              <div className="card">
+                <div className="tool-block">
-                <h2>Free Storage</h2>
+                  <h3 className="card-subtitle">Herstel na pad-wijziging</h3>
-                <div className="value" style={{ fontSize: "1.35rem" }}>
+                  <p className="muted">
-                  {formatBytes(data.freeStorage)}
+                    Duplicaten + dode files + IMDb-backfill na Unraid pad-migratie.
-                </div>
-              </div>
-            </div>
-            <div className="card" style={{ marginTop: "0.5rem" }}>
-              <div className="page-kicker">Maintenance</div>
-              <h2 style={{ fontSize: "1.05rem", color: "var(--text-bright)", textTransform: "none", letterSpacing: 0, fontFamily: "var(--font-ui)" }}>
-                Herstel na pad-wijziging
-              </h2>
-              <p className="muted" style={{ margin: "0.75rem 0" }}>
-                Gebruik dit als Cinemeta geen streams meer toont na een Unraid pad-wijziging
-                (oude /media/movies-bestanden + dubbele titels zonder IMDb).
                   </p>
-              <button onClick={repairLibrary}>Bibliotheek herstellen</button>
+                  <button type="button" onClick={repairLibrary}>
-              {repairMsg && (
+                    Bibliotheek herstellen
-                <p className="muted" style={{ marginTop: "0.75rem" }}>
+                  </button>
-                  {repairMsg}
+                  {repairMsg && <p className="muted tiny">{repairMsg}</p>}
-                </p>
-              )}
-              <h2
-                style={{
-                  fontSize: "1.05rem",
-                  color: "var(--text-bright)",
-                  textTransform: "none",
-                  letterSpacing: 0,
-                  fontFamily: "var(--font-ui)",
-                  marginTop: "1.5rem",
-                }}
-              >
-                Bibliotheek opruimen
-              </h2>
-              <p className="muted" style={{ margin: "0.75rem 0" }}>
-                Dubbele film-/serie-rijen samenvoegen. Daarna in Stremio de addon verversen
-                (of herinstalleren) zodat de volledige catalogus met paginatie geladen wordt.
-              </p>
-              <button onClick={dedupe}>Duplicaten samenvoegen</button>
-              {dedupeMsg && (
-                <p className="muted" style={{ marginTop: "0.75rem" }}>
-                  {dedupeMsg}
-                </p>
-              )}
-              <h2
-                style={{
-                  fontSize: "1.05rem",
-                  color: "var(--text-bright)",
-                  textTransform: "none",
-                  letterSpacing: 0,
-                  fontFamily: "var(--font-ui)",
-                  marginTop: "1.5rem",
-                }}
-              >
-                Cinemeta-koppeling (IMDb)
-              </h2>
-              <p className="muted" style={{ margin: "0.75rem 0" }}>
-                Films met IMDb: {data.moviesWithImdbStreams ?? "?"} · zonder:{" "}
-                {data.moviesMissingImdb ?? "?"}
-                <br />
-                Series met IMDb: {data.seriesWithImdb ?? "?"} · zonder:{" "}
-                {data.seriesMissingImdb ?? "?"}. Zonder IMDb tonen Cinemeta-pagina&apos;s geen
-                lokale bronnen. Onze eigen series-catalogus blijft op privé-IDs.
-              </p>
-              <button onClick={backfillImdb}>IMDb-IDs backfillen</button>
-              {imdbMsg && (
-                <p className="muted" style={{ marginTop: "0.75rem" }}>
-                  {imdbMsg}
-                </p>
-              )}
                 </div>
+                <div className="tool-block">
+                  <h3 className="card-subtitle">Duplicaten</h3>
+                  <p className="muted">Zelfde titel samenvoegen (TMDB wint).</p>
+                  <button type="button" onClick={dedupe}>
+                    Duplicaten samenvoegen
+                  </button>
+                  {dedupeMsg && <p className="muted tiny">{dedupeMsg}</p>}
+                </div>
+                <div className="tool-block">
+                  <h3 className="card-subtitle">IMDb-backfill</h3>
+                  <p className="muted">
+                    Films IMDb: {data.moviesWithImdbStreams ?? "?"} · zonder:{" "}
+                    {data.moviesMissingImdb ?? "?"} · Series: {data.seriesWithImdb ?? "?"} / zonder{" "}
+                    {data.seriesMissingImdb ?? "?"}
+                  </p>
+                  <button type="button" onClick={backfillImdb}>
+                    IMDb-IDs backfillen
+                  </button>
+                  {imdbMsg && <p className="muted tiny">{imdbMsg}</p>}
+                </div>
+              </div>
+            </section>
           </>
         )}
         {!data && !error && <p className="muted">Laden...</p>}

apps/admin-ui/src/app/globals.css

@@ -686,6 +686,254 @@ pre.token-display {
   box-shadow: 0 0 10px rgba(34, 211, 238, 0.35);
 }
 
+/* ——— Layout sections & mobile cards ——— */
+.stack-section {
+  margin-bottom: 1.75rem;
+}
+
+.section-head {
+  margin-bottom: 0.85rem;
+}
+
+.section-head.row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.section-title {
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: var(--text-bright);
+  letter-spacing: -0.01em;
+  margin: 0 0 0.25rem;
+}
+
+.card-subtitle {
+  font-size: 0.92rem;
+  font-weight: 600;
+  color: var(--text-bright);
+  margin: 0 0 0.85rem;
+  text-transform: none;
+  letter-spacing: 0;
+  font-family: var(--font-ui);
+}
+
+.page-lead {
+  margin: -0.5rem 0 1.25rem;
+  font-size: 0.875rem;
+}
+
+.tiny {
+  font-size: 0.75rem;
+}
+
+.mono {
+  font-family: var(--font-mono);
+}
+
+.viewer-name {
+  color: var(--accent);
+}
+
+.live-badge {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  color: var(--accent);
+  border: 1px solid var(--border);
+  background: var(--accent-dim);
+  padding: 0.35rem 0.7rem;
+  border-radius: 6px;
+}
+
+.desktop-table {
+  display: block;
+}
+
+.list-cards {
+  display: none;
+}
+
+.list-card {
+  background: var(--bg-panel);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+}
+
+.list-card.selected,
+tr.row-selected {
+  border-color: var(--border-strong);
+  background: rgba(34, 211, 238, 0.05);
+}
+
+.list-card-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.list-card-meta {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+  color: var(--text-muted);
+  font-size: 0.8rem;
+}
+
+.stream-title {
+  font-weight: 600;
+  color: var(--text-bright);
+  font-size: 0.95rem;
+  line-height: 1.3;
+}
+
+.action-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.action-row button {
+  flex: 1 1 auto;
+}
+
+.inline-form {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.65rem;
+  align-items: stretch;
+}
+
+.inline-form input,
+.inline-form select {
+  flex: 1 1 160px;
+  margin-bottom: 0;
+  min-height: 44px;
+  background: var(--bg-deep);
+  border: 1px solid var(--border-dim);
+  color: var(--text-bright);
+  border-radius: 7px;
+  padding: 0.55rem 0.75rem;
+  font-family: var(--font-ui);
+  font-size: 0.9rem;
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 0.85rem;
+  margin-bottom: 1rem;
+}
+
+.form-span {
+  grid-column: 1 / -1;
+}
+
+.check-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.85rem 1.25rem;
+  margin: 0 0 1rem;
+  padding: 0.85rem 1rem;
+  background: var(--bg-deep);
+  border: 1px solid var(--border-dim);
+  border-radius: 8px;
+}
+
+.check-label {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  font-size: 0.875rem;
+  color: var(--text);
+  cursor: pointer;
+}
+
+.path-cell {
+  font-size: 0.8rem;
+  max-width: 360px;
+}
+
+.path-line {
+  color: var(--text-muted);
+  margin-bottom: 0.2rem;
+  word-break: break-all;
+}
+
+.path-block {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  font-size: 0.78rem;
+}
+
+.path-block code {
+  display: block;
+  margin-top: 0.15rem;
+  word-break: break-all;
+}
+
+.warn-hint {
+  color: var(--accent-hot);
+  font-size: 0.75rem;
+  margin-top: 0.25rem;
+}
+
+.btn-cyan {
+  background: linear-gradient(180deg, rgba(14, 116, 144, 0.55), rgba(14, 116, 144, 0.25)) !important;
+  border-color: rgba(34, 211, 238, 0.4) !important;
+}
+
+.btn-ok {
+  background: linear-gradient(180deg, rgba(22, 101, 52, 0.55), rgba(22, 101, 52, 0.25)) !important;
+  border-color: rgba(52, 211, 153, 0.4) !important;
+}
+
+.btn-warn {
+  background: linear-gradient(180deg, rgba(180, 83, 9, 0.5), rgba(180, 83, 9, 0.2)) !important;
+  border-color: rgba(251, 191, 36, 0.35) !important;
+}
+
+.iptv-card {
+  border-color: rgba(34, 211, 238, 0.28);
+}
+
+.tools-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.tool-block {
+  padding: 1rem 0;
+  border-bottom: 1px solid var(--border-dim);
+}
+
+.tool-block:first-child {
+  padding-top: 0;
+}
+
+.tool-block:last-child {
+  padding-bottom: 0;
+  border-bottom: none;
+}
+
+.tool-block .muted {
+  margin: 0.35rem 0 0.75rem;
+}
+
+.tool-block .tiny {
+  margin-top: 0.65rem;
+}
+
 @media (max-width: 900px) {
   :root {
     --bottomnav-h: calc(64px + var(--safe-bottom));
@@ -864,21 +1112,7 @@ pre.token-display {
 
   .card {
     padding: 1rem;
-    overflow-x: auto;
+    overflow-x: hidden;
-    -webkit-overflow-scrolling: touch;
-  }
-
-  /* Tables scroll horizontally on small screens */
-  .card > table,
-  .table-wrap {
-    display: block;
-    width: 100%;
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-  }
-
-  table {
-    min-width: 640px;
   }
 
   th,
@@ -912,6 +1146,38 @@ pre.token-display {
   .token-display {
     font-size: 0.72rem;
   }
+
+  .desktop-table {
+    display: none !important;
+  }
+
+  .list-cards {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .card > .desktop-table {
+    display: none !important;
+  }
+
+  /* Geen horizontale tabel-scroll meer op mobiel */
+  .card > table,
+  table {
+    min-width: 0;
+  }
+
+  .section-head.row {
+    flex-direction: column;
+  }
+
+  .inline-form button {
+    width: 100%;
+  }
+
+  .page-lead {
+    margin-top: 0;
+  }
 }
 
 @media (max-width: 480px) {

apps/admin-ui/src/app/settings/page.tsx

@@ -3,40 +3,6 @@
 import { useCallback, useEffect, useState } from "react";
 import { Nav, useAuth } from "@/components/Nav";
 
-interface AddonTokenRow {
-  id: string;
-  label: string | null;
-  revoked: boolean;
-  createdAt: string;
-  hasIptv?: boolean;
-  iptvOk?: boolean;
-}
-
-interface IptvForm {
-  label: string;
-  baseUrl: string;
-  username: string;
-  password: string;
-  enableLive: boolean;
-  enableVod: boolean;
-  enableSeries: boolean;
-  lastOkAt?: string | null;
-  lastError?: string | null;
-  hasPassword?: boolean;
-}
-
-const emptyIptv = (): IptvForm => ({
-  label: "",
-  baseUrl: "",
-  username: "",
-  password: "",
-  enableLive: true,
-  enableVod: true,
-  enableSeries: true,
-});
-
-const MASTER_URL = "https://master.vonas.nl";
-
 interface ShelfRow {
   id: string;
   name: string;
@@ -51,31 +17,9 @@ interface ShelfRow {
 
 export default function SettingsPage() {
   useAuth();
-  const [tokens, setTokens] = useState<AddonTokenRow[]>([]);
-  const [addonToken, setAddonToken] = useState("");
-  const [installUrl, setInstallUrl] = useState("");
-  const [label, setLabel] = useState("Stremio");
-  const [iptvTokenId, setIptvTokenId] = useState<string | null>(null);
-  const [iptv, setIptv] = useState<IptvForm>(emptyIptv());
-  const [iptvBusy, setIptvBusy] = useState(false);
-  const [iptvMsg, setIptvMsg] = useState<string | null>(null);
-  const [iptvErr, setIptvErr] = useState<string | null>(null);
   const [shelves, setShelves] = useState<ShelfRow[]>([]);
   const [newShelfName, setNewShelfName] = useState("");
   const [newShelfKind, setNewShelfKind] = useState<"MOVIE" | "SERIES">("MOVIE");
-  const [adminEmail, setAdminEmail] = useState("");
-  const [currentPassword, setCurrentPassword] = useState("");
-  const [newPassword, setNewPassword] = useState("");
-  const [confirmPassword, setConfirmPassword] = useState("");
-  const [pwBusy, setPwBusy] = useState(false);
-  const [pwMsg, setPwMsg] = useState<string | null>(null);
-  const [pwErr, setPwErr] = useState<string | null>(null);
-
-  const loadTokens = useCallback(() => {
-    fetch("/api/v1/admin/addon-tokens", { credentials: "include" })
-      .then((r) => r.json())
-      .then((d) => setTokens(d.tokens ?? []));
-  }, []);
 
   const loadShelves = useCallback(() => {
     fetch("/api/v1/admin/library/shelves", { credentials: "include" })
@@ -84,50 +28,8 @@ export default function SettingsPage() {
   }, []);
 
   useEffect(() => {
-    loadTokens();
     loadShelves();
-    fetch("/api/v1/auth/me", { credentials: "include" })
+  }, [loadShelves]);
-      .then((r) => r.json())
-      .then((d) => setAdminEmail(d.user?.email ?? ""))
-      .catch(() => undefined);
-  }, [loadTokens, loadShelves]);
-
-  async function changePassword() {
-    setPwMsg(null);
-    setPwErr(null);
-    if (!currentPassword || !newPassword) {
-      setPwErr("Vul huidig en nieuw wachtwoord in");
-      return;
-    }
-    if (newPassword.length < 8) {
-      setPwErr("Nieuw wachtwoord moet minstens 8 tekens zijn");
-      return;
-    }
-    if (newPassword !== confirmPassword) {
-      setPwErr("Nieuwe wachtwoorden komen niet overeen");
-      return;
-    }
-    setPwBusy(true);
-    try {
-      const res = await fetch("/api/v1/auth/change-password", {
-        method: "POST",
-        credentials: "include",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ currentPassword, newPassword, confirmPassword }),
-      });
-      const data = await res.json().catch(() => ({}));
-      if (!res.ok) {
-        setPwErr(data.error?.message ?? "Wachtwoord wijzigen mislukt");
-        return;
-      }
-      setCurrentPassword("");
-      setNewPassword("");
-      setConfirmPassword("");
-      setPwMsg("Wachtwoord gewijzigd. Andere sessies zijn uitgelogd.");
-    } finally {
-      setPwBusy(false);
-    }
-  }
 
   async function createShelf() {
     if (!newShelfName.trim()) return;
@@ -160,255 +62,51 @@ export default function SettingsPage() {
     loadShelves();
   }
 
-  async function createAddonToken() {
-    const res = await fetch("/api/v1/admin/addon-tokens", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      credentials: "include",
-      body: JSON.stringify({ label }),
-    });
-    const data = await res.json();
-    if (!res.ok) {
-      alert(data.error?.message ?? "Aanmaken mislukt");
-      return;
-    }
-    setAddonToken(data.token);
-    setInstallUrl(`${MASTER_URL}/stremio/${data.token}/manifest.json`);
-    loadTokens();
-  }
-
-  async function revokeToken(id: string) {
-    if (!confirm("Addon deactiveren? Bestaande Stremio-installaties stoppen met werken.")) return;
-    await fetch(`/api/v1/admin/addon-tokens/${id}/revoke`, {
-      method: "POST",
-      credentials: "include",
-    });
-    loadTokens();
-  }
-
-  async function activateToken(id: string) {
-    await fetch(`/api/v1/admin/addon-tokens/${id}/activate`, {
-      method: "POST",
-      credentials: "include",
-    });
-    loadTokens();
-  }
-
-  async function deleteToken(id: string) {
-    if (!confirm("Addon definitief verwijderen? Dit kan niet ongedaan worden gemaakt.")) return;
-    await fetch(`/api/v1/admin/addon-tokens/${id}`, {
-      method: "DELETE",
-      credentials: "include",
-    });
-    if (iptvTokenId === id) {
-      setIptvTokenId(null);
-      setIptv(emptyIptv());
-    }
-    loadTokens();
-  }
-
-  async function openIptv(tokenId: string) {
-    setIptvTokenId(tokenId);
-    setIptvMsg(null);
-    setIptvErr(null);
-    setIptvBusy(true);
-    try {
-      const res = await fetch(`/api/v1/admin/addon-tokens/${tokenId}/iptv`, {
-        credentials: "include",
-      });
-      const data = await res.json();
-      if (!res.ok) {
-        setIptvErr(data.error?.message ?? "Laden mislukt");
-        setIptv(emptyIptv());
-        return;
-      }
-      if (data.iptv) {
-        setIptv({
-          label: data.iptv.label ?? "",
-          baseUrl: data.iptv.baseUrl ?? "",
-          username: data.iptv.username ?? "",
-          password: "",
-          enableLive: data.iptv.enableLive ?? true,
-          enableVod: data.iptv.enableVod ?? true,
-          enableSeries: data.iptv.enableSeries ?? true,
-          lastOkAt: data.iptv.lastOkAt,
-          lastError: data.iptv.lastError,
-          hasPassword: data.iptv.hasPassword,
-        });
-      } else {
-        setIptv(emptyIptv());
-      }
-    } finally {
-      setIptvBusy(false);
-    }
-  }
-
-  async function saveIptv() {
-    if (!iptvTokenId) return;
-    setIptvBusy(true);
-    setIptvMsg(null);
-    setIptvErr(null);
-    try {
-      const res = await fetch(`/api/v1/admin/addon-tokens/${iptvTokenId}/iptv`, {
-        method: "PUT",
-        headers: { "Content-Type": "application/json" },
-        credentials: "include",
-        body: JSON.stringify({
-          label: iptv.label || undefined,
-          baseUrl: iptv.baseUrl,
-          username: iptv.username,
-          password: iptv.password || undefined,
-          enableLive: iptv.enableLive,
-          enableVod: iptv.enableVod,
-          enableSeries: iptv.enableSeries,
-        }),
-      });
-      const data = await res.json();
-      if (!res.ok) {
-        setIptvErr(data.error?.message ?? "Opslaan mislukt");
-        return;
-      }
-      setIptvMsg(
-        `Verbonden · ${data.iptv?.liveCategories ?? 0} live-bouquets. Herlaad de Stremio-addon om Live TV te zien.`
-      );
-      setIptv((s) => ({ ...s, password: "", hasPassword: true, lastError: null }));
-      loadTokens();
-      await openIptv(iptvTokenId);
-    } finally {
-      setIptvBusy(false);
-    }
-  }
-
-  async function testIptv() {
-    if (!iptvTokenId) return;
-    setIptvBusy(true);
-    setIptvMsg(null);
-    setIptvErr(null);
-    try {
-      const res = await fetch(`/api/v1/admin/addon-tokens/${iptvTokenId}/iptv/test`, {
-        method: "POST",
-        credentials: "include",
-      });
-      const data = await res.json();
-      if (!res.ok) {
-        setIptvErr(data.error?.message ?? "Test mislukt");
-        return;
-      }
-      setIptvMsg(
-        `OK · status ${data.status}` +
-          (data.expDate ? ` · exp ${data.expDate}` : "") +
-          ` · live ${data.liveCategories} · films ${data.vodCategories} · series ${data.seriesCategories}`
-      );
-      loadTokens();
-    } finally {
-      setIptvBusy(false);
-    }
-  }
-
-  async function deleteIptv() {
-    if (!iptvTokenId) return;
-    if (!confirm("IPTV-userline ontkoppelen van deze addon?")) return;
-    setIptvBusy(true);
-    setIptvErr(null);
-    try {
-      await fetch(`/api/v1/admin/addon-tokens/${iptvTokenId}/iptv`, {
-        method: "DELETE",
-        credentials: "include",
-      });
-      setIptv(emptyIptv());
-      setIptvMsg("IPTV ontkoppeld");
-      loadTokens();
-    } finally {
-      setIptvBusy(false);
-    }
-  }
-
-  const activeToken = tokens.find((t) => t.id === iptvTokenId);
-
   return (
     <>
       <Nav />
       <div className="container">
         <div className="page-header">
           <div>
-            <div className="page-kicker">System</div>
+            <div className="page-kicker">Library structure</div>
             <h1>Instellingen</h1>
           </div>
         </div>
 
-        <div className="card" style={{ marginBottom: "2rem" }}>
+        <section className="stack-section">
-          <h2 style={{ fontSize: "1rem", color: "#fafafa", textTransform: "none", marginBottom: "0.5rem" }}>
+          <div className="section-head">
-            Account
+            <h2 className="section-title">Bibliotheek-planken</h2>
-          </h2>
+            <p className="muted">
-          <p className="muted" style={{ marginBottom: "1rem" }}>
+              Namen zoals Kids Films of NL Series. Op Nodes koppel je scanpaden aan een plank —
-            Ingelogd als <strong style={{ color: "var(--text-bright)" }}>{adminEmail || "…"}</strong>.
+              zelfde plank op meerdere nodes = één Stremio-lijst.
-            Wijzig hier je admin-wachtwoord (min. 8 tekens).
             </p>
-          {pwErr && <div className="error">{pwErr}</div>}
-          {pwMsg && <p className="muted" style={{ color: "var(--ok)", marginBottom: "0.75rem" }}>{pwMsg}</p>}
-          <div className="form-group">
-            <label>Huidig wachtwoord</label>
-            <input
-              type="password"
-              value={currentPassword}
-              onChange={(e) => setCurrentPassword(e.target.value)}
-              autoComplete="current-password"
-            />
-          </div>
-          <div className="form-group">
-            <label>Nieuw wachtwoord</label>
-            <input
-              type="password"
-              value={newPassword}
-              onChange={(e) => setNewPassword(e.target.value)}
-              autoComplete="new-password"
-            />
-          </div>
-          <div className="form-group">
-            <label>Bevestig nieuw wachtwoord</label>
-            <input
-              type="password"
-              value={confirmPassword}
-              onChange={(e) => setConfirmPassword(e.target.value)}
-              autoComplete="new-password"
-            />
-          </div>
-          <button type="button" onClick={changePassword} disabled={pwBusy}>
-            {pwBusy ? "Bezig…" : "Wachtwoord wijzigen"}
-          </button>
           </div>
 
-        <div className="card" style={{ marginBottom: "2rem" }}>
+          <div className="card">
-          <h2 style={{ fontSize: "1rem", color: "#fafafa", textTransform: "none", marginBottom: "0.5rem" }}>
+            <h3 className="card-subtitle">Plank toevoegen</h3>
-            Bibliotheek-planken (Stremio)
+            <div className="inline-form">
-          </h2>
-          <p style={{ color: "#a1a1aa", marginBottom: "1rem", fontSize: "0.875rem" }}>
-            Maak namen zoals <strong>Kids Films</strong> of <strong>NL Series</strong>. Op Nodes koppel je
-            scanpaden aan een plank — content van alle nodes met dezelfde plank komt in één Stremio-lijst.
-          </p>
-          <div style={{ display: "flex", gap: "0.75rem", flexWrap: "wrap", marginBottom: "1rem" }}>
               <input
                 value={newShelfName}
                 onChange={(e) => setNewShelfName(e.target.value)}
                 placeholder="bijv. Kids Films"
-              style={{ flex: "1 1 200px", marginBottom: 0 }}
               />
               <select
                 value={newShelfKind}
                 onChange={(e) => setNewShelfKind(e.target.value as "MOVIE" | "SERIES")}
-              style={{
-                background: "#0f1117",
-                border: "1px solid #2a2d3a",
-                color: "#fafafa",
-                borderRadius: 8,
-                padding: "0.5rem 0.75rem",
-              }}
               >
                 <option value="MOVIE">Films</option>
                 <option value="SERIES">Series</option>
               </select>
-            <button onClick={createShelf}>Plank toevoegen</button>
+              <button type="button" onClick={createShelf}>
+                Toevoegen
+              </button>
             </div>
+          </div>
+
+          <div className="card">
+            <h3 className="card-subtitle">Bestaande planken</h3>
+
+            <div className="desktop-table">
               <table>
                 <thead>
                   <tr>
@@ -424,28 +122,30 @@ export default function SettingsPage() {
                     <tr key={s.id}>
                       <td>{s.name}</td>
                       <td>{s.kind === "MOVIE" ? "Films" : "Series"}</td>
-                  <td style={{ fontSize: "0.8rem", maxWidth: 360 }}>
+                      <td className="path-cell">
-                    {s.paths?.length
+                        {s.paths?.length ? (
-                      ? s.paths.map((p) => (
+                          s.paths.map((p) => (
-                          <div key={`${p.nodeName}:${p.path}`} style={{ color: "#a1a1aa", marginBottom: 2 }}>
+                            <div key={`${p.nodeName}:${p.path}`} className="path-line">
-                            <span style={{ color: "#71717a" }}>{p.nodeName}:</span> {p.path}
+                              <span className="muted">{p.nodeName}:</span> {p.path}
                             </div>
                           ))
-                      : (
+                        ) : (
-                        <span style={{ color: "#71717a" }}>{s.scanRootCount} pad(en)</span>
+                          <span className="muted">{s.scanRootCount} pad(en)</span>
                         )}
                       </td>
                       <td>
                         {s.mediaFileCount}
                         {s.scanRootCount > 0 && s.mediaFileCount === 0 && (
-                      <div style={{ color: "#f59e0b", fontSize: "0.75rem" }}>
+                          <div className="warn-hint">Pad gekoppeld, nog geen scan</div>
-                        Pad gekoppeld, nog geen scan/shelf-match
-                      </div>
                         )}
                       </td>
                       <td>
                         {s.slug !== "films" && s.slug !== "series" && (
-                      <button className="danger" onClick={() => deleteShelf(s.id, s.name)}>
+                          <button
+                            type="button"
+                            className="danger"
+                            onClick={() => deleteShelf(s.id, s.name)}
+                          >
                             Verwijderen
                           </button>
                         )}
@@ -454,7 +154,7 @@ export default function SettingsPage() {
                   ))}
                   {shelves.length === 0 && (
                     <tr>
-                  <td colSpan={5} style={{ color: "#71717a", textAlign: "center" }}>
+                      <td colSpan={5} className="muted" style={{ textAlign: "center" }}>
                         Laden…
                       </td>
                     </tr>
@@ -463,278 +163,49 @@ export default function SettingsPage() {
               </table>
             </div>
 
-        <div className="card" style={{ marginBottom: "2rem" }}>
+            <div className="list-cards">
-          <h2 style={{ fontSize: "1rem", color: "#fafafa", textTransform: "none", marginBottom: "1rem" }}>
+              {shelves.map((s) => (
-            Nieuwe Stremio-addon
+                <article key={s.id} className="list-card">
-          </h2>
+                  <div className="list-card-top">
-          <p style={{ color: "#a1a1aa", marginBottom: "1rem", fontSize: "0.875rem" }}>
+                    <strong>{s.name}</strong>
-            Genereer een addon-token om de bibliotheek in Stremio te installeren. Bewaar de URL —
+                    <span className="status offline">
-            die wordt maar één keer getoond. Koppel daarna optioneel een Xtream-userline voor Live TV + EPG.
+                      {s.kind === "MOVIE" ? "Films" : "Series"}
-          </p>
-          <div className="form-group">
-            <label>Label</label>
-            <input value={label} onChange={(e) => setLabel(e.target.value)} placeholder="bijv. Thuis / TV" />
-          </div>
-          <button onClick={createAddonToken}>Addon aanmaken</button>
-          {addonToken && (
-            <>
-              <p style={{ fontSize: "0.875rem", color: "#a1a1aa", marginTop: "1rem" }}>
-                Installatie-URL (nu kopiëren):
-              </p>
-              <div className="token-display">{installUrl}</div>
-              <p style={{ fontSize: "0.875rem", color: "#71717a", marginTop: "0.5rem" }}>
-                Stremio → Addons → Community Addons → URL invoeren
-              </p>
-            </>
-          )}
-        </div>
-
-        <div className="card" style={{ marginBottom: "2rem" }}>
-          <h2 style={{ fontSize: "1rem", color: "#fafafa", textTransform: "none", marginBottom: "1rem" }}>
-            Bestaande addons
-          </h2>
-          <table>
-            <thead>
-              <tr>
-                <th>Label</th>
-                <th>Status</th>
-                <th>IPTV</th>
-                <th>Aangemaakt</th>
-                <th>Acties</th>
-              </tr>
-            </thead>
-            <tbody>
-              {tokens.map((t) => (
-                <tr key={t.id} style={iptvTokenId === t.id ? { background: "#14161f" } : undefined}>
-                  <td>{t.label || "—"}</td>
-                  <td>
-                    <span className={`status ${t.revoked ? "revoked" : "online"}`}>
-                      {t.revoked ? "Inactief" : "Actief"}
                     </span>
-                  </td>
+                  </div>
-                  <td>
+                  <div className="list-card-meta">
-                    {t.hasIptv ? (
+                    <span>{s.mediaFileCount} bestanden</span>
-                      <span className={`status ${t.iptvOk ? "online" : "revoked"}`}>
+                    <span>{s.scanRootCount} pad(en)</span>
-                        {t.iptvOk ? "Live TV" : "Fout"}
+                  </div>
-                      </span>
+                  {s.paths?.length ? (
-                    ) : (
+                    <div className="path-block">
-                      <span className="status offline">Geen</span>
+                      {s.paths.map((p) => (
-                    )}
+                        <div key={`${p.nodeName}:${p.path}`} className="path-line">
-                  </td>
+                          <span className="muted">{p.nodeName}</span>
-                  <td>{new Date(t.createdAt).toLocaleString()}</td>
+                          <code>{p.path}</code>
-                  <td style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
+                        </div>
-                    <button
-                      onClick={() => openIptv(t.id)}
-                      style={{ background: "#0e7490" }}
-                      title="Xtream / XUI userline"
-                    >
-                      IPTV
-                    </button>
-                    {t.revoked ? (
-                      <button onClick={() => activateToken(t.id)} style={{ background: "#166534" }}>
-                        Activeren
-                      </button>
-                    ) : (
-                      <button onClick={() => revokeToken(t.id)} style={{ background: "#b45309" }}>
-                        Deactiveren
-                      </button>
-                    )}
-                    <button className="danger" onClick={() => deleteToken(t.id)}>
-                      Verwijderen
-                    </button>
-                  </td>
-                </tr>
                       ))}
-              {tokens.length === 0 && (
+                    </div>
-                <tr>
+                  ) : null}
-                  <td colSpan={5} style={{ textAlign: "center", color: "#71717a" }}>
+                  {s.scanRootCount > 0 && s.mediaFileCount === 0 && (
-                    Nog geen addons aangemaakt
+                    <div className="warn-hint">Pad gekoppeld, nog geen scan</div>
-                  </td>
-                </tr>
                   )}
-            </tbody>
+                  {s.slug !== "films" && s.slug !== "series" && (
-          </table>
+                    <div className="action-row">
-          <p style={{ fontSize: "0.8rem", color: "#71717a", marginTop: "1rem" }}>
-            Deactiveren of verwijderen zorgt dat de bijbehorende Stremio-addon niet meer werkt.
-            De installatie-URL zelf wordt om veiligheidsredenen niet opnieuw getoond.
-          </p>
-        </div>
-
-        {iptvTokenId && (
-          <div
-            className="card"
-            style={{
-              marginBottom: "2rem",
-              borderColor: "#155e75",
-              background:
-                "linear-gradient(145deg, #12151c 0%, #152028 55%, #1a1d27 100%)",
-            }}
-          >
-            <div
-              style={{
-                display: "flex",
-                justifyContent: "space-between",
-                alignItems: "flex-start",
-                gap: "1rem",
-                marginBottom: "1.25rem",
-                flexWrap: "wrap",
-              }}
-            >
-              <div>
-                <h2
-                  style={{
-                    fontSize: "1.125rem",
-                    color: "#fafafa",
-                    textTransform: "none",
-                    marginBottom: "0.35rem",
-                    letterSpacing: 0,
-                  }}
-                >
-                  IPTV · Xtream / XUI
-                </h2>
-                <p style={{ color: "#94a3b8", fontSize: "0.875rem", maxWidth: "40rem" }}>
-                  Userline voor addon{" "}
-                  <strong style={{ color: "#e2e8f0" }}>{activeToken?.label || iptvTokenId.slice(0, 8)}</strong>
-                  . Live-zenders met icoon + EPG, plus optioneel IPTV-films en -series. Alleen deze
-                  Stremio-installatie ziet deze line.
-                </p>
-              </div>
                       <button
                         type="button"
-                onClick={() => {
+                        className="danger"
-                  setIptvTokenId(null);
+                        onClick={() => deleteShelf(s.id, s.name)}
-                  setIptv(emptyIptv());
-                  setIptvMsg(null);
-                  setIptvErr(null);
-                }}
-                style={{ background: "#374151" }}
                       >
-                Sluiten
+                        Verwijderen
                       </button>
                     </div>
-
+                  )}
-            <div
+                </article>
-              style={{
-                display: "grid",
-                gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
-                gap: "1rem",
-              }}
-            >
-              <div className="form-group" style={{ marginBottom: 0 }}>
-                <label>Label (optioneel)</label>
-                <input
-                  value={iptv.label}
-                  onChange={(e) => setIptv({ ...iptv, label: e.target.value })}
-                  placeholder="bijv. Thuis XUI"
-                />
-              </div>
-              <div className="form-group" style={{ marginBottom: 0, gridColumn: "1 / -1" }}>
-                <label>Server-URL</label>
-                <input
-                  value={iptv.baseUrl}
-                  onChange={(e) => setIptv({ ...iptv, baseUrl: e.target.value })}
-                  placeholder="http://host:port of https://iptv.example.com"
-                  autoComplete="off"
-                />
-              </div>
-              <div className="form-group" style={{ marginBottom: 0 }}>
-                <label>Gebruikersnaam</label>
-                <input
-                  value={iptv.username}
-                  onChange={(e) => setIptv({ ...iptv, username: e.target.value })}
-                  autoComplete="off"
-                />
-              </div>
-              <div className="form-group" style={{ marginBottom: 0 }}>
-                <label>Wachtwoord {iptv.hasPassword ? "(leeg = behouden)" : ""}</label>
-                <input
-                  type="password"
-                  value={iptv.password}
-                  onChange={(e) => setIptv({ ...iptv, password: e.target.value })}
-                  placeholder={iptv.hasPassword ? "••••••••" : ""}
-                  autoComplete="new-password"
-                />
-              </div>
-            </div>
-
-            <div
-              style={{
-                display: "flex",
-                gap: "1.25rem",
-                flexWrap: "wrap",
-                margin: "1.25rem 0",
-                padding: "0.85rem 1rem",
-                background: "#0f1117",
-                borderRadius: 10,
-                border: "1px solid #2a2d3a",
-              }}
-            >
-              {(
-                [
-                  ["enableLive", "Live TV + EPG"],
-                  ["enableVod", "IPTV Films"],
-                  ["enableSeries", "IPTV Series"],
-                ] as const
-              ).map(([key, text]) => (
-                <label
-                  key={key}
-                  style={{
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "0.5rem",
-                    fontSize: "0.875rem",
-                    color: "#e4e4e7",
-                    cursor: "pointer",
-                  }}
-                >
-                  <input
-                    type="checkbox"
-                    checked={iptv[key]}
-                    onChange={(e) => setIptv({ ...iptv, [key]: e.target.checked })}
-                    style={{ width: "auto", margin: 0 }}
-                  />
-                  {text}
-                </label>
               ))}
-            </div>
+              {shelves.length === 0 && <p className="muted">Laden…</p>}
-
-            {(iptv.lastOkAt || iptv.lastError) && (
-              <p style={{ fontSize: "0.8rem", color: "#71717a", marginBottom: "1rem" }}>
-                {iptv.lastOkAt && <>Laatst OK: {new Date(iptv.lastOkAt).toLocaleString()} </>}
-                {iptv.lastError && (
-                  <span style={{ color: "#f87171" }}>· Fout: {iptv.lastError}</span>
-                )}
-              </p>
-            )}
-
-            {iptvMsg && (
-              <p style={{ color: "#6ee7b7", fontSize: "0.875rem", marginBottom: "0.75rem" }}>{iptvMsg}</p>
-            )}
-            {iptvErr && (
-              <p className="error" style={{ marginBottom: "0.75rem" }}>
-                {iptvErr}
-              </p>
-            )}
-
-            <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
-              <button onClick={saveIptv} disabled={iptvBusy}>
-                {iptvBusy ? "Bezig…" : "Opslaan & verbinden"}
-              </button>
-              <button
-                onClick={testIptv}
-                disabled={iptvBusy || !iptv.hasPassword}
-                style={{ background: "#166534" }}
-              >
-                Testen
-              </button>
-              {iptv.hasPassword && (
-                <button className="danger" onClick={deleteIptv} disabled={iptvBusy}>
-                  Ontkoppelen
-                </button>
-              )}
             </div>
           </div>
-        )}
+        </section>
       </div>
     </>
   );

apps/admin-ui/src/app/streams/page.tsx

@@ -74,22 +74,17 @@ export default function StreamsPage() {
       <div className="container">
         <div className="page-header">
           <div>
-            <div className="page-kicker">Realtime · Plex-style</div>
+            <div className="page-kicker">Realtime</div>
             <h1>Actieve streams</h1>
           </div>
-          <div className="muted" style={{ fontFamily: "var(--font-mono)", fontSize: "0.8rem" }}>
+          <div className="live-badge">{streams.length} live</div>
-            {streams.length} live
-          </div>
         </div>
 
-        <div className="card" style={{ marginBottom: "1rem" }}>
+        <p className="muted page-lead">
-          <p className="muted" style={{ margin: 0 }}>
+          Eén rij per kijker. Stopt iemand → verdwijnt binnen ~3 min. Voortgang ≈ bytes / bestand.
-            Eén rij per kijker + titel. Alleen echte streams (&gt;512 KB). Stopt iemand → verdwijnt
-            binnen ~3 minuten. Voortgang ≈ gestreamde bytes / bestandsgrootte.
         </p>
-        </div>
 
-        <div className="card">
+        <div className="desktop-table card">
           <table>
             <thead>
               <tr>
@@ -99,7 +94,7 @@ export default function StreamsPage() {
                 <th>Node</th>
                 <th>Kwaliteit</th>
                 <th>Activiteit</th>
-                <th>Acties</th>
+                <th></th>
               </tr>
             </thead>
             <tbody>
@@ -108,36 +103,25 @@ export default function StreamsPage() {
                 return (
                   <tr key={s.id}>
                     <td>
-                      <strong style={{ color: "var(--accent)" }}>{s.viewer}</strong>
+                      <strong className="viewer-name">{s.viewer}</strong>
                     </td>
                     <td>
                       <div>{s.title}</div>
-                      <div className="muted" style={{ fontSize: "0.75rem", marginTop: "0.2rem" }}>
+                      <div className="muted tiny">{formatBytes(s.bytesSent)} gestreamd</div>
-                        {formatBytes(s.bytesSent)} gestreamd
-                      </div>
                     </td>
                     <td style={{ minWidth: 140 }}>
                       <div className="progress-track" title={`${pct.toFixed(0)}%`}>
                         <div className="progress-fill" style={{ width: `${pct}%` }} />
                       </div>
-                      <div
+                      <div className="muted mono tiny">
-                        className="muted"
-                        style={{
-                          fontFamily: "var(--font-mono)",
-                          fontSize: "0.7rem",
-                          marginTop: "0.35rem",
-                        }}
-                      >
                         {s.progressPercent != null ? `${pct.toFixed(0)}%` : "—"}
                       </div>
                     </td>
                     <td>{s.node}</td>
                     <td>{s.resolution ?? "-"}</td>
-                    <td style={{ fontFamily: "var(--font-mono)", fontSize: "0.75rem" }}>
+                    <td className="mono tiny">{relativeTime(s.lastActivity)}</td>
-                      {relativeTime(s.lastActivity)}
-                    </td>
                     <td>
-                      <button className="danger" onClick={() => revoke(s.id)}>
+                      <button type="button" className="danger" onClick={() => revoke(s.id)}>
                         Intrekken
                       </button>
                     </td>
@@ -146,7 +130,7 @@ export default function StreamsPage() {
               })}
               {streams.length === 0 && (
                 <tr>
-                  <td colSpan={7} style={{ textAlign: "center" }} className="muted">
+                  <td colSpan={7} className="muted" style={{ textAlign: "center" }}>
                     Niemand aan het kijken
                   </td>
                 </tr>
@@ -154,6 +138,45 @@ export default function StreamsPage() {
             </tbody>
           </table>
         </div>
+
+        <div className="list-cards">
+          {streams.map((s) => {
+            const pct = s.progressPercent ?? 0;
+            return (
+              <article key={s.id} className="list-card stream-card">
+                <div className="list-card-top">
+                  <strong className="viewer-name">{s.viewer}</strong>
+                  <span className="mono tiny">{relativeTime(s.lastActivity)}</span>
+                </div>
+                <div className="stream-title">{s.title}</div>
+                <div className="progress-track" title={`${pct.toFixed(0)}%`}>
+                  <div className="progress-fill" style={{ width: `${pct}%` }} />
+                </div>
+                <div className="list-card-meta">
+                  <span className="mono">
+                    {s.progressPercent != null ? `${pct.toFixed(0)}%` : "—"} ·{" "}
+                    {formatBytes(s.bytesSent)}
+                  </span>
+                  <span>
+                    {s.resolution ?? "?"} · {s.node}
+                  </span>
+                </div>
+                <div className="action-row">
+                  <button type="button" className="danger" onClick={() => revoke(s.id)}>
+                    Intrekken
+                  </button>
+                </div>
+              </article>
+            );
+          })}
+          {streams.length === 0 && (
+            <div className="card">
+              <p className="muted" style={{ margin: 0, textAlign: "center" }}>
+                Niemand aan het kijken
+              </p>
+            </div>
+          )}
+        </div>
       </div>
     </>
   );

apps/admin-ui/src/components/Nav.tsx

@@ -4,13 +4,25 @@ import Link from "next/link";
 import { useEffect, useState } from "react";
 import { usePathname, useRouter } from "next/navigation";
 
-const links = [
+/** Volledige desktop-navigatie — logische groepen: overzicht → infra → bibliotheek → live → mensen → systeem */
+const desktopLinks = [
+  { href: "/dashboard", label: "Dashboard" },
+  { href: "/nodes", label: "Nodes" },
+  { href: "/movies", label: "Movies" },
+  { href: "/series", label: "Series" },
+  { href: "/streams", label: "Streams" },
+  { href: "/accounts", label: "Accounts" },
+  { href: "/settings", label: "Instellingen" },
+];
+
+/** Bottom-nav (max 6): Series via drawer/desktop */
+const mobileLinks = [
   { href: "/dashboard", label: "Home", short: "Home" },
   { href: "/nodes", label: "Nodes", short: "Nodes" },
   { href: "/movies", label: "Movies", short: "Films" },
-  { href: "/series", label: "Series", short: "Series" },
   { href: "/streams", label: "Streams", short: "Live" },
-  { href: "/settings", label: "Instellingen", short: "Inst." },
+  { href: "/accounts", label: "Accounts", short: "Acc." },
+  { href: "/settings", label: "Instellingen", short: "Set." },
 ];
 
 export function Nav() {
@@ -36,6 +48,8 @@ export function Nav() {
     router.push("/");
   }
 
+  const isActive = (href: string) => pathname === href || pathname.startsWith(`${href}/`);
+
   return (
     <>
       <nav className="topnav">
@@ -48,8 +62,8 @@ export function Nav() {
         </Link>
 
         <div className="topnav-links topnav-links-desktop">
-          {links.map((l) => (
+          {desktopLinks.map((l) => (
-            <Link key={l.href} href={l.href} className={pathname === l.href ? "active" : ""}>
+            <Link key={l.href} href={l.href} className={isActive(l.href) ? "active" : ""}>
               {l.label}
             </Link>
           ))}
@@ -83,11 +97,11 @@ export function Nav() {
           </button>
         </div>
         <div className="nav-drawer-links">
-          {links.map((l) => (
+          {desktopLinks.map((l) => (
             <Link
               key={l.href}
               href={l.href}
-              className={pathname === l.href ? "active" : ""}
+              className={isActive(l.href) ? "active" : ""}
               onClick={() => setMenuOpen(false)}
             >
               {l.label}
@@ -100,8 +114,8 @@ export function Nav() {
       </aside>
 
       <nav className="bottomnav" aria-label="Hoofdnavigatie">
-        {links.map((l) => (
+        {mobileLinks.map((l) => (
-          <Link key={l.href} href={l.href} className={pathname === l.href ? "active" : ""}>
+          <Link key={l.href} href={l.href} className={isActive(l.href) ? "active" : ""}>
             <span className="bottomnav-dot" aria-hidden />
             <span>{l.short}</span>
           </Link>