@riducms/admin 0.2.3 → 0.3.0

package/src/features/navigation/admin-navigation.svelte

@@ -0,0 +1,169 @@
+<script lang="ts">
+	import "@admin/features/navigation/admin-navigation.scss";
+	import { Link, NavLink } from "@hvniel/svelte-router";
+	import type { AdminNavigationComponent } from "@riducms/plugin";
+	import ChevronDownIcon from "~icons/lucide/chevron-down";
+	import { adminApplicationName } from "@admin/app-meta";
+	import { collectionPath, globalPath, withContentLocale } from "@admin/core/routing/admin-paths";
+	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
+	import { groupAdminResources } from "@admin/features/navigation/admin-resource-groups";
+	import LogoutButton from "@admin/features/auth/logout-button.svelte";
+
+	let { onNavigate }: { onNavigate: () => void } = $props();
+
+	const runtime = getAdminRuntime();
+	const extensions = runtime.config.extensions;
+
+	const contentLocale = $derived(
+		runtime.contentLocales.length === 0 ? undefined : runtime.contentLocale
+	);
+	const applicationName = $derived(
+		adminApplicationName(runtime.manifest, runtime.i18n, runtime.i18n.t("general:riduApplication"))
+	);
+	const resourceGroups = $derived(
+		groupAdminResources(runtime.visibleCollections, runtime.visibleGlobals, {
+			collections: runtime.i18n.t("navigation:collections"),
+			globals: runtime.i18n.t("navigation:globals"),
+		})
+	);
+
+	const navigationPluginRoutes = extensions.routes.flatMap((route) =>
+		route.navigation === undefined ? [] : [{ path: route.path, navigation: route.navigation }]
+	);
+	const navigationReplacement = extensions.navigation.find(
+		(component) => component.position === "replace"
+	);
+	const navigationBefore = extensions.navigation.filter(
+		(component) => component.position === "before"
+	);
+	const navigationBeforeLinks = extensions.navigation.filter(
+		(component) => component.position === "beforeLinks"
+	);
+	const navigationAfterLinks = extensions.navigation.filter(
+		(component) => component.position === "afterLinks"
+	);
+	const navigationAfter = extensions.navigation.filter(
+		(component) => component.position === "after"
+	);
+
+	const navigationLogo = extensions.branding.find(
+		(component) => component.surface === "navigationLogo"
+	);
+
+	function pluginRouteLabel(route: (typeof navigationPluginRoutes)[number]) {
+		return route.navigation.labelKey === undefined
+			? route.navigation.label
+			: runtime.i18n.t(route.navigation.labelKey);
+	}
+</script>
+
+{#snippet navigationContributions(components: readonly AdminNavigationComponent[])}
+	{#if runtime.manifest !== undefined}
+		{#each components as component (component.key)}
+			<component.component
+				manifest={runtime.manifest}
+				user={runtime.session?.user}
+				defaultView={defaultNavigation}
+				i18n={runtime.i18n}
+			/>
+		{/each}
+	{/if}
+{/snippet}
+
+{#snippet navigationLink(to: string, label: string)}
+	<NavLink
+		{to}
+		class={({ isActive, isPending }) =>
+			[
+				"ridu-nav__link",
+				isActive && "ridu-nav__link--active",
+				isPending && "ridu-nav__link--pending",
+			]
+				.filter(Boolean)
+				.join(" ")}
+		onclick={onNavigate}
+	>
+		<span>{label}</span>
+	</NavLink>
+{/snippet}
+
+{#snippet defaultNavigation()}
+	{@render navigationContributions(navigationBefore)}
+
+	<nav aria-label={runtime.i18n.t("navigation:adminNavigation")} class="ridu-nav__scroll">
+		{@render navigationContributions(navigationBeforeLinks)}
+
+		{#each resourceGroups as group (group.key)}
+			<details open class="ridu-nav__group">
+				<summary class="ridu-nav__group-toggle">
+					<span>{runtime.i18n.text(group.label, group.translations)}</span>
+					<ChevronDownIcon class="ridu-nav__chevron" aria-hidden="true" />
+				</summary>
+				<div class="ridu-nav__links">
+					{#each group.collections as collection (collection.id)}
+						{@render navigationLink(
+							withContentLocale(collectionPath(collection.slug), contentLocale),
+							runtime.i18n.text(collection.labels.plural, collection.labels.pluralTranslations)
+						)}
+					{/each}
+
+					{#each group.globals as global (global.id)}
+						{@render navigationLink(
+							withContentLocale(globalPath(global.slug), contentLocale),
+							runtime.i18n.text(global.labels.singular, global.labels.singularTranslations)
+						)}
+					{/each}
+				</div>
+			</details>
+		{/each}
+
+		{#if navigationPluginRoutes.length > 0}
+			<details open class="ridu-nav__group">
+				<summary class="ridu-nav__group-toggle">
+					<span>{runtime.i18n.t("navigation:plugins")}</span>
+					<ChevronDownIcon class="ridu-nav__chevron" aria-hidden="true" />
+				</summary>
+				<div class="ridu-nav__links">
+					{#each navigationPluginRoutes as pluginRoute (pluginRoute.path)}
+						{@render navigationLink(`/${pluginRoute.path}`, pluginRouteLabel(pluginRoute))}
+					{/each}
+				</div>
+			</details>
+		{/if}
+
+		{@render navigationContributions(navigationAfterLinks)}
+		{#if runtime.session !== undefined}
+			<div class="ridu-nav__controls"><LogoutButton /></div>
+		{/if}
+	</nav>
+
+	{@render navigationContributions(navigationAfter)}
+{/snippet}
+
+{#if navigationLogo !== undefined && runtime.manifest !== undefined}
+	<Link
+		class="ridu-nav__brand"
+		to="/"
+		title={applicationName}
+		aria-label={applicationName}
+		onclick={onNavigate}
+	>
+		<navigationLogo.component
+			manifest={runtime.manifest}
+			user={runtime.session?.user}
+			surface="navigationLogo"
+			i18n={runtime.i18n}
+		/>
+	</Link>
+{/if}
+
+{#if runtime.manifest !== undefined && navigationReplacement !== undefined}
+	<navigationReplacement.component
+		manifest={runtime.manifest}
+		user={runtime.session?.user}
+		defaultView={defaultNavigation}
+		i18n={runtime.i18n}
+	/>
+{:else}
+	{@render defaultNavigation()}
+{/if}

package/src/features/navigation/breadcrumb-context.svelte.ts

@@ -0,0 +1,15 @@
+import { createContext } from "svelte";
+
+export class BreadcrumbState {
+	document = $state.raw<{ pathname: string; label: string; version?: string }>();
+}
+
+const [getState, setState, hasState] = createContext<BreadcrumbState>();
+
+export function provideBreadcrumbs() {
+	return setState(new BreadcrumbState());
+}
+
+export function getBreadcrumbs() {
+	return hasState() ? getState() : undefined;
+}

package/src/features/navigation/navigation-preference.svelte.ts

@@ -0,0 +1,70 @@
+import { isRecord } from "@riducms/protocol";
+import type { AdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
+import {
+	getPreferenceWriteQueue,
+	preferenceOwnerID,
+} from "@admin/core/preferences/preference-write-queue";
+
+const preferenceKey = "navigation";
+
+/** Owns the sidebar preference for the shell's lifetime, including viewport changes. */
+export function createNavigationPreference(
+	runtime: Pick<AdminRuntime, "client" | "session" | "preparedPreferences">
+) {
+	let open = $state(readOpen(runtime.preparedPreferences[preferenceKey]) ?? true);
+	// Profile/session snapshots can change without changing the actor who owns this preference.
+	const ownerID = $derived(preferenceOwnerID(runtime.session));
+	// Only the actor owning this initial snapshot may skip the first browser read.
+	let preparedOwner = Object.hasOwn(runtime.preparedPreferences, preferenceKey)
+		? preferenceOwnerID(runtime.session)
+		: "";
+	let generation = 0;
+
+	$effect(() => {
+		const owner = ownerID;
+		if (owner === "") return;
+		if (preparedOwner === owner) {
+			preparedOwner = "";
+			return;
+		}
+		const currentGeneration = ++generation;
+		const request = new AbortController();
+		runtime.client
+			.preference<unknown>(preferenceKey, { signal: request.signal })
+			.then((preference) => {
+				const value = readOpen(preference);
+				if (!request.signal.aborted && currentGeneration === generation && value !== undefined) {
+					open = value;
+				}
+			})
+			.catch(() => undefined);
+		return () => request.abort();
+	});
+
+	function toggle() {
+		generation += 1;
+		const next = !open;
+		open = next;
+		const owner = preferenceOwnerID(runtime.session);
+		if (owner === "") return;
+		getPreferenceWriteQueue()
+			.enqueue(
+				preferenceKey,
+				owner,
+				() => preferenceOwnerID(runtime.session) === owner,
+				() => runtime.client.setPreference(preferenceKey, { open: next })
+			)
+			.catch(() => undefined);
+	}
+
+	return {
+		get open() {
+			return open;
+		},
+		toggle,
+	};
+}
+
+function readOpen(value: unknown) {
+	return isRecord(value) && typeof value.open === "boolean" ? value.open : undefined;
+}

package/src/features/reference-browser/reference-browser-editor.svelte

@@ -0,0 +1,180 @@
+<script lang="ts">
+	import { tick } from "svelte";
+	import { Button, Input, buttonVariants } from "@riducms/ui";
+	import MoreVerticalIcon from "~icons/lucide/ellipsis-vertical";
+	import { Banner } from "@admin/components/ui/banner";
+	import { Skeleton } from "@admin/components/ui/skeleton";
+	import {
+		DropdownMenu,
+		DropdownMenuContent,
+		DropdownMenuItem,
+		DropdownMenuTrigger,
+	} from "@admin/components/ui/dropdown-menu";
+	import JsonViewer from "@admin/components/json-tree/json-viewer.svelte";
+	import { focusFieldIssue } from "@admin/core/forms/field-issue-focus";
+	import DocumentFieldSections from "@admin/features/documents/document-field-sections.svelte";
+	import UploadControl from "@admin/features/uploads/upload-control.svelte";
+	import type { ReferenceBrowserWorkflow } from "@admin/features/reference-browser/reference-browser-workflow.svelte";
+
+	let { controller }: { controller: ReferenceBrowserWorkflow } = $props();
+	// The drawer mounts one workflow and keeps its form and runtime for that session.
+	// svelte-ignore state_referenced_locally
+	const { runtime } = controller.options;
+	const i18n = runtime.i18n;
+	// svelte-ignore state_referenced_locally
+	const { form } = controller;
+	const { collection, creating, editorDocument, editorLoading, editorView, editorError, canSave } =
+		$derived(controller);
+	const readOnly = $derived(controller.options.readOnly);
+	const fields = $derived(
+		controller.editorFields.map((field) =>
+			readOnly ? { ...field, admin: { ...field.admin, readOnly: true } } : field
+		)
+	);
+	const singularLabel = $derived(
+		i18n.text(collection.labels.singular, collection.labels.singularTranslations)
+	);
+	let formElement: HTMLFormElement | undefined;
+
+	function timestamp(value: unknown) {
+		if (typeof value !== "string") return undefined;
+		const date = new Date(value);
+		return Number.isNaN(date.valueOf())
+			? undefined
+			: i18n.formatDate(date, { dateStyle: "long", timeStyle: "short" });
+	}
+
+	async function save(event: Event) {
+		event.preventDefault();
+		if (await controller.saveEditor()) return;
+
+		await tick();
+		if (controller.credentialIssue !== undefined) {
+			formElement?.querySelector<HTMLInputElement>("[autocomplete='new-password']")?.focus();
+			return;
+		}
+
+		const issue = form.issues[0];
+		if (issue && formElement) await focusFieldIssue(issue.path, formElement);
+	}
+</script>
+
+<form class="ridu-reference-editor" bind:this={formElement} onsubmit={save} novalidate>
+	<div class="ridu-reference-bar">
+		<div class="ridu-reference-metadata">
+			{#if creating}
+				<span>{i18n.t("documents:creatingLabel", { label: singularLabel })}</span>
+			{:else}
+				{const modified = $derived(timestamp(editorDocument?.updatedAt))}
+				{const created = $derived(timestamp(editorDocument?.createdAt))}
+				{#if modified}
+					<span>
+						{i18n.t("documents:lastModifiedLabel")}:
+						<strong>{modified}</strong>
+					</span>
+				{/if}
+				{#if created}
+					<span>
+						{i18n.t("documents:createdLabelPlain")}:
+						<strong>{created}</strong>
+					</span>
+				{/if}
+			{/if}
+		</div>
+		<div class="ridu-reference-actions">
+			{#if !readOnly && editorView === "edit"}
+				<Button type="submit" disabled={!canSave}>
+					{i18n.t(form.submitting ? "reference:saving" : "general:save")}
+				</Button>
+			{/if}
+			<DropdownMenu>
+				<DropdownMenuTrigger
+					type="button"
+					class={buttonVariants({ variant: "ghost", size: "icon" })}
+					aria-label={i18n.t("documents:moreActions")}
+				>
+					<MoreVerticalIcon />
+				</DropdownMenuTrigger>
+				<DropdownMenuContent>
+					<DropdownMenuItem
+						onclick={() => (controller.editorView = editorView === "edit" ? "api" : "edit")}
+					>
+						{i18n.t(editorView === "edit" ? "reference:api" : "reference:edit")}
+					</DropdownMenuItem>
+				</DropdownMenuContent>
+			</DropdownMenu>
+		</div>
+	</div>
+
+	<div class="ridu-reference-fields">
+		{#if editorLoading}
+			<div class="ridu-reference-loading" aria-label={i18n.t("reference:loadingRelated")}>
+				<Skeleton class="ridu-reference-loading__input" />
+				<Skeleton class="ridu-reference-loading__input" />
+				<Skeleton class="ridu-reference-loading__textarea" />
+			</div>
+		{:else if editorView === "api"}
+			<JsonViewer value={form.values} />
+		{:else}
+			<fieldset class="ridu-reference-form" disabled={form.submitting}>
+				{#if readOnly}
+					<Banner tone="warning">{i18n.t("reference:readOnlyDescription")}</Banner>
+				{/if}
+				{#if editorError}
+					<Banner tone="destructive">{editorError}</Banner>
+				{/if}
+				{#if !readOnly && form.access && !form.access.operations[creating ? "create" : "update"]}
+					<Banner tone="warning">
+						{i18n.t(creating ? "reference:cannotCreate" : "reference:cannotUpdate", {
+							label: singularLabel.toLocaleLowerCase(i18n.language),
+						})}
+					</Banner>
+				{/if}
+
+				{#if collection.capabilities.upload && collection.uploadSettings}
+					<UploadControl
+						draft={controller.upload}
+						settings={collection.uploadSettings}
+						editable={controller.editableUpload}
+					/>
+				{/if}
+
+				{#if controller.creatingAuthUser}
+					<div class="ridu-reference-credentials">
+						<label>
+							<span class="ridu-field-label">{i18n.t("reference:password")}</span>
+							<Input
+								type="password"
+								autocomplete="new-password"
+								required
+								disabled={!form.access?.operations.create}
+								aria-invalid={controller.credentialIssue !== undefined}
+								bind:value={controller.newUserPassword}
+								oninput={() => (controller.credentialIssue = undefined)}
+							/>
+						</label>
+						<label>
+							<span class="ridu-field-label">{i18n.t("reference:confirmPassword")}</span>
+							<Input
+								type="password"
+								autocomplete="new-password"
+								required
+								disabled={!form.access?.operations.create}
+								aria-invalid={controller.credentialIssue !== undefined}
+								bind:value={controller.newUserPasswordConfirmation}
+								oninput={() => (controller.credentialIssue = undefined)}
+							/>
+						</label>
+						{#if controller.credentialIssue}
+							<p class="ridu-field-error" role="alert">
+								{controller.credentialIssue}
+							</p>
+						{/if}
+					</div>
+				{/if}
+
+				<DocumentFieldSections {fields} {form} />
+			</fieldset>
+		{/if}
+	</div>
+</form>

package/src/features/reference-browser/reference-browser-list.scss

@@ -0,0 +1,113 @@
+@use "@riducms/ui/styles.scss" as ui;
+
+@layer ridu.components {
+	.ridu-reference-list {
+		min-width: 0;
+		font-size: var(--font-size-body);
+		line-height: var(--line-height-body);
+
+		.ridu-list-controls {
+			margin: 0;
+			padding-inline: var(--admin-gutter);
+		}
+
+		.ridu-list-table {
+			th,
+			td {
+				min-width: 115px;
+			}
+
+			.ridu-list-table__selection {
+				min-width: 48px;
+			}
+		}
+	}
+
+	.ridu-reference-list__results {
+		padding: 20px var(--admin-gutter) 0;
+
+		&[aria-busy="true"] tbody {
+			opacity: 0.5;
+		}
+	}
+
+	.ridu-reference-list__document-button {
+		display: inline-flex;
+		align-items: center;
+		gap: 10px;
+		max-width: 100%;
+		padding: 0;
+		border: 0;
+		background: none;
+		color: inherit;
+		font: inherit;
+		text-align: start;
+		text-decoration: underline;
+		text-underline-offset: 2px;
+		cursor: pointer;
+
+		&:focus-visible {
+			@include ui.focus-outline;
+		}
+
+		&:disabled {
+			cursor: default;
+			opacity: 0.5;
+		}
+	}
+
+	.ridu-reference-list__thumbnail {
+		width: 35px;
+		height: 35px;
+		flex: none;
+		object-fit: cover;
+		border-radius: 3px;
+	}
+
+	.ridu-reference-list__edit-button {
+		vertical-align: middle;
+		margin-inline-start: 8px;
+		padding: 4px;
+		border: 0;
+		background: none;
+		color: var(--foreground-muted);
+		cursor: pointer;
+
+		&:hover {
+			color: var(--foreground);
+		}
+
+		&:focus-visible {
+			@include ui.focus-outline;
+		}
+
+		&:disabled {
+			opacity: 0.5;
+			cursor: default;
+		}
+
+		svg {
+			width: 14px;
+			height: 14px;
+		}
+	}
+
+	.ridu-reference-list__footer {
+		padding: 20px var(--admin-gutter) 60px;
+	}
+
+	.ridu-reference-list__selection-actions {
+		display: flex;
+		justify-content: flex-end;
+		gap: 10px;
+		margin-top: 12px;
+	}
+
+	@media (max-width: ui.$small) {
+		.ridu-reference-list .ridu-list-controls,
+		.ridu-reference-list__results,
+		.ridu-reference-list__footer {
+			padding-inline: 15px;
+		}
+	}
+}