@0x0501/mystack 0.0.0-stage → 0.1.0-bootstrap.0

package/template/src/routes/__root.tsx

@@ -0,0 +1,175 @@
+import { createRootRouteWithContext, Outlet } from "@tanstack/react-router";
+import { NavigationProgress } from "#/components/root/navigation-progress.tsx";
+import { NotFound } from "#/components/root/not-found.tsx";
+import { RootDocument } from "#/components/root/root-document.tsx";
+import { RootError } from "#/components/root/root-error.tsx";
+import type { MyRouterContext } from "#/integrations/tanstack-query/root-provider.tsx";
+import {
+	abs,
+	DEFAULT_DESCRIPTION,
+	DEFAULT_TITLE,
+	SITE_NAME,
+	SITE_ORIGIN,
+	THEME_COLOR_DARK,
+	THEME_COLOR_LIGHT,
+} from "#/lib/site.ts";
+import { THEME_INIT_SCRIPT } from "#/lib/theme.ts";
+import { sessionQueryOptions } from "@/integrations/better-auth/session-query";
+import { getLocale } from "@/paraglide/runtime";
+import appCss from "../styles.css?url";
+
+const OG_IMAGE = abs("/logo512.png");
+
+export const Route = createRootRouteWithContext<MyRouterContext>()({
+	// Each SSR request has its own QueryClient. In the browser, navigation and
+	// intent preloads share the session query instead of serializing an RPC
+	// ahead of every page loader. fetchQuery still awaits stale-session checks.
+	beforeLoad: async ({ context }) => ({
+		session: await context.queryClient.fetchQuery(sessionQueryOptions),
+	}),
+	head: () => {
+		const locale = getLocale();
+		return {
+			meta: [
+				{ charSet: "utf-8" },
+				{
+					name: "viewport",
+					content: "width=device-width, initial-scale=1, viewport-fit=cover",
+				},
+				// Sensible defaults; content pages (e.g. `/`) may override title/description.
+				{ title: DEFAULT_TITLE },
+				{ name: "description", content: DEFAULT_DESCRIPTION },
+				{ name: "application-name", content: SITE_NAME },
+				{ name: "apple-mobile-web-app-title", content: SITE_NAME },
+				// Standard tag for Chrome; iOS Safari still reads only the apple- one.
+				{ name: "mobile-web-app-capable", content: "yes" },
+				{ name: "apple-mobile-web-app-capable", content: "yes" },
+				{
+					name: "apple-mobile-web-app-status-bar-style",
+					content: "black-translucent",
+				},
+				{ name: "format-detection", content: "telephone=no" },
+				// Public pages are indexable by default; gated/transactional routes set
+				// their own `noindex` (dashboard, reset-password, two-factor, …).
+				{ name: "robots", content: "index, follow" },
+				// Browser UI tint per theme.
+				{
+					name: "theme-color",
+					content: THEME_COLOR_LIGHT,
+					media: "(prefers-color-scheme: light)",
+				},
+				{
+					name: "theme-color",
+					content: THEME_COLOR_DARK,
+					media: "(prefers-color-scheme: dark)",
+				},
+				// Open Graph
+				{ property: "og:type", content: "website" },
+				{ property: "og:site_name", content: SITE_NAME },
+				{ property: "og:title", content: DEFAULT_TITLE },
+				{ property: "og:description", content: DEFAULT_DESCRIPTION },
+				{ property: "og:image", content: OG_IMAGE },
+				{ property: "og:locale", content: locale === "de" ? "de_DE" : "en_US" },
+				// Twitter
+				{ name: "twitter:card", content: "summary_large_image" },
+				{ name: "twitter:title", content: DEFAULT_TITLE },
+				{ name: "twitter:description", content: DEFAULT_DESCRIPTION },
+				{ name: "twitter:image", content: OG_IMAGE },
+			],
+			links: [
+				{ rel: "stylesheet", href: appCss },
+				// Icons — last equally-appropriate entry wins in modern browsers.
+				{
+					rel: "icon",
+					type: "image/x-icon",
+					href: "/favicon.ico",
+				},
+				{
+					rel: "shortcut icon",
+					type: "image/x-icon",
+					href: "/favicon.ico",
+				},
+				{
+					rel: "icon",
+					type: "image/png",
+					sizes: "192x192",
+					href: "/logo192.png",
+				},
+				{
+					rel: "icon",
+					type: "image/png",
+					sizes: "512x512",
+					href: "/logo512.png",
+				},
+				{
+					rel: "apple-touch-icon",
+					href: "/logo192.png",
+					sizes: "192x192",
+				},
+				{ rel: "manifest", href: "/manifest.json" },
+			],
+			scripts: [
+				{
+					// Set the theme class before first paint: stored choice wins,
+					// system preference otherwise. See src/lib/theme.ts.
+					children: THEME_INIT_SCRIPT,
+				},
+				// Structured data — only with an absolute origin (schema.org needs absolute URLs).
+				...(SITE_ORIGIN
+					? [
+							{
+								type: "application/ld+json",
+								children: JSON.stringify({
+									"@context": "https://schema.org",
+									"@graph": [
+										{
+											"@type": "Organization",
+											"@id": `${SITE_ORIGIN}/#organization`,
+											name: SITE_NAME,
+											url: SITE_ORIGIN,
+											logo: abs("/logo512.png"),
+										},
+										{
+											"@type": "WebSite",
+											"@id": `${SITE_ORIGIN}/#website`,
+											name: SITE_NAME,
+											url: SITE_ORIGIN,
+											description: DEFAULT_DESCRIPTION,
+											inLanguage: locale,
+											publisher: { "@id": `${SITE_ORIGIN}/#organization` },
+										},
+										{
+											"@type": "SoftwareApplication",
+											"@id": `${SITE_ORIGIN}/#app`,
+											name: SITE_NAME,
+											url: SITE_ORIGIN,
+											description: DEFAULT_DESCRIPTION,
+											inLanguage: locale,
+											applicationCategory: "DeveloperApplication",
+											operatingSystem: "Web",
+											publisher: { "@id": `${SITE_ORIGIN}/#organization` },
+										},
+									],
+								}),
+							},
+						]
+					: []),
+			],
+		};
+	},
+	errorComponent: ({ error, reset }) => (
+		<RootError error={error} reset={reset} />
+	),
+	notFoundComponent: NotFound,
+	component: RootContent,
+	shellComponent: RootDocument,
+});
+
+function RootContent() {
+	return (
+		<>
+			<NavigationProgress />
+			<Outlet />
+		</>
+	);
+}

