unify recent changes component

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

@@ -0,0 +1,78 @@
+import {
+  Text,
+  Group,
+  Stack,
+  UnstyledButton,
+  Divider,
+  Badge,
+} from "@mantine/core";
+import classes from "../../features/home/components/home.module.css";
+import { Link } from "react-router-dom";
+import PageListSkeleton from "@/components/ui/page-list-skeleton.tsx";
+import { buildPageUrl } from "@/features/page/page.utils.ts";
+import { formattedDate } from "@/lib/time.ts";
+import { useRecentChangesQuery } from "@/features/page/queries/page-query.ts";
+import { IconFileDescription } from "@tabler/icons-react";
+import { getSpaceUrl } from "@/lib/config.ts";
+
+interface Props {
+  spaceId?: string;
+}
+export default function RecentChanges({ spaceId }: Props) {
+  const { data: pages, isLoading, isError } = useRecentChangesQuery(spaceId);
+
+  if (isLoading) {
+    return <PageListSkeleton />;
+  }
+
+  if (isError) {
+    return <Text>Failed to fetch recent pages</Text>;
+  }
+
+  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 }}>
+                <Group wrap="nowrap">
+                  {page.icon || <IconFileDescription size={18} />}
+
+                  <Text fw={500} size="md" lineClamp={1}>
+                    {page.title || "Untitled"}
+                  </Text>
+                </Group>
+              </Stack>
+
+              {!spaceId && (
+                <Badge
+                  color="blue"
+                  variant="light"
+                  component={Link}
+                  to={getSpaceUrl(page.space.slug)}
+                >
+                  {page.space.name}
+                </Badge>
+              )}
+
+              <Text c="dimmed" size="xs" fw={500}>
+                {formattedDate(page.updatedAt)}
+              </Text>
+            </Group>
+          </UnstyledButton>
+          <Divider />
+        </div>
+      ))}
+    </div>
+  ) : (
+    <Text size="md" ta="center">
+      No records to show
+    </Text>
+  );
+}

apps/client/src/features/home/components/home-tabs.tsx

@@ -1,6 +1,6 @@
 import { Text, Tabs, Space } from "@mantine/core";
 import { IconClockHour3 } from "@tabler/icons-react";
-import RecentChanges from "@/features/home/components/recent-changes";
+import RecentChanges from "@/components/common/recent-changes.tsx";
 
 export default function HomeTabs() {
   return (
@@ -8,7 +8,7 @@ export default function HomeTabs() {
       <Tabs.List>
         <Tabs.Tab value="recent" leftSection={<IconClockHour3 size={18} />}>
           <Text size="sm" fw={500}>
-            Recent changes
+            Recently updated
           </Text>
         </Tabs.Tab>
       </Tabs.List>

apps/client/src/features/home/components/recent-changes.tsx

@@ -1,73 +0,0 @@
-import {
-  Text,
-  Group,
-  Stack,
-  UnstyledButton,
-  Divider,
-  Badge,
-} from "@mantine/core";
-import classes from "./home.module.css";
-import { Link } from "react-router-dom";
-import PageListSkeleton from "@/components/ui/page-list-skeleton.tsx";
-import { buildPageUrl } from "@/features/page/page.utils.ts";
-import { formattedDate } from "@/lib/time.ts";
-import { useRecentChangesQuery } from "@/features/page/queries/page-query.ts";
-import { IconFileDescription } from "@tabler/icons-react";
-import { getSpaceUrl } from "@/lib/config.ts";
-
-function RecentChanges() {
-  const { data, isLoading, isError } = useRecentChangesQuery();
-
-  if (isLoading) {
-    return <PageListSkeleton />;
-  }
-
-  if (isError) {
-    return <Text>Failed to fetch recent pages</Text>;
-  }
-
-  return (
-    data && (
-      <div>
-        {data.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 }}>
-                  <Group wrap="nowrap">
-                    {page.icon || <IconFileDescription size={18} />}
-
-                    <Text fw={500} size="md" lineClamp={1}>
-                      {page.title || "Untitled"}
-                    </Text>
-                  </Group>
-                </Stack>
-
-                <Badge
-                  color="blue"
-                  variant="light"
-                  component={Link}
-                  to={getSpaceUrl(page.space.slug)}
-                >
-                  {page.space.name}
-                </Badge>
-
-                <Text c="dimmed" size="xs" fw={500}>
-                  {formattedDate(page.updatedAt)}
-                </Text>
-              </Group>
-            </UnstyledButton>
-            <Divider />
-          </div>
-        ))}
-      </div>
-    )
-  );
-}
-
-export default RecentChanges;

