@riducms/admin 0.1.0

package/src/app/admin-page-title.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+	import { useLocation } from "@hvniel/svelte-router";
+
+	import { ADMIN_NAME } from "@admin/app-meta";
+	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
+
+	const runtime = getAdminRuntime();
+	const location = $derived(useLocation());
+	const pageTitle = $derived.by(resolvePageTitle);
+
+	function resolvePageTitle() {
+		const segments = location.pathname.split("/").filter(Boolean);
+		if (segments.length === 0) return titled(runtime.i18n.t("dashboard:heading"));
+		if (segments[0] === "create-first-user") return titled(runtime.i18n.t("auth:createFirstUser"));
+		if (segments[0] === "login") return titled(runtime.i18n.t("auth:login"));
+		if (segments[0] === "forgot-password") return titled(runtime.i18n.t("auth:forgotPassword"));
+		if (segments[0] === "reset-password") return titled(runtime.i18n.t("auth:resetPassword"));
+		if (segments[0] === "request-verification")
+			return titled(runtime.i18n.t("auth:requestVerification"));
+		if (segments[0] === "verify-email") return titled(runtime.i18n.t("auth:verifyEmail"));
+		if (segments[0] === "account") {
+			return titled(
+				segments[1] === "security"
+					? runtime.i18n.t("account:accountSecurity")
+					: runtime.i18n.t("account:account")
+			);
+		}
+		if (segments[0] === "collections" && segments[1] !== undefined) {
+			const collection = runtime.manifest?.collections.find(
+				(candidate) => candidate.slug === segments[1]
+			);
+			const singular =
+				collection === undefined
+					? humanize(segments[1])
+					: runtime.i18n.text(collection.labels.singular, collection.labels.singularTranslations);
+			const plural =
+				collection === undefined
+					? singular
+					: runtime.i18n.text(collection.labels.plural, collection.labels.pluralTranslations);
+			if (segments[2] === undefined) return titled(plural);
+			if (segments[2] === "create") {
+				return titled(
+					segments[3] === "api"
+						? runtime.i18n.t("documents:apiFor", { label: singular })
+						: runtime.i18n.t("collections:createNew", { label: singular })
+				);
+			}
+			if (segments[2] === "trash")
+				return titled(
+					runtime.i18n.t("collections:trashFor", {
+						label: plural,
+					})
+				);
+			if (segments[3] === "api")
+				return titled(runtime.i18n.t("documents:apiFor", { label: singular }));
+			if (segments[3] === "versions")
+				return titled(runtime.i18n.t("documents:versionsFor", { label: singular }));
+			return titled(runtime.i18n.t("documents:editing", { label: singular }));
+		}
+		if (segments[0] === "globals" && segments[1] !== undefined) {
+			const global = runtime.manifest?.globals?.find((candidate) => candidate.slug === segments[1]);
+			const label =
+				global === undefined
+					? humanize(segments[1])
+					: runtime.i18n.text(global.labels.singular, global.labels.singularTranslations);
+			if (segments[2] === "api") return titled(runtime.i18n.t("documents:apiFor", { label }));
+			if (segments[2] === "versions")
+				return titled(runtime.i18n.t("documents:versionsFor", { label }));
+			return titled(label);
+		}
+		const pluginPath = segments.join("/");
+		const pluginRoute = runtime.pluginRoutes.find((route) => route.path === pluginPath);
+		if (pluginRoute?.navigation?.labelKey !== undefined)
+			return titled(runtime.i18n.t(pluginRoute.navigation.labelKey));
+		if (pluginRoute?.navigation?.label !== undefined) return titled(pluginRoute.navigation.label);
+		return titled(humanize(segments.at(-1) ?? runtime.i18n.t("navigation:page")));
+	}
+
+	function titled(value: string) {
+		const application = runtime.manifest?.application;
+		const name =
+			application === undefined
+				? ADMIN_NAME
+				: runtime.i18n.text(application.name, application.nameTranslations);
+		return `${value} - ${name}`;
+	}
+
+	function humanize(value: string) {
+		const decoded = decodeURIComponent(value).replaceAll("-", " ");
+		return decoded.charAt(0).toLocaleUpperCase(runtime.i18n.language) + decoded.slice(1);
+	}
+</script>
+
+<svelte:head><title>{pageTitle}</title></svelte:head>

