Release 0.7.2

2026-10-26 21:20:55 +01:00
1 parent 64f55a8b1f
commit d5b1c58ba2
@@ -1,12 +1,19 @@
 <script lang="ts">
 	import { resolve } from '$app/paths';
 	import AppIcon from '#lib/components/AppIcon.svelte';
+	import FeedEditorDialog from '#lib/components/FeedEditorDialog.svelte';
 	import IconPicker from '#lib/components/IconPicker.svelte';
 	import ShareManagement from '#lib/components/ShareManagement.svelte';
+	import TechnicalAccessDialog from '#lib/components/TechnicalAccessDialog.svelte';
 	import ToolEditorDialog from '#lib/components/ToolEditorDialog.svelte';
 	import type { PageProps } from './$types';
 	let { data, form }: PageProps = $props();
 	let toolDialog: { showModal: (tool?: (typeof data.tools)[number] | null) => void };
+	let feedDialog: { showModal: (feed?: (typeof data.feeds)[number] | null) => void };
+	let technicalAccessDialog: {
+		showModal: (access?: (typeof data.technicalAccesses)[number] | null) => void;
+	};
+	let managementIntent = $derived(form?.intent?.toLowerCase() ?? '');

 	function confirmTaxonomyRemoval(event: SubmitEvent) {
 		if (!confirm('Eintrag wirklich entfernen?')) event.preventDefault();
@@ -20,124 +27,60 @@
 		<h1>Verwaltung</h1>
 		<p class="page-intro">Konten, Werkzeuge und bestehende Taxonomie verwalten.</p>
 	</header>
-	{#if form?.error && !form.intent?.toLowerCase().includes('share')}<div
+	{#if form?.error && !['share', 'technicalaccess'].some( (intent) => managementIntent.includes(intent) )}<div
 			class="form-message error"
 			role="alert"
 		>
 			{form.error}
 		</div>{/if}
-	{#if form?.success && !form.intent?.toLowerCase().includes('share')}<div
+	{#if form?.success && !['share', 'technicalaccess'].some( (intent) => managementIntent.includes(intent) )}<div
 			class="form-message success"
 			role="status"
 		>
 			{form.success}
 		</div>{/if}
 	<h2 class="section-heading">Schnittstellen</h2>
-	<section class="quiet-panel integration-panel">
+	<section class="quiet-panel integration-catalog">
 		<div class="panel-heading">
 			<div>
 				<p class="eyebrow">Import</p>
 				<h2>RSS-Feeds</h2>
 			</div>
-			<span>{data.feeds.length} eingerichtet</span>
+			<button class="compact-add-button" type="button" onclick={() => feedDialog.showModal()}>
+				<AppIcon name="plus" /> Feed hinzufügen
+			</button>
 		</div>
-		<p>
+		<p class="catalog-note">
 			Aktive Feeds werden im gewählten Intervall abgerufen. Beiträge landen zuerst separat im
 			Eingang.
 		</p>
-		<details class="integration-create">
-			<summary class="compact-add-button"><AppIcon name="plus" /> Feed hinzufügen</summary>
-			<form class="integration-form" method="POST" action="?/saveFeed">
-				<label>Name<input name="name" required maxlength="120" /></label>
-				<label
-					>Feed-URL<input
-						name="url"
-						type="url"
-						required
-						maxlength="2000"
-						placeholder="https://example.org/feed.xml"
-					/></label
-				>
-				<label
-					>Intervall in Minuten<input
-						name="refreshIntervalMinutes"
-						type="number"
-						min="15"
-						max="10080"
-						value="60"
-						required
-					/></label
-				>
-				<label
-					>Standardkategorie<select name="defaultCategoryId"
-						><option value="">Keine</option
-						>{#each data.taxonomy.categories as category (category.id)}<option value={category.id}
-								>{category.name}</option
-							>{/each}</select
-					></label
-				>
-				<label class="check-row"
-					><input type="checkbox" name="isEnabled" value="1" checked /> Automatisch abrufen</label
-				>
-				<button class="primary-button" type="submit">Feed anlegen</button>
-			</form>
-		</details>
-		<div class="integration-list">
+		<div class="catalog-settings-list integration-settings-list">
 			{#each data.feeds as feed (feed.id)}
-				<details>
-					<summary
-						><span
-							><strong>{feed.name}</strong><small
+				<article class:inactive={!feed.isEnabled} class="catalog-setting-row">
+					<button
+						class="catalog-entry-main"
+						type="button"
+						aria-label={`${feed.name} bearbeiten`}
+						onclick={() => feedDialog.showModal(feed)}
+					>
+						<span class="catalog-entry-icon"><AppIcon name="rss" /></span>
+						<span class="catalog-entry-copy">
+							<strong>{feed.name}</strong>
+							<small
 								>{feed.lastError
 									? `Fehler: ${feed.lastError}`
 									: feed.lastFetchedAtUtc
-										? `Zuletzt: ${new Date(feed.lastFetchedAtUtc).toLocaleString('de-DE')}`
-										: 'Noch nicht abgerufen'}</small
-							></span
-						><AppIcon name="pen" /></summary
-					>
-					<form class="integration-form" method="POST" action="?/saveFeed">
-						<input type="hidden" name="feedId" value={feed.id} />
-						<label>Name<input name="name" required maxlength="120" value={feed.name} /></label>
-						<label
-							>Feed-URL<input
-								name="url"
-								type="url"
-								required
-								maxlength="2000"
-								value={feed.url}
-							/></label
-						>
-						<label
-							>Intervall in Minuten<input
-								name="refreshIntervalMinutes"
-								type="number"
-								min="15"
-								max="10080"
-								value={feed.refreshIntervalMinutes}
-								required
-							/></label
-						>
-						<label
-							>Standardkategorie<select name="defaultCategoryId"
-								><option value="">Keine</option
-								>{#each data.taxonomy.categories as category (category.id)}<option
-										value={category.id}
-										selected={feed.defaultCategoryId === category.id}>{category.name}</option
-									>{/each}</select
-							></label
-						>
-						<label class="check-row"
-							><input type="checkbox" name="isEnabled" value="1" checked={feed.isEnabled} /> Automatisch
-							abrufen</label
-						>
-						<button class="secondary-button" type="submit">Speichern</button>
-					</form>
-					<div class="row-actions">
+										? `Zuletzt ${new Date(feed.lastFetchedAtUtc).toLocaleString('de-DE')}`
+										: 'Noch nicht abgerufen'} · {feed.isEnabled ? 'Automatisch' : 'Pausiert'}</small
+							>
+						</span>
+						<AppIcon name="pen" />
+					</button>
+					<div class="catalog-entry-actions">
 						<form method="POST" action="?/fetchFeed">
-							<input type="hidden" name="feedId" value={feed.id} /><button
-								class="text-button"
-								type="submit">Jetzt abrufen</button
+							<input type="hidden" name="feedId" value={feed.id} />
+							<button type="submit" aria-label={`${feed.name} jetzt abrufen`} title="Jetzt abrufen"
+								><AppIcon name="arrow-rotate-right" /></button
 							>
 						</form>
 						<form
@@ -146,74 +89,82 @@
 							onsubmit={(event) =>
 								!confirm('Feed und seinen Importeingang löschen?') && event.preventDefault()}
 						>
-							<input type="hidden" name="feedId" value={feed.id} /><button
-								class="text-button danger-text"
-								type="submit">Feed löschen</button
+							<input type="hidden" name="feedId" value={feed.id} />
+							<button
+								class="danger-text"
+								type="submit"
+								aria-label={`${feed.name} löschen`}
+								title="Feed löschen"><AppIcon name="trash" /></button
 							>
 						</form>
 					</div>
-				</details>
+				</article>
 			{/each}
+			{#if !data.feeds.length}<p class="empty-copy">Noch keine RSS-Feeds eingerichtet.</p>{/if}
 		</div>
 	</section>
+	<FeedEditorDialog bind:this={feedDialog} categories={data.taxonomy.categories} />

-	<section class="quiet-panel integration-panel">
+	<section class="quiet-panel integration-catalog">
 		<div class="panel-heading">
 			<div>
 				<p class="eyebrow">Externe Assistenz</p>
 				<h2>Technische Zugänge</h2>
 			</div>
-			<a href={resolve('/api/v1/openapi.json')} target="_blank">OpenAPI</a>
+			<button
+				class="compact-add-button"
+				type="button"
+				onclick={() => technicalAccessDialog.showModal()}
+			>
+				<AppIcon name="plus" /> Zugang hinzufügen
+			</button>
 		</div>
-		<p>
+		<p class="catalog-note">
 			Tokens gelten ausschließlich für die API. Schreibende Aufrufe werden protokolliert und müssen
-			idempotent sein.
+			idempotent sein. <a href={resolve('/api/v1/openapi.json')} target="_blank">OpenAPI öffnen</a>
 		</p>
-		{#if form?.technicalToken}<div class="token-reveal" role="status">
-				<strong>Token, einmalig sichtbar</strong><code>{form.technicalToken}</code>
-			</div>{/if}
-		<details class="integration-create">
-			<summary class="compact-add-button"><AppIcon name="plus" /> Zugang hinzufügen</summary>
-			<form class="integration-form" method="POST" action="?/createTechnicalAccess">
-				<label
-					>Name<input
-						name="name"
-						required
-						maxlength="120"
-						placeholder="Redaktionsassistenz"
-					/></label
-				>
-				<label
-					>Berechtigung<select name="permissions"
-						><option value="read">Nur lesen</option><option value="read_write"
-							>Lesen und schreiben</option
-						></select
-					></label
-				>
-				<button class="primary-button" type="submit">Zugang anlegen</button>
-			</form>
-		</details>
-		<div class="integration-list">
+		<div class="catalog-settings-list integration-settings-list">
 			{#each data.technicalAccesses as access (access.id)}
-				<div class="access-row">
-					<span
-						><strong>{access.name}</strong><small
-							>{access.permissions === 'read' ? 'Nur lesen' : 'Lesen und schreiben'} · {access.revokedAtUtc
-								? 'Widerrufen'
-								: access.lastUsedAtUtc
-									? `Zuletzt genutzt ${new Date(access.lastUsedAtUtc).toLocaleString('de-DE')}`
-									: 'Noch nicht genutzt'}</small
-						></span
-					>{#if !access.revokedAtUtc}<form method="POST" action="?/revokeTechnicalAccess">
-							<input type="hidden" name="accessId" value={access.id} /><button
-								class="secondary-button"
-								type="submit">Widerrufen</button
+				<article class:inactive={Boolean(access.revokedAtUtc)} class="catalog-setting-row">
+					<button
+						class="catalog-entry-main"
+						type="button"
+						disabled={Boolean(access.revokedAtUtc)}
+						aria-label={`${access.name} bearbeiten`}
+						onclick={() => technicalAccessDialog.showModal(access)}
+					>
+						<span class="catalog-entry-icon"><AppIcon name="key" /></span>
+						<span class="catalog-entry-copy">
+							<strong>{access.name}</strong>
+							<small
+								>{access.permissions === 'read' ? 'Nur lesen' : 'Lesen und schreiben'} · {access.revokedAtUtc
+									? 'Widerrufen'
+									: access.lastUsedAtUtc
+										? `Zuletzt genutzt ${new Date(access.lastUsedAtUtc).toLocaleString('de-DE')}`
+										: 'Noch nicht genutzt'}</small
 							>
-						</form>{/if}
-				</div>
+						</span>
+						{#if !access.revokedAtUtc}<AppIcon name="pen" />{/if}
+					</button>
+					{#if !access.revokedAtUtc}<div class="catalog-entry-actions">
+							<form method="POST" action="?/revokeTechnicalAccess">
+								<input type="hidden" name="accessId" value={access.id} />
+								<button
+									class="danger-text"
+									type="submit"
+									aria-label={`${access.name} widerrufen`}
+									title="Zugang widerrufen"><AppIcon name="ban" /></button
+								>
+							</form>
+						</div>{/if}
+				</article>
 			{/each}
+			{#if !data.technicalAccesses.length}<p class="empty-copy">
+					Noch keine technischen Zugänge angelegt.
+				</p>{/if}
 		</div>
 	</section>
+	<TechnicalAccessDialog bind:this={technicalAccessDialog} {form} />

 	<section class="quiet-panel account-panel">
 		<div class="panel-heading">
@@ -457,78 +408,11 @@
 </div>

 <style>
-	.integration-panel {
-		display: grid;
-		gap: 1rem;
+	.integration-catalog {
 		margin-block: 1.5rem;
+		padding: clamp(0.85rem, 2vw, 1.2rem);
 	}
-	.integration-form {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
-		gap: 0.8rem;
-		align-items: end;
-	}
-	.integration-create > summary {
-		width: fit-content;
-		cursor: pointer;
-		list-style: none;
-	}
-	.integration-create > summary::-webkit-details-marker {
-		display: none;
-	}
-	.integration-create[open] > .integration-form {
-		margin-top: 0.8rem;
-	}
-	.integration-form label:not(.check-row) {
-		display: grid;
-		gap: 0.35rem;
-	}
-	.check-row {
-		display: flex;
-		gap: 0.5rem;
-		align-items: center;
-		min-height: 2.6rem;
-	}
-	.integration-list {
-		display: grid;
-		gap: 0.5rem;
-	}
-	.integration-list details,
-	.access-row {
-		padding: 0.75rem 0.8rem;
-		border: 1px solid var(--line);
-		border-radius: var(--radius-medium);
-		background: var(--panel-soft);
-	}
-	.integration-list summary,
-	.access-row {
-		display: flex;
-		justify-content: space-between;
-		gap: 1rem;
-		align-items: center;
-	}
-	.integration-list summary > span,
-	.access-row > span {
-		display: grid;
-		gap: 0.2rem;
-	}
-	.integration-list small {
-		color: var(--text-muted);
-	}
-	.row-actions {
-		display: flex;
-		gap: 1rem;
-		margin-top: 0.75rem;
-	}
-	.token-reveal {
-		display: grid;
-		gap: 0.4rem;
-		padding: 0.8rem;
-		border: 2px solid var(--color-accent);
-		border-radius: 0.7rem;
-		overflow-wrap: anywhere;
-	}
-	.token-reveal code {
-		user-select: all;
+	.integration-catalog .catalog-note a {
+		white-space: nowrap;
 	}
 </style>