refactor: organize pages into folders

src/pages/Category/index.tsx

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import { getJSON, itemsOrEmpty, type Category } from "../../api";
+import { MessageStream } from "../../components/messageStream/MessageStream";
+import { langQuery, useI18n } from "../../i18n";
+
+export function CategoryPage() {
+  const { slug = "" } = useParams();
+  const { lang } = useI18n();
+  const [title, setTitle] = useState<string>("");
+
+  useEffect(() => {
+    if (!slug) return;
+    getJSON<Category[]>(
+      `/api/categories?lang=${encodeURIComponent(langQuery(lang))}`,
+    )
+      .then((cats) =>
+        setTitle(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>
+  );
+}