switch to nx monorepo

apps/client/src/components/aside/aside.tsx

@@ -0,0 +1,39 @@
+import { Box, ScrollArea, Text } from '@mantine/core';
+import CommentList from '@/features/comment/components/comment-list';
+import { useAtom } from 'jotai';
+import { asideStateAtom } from '@/components/navbar/atoms/sidebar-atom';
+import React from 'react';
+
+export default function Aside() {
+  const [{ tab }] = useAtom(asideStateAtom);
+
+  let title;
+  let component;
+
+  switch (tab) {
+    case 'comments':
+      component = <CommentList />;
+      title = 'Comments';
+      break;
+    default:
+      component = null;
+      title = null;
+  }
+
+
+  return (
+    <Box p="md">
+      {component && (
+        <>
+          <Text mb="md" fw={500}>{title}</Text>
+
+          <ScrollArea style={{ height: '85vh' }} scrollbarSize={5} type="scroll">
+            <div style={{ paddingBottom: '200px' }}>
+              {component}
+            </div>
+          </ScrollArea>
+        </>
+      )}
+    </Box>
+  );
+}

apps/client/src/components/layouts/components/breadcrumb.module.css

@@ -0,0 +1,6 @@
+.breadcrumb {
+    a {
+        color: var(--mantine-color-default-color);
+        text-overflow: ellipsis;
+    }
+}

apps/client/src/components/layouts/components/breadcrumb.tsx

@@ -0,0 +1,104 @@
+import { useAtomValue } from 'jotai';
+import { treeDataAtom } from '@/features/page/tree/atoms/tree-data-atom';
+import React, { useEffect, useState } from 'react';
+import { TreeNode } from '@/features/page/tree/types';
+import { findBreadcrumbPath } from '@/features/page/tree/utils';
+import {
+  Button,
+  Anchor,
+  Popover,
+  Breadcrumbs,
+  ActionIcon,
+  Text,
+} from '@mantine/core';
+import {
+  IconDots,
+} from '@tabler/icons-react';
+import { Link, useParams } from 'react-router-dom';
+import classes from './breadcrumb.module.css';
+
+export default function Breadcrumb() {
+  const treeData = useAtomValue(treeDataAtom);
+  const [breadcrumbNodes, setBreadcrumbNodes] = useState<TreeNode[] | null>(
+    null,
+  );
+  const { pageId } = useParams();
+
+  useEffect(() => {
+    if (treeData.length) {
+      const breadcrumb = findBreadcrumbPath(treeData, pageId);
+      if (breadcrumb) {
+        setBreadcrumbNodes(breadcrumb);
+      }
+    }
+  }, [pageId, treeData]);
+
+  useEffect(() => {
+    if (treeData.length) {
+      const breadcrumb = findBreadcrumbPath(treeData, pageId);
+      if (breadcrumb) setBreadcrumbNodes(breadcrumb);
+    }
+  }, [pageId, treeData]);
+
+  const HiddenNodesTooltipContent = () => (
+    breadcrumbNodes?.slice(1, -2).map(node => (
+      <Button.Group orientation="vertical" key={node.id}>
+        <Button
+          justify="start"
+          component={Link}
+          to={`/p/${node.id}`}
+          variant="default"
+          style={{ border: 'none' }}
+        >
+          <Text truncate="end">{node.name}</Text>
+        </Button>
+      </Button.Group>
+    ))
+  );
+
+  const getLastNthNode = (n: number) => breadcrumbNodes && breadcrumbNodes[breadcrumbNodes.length - n];
+
+  const getBreadcrumbItems = () => {
+    if (breadcrumbNodes?.length > 3) {
+      return [
+        <Anchor component={Link} to={`/p/${breadcrumbNodes[0].id}`} underline="never" key={breadcrumbNodes[0].id}>
+          {breadcrumbNodes[0].name}
+        </Anchor>,
+        <Popover width={250} position="bottom" withArrow shadow="xl" key="hidden-nodes">
+          <Popover.Target>
+            <ActionIcon color="gray" variant="transparent">
+              <IconDots size={20} stroke={2} />
+            </ActionIcon>
+          </Popover.Target>
+          <Popover.Dropdown>
+            <HiddenNodesTooltipContent />
+          </Popover.Dropdown>
+        </Popover>,
+        <Anchor component={Link} to={`/p/${getLastNthNode(2)?.id}`} underline="never" key={getLastNthNode(2)?.id}>
+          {getLastNthNode(2)?.name}
+        </Anchor>,
+        <Anchor component={Link} to={`/p/${getLastNthNode(1)?.id}`} underline="never" key={getLastNthNode(1)?.id}>
+          {getLastNthNode(1)?.name}
+        </Anchor>,
+      ];
+    }
+
+    if (breadcrumbNodes) {
+      return breadcrumbNodes.map(node => (
+        <Anchor component={Link} to={`/p/${node.id}`} underline="never" key={node.id}>
+          {node.name}
+        </Anchor>
+      ));
+    }
+
+    return [];
+  };
+
+  return (
+    <div className={classes.breadcrumb}>
+      {breadcrumbNodes ? (
+        <Breadcrumbs>{getBreadcrumbItems()}</Breadcrumbs>
+      ) : (<></>)}
+    </div>
+  );
+}

