switch to nx monorepo

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

@@ -0,0 +1,34 @@
+import { Text, Tabs, Space } from '@mantine/core';
+import {
+  IconClockHour3, IconStar,
+} from '@tabler/icons-react';
+import RecentChanges from '@/features/home/components/recent-changes';
+
+export default function HomeTabs() {
+
+  return (
+    <Tabs defaultValue="recent">
+      <Tabs.List>
+        <Tabs.Tab value="recent" leftSection={<IconClockHour3 size={18} />}>
+          <Text size="sm" fw={500}>Recent changes</Text>
+        </Tabs.Tab>
+
+        <Tabs.Tab value="favorites" leftSection={<IconStar size={18} />}>
+          <Text size="sm" fw={500}>Favorites</Text>
+        </Tabs.Tab>
+      </Tabs.List>
+
+      <Space my="md" />
+
+      <Tabs.Panel value="recent">
+
+        <RecentChanges />
+
+      </Tabs.Panel>
+
+      <Tabs.Panel value="favorites">
+        My favorite pages
+      </Tabs.Panel>
+    </Tabs>
+  );
+}

apps/client/src/features/home/components/home.module.css

@@ -0,0 +1,10 @@
+.page {
+    display: block;
+    width: 100%;
+    padding: var(--mantine-spacing-md);
+    color: light-dark(var(--mantine-color-black), var(--mantine-color-dark-0));
+
+    @mixin hover {
+        background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-8));
+    }
+}

apps/client/src/features/home/components/page-list-skeleton.tsx

@@ -0,0 +1,21 @@
+import { Skeleton } from '@mantine/core';
+
+export default function PageListSkeleton() {
+  return (
+    <>
+      <Skeleton height={25} my="xs" radius="xs" />
+      <Skeleton height={25} my="xs" radius="xs" />
+      <Skeleton height={25} my="xs" radius="xs" />
+      <Skeleton height={25} my="xs" radius="xs" />
+      <Skeleton height={25} my="xs" radius="xs" />
+      <Skeleton height={25} my="xs" radius="xs" />
+      <Skeleton height={25} my="xs" radius="xs" />
+      <Skeleton height={25} my="xs" radius="xs" />
+      <Skeleton height={25} my="xs" radius="xs" />
+      <Skeleton height={25} my="xs" radius="xs" />
+      <Skeleton height={25} my="xs" radius="xs" />
+      <Skeleton height={25} my="xs" radius="xs" />
+      <Skeleton height={25} my="xs" radius="xs" />
+    </>
+  );
+}

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

@@ -0,0 +1,46 @@
+import { Text, Group, Stack, UnstyledButton, Divider } from '@mantine/core';
+import { format } from 'date-fns';
+import classes from './home.module.css';
+import { Link } from 'react-router-dom';
+import PageListSkeleton from '@/features/home/components/page-list-skeleton';
+import { useRecentChangesQuery } from '@/features/page/queries/page-query';
+
+function RecentChanges() {
+  const { data, isLoading, isError } = useRecentChangesQuery();
+
+  if (isLoading) {
+    return <PageListSkeleton />;
+  }
+
+  if (isError) {
+    return <Text>Failed to fetch recent pages</Text>;
+  }
+
+  return (
+    <div>
+      {data
+        .map((page) => (
+        <div key={page.id}>
+          <UnstyledButton component={Link} to={`/p/${page.id}`}
+                          className={classes.page} p="xs">
+            <Group wrap="nowrap">
+
+              <Stack gap="xs" style={{ flex: 1 }}>
+                <Text fw={500} size="md" lineClamp={1}>
+                  {page.title || 'Untitled'}
+                </Text>
+              </Stack>
+
+              <Text c="dimmed" size="xs" fw={500}>
+                {format(new Date(page.updatedAt), 'PP')}
+              </Text>
+            </Group>
+          </UnstyledButton>
+          <Divider />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default RecentChanges;