chore: tweak home style

web/src/components/HomeSidebar.tsx

@@ -1,13 +1,23 @@
+import classNames from "classnames";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import PersonalStatistics from "./PersonalStatistics";
 import SearchBar from "./SearchBar";
 import TagList from "./TagList";
 
-const HomeSidebar = () => {
+interface Props {
+  className?: string;
+}
+
+const HomeSidebar = (props: Props) => {
   const currentUser = useCurrentUser();
 
   return (
-    <aside className="relative w-full h-full max-h-screen overflow-auto hide-scrollbar flex flex-col justify-start items-start py-4 sm:pt-6">
+    <aside
+      className={classNames(
+        "relative w-full h-auto max-h-screen overflow-auto hide-scrollbar flex flex-col justify-start items-start",
+        props.className
+      )}
+    >
       <SearchBar />
       <PersonalStatistics user={currentUser} />
       <TagList />

web/src/components/HomeSidebarDrawer.tsx

@@ -27,7 +27,7 @@ const HomeSidebarDrawer = () => {
       </IconButton>
       <Drawer anchor="right" size="sm" open={open} onClose={toggleDrawer(false)}>
         <div className="w-full h-full px-5 bg-zinc-100 dark:bg-zinc-900">
-          <HomeSidebar />
+          <HomeSidebar className="py-4" />
         </div>
       </Drawer>
     </>

web/src/components/MemoContent/TaskList.tsx

@@ -17,6 +17,10 @@ const TaskList: React.FC<Props> = ({ index, complete, children }: Props) => {
   const memoStore = useMemoStore();
 
   const handleCheckboxChange = async (on: boolean) => {
+    if (context.readonly || !context.memoId) {
+      return;
+    }
+
     const nodeIndex = Number(index);
     if (isNaN(nodeIndex)) {
       return;

web/src/components/MemoContent/index.tsx

@@ -6,8 +6,8 @@ import Renderer from "./Renderer";
 import { RendererContext } from "./types";
 
 interface Props {
-  memoId: number;
   nodes: Node[];
+  memoId?: number;
   readonly?: boolean;
   className?: string;
   onMemoContentClick?: (e: React.MouseEvent) => void;
@@ -18,7 +18,7 @@ const MemoContent: React.FC<Props> = (props: Props) => {
   const currentUser = useCurrentUser();
   const memoStore = useMemoStore();
   const memoContentContainerRef = useRef<HTMLDivElement>(null);
-  const allowEdit = currentUser?.id === memoStore.getMemoById(memoId)?.creatorId && !props.readonly;
+  const allowEdit = !props.readonly && memoId && currentUser?.id === memoStore.getMemoById(memoId)?.creatorId;
 
   const handleMemoContentClick = async (e: React.MouseEvent) => {
     if (onMemoContentClick) {
@@ -32,15 +32,15 @@ const MemoContent: React.FC<Props> = (props: Props) => {
   return (
     <RendererContext.Provider
       value={{
-        memoId,
         nodes,
+        memoId,
         readonly: !allowEdit,
       }}
     >
       <div className={`w-full flex flex-col justify-start items-start text-gray-800 dark:text-gray-300 ${className || ""}`}>
         <div
           ref={memoContentContainerRef}
-          className="w-full max-w-full word-break text-base leading-6 space-y-1"
+          className="w-full max-w-full word-break text-base leading-6 space-y-1 whitespace-pre-wrap"
           onClick={handleMemoContentClick}
         >
           {nodes.map((node, index) => {

web/src/components/MemoContent/types/context.ts

@@ -1,14 +1,12 @@
 import { createContext } from "react";
-import { UNKNOWN_ID } from "@/helpers/consts";
 import { Node } from "@/types/proto/api/v2/markdown_service";
 
 interface Context {
-  memoId: number;
   nodes: Node[];
+  memoId?: number;
   readonly?: boolean;
 }
 
 export const RendererContext = createContext<Context>({
-  memoId: UNKNOWN_ID,
   nodes: [],
 });

web/src/components/NavigationDrawer.tsx

@@ -26,7 +26,7 @@ const NavigationDrawer = () => {
         <Icon.Menu className="w-5 h-auto dark:text-gray-400" />
       </IconButton>
       <Drawer anchor="left" size="sm" open={open} onClose={toggleDrawer(false)}>
-        <div className="w-full h-full px-4 bg-zinc-100 dark:bg-zinc-900">
+        <div className="w-full h-full overflow-auto px-4 bg-zinc-100 dark:bg-zinc-900">
           <Navigation />
         </div>
       </Drawer>

web/src/pages/Home.tsx

@@ -61,10 +61,14 @@ const Home = () => {
   };
 
   return (
-    <div className="w-full max-w-5xl sm:px-6 flex flex-row justify-center items-start sm:gap-6">
+    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
-      <div className={classNames("w-full sm:pt-3 md:pt-6", md && "max-w-[calc(100%-14rem)]")}>
+      {!md && (
-        <MobileHeader className="sm:px-0">{!md && <HomeSidebarDrawer />}</MobileHeader>
+        <MobileHeader>
-        <div className="w-full px-4 sm:px-0">
+          <HomeSidebarDrawer />
+        </MobileHeader>
+      )}
+      <div className={classNames("w-full flex flex-row justify-start items-start px-4 sm:px-6 gap-6")}>
+        <div className="w-full">
           <MemoEditor className="mb-2" cacheKey="home-memo-editor" />
           <div className="flex flex-col justify-start items-start w-full max-w-full pb-28">
             <MemoFilter />
@@ -91,13 +95,13 @@ const Home = () => {
             )}
           </div>
         </div>
+        {md && (
+          <div className="sticky top-0 left-0 shrink-0 -mt-6 w-56 h-full">
+            <HomeSidebar className="py-6" />
+          </div>
+        )}
       </div>
-      {md && (
+    </section>
-        <div className="sticky top-0 left-0 shrink-0 w-56 h-full">
-          <HomeSidebar />
-        </div>
-      )}
-    </div>
   );
 };