apps/client/src/components/layouts/header.tsx

@@ -0,0 +1,93 @@
+import {
+  ActionIcon,
+  Menu,
+  Button,
+} from '@mantine/core';
+import {
+  IconDots,
+  IconFileInfo,
+  IconHistory,
+  IconLink,
+  IconLock,
+  IconShare,
+  IconTrash,
+  IconMessage,
+} from '@tabler/icons-react';
+import React from 'react';
+import useToggleAside from '@/hooks/use-toggle-aside';
+import { useAtom } from 'jotai';
+import { historyAtoms } from '@/features/page-history/atoms/history-atoms';
+
+export default function Header() {
+  const toggleAside = useToggleAside();
+
+  return (
+    <>
+      <Button variant="default" style={{ border: 'none' }} size="compact-sm">
+        Share
+      </Button>
+
+      <ActionIcon variant="default" style={{ border: 'none' }} onClick={() => toggleAside('comments')}>
+        <IconMessage size={20} stroke={2} />
+      </ActionIcon>
+
+      <PageActionMenu />
+    </>
+  );
+}
+
+function PageActionMenu() {
+  const [, setHistoryModalOpen] = useAtom(historyAtoms);
+
+  const openHistoryModal = () => {
+    setHistoryModalOpen(true);
+  };
+
+  return (
+    <Menu
+      shadow="xl"
+      position="bottom-end"
+      offset={20}
+      width={200}
+      withArrow
+      arrowPosition="center"
+    >
+      <Menu.Target>
+        <ActionIcon variant="default" style={{ border: 'none' }}>
+          <IconDots size={20} stroke={2} />
+        </ActionIcon>
+      </Menu.Target>
+
+      <Menu.Dropdown>
+        <Menu.Item
+          leftSection={<IconFileInfo size={16} stroke={2} />}>
+          Page info
+        </Menu.Item>
+        <Menu.Item
+          leftSection={<IconLink size={16} stroke={2} />}
+        >
+          Copy link
+        </Menu.Item>
+        <Menu.Item
+          leftSection={<IconShare size={16} stroke={2} />}>
+          Share
+        </Menu.Item>
+        <Menu.Item
+          leftSection={<IconHistory size={16} stroke={2} />}
+          onClick={openHistoryModal}>
+          Page history
+        </Menu.Item>
+
+        <Menu.Divider />
+        <Menu.Item
+          leftSection={<IconLock size={16} stroke={2} />}>
+          Lock
+        </Menu.Item>
+        <Menu.Item
+          leftSection={<IconTrash size={16} stroke={2} />}>
+          Delete
+        </Menu.Item>
+      </Menu.Dropdown>
+    </Menu>
+  );
+}

apps/client/src/components/layouts/layout.tsx

@@ -0,0 +1,14 @@
+import { UserProvider } from '@/features/user/user-provider';
+import Shell from './shell';
+import { Outlet } from 'react-router-dom';
+
+export default function DashboardLayout() {
+
+  return (
+    <UserProvider>
+      <Shell>
+        <Outlet />
+      </Shell>
+    </UserProvider>
+  );
+}

apps/client/src/components/layouts/shell.module.css

@@ -0,0 +1,26 @@
+.header,
+.footer {
+    @media (max-width: 992px) {
+        [data-layout='alt'] & {
+            --_section-right: var(--app-shell-aside-offset, 0px);
+        }
+    }
+
+}
+
+.aside {
+    @media (min-width: 993px) {
+        background: var(--mantine-color-gray-light);
+
+        [data-layout='alt'] & {
+            --_section-top: var(--_section-top, var(--app-shell-header-offset, 0px));
+            --_section-height: var(
+                    --_section-height,
+                    calc(100dvh - var(--app-shell-header-offset, 0px) - var(--app-shell-footer-offset, 0px))
+            );
+        }
+    }
+
+}
+
+

