feat(acadenice): wire /template slash command to TemplatePickerModal via DOM event

R4.8 — PageContent now listens for acadenice:open-template-picker on document
and opens TemplatePickerModal via useDisclosure. The slash command dispatched
the event but nothing handled it, so the modal never opened.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

apps/client/src/pages/page/page.tsx

@@ -7,12 +7,15 @@ import PageHeader from "@/features/page/components/header/page-header.tsx";
 import { extractPageSlugId } from "@/lib";
 import { useGetSpaceBySlugQuery } from "@/features/space/queries/space-query.ts";
 import { useTranslation } from "react-i18next";
-import React from "react";
+import React, { useEffect } from "react";
 import { EmptyState } from "@/components/ui/empty-state.tsx";
 import { IconAlertTriangle, IconFileOff } from "@tabler/icons-react";
 import { Button } from "@mantine/core";
 import { Link } from "react-router-dom";
 import { ErrorBoundary } from "react-error-boundary";
+import { useDisclosure } from "@mantine/hooks";
+// Acadenice R4.8 — /template slash command wires to TemplatePickerModal via DOM event
+import TemplatePickerModal from "@/features/acadenice/templates/components/template-picker-modal";
 const MemoizedFullEditor = React.memo(FullEditor);
 const MemoizedPageHeader = React.memo(PageHeader);
 const MemoizedHistoryModal = React.memo(HistoryModal);
@@ -43,6 +46,17 @@ export default function Page() {
 
 function PageContent({ pageSlug }: { pageSlug: string | undefined }) {
   const { t } = useTranslation();
+  // Acadenice R4.8 — /template slash command opens TemplatePickerModal via DOM event.
+  // The slash command in menu-items.ts dispatches 'acadenice:open-template-picker'.
+  // We listen here (page level) so the modal has access to the current page/space context.
+  const [templatePickerOpened, { open: openTemplatePicker, close: closeTemplatePicker }] =
+    useDisclosure(false);
+
+  useEffect(() => {
+    const handler = () => openTemplatePicker();
+    document.addEventListener("acadenice:open-template-picker", handler);
+    return () => document.removeEventListener("acadenice:open-template-picker", handler);
+  }, [openTemplatePicker]);
 
   const {
     data: page,
@@ -112,6 +126,16 @@ function PageContent({ pageSlug }: { pageSlug: string | undefined }) {
           canComment={canComment}
         />
         <MemoizedHistoryModal pageId={page.id} />
+
+        {/* Acadenice R4.8 — template picker opened via /template slash command */}
+        {page.space?.id && (
+          <TemplatePickerModal
+            opened={templatePickerOpened}
+            onClose={closeTemplatePicker}
+            spaceId={page.space.id}
+            parentPageId={page.id}
+          />
+        )}
       </div>
     )
   );