feat: enable category slug pages

src/pages/Category/index.tsx

@@ -1,31 +1,31 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useParams } from "react-router-dom";
 import { getJSON, itemsOrEmpty, type Category } from "../../api";
-import { MessageStream } from "../../components/messageStream/MessageStream";
+import { AssetStreamPage } from "../../components/AssetStreamPage";
 import { langQuery, useI18n } from "../../i18n";
+import { cleanCategoryDisplayName } from "../../utils/categoryDisplay";
 
 export function CategoryPage() {
   const { slug = "" } = useParams();
   const { lang } = useI18n();
-  const [title, setTitle] = useState<string>("");
+  const [title, setTitle] = useState<string>(slug);
+  const scope = useMemo(() => ({ kind: "category" as const, slug }), [slug]);
 
   useEffect(() => {
     if (!slug) return;
+    setTitle(slug);
     getJSON<Category[]>(
       `/api/categories?lang=${encodeURIComponent(langQuery(lang))}`,
     )
       .then((cats) =>
-        setTitle(itemsOrEmpty(cats).find((x) => x.slug === slug)?.name ?? slug),
+        setTitle(
+          cleanCategoryDisplayName(
+            itemsOrEmpty(cats).find((x) => x.slug === slug)?.name ?? slug,
+          ),
+        ),
       )
       .catch(() => setTitle(slug));
   }, [slug, lang]);
 
-  return (
-    <section className="space-y-3">
-      <h1 className="mx-auto max-w-full px-3 text-2xl font-bold md:max-w-[820px] lg:max-w-[1080px] xl:max-w-[1180px]">
-        {title || slug}
-      </h1>
-      <MessageStream scope={{ kind: "category", slug }} />
-    </section>
-  );
+  return <AssetStreamPage title={title || slug} scope={scope} />;
 }