apps/client/src/features/space/components/space-home-tabs.tsx

@@ -1,14 +1,19 @@
 import { Text, Tabs, Space } from "@mantine/core";
 import { IconClockHour3 } from "@tabler/icons-react";
-import SpaceRecentChanges from "@/features/space/components/space-recent-changes.tsx";
+import RecentChanges from "@/components/common/recent-changes.tsx";
+import { useParams } from "react-router-dom";
+import { useGetSpaceBySlugQuery } from "@/features/space/queries/space-query.ts";
 
 export default function SpaceHomeTabs() {
+  const { spaceSlug } = useParams();
+  const { data: space } = useGetSpaceBySlugQuery(spaceSlug);
+
   return (
     <Tabs defaultValue="recent">
       <Tabs.List>
         <Tabs.Tab value="recent" leftSection={<IconClockHour3 size={18} />}>
           <Text size="sm" fw={500}>
-            Recent changes
+            Recently updated
           </Text>
         </Tabs.Tab>
       </Tabs.List>
@@ -16,7 +21,7 @@ export default function SpaceHomeTabs() {
       <Space my="md" />
 
       <Tabs.Panel value="recent">
-        <SpaceRecentChanges />
+        <RecentChanges spaceId={space?.id} />
       </Tabs.Panel>
     </Tabs>
   );

apps/client/src/features/space/components/space-recent-changes.tsx

@@ -1,53 +0,0 @@
-import { Text, Group, Stack, UnstyledButton, Divider } from "@mantine/core";
-import classes from "./space-home.module.css";
-import { Link, useParams } from "react-router-dom";
-import { buildPageUrl } from "@/features/page/page.utils.ts";
-import { formattedDate } from "@/lib/time.ts";
-import { useRecentChangesQuery } from "@/features/page/queries/page-query.ts";
-import { useGetSpaceBySlugQuery } from "@/features/space/queries/space-query.ts";
-
-function SpaceRecentChanges() {
-  const { spaceSlug } = useParams();
-  const { data: space } = useGetSpaceBySlugQuery(spaceSlug);
-  const { data, isLoading, isError } = useRecentChangesQuery(space?.id);
-
-  if (isLoading) {
-    return <></>;
-  }
-
-  if (isError) {
-    return <Text>Failed to fetch recent pages</Text>;
-  }
-
-  return (
-    data && (
-      <div>
-        {data.items.map((page) => (
-          <div key={page.id}>
-            <UnstyledButton
-              component={Link}
-              to={buildPageUrl(space.slug, page.slugId, page.title)}
-              className={classes.page}
-              p="xs"
-            >
-              <Group wrap="nowrap">
-                <Stack gap="xs" style={{ flex: 1 }}>
-                  <Text fw={500} size="sm" lineClamp={1}>
-                    {page.title || "Untitled"}
-                  </Text>
-                </Stack>
-
-                <Text c="dimmed" size="xs" fw={500}>
-                  {formattedDate(page.updatedAt)}
-                </Text>
-              </Group>
-            </UnstyledButton>
-            <Divider />
-          </div>
-        ))}
-      </div>
-    )
-  );
-}
-
-export default SpaceRecentChanges;