package/template/src/routes/admin/audit.tsx

@@ -0,0 +1,74 @@
+import { useQuery } from "@tanstack/react-query";
+import { createFileRoute } from "@tanstack/react-router";
+import { AdminShell } from "@/components/shells";
+import * as m from "@/paraglide/messages";
+import { listAuditEvents } from "@/server/admin-audit";
+
+const auditQuery = {
+	queryKey: ["admin-audit"],
+	queryFn: () => listAuditEvents({ data: { limit: 100 } }),
+};
+
+export const Route = createFileRoute("/admin/audit")({
+	component: AdminAuditPage,
+	// The trail is the whole page: nothing renders without it.
+	loader: ({ context }) => context.queryClient.ensureQueryData(auditQuery),
+});
+
+function AdminAuditPage() {
+	const { data, isLoading, error } = useQuery(auditQuery);
+
+	return (
+		<AdminShell title={m.admin_audit_title()}>
+			{isLoading ? (
+				<p className="text-sm text-muted-foreground">{m.common_loading()}</p>
+			) : null}
+			{error ? (
+				<p className="text-sm text-red-600" role="alert">
+					{(error as Error).message}
+				</p>
+			) : null}
+			{data && data.length === 0 ? (
+				<p className="text-sm text-muted-foreground">{m.admin_audit_empty()}</p>
+			) : null}
+			{data && data.length > 0 ? (
+				<div className="overflow-x-auto">
+					<table className="w-full min-w-[40rem] border-collapse text-left text-sm">
+						<thead>
+							<tr className="border-b border-border">
+								<th className="py-2 pr-3 font-medium">{m.admin_col_when()}</th>
+								<th className="py-2 pr-3 font-medium">
+									{m.admin_col_action()}
+								</th>
+								<th className="py-2 pr-3 font-medium">{m.admin_col_actor()}</th>
+								<th className="py-2 pr-3 font-medium">
+									{m.admin_col_target()}
+								</th>
+								<th className="py-2 font-medium">{m.admin_col_detail()}</th>
+							</tr>
+						</thead>
+						<tbody>
+							{data.map((row) => (
+								<tr key={row.id} className="border-b border-border">
+									<td className="py-2 pr-3 whitespace-nowrap text-xs">
+										{row.createdAt}
+									</td>
+									<td className="py-2 pr-3 font-mono text-xs">{row.action}</td>
+									<td className="py-2 pr-3 font-mono text-xs">
+										{row.actorId ?? "—"}
+									</td>
+									<td className="py-2 pr-3 font-mono text-xs">
+										{row.targetType}:{row.targetId ?? "—"}
+									</td>
+									<td className="py-2 font-mono text-xs text-muted-foreground">
+										{row.detail ? JSON.stringify(row.detail) : "—"}
+									</td>
+								</tr>
+							))}
+						</tbody>
+					</table>
+				</div>
+			) : null}
+		</AdminShell>
+	);
+}

