@riducms/admin 0.1.0

package/src/features/collections/list-workspace.ts

@@ -0,0 +1,265 @@
+import type { SchemaCollection, SchemaField } from "@riducms/protocol";
+import type { AdminI18n } from "@riducms/translations";
+
+export const listPageSizes = [10, 25, 50, 100] as const;
+
+export type ListPageSize = (typeof listPageSizes)[number];
+export type ListFilterOperator =
+	| "equals"
+	| "notEquals"
+	| "like"
+	| "contains"
+	| "greaterThan"
+	| "greaterThanEqual"
+	| "lessThan"
+	| "lessThanEqual"
+	| "exists";
+
+export interface ListFilter {
+	field: string;
+	operator: ListFilterOperator;
+	value: string;
+}
+
+export interface ListWorkspacePreference {
+	columns: string[];
+	showStatus: boolean;
+	showID: boolean;
+	showCreated: boolean;
+	showUpdated: boolean;
+	limit: ListPageSize;
+}
+
+const textOperators: readonly ListFilterOperator[] = [
+	"like",
+	"equals",
+	"notEquals",
+	"contains",
+	"exists",
+];
+const orderedOperators: readonly ListFilterOperator[] = [
+	"equals",
+	"notEquals",
+	"greaterThan",
+	"greaterThanEqual",
+	"lessThan",
+	"lessThanEqual",
+	"exists",
+];
+const identityOperators: readonly ListFilterOperator[] = ["equals", "notEquals", "exists"];
+
+export function listColumnFields(collection: SchemaCollection | undefined, titleName?: string) {
+	return (collection?.fields ?? []).flatMap((field) => {
+		if (field.name === titleName || field.type === "ui") return [];
+		if (field.type === "group") return nestedFields(field, "columns");
+		return [field];
+	});
+}
+
+export function filterableFields(fields: readonly SchemaField[]) {
+	return fields.flatMap((field) => {
+		if (field.type === "group" || field.type === "array" || field.type === "blocks") {
+			return nestedFields(field, "filters");
+		}
+		return filterableLeaf(field) ? [field] : [];
+	});
+}
+
+export function sortableField(field: SchemaField) {
+	return (
+		field.virtual === undefined &&
+		field.join === undefined &&
+		field.type !== "array" &&
+		field.type !== "blocks" &&
+		field.type !== "group" &&
+		field.type !== "json" &&
+		field.plugin === undefined &&
+		field.type !== "point" &&
+		field.type !== "code"
+	);
+}
+
+export function defaultListColumns(
+	collection: SchemaCollection | undefined,
+	fields: readonly SchemaField[]
+) {
+	const byName = new Map(fields.map((field) => [field.path, field.path]));
+	for (const field of fields) {
+		if (field.path === field.name && !byName.has(field.name)) byName.set(field.name, field.path);
+	}
+	const configured = (collection?.admin.defaultColumns ?? []).flatMap((name) => {
+		const path = byName.get(name);
+		return path === undefined ? [] : [path];
+	});
+	if (configured.length > 0) return configured;
+	return fields.slice(0, 2).map((field) => field.path);
+}
+
+export function filterOperatorsFor(field: SchemaField): readonly ListFilterOperator[] {
+	if (field.type === "number" || field.type === "date") return orderedOperators;
+	if (field.type === "text" || field.type === "textarea" || field.type === "email") {
+		return textOperators;
+	}
+	return identityOperators;
+}
+
+export function filterOperatorLabel(operator: ListFilterOperator, i18n: AdminI18n) {
+	const labels: Record<ListFilterOperator, Parameters<AdminI18n["t"]>[0]> = {
+		equals: "collections:operatorEquals",
+		notEquals: "collections:operatorNotEquals",
+		like: "collections:operatorLike",
+		contains: "collections:operatorContains",
+		greaterThan: "collections:operatorGreaterThan",
+		greaterThanEqual: "collections:operatorGreaterThanEqual",
+		lessThan: "collections:operatorLessThan",
+		lessThanEqual: "collections:operatorLessThanEqual",
+		exists: "collections:operatorExists",
+	};
+	return i18n.t(labels[operator]);
+}
+
+export function normalizeListFilters(value: unknown, fields: readonly SchemaField[]): ListFilter[] {
+	if (!Array.isArray(value)) return [];
+	const byName = new Map(fields.map((field) => [field.path, field]));
+	return value.flatMap((candidate) => {
+		if (typeof candidate !== "object" || candidate === null) return [];
+		const fieldName = Reflect.get(candidate, "field");
+		const operator = Reflect.get(candidate, "operator");
+		const rawValue = Reflect.get(candidate, "value");
+		if (typeof fieldName !== "string" || typeof operator !== "string") return [];
+		const field = byName.get(fieldName);
+		if (
+			field === undefined ||
+			!filterOperatorsFor(field).includes(operator as ListFilterOperator)
+		) {
+			return [];
+		}
+		return [
+			{
+				field: fieldName,
+				operator: operator as ListFilterOperator,
+				value:
+					typeof rawValue === "string" ||
+					typeof rawValue === "number" ||
+					typeof rawValue === "boolean"
+						? String(rawValue)
+						: "",
+			},
+		];
+	});
+}
+
+export function parseListFilters(encoded: string | null, fields: readonly SchemaField[]) {
+	if (encoded === null || encoded === "") return [];
+	try {
+		return normalizeListFilters(JSON.parse(encoded), fields);
+	} catch {
+		return [];
+	}
+}
+
+export function buildListFilterWhere(
+	filters: readonly ListFilter[],
+	fields: readonly SchemaField[]
+) {
+	const byName = new Map(fields.map((field) => [field.path, field]));
+	return filters.flatMap((filter): Record<string, unknown>[] => {
+		const field = byName.get(filter.field);
+		if (field === undefined) return [];
+		if (filter.operator === "exists") {
+			return [{ [filter.field]: { exists: filter.value !== "false" } }];
+		}
+		if (filter.value === "") return [];
+		let value: string | number | boolean = filter.value;
+		if (field.type === "number") {
+			value = Number(filter.value);
+			if (!Number.isFinite(value)) return [];
+		} else if (field.type === "checkbox") {
+			value = filter.value === "true";
+		}
+		return [{ [filter.field]: { [filter.operator]: value } }];
+	});
+}
+
+export function parseListPageSize(value: string | null, fallback: ListPageSize = 25): ListPageSize {
+	const parsed = Number(value);
+	return listPageSizes.includes(parsed as ListPageSize) ? (parsed as ListPageSize) : fallback;
+}
+
+export function normalizeWorkspacePreference(
+	value: unknown,
+	fields: readonly SchemaField[],
+	fallback: ListWorkspacePreference
+): ListWorkspacePreference {
+	if (typeof value !== "object" || value === null) return fallback;
+	const eligible = new Set(fields.map((field) => field.path));
+	const rawColumns = Reflect.get(value, "columns");
+	const columns = Array.isArray(rawColumns)
+		? rawColumns.filter((name): name is string => typeof name === "string" && eligible.has(name))
+		: fallback.columns;
+	const showStatus = Reflect.get(value, "showStatus");
+	const showID = Reflect.get(value, "showID");
+	const showCreated = Reflect.get(value, "showCreated");
+	const showUpdated = Reflect.get(value, "showUpdated");
+	const rawLimit = Reflect.get(value, "limit");
+	return {
+		columns,
+		showStatus: typeof showStatus === "boolean" ? showStatus : fallback.showStatus,
+		showID: typeof showID === "boolean" ? showID : fallback.showID,
+		showCreated: typeof showCreated === "boolean" ? showCreated : fallback.showCreated,
+		showUpdated: typeof showUpdated === "boolean" ? showUpdated : fallback.showUpdated,
+		limit: parseListPageSize(
+			typeof rawLimit === "number" ? String(rawLimit) : null,
+			fallback.limit
+		),
+	};
+}
+
+export function visibleColumnNames(encoded: string | null, fallback: readonly string[]) {
+	if (encoded === null) return [...fallback];
+	const names = encoded.split(",").filter(Boolean);
+	return [...new Set(names)];
+}
+
+function nestedFields(field: SchemaField, mode: "columns" | "filters"): SchemaField[] {
+	if (field.type === "blocks") {
+		if (mode === "columns") return [];
+		return (field.blocks?.types ?? []).flatMap((block) =>
+			block.fields.flatMap((child) =>
+				withListLabel(child, `${field.admin.label} > ${block.label}`, mode)
+			)
+		);
+	}
+	return (field.nested?.fields ?? []).flatMap((child) =>
+		withListLabel(child, field.admin.label, mode)
+	);
+}
+
+function withListLabel(
+	field: SchemaField,
+	prefix: string,
+	mode: "columns" | "filters"
+): SchemaField[] {
+	const labelled = {
+		...field,
+		admin: { ...field.admin, label: `${prefix} > ${field.admin.label}` },
+	};
+	if (field.type === "group" || (mode === "filters" && field.type === "array")) {
+		return nestedFields(labelled, mode);
+	}
+	if (field.type === "blocks") return mode === "filters" ? nestedFields(labelled, mode) : [];
+	if (mode === "filters" && !filterableLeaf(field)) return [];
+	return [labelled];
+}
+
+function filterableLeaf(field: SchemaField) {
+	return (
+		field.virtual === undefined &&
+		field.join === undefined &&
+		field.plugin === undefined &&
+		field.type !== "ui" &&
+		field.type !== "json" &&
+		field.type !== "point" &&
+		field.type !== "code"
+	);
+}

