@riducms/admin 0.2.2 → 0.3.0

package/src/features/navigation/admin-breadcrumbs.scss

@@ -0,0 +1,56 @@
+@use "@riducms/ui/styles.scss" as ui;
+
+@layer ridu.components {
+	.ridu-breadcrumbs {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		min-width: 0;
+	}
+	.ridu-breadcrumbs__home {
+		display: grid;
+		place-items: center;
+		flex-shrink: 0;
+		width: 18px;
+		height: 18px;
+	}
+	.ridu-breadcrumbs__logo {
+		width: 18px;
+		height: 18px;
+	}
+	.ridu-breadcrumbs__separator {
+		flex-shrink: 0;
+	}
+	.ridu-breadcrumbs__link,
+	.ridu-breadcrumbs__current {
+		min-width: 0;
+		max-width: 160px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.ridu-breadcrumbs__link {
+		font-weight: 600;
+		text-decoration: none;
+
+		&:hover {
+			text-decoration: underline;
+		}
+	}
+	.ridu-breadcrumbs a:focus-visible {
+		@include ui.focus-outline;
+	}
+	@media (max-width: ui.$medium) {
+		.ridu-breadcrumbs__home,
+		.ridu-breadcrumbs__logo {
+			width: 16px;
+			height: 16px;
+		}
+	}
+	@media (max-width: ui.$small) {
+		.ridu-breadcrumbs {
+			gap: 8px;
+			flex: 1;
+		}
+	}
+}

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

@@ -1,8 +1,20 @@
 <script lang="ts">
+	import "@admin/features/navigation/admin-breadcrumbs.scss";
 	import { Link, useLocation } from "@hvniel/svelte-router";
 
+	import { getBreadcrumbs } from "@admin/features/navigation/breadcrumb-context.svelte";
 	import RiduLogo from "@admin/components/brand/ridu-logo.svelte";
-	import { collectionPath, globalPath } from "@admin/core/routing/admin-paths";
+	import {
+		adminPathSegments,
+		collectionPath,
+		documentPath,
+		documentVersionsPath,
+		globalVersionsPath,
+		globalPath,
+		humanizeAdminPathSegment,
+		parseAdminVersionRevision,
+		withContentLocale,
+	} from "@admin/core/routing/admin-paths";
 	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
 
 	interface Breadcrumb {
@@ -10,15 +22,12 @@
 		to?: string;
 	}
 
+	const page = getBreadcrumbs();
 	const runtime = getAdminRuntime();
-	const location = $derived(useLocation());
-	const segments = $derived(
-		location.pathname
-			.split("/")
-			.filter(Boolean)
-			.map((segment) => decodeURIComponent(segment))
-	);
+	const location = useLocation();
+
 	const breadcrumbs = $derived.by<Breadcrumb[]>(() => {
+		const segments = adminPathSegments(location.current.pathname);
 		if (segments.length === 0) return [{ label: runtime.i18n.t("dashboard:heading") }];
 
 		if (segments[0] === "account") {
@@ -30,6 +39,7 @@
 				...(segments[1] === "security" ? [{ label: runtime.i18n.t("account:security") }] : []),
 			];
 		}
+		const contentLocale = runtime.contentLocales.length === 0 ? undefined : runtime.contentLocale;
 
 		if (segments[0] === "collections" && segments[1] !== undefined) {
 			const collection = runtime.visibleCollections.find(
@@ -37,26 +47,60 @@
 			);
 			const label =
 				collection === undefined
-					? humanize(segments[1])
+					? humanizeAdminPathSegment(segments[1], runtime.i18n.language)
 					: runtime.i18n.text(collection.labels.plural, collection.labels.pluralTranslations);
 			if (segments.length > 2 && segments[2] !== "trash" && segments[2] !== "upload") {
 				const creating = segments[2] === "create";
 				const versions = segments[3] === "versions";
+				const versionRevision = versions ? parseAdminVersionRevision(segments[4]) : undefined;
+
 				return [
-					{ label, to: collectionPath(segments[1]) },
+					{ label, to: withContentLocale(collectionPath(segments[1]), contentLocale) },
 					{
 						label: creating
-							? runtime.i18n.t("general:create")
-							: versions
-								? runtime.i18n.t("documents:versions")
+							? runtime.i18n.t("collections:createNewButton")
+							: page?.document?.pathname === location.current.pathname
+								? page.document.label
 								: runtime.i18n.t("general:edit"),
+						to: versions
+							? withContentLocale(documentPath(segments[1], segments[2]!), contentLocale)
+							: undefined,
 					},
+					...(versions
+						? [
+								{
+									label: runtime.i18n.t("documents:versions"),
+									to:
+										versionRevision !== undefined
+											? withContentLocale(
+													documentVersionsPath(segments[1], segments[2]!),
+													contentLocale
+												)
+											: undefined,
+								},
+								...(versionRevision !== undefined
+									? [
+											{
+												label:
+													page?.document?.pathname === location.current.pathname
+														? (page.document.version ?? segments[4])
+														: segments[4],
+											},
+										]
+									: []),
+							]
+						: []),
+					...(segments[3] === "api" ? [{ label: runtime.i18n.t("documents:api") }] : []),
 				];
 			}
+
 			return [
 				{
 					label,
-					to: segments.length > 2 ? collectionPath(segments[1]) : undefined,
+					to:
+						segments.length > 2
+							? withContentLocale(collectionPath(segments[1]), contentLocale)
+							: undefined,
 				},
 				...(segments[2] === "trash"
 					? [{ label: runtime.i18n.t("collections:trash") }]
@@ -68,55 +112,76 @@
 
 		if (segments[0] === "globals" && segments[1] !== undefined) {
 			const global = runtime.visibleGlobals.find((candidate) => candidate.slug === segments[1]);
+			const versionRevision =
+				segments[2] === "versions" ? parseAdminVersionRevision(segments[3]) : undefined;
+
 			return [
 				{
 					label:
 						global === undefined
-							? humanize(segments[1])
+							? humanizeAdminPathSegment(segments[1], runtime.i18n.language)
 							: runtime.i18n.text(global.labels.singular, global.labels.singularTranslations),
-					to: segments.length > 2 ? globalPath(segments[1]) : undefined,
+					to:
+						segments.length > 2
+							? withContentLocale(globalPath(segments[1]), contentLocale)
+							: undefined,
 				},
-				...(segments[2] === "versions" ? [{ label: runtime.i18n.t("documents:versions") }] : []),
+				...(segments[2] === "versions"
+					? [
+							{
+								label: runtime.i18n.t("documents:versions"),
+								to:
+									versionRevision !== undefined
+										? withContentLocale(globalVersionsPath(segments[1]), contentLocale)
+										: undefined,
+							},
+							...(versionRevision !== undefined
+								? [
+										{
+											label:
+												page?.document?.pathname === location.current.pathname
+													? (page.document.version ?? segments[3])
+													: segments[3],
+										},
+									]
+								: []),
+						]
+					: []),
+				...(segments[2] === "api" ? [{ label: runtime.i18n.t("documents:api") }] : []),
 			];
 		}
 
-		const pluginRoute = runtime.pluginRoutes.find((route) => route.path === segments.join("/"));
+		const pluginRoute = runtime.config.extensions.routes.find(
+			(route) => route.path === segments.join("/")
+		);
+
 		return [
 			{
 				label:
 					pluginRoute?.navigation?.labelKey !== undefined
 						? runtime.i18n.t(pluginRoute.navigation.labelKey)
 						: (pluginRoute?.navigation?.label ??
-							humanize(segments.at(-1) ?? runtime.i18n.t("navigation:page"))),
+							humanizeAdminPathSegment(
+								segments.at(-1) ?? runtime.i18n.t("navigation:page"),
+								runtime.i18n.language
+							)),
 			},
 		];
 	});
-
-	function humanize(value: string): string {
-		const words = value.replaceAll(/[-_]+/g, " ");
-		return words.charAt(0).toLocaleUpperCase(runtime.i18n.language) + words.slice(1);
-	}
 </script>
 
-<nav
-	class="flex min-w-0 items-center gap-3 text-[13px]"
-	aria-label={runtime.i18n.t("navigation:breadcrumb")}
->
-	<Link
-		class="grid size-7 shrink-0 place-items-center"
-		to="/"
-		aria-label={runtime.i18n.t("dashboard:heading")}
-	>
-		<RiduLogo variant="arch" class="h-4" />
+<nav class="ridu-breadcrumbs" aria-label={runtime.i18n.t("navigation:breadcrumb")}>
+	<Link class="ridu-breadcrumbs__home" to="/" aria-label={runtime.i18n.t("dashboard:heading")}>
+		<RiduLogo variant="arch" class="ridu-breadcrumbs__logo" />
 	</Link>
 	{#each breadcrumbs as breadcrumb, index (`${breadcrumb.label}-${index}`)}
-		<span class="shrink-0" aria-hidden="true">/</span>
+		<span class="ridu-breadcrumbs__separator" aria-hidden="true">/</span>
 		{#if breadcrumb.to !== undefined}
-			<Link class="min-w-0 truncate" to={breadcrumb.to}>
+			<Link class="ridu-breadcrumbs__link" to={breadcrumb.to}>
 				{breadcrumb.label}
 			</Link>
 		{:else}
-			<span class="min-w-0 truncate font-medium text-foreground-strong" aria-current="page">
+			<span class="ridu-breadcrumbs__current" aria-current="page">
 				{breadcrumb.label}
 			</span>
 		{/if}

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { useNavigate } from "@hvniel/svelte-router";
+	import { documentLabel } from "@admin/features/documents/document-title";
 	import type { SchemaCollection } from "@riducms/protocol";
 	import SearchIcon from "~icons/lucide/search";
 
@@ -14,19 +15,18 @@
 		CommandRoot,
 		CommandSeparator,
 		CommandViewport,
-	} from "@riducms/ui";
-	import {
 		Dialog,
 		DialogContent,
 		DialogDescription,
 		DialogTitle,
-	} from "@admin/components/ui/dialog";
+	} from "@riducms/ui";
 	import { Kbd } from "@admin/components/ui/kbd";
 	import type { AdminDocument } from "@admin/core/api/admin-client";
 	import {
 		collectionPath,
 		createDocumentPath,
 		documentPath,
+		withContentLocale,
 	} from "@admin/core/routing/admin-paths";
 	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
 
@@ -42,21 +42,35 @@
 	}
 
 	let { open = $bindable(false), collections }: Props = $props();
+
 	const runtime = getAdminRuntime();
 	const navigate = useNavigate();
+
+	const contentLocale = $derived(
+		runtime.contentLocales.length === 0 ? undefined : runtime.contentLocale
+	);
+
 	let query = $state("");
 	let documents = $state.raw<CommandDocument[]>([]);
 	let documentsLoading = $state(false);
 
 	$effect(() => {
-		if (!open || collections.length === 0) return;
+		if (!open) return;
+		documents = [];
+		if (collections.length === 0) {
+			documentsLoading = false;
+			return;
+		}
+
 		const request = new AbortController();
 		loadDocuments(collections, request.signal);
+
 		return () => request.abort();
 	});
 
 	function handleKeydown(event: KeyboardEvent) {
 		if (event.key.toLocaleLowerCase() !== "k" || (!event.metaKey && !event.ctrlKey)) return;
+
 		event.preventDefault();
 		open = !open;
 	}
@@ -80,19 +94,20 @@
 		signal: AbortSignal
 	) {
 		documentsLoading = true;
+
 		try {
 			const pages = await Promise.all(
 				availableCollections.map(async (collection) => {
-					const titleField =
-						collection.fields.find((field) => field.type === "text") ??
-						collection.fields.find((field) => field.type === "select");
-					const page = await runtime.client.list(collection.slug, { limit: 6, signal });
+					const page = await runtime.client.list(collection.slug, {
+						limit: 6,
+						locale: contentLocale,
+						signal,
+					});
+
 					return page.docs.map((document) => ({
 						collection,
 						document,
-						title: String(
-							(titleField === undefined ? undefined : document[titleField.name]) ?? document.id
-						),
+						title: documentLabel(collection, document),
 					}));
 				})
 			);
@@ -110,7 +125,6 @@
 <Dialog bind:open>
 	<DialogContent
 		class="ridu-command-dialog top-[16vh] w-[min(calc(100vw-32px),560px)] max-w-none -translate-y-0 gap-0 overflow-hidden p-0 sm:max-w-none"
-		showCloseButton={false}
 	>
 		<DialogTitle class="sr-only">{runtime.i18n.t("navigation:navigateRidu")}</DialogTitle>
 		<DialogDescription class="sr-only">
@@ -151,7 +165,13 @@
 										value="{result.title} {pluralLabel(result.collection)} {runtime.i18n.t(
 											'navigation:document'
 										)}"