package/template/src/routes/admin/index.tsx

@@ -0,0 +1,7 @@
+import { createFileRoute, redirect } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/admin/")({
+	beforeLoad: () => {
+		throw redirect({ to: "/admin/users" });
+	},
+});

package/template/src/routes/admin/oauth-apps.tsx

@@ -0,0 +1,164 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { createFileRoute } from "@tanstack/react-router";
+import { useState } from "react";
+import {
+	AdminShell,
+	buttonClass,
+	Field,
+	inputClass,
+} from "@/components/shells";
+import * as m from "@/paraglide/messages";
+import {
+	createOAuthClient,
+	deleteOAuthClient,
+	getOAuthClients,
+} from "@/server/oauth-clients";
+
+const clientsQuery = {
+	queryKey: ["oauth-clients"],
+	queryFn: () => getOAuthClients(),
+};
+
+export const Route = createFileRoute("/admin/oauth-apps")({
+	component: AdminOAuthAppsPage,
+	// The client list is the whole page: nothing renders without it.
+	loader: ({ context }) => context.queryClient.ensureQueryData(clientsQuery),
+});
+
+function AdminOAuthAppsPage() {
+	const qc = useQueryClient();
+	const [name, setName] = useState("");
+	const [redirectUris, setRedirectUris] = useState(
+		"http://127.0.0.1:38256/oauth/callback",
+	);
+	const [createdSecret, setCreatedSecret] = useState<string | null>(null);
+
+	const { data, isLoading, error } = useQuery(clientsQuery);
+
+	const createMut = useMutation({
+		mutationFn: () =>
+			createOAuthClient({
+				data: {
+					clientName: name,
+					redirectUris: redirectUris
+						.split(/[\n,]+/)
+						.map((s) => s.trim())
+						.filter(Boolean),
+					publicClient: false,
+				},
+			}),
+		onSuccess: (res) => {
+			setCreatedSecret(res.clientSecret);
+			setName("");
+			void qc.invalidateQueries({ queryKey: ["oauth-clients"] });
+		},
+	});
+
+	const deleteMut = useMutation({
+		mutationFn: (clientId: string) => deleteOAuthClient({ data: { clientId } }),
+		onSuccess: () => {
+			void qc.invalidateQueries({ queryKey: ["oauth-clients"] });
+		},
+	});
+
+	return (
+		<AdminShell title={m.admin_oauth_title()}>
+			<section className="mb-10 max-w-lg">
+				<h2 className="mb-3 text-lg font-medium">
+					{m.admin_oauth_create_client()}
+				</h2>
+				<form
+					onSubmit={(e) => {
+						e.preventDefault();
+						createMut.mutate();
+					}}
+				>
+					<Field label={m.admin_oauth_field_name()}>
+						<input
+							className={inputClass}
+							required
+							value={name}
+							onChange={(e) => setName(e.target.value)}
+						/>
+					</Field>
+					<Field label={m.admin_oauth_field_redirect_uris()}>
+						<textarea
+							className={inputClass}
+							rows={3}
+							required
+							value={redirectUris}
+							onChange={(e) => setRedirectUris(e.target.value)}
+						/>
+					</Field>
+					<button
+						type="submit"
+						className={`${buttonClass} max-w-xs`}
+						disabled={createMut.isPending}
+					>
+						{createMut.isPending ? "Creating…" : "Create"}
+					</button>
+				</form>
+				{createdSecret ? (
+					<p className="mt-3 text-sm text-amber-800 dark:text-amber-200">
+						Client secret (copy now):{" "}
+						<code className="break-all">{createdSecret}</code>
+					</p>
+				) : null}
+				{createMut.error ? (
+					<p className="mt-2 text-sm text-red-600" role="alert">
+						{(createMut.error as Error).message}
+					</p>
+				) : null}
+			</section>
+
+			<section>
+				<h2 className="mb-3 text-lg font-medium">
+					{m.admin_oauth_registered_clients()}
+				</h2>
+				{isLoading ? (
+					<p className="text-sm text-muted-foreground">{m.common_loading()}</p>
+				) : null}
+				{error ? (
+					<p className="text-sm text-red-600" role="alert">
+						{(error as Error).message}
+					</p>
+				) : null}
+				{data && data.length === 0 ? (
+					<p className="text-sm text-muted-foreground">
+						{m.admin_oauth_empty()}
+					</p>
+				) : null}
+				{data && data.length > 0 ? (
+					<ul className="space-y-3">
+						{data.map((c) => (
+							<li
+								key={c.clientId}
+								className="rounded-md border border-border p-3 text-sm border-border"
+							>
+								<div className="flex flex-wrap items-start justify-between gap-2">
+									<div>
+										<p className="font-medium">{c.name ?? "(unnamed)"}</p>
+										<p className="font-mono text-xs text-muted-foreground">
+											{c.clientId}
+										</p>
+										<p className="mt-1 text-xs text-muted-foreground">
+											{c.redirectUris.join(", ")}
+										</p>
+									</div>
+									<button
+										type="button"
+										className={`${buttonClass} w-auto bg-red-800 px-3 py-1 text-xs dark:bg-red-200`}
+										disabled={deleteMut.isPending}
+										onClick={() => deleteMut.mutate(c.clientId)}
+									>
+										Delete
+									</button>
+								</div>
+							</li>
+						))}
+					</ul>
+				) : null}
+			</section>
+		</AdminShell>
+	);
+}