package/src/features/dashboard/dashboard-route.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">
+	import { Link } from "@hvniel/svelte-router";
+	import ArrowRightIcon from "~icons/lucide/arrow-right";
+	import PlusIcon from "~icons/lucide/plus";
+	import { TooltipContent, TooltipRoot, TooltipTrigger } from "@riducms/ui";
+
+	import { collectionPath, createDocumentPath, globalPath } from "@admin/core/routing/admin-paths";
+	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
+	import { groupAdminResources } from "@admin/features/navigation/admin-resource-groups";
+
+	const runtime = getAdminRuntime();
+	const manifest = $derived(runtime.manifest);
+	const resourceGroups = $derived(
+		groupAdminResources(runtime.visibleCollections, runtime.visibleGlobals, {
+			collections: runtime.i18n.t("navigation:collections"),
+			globals: runtime.i18n.t("navigation:globals"),
+		})
+	);
+	const replacement = $derived(
+		runtime.dashboardPanels.find((panel) => panel.position === "replace")
+	);
+	const beforePanels = $derived(
+		runtime.dashboardPanels.filter((panel) => panel.position === "before")
+	);
+	const afterPanels = $derived(
+		runtime.dashboardPanels.filter(
+			(panel) => panel.position === undefined || panel.position === "after"
+		)
+	);
+</script>
+
+{#if manifest !== undefined && replacement !== undefined}
+	<replacement.component {manifest} user={runtime.session?.user} i18n={runtime.i18n} />
+{:else}<section class="w-full px-5 pb-7 sm:px-8 sm:pb-9 lg:px-15">
+		{#if manifest !== undefined && beforePanels.length > 0}
+			<div class="grid gap-3" aria-label={runtime.i18n.t("dashboard:extensions")}>
+				{#each beforePanels as panel (panel.key)}
+					<panel.component {manifest} user={runtime.session?.user} i18n={runtime.i18n} />
+				{/each}
+			</div>
+		{/if}
+
+		<div class="mt-9 grid gap-9">
+			{#each resourceGroups as group (group.key)}
+				{const groupLabel = $derived(runtime.i18n.text(group.label, group.translations))}
+				<section aria-label={groupLabel}>
+					<div class="mb-3 flex items-end justify-between gap-4">
+						<h2 class="text-[18px] font-medium text-foreground-strong">
+							{groupLabel}
+						</h2>
+					</div>
+					<div class="grid grid-cols-[repeat(auto-fill,minmax(min(260px,100%),260px))] gap-2.5">
+						{#each group.collections as collection (collection.id)}
+							{const pluralLabel = $derived(
+								runtime.i18n.text(collection.labels.plural, collection.labels.pluralTranslations)
+							)}
+							{const singularLabel = $derived(
+								runtime.i18n.text(
+									collection.labels.singular,
+									collection.labels.singularTranslations
+								)
+							)}
+							<article
+								class="group relative flex min-h-20 items-center gap-3 rounded-[3px] bg-control px-4 py-3.5 transition-colors hover:bg-control-hover"
+							>
+								<Link
+									class="absolute inset-0 rounded-[3px] focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2"
+									to={collectionPath(collection.slug)}
+									aria-label={runtime.i18n.t("dashboard:open", {
+										label: pluralLabel,
+									})}
+								/>
+								<h3 class="min-w-0 flex-1 text-[14px] font-medium text-foreground-strong">
+									{pluralLabel}
+								</h3>
+								{#if runtime.collectionOperations[collection.slug]?.create}
+									<TooltipRoot>
+										<TooltipTrigger>
+											{#snippet child({ props })}
+												<Link
+													{...props}
+													class="relative z-1 grid size-8 shrink-0 place-items-center rounded-[3px] text-foreground-muted hover:bg-background-layer hover:text-foreground-strong"
+													to={createDocumentPath(collection.slug)}
+													aria-label={runtime.i18n.t("dashboard:create", {
+														label: singularLabel.toLocaleLowerCase(runtime.i18n.language),
+													})}
+												>
+													<PlusIcon class="size-4" />
+												</Link>
+											{/snippet}
+										</TooltipTrigger>
+										<TooltipContent>
+											{runtime.i18n.t("dashboard:create", {
+												label: singularLabel,
+											})}
+										</TooltipContent>
+									</TooltipRoot>
+								{:else}
+									<ArrowRightIcon
+										class="size-4 text-foreground-faint rtl:rotate-180"
+										aria-hidden="true"
+									/>
+								{/if}
+							</article>
+						{/each}
+						{#each group.globals as global (global.id)}
+							{const globalLabel = $derived(
+								runtime.i18n.text(global.labels.singular, global.labels.singularTranslations)
+							)}
+							<article
+								class="group relative flex min-h-20 items-center gap-3 rounded-[3px] bg-control px-4 py-3.5 transition-colors hover:bg-control-hover"
+							>
+								<Link
+									class="absolute inset-0 rounded-[3px] focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2"
+									to={globalPath(global.slug)}
+									aria-label={runtime.i18n.t("dashboard:open", {
+										label: globalLabel,
+									})}
+								/>
+								<h3 class="min-w-0 flex-1 text-[14px] font-medium text-foreground-strong">
+									{globalLabel}
+								</h3>
+								<ArrowRightIcon
+									class="size-4 text-foreground-faint rtl:rotate-180"
+									aria-hidden="true"
+								/>
+							</article>
+						{/each}
+					</div>
+				</section>
+			{/each}
+		</div>
+
+		{#if manifest !== undefined && afterPanels.length > 0}
+			<div class="mt-8 grid gap-3" aria-label={runtime.i18n.t("dashboard:extensions")}>
+				{#each afterPanels as panel (panel.key)}
+					<panel.component {manifest} user={runtime.session?.user} i18n={runtime.i18n} />
+				{/each}
+			</div>
+		{/if}
+	</section>{/if}

package/src/features/development/development-tools.svelte

@@ -0,0 +1,217 @@
+<script lang="ts">
+	import BookOpenIcon from "~icons/lucide/book-open";
+	import ExternalLinkIcon from "~icons/lucide/external-link";
+	import LoaderCircleIcon from "~icons/lucide/loader-circle";
+	import { onDestroy } from "svelte";
+
+	import RiduLogo from "@admin/components/brand/ridu-logo.svelte";
+	import { Button } from "@admin/components/ui/button";
+	import { Popover, PopoverContent, PopoverTrigger } from "@admin/components/ui/popover";
+	import { StatusIndicator } from "@admin/components/ui/status-indicator";
+	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
+	import { cn } from "@riducms/ui";
+
+	type SchemaUpdateNotice = {
+		tone: "success" | "error";
+		label: string;
+	};
+
+	const runtime = getAdminRuntime();
+	let updateApplied = $state(false);
+	let notice = $state<SchemaUpdateNotice>();
+	let popoverOpen = $state(false);
+	let recoveryAvailable = $state(runtime.manifestRefreshError !== undefined);
+	let refreshObserved = false;
+	let noticeTimer: number | undefined;
+	const status = $derived(
+		runtime.refreshingManifest
+			? {
+					label: runtime.i18n.t("navigation:applyingSchemaUpdate"),
+					tone: "live" as const,
+				}
+			: runtime.manifestRefreshError !== undefined
+				? {
+						label: runtime.i18n.t("development:schemaUpdateFailed"),
+						tone: "destructive" as const,
+					}
+				: updateApplied
+					? {
+							label: runtime.i18n.t("development:upToDate"),
+							tone: "success" as const,
+						}
+					: {
+							label: runtime.i18n.t("development:ready"),
+							tone: "live" as const,
+						}
+	);
+
+	function hideNotice() {
+		if (noticeTimer !== undefined) window.clearTimeout(noticeTimer);
+		notice = undefined;
+		noticeTimer = undefined;
+	}
+
+	function showNotice(next: SchemaUpdateNotice, duration: number) {
+		hideNotice();
+		notice = next;
+		noticeTimer = window.setTimeout(() => {
+			notice = undefined;
+			noticeTimer = undefined;
+		}, duration);
+	}
+
+	onDestroy(() => {
+		if (noticeTimer !== undefined) window.clearTimeout(noticeTimer);
+	});
+
+	function retrySchema() {
+		if (runtime.loading || runtime.refreshingManifest) return;
+		void runtime.refreshManifest();
+	}
+
+	$effect(() => {
+		const refreshing = runtime.refreshingManifest;
+		const error = runtime.manifestRefreshError;
+		if (refreshing) {
+			refreshObserved = true;
+			hideNotice();
+			updateApplied = false;
+			return;
+		}
+		if (!refreshObserved) return;
+		refreshObserved = false;
+
+		if (error !== undefined) {
+			recoveryAvailable = true;
+			showNotice({ tone: "error", label: runtime.i18n.t("development:schemaUpdateFailed") }, 7_000);
+		} else {
+			showNotice(
+				{ tone: "success", label: runtime.i18n.t("development:schemaUpdateApplied") },
+				4_500
+			);
+			updateApplied = true;
+			if (recoveryAvailable) popoverOpen = false;
+			recoveryAvailable = false;
+		}
+	});
+</script>
+
+<div class="fixed end-3 bottom-3 z-30" data-ridu-development-tools>
+	{#if notice !== undefined}
+		<div
+			class={cn(
+				"ridu-popover-enter pointer-events-none absolute end-full bottom-0 me-2 flex h-9 max-w-[calc(100vw-4.5rem)] items-center gap-2 whitespace-nowrap rounded-[8px] border bg-popover px-3 text-[12.5px] font-medium shadow-[var(--shadow-popover)]",
+				notice.tone === "error"
+					? "border-destructive/30 text-destructive"
+					: "border-success/30 text-success"
+			)}
+			role={notice.tone === "error" ? "alert" : "status"}
+			data-ridu-development-toast
+			data-tone={notice.tone}
+		>
+			<span class="size-1.75 shrink-0 rounded-full bg-current" aria-hidden="true"></span>
+			<span class="truncate">{notice.label}</span>
+		</div>
+	{/if}
+
+	<Popover bind:open={popoverOpen}>
+		<PopoverTrigger
+			class={cn(
+				"relative inline-grid size-9 cursor-pointer place-items-center rounded-full border bg-popover text-popover-foreground shadow-[var(--shadow-popover)] transition-[background-color,border-color,color] duration-150 outline-none hover:bg-control-hover focus-visible:outline-2 focus-visible:outline-ring/70 focus-visible:outline-offset-2",
+				runtime.manifestRefreshError !== undefined
+					? "border-destructive/55"
+					: updateApplied
+						? "border-success/55"
+						: "border-control-border"
+			)}
+			aria-label={runtime.i18n.t("development:toolsStatus", { status: status.label })}
+			title={runtime.i18n.t("development:tools")}
+			data-ridu-development-trigger
+		>
+			{#if runtime.refreshingManifest}
+				<LoaderCircleIcon
+					class="size-4 animate-spin text-primary motion-reduce:animate-none"
+					aria-hidden="true"
+				/>
+			{:else}
+				<RiduLogo variant="arch" class="h-4 text-foreground" />
+			{/if}
+			<span
+				class={cn(
+					"absolute top-0 end-0 size-2.5 rounded-full border-2 border-popover",
+					runtime.manifestRefreshError !== undefined
+						? "bg-destructive"
+						: updateApplied
+							? "bg-success"
+							: "bg-primary"
+				)}
+				aria-hidden="true"
+			></span>
+		</PopoverTrigger>
+
+		<PopoverContent
+			class="w-[min(18rem,calc(100vw-1.5rem))] gap-0 overflow-hidden p-0"
+			side="top"
+			align="end"
+			sideOffset={8}
+			role="dialog"
+			aria-label={runtime.i18n.t("development:tools")}
+			data-ridu-development-panel
+		>
+			<div class="flex items-center gap-2.5 border-b border-control-border px-3.5 py-3">
+				<RiduLogo variant="arch" class="h-4 text-foreground" />
+				<p class="text-[13px] font-semibold text-foreground">
+					{runtime.i18n.t("development:tools")}
+				</p>
+			</div>
+
+			<div class="grid gap-2.5 px-3.5 py-3">
+				<div class="flex items-center justify-between gap-4">
+					<span class="font-mono text-[10px] tracking-[0.12em] text-foreground-faint uppercase">
+						{runtime.i18n.t("development:schema")}
+					</span>
+					<StatusIndicator tone={status.tone} pulse={runtime.refreshingManifest}>
+						{status.label}
+					</StatusIndicator>
+				</div>
+				{#if runtime.manifestRefreshError !== undefined}
+					<p class="text-[12px] leading-5 text-destructive">
+						{runtime.manifestRefreshError}
+					</p>
+				{/if}
+				{#if runtime.manifestRefreshError !== undefined || recoveryAvailable}
+					<Button
+						class="w-fit"
+						variant="outline"
+						size="sm"
+						aria-disabled={runtime.refreshingManifest}
+						aria-busy={runtime.refreshingManifest}
+						onclick={retrySchema}
+					>
+						{runtime.refreshingManifest
+							? runtime.i18n.t("navigation:applyingSchemaUpdate")
+							: runtime.i18n.t("development:retrySchemaUpdate")}
+					</Button>
+				{/if}
+			</div>
+
+			<a
+				class="flex items-center gap-2.5 border-t border-control-border px-3.5 py-3 text-foreground-muted outline-none transition-colors hover:bg-control-hover hover:text-foreground focus-visible:bg-control-hover focus-visible:text-foreground"
+				href="https://riducms.com"
+				target="_blank"
+				rel="noreferrer"
+			>
+				<BookOpenIcon class="size-3.5 shrink-0" aria-hidden="true" />
+				<span class="min-w-0 flex-1">
+					<span class="block text-[12.5px] font-medium">
+						{runtime.i18n.t("development:documentation")}
+					</span>
+					<span class="block text-[11px] text-foreground-faint">
+						{runtime.i18n.t("development:documentationDescription")}
+					</span>
+				</span>
+				<ExternalLinkIcon class="size-3.5 shrink-0" aria-hidden="true" />
+			</a>
+		</PopoverContent>
+	</Popover>
+</div>

package/src/features/documents/document-api-view-loader.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { getAdminI18n } from "@riducms/plugin";
+
+	type DocumentAPIViewProps = {
+		resourceSlug: string;
+		resourceLabel: string;
+		documentID?: string;
+		globalResource?: boolean;
+		fallbackValue: unknown;
+	};
+
+	let props: DocumentAPIViewProps = $props();
+	const i18n = getAdminI18n();
+	const view = import("@admin/features/documents/document-api-view.svelte");
+</script>
+
+{#await view}
+	<section
+		class="grid min-h-72 place-items-center"
+		aria-busy="true"
+		aria-label={i18n.t("documents:loadingAPIView")}
+	>
+		<p class="text-[12px] text-foreground-faint">{i18n.t("documents:loadingAPIView")}</p>
+	</section>
+{:then { default: DocumentAPIView }}
+	<DocumentAPIView {...props} />
+{:catch}
+	<section class="grid min-h-72 place-items-center" role="alert">
+		<p class="text-[12px] text-destructive">{i18n.t("documents:apiViewLoadFailed")}</p>
+	</section>
+{/await}