apps/client/src/components/layouts/shell.tsx

@@ -0,0 +1,88 @@
+import { asideStateAtom, desktopSidebarAtom } from '@/components/navbar/atoms/sidebar-atom';
+import { useToggleSidebar } from '@/components/navbar/hooks/use-toggle-sidebar';
+import { Navbar } from '@/components/navbar/navbar';
+import { AppShell, Burger, Group } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { useAtom } from 'jotai';
+import classes from './shell.module.css';
+import Header from '@/components/layouts/header';
+import Breadcrumb from '@/components/layouts/components/breadcrumb';
+import Aside from '@/components/aside/aside';
+import { useMatchPath } from '@/hooks/use-match-path';
+import React from 'react';
+
+export default function Shell({ children }: { children: React.ReactNode }) {
+  const [mobileOpened, { toggle: toggleMobile }] = useDisclosure();
+  const [desktopOpened] = useAtom(desktopSidebarAtom);
+  const toggleDesktop = useToggleSidebar(desktopSidebarAtom);
+  const matchPath = useMatchPath();
+  const isPageRoute = matchPath('/p/:pageId');
+  const [{ isAsideOpen }] = useAtom(asideStateAtom);
+
+  return (
+    <AppShell
+      layout="alt"
+      header={{ height: 45 }}
+      navbar={{
+        width: 300,
+        breakpoint: 'sm',
+        collapsed: { mobile: !mobileOpened, desktop: !desktopOpened },
+      }}
+      aside={{
+        width: 300,
+        breakpoint: 'md',
+        collapsed: { mobile: (!isAsideOpen), desktop: (!isAsideOpen) },
+      }}
+      padding="md"
+    >
+      <AppShell.Header
+        className={classes.header}
+      >
+
+        <Group justify="space-between" h="100%" px="md" wrap="nowrap">
+
+          <Group h="100%" maw="60%" px="md" wrap="nowrap" style={{ overflow: 'hidden' }}>
+            <Burger
+              opened={mobileOpened}
+              onClick={toggleMobile}
+              hiddenFrom="sm"
+              size="sm"
+            />
+            <Burger
+              opened={desktopOpened}
+              onClick={toggleDesktop}
+              visibleFrom="sm"
+              size="sm"
+            />
+
+            {isPageRoute && <Breadcrumb />}
+          </Group>
+
+          {
+            isPageRoute &&
+            <Group justify="flex-end" h="100%" px="md" wrap="nowrap">
+              <Header />
+            </Group>
+          }
+        </Group>
+
+      </AppShell.Header>
+
+      <AppShell.Navbar>
+        <Navbar />
+      </AppShell.Navbar>
+
+      <AppShell.Main>
+        {children}
+      </AppShell.Main>
+
+      {
+        isPageRoute &&
+        <AppShell.Aside className={classes.aside}>
+          <Aside />
+        </AppShell.Aside>
+      }
+
+    </AppShell>
+  );
+}

apps/client/src/components/navbar/atoms/sidebar-atom.ts

@@ -0,0 +1,16 @@
+import { atomWithWebStorage } from '@/lib/jotai-helper';
+import { atom } from 'jotai';
+
+export const desktopSidebarAtom = atomWithWebStorage('showSidebar', true);
+
+export const desktopAsideAtom = atom(false);
+
+type AsideStateType = {
+  tab: string,
+  isAsideOpen: boolean,
+}
+
+export const asideStateAtom = atom<AsideStateType>({
+  tab: '',
+  isAsideOpen: false,
+});

apps/client/src/components/navbar/hooks/use-toggle-sidebar.ts

@@ -0,0 +1,8 @@
+import { useAtom } from "jotai";
+
+export function useToggleSidebar(sidebarAtom: any) {
+  const [sidebarState, setSidebarState] = useAtom(sidebarAtom);
+  return () => {
+    setSidebarState(!sidebarState);
+  }
+}

apps/client/src/components/navbar/navbar.module.css

