editor improvements

* add callout, youtube embed, image, video, table, detail, math
* fix attachments module
* other fixes

apps/client/src/components/common/recent-changes.tsx

@@ -1,12 +1,4 @@
-import {
-  Text,
-  Group,
-  Stack,
-  UnstyledButton,
-  Divider,
-  Badge,
-} from "@mantine/core";
-import classes from "../../features/home/components/home.module.css";
+import { Text, Group, UnstyledButton, Badge, Table } from "@mantine/core";
 import { Link } from "react-router-dom";
 import PageListSkeleton from "@/components/ui/page-list-skeleton.tsx";
 import { buildPageUrl } from "@/features/page/page.utils.ts";
@@ -30,17 +22,15 @@ export default function RecentChanges({ spaceId }: Props) {
   }
 
   return pages && pages.items.length > 0 ? (
-    <div>
-      {pages.items.map((page) => (
-        <div key={page.id}>
-          <UnstyledButton
-            component={Link}
-            to={buildPageUrl(page?.space.slug, page.slugId, page.title)}
-            className={classes.page}
-            p="xs"
-          >
-            <Group wrap="nowrap">
-              <Stack gap="xs" style={{ flex: 1 }}>
+    <Table highlightOnHover verticalSpacing="sm">
+      <Table.Tbody>
+        {pages.items.map((page) => (
+          <Table.Tr key={page.id}>
+            <Table.Td>
+              <UnstyledButton
+                component={Link}
+                to={buildPageUrl(page?.space.slug, page.slugId, page.title)}
+              >
                 <Group wrap="nowrap">
                   {page.icon || <IconFileDescription size={18} />}
 
@@ -48,28 +38,30 @@ export default function RecentChanges({ spaceId }: Props) {
                     {page.title || "Untitled"}
                   </Text>
                 </Group>
-              </Stack>
-
-              {!spaceId && (
+              </UnstyledButton>
+            </Table.Td>
+            {!spaceId && (
+              <Table.Td>
                 <Badge
                   color="blue"
                   variant="light"
                   component={Link}
-                  to={getSpaceUrl(page.space.slug)}
+                  to={getSpaceUrl(page?.space.slug)}
+                  style={{ cursor: "pointer" }}
                 >
-                  {page.space.name}
+                  {page?.space.name}
                 </Badge>
-              )}
-
+              </Table.Td>
+            )}
+            <Table.Td>
               <Text c="dimmed" size="xs" fw={500}>
                 {formattedDate(page.updatedAt)}
               </Text>
-            </Group>
-          </UnstyledButton>
-          <Divider />
-        </div>
-      ))}
-    </div>
+            </Table.Td>
+          </Table.Tr>
+        ))}
+      </Table.Tbody>
+    </Table>
   ) : (
     <Text size="md" ta="center">
       No records to show