@riducms/admin 0.2.2 → 0.3.0

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

@@ -23,18 +23,38 @@ export interface ListFilter {
 	value: string;
 }
 
+export interface ListColumn {
+	path: string;
+	label: string;
+	field?: SchemaField;
+}
+
+/** OR groups containing AND conditions. */
+export type ListFilterGroup = ListFilter[];
+
+export interface ListColumnSelection {
+	path: string;
+	active: boolean;
+}
+
 export interface ListWorkspacePreference {
-	columns: string[];
-	showStatus: boolean;
-	showID: boolean;
-	showCreated: boolean;
-	showUpdated: boolean;
+	columns: ListColumnSelection[];
 	limit: ListPageSize;
 }
 
+/** The resolved list view, also stored when an author saves a named view. */
+export interface ListViewState extends ListWorkspacePreference {
+	q: string;
+	status: string;
+	folder: string;
+	view: "list" | "hierarchy";
+	filters: ListFilterGroup[];
+	sort: string;
+}
+
 const textOperators: readonly ListFilterOperator[] = [
-	"like",
 	"equals",
+	"like",
 	"notEquals",
 	"contains",
 	"exists",
@@ -50,14 +70,31 @@ const orderedOperators: readonly ListFilterOperator[] = [
 ];
 const identityOperators: readonly ListFilterOperator[] = ["equals", "notEquals", "exists"];
 
-export function listColumnFields(collection: SchemaCollection | undefined, titleName?: string) {
+export function listColumnFields(collection: SchemaCollection | undefined) {
 	return (collection?.fields ?? []).flatMap((field) => {
-		if (field.name === titleName || field.type === "ui") return [];
+		if (field.type === "ui") return [];
 		if (field.type === "group") return nestedFields(field, "columns");
 		return [field];
 	});
 }
 
+export function bulkEditableListFields(fields: readonly SchemaField[]) {
+	return fields.filter(
+		(field) =>
+			field.category === "scalar" &&
+			!field.localized &&
+			!field.unique &&
+			field.virtual === undefined &&
+			!field.admin.hidden &&
+			!field.admin.readOnly &&
+			field.admin.condition === undefined &&
+			(field.type !== "select" || !field.select?.hasMany) &&
+			["text", "textarea", "email", "date", "number", "checkbox", "select", "radio"].includes(
+				field.type
+			)
+	);
+}
+
 export function filterableFields(fields: readonly SchemaField[]) {
 	return fields.flatMap((field) => {
 		if (field.queryRestricted) return [];
@@ -87,18 +124,23 @@ export function sortableField(field: SchemaField) {
 
 export function defaultListColumns(
 	collection: SchemaCollection | undefined,
-	fields: readonly SchemaField[]
+	fields: readonly ListColumn[]
 ) {
 	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);
+		if (
+			field.field !== undefined &&
+			field.path === field.field.name &&
+			!byName.has(field.field.name)
+		)
+			byName.set(field.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);
+	return [...new Set([fields[0]?.path ?? "id", "id", "updatedAt", "createdAt"])];
 }
 
 export function filterOperatorsFor(field: SchemaField): readonly ListFilterOperator[] {
@@ -126,7 +168,17 @@ export function filterOperatorLabel(operator: ListFilterOperator, i18n: AdminI18
 	return i18n.t(labels[operator]);
 }
 
-export function normalizeListFilters(value: unknown, fields: readonly SchemaField[]): ListFilter[] {
+export function normalizeListFilters(
+	value: unknown,
+	fields: readonly SchemaField[]
+): ListFilterGroup[] {
+	if (!Array.isArray(value)) return [];
+	return value
+		.map((group) => normalizeFilterGroup(group, fields))
+		.filter((group) => group.length > 0);
+}
+
+function normalizeFilterGroup(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) => {
@@ -166,56 +218,21 @@ export function parseListFilters(encoded: string | null, fields: readonly Schema
 	}
 }
 
-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 || !filterOperatorsFor(field).includes(filter.operator)) return [];
-		if (filter.operator === "exists") {
-			return [{ [filter.field]: { exists: filter.value !== "false" } }];
-		}
-		if (filter.value === "" && field.type !== "text-list") return [];
-		let value: string | number | boolean = filter.value;
-		if (field.type === "number" || field.type === "number-list") {
-			value = Number(filter.value);
-			if (!Number.isFinite(value)) return [];
-		} else if (field.type === "checkbox") {
-			value = filter.value === "true";
-		}
-		return [{ [filter.field]: { [filter.operator]: filter.operator === "in" ? [value] : value } }];
-	});
-}
-
-export function parseListPageSize(value: string | null, fallback: ListPageSize = 25): ListPageSize {
+export function parseListPageSize(value: string | null, fallback: ListPageSize = 10): ListPageSize {
 	const parsed = Number(value);
 	return listPageSizes.includes(parsed as ListPageSize) ? (parsed as ListPageSize) : fallback;
 }
 
 export function normalizeWorkspacePreference(
 	value: unknown,
-	fields: readonly SchemaField[],
+	fields: readonly Pick<ListColumn, "path">[],
 	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 columns = normalizeColumnSelection(Reflect.get(value, "columns"), fields, fallback.columns);
 	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
@@ -223,10 +240,37 @@ export function normalizeWorkspacePreference(
 	};
 }
 
-export function visibleColumnNames(encoded: string | null, fallback: readonly string[]) {
-	if (encoded === null) return [...fallback];
-	const names = encoded.split(",").filter(Boolean);
-	return [...new Set(names)];
+export function normalizeColumnSelection(
+	value: unknown,
+	fields: readonly { path: string }[],
+	fallback: readonly ListColumnSelection[]
+): ListColumnSelection[] {
+	const eligible = new Set(fields.map((field) => field.path));
+	const seen = new Set<string>();
+	const columns = (Array.isArray(value) ? value : fallback).flatMap((candidate: unknown) => {
+		if (typeof candidate !== "object" || candidate === null) return [];
+		const path = Reflect.get(candidate, "path"),
+			active = Reflect.get(candidate, "active");
+		if (
+			typeof path !== "string" ||
+			typeof active !== "boolean" ||
+			!eligible.has(path) ||
+			seen.has(path)
+		)
+			return [];
+		seen.add(path);
+		return [{ path, active }];
+	});
+	return [
+		...columns,
+		...fields
+			.filter((field) => !seen.has(field.path))
+			.map((field) => ({ path: field.path, active: false })),
+	];
+}
+
+export function encodeColumnSelection(columns: readonly ListColumnSelection[]) {
+	return columns.map((column) => (column.active ? column.path : `-${column.path}`)).join(",");
 }
 
 function nestedFields(field: SchemaField, mode: "columns" | "filters"): SchemaField[] {
@@ -277,3 +321,60 @@ function filterableLeaf(field: SchemaField) {
 		field.type !== "code"
 	);
 }
+
+/** Queryable document metadata is owned by the runtime, rather than application fields. */
+export function listMetadataFields(
+	collection: SchemaCollection | undefined,
+	i18n: AdminI18n
+): SchemaField[] {
+	const fields: SchemaField[] = [
+		{
+			id: "id",
+			name: "id",
+			path: "id",
+			type: "text",
+			category: "scalar",
+			required: false,
+			unique: false,
+			admin: { label: "ID" },
+		},
+		...(["createdAt", "updatedAt"] as const).map((path) => ({
+			id: path,
+			name: path,
+			path,
+			type: "date" as const,
+			date: { format: "date-time" as const },
+			category: "scalar" as const,
+			required: false,
+			unique: false,
+			admin: {
+				label: i18n.t(path === "createdAt" ? "collections:createdAt" : "collections:updatedAt"),
+			},
+		})),
+	];
+	if (collection?.capabilities.versions)
+		fields.push({
+			id: "_status",
+			name: "_status",
+			path: "_status",
+			type: "select",
+			category: "scalar",
+			required: false,
+			unique: false,
+			admin: {
+				label: i18n.t(
+					collection.fields.some((field) => field.name === "status")
+						? "collections:publicationStatus"
+						: "documents:status"
+				),
+			},
+			select: {
+				hasMany: false,
+				options: [
+					{ label: i18n.t("documents:draft"), value: "draft" },
+					{ label: i18n.t("documents:published"), value: "published" },
+				],
+			},
+		});
+	return fields;
+}

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

@@ -1,14 +1,17 @@
 <script lang="ts">
 	import { Link } from "@hvniel/svelte-router";
-	import ArrowRightIcon from "~icons/lucide/arrow-right";
+	import "@admin/features/dashboard/dashboard.scss";
 	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";
+	import AdminViewHost from "@admin/core/loaders/admin-view-host.svelte";
 
 	const runtime = getAdminRuntime();
+	const extensions = runtime.config.extensions;
+
 	const manifest = $derived(runtime.manifest);
 	const resourceGroups = $derived(
 		groupAdminResources(runtime.visibleCollections, runtime.visibleGlobals, {
@@ -16,40 +19,78 @@
 			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"
-		)
+
+	const replacement = extensions.dashboardPanels.find((panel) => panel.position === "replace");
+	const beforePanels = extensions.dashboardPanels.filter((panel) => panel.position === "before");
+	const afterPanels = extensions.dashboardPanels.filter(
+		(panel) => panel.position === undefined || panel.position === "after"
 	);
 </script>
 
+{#snippet resourceCard(
+	label: string,
+	path: string,
+	create: { label: string; path: string } | undefined
+)}
+	<article class="ridu-dashboard__card">
+		<Link
+			class="ridu-dashboard__card-link"
+			to={path}
+			aria-label={runtime.i18n.t("dashboard:open", { label })}
+		/>
+		<h3 class="ridu-dashboard__card-title">
+			{label}
+		</h3>
+		{#if create !== undefined}
+			<TooltipRoot>
+				<TooltipTrigger>
+					{#snippet child({ props })}
+						<Link
+							{...props}
+							class="ridu-dashboard__create"
+							to={create.path}
+							aria-label={runtime.i18n.t("dashboard:create", {
+								label: create.label.toLocaleLowerCase(runtime.i18n.language),
+							})}
+						>
+							<PlusIcon aria-hidden="true" />
+						</Link>
+					{/snippet}
+				</TooltipTrigger>
+				<TooltipContent>
+					{runtime.i18n.t("dashboard:create", { label: create.label })}
+				</TooltipContent>
+			</TooltipRoot>
+		{/if}
+	</article>
+{/snippet}
+
 {#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">
+	<AdminViewHost
+		view={replacement}
+		props={{ manifest, user: runtime.session?.user, i18n: runtime.i18n }}
+	/>
+{:else}
+	<section class="ridu-dashboard">
 		{#if manifest !== undefined && beforePanels.length > 0}
-			<div class="grid gap-3" aria-label={runtime.i18n.t("dashboard:extensions")}>
+			<div class="ridu-dashboard__extensions" aria-label={runtime.i18n.t("dashboard:extensions")}>
 				{#each beforePanels as panel (panel.key)}
-					<panel.component {manifest} user={runtime.session?.user} i18n={runtime.i18n} />
+					<AdminViewHost
+						view={panel}
+						props={{ manifest, user: runtime.session?.user, i18n: runtime.i18n }}
+					/>
 				{/each}
 			</div>
 		{/if}
 
-		<div class="mt-9 grid gap-9">
+		<div class="ridu-dashboard__groups">
 			{#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">
+				<section class="ridu-dashboard__group" aria-label={groupLabel}>
+					<h2 class="ridu-dashboard__heading">
+						{groupLabel}
+					</h2>
+					<div class="ridu-dashboard__cards">
 						{#each group.collections as collection (collection.id)}
 							{const pluralLabel = $derived(
 								runtime.i18n.text(collection.labels.plural, collection.labels.pluralTranslations)
@@ -60,71 +101,22 @@
 									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>
+							{@render resourceCard(
+								pluralLabel,
+								collectionPath(collection.slug),
+								runtime.collectionOperations[collection.slug]?.create
+									? {
+											label: singularLabel,
+											path: createDocumentPath(collection.slug),
+										}
+									: undefined
+							)}
 						{/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>
+							{@render resourceCard(globalLabel, globalPath(global.slug), undefined)}
 						{/each}
 					</div>
 				</section>
@@ -132,10 +124,14 @@
 		</div>
 
 		{#if manifest !== undefined && afterPanels.length > 0}
-			<div class="mt-8 grid gap-3" aria-label={runtime.i18n.t("dashboard:extensions")}>
+			<div class="ridu-dashboard__extensions" aria-label={runtime.i18n.t("dashboard:extensions")}>
 				{#each afterPanels as panel (panel.key)}
-					<panel.component {manifest} user={runtime.session?.user} i18n={runtime.i18n} />
+					<AdminViewHost
+						view={panel}
+						props={{ manifest, user: runtime.session?.user, i18n: runtime.i18n }}
+					/>
 				{/each}
 			</div>
 		{/if}
-	</section>{/if}
+	</section>
+{/if}

package/src/features/dashboard/dashboard.scss

@@ -0,0 +1,131 @@
+@use "@riducms/ui/styles.scss" as ui;
+
+@layer ridu.components {
+	.ridu-dashboard {
+		width: 100%;
+		padding: 0 var(--admin-gutter) var(--admin-gutter);
+	}
+	.ridu-dashboard__groups {
+		padding: 6px;
+		display: grid;
+		gap: var(--admin-space);
+	}
+	.ridu-dashboard__group {
+		display: flex;
+		flex-direction: column;
+		gap: var(--admin-space);
+	}
+	.ridu-dashboard__heading {
+		margin: 0;
+		font-size: 26px;
+		line-height: 32px;
+		font-weight: 500;
+	}
+	.ridu-dashboard__cards {
+		display: grid;
+		grid-template-columns: repeat(5, minmax(0, 1fr));
+		gap: 12px;
+	}
+	.ridu-dashboard__card {
+		position: relative;
+		display: flex;
+		justify-content: space-between;
+		align-self: start;
+		gap: 16px;
+		height: 100%;
+		min-height: 80px;
+		padding: 16px;
+		background: var(--background-surface);
+		border: 1px solid var(--control-border);
+		border-radius: 4px;
+		transition:
+			border-color 100ms,
+			box-shadow 100ms;
+
+		&:hover {
+			border-color: var(--control-border-hover);
+			box-shadow: var(--dashboard-card-shadow);
+		}
+	}
+	.ridu-dashboard__card-link {
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+	}
+	.ridu-dashboard__card-link:focus-visible,
+	.ridu-dashboard__create:focus-visible {
+		@include ui.focus-outline;
+	}
+	.ridu-dashboard__card-title {
+		margin: 2px 0;
+		min-width: 0;
+		flex: 1;
+		font-size: var(--font-size-body);
+		font-weight: 600;
+		line-height: 16px;
+		overflow-wrap: anywhere;
+	}
+	.ridu-dashboard__create {
+		position: relative;
+		z-index: 1;
+		flex-shrink: 0;
+		display: grid;
+		place-items: center;
+		width: 22px;
+		height: 22px;
+		border: 1px solid var(--control-border);
+		border-radius: 50%;
+		color: var(--foreground-muted);
+
+		svg {
+			width: 16px;
+			height: 16px;
+			stroke-width: 1;
+		}
+
+		&:hover {
+			background: var(--background);
+			border-color: var(--ring);
+			box-shadow: var(--control-shadow);
+			color: var(--foreground);
+		}
+	}
+	.ridu-dashboard__extensions {
+		display: grid;
+		gap: var(--admin-space);
+		margin-bottom: 30px;
+	}
+	.ridu-dashboard__groups + .ridu-dashboard__extensions {
+		margin-top: 30px;
+		margin-bottom: 0;
+	}
+	@media (max-width: ui.$large) {
+		.ridu-dashboard__cards {
+			grid-template-columns: repeat(4, minmax(0, 1fr));
+		}
+	}
+	@media (max-width: ui.$medium) {
+		.ridu-dashboard__cards {
+			grid-template-columns: repeat(2, minmax(0, 1fr));
+		}
+	}
+	@media (max-width: ui.$small) {
+		.ridu-dashboard__cards {
+			gap: 8px;
+		}
+		.ridu-dashboard__heading {
+			font-size: 17px;
+			line-height: 32px;
+		}
+	}
+	@media (max-width: 400px) {
+		.ridu-dashboard__cards {
+			grid-template-columns: minmax(0, 1fr);
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.ridu-dashboard__card {
+			transition: none;
+		}
+	}
+}