@@ -0,0 +1,88 @@
+.navbar {
+    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7));
+    height: 100%;
+    width: 100%;
+    padding: var(--mantine-spacing-md);
+    padding-top: 0;
+    display: flex;
+    flex-direction: column;
+    /*border-right: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));*/
+}
+
+.section {
+    margin-left: calc(var(--mantine-spacing-md) * -1);
+    margin-right: calc(var(--mantine-spacing-md) * -1);
+    margin-bottom: var(--mantine-spacing-md);
+
+    &:not(:last-of-type) {
+        border-bottom: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+    }
+}
+
+.searchCode {
+    font-weight: 700;
+    font-size: rem(10px);
+    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7));
+    border: rem(1px) solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-7));
+}
+
+.menuItems {
+    padding-left: calc(var(--mantine-spacing-md) - var(--mantine-spacing-xs));
+    padding-right: calc(var(--mantine-spacing-md) - var(--mantine-spacing-xs));
+    padding-bottom: var(--mantine-spacing-md);
+}
+
+.menu {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    font-size: var(--mantine-font-size-sm);
+    padding: rem(4px) var(--mantine-spacing-xs);
+    border-radius: var(--mantine-radius-sm);
+    font-weight: 500;
+    color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
+
+    &:hover {
+        background-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-6));
+        color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
+    }
+}
+
+.menuItemInner {
+    display: flex;
+    align-items: center;
+    flex: 1;
+}
+
+.menuItemIcon {
+    margin-right: var(--mantine-spacing-sm);
+    color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+}
+
+.pages {
+    padding-left: calc(var(--mantine-spacing-md) - rem(6px));
+    padding-right: calc(var(--mantine-spacing-md) - rem(6px));
+    padding-bottom: var(--mantine-spacing-md);
+}
+
+.pagesHeader {
+    padding-left: calc(var(--mantine-spacing-md) + rem(2px));
+    padding-right: var(--mantine-spacing-md);
+    margin-bottom: rem(5px);
+}
+
+.pageLink {
+    display: block;
+    padding: rem(8px) var(--mantine-spacing-xs);
+    text-decoration: none;
+    border-radius: var(--mantine-radius-sm);
+    font-size: var(--mantine-font-size-xs);
+    color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
+    line-height: 1;
+    font-weight: 500;
+
+    &:hover {
+        background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+        color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
+    }
+}

apps/client/src/components/navbar/navbar.tsx

@@ -0,0 +1,124 @@
+import {
+  UnstyledButton,
+  Text,
+  Group,
+  ActionIcon,
+  Tooltip,
+  rem,
+} from '@mantine/core';
+import { spotlight } from '@mantine/spotlight';
+import {
+  IconSearch,
+  IconPlus,
+  IconSettings,
+  IconFilePlus,
+  IconHome
+} from '@tabler/icons-react';
+
+import classes from './navbar.module.css';
+import { UserButton } from './user-button';
+import React from 'react';
+import { useAtom } from 'jotai';
+import { settingsModalAtom } from '@/features/settings/modal/atoms/settings-modal-atom';
+import SettingsModal from '@/features/settings/modal/settings-modal';
+import { SearchSpotlight } from '@/features/search/search-spotlight';
+import { treeApiAtom } from '@/features/page/tree/atoms/tree-api-atom';
+import PageTree from '@/features/page/tree/page-tree';
+import { useNavigate } from 'react-router-dom';
+
+interface PrimaryMenuItem {
+  icon: React.ElementType;
+  label: string;
+  onClick?: () => void;
+}
+
+const primaryMenu: PrimaryMenuItem[] = [
+  { icon: IconHome, label: 'Home' },
+  { icon: IconSearch, label: 'Search' },
+  { icon: IconSettings, label: 'Settings' },
+ // { icon: IconFilePlus, label: 'New Page' },
+];
+
+export function Navbar() {
+  const [, setSettingsModalOpen] = useAtom(settingsModalAtom);
+  const [tree] = useAtom(treeApiAtom);
+  const navigate = useNavigate();
+
+  const handleMenuItemClick = (label: string) => {
+    if (label === 'Home') {
+      navigate('/home');
+    }
+
+    if (label === 'Search') {
+      spotlight.open();
+    }
+
+    if (label === 'Settings') {
+      setSettingsModalOpen(true);
+    }
+  };
+
+  function handleCreatePage() {
+    tree?.create({ parentId: null, type: 'internal', index: 0 });
+  }
+
+  const primaryMenuItems = primaryMenu.map((menuItem) => (
+    <UnstyledButton
+      key={menuItem.label}
+      className={classes.menu}
+      onClick={() => handleMenuItemClick(menuItem.label)}
+    >
+      <div className={classes.menuItemInner}>
+        <menuItem.icon
+          size={18}
+          className={classes.menuItemIcon}
+          stroke={2}
+        />
+        <span>{menuItem.label}</span>
+      </div>
+    </UnstyledButton>
+  ));
+
+  return (
+    <>
+      <nav className={classes.navbar}>
+        <div className={classes.section}>
+          <UserButton />
+        </div>
+
+        <div className={classes.section}>
+          <div className={classes.menuItems}>{primaryMenuItems}</div>
+        </div>
+
+        <div className={classes.section}>
+          <Group className={classes.pagesHeader} justify="space-between">
+            <Text size="xs" fw={500} c="dimmed">
+              Pages
+            </Text>
+
+            <Tooltip label="Create page" withArrow position="right">
+              <ActionIcon
+                variant="default"
+                size={18}
+                onClick={handleCreatePage}
+              >
+                <IconPlus
+                  style={{ width: rem(12), height: rem(12) }}
+                  stroke={1.5}
+                />
+              </ActionIcon>
+            </Tooltip>
+          </Group>
+
+          <div className={classes.pages}>
+            <PageTree />
+          </div>
+
+        </div>
+      </nav>
+
+      <SearchSpotlight />
+      <SettingsModal />
+    </>
+  );
+}