-										onSelect={() => go(documentPath(result.collection.slug, result.document.id))}
+										onSelect={() =>
+											go(
+												withContentLocale(
+													documentPath(result.collection.slug, result.document.id),
+													contentLocale
+												)
+											)}
 									>
 										<span
 											class="font-mono w-9 shrink-0 rounded-[4px] border border-control-border py-0.5 text-center text-[8.5px] tracking-[0.08em] text-foreground-tag"
@@ -170,6 +190,7 @@
 					{:else if documentsLoading}
 						<p
 							class="font-mono px-2.5 py-3 text-[9px] tracking-[0.12em] text-foreground-faint uppercase"
+							data-ridu-loading-surface="command-search"
 						>
 							{runtime.i18n.t("navigation:loadingDocuments")}
 						</p>
@@ -188,7 +209,8 @@
 									value="{pluralLabel(collection)} {collection.slug} {runtime.i18n.t(
 										'navigation:collection'
 									)}"
-									onSelect={() => go(collectionPath(collection.slug))}
+									onSelect={() =>
+										go(withContentLocale(collectionPath(collection.slug), contentLocale))}
 								>
 									<span
 										class="font-mono w-10 shrink-0 rounded-[4px] border border-control-border py-0.5 text-center text-[9.5px] tracking-[0.08em] text-foreground-tag"