package/template/src/routes/admin/route.tsx

@@ -0,0 +1,27 @@
+import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/admin")({
+	// `session` comes from the root route's beforeLoad (one read per request).
+	// This gate is chrome only: it decides whether the console renders. Every
+	// privileged mutation re-checks the role server-side, so a stale cookie
+	// cache here can reveal a layout, never an operation.
+	//
+	// The role list is spelled out rather than imported from
+	// `services/admin-security`: that module also imports Drizzle tables, and a
+	// route file is client code, so the import shipped the whole schema — table
+	// and column names, index names, and the RLS policy predicates — to every
+	// visitor. `check:client-bundle` fails on that now. Server-side role checks
+	// keep using `isAdminRole`; this one line is chrome.
+	beforeLoad: ({ context: { session } }) => {
+		if (!session?.user) throw redirect({ to: "/sign-in" });
+		if (!["admin", "superadmin"].includes(session.user.role ?? "")) {
+			throw redirect({ to: "/dashboard" });
+		}
+		return { session };
+	},
+	// Private area — keep the whole admin subtree out of search indexes.
+	head: () => ({
+		meta: [{ name: "robots", content: "noindex, nofollow" }],
+	}),
+	component: () => <Outlet />,
+});

package/template/src/routes/admin/users.tsx