apps/client/src/components/navbar/user-button.module.css

@@ -0,0 +1,10 @@
+.user {
+    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-0), var(--mantine-color-dark-8));
+    }
+  }

apps/client/src/components/navbar/user-button.tsx

@@ -0,0 +1,32 @@
+import { UnstyledButton, Group, Avatar, Text, rem } from '@mantine/core';
+import { IconChevronRight } from '@tabler/icons-react';
+import classes from './user-button.module.css';
+import { useAtom } from 'jotai/index';
+import { currentUserAtom } from '@/features/user/atoms/current-user-atom';
+
+export function UserButton() {
+  const [currentUser] = useAtom(currentUserAtom);
+
+  return (
+    <UnstyledButton className={classes.user}>
+      <Group>
+        <Avatar
+          src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-9.png"
+          radius="xl"
+        />
+
+        <div style={{ flex: 1 }}>
+          <Text size="sm" fw={500}>
+            {currentUser?.user.name}
+          </Text>
+
+          <Text c="dimmed" size="xs">
+            {currentUser?.user.email}
+          </Text>
+        </div>
+
+        <IconChevronRight style={{ width: rem(14), height: rem(14) }} stroke={1.5} />
+      </Group>
+    </UnstyledButton>
+  );
+}

apps/client/src/components/providers/tanstack-provider.tsx

@@ -0,0 +1,19 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import React from 'react';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnMount: false,
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+
+export function TanstackProvider({ children }: React.PropsWithChildren) {
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+    </QueryClientProvider>
+  );
+}

apps/client/src/components/theme-toggle.tsx

@@ -0,0 +1,13 @@
+import { Button, Group, useMantineColorScheme } from '@mantine/core';
+
+export function ThemeToggle() {
+    const { setColorScheme } = useMantineColorScheme();
+
+    return (
+      <Group justify="center" mt="xl">
+          <Button onClick={() => setColorScheme('light')}>Light</Button>
+          <Button onClick={() => setColorScheme('dark')}>Dark</Button>
+          <Button onClick={() => setColorScheme('auto')}>Auto</Button>
+      </Group>
+    );
+}

apps/client/src/components/ui/user-avatar.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Avatar } from '@mantine/core';
+
+interface UserAvatarProps {
+  avatarUrl: string;
+  name: string;
+  color?: string;
+  size?: string;
+  radius?: string;
+  style?: any;
+  component?: any;
+}
+
+export const UserAvatar = React.forwardRef<HTMLInputElement, UserAvatarProps>(
+  ({ avatarUrl, name, ...props }: UserAvatarProps, ref) => {
+
+    const getInitials = (name: string) => {
+      const names = name.split(' ');
+      return names.slice(0, 2).map(n => n[0]).join('');
+    };
+
+    return (
+      avatarUrl ? (
+        <Avatar
+          ref={ref}
+          src={avatarUrl}
+          alt={name}
+          radius="xl"
+          {...props}
+        />
+      ) : (
+        <Avatar ref={ref}
+                {...props}>{getInitials(name)}</Avatar>
+      )
+    );
+  },
+);