@@ -219,7 +241,8 @@
 									value="{runtime.i18n.t('navigation:newBadge')} {runtime.i18n.t(
 										'general:create'
 									)} {singularLabel(collection)} {collection.slug}"
-									onSelect={() => go(createDocumentPath(collection.slug))}
+									onSelect={() =>
+										go(withContentLocale(createDocumentPath(collection.slug), contentLocale))}
 								>
 									<span
 										class="font-mono w-10 shrink-0 rounded-[4px] border border-primary/25 py-0.5 text-center text-[9.5px] tracking-[0.08em] text-primary"

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

@@ -0,0 +1,133 @@
+@use "@riducms/ui/styles.scss" as ui;
+
+@layer ridu.components {
+	.ridu-nav__brand {
+		position: absolute;
+		inset-block-start: 0;
+		inset-inline: var(--admin-gutter) 20px;
+		height: var(--admin-header-height);
+		display: flex;
+		align-items: center;
+		overflow: hidden;
+	}
+	.ridu-nav__scroll {
+		min-height: 0;
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		overflow-y: auto;
+		padding: 0 20px calc(var(--admin-space) * 2);
+		scrollbar-width: none;
+
+		&::-webkit-scrollbar {
+			display: none;
+		}
+	}
+	.ridu-nav__group {
+		flex-shrink: 0;
+		margin-bottom: 10px;
+	}
+	.ridu-nav__group-toggle {
+		display: flex;
+		justify-content: space-between;
+		align-items: flex-start;
+		gap: 10px;
+		margin-bottom: 5px;
+		padding: 0;
+		list-style: none;
+		cursor: pointer;
+		color: var(--nav-group-color);
+		font: inherit;
+
+		&::-webkit-details-marker {
+			display: none;
+		}
+
+		&:hover {
+			color: var(--foreground);
+		}
+
+		&:focus-visible {
+			@include ui.focus-outline;
+		}
+	}
+	.ridu-nav__chevron {
+		width: 12px;
+		height: 20px;
+		flex-shrink: 0;
+		color: var(--nav-indicator-color);
+	}
+	.ridu-nav__group[open] .ridu-nav__chevron {
+		transform: rotate(180deg);
+	}
+	.ridu-nav__links {
+		display: grid;
+	}
+	.ridu-nav__link {
+		position: relative;
+		display: flex;
+		align-items: center;
+		padding-block: 2.5px;
+		padding-inline-end: 30px;
+		color: var(--foreground);
+		text-decoration: none;
+		line-height: 20px;
+
+		&:hover,
+		&:focus-visible {
+			text-decoration: underline;
+		}
+
+		&:focus-visible {
+			@include ui.focus-outline;
+		}
+	}
+	.ridu-nav__link--active {
+		font-weight: 600;
+
+		&::before {
+			content: "";
+			position: absolute;
+			inset-inline-start: -20px;
+			height: 16px;
+			width: 2px;
+			background: var(--foreground);
+			border-start-end-radius: 2px;
+			border-end-end-radius: 2px;
+		}
+	}
+	.ridu-nav__link--pending {
+		opacity: 0.6;
+	}
+	.ridu-nav__controls {
+		margin-top: auto;
+		padding-top: 20px;
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 15px;
+	}
+	@media (min-width: (ui.$small + 1px)) and (max-width: ui.$medium) {
+		.ridu-nav__scroll {
+			padding-inline: 10px;
+		}
+		.ridu-nav__link--active::before {
+			inset-inline-start: -10px;
+		}
+	}
+	@media (max-width: ui.$small) {
+		.ridu-nav__scroll {
+			padding-inline: var(--admin-gutter);
+		}
+		.ridu-nav__link {
+			font-size: 17.5px;
+			line-height: 30px;
+		}
+		.ridu-nav__link--active::before {
+			inset-inline-start: calc(-1 * var(--admin-gutter));
+		}
+		.ridu-nav__brand {
+			inset-inline-start: 56px;
+		}
+	}
+}