@@ -0,0 +1,215 @@
+import { Checkbox } from "@base-ui/react/checkbox";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { createFileRoute } from "@tanstack/react-router";
+import { useState } from "react";
+import { AdminShell, buttonClass, inputClass } from "@/components/shells";
+import * as m from "@/paraglide/messages";
+import { getUsers, updateUser } from "@/server/admin-users";
+import {
+	getPaymentMethodToggles,
+	updatePaymentMethodToggles,
+} from "@/server/payment-toggles";
+
+const usersQuery = (search: string) => ({
+	queryKey: ["admin-users", search],
+	queryFn: () =>
+		getUsers({ data: { page: 0, pageSize: 50, search, filters: {} } }),
+});
+
+const togglesQuery = {
+	queryKey: ["payment-toggles"],
+	queryFn: () => getPaymentMethodToggles(),
+};
+
+export const Route = createFileRoute("/admin/users")({
+	component: AdminUsersPage,
+	// The list is the page; the payment toggles are a panel beside it, so they
+	// are warmed rather than awaited — the user list already sorts on an
+	// unindexed column, and blocking navigation on both means waiting for the
+	// slower one twice over.
+	loader: async ({ context }) => {
+		context.queryClient.ensureQueryData(togglesQuery);
+		await context.queryClient.ensureQueryData(usersQuery(""));
+	},
+});
+
+function AdminUsersPage() {
+	const qc = useQueryClient();
+	const [search, setSearch] = useState("");
+	const { data, isLoading, error } = useQuery(usersQuery(search));
+
+	const toggles = useQuery(togglesQuery);
+
+	const mutation = useMutation({
+		mutationFn: (input: {
+			userId: string;
+			emailVerified: boolean;
+			banned: boolean;
+			role?: "user" | "admin";
+		}) => updateUser({ data: input }),
+		onSuccess: () => {
+			void qc.invalidateQueries({ queryKey: ["admin-users"] });
+		},
+	});
+
+	const toggleMut = useMutation({
+		mutationFn: (next: {
+			stripe: boolean;
+			creem: boolean;
+			nowpayments: boolean;
+		}) => updatePaymentMethodToggles({ data: next }),
+		onSuccess: () => {
+			void qc.invalidateQueries({ queryKey: ["payment-toggles"] });
+		},
+	});
+
+	return (
+		<AdminShell title={m.admin_users_title()}>
+			{toggles.data ? (
+				<section className="mb-6 border border-border p-4 text-sm">
+					<p className="mb-2 font-medium">{m.admin_payment_toggles()}</p>
+					<div className="flex flex-wrap gap-4">
+						{(["stripe", "creem", "nowpayments"] as const).map((key) => (
+							<div key={key} className="inline-flex items-center gap-2">
+								<Checkbox.Root
+									className="ui-checkbox"
+									id={`pay-toggle-${key}`}
+									checked={toggles.data[key]}
+									disabled={toggleMut.isPending}
+									onCheckedChange={(checked) =>
+										toggleMut.mutate({
+											...toggles.data,
+											[key]: checked === true,
+										})
+									}
+								>
+									<Checkbox.Indicator className="ui-checkbox-indicator">
+										<span aria-hidden>✓</span>
+									</Checkbox.Indicator>
+								</Checkbox.Root>
+								<label htmlFor={`pay-toggle-${key}`}>{key}</label>
+							</div>
+						))}
+					</div>
+					<p className="mt-1 text-xs text-muted-foreground">
+						{m.admin_payment_toggles_hint()}
+					</p>
+				</section>
+			) : null}
+			<div className="mb-4 flex flex-wrap gap-2">
+				<input
+					className={`${inputClass} max-w-xs`}
+					placeholder={m.admin_users_search_placeholder()}
+					value={search}
+					onChange={(e) => setSearch(e.target.value)}
+				/>
+			</div>
+			{isLoading ? (
+				<p className="text-sm text-muted-foreground">{m.common_loading()}</p>
+			) : null}
+			{error ? (
+				<p className="text-sm text-destructive" role="alert">
+					{(error as Error).message}
+				</p>
+			) : null}
+			{data ? (
+				<div className="overflow-x-auto border border-border">
+					<table className="w-full min-w-[40rem] text-left text-sm">
+						<thead>
+							<tr className="border-b border-border">
+								<th className="px-3 py-2 font-medium">{m.admin_col_email()}</th>
+								<th className="px-3 py-2 font-medium">{m.admin_col_name()}</th>
+								<th className="px-3 py-2 font-medium">{m.admin_col_role()}</th>
+								<th className="px-3 py-2 font-medium">
+									{m.admin_col_status()}
+								</th>
+								<th className="px-3 py-2 font-medium">
+									{m.admin_col_actions()}
+								</th>
+							</tr>
+						</thead>
+						<tbody>
+							{data.rows.map((row) => (
+								<tr
+									key={row.id}
+									className="border-b border-border last:border-0"
+								>
+									<td className="px-3 py-2">{row.email}</td>
+									<td className="px-3 py-2">{row.name}</td>
+									<td className="px-3 py-2">{row.role ?? "user"}</td>
+									<td className="px-3 py-2">
+										{row.banned ? "banned" : "active"}
+										{row.emailVerified ? "" : " · unverified"}
+									</td>
+									<td className="px-3 py-2">
+										<div className="flex flex-wrap gap-2">
+											{row.role !== "superadmin" && row.role !== "admin" ? (
+												<button
+													type="button"
+													className={`${buttonClass} h-8 w-auto px-2 text-xs`}
+													disabled={mutation.isPending}
+													onClick={() =>
+														mutation.mutate({
+															userId: row.id,
+															emailVerified: Boolean(row.emailVerified),
+															banned: !row.banned,
+														})
+													}
+												>
+													{row.banned ? "Unban" : "Ban"}
+												</button>
+											) : null}
+											{row.role === "user" ? (
+												<button
+													type="button"
+													className={`${buttonClass} h-8 w-auto px-2 text-xs`}
+													disabled={mutation.isPending}
+													onClick={() =>
+														mutation.mutate({
+															userId: row.id,
+															emailVerified: Boolean(row.emailVerified),
+															banned: Boolean(row.banned),
+															role: "admin",
+														})
+													}
+												>
+													Make admin
+												</button>
+											) : null}
+											{row.role === "admin" ? (
+												<button
+													type="button"
+													className={`${buttonClass} h-8 w-auto px-2 text-xs`}
+													disabled={mutation.isPending}
+													onClick={() =>
+														mutation.mutate({
+															userId: row.id,
+															emailVerified: Boolean(row.emailVerified),
+															banned: Boolean(row.banned),
+															role: "user",
+														})
+													}
+												>
+													Demote
+												</button>
+											) : null}
+										</div>
+									</td>
+								</tr>
+							))}
+						</tbody>
+					</table>
+					<p className="border-t border-border px-3 py-2 text-xs text-muted-foreground">
+						{data.total} user{data.total === 1 ? "" : "s"} · peer protection
+						blocks ban/demote of admins
+					</p>
+				</div>
+			) : null}
+			{mutation.error ? (
+				<p className="mt-2 text-sm text-red-600" role="alert">
+					{(mutation.error as Error).message}
+				</p>
+			) : null}
+		</AdminShell>
+	);
+}

