release 0.3.4

apps/web/app/post/[id]/editor.tsx

@@ -0,0 +1,506 @@
+"use client";
+
+import {
+  useCallback,
+  useEffect,
+  useState,
+  useRef,
+  Dispatch,
+  SetStateAction,
+} from "react";
+import { Editor as InkeEditor } from "inkejs";
+import { JSONContent } from "@tiptap/react";
+import useLocalStorage from "@/lib/hooks/use-local-storage";
+import { useDebouncedCallback } from "use-debounce";
+import { Content_Storage_Key, Default_Debounce_Duration } from "@/lib/consts";
+import { ContentItem } from "@/lib/types/note";
+import {
+  exportAsJson,
+  exportAsMarkdownFile,
+  fetcher,
+  fomatTmpDate,
+  timeAgo,
+} from "@/lib/utils";
+import Menu from "@/ui/menu";
+import UINotFound from "@/ui/layout/not-found";
+import { toPng } from "html-to-image";
+import { usePDF } from "react-to-pdf";
+import { Session } from "next-auth";
+import { IResponse } from "@/lib/types/response";
+import { ShareNote } from "@prisma/client";
+import { LoadingCircle, LoadingDots } from "@/ui/shared/icons";
+import { BadgeInfo, ExternalLink, Shapes, Clipboard } from "lucide-react";
+import toast, { Toaster } from "react-hot-toast";
+import {
+  useCollaborationByLocalId,
+  useCollaborationRoomId,
+  useUserInfoByEmail,
+  useUserShareNotes,
+} from "./request";
+import Link from "next/link";
+import Tooltip from "@/ui/shared/tooltip";
+import { useSearchParams } from "next/navigation";
+import db, { noteTable, updateNote } from "@/store/db.model";
+
+export default function Editor({
+  id,
+  session,
+  contents,
+  setShowRoomModal,
+}: {
+  id?: string;
+  session: Session | null;
+  contents: ContentItem[];
+  setShowRoomModal: Dispatch<SetStateAction<boolean>>;
+}) {
+  const params = useSearchParams();
+  const [collaboration, setCollaboration] = useState(false);
+
+  const ref = useRef<HTMLDivElement>(null);
+  const [debounceDuration, setDebounceDuration] = useState(
+    Default_Debounce_Duration,
+  );
+  const [saveStatus, setSaveStatus] = useState("Saved");
+  const [isLoading, setLoading] = useState(true);
+  const [isSharing, setSharing] = useState(false);
+  const [isShowShareLink, setShowShareLink] = useState(false);
+  const [currentRoomId, setCurrentRoomId] = useState("");
+
+  const [currentIndex, setCurrentIndex] = useState(-1);
+  const [currentContent, setCurrentContent] = useLocalStorage<JSONContent>(
+    Content_Storage_Key,
+    {},
+  );
+  const [currentPureContent, setPureContent] = useState("");
+
+  const { shares } = useUserShareNotes();
+  const { user } = useUserInfoByEmail(session?.user.email);
+  const { room, isLoading: isLoadingRoom } = useCollaborationRoomId(
+    params.get("work"),
+  );
+  const { room: localRoom } = useCollaborationByLocalId(id);
+
+  const { toPDF, targetRef } = usePDF({ filename: "note.pdf" });
+
+  useEffect(() => {
+    const roomId = params.get("work");
+    if (roomId) {
+      if (room && room.code === 200) {
+        setCurrentRoomId(roomId);
+        setCollaboration(true);
+      }
+      if (id && contents.length > 0) {
+        const index = contents.findIndex((item) => item.id === id);
+        if (index !== -1 && contents[index]) {
+          setCurrentContent({});
+          setCurrentIndex(index);
+          document.title = "Space | Inke";
+        }
+      }
+    } else {
+      if (id && contents.length > 0) {
+        setLoading(true);
+        const index = contents.findIndex((item) => item.id === id);
+
+        if (index !== -1 && contents[index]) {
+          setCurrentContent(contents[index].content ?? {});
+          setCurrentIndex(index);
+          document.title = `${contents[index].title} | Inke`;
+        }
+      }
+    }
+    setLoading(false);
+  }, [id, contents, room]);
+
+  const debouncedUpdates = useDebouncedCallback(
+    async (value, text, markdown) => {
+      handleUpdateItem(id, value);
+      setPureContent(markdown);
+    },
+    debounceDuration,
+  );
+
+  const handleUpdateItem = (id: string, updatedContent: JSONContent) => {
+    if (currentIndex !== -1) {
+      updateNote({
+        ...contents[currentIndex],
+        content: updatedContent,
+        updated_at: new Date().getTime(),
+      });
+    }
+  };
+
+  const handleExportImage = useCallback(() => {
+    if (ref.current === null || currentIndex === -1 || saveStatus !== "Saved") {
+      return;
+    }
+
+    toPng(ref.current, {
+      cacheBust: true,
+      width: ref.current.scrollWidth,
+      height: ref.current.scrollHeight,
+    })
+      .then((dataUrl) => {
+        const link = document.createElement("a");
+        link.download = contents[currentIndex].title + ".png";
+        link.href = dataUrl;
+        link.click();
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  }, [ref, currentIndex, contents]);
+
+  const handleExportJson = () => {
+    if (!contents || currentIndex === -1 || saveStatus !== "Saved") return;
+    exportAsJson(contents[currentIndex], contents[currentIndex].title);
+  };
+
+  const handleExportMarkdown = () => {
+    if (
+      currentPureContent.length === 0 ||
+      currentIndex === -1 ||
+      saveStatus !== "Saved"
+    )
+      return;
+
+    exportAsMarkdownFile(currentPureContent, contents[currentIndex].title);
+  };
+
+  const handleExportPDF = () => {
+    toPDF();
+  };
+
+  const handleCreateShare = async () => {
+    if (saveStatus !== "Saved") return;
+    setSharing(true);
+    const res = await fetcher<IResponse<ShareNote | null>>("/api/share", {
+      method: "POST",
+      body: JSON.stringify({
+        data: contents[currentIndex],
+      }),
+    });
+    if (res.code !== 200) {
+      toast(res.msg, {
+        icon: "😅",
+      });
+    } else {
+      toast.success(res.msg, {
+        icon: "🎉",
+      });
+      if (!isShowShareLink) setShowShareLink(true);
+    }
+    setSharing(false);
+  };
+
+  const handleCreateCollaboration = async () => {
+    // 用户当前本地笔记是否已加入协作
+    if (localRoom && localRoom.code === 200) return;
+
+    if (!currentRoomId) {
+      setShowRoomModal(true);
+    } else if (currentRoomId && !collaboration) {
+      // url有roomid但是没有加入
+      console.log("url有roomid但是没有加入", room);
+    } else if (currentRoomId && collaboration) {
+      // url有roomid且已经加入
+      return;
+    }
+  };
+
+  if (isLoading || (params.get("work") && isLoadingRoom))
+    return (
+      <div className="m-6">
+        <LoadingCircle className="h-6 w-6" />
+      </div>
+    );
+
+  if (params.get("work") && room.code !== 200)
+    return (
+      <>
+        <div className="relative mx-auto h-screen w-full overflow-auto px-12 pt-12">
+          <Shapes className="mx-auto h-12 w-12 text-purple-400 hover:text-slate-500" />
+          <h1 className="my-4 text-center text-2xl font-semibold">
+            Wrong collaboration space
+          </h1>
+          <p>
+            You are accessing a multiplayer collaboration space, but there seems
+            to be an unexpected issue:{" "}
+            <span className="font-bold text-slate-800">{room.msg}</span>. Please
+            check your space id (<strong>{params.get("work")}</strong>) and try
+            it again.
+          </p>
+        </div>
+      </>
+    );
+
+  return (
+    <>
+      <Toaster />
+      <div className="relative flex h-screen w-full justify-center overflow-auto">
+        <div className="bg-white/50 absolute z-10 mb-5 flex w-full items-center justify-end gap-2 px-3 py-2 backdrop-blur-xl">
+          <span className="hidden text-xs text-slate-400 md:block">
+            Created at{" "}
+            {currentIndex !== -1 &&
+              fomatTmpDate(contents[currentIndex]?.created_at || 0)}
+          </span>
+
+          <div className="mr-auto flex items-center justify-center gap-2 rounded-lg bg-stone-100 px-2 py-1 text-sm ">
+            <i
+              style={{
+                width: "9px",
+                height: "9px",
+                borderRadius: "50%",
+                backgroundColor:
+                  saveStatus === "Saved"
+                    ? "#00d2ee"
+                    : saveStatus === "Saving..."
+                    ? "#ff6b2c"
+                    : "#919191",
+                display: "block",
+                transition: "all 0.5s",
+              }}
+            />
+            <span className="text-xs text-slate-400 transition-all">
+              {saveStatus}{" "}
+              {saveStatus === "Saved" &&
+                currentIndex !== -1 &&
+                timeAgo(contents[currentIndex]?.updated_at || 0)}
+            </span>
+          </div>
+
+          <Tooltip
+            content={
+              <div className="w-72 px-3 py-2 text-sm text-slate-400">
+                <div className="flex items-center justify-between">
+                  <h1 className="font-semibold text-slate-500">
+                    Collaborative Space
+                  </h1>
+
+                  {collaboration && room && room.data && (
+                    <Clipboard
+                      onClick={() => {
+                        navigator.clipboard.writeText(
+                          `https://inke.app/invite/${room.data.id}`,
+                        );
+                        toast("Copied to clipboard");
+                      }}
+                      className="h-4 w-4 cursor-pointer text-cyan-500 hover:text-slate-300 active:text-green-500 "
+                    />
+                  )}
+                </div>
+
+                {collaboration && room && room.data ? (
+                  <p className="mt-2 hyphens-manual">
+                    This note has enabled multi person collaboration, Copy the{" "}
+                    <Link
+                      className="text-cyan-500 after:content-['_↗'] hover:opacity-80"
+                      href={`/invite/${room.data.id}`}
+                      target="_blank"
+                    >
+                      invite link
+                    </Link>{" "}
+                    to invite others to join the collaboration.
+                  </p>
+                ) : localRoom && localRoom.code === 200 ? (
+                  <p className="mt-2 hyphens-manual">
+                    This local note is already associated with a collaboration
+                    space. Click the link below to jump to the collaboration:{" "}
+                    <Link
+                      className="text-cyan-500 after:content-['_↗'] hover:text-cyan-300"
+                      href={`/post/${id}?work=${localRoom.data.roomId}`}
+                      target="_blank"
+                    >
+                      space-{localRoom.data.roomId}
+                    </Link>
+                  </p>
+                ) : (
+                  <p className="mt-2 hyphens-manual">
+                    Now, Inke supports collaborative editing of docs by multiple
+                    team members. Start by creating collaborative space. Learn
+                    more about{" "}
+                    <Link
+                      className="text-cyan-600 after:content-['_↗'] hover:text-cyan-300"
+                      href={`/collaboration`}
+                      target="_blank"
+                    >
+                      collaboration space
+                    </Link>
+                    . <br />
+                    Note: You need to{" "}
+                    <strong className="text-slate-900">sign in first</strong> to
+                    try this feature.
+                  </p>
+                )}
+              </div>
+            }
+            fullWidth={false}
+          >
+            <div className="flex items-center justify-center gap-2">
+              {collaboration && room && room.data ? (
+                <button
+                  onClick={() => {
+                    navigator.clipboard.writeText(
+                      `https://inke.app/invite/${room.data.id}`,
+                    );
+                    toast("Copied to clipboard");
+                  }}
+                  className="hover:opacity-800 mr-2 text-sm text-cyan-500"
+                >
+                  Invite
+                </button>
+              ) : (
+                <button className="mr-2" onClick={handleCreateCollaboration}>
+                  <Shapes className="h-5 w-5 text-cyan-500 hover:opacity-80" />
+                </button>
+              )}
+            </div>
+          </Tooltip>
+
+          {((shares &&
+            shares.data &&
+            shares.data.find((i) => i.localId === id)) ||
+            isShowShareLink) && (
+            <Link href={`/publish/${id}`} target="_blank">
+              <ExternalLink className="h-5 w-5 text-cyan-500 hover:text-cyan-300" />
+            </Link>
+          )}
+
+          <button
+            className="ml-1 flex h-7 w-20 items-center justify-center gap-1 rounded-md bg-cyan-500 px-4 py-1 text-sm text-white transition-all hover:opacity-80"
+            onClick={handleCreateShare}
+            disabled={isSharing || saveStatus !== "Saved"}
+          >
+            {isSharing ? (
+              <LoadingDots color="#fff" />
+            ) : (
+              <span className="bg-gradient-to-r from-red-200 via-yellow-300 to-orange-200 bg-clip-text font-semibold text-transparent">
+                Publish
+              </span>
+            )}
+          </button>
+
+          <Tooltip
+            content={
+              <div className="w-64 px-3 py-2 text-sm text-slate-400">
+                <h1 className="mb-2 font-semibold text-slate-500">
+                  Publish and Share
+                </h1>
+                <p>
+                  Click the <code>`Publish`</code> button to save your note
+                  remotely and generate a sharing link, allowing you to share
+                  your notes with others. Your notes will be uploaded after
+                  serialization. e.g{" "}
+                  <a
+                    className="text-cyan-500 after:content-['_↗'] hover:text-cyan-300"
+                    href="https://inke.app/publish/0e1be533-ae66-4ffa-9725-bd6b84899e78"
+                    target="_blank"
+                  >
+                    link
+                  </a>
+                  .
+                </p>
+                <p>
+                  You need to <strong>sign in</strong> first to try this
+                  feature.
+                </p>
+              </div>
+            }
+            fullWidth={false}
+          >
+            <button className="hidden sm:block">
+              <BadgeInfo className="h-4 w-4 text-slate-400 hover:text-slate-500" />
+            </button>
+          </Tooltip>
+
+          <Menu
+            onExportImage={handleExportImage}
+            onExportJson={handleExportJson}
+            onExportTxT={handleExportMarkdown}
+            onExportPDF={handleExportPDF}
+          />
+        </div>
+
+        {id &&
+          currentIndex === -1 &&
+          !isLoading &&
+          (collaboration && room && room.data ? (
+            <div className="relative mx-auto mt-10 h-screen w-full overflow-auto px-12 pt-12">
+              <Shapes className="mx-auto h-12 w-12 text-cyan-500" />
+              <h1 className="my-4 text-center text-2xl font-semibold">
+                Sync collaboration space
+              </h1>
+              <p className="mt-2 hyphens-manual">
+                It seems that you have joined this collaboration space (
+                {room.data.title}), but this device has not been created. Copy
+                this{" "}
+                <Link
+                  className="text-cyan-500 after:content-['_↗'] hover:opacity-80"
+                  href={`/invite/${room.data.id}`}
+                  target="_blank"
+                >
+                  invite link
+                </Link>{" "}
+                and recreate a local record to enter.
+              </p>
+            </div>
+          ) : (
+            <UINotFound />
+          ))}
+
+        {contents && currentIndex !== -1 && (
+          <div ref={ref} className="w-full max-w-screen-lg overflow-auto">
+            <div ref={targetRef}>
+              {params.get("work") ? (
+                <InkeEditor
+                  className="relative min-h-screen overflow-y-auto overflow-x-hidden border-stone-200 bg-white pt-1"
+                  storageKey={Content_Storage_Key}
+                  debounceDuration={debounceDuration}
+                  defaultValue={currentContent}
+                  plan={user?.plan || "5"}
+                  bot={true}
+                  id={params.get("work")}
+                  collaboration={true}
+                  userName={user?.name || "unknown"}
+                  onUpdate={() => setSaveStatus("Unsaved")}
+                  onDebouncedUpdate={(
+                    json: JSONContent,
+                    text: string,
+                    markdown: string,
+                  ) => {
+                    setSaveStatus("Saving...");
+                    if (json) debouncedUpdates(json, text, markdown);
+                    setTimeout(() => {
+                      setSaveStatus("Saved");
+                    }, 500);
+                  }}
+                />
+              ) : (
+                <InkeEditor
+                  className="relative min-h-screen overflow-y-auto overflow-x-hidden border-stone-200 bg-white pt-1"
+                  storageKey={Content_Storage_Key}
+                  debounceDuration={debounceDuration}
+                  defaultValue={currentContent}
+                  plan={user?.plan || "5"}
+                  bot={true}
+                  onUpdate={() => setSaveStatus("Unsaved")}
+                  onDebouncedUpdate={(
+                    json: JSONContent,
+                    text: string,
+                    markdown: string,
+                  ) => {
+                    setSaveStatus("Saving...");
+                    if (json) debouncedUpdates(json, text, markdown);
+                    setTimeout(() => {
+                      setSaveStatus("Saved");
+                    }, 500);
+                  }}
+                />
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}

apps/web/app/post/[id]/layout.tsx

@@ -0,0 +1,29 @@
+import Providers from "@/app/providers";
+import { siteConfig } from "@/config/site";
+import "@/styles/globals.css";
+
+import { Metadata } from "next";
+import { ReactNode } from "react";
+// import Providers from "./providers";
+
+export const metadata: Metadata = {
+  title: siteConfig.name,
+  description: siteConfig.description,
+  keywords: siteConfig.keywords,
+  authors: siteConfig.authors,
+  creator: siteConfig.creator,
+  themeColor: siteConfig.themeColor,
+  icons: siteConfig.icons,
+  metadataBase: siteConfig.metadataBase,
+  openGraph: siteConfig.openGraph,
+  twitter: siteConfig.twitter,
+  manifest: siteConfig.manifest,
+};
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <>
+      <Providers>{children}</Providers>
+    </>
+  );
+}

apps/web/app/post/[id]/page.tsx

@@ -0,0 +1,13 @@
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/app/api/auth/[...nextauth]/route";
+import EditorWrapper from "./wrapper";
+
+// export async function generateMetadata({ params, searchParams }): Metadata {
+//   const data = await getDetail(params.slug);
+//   return { title: data.title };
+// }
+
+export default async function Page({ params }: { params: { id: string } }) {
+  const session = await getServerSession(authOptions);
+  return <EditorWrapper id={params.id} session={session} />;
+}

apps/web/app/post/[id]/request.ts

@@ -0,0 +1,182 @@
+import { fetcher } from "@/lib/utils";
+import useSWR from "swr";
+import { User } from "@/lib/types/user";
+import { Collaboration, ShareNote } from "@prisma/client";
+import { IResponse } from "@/lib/types/response";
+
+export function useUserInfoByEmail(email: string) {
+  let api = `/api/users?email=${email}`;
+  const { data, error, isLoading } = useSWR<User>(
+    api,
+    () =>
+      fetcher(api, {
+        method: "GET",
+      }),
+    { revalidateOnFocus: false },
+  );
+
+  return {
+    user: data,
+    isLoading,
+    isError: error,
+  };
+}
+
+export function useUserInfoById(id: string) {
+  let api = `/api/users?id=${id}`;
+  const { data, error, isLoading } = useSWR<User>(
+    api,
+    () =>
+      fetcher(api, {
+        method: "GET",
+      }),
+    { revalidateOnFocus: false },
+  );
+
+  return {
+    user: data,
+    isLoading,
+    isError: error,
+  };
+}
+
+export function useUserShareNotes() {
+  let api = `/api/share/all`;
+  const { data, error, isLoading } = useSWR<IResponse<ShareNote[]>>(
+    api,
+    () =>
+      fetcher(api, {
+        method: "GET",
+      }),
+    { revalidateOnFocus: false },
+  );
+
+  return {
+    shares: data,
+    isLoading,
+    isError: error,
+  };
+}
+
+export function useShareNoteByLocalId(id: string) {
+  const api = `/api/share?id=${id}`;
+  const { data, error, isLoading } = useSWR<IResponse<ShareNote>>(
+    api,
+    () =>
+      fetcher(api, {
+        method: "GET",
+      }),
+    { revalidateOnFocus: false },
+  );
+
+  return {
+    share: data,
+    isLoading,
+    isError: error,
+  };
+}
+
+export function useCollaborationRoomId(id: string) {
+  const api = `/api/collaboration/room?roomId=${id}`;
+  const { data, error, isLoading } = useSWR<IResponse<Collaboration>>(
+    api,
+    () =>
+      fetcher(api, {
+        method: "GET",
+      }),
+    { revalidateOnFocus: false },
+  );
+
+  return {
+    room: data,
+    isLoading,
+    isError: error,
+  };
+}
+export function useCollaborationById(id: string) {
+  const api = `/api/collaboration/id?id=${id}`;
+  const { data, error, isLoading } = useSWR<IResponse<Collaboration>>(
+    api,
+    () =>
+      fetcher(api, {
+        method: "GET",
+      }),
+    { revalidateOnFocus: false },
+  );
+
+  return {
+    room: data,
+    isLoading,
+    isError: error,
+  };
+}
+export function useCollaborationByLocalId(id: string) {
+  const api = `/api/collaboration/local-id?localId=${id}`;
+  const { data, error, isLoading } = useSWR<IResponse<Collaboration>>(
+    api,
+    () =>
+      fetcher(api, {
+        method: "GET",
+      }),
+    { revalidateOnFocus: false },
+  );
+
+  return {
+    room: data,
+    isLoading,
+    isError: error,
+  };
+}
+export function useCollaborationInviteCount(roomId: string) {
+  const api = `/api/collaboration/count?id=${roomId}`;
+  const { data, error, isLoading } = useSWR<IResponse<number>>(
+    api,
+    () =>
+      fetcher(api, {
+        method: "GET",
+      }),
+    { revalidateOnFocus: false },
+  );
+
+  return {
+    count: data,
+    isLoading,
+    isError: error,
+  };
+}
+export function useCollaborationByUserId() {
+  const api = `/api/collaboration`;
+  const { data, error, isLoading } = useSWR<IResponse<Collaboration[]>>(
+    api,
+    () =>
+      fetcher(api, {
+        method: "GET",
+      }),
+    { revalidateOnFocus: false },
+  );
+
+  return {
+    rooms: data,
+    isLoading,
+    isError: error,
+  };
+}
+// 查询第一个空间创建者
+export function useCollaborationByRoomId(roomId: string) {
+  const api = `/api/collaboration/room`;
+  const { data, error, isLoading } = useSWR<IResponse<Collaboration>>(
+    api,
+    () =>
+      fetcher(api, {
+        method: "POST",
+        body: JSON.stringify({ roomId }),
+      }),
+    { revalidateOnFocus: false },
+  );
+
+  return {
+    room_creator: data,
+    isLoading,
+    isError: error,
+  };
+}

apps/web/app/post/[id]/sider.tsx

@@ -0,0 +1,655 @@
+"use client";
+
+import {
+  useState,
+  useEffect,
+  Suspense,
+  Dispatch,
+  SetStateAction,
+  useRef,
+} from "react";
+import { motion, useAnimation } from "framer-motion";
+import { ContentItem } from "@/lib/types/note";
+import { useRouter, useSearchParams } from "next/navigation";
+import NewPostButton from "@/ui/new-post-button";
+import UserDropdown from "@/ui/layout/user-dropdown";
+import { Session } from "next-auth";
+import { useCollaborationByUserId, useUserShareNotes } from "./request";
+import Link from "next/link";
+import { exportAsJson, fetcher } from "@/lib/utils";
+import { Collaboration, ShareNote } from "@prisma/client";
+import SearchInput from "@/ui/search-input";
+import {
+  Check,
+  ChevronLeft,
+  ChevronRight,
+  Download,
+  DownloadCloud,
+  Edit,
+  ExternalLink,
+  Minus,
+  Plus,
+  Trash2,
+  Shapes,
+  FolderClosed,
+  FolderOpen,
+  FolderEdit,
+} from "lucide-react";
+import Tooltip from "@/ui/shared/tooltip";
+import useWindowSize from "@/lib/hooks/use-window-size";
+import toast from "react-hot-toast";
+import { addNote, deleteNote, patchNote, updateNote } from "@/store/db.model";
+import useLocalStorage from "@/lib/hooks/use-local-storage";
+import { Note_Storage_Key } from "@/lib/consts";
+
+export default function Sidebar({
+  id,
+  session,
+  contents,
+  setShowSignInModal,
+  setShowEditModal,
+  setShowRoomModal,
+}: {
+  id?: string;
+  session: Session | null;
+  contents: ContentItem[];
+  setShowSignInModal: Dispatch<SetStateAction<boolean>>;
+  setShowEditModal: Dispatch<SetStateAction<boolean>>;
+  setShowRoomModal: Dispatch<SetStateAction<boolean>>;
+}) {
+  const router = useRouter();
+  const params = useSearchParams();
+  const { isMobile } = useWindowSize();
+
+  const [active, setActive] = useState(false);
+  const [showEditInput, setShowEditInput] = useState(false);
+  const [showEditCate, setShowEditCate] = useState(false);
+  const [searchKey, setSearchKey] = useState("");
+
+  const controls = useAnimation();
+  const controlText = useAnimation();
+  const controlTitleText = useAnimation();
+
+  const [contentsCache, setContentsCache] = useState<ContentItem[]>([]);
+  const [categorizedData, setCategorizedData] = useState<{
+    [key: string]: ContentItem[];
+  }>();
+
+  const { shares, isLoading } = useUserShareNotes();
+  const [sharesCache, setSharesCache] = useState<ShareNote[]>([]);
+
+  const { rooms } = useCollaborationByUserId();
+  const [roomsCache, setRoomsCache] = useState<Collaboration[]>([]);
+
+  const [openHistory, setOpenHistory] = useState(true);
+  const [openShares, setOpenShares] = useState(false);
+  const [openRooms, setOpenRooms] = useState(false);
+
+  const editCateRef = useRef<HTMLInputElement>(null);
+  const editTitleRef = useRef<HTMLInputElement>(null);
+
+  const [oldContents, setOldContents] = useLocalStorage<ContentItem[]>(
+    Note_Storage_Key,
+    [],
+  );
+
+  const showMore = () => {
+    controls.start({
+      width: "270px",
+      transition: { duration: 0.001 },
+    });
+    controlText.start({
+      opacity: 1,
+      display: "block",
+      transition: { delay: 0.3 },
+    });
+    controlTitleText.start({
+      opacity: 1,
+      transition: { delay: 0.3 },
+    });
+
+    setActive(true);
+  };
+
+  const showLess = () => {
+    controls.start({
+      width: "0px",
+      transition: { duration: 0.001 },
+    });
+
+    controlText.start({
+      opacity: 0,
+      display: "none",
+    });
+
+    controlTitleText.start({
+      opacity: 0,
+    });
+
+    setActive(false);
+  };
+
+  // patch
+  useEffect(() => {
+    if (oldContents.length > 0) {
+      patchNote(oldContents);
+      setOldContents([]);
+    }
+  }, [oldContents]);
+
+  useEffect(() => {
+    showMore();
+  }, []);
+
+  useEffect(() => {
+    if (isMobile) {
+      showLess();
+    }
+  }, [isMobile]);
+
+  useEffect(() => {
+    if (searchKey === "") {
+      setContentsCache(contents);
+      setSharesCache(shares?.data || []);
+      setCategorizedData(() => {
+        return (
+          contents
+            // .sort((a, b) => b.updated_at - a.updated_at)
+            .reduce((acc, item) => {
+              const tag = item.tag || ""; // If tag is undefined, default it to an empty string
+              if (!acc[tag]) {
+                acc[tag] = [];
+              }
+              acc[tag].push(item);
+              return acc;
+            }, {} as { [key: string]: ContentItem[] })
+        );
+      });
+    }
+  }, [searchKey, contents, shares]);
+
+  useEffect(() => {
+    if (shares && shares.data) {
+      setSharesCache(shares.data);
+    }
+  }, [shares]);
+
+  useEffect(() => {
+    if (rooms && rooms.data) {
+      setRoomsCache(rooms.data);
+    }
+  }, [rooms]);
+
+  const handleDeleteItem = (_id: string) => {
+    deleteNote(_id);
+  };
+  const handleDeletePublicItem = async (_id: string) => {
+    const res = await fetcher(`/api/share?id=${_id}`, {
+      method: "DELETE",
+    });
+    const updatedList = shares.data.filter((item) => item.id !== _id);
+    setSharesCache(updatedList);
+  };
+
+  const handleEditTitle = (itemId: string) => {
+    if (showEditInput && id === itemId) {
+      setShowEditInput(false);
+      const index = contents.findIndex((item) => item.id === id);
+      if (index !== -1) {
+        updateNote({
+          ...contents[index],
+          title: editTitleRef.current.value,
+        });
+      }
+    } else {
+      setShowEditInput(true);
+    }
+  };
+  const handleEditCate = (itemId: string) => {
+    if (showEditCate && id === itemId) {
+      setShowEditCate(false);
+      const index = contents.findIndex((item) => item.id === id);
+      if (index !== -1) {
+        updateNote({
+          ...contents[index],
+          tag: editCateRef.current.value,
+        });
+      }
+    } else {
+      setShowEditCate(true);
+    }
+  };
+
+  const handleExportJson = () => {
+    if (!contents) return;
+    exportAsJson(contents, "Inke-notes-local");
+  };
+
+  const handleInputSearch = (value: string) => {
+    if (value.length > 0) {
+      setSearchKey(value);
+      const local_res = contents.filter((item) => {
+        if (
+          item.title.includes(value) ||
+          JSON.stringify(item.content).includes(value) ||
+          (item.tag && item.tag.includes(value))
+        ) {
+          return item;
+        }
+      });
+      setContentsCache(local_res);
+      setCategorizedData(() => {
+        return (
+          local_res
+            // .sort((a, b) => b.updated_at - a.updated_at)
+            .reduce((acc, item) => {
+              const tag = item.tag || ""; // If tag is undefined, default it to an empty string
+              if (!acc[tag]) {
+                acc[tag] = [];
+              }
+              acc[tag].push(item);
+              return acc;
+            }, {} as { [key: string]: ContentItem[] })
+        );
+      });
+
+      if (shares && shares.data) {
+        const publish_res = shares.data.filter((item) => {
+          if (item.data.includes(value)) {
+            return item;
+          }
+        });
+        setSharesCache(publish_res);
+      }
+    } else {
+      setSearchKey("");
+    }
+  };
+
+  const handleClickPublishNote = (publishId: string, localId: string) => {
+    const localIndex = contentsCache.findIndex((i) => i.id === localId);
+    if (localIndex !== -1) {
+      router.push(`/post/${localId}`);
+    } else {
+      router.push(`/publish/${localId}`);
+    }
+  };
+
+  const handleSyncPublisToLocal = (localId: string, remoteDate: string) => {
+    const data = JSON.parse(remoteDate || "{}");
+    if (remoteDate && data) {
+      addNote(data);
+      router.push(`/post/${data.id}`);
+    }
+  };
+
+  const handleQuitSpace = async (id: string, roomId: string) => {
+    const res = await fetcher(`/api/collaboration?id=${id}`, {
+      method: "DELETE",
+    });
+
+    if (res && res.code === 200) {
+      toast("Exit space");
+    }
+  };
+
+  const handleCreateSpace = () => {
+    setShowRoomModal(true);
+  };
+
+  const handleToggleCollapse = (tag: string) => {
+    setCategorizedData((prevData) => {
+      const updatedData = { ...prevData };
+      updatedData[tag].forEach((item) => {
+        item.collapsed = !item.collapsed;
+      });
+      return updatedData;
+    });
+  };
+
+  return (
+    <div className="relative">
+      <motion.div
+        animate={controls}
+        className={
+          `${active ? "border-r" : ""}` +
+          " animate group flex h-screen w-[270px] flex-col gap-3 overflow-y-auto border-slate-200/60 py-6 duration-300"
+        }
+      >
+        {active && (
+          <button
+            onClick={showLess}
+            className="absolute -right-4 top-28 z-[10] cursor-pointer rounded-r bg-slate-100 py-2 shadow transition-all hover:bg-slate-200 "
+          >
+            <ChevronLeft className="h-4 w-4 text-slate-400" />
+          </button>
+        )}
+        {!active && (
+          <button
+            onClick={showMore}
+            className="absolute -right-4 top-28 z-[10] cursor-pointer rounded-r bg-slate-100 py-2 shadow transition-all hover:bg-slate-200"
+          >
+            <ChevronRight className="h-4 w-4 text-slate-400" />
+          </button>
+        )}
+
+        <div className="mx-3 flex flex-col gap-2">
+          <SearchInput onChange={handleInputSearch} />
+          <div className="flex items-center justify-between gap-2">
+            <NewPostButton
+              isShowIcon={true}
+              className="h-9 w-full shadow"
+              text="Note"
+              from="post"
+            />
+            <button
+              className="flex h-9 w-full items-center justify-center gap-1 rounded-md bg-cyan-500 px-3 text-center text-sm text-slate-100 shadow transition-all hover:opacity-80"
+              onClick={handleCreateSpace}
+            >
+              <Shapes className="inline h-4 w-4 text-slate-50" /> Space
+            </button>
+          </div>
+        </div>
+
+        <div className="border-b border-slate-200/70" />
+
+        <div className="h-[40%] w-full grow overflow-y-auto px-3">
+          <div
+            className="flex cursor-pointer items-center justify-between"
+            onClick={() => {
+              setOpenHistory(!openHistory);
+            }}
+          >
+            <p className="font-mono text-sm font-semibold text-slate-400">
+              History({contents.length})
+            </p>
+            <button className="rounded bg-slate-100 hover:bg-slate-200">
+              {openHistory ? (
+                <Minus className="h-5 w-5 cursor-pointer p-1 text-slate-500" />
+              ) : (
+                <Plus className="h-5 w-5 cursor-pointer p-1 text-slate-500" />
+              )}
+            </button>
+          </div>
+
+          {openHistory &&
+            categorizedData &&
+            Object.keys(categorizedData).map((tag) => (
+              <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ duration: 0.3 }}
+                key={tag}
+              >
+                <h2
+                  className={
+                    `${
+                      categorizedData[tag].findIndex((i) => i.id === id) !== -1
+                        ? "text-cyan-500"
+                        : "text-gray-500"
+                    }` +
+                    " flex cursor-pointer items-center justify-start gap-1 pt-2 font-mono text-xs font-semibold transition-all  hover:text-slate-300"
+                  }
+                  onClick={() => handleToggleCollapse(tag)}
+                >
+                  {categorizedData[tag][0].collapsed ? (
+                    <FolderOpen className="h-3 w-3 text-slate-400" />
+                  ) : (
+                    <FolderClosed className="h-3 w-3 text-slate-400" />
+                  )}
+                  {tag || "Uncategorized"}
+                </h2>
+                {categorizedData[tag][0].collapsed &&
+                  categorizedData[tag].map((item) => (
+                    <div
+                      className="group/item my-2 mb-2 flex items-center justify-between gap-2 pl-4 transition-all"
+                      key={item.id}
+                    >
+                      {showEditInput && id === item.id ? (
+                        <input
+                          ref={editTitleRef}
+                          type="text"
+                          className="rounded border px-2 py-1 text-xs text-slate-500"
+                          defaultValue={item.title}
+                          placeholder="Enter note title"
+                        />
+                      ) : showEditCate && id === item.id ? (
+                        <input
+                          ref={editCateRef}
+                          type="text"
+                          className="rounded border px-2 py-1 text-xs text-slate-500"
+                          defaultValue={item.tag}
+                          placeholder="Enter note category"
+                        />
+                      ) : (
+                        <p
+                          className={
+                            "flex cursor-pointer items-center justify-start gap-2 truncate font-mono text-xs hover:opacity-80 " +
+                            `${
+                              id === item.id ? "text-cyan-500" : "text-gray-500"
+                            }`
+                          }
+                          onClick={() => router.push(`/post/${item.id}`)}
+                        >
+                          {item.title.length > 0 ? item.title : "Untitled"}
+                        </p>
+                      )}
+
+                      <div className="ml-auto hidden group-hover/item:block">
+                        <div className="flex items-center justify-end gap-2">
+                          {id === item.id && (
+                            <button onClick={() => handleEditTitle(item.id)}>
+                              {showEditInput ? (
+                                <Check className="h-4 w-4 text-green-500" />
+                              ) : (
+                                <Edit className="h-4 w-4 text-slate-300 hover:text-slate-500" />
+                              )}
+                            </button>
+                          )}
+                          {id === item.id && (
+                            <button onClick={() => handleEditCate(item.id)}>
+                              {showEditCate ? (
+                                <Check className="h-4 w-4 text-green-500" />
+                              ) : (
+                                <FolderEdit className="h-4 w-4 text-slate-300 hover:text-slate-500" />
+                              )}
+                            </button>
+                          )}
+                          {id !== item.id && (
+                            <button onClick={() => handleDeleteItem(item.id)}>
+                              <Trash2 className="h-4 w-4 text-slate-300" />
+                            </button>
+                          )}
+                        </div>
+                      </div>
+
+                      {sharesCache.length > 0 &&
+                        sharesCache.find((i) => i.localId === item.id) && (
+                          <Link href={`/publish/${item.id}`} target="_blank">
+                            <ExternalLink className="h-4 w-4 text-cyan-500" />
+                          </Link>
+                        )}
+                    </div>
+                  ))}
+              </motion.div>
+            ))}
+
+          {sharesCache.length > 0 && (
+            <>
+              <div
+                className="mt-3 flex cursor-pointer items-center justify-between border-t border-slate-200/50 pt-3"
+                onClick={() => {
+                  setOpenShares(!openShares);
+                }}
+              >
+                <p className="font-mono text-sm font-semibold text-slate-400">
+                  Published({shares.data.length})
+                </p>
+                <button className="rounded bg-slate-100 hover:bg-slate-200">
+                  {openShares ? (
+                    <Minus className="h-5 w-5 cursor-pointer p-1 text-slate-500" />
+                  ) : (
+                    <Plus className="h-5 w-5 cursor-pointer p-1 text-slate-500" />
+                  )}
+                </button>
+              </div>
+
+              {openShares &&
+                sharesCache.map((item) => (
+                  <motion.div
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    transition={{ duration: 0.3 }}
+                    key={item.id}
+                    className="group/item mt-2 flex items-center justify-between"
+                  >
+                    <button
+                      onClick={() =>
+                        handleClickPublishNote(item.id, item.localId)
+                      }
+                      className={
+                        `${
+                          item.localId === id
+                            ? "text-cyan-500"
+                            : "text-gray-500"
+                        }` + " truncate font-mono text-xs hover:opacity-80"
+                      }
+                    >
+                      {JSON.parse(item.data || "{}").title || "Untitled"}
+                    </button>
+
+                    <button
+                      className="ml-auto hidden group-hover/item:block"
+                      onClick={() => handleDeletePublicItem(item.id)}
+                    >
+                      <Trash2 className="h-4 w-4 text-slate-300" />
+                    </button>
+
+                    {contentsCache.findIndex((i) => i.id === item.localId) ===
+                      -1 && (
+                      <Tooltip
+                        content={
+                          <div className="w-64 px-3 py-2 text-sm text-slate-400">
+                            <h1 className="mb-2 font-semibold text-slate-500">
+                              Cross device sync note
+                            </h1>
+                            <p>
+                              Sync your notes from other devices to the current
+                              device (history list).
+                            </p>
+                          </div>
+                        }
+                        fullWidth={false}
+                      >
+                        <button
+                          className="ml-2"
+                          onClick={() =>
+                            handleSyncPublisToLocal(item.localId, item.data)
+                          }
+                        >
+                          <DownloadCloud className="h-4 w-4 text-slate-400" />
+                        </button>
+                      </Tooltip>
+                    )}
+                  </motion.div>
+                ))}
+            </>
+          )}
+
+          {roomsCache.length > 0 && (
+            <>
+              <div
+                className="mt-3 flex cursor-pointer items-center justify-between border-t border-slate-200/50 pt-3"
+                onClick={() => {
+                  setOpenRooms(!openRooms);
+                }}
+              >
+                <p className="font-mono text-sm font-semibold text-slate-400">
+                  Collaborations({rooms.data.length})
+                </p>
+                <button className="rounded bg-slate-100 hover:bg-slate-200">
+                  {openRooms ? (
+                    <Minus className="h-5 w-5 cursor-pointer p-1 text-slate-500" />
+                  ) : (
+                    <Plus className="h-5 w-5 cursor-pointer p-1 text-slate-500" />
+                  )}
+                </button>
+              </div>
+
+              {openRooms &&
+                roomsCache.map((item) => (
+                  <motion.div
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    transition={{ duration: 0.3 }}
+                    key={item.id}
+                    className="group/item mt-2 flex items-center justify-between"
+                  >
+                    <button
+                      onClick={() =>
+                        router.push(`/post/${item.localId}?work=${item.roomId}`)
+                      }
+                      className={
+                        `${
+                          item.localId === id
+                            ? "text-cyan-500"
+                            : "text-gray-500"
+                        }` + " truncate font-mono text-xs hover:opacity-80"
+                      }
+                    >
+                      {item.title}
+                    </button>
+
+                    <button
+                      className="ml-auto hidden group-hover/item:block"
+                      onClick={() => handleQuitSpace(item.id, item.roomId)}
+                    >
+                      <Trash2 className="h-4 w-4 text-slate-300" />
+                    </button>
+                  </motion.div>
+                ))}
+            </>
+          )}
+        </div>
+
+        <div className="border-b border-slate-200/70" />
+
+        <Suspense>
+          {session ? (
+            <div className="-mb-2 text-center">
+              <UserDropdown
+                session={session}
+                setShowEditModal={setShowEditModal}
+              />
+            </div>
+          ) : (
+            <button
+              className="mx-3 mt-3 rounded-md border border-slate-800 bg-slate-800 px-3 py-2 text-sm font-semibold text-slate-100 transition-all hover:bg-slate-600"
+              onClick={() => setShowSignInModal(true)}
+            >
+              Sign in for more
+            </button>
+          )}
+        </Suspense>
+
+        <div className="-mb-1 flex items-center justify-center text-sm">
+          <Link className="hover:text-slate-300" href="/">
+            Home
+          </Link>
+          <span className="mx-2">‣</span>
+          <Link
+            className="hover:text-slate-300"
+            href="/document"
+            target="_blank"
+          >
+            Document
+          </Link>
+          <span className="mx-2">‣</span>
+          <Link className="hover:text-slate-300" href="/pricing">
+            Pricing
+          </Link>
+        </div>
+      </motion.div>
+    </div>
+  );
+}

apps/web/app/post/[id]/wrapper.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import Editor from "@/app/post/[id]/editor";
+import Sidebar from "@/app/post/[id]/sider";
+import { ContentItem } from "@/lib/types/note";
+import { noteTable } from "@/store/db.model";
+import { useCreatRoomModal } from "@/ui/layout/create-room-modal";
+import { useEditNicknameModal } from "@/ui/layout/edit-nickname-modal";
+import { useSignInModal } from "@/ui/layout/sign-in-modal";
+import { useLiveQuery } from "dexie-react-hooks";
+import { Session } from "next-auth";
+
+export default function Wrapper({
+  id,
+  session,
+}: {
+  id: string;
+  session: Session | null;
+}) {
+  const { EditModal, setShowEditModal } = useEditNicknameModal(session);
+  const { SignInModal, setShowSignInModal } = useSignInModal();
+  const { RoomModal, setShowRoomModal } = useCreatRoomModal(session, "", id);
+
+  const notes = useLiveQuery<ContentItem[]>(() =>
+    noteTable.orderBy("updated_at").reverse().toArray(),
+  );
+
+  return (
+    <>
+      <SignInModal />
+      <EditModal />
+      <RoomModal />
+
+      <div className="flex">
+        {notes && (
+          <>
+            <Sidebar
+              id={id}
+              session={session}
+              contents={notes}
+              setShowEditModal={setShowEditModal}
+              setShowSignInModal={setShowSignInModal}
+              setShowRoomModal={setShowRoomModal}
+            />
+            <Editor
+              id={id}
+              session={session}
+              contents={notes}
+              setShowRoomModal={setShowRoomModal}
+            />
+          </>
+        )}
+      </div>
+    </>
+  );
+}