feat: comments

* create comment
* reply to comment thread
* edit comment
* delete comment
* resolve comment

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 (
+    <Suspense fallback={<div>Loading comments...</div>}>
+      <Comments />
+    </Suspense>
+  );
+}

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
       </Button>
 
+      <ActionIcon variant="default" style={{ border: 'none' }}>
+        <IconMessage size={20} stroke={2} />
+      </ActionIcon>
+
       <PageActionMenu />
     </>
   );

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(

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 (
     <AppShell
@@ -23,7 +25,7 @@ export default function Shell({ children }: { children: React.ReactNode }) {
         breakpoint: 'sm',
         collapsed: { mobile: !mobileOpened, desktop: !desktopOpened },
       }}
-      aside={{ width: 300, breakpoint: 'md', collapsed: { mobile: true, desktop: !desktopOpened } }}
+      aside={{ width: 300, breakpoint: 'md', collapsed: { mobile: true, desktop: !desktopAsideOpened } }}
       padding="md"
     >
       <AppShell.Header
@@ -61,13 +63,12 @@ export default function Shell({ children }: { children: React.ReactNode }) {
         <Navbar />
       </AppShell.Navbar>
 
-
       <AppShell.Main>
         {children}
       </AppShell.Main>
 
       <AppShell.Aside className={classes.aside}>
-        TODO
+        <Aside />
       </AppShell.Aside>
     </AppShell>
   );

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

@@ -1,3 +1,6 @@
 import { atomWithWebStorage } from "@/lib/jotai-helper";
+import { atom } from 'jotai';
 
-export const desktopSidebarAtom = atomWithWebStorage('showSidebar',true);
+export const desktopSidebarAtom = atomWithWebStorage('showSidebar',true);
+
+export const desktopAsideAtom = atom(false);