feat: comprehensive CMS improvements
- Fix DOMPurify SSR crash (use isomorphic-dompurify) - Fix SanitizedHtml to sanitize by default - Add auth guards to studio/catalog maintenance pages - Add update/edit to vouchers CRUD - Add update/edit to rare-values CRUD - Add approve workflow to applications page - Add edit form to guilds detail page - Add SEO metadata to all public pages (21 pages) - Fix mobile nav accessibility (focus trap, aria attributes) - Fix missing labels and table accessibility - Add dynamic imports for heavy client components (6 components) - Fix silent error swallowing (40+ locations) - Add content scheduling for articles (publishAt, status) - Wire up 12 missing webhook notification triggers - Add global search to admin panel - Add bulk actions to admin users table - Fix JSON formatting and a11y issues
This commit is contained in:
1 parent
b810b16672
commit
30c95b1a5c
78 files changed
+2252
-134
No files matched your search
@@ -2,6 +2,7 @@
|
||||
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { SearchDialog } from "@/components/admin/search-dialog";
|
||||
import { LanguageSwitcher } from "@/components/language-switcher";
|
||||
import { ThemeSwitcher } from "@/components/theme-switcher";
|
||||
import { findAdminHub } from "@/lib/admin-nav";
|
||||
@@ -29,6 +30,7 @@ export function AdminTopbar({
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<SearchDialog />
|
||||
<div className="flex items-center gap-1.5 lg:hidden">
|
||||
<LanguageSwitcher variant="admin" />
|
||||
<ThemeSwitcher variant="admin" />
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
"use client";
|
||||
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useTransition } from "react";
|
||||
import {
|
||||
approveApplication,
|
||||
dismissApplication,
|
||||
} from "@/actions/admin-applications";
|
||||
import { useConfirmDialog } from "@/components/admin/confirm-dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
export function ApplicationActions({ id }: { id: string }) {
|
||||
const t = useTranslations("pages.admin.applications");
|
||||
const router = useRouter();
|
||||
const [pending, startTransition] = useTransition();
|
||||
const { confirm, dialog: confirmDialog } = useConfirmDialog();
|
||||
|
||||
async function handleApprove() {
|
||||
const ok = await confirm({
|
||||
title: t("approve"),
|
||||
description: t("confirmApprove"),
|
||||
confirmLabel: t("approve"),
|
||||
variant: "default",
|
||||
});
|
||||
if (!ok) return;
|
||||
startTransition(async () => {
|
||||
const fd = new FormData();
|
||||
fd.set("id", id);
|
||||
await approveApplication(fd);
|
||||
router.refresh();
|
||||
});
|
||||
}
|
||||
|
||||
async function handleReject() {
|
||||
const ok = await confirm({
|
||||
title: t("reject"),
|
||||
description: t("confirmReject"),
|
||||
confirmLabel: t("reject"),
|
||||
variant: "danger",
|
||||
});
|
||||
if (!ok) return;
|
||||
startTransition(async () => {
|
||||
const fd = new FormData();
|
||||
fd.set("id", id);
|
||||
await dismissApplication(fd);
|
||||
router.refresh();
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
{confirmDialog}
|
||||
<Button
|
||||
type="button"
|
||||
variant="default"
|
||||
size="sm"
|
||||
disabled={pending}
|
||||
onClick={handleApprove}
|
||||
>
|
||||
{t("approve")}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
disabled={pending}
|
||||
onClick={handleReject}
|
||||
>
|
||||
{t("reject")}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -18,6 +18,8 @@ export function ArticleForm({
|
||||
image?: string;
|
||||
shortStory?: string;
|
||||
fullStory?: string;
|
||||
status?: string;
|
||||
publishAt?: string;
|
||||
};
|
||||
}) {
|
||||
const t = useTranslations("pages.admin.articles.form");
|
||||
@@ -26,6 +28,7 @@ export function ArticleForm({
|
||||
const [slugTouched, setSlugTouched] = useState(Boolean(defaultValues?.slug));
|
||||
const [image, setImage] = useState(defaultValues?.image ?? "");
|
||||
const [imageError, setImageError] = useState(false);
|
||||
const [status, setStatus] = useState(defaultValues?.status ?? "published");
|
||||
|
||||
const suggestedSlug = useMemo(() => slugify(title), [title]);
|
||||
|
||||
@@ -132,6 +135,39 @@ export function ArticleForm({
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<label className="block">
|
||||
<span className="text-xs font-medium text-[var(--admin-text-muted)]">
|
||||
{t("status")}
|
||||
</span>
|
||||
<select
|
||||
name="status"
|
||||
value={status}
|
||||
onChange={(e) => setStatus(e.target.value)}
|
||||
className="input input-bordered mt-1 w-full"
|
||||
>
|
||||
<option value="draft">{t("statusDraft")}</option>
|
||||
<option value="scheduled">{t("statusScheduled")}</option>
|
||||
<option value="published">{t("statusPublished")}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{status === "scheduled" ? (
|
||||
<label className="block">
|
||||
<span className="text-xs font-medium text-[var(--admin-text-muted)]">
|
||||
{t("publishAt")}
|
||||
</span>
|
||||
<input
|
||||
type="datetime-local"
|
||||
name="publishAt"
|
||||
defaultValue={defaultValues?.publishAt ?? ""}
|
||||
required
|
||||
className="input input-bordered mt-1 w-full"
|
||||
/>
|
||||
</label>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<button type="submit" className="btn btn-primary justify-self-start">
|
||||
{t("save")}
|
||||
</button>
|
||||
|
||||
@@ -24,7 +24,9 @@ export function BreadcrumbBar() {
|
||||
dispatch({ type: "SET_ANCESTORS", ancestors: d.ancestors ?? [] });
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
.catch((error) =>
|
||||
console.error("[Breadcrumb] Failed to fetch ancestors:", error),
|
||||
);
|
||||
return () => ac.abort();
|
||||
}, [selectedPageId, dispatch, catQs]);
|
||||
|
||||
|
||||
@@ -667,7 +667,9 @@ export function SortableTree({
|
||||
ids: pages.map((p) => p.id),
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
.catch((error) =>
|
||||
console.error("[SortableTree] Failed to load children:", error),
|
||||
);
|
||||
}
|
||||
}
|
||||
}, [activeTabId, childrenMap, nodes, dispatch, loadChildren]);
|
||||
|
||||
@@ -81,7 +81,7 @@ export function QuickAddFurni({
|
||||
)
|
||||
.then((r) => r.json())
|
||||
.then((data) => setResults(data.results ?? []))
|
||||
.catch(() => {})
|
||||
.catch((error) => console.error("[QuickAdd] Furni search failed:", error))
|
||||
.finally(() => setLoading(false));
|
||||
return () => ac.abort();
|
||||
}, [debounced, open]);
|
||||
|
||||
@@ -101,7 +101,7 @@ export function AdminMediaGrid() {
|
||||
setCopied(url);
|
||||
setTimeout(() => setCopied(null), 1500);
|
||||
})
|
||||
.catch(() => {});
|
||||
.catch((error) => console.error("[Media] Clipboard copy failed:", error));
|
||||
}
|
||||
|
||||
async function remove(name: string) {
|
||||
|
||||
File diff suppressed because it is too large.
Load diff
@@ -2,7 +2,13 @@
|
||||
|
||||
import { AnimatePresence, motion } from "motion/react";
|
||||
import Image from "next/image";
|
||||
import { type ReactNode, useRef, useState } from "react";
|
||||
import {
|
||||
type ReactNode,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import { mobileMenuVariants } from "@/lib/motion";
|
||||
|
||||
interface MobileNavProps {
|
||||
@@ -20,6 +26,57 @@ export function MobileNav({
|
||||
}: MobileNavProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const detailsRef = useRef<HTMLDivElement>(null);
|
||||
const menuRef = useRef<HTMLDivElement>(null);
|
||||
const MENU_ID = "mobile-nav-menu";
|
||||
|
||||
const handleEscape = useCallback(
|
||||
(e: KeyboardEvent) => {
|
||||
if (e.key === "Escape" && open) {
|
||||
setOpen(false);
|
||||
detailsRef.current?.querySelector<HTMLButtonElement>("button")?.focus();
|
||||
}
|
||||
},
|
||||
[open],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
document.addEventListener("keydown", handleEscape);
|
||||
return () => document.removeEventListener("keydown", handleEscape);
|
||||
}, [handleEscape]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const menu = menuRef.current;
|
||||
if (!menu) return;
|
||||
|
||||
const focusableSelector =
|
||||
'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])';
|
||||
|
||||
function handleTab(e: KeyboardEvent) {
|
||||
if (e.key !== "Tab" || !menu) return;
|
||||
const focusable = Array.from(
|
||||
menu.querySelectorAll<HTMLElement>(focusableSelector),
|
||||
);
|
||||
if (focusable.length === 0) return;
|
||||
const first = focusable[0];
|
||||
const last = focusable[focusable.length - 1];
|
||||
|
||||
if (e.shiftKey) {
|
||||
if (document.activeElement === first) {
|
||||
e.preventDefault();
|
||||
last.focus();
|
||||
}
|
||||
} else {
|
||||
if (document.activeElement === last) {
|
||||
e.preventDefault();
|
||||
first.focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
menu.addEventListener("keydown", handleTab);
|
||||
return () => menu.removeEventListener("keydown", handleTab);
|
||||
}, [open]);
|
||||
|
||||
return (
|
||||
<div ref={detailsRef} className="group relative md:hidden">
|
||||
@@ -33,6 +90,8 @@ export function MobileNav({
|
||||
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary-readable,var(--color-primary))] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-navbar)]"
|
||||
aria-label={open ? closeLabel : menuLabel}
|
||||
aria-expanded={open}
|
||||
aria-haspopup="true"
|
||||
aria-controls={MENU_ID}
|
||||
>
|
||||
<motion.svg
|
||||
className="w-6 h-6"
|
||||
@@ -63,6 +122,9 @@ export function MobileNav({
|
||||
<AnimatePresence>
|
||||
{open && (
|
||||
<motion.div
|
||||
id={MENU_ID}
|
||||
role="menu"
|
||||
aria-label={brandLabel || "Navigation menu"}
|
||||
className="absolute left-0 top-full mt-2 w-[min(88vw,360px)] z-50 origin-top-left"
|
||||
style={{ backgroundColor: "transparent" }}
|
||||
variants={mobileMenuVariants}
|
||||
@@ -71,8 +133,9 @@ export function MobileNav({
|
||||
exit="exit"
|
||||
>
|
||||
<div
|
||||
ref={menuRef}
|
||||
className="flex flex-col gap-y-1 p-2 rounded-2xl border shadow-xl max-h-[calc(100dvh-5rem)] overflow-y-auto overscroll-contain
|
||||
bg-[var(--color-dropdown,var(--color-surface,#fff))]"
|
||||
bg-[var(--color-dropdown,var(--color-surface,#fff))]"
|
||||
style={{
|
||||
borderColor:
|
||||
"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
|
||||
|
||||
@@ -171,7 +171,7 @@ export default function RadioPlayer() {
|
||||
.then((data) => {
|
||||
if (data !== null) setConfig(parseConfig(data));
|
||||
})
|
||||
.catch(() => {});
|
||||
.catch((error) => console.error("[Radio] Config fetch failed:", error));
|
||||
}, []);
|
||||
|
||||
// Keep the <audio> volume in sync with the slider.
|
||||
|
||||
@@ -15,7 +15,11 @@ export function PwaRegister() {
|
||||
}
|
||||
});
|
||||
|
||||
navigator.serviceWorker.register(`/sw.js?${SW_VERSION}`).catch(() => {});
|
||||
navigator.serviceWorker
|
||||
.register(`/sw.js?${SW_VERSION}`)
|
||||
.catch((error) =>
|
||||
console.error("[PWA] Service worker registration failed:", error),
|
||||
);
|
||||
}, []);
|
||||
return null;
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
import type { CSSProperties } from "react";
|
||||
import { sanitize } from "@/lib/sanitize";
|
||||
|
||||
interface SanitizedHtmlProps {
|
||||
html: string;
|
||||
@@ -11,7 +12,7 @@ export function SanitizedHtml({ html, className, style }: SanitizedHtmlProps) {
|
||||
<div
|
||||
className={className}
|
||||
style={style}
|
||||
dangerouslySetInnerHTML={{ __html: html }}
|
||||
dangerouslySetInnerHTML={{ __html: sanitize(html) }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user