package/src/app/admin-provider-layer.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { AdminI18n, AdminProvider } from "@riducms/plugin";
+	import type { Snippet } from "svelte";
+
+	import AdminProviderLayer from "@admin/app/admin-provider-layer.svelte";
+
+	interface Props {
+		providers: readonly AdminProvider[];
+		children: Snippet;
+		i18n: AdminI18n;
+		index?: number;
+	}
+
+	let { providers, children, i18n, index = 0 }: Props = $props();
+	const provider = $derived(providers[index]);
+</script>
+
+{#snippet remainingView()}
+	<AdminProviderLayer {providers} {children} {i18n} index={index + 1} />
+{/snippet}
+
+{#if provider === undefined}
+	{@render children()}
+{:else}
+	<provider.component defaultView={remainingView} {i18n} />
+{/if}

package/src/app/admin-router-root.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import AdminNavigationProgress from "@admin/app/admin-navigation-progress.svelte";
+	import AdminPageTitle from "@admin/app/admin-page-title.svelte";
+	import AdminRoutes from "@admin/app/admin-routes.svelte";
+</script>
+
+<AdminNavigationProgress />
+<AdminPageTitle />
+<AdminRoutes />

package/src/app/admin-routes.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+	import { Route, Routes, useLocation } from "@hvniel/svelte-router";
+
+	import {
+		adminCreateFirstUserPath,
+		adminLoginPath,
+		adminRedirectFromSearch,
+		adminRoutePatterns,
+	} from "@admin/core/routing/admin-paths";
+	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
+	import CollectionListRoute from "@admin/features/collections/collection-list-route.svelte";
+	import BulkUploadRoute from "@admin/features/uploads/bulk-upload-route.svelte";
+	import LoginRoute from "@admin/features/auth/login-route.svelte";
+	import CreateFirstUserRoute from "@admin/features/auth/create-first-user-route.svelte";
+	import ForgotPasswordRoute from "@admin/features/auth/forgot-password-route.svelte";
+	import ResetPasswordRoute from "@admin/features/auth/reset-password-route.svelte";
+	import RequestVerificationRoute from "@admin/features/auth/request-verification-route.svelte";
+	import VerifyEmailRoute from "@admin/features/auth/verify-email-route.svelte";
+	import AccountSecurityRoute from "@admin/features/auth/account-security-route.svelte";
+	import AccountRoute from "@admin/features/auth/account-route.svelte";
+	import DashboardRoute from "@admin/features/dashboard/dashboard-route.svelte";
+	import DocumentRoute from "@admin/features/documents/document-route-loader.svelte";
+	import VersionHistoryRoute from "@admin/features/versions/version-history-route.svelte";
+
+	import AdminLayout from "@admin/app/admin-layout.svelte";
+	import AdminCoreViewRoute from "@admin/app/admin-core-view-route.svelte";
+	import DeferredRedirect from "@admin/app/deferred-redirect.svelte";
+	import NotFoundRoute from "@admin/app/not-found-route.svelte";
+
+	const runtime = getAdminRuntime();
+	const location = $derived(useLocation());
+	const requestedPath = $derived(`${location.pathname}${location.search}${location.hash}`);
+	const postLoginPath = $derived(adminRedirectFromSearch(location.search));
+</script>
+
+{#if runtime.authenticated}
+	<Routes>
+		<Route path="login">
+			{#snippet element()}
+				<DeferredRedirect to={postLoginPath} replace />
+			{/snippet}
+		</Route>
+		<Route path="create-first-user">
+			{#snippet element()}
+				<DeferredRedirect to={adminRoutePatterns.home} replace />
+			{/snippet}
+		</Route>
+		<Route Component={AdminLayout}>
+			<Route path="account" Component={AccountRoute} />
+			<Route path="account/security" Component={AccountSecurityRoute} />
+			<Route index Component={DashboardRoute} />
+			<Route path="collections/:collection">
+				{#snippet element()}
+					<AdminCoreViewRoute surface="collectionList" DefaultView={CollectionListRoute} />
+				{/snippet}
+			</Route>
+			<Route path="collections/:collection/trash" Component={CollectionListRoute} />
+			<Route path="collections/:collection/upload" Component={BulkUploadRoute} />
+			<Route path="collections/:collection/create/:view?">
+				{#snippet element()}
+					<AdminCoreViewRoute surface="collectionCreate" DefaultView={DocumentRoute} />
+				{/snippet}
+			</Route>
+			<Route
+				path="collections/:collection/:document/versions/:revision?"
+				Component={VersionHistoryRoute}
+			/>
+			<Route path="collections/:collection/:document/:view?">
+				{#snippet element()}
+					<AdminCoreViewRoute surface="collectionEdit" DefaultView={DocumentRoute} />
+				{/snippet}
+			</Route>
+			<Route path="globals/:global/versions/:revision?" Component={VersionHistoryRoute} />
+			<Route path="globals/:global/:view?">
+				{#snippet element()}
+					<AdminCoreViewRoute surface="global" DefaultView={DocumentRoute} />
+				{/snippet}
+			</Route>
+			{#each runtime.pluginRoutes as pluginRoute (pluginRoute.path)}
+				<Route path={pluginRoute.path} Component={pluginRoute.component} />
+			{/each}
+			<Route path="*">
+				{#snippet element()}
+					<AdminCoreViewRoute surface="notFound" DefaultView={NotFoundRoute} />
+				{/snippet}
+			</Route>
+		</Route>
+	</Routes>
+{:else if runtime.authBootstrapAvailable}
+	<Routes>
+		<Route path="create-first-user" Component={CreateFirstUserRoute} />
+		<Route path="*">
+			{#snippet element()}
+				<DeferredRedirect to={adminCreateFirstUserPath()} replace />
+			{/snippet}
+		</Route>
+	</Routes>
+{:else}
+	<Routes>
+		<Route path="create-first-user">
+			{#snippet element()}
+				<DeferredRedirect to={adminRoutePatterns.login} replace />
+			{/snippet}
+		</Route>
+		<Route path="login" Component={LoginRoute} />
+		<Route path="forgot-password" Component={ForgotPasswordRoute} />
+		<Route path="reset-password" Component={ResetPasswordRoute} />
+		<Route path="request-verification" Component={RequestVerificationRoute} />
+		<Route path="verify-email" Component={VerifyEmailRoute} />
+		<Route path="*">
+			{#snippet element()}
+				<DeferredRedirect to={adminLoginPath(requestedPath)} replace />
+			{/snippet}
+		</Route>
+	</Routes>
+{/if}

package/src/app/deferred-redirect.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { useNavigate } from "@hvniel/svelte-router";
+
+	interface Props {
+		to: string;
+		replace?: boolean;
+	}
+
+	let { to, replace = false }: Props = $props();
+	const navigate = useNavigate();
+
+	$effect(() => {
+		let active = true;
+		// The router activates useNavigate in a parent effect. Deferring one
+		// microtask prevents a mounted redirect from racing that activation.
+		queueMicrotask(() => {
+			if (active) navigate(to, { replace });
+		});
+		return () => {
+			active = false;
+		};
+	});
+</script>

package/src/app/loading-boundary.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	import RiduLogo from "@admin/components/brand/ridu-logo.svelte";
+	import { Banner } from "@admin/components/ui/banner";
+	import { Button } from "@admin/components/ui/button";
+	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
+
+	let { children }: { children: Snippet } = $props();
+	const runtime = getAdminRuntime();
+	const development = import.meta.hot !== undefined;
+</script>
+
+{#if runtime.loading}
+	<main
+		class="ridu-surface-grid grid min-h-screen place-items-center"
+		aria-label={runtime.i18n.t("general:loadingSchema")}
+	>
+		<div class="grid justify-items-center gap-4 text-[13px] text-foreground-muted">
+			<RiduLogo class="h-7 text-foreground" />
+			<span
+				class="size-4 animate-spin rounded-full border border-control-border-hover border-r-primary"
+				aria-hidden="true"
+			></span>
+			{runtime.i18n.t("general:loadingSchema")}
+		</div>
+	</main>
+{:else if runtime.error !== undefined}
+	<main class="ridu-surface-grid grid min-h-screen place-items-center p-6">
+		<section
+			class="grid max-w-[480px] gap-5 rounded-[4px] border border-control-border bg-background-surface p-7"
+			role="alert"
+		>
+			<p class="font-mono text-[10px] tracking-[0.14em] text-destructive uppercase">
+				{runtime.i18n.t("errors:adminBootstrapFailed")}
+			</p>
+			<h1 class="font-serif text-[31px] leading-tight tracking-[-0.015em]">
+				{runtime.i18n.t("errors:couldNotLoadApplication")}
+			</h1>
+			<p class="text-[14px] leading-6 text-foreground-muted">{runtime.error}</p>
+			<Button class="w-fit" onclick={() => runtime.bootstrap()}>
+				{runtime.i18n.t("general:retry")}
+			</Button>
+		</section>
+	</main>
+{:else}
+	{@render children()}
+	{#if !development && runtime.refreshingManifest}
+		<div class="pointer-events-none fixed top-4 left-1/2 z-50 w-[min(92vw,420px)] -translate-x-1/2">
+			<Banner class="shadow-[var(--shadow-popover)]" role="status">
+				<span
+					class="size-3.5 shrink-0 animate-spin rounded-full border border-control-border-hover border-r-primary"
+					aria-hidden="true"
+				></span>
+				{runtime.i18n.t("navigation:applyingSchemaUpdate")}
+			</Banner>
+		</div>
+	{:else if !development && runtime.manifestRefreshError !== undefined}
+		<div class="fixed top-4 left-1/2 z-50 w-[min(92vw,520px)] -translate-x-1/2">
+			<Banner class="shadow-[var(--shadow-popover)]" tone="destructive" role="alert">
+				<span class="size-2 shrink-0 rounded-full bg-destructive" aria-hidden="true"></span>
+				<span class="min-w-0">
+					{runtime.i18n.t("navigation:schemaUpdateFailed", {
+						message: runtime.manifestRefreshError,
+					})}
+				</span>
+			</Banner>
+		</div>
+	{/if}
+{/if}

package/src/app/not-found-route.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Link } from "@hvniel/svelte-router";
+	import ArrowLeftIcon from "~icons/lucide/arrow-left";
+
+	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
+
+	const runtime = getAdminRuntime();
+</script>
+
+<section class="grid min-h-[72vh] place-items-center px-5 py-12 text-center">
+	<div class="max-w-md">
+		<p class="font-mono text-[10px] tracking-[0.16em] text-primary uppercase">
+			{runtime.i18n.t("errors:notFoundCode")}
+		</p>
+		<h1 class="font-serif mt-3 text-[38px] leading-tight tracking-[-0.02em]">
+			{runtime.i18n.t("errors:notFoundHeading")}
+		</h1>
+		<p class="mt-3 text-[13.5px] leading-6 text-foreground-muted">
+			{runtime.i18n.t("errors:notFoundDescription")}
+		</p>
+		<Link
+			class="mt-6 inline-flex items-center gap-2 text-[13px] font-medium text-primary hover:text-primary-hover"
+			to="/"
+		>
+			<ArrowLeftIcon class="size-3.5 rtl:rotate-180" />
+			{runtime.i18n.t("errors:returnDashboard")}
+		</Link>
+	</div>
+</section>

package/src/app-meta.ts

@@ -0,0 +1,2 @@
+export const ADMIN_NAME = "Ridu";
+export const ADMIN_TITLE = `${ADMIN_NAME} Admin`;