package/template/src/routes/api/auth/$.ts

@@ -0,0 +1,14 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { authRateLimitMiddleware } from "@/middlewares/auth-rate-limit";
+import { betterAuthMiddleware } from "@/middlewares/better-auth";
+
+export const Route = createFileRoute("/api/auth/$")({
+	server: {
+		// Rate-limit first so brute-force is rejected before any auth/db work.
+		middleware: [authRateLimitMiddleware, betterAuthMiddleware],
+		handlers: {
+			GET: ({ request, context }) => context.auth.handler(request),
+			POST: ({ request, context }) => context.auth.handler(request),
+		},
+	},
+});

package/template/src/routes/api/auth/[.]well-known/openid-configuration.ts

@@ -0,0 +1,15 @@
+import { oauthProviderOpenIdConfigMetadata } from "@better-auth/oauth-provider";
+import { createFileRoute } from "@tanstack/react-router";
+import { betterAuthMiddleware } from "@/middlewares/better-auth.ts";
+
+export const Route = createFileRoute(
+	"/api/auth/.well-known/openid-configuration",
+)({
+	server: {
+		middleware: [betterAuthMiddleware],
+		handlers: {
+			GET: async ({ request, context }) =>
+				oauthProviderOpenIdConfigMetadata(context.auth)(request),
+		},
+	},
+});