diff --git a/client/package.json b/client/package.json index f9b85864..35d4a927 100644 --- a/client/package.json +++ b/client/package.json @@ -10,13 +10,13 @@ }, "dependencies": { "@hocuspocus/provider": "^2.7.1", - "@mantine/core": "^7.1.5", - "@mantine/form": "^7.1.5", - "@mantine/hooks": "^7.1.5", - "@mantine/spotlight": "^7.1.5", - "@tabler/icons-react": "^2.39.0", + "@mantine/core": "^7.2.1", + "@mantine/form": "^7.2.1", + "@mantine/hooks": "^7.2.1", + "@mantine/modals": "^7.2.1", + "@mantine/spotlight": "^7.2.1", + "@tabler/icons-react": "^2.40.0", "@tanstack/react-query": "^4.36.1", - "@tanstack/react-table": "^8.10.7", "@tiptap/extension-code-block": "^2.1.12", "@tiptap/extension-collaboration": "^2.1.12", "@tiptap/extension-collaboration-cursor": "^2.1.12", @@ -42,20 +42,21 @@ "@tiptap/react": "^2.1.12", "@tiptap/starter-kit": "^2.1.12", "@tiptap/suggestion": "^2.1.12", - "axios": "^1.5.1", + "axios": "^1.6.0", "clsx": "^2.0.0", - "jotai": "^2.4.3", + "date-fns": "^2.30.0", + "jotai": "^2.5.1", "jotai-optics": "^0.3.1", "js-cookie": "^3.0.5", "react": "^18.2.0", "react-arborist": "^3.2.0", "react-dom": "^18.2.0", "react-hot-toast": "^2.4.1", - "react-router-dom": "^6.17.0", + "react-router-dom": "^6.18.0", "socket.io-client": "^4.7.2", "tippy.js": "^6.3.7", "uuid": "^9.0.1", - "y-indexeddb": "^9.0.11", + "y-indexeddb": "^9.0.12", "yjs": "^13.6.8", "zod": "^3.22.4" }, @@ -64,7 +65,7 @@ "@types/node": "20.8.6", "@types/react": "^18.2.29", "@types/react-dom": "^18.2.14", - "@types/uuid": "^9.0.6", + "@types/uuid": "^9.0.7", "@typescript-eslint/eslint-plugin": "^6.0.0", "@typescript-eslint/parser": "^6.0.0", "@vitejs/plugin-react": "^4.0.3", diff --git a/client/src/components/aside/aside.tsx b/client/src/components/aside/aside.tsx new file mode 100644 index 00000000..3c8bfe87 --- /dev/null +++ b/client/src/components/aside/aside.tsx @@ -0,0 +1,11 @@ +import React, { Suspense } from 'react'; + +const Comments = React.lazy(() => import('@/features/comment/comments')); + +export default function Aside() { + return ( + Loading comments...}> + + + ); +} diff --git a/client/src/components/layouts/header.tsx b/client/src/components/layouts/header.tsx index 00664a49..5b173db9 100644 --- a/client/src/components/layouts/header.tsx +++ b/client/src/components/layouts/header.tsx @@ -1,5 +1,4 @@ import { - Group, ActionIcon, Menu, Button, @@ -13,6 +12,7 @@ import { IconLock, IconShare, IconTrash, + IconMessage, } from '@tabler/icons-react'; import React from 'react'; @@ -23,6 +23,10 @@ export default function Header() { Share + + + + ); diff --git a/client/src/components/layouts/shell.module.css b/client/src/components/layouts/shell.module.css index d3b72f96..bd3fd558 100644 --- a/client/src/components/layouts/shell.module.css +++ b/client/src/components/layouts/shell.module.css @@ -7,6 +7,8 @@ } .aside { + background: var(--mantine-color-gray-light); + [data-layout='alt'] & { --_section-top: var(--_section-top, var(--app-shell-header-offset, 0px)); --_section-height: var( diff --git a/client/src/components/layouts/shell.tsx b/client/src/components/layouts/shell.tsx index b5356f4b..2c689a4d 100644 --- a/client/src/components/layouts/shell.tsx +++ b/client/src/components/layouts/shell.tsx @@ -1,4 +1,4 @@ -import { desktopSidebarAtom } from '@/components/navbar/atoms/sidebar-atom'; +import { desktopAsideAtom, desktopSidebarAtom } from '@/components/navbar/atoms/sidebar-atom'; import { useToggleSidebar } from '@/components/navbar/hooks/use-toggle-sidebar'; import { Navbar } from '@/components/navbar/navbar'; import { ActionIcon, UnstyledButton, ActionIconGroup, AppShell, Avatar, Burger, Group } from '@mantine/core'; @@ -8,11 +8,13 @@ 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'; export default function Shell({ children }: { children: React.ReactNode }) { const [mobileOpened, { toggle: toggleMobile }] = useDisclosure(); const [desktopOpened] = useAtom(desktopSidebarAtom); const toggleDesktop = useToggleSidebar(desktopSidebarAtom); + const [desktopAsideOpened] = useAtom(desktopAsideAtom); return ( - {children} - TODO +