release 0.3.4

2023-11-10 14:59:47 +08:00
parent 2b456637e9
commit 602f2059fd
161 changed files with 9921 additions and 347 deletions
--- a/apps/web/app/api/auth/[...nextauth]/route.ts
+++ b/apps/web/app/api/auth/[...nextauth]/route.ts
@@ -0,0 +1,106 @@
+import NextAuth, { NextAuthOptions, Theme } from "next-auth";
+import { PrismaAdapter } from "@next-auth/prisma-adapter";
+import prisma from "@/lib/db/prisma";
+import EmailProvider from "next-auth/providers/email";
+import GithubProvider from "next-auth/providers/github";
+import GoogleProvider from "next-auth/providers/google";
+import { createTransport } from "nodemailer";
+
+export const authOptions: NextAuthOptions = {
+  adapter: PrismaAdapter(prisma),
+  providers: [
+    GithubProvider({
+      clientId: process.env.GITHUB_ID as string,
+      clientSecret: process.env.GITHUB_SECRET as string,
+    }),
+    GoogleProvider({
+      clientId: process.env.GOOGLE_CLIENT_ID as string,
+      clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
+    }),
+    EmailProvider({
+      server: process.env.EMAIL_SERVER,
+      from: process.env.EMAIL_FROM,
+      maxAge: 10 * 60, // 10min, 邮箱链接失效时间，默认24小时
+      async sendVerificationRequest({
+        identifier: email,
+        url,
+        provider,
+        theme,
+      }) {
+        const { host } = new URL(url);
+        const transport = createTransport(provider.server);
+        const result = await transport.sendMail({
+          to: email,
+          from: provider.from,
+          subject: `You are logging in to Inke`,
+          text: text({ url, host }),
+          html: html({ url, host, theme }),
+        });
+        const failed = result.rejected.concat(result.pending).filter(Boolean);
+        if (failed.length) {
+          throw new Error(`Email(s) (${failed.join(", ")}) could not be sent`);
+        }
+      },
+    }),
+  ],
+};
+
+const handler = NextAuth(authOptions);
+
+export { handler as GET, handler as POST };
+
+/**
+ *使用HTML body 代替正文内容
+ */
+function html(params: { url: string; host: string; theme: Theme }) {
+  const { url, host, theme } = params;
+
+  const escapedHost = host.replace(/\./g, "&#8203;.");
+
+  const brandColor = theme.brandColor || "#346df1";
+  const color = {
+    background: "#f9f9f9",
+    text: "#444",
+    mainBackground: "#fff",
+    buttonBackground: brandColor,
+    buttonBorder: brandColor,
+    buttonText: theme.buttonText || "#fff",
+  };
+
+  return `
+  <body style="background: ${color.background};">
+    <table width="100%" border="0" cellspacing="10" cellpadding="0"
+      style="background: ${color.mainBackground}; max-width: 600px; margin: auto; border-radius: 10px;">
+      <tr>
+        <td align="center"
+          style="padding: 10px 0px; font-size: 22px; font-family: Helvetica, Arial, sans-serif; color: ${color.text};">
+          <strong>Welcome to Inke</strong> 🎉
+        </td>
+      </tr>
+      <tr>
+        <td align="center" style="padding: 5px 0;">
+          <table border="0" cellspacing="0" cellpadding="0">
+            <tr>
+              <td align="center" style="border-radius: 5px;" bgcolor="${color.buttonBackground}"><a href="${url}"
+                  target="_blank"
+                  style="font-size: 18px; font-family: Helvetica, Arial, sans-serif; color: ${color.buttonText}; text-decoration: none; border-radius: 5px; padding: 10px 20px; border: 1px solid ${color.buttonBorder}; display: inline-block; font-weight: bold;">Sign
+                  in now</a></td>
+            </tr>
+          </table>
+        </td>
+      </tr>
+      <tr>
+        <td align="left"
+          style="padding: 0px 0px 10px 0px; font-size: 16px; line-height: 22px; font-family: Helvetica, Arial, sans-serif; color: ${color.text};">
+          Button click without response? Try open this <a href="${url}" target="_blank">link</a> in your browser. If you did not request this email you can safely ignore it.
+        </td>
+      </tr>
+    </table>
+  </body>
+  `;
+}
+
+/** 不支持HTML 的邮件客户端会显示下面的文本信息 */
+function text({ url, host }: { url: string; host: string }) {
+  return `Welcome to Inke! This is a magic link, click on it to log in ${url}\n`;
+}
--- a/apps/web/app/api/collaboration/count/route.ts
+++ b/apps/web/app/api/collaboration/count/route.ts
@@ -0,0 +1,38 @@
+import { NextRequest, NextResponse } from "next/server";
+import { findCollaborationInviteCount } from "@/lib/db/collaboration";
+
+export async function GET(
+  req: NextRequest,
+  { params }: { params: Record<string, string | string | undefined[]> },
+) {
+  try {
+    const { searchParams } = new URL(req.url);
+    const id = searchParams.get("id");
+    if (!id || id === "undefined") {
+      return NextResponse.json({
+        code: 403,
+        msg: "Empty roomId",
+        data: null,
+      });
+    }
+
+    const res = await findCollaborationInviteCount(id);
+    if (res) {
+      return NextResponse.json({
+        code: 200,
+        msg: "Successed!",
+        data: res,
+      });
+    }
+
+    return NextResponse.json({
+      code: 404,
+      msg: "Not joined the collaboration space",
+      data: null,
+    });
+  } catch (error) {
+    return NextResponse.json(error);
+  }
+}
+
+export const dynamic = "force-dynamic";
--- a/apps/web/app/api/collaboration/id/route.ts
+++ b/apps/web/app/api/collaboration/id/route.ts
@@ -0,0 +1,45 @@
+import { getServerSession } from "next-auth";
+import { NextRequest, NextResponse } from "next/server";
+import { authOptions } from "../../auth/[...nextauth]/route";
+import { getUserByEmail } from "@/lib/db/user";
+import {
+  findCollaborationByDBId,
+  findCollaborationInviteCount,
+} from "@/lib/db/collaboration";
+
+// /invite/:id 邀请页调用，查询此邀请详细信息，不需要登录，点击“加入协作”后才需要鉴权
+export async function GET(
+  req: NextRequest,
+  { params }: { params: Record<string, string | string | undefined[]> },
+) {
+  try {
+    const { searchParams } = new URL(req.url);
+    const id = searchParams.get("id");
+    if (!id) {
+      return NextResponse.json({
+        code: 403,
+        msg: "Empty roomId",
+        data: null,
+      });
+    }
+
+    const res = await findCollaborationByDBId(id);
+    if (res) {
+      return NextResponse.json({
+        code: 200,
+        msg: "Successed!",
+        data: res,
+      });
+    }
+
+    return NextResponse.json({
+      code: 404,
+      msg: "Not joined the collaboration space",
+      data: null,
+    });
+  } catch (error) {
+    return NextResponse.json(error);
+  }
+}
+
+export const dynamic = "force-dynamic";
--- a/apps/web/app/api/collaboration/local-id/route.ts
+++ b/apps/web/app/api/collaboration/local-id/route.ts
@@ -0,0 +1,65 @@
+import { getServerSession } from "next-auth";
+import { NextRequest, NextResponse } from "next/server";
+import { authOptions } from "../../auth/[...nextauth]/route";
+import { getUserByEmail } from "@/lib/db/user";
+import {
+  findCollaborationByDBId,
+  findCollaborationBylocalId,
+} from "@/lib/db/collaboration";
+
+// /invite/:id 邀请页调用，查询此邀请详细信息，不需要登录，点击“加入协作”后才需要鉴权
+export async function GET(
+  req: NextRequest,
+  { params }: { params: Record<string, string | string | undefined[]> },
+) {
+  try {
+    const session = await getServerSession(authOptions);
+    if (!session?.user) {
+      return NextResponse.json({
+        code: 401,
+        msg: "Unauthorized! Please login",
+        data: null,
+      });
+    }
+
+    const user = await getUserByEmail(session.user.email);
+
+    if (!user) {
+      return NextResponse.json({
+        code: 403,
+        msg: "Something wrong",
+        data: null,
+      });
+    }
+
+    const { searchParams } = new URL(req.url);
+    const id = searchParams.get("localId");
+    if (!id) {
+      return NextResponse.json({
+        code: 403,
+        msg: "Empty id",
+        data: null,
+      });
+    }
+
+    const res = await findCollaborationBylocalId(id, user.id);
+
+    if (res) {
+      return NextResponse.json({
+        code: 200,
+        msg: "Successed!",
+        data: res,
+      });
+    }
+
+    return NextResponse.json({
+      code: 404,
+      msg: "Not joined collaboration",
+      data: null,
+    });
+  } catch (error) {
+    return NextResponse.json(error);
+  }
+}
+
+export const dynamic = "force-dynamic";
--- a/apps/web/app/api/collaboration/room/route.ts
+++ b/apps/web/app/api/collaboration/room/route.ts
@@ -0,0 +1,107 @@
+import { getServerSession } from "next-auth";
+import { NextRequest, NextResponse } from "next/server";
+import { authOptions } from "../../auth/[...nextauth]/route";
+import { getUserByEmail } from "@/lib/db/user";
+import { findCollaborationByRoomId } from "@/lib/db/collaboration";
+
+// post页面获取详情时调用，需要用户id查询是否已经加入，加入才开启协作模式
+export async function GET(
+  req: NextRequest,
+  { params }: { params: Record<string, string | string | undefined[]> },
+) {
+  try {
+    const session = await getServerSession(authOptions);
+    if (!session?.user) {
+      return NextResponse.json({
+        code: 401,
+        msg: "Unauthorized! Please login first",
+        data: null,
+      });
+    }
+
+    const user = await getUserByEmail(session.user.email);
+
+    if (!user) {
+      return NextResponse.json({
+        code: 403,
+        msg: "Not found user",
+        data: null,
+      });
+    }
+
+    const { searchParams } = new URL(req.url);
+    const id = searchParams.get("roomId");
+    if (!id) {
+      return NextResponse.json({
+        code: 403,
+        msg: "Empty roomId",
+        data: null,
+      });
+    }
+
+    // 查询用户是否已经加入了这个协作（已经创建了这个room记录）
+    const res = await findCollaborationByRoomId(id, user.id);
+
+    if (res) {
+      return NextResponse.json({
+        code: 200,
+        msg: "Successed!",
+        data: res,
+      });
+    }
+
+    return NextResponse.json({
+      code: 404,
+      msg: "You haven't joined this collaboration yet",
+      data: null,
+    });
+  } catch (error) {
+    return NextResponse.json({
+      code: 500,
+      msg: error,
+      data: null,
+    });
+  }
+}
+
+export async function POST(
+  req: NextRequest,
+  { params }: { params: Record<string, string | string | undefined[]> },
+) {
+  try {
+    const { roomId } = await req.json();
+
+    if (!roomId) {
+      return NextResponse.json({
+        code: 403,
+        msg: "Empty roomId",
+        data: null,
+      });
+    }
+
+    const res = await findCollaborationByRoomId(roomId);
+
+    if (res) {
+      return NextResponse.json({
+        code: 200,
+        msg: "Successed!",
+        data: res,
+      });
+    }
+
+    return NextResponse.json({
+      code: 404,
+      msg: "Not found",
+      data: null,
+    });
+  } catch (error) {
+    return NextResponse.json({
+      code: 500,
+      msg: error,
+      data: null,
+    });
+  }
+}
+
+// fix error: "DYNAMIC_SERVER_USAGE"
+export const dynamic = "force-dynamic";
--- a/apps/web/app/api/collaboration/route.ts
+++ b/apps/web/app/api/collaboration/route.ts
@@ -0,0 +1,180 @@
+import { getServerSession } from "next-auth";
+import { NextRequest, NextResponse } from "next/server";
+import { authOptions } from "../auth/[...nextauth]/route";
+import { getUserByEmail } from "@/lib/db/user";
+import {
+  createCollaboration,
+  deleteCollaborationNote,
+  findCollaborationByRoomId,
+  findUserCollaborations,
+} from "@/lib/db/collaboration";
+
+export async function GET(
+  req: NextRequest,
+  { params }: { params: Record<string, string | string | undefined[]> },
+) {
+  try {
+    const session = await getServerSession(authOptions);
+    if (!session?.user) {
+      return NextResponse.json({
+        code: 401,
+        msg: "Unauthorized! Please login",
+        data: null,
+      });
+    }
+
+    const user = await getUserByEmail(session.user.email);
+
+    if (!user) {
+      return NextResponse.json({
+        code: 403,
+        msg: "Something wrong",
+        data: null,
+      });
+    }
+
+    const res = await findUserCollaborations(user.id);
+
+    if (res) {
+      return NextResponse.json({
+        code: 200,
+        msg: "Successed!",
+        data: res,
+      });
+    }
+
+    return NextResponse.json({
+      code: 404,
+      msg: "Not joined collaboration",
+      data: null,
+    });
+  } catch (error) {
+    return NextResponse.json(error);
+  }
+}
+
+export async function POST(
+  req: NextRequest,
+  { params }: { params: Record<string, string | string | undefined[]> },
+) {
+  try {
+    const session = await getServerSession(authOptions);
+    if (!session?.user) {
+      return NextResponse.json({
+        code: 401,
+        msg: "Unauthorized! Please login",
+        data: null,
+      });
+    }
+
+    const user = await getUserByEmail(session.user.email);
+
+    if (!user) {
+      return NextResponse.json({
+        code: 403,
+        msg: "Something wrong",
+        data: null,
+      });
+    }
+
+    const { localId, roomId, title } = await req.json();
+    if (!localId || !roomId) {
+      return NextResponse.json({
+        code: 405,
+        msg: "Empty params",
+        data: null,
+      });
+    }
+
+    // 判断用户是否已经加入此协作
+    const find_res = await findCollaborationByRoomId(roomId, user.id);
+
+    if (find_res) {
+      return NextResponse.json({
+        code: 301,
+        msg: "Joined! Redirecting...",
+        data: find_res,
+      });
+    }
+
+    // TODO: 限制新建个数
+    // 新建
+    const res = await createCollaboration(user.id, localId, roomId, title);
+
+    if (res) {
+      return NextResponse.json({
+        code: 200,
+        msg: "Successfully！Redirecting...",
+        data: res,
+      });
+    }
+
+    return NextResponse.json({
+      code: 404,
+      msg: "Something wrong",
+      data: null,
+    });
+  } catch (error) {
+    return NextResponse.json({
+      code: 500,
+      msg: error,
+      data: null,
+    });
+  }
+}
+
+export async function DELETE(
+  req: NextRequest,
+  { params }: { params: Record<string, string | string | undefined[]> },
+) {
+  try {
+    const session = await getServerSession(authOptions);
+    if (!session?.user) {
+      return NextResponse.json({
+        code: 401,
+        msg: "Unauthorized! Please login",
+        data: null,
+      });
+    }
+
+    const user = await getUserByEmail(session.user.email);
+
+    if (!user) {
+      return NextResponse.json({
+        code: 403,
+        msg: "Something wrong",
+        data: null,
+      });
+    }
+
+    const { searchParams } = new URL(req.url);
+    const id = searchParams.get("id");
+    if (!id) {
+      return NextResponse.json({
+        code: 403,
+        msg: "Empty id",
+        data: null,
+      });
+    }
+
+    const res = await deleteCollaborationNote(id);
+    if (res) {
+      return NextResponse.json({
+        code: 200,
+        msg: "Successed!",
+        data: res,
+      });
+    }
+
+    return NextResponse.json({
+      code: 404,
+      msg: "Something wrong",
+      data: null,
+    });
+  } catch (error) {
+    return NextResponse.json(error);
+  }
+}
+
+// fix error: "DYNAMIC_SERVER_USAGE"
+export const dynamic = "force-dynamic";
--- a/apps/web/app/api/generate/bot/route.ts
+++ b/apps/web/app/api/generate/bot/route.ts
@@ -0,0 +1,109 @@
+import OpenAI from "openai";
+import { OpenAIStream, StreamingTextResponse } from "ai";
+import { kv } from "@vercel/kv";
+import { Ratelimit } from "@upstash/ratelimit";
+import { getRandomElement } from "@/lib/utils";
+import { Account_Plans } from "../../../../lib/consts";
+
+const api_key = process.env.OPENAI_API_KEY || "";
+const api_keys = process.env.OPENAI_API_KEYs || "";
+
+const openai = new OpenAI({
+  baseURL: process.env.OPENAI_API_PROXY || "https://api.openai.com",
+});
+
+// IMPORTANT! Set the runtime to edge: https://vercel.com/docs/functions/edge-functions/edge-runtime
+export const runtime = "edge";
+
+export async function POST(req: Request): Promise<Response> {
+  try {
+    // Check if the OPENAI_API_KEY is set, if not return 400
+    if (!process.env.OPENAI_API_KEY || process.env.OPENAI_API_KEY === "") {
+      return new Response(
+        "Missing OPENAI_API_KEY – make sure to add it to your .env file.",
+        {
+          status: 400,
+        },
+      );
+    }
+
+    const { prompt, plan, messages, system } = await req.json();
+
+    const planN = Number(plan || "5");
+
+    if (
+      messages &&
+      messages.length > Account_Plans[planN].ai_bot_history_length
+    ) {
+      return new Response("You have reached the history message limit.", {
+        status: 429,
+      });
+    }
+
+    if (process.env.KV_REST_API_URL && process.env.KV_REST_API_TOKEN) {
+      const ip = req.headers.get("x-forwarded-for");
+      const ratelimit = new Ratelimit({
+        redis: kv,
+        limiter: Ratelimit.slidingWindow(
+          Account_Plans[planN].ai_generate_day,
+          "1 d",
+        ),
+      });
+
+      // console.log("plan", planN, Account_Plans[planN], ip);
+
+      const { success, limit, reset, remaining } = await ratelimit.limit(
+        `novel_ratelimit_${ip}`,
+      );
+
+      if (!success) {
+        return new Response(
+          "You have reached your request limit for the day.",
+          {
+            status: 429,
+            headers: {
+              "X-RateLimit-Limit": limit.toString(),
+              "X-RateLimit-Remaining": remaining.toString(),
+              "X-RateLimit-Reset": reset.toString(),
+            },
+          },
+        );
+      }
+    }
+
+    openai.apiKey = getRandomElement(api_keys.split(",")) || api_key;
+
+    const response = await openai.chat.completions.create({
+      model: "gpt-3.5-turbo-16k",
+      messages: [
+        {
+          role: "system",
+          content:
+            "As a note assistant, communicate with users based on the input note content.",
+          // "Do not reply to questions unrelated to the notes. If there are questions unrelated to the notes, please reply 'Please ask questions related to the notes'",
+        },
+        {
+          role: "system",
+          content: `Note content: \n${system}`,
+        },
+        ...messages,
+      ],
+      temperature: 0.7,
+      top_p: 1,
+      frequency_penalty: 0,
+      presence_penalty: 0,
+      stream: true,
+      n: 1,
+    });
+
+    // Convert the response into a friendly text-stream
+    const stream = OpenAIStream(response);
+
+    // Respond with the stream
+    return new StreamingTextResponse(stream);
+  } catch (error) {
+    return new Response(`Server error\n${error}`, {
+      status: 500,
+    });
+  }
+}
--- a/apps/web/app/api/generate/continue/route.ts
+++ b/apps/web/app/api/generate/continue/route.ts
@@ -0,0 +1,99 @@
+import OpenAI from "openai";
+import { OpenAIStream, StreamingTextResponse } from "ai";
+import { kv } from "@vercel/kv";
+import { Ratelimit } from "@upstash/ratelimit";
+import { getRandomElement } from "@/lib/utils";
+import { Account_Plans } from "../../../../lib/consts";
+
+const api_key = process.env.OPENAI_API_KEY || "";
+const api_keys = process.env.OPENAI_API_KEYs || "";
+
+const openai = new OpenAI();
+
+// IMPORTANT! Set the runtime to edge: https://vercel.com/docs/functions/edge-functions/edge-runtime
+export const runtime = "edge";
+
+export async function POST(req: Request): Promise<Response> {
+  try {
+    // Check if the OPENAI_API_KEY is set, if not return 400
+    if (!process.env.OPENAI_API_KEY || process.env.OPENAI_API_KEY === "") {
+      return new Response(
+        "Missing OPENAI_API_KEY – make sure to add it to your .env file.",
+        {
+          status: 400,
+        },
+      );
+    }
+
+    const { prompt, plan } = await req.json();
+
+    const planN = Number(plan || "5");
+
+    if (process.env.KV_REST_API_URL && process.env.KV_REST_API_TOKEN) {
+      const ip = req.headers.get("x-forwarded-for");
+      const ratelimit = new Ratelimit({
+        redis: kv,
+        limiter: Ratelimit.slidingWindow(
+          Account_Plans[planN].ai_generate_day,
+          "1 d",
+        ),
+      });
+
+      // console.log("plan", planN, Account_Plans[planN], ip);
+
+      const { success, limit, reset, remaining } = await ratelimit.limit(
+        `novel_ratelimit_${ip}`,
+      );
+
+      if (!success) {
+        return new Response(
+          "You have reached your request limit for the day.",
+          {
+            status: 429,
+            headers: {
+              "X-RateLimit-Limit": limit.toString(),
+              "X-RateLimit-Remaining": remaining.toString(),
+              "X-RateLimit-Reset": reset.toString(),
+            },
+          },
+        );
+      }
+    }
+
+    openai.apiKey = getRandomElement(api_keys.split(",")) || api_key;
+
+    const response = await openai.chat.completions.create({
+      model: "gpt-3.5-turbo-16k",
+      messages: [
+        {
+          role: "system",
+          content:
+            "You are an AI writing assistant that continues existing text based on context from prior text." +
+            "Give more weight/priority to the later characters than the beginning ones. " +
+            `Limit your response to no more than ${Account_Plans[planN].ai_generate_chars} characters, but make sure to construct complete sentences.`,
+          // "Use Markdown formatting when appropriate.",
+        },
+        {
+          role: "user",
+          content: prompt,
+        },
+      ],
+      temperature: 0.7,
+      top_p: 1,
+      frequency_penalty: 0,
+      presence_penalty: 0,
+      stream: true,
+      n: 1,
+    });
+
+    // Convert the response into a friendly text-stream
+    const stream = OpenAIStream(response);
+
+    // Respond with the stream
+    return new StreamingTextResponse(stream);
+  } catch (error) {
+    return new Response("Server error", {
+      status: 500,
+    });
+  }
+}
--- a/apps/web/app/api/generate/edit/route.ts
+++ b/apps/web/app/api/generate/edit/route.ts
@@ -0,0 +1,101 @@
+import OpenAI from "openai";
+import { OpenAIStream, StreamingTextResponse } from "ai";
+import { kv } from "@vercel/kv";
+import { Ratelimit } from "@upstash/ratelimit";
+import { getRandomElement } from "@/lib/utils";
+import { Account_Plans } from "../../../../lib/consts";
+
+const api_key = process.env.OPENAI_API_KEY || "";
+const api_keys = process.env.OPENAI_API_KEYs || "";
+
+const openai = new OpenAI();
+
+// IMPORTANT! Set the runtime to edge: https://vercel.com/docs/functions/edge-functions/edge-runtime
+export const runtime = "edge";
+
+export async function POST(req: Request): Promise<Response> {
+  try {
+    // Check if the OPENAI_API_KEY is set, if not return 400
+    if (!process.env.OPENAI_API_KEY || process.env.OPENAI_API_KEY === "") {
+      return new Response(
+        "Missing OPENAI_API_KEY – make sure to add it to your .env file.",
+        {
+          status: 400,
+        },
+      );
+    }
+
+    const { prompt, plan } = await req.json();
+
+    const planN = Number(plan || "5");
+
+    if (process.env.KV_REST_API_URL && process.env.KV_REST_API_TOKEN) {
+      const ip = req.headers.get("x-forwarded-for");
+      const ratelimit = new Ratelimit({
+        redis: kv,
+        limiter: Ratelimit.slidingWindow(
+          Account_Plans[planN].ai_generate_day,
+          "1 d",
+        ),
+      });
+
+      // console.log("plan", planN, Account_Plans[planN], ip);
+
+      const { success, limit, reset, remaining } = await ratelimit.limit(
+        `novel_ratelimit_${ip}`,
+      );
+
+      if (!success) {
+        return new Response(
+          "You have reached your request limit for the day.",
+          {
+            status: 429,
+            headers: {
+              "X-RateLimit-Limit": limit.toString(),
+              "X-RateLimit-Remaining": remaining.toString(),
+              "X-RateLimit-Reset": reset.toString(),
+            },
+          },
+        );
+      }
+    }
+
+    openai.apiKey = getRandomElement(api_keys.split(",")) || api_key;
+
+    const response = await openai.chat.completions.create({
+      model: "gpt-3.5-turbo-16k",
+      messages: [
+        {
+          role: "system",
+          content: `I hope you can take on roles such as spell proofreading and rhetorical improvement, 
+           or other roles related to text editing, optimization, and abbreviation. I will 
+           communicate with you in any language, and you will recognize the language. Please only answer the corrected and improved parts, and 
+           do not write explanations.
+           Limit your response to no more than ${Account_Plans[planN].ai_generate_chars} characters, 
+           but make sure to construct complete sentences.`,
+          // "Use Markdown formatting when appropriate.",
+        },
+        {
+          role: "user",
+          content: prompt,
+        },
+      ],
+      temperature: 0.7,
+      top_p: 1,
+      frequency_penalty: 0,
+      presence_penalty: 0,
+      stream: true,
+      n: 1,
+    });
+
+    // Convert the response into a friendly text-stream
+    const stream = OpenAIStream(response);
+
+    // Respond with the stream
+    return new StreamingTextResponse(stream);
+  } catch (error) {
+    return new Response("Server error", {
+      status: 500,
+    });
+  }
+}
--- a/apps/web/app/api/generate/route.ts
+++ b/apps/web/app/api/generate/route.ts
@@ -1,81 +0,0 @@
-import OpenAI from "openai";
-import { OpenAIStream, StreamingTextResponse } from "ai";
-import { kv } from "@vercel/kv";
-import { Ratelimit } from "@upstash/ratelimit";
-
-// Create an OpenAI API client (that's edge friendly!)
-const openai = new OpenAI({
-  apiKey: process.env.OPENAI_API_KEY || "",
-});
-
-// IMPORTANT! Set the runtime to edge: https://vercel.com/docs/functions/edge-functions/edge-runtime
-export const runtime = "edge";
-
-export async function POST(req: Request): Promise<Response> {
-  // Check if the OPENAI_API_KEY is set, if not return 400
-  if (!process.env.OPENAI_API_KEY || process.env.OPENAI_API_KEY === "") {
-    return new Response(
-      "Missing OPENAI_API_KEY – make sure to add it to your .env file.",
-      {
-        status: 400,
-      },
-    );
-  }
-  if (
-    process.env.NODE_ENV != "development" &&
-    process.env.KV_REST_API_URL &&
-    process.env.KV_REST_API_TOKEN
-  ) {
-    const ip = req.headers.get("x-forwarded-for");
-    const ratelimit = new Ratelimit({
-      redis: kv,
-      limiter: Ratelimit.slidingWindow(50, "1 d"),
-    });
-
-    const { success, limit, reset, remaining } = await ratelimit.limit(
-      `novel_ratelimit_${ip}`,
-    );
-
-    if (!success) {
-      return new Response("You have reached your request limit for the day.", {
-        status: 429,
-        headers: {
-          "X-RateLimit-Limit": limit.toString(),
-          "X-RateLimit-Remaining": remaining.toString(),
-          "X-RateLimit-Reset": reset.toString(),
-        },
-      });
-    }
-  }
-
-  let { prompt } = await req.json();
-
-  const response = await openai.chat.completions.create({
-    model: "gpt-3.5-turbo",
-    messages: [
-      {
-        role: "system",
-        content:
-          "You are an AI writing assistant that continues existing text based on context from prior text. " +
-          "Give more weight/priority to the later characters than the beginning ones. " +
-          "Limit your response to no more than 200 characters, but make sure to construct complete sentences.",
-      },
-      {
-        role: "user",
-        content: prompt,
-      },
-    ],
-    temperature: 0.7,
-    top_p: 1,
-    frequency_penalty: 0,
-    presence_penalty: 0,
-    stream: true,
-    n: 1,
-  });
-
-  // Convert the response into a friendly text-stream
-  const stream = OpenAIStream(response);
-
-  // Respond with the stream
-  return new StreamingTextResponse(stream);
-}
--- a/apps/web/app/api/generate/translate/route.ts
+++ b/apps/web/app/api/generate/translate/route.ts
@@ -0,0 +1,96 @@
+import OpenAI from "openai";
+import { OpenAIStream, StreamingTextResponse } from "ai";
+import { kv } from "@vercel/kv";
+import { Ratelimit } from "@upstash/ratelimit";
+import { getRandomElement } from "@/lib/utils";
+import { Account_Plans } from "../../../../lib/consts";
+
+const api_key = process.env.OPENAI_API_KEY || "";
+const api_keys = process.env.OPENAI_API_KEYs || "";
+
+const openai = new OpenAI();
+
+// IMPORTANT! Set the runtime to edge: https://vercel.com/docs/functions/edge-functions/edge-runtime
+export const runtime = "edge";
+
+export async function POST(req: Request): Promise<Response> {
+  try {
+    // Check if the OPENAI_API_KEY is set, if not return 400
+    if (!process.env.OPENAI_API_KEY || process.env.OPENAI_API_KEY === "") {
+      return new Response(
+        "Missing OPENAI_API_KEY – make sure to add it to your .env file.",
+        {
+          status: 400,
+        },
+      );
+    }
+
+    const { prompt, plan } = await req.json();
+
+    const planN = Number(plan || "5");
+
+    if (process.env.KV_REST_API_URL && process.env.KV_REST_API_TOKEN) {
+      const ip = req.headers.get("x-forwarded-for");
+      const ratelimit = new Ratelimit({
+        redis: kv,
+        limiter: Ratelimit.slidingWindow(
+          Account_Plans[planN].ai_generate_day,
+          "1 d",
+        ),
+      });
+
+      // console.log("plan", planN, Account_Plans[planN], ip);
+
+      const { success, limit, reset, remaining } = await ratelimit.limit(
+        `novel_ratelimit_${ip}`,
+      );
+
+      if (!success) {
+        return new Response(
+          "You have reached your request limit for the day.",
+          {
+            status: 429,
+            headers: {
+              "X-RateLimit-Limit": limit.toString(),
+              "X-RateLimit-Remaining": remaining.toString(),
+              "X-RateLimit-Reset": reset.toString(),
+            },
+          },
+        );
+      }
+    }
+
+    openai.apiKey = getRandomElement(api_keys.split(",")) || api_key;
+
+    const response = await openai.chat.completions.create({
+      model: "gpt-3.5-turbo-16k",
+      messages: [
+        {
+          role: "system",
+          content:
+            "I hope you can play the role of translator and spell proofreader. I will communicate with you in any language, and you will recognize the language and translate it to answer me.",
+        },
+        {
+          role: "user",
+          content: prompt,
+        },
+      ],
+      temperature: 0.7,
+      top_p: 1,
+      frequency_penalty: 0,
+      presence_penalty: 0,
+      stream: true,
+      n: 1,
+    });
+
+    // Convert the response into a friendly text-stream
+    const stream = OpenAIStream(response);
+
+    // Respond with the stream
+    return new StreamingTextResponse(stream);
+  } catch (error) {
+    return new Response("Server error", {
+      status: 500,
+    });
+  }
+}
--- a/apps/web/app/api/share/all/route.ts
+++ b/apps/web/app/api/share/all/route.ts
@@ -0,0 +1,51 @@
+import { getServerSession } from "next-auth";
+import { NextRequest, NextResponse } from "next/server";
+import { authOptions } from "../../auth/[...nextauth]/route";
+import { getUserByEmail } from "@/lib/db/user";
+import { findUserShares } from "@/lib/db/share";
+
+export async function GET(
+  req: NextRequest,
+  { params }: { params: Record<string, string | string | undefined[]> },
+) {
+  try {
+    const session = await getServerSession(authOptions);
+    if (!session?.user) {
+      return NextResponse.json({
+        code: 401,
+        msg: "UnAuth",
+        data: null,
+      });
+    }
+
+    const user = await getUserByEmail(session.user.email);
+
+    if (!user) {
+      return NextResponse.json({
+        code: 403,
+        msg: "Something wrong",
+        data: null,
+      });
+    }
+
+    const res = await findUserShares(user.id);
+
+    if (res) {
+      return NextResponse.json({
+        code: 200,
+        msg: "",
+        data: res,
+      });
+    }
+
+    return NextResponse.json({
+      code: 404,
+      msg: "Something wrong",
+      data: null,
+    });
+  } catch (error) {
+    return NextResponse.json(error);
+  }
+}
+
+export const dynamic = "force-dynamic";
--- a/apps/web/app/api/share/route.ts
+++ b/apps/web/app/api/share/route.ts
@@ -0,0 +1,168 @@
+import { getServerSession } from "next-auth";
+import { NextRequest, NextResponse } from "next/server";
+import { authOptions } from "../auth/[...nextauth]/route";
+import { getUserByEmail } from "@/lib/db/user";
+import {
+  createShareNote,
+  deleteShareNote,
+  findShareByLocalId,
+  findUserSharesCount,
+  updateShareClick,
+  updateShareKeeps,
+  updateShareNote,
+} from "@/lib/db/share";
+import { Account_Plans } from "@/lib/consts";
+
+export async function GET(
+  req: NextRequest,
+  { params }: { params: Record<string, string | string | undefined[]> },
+) {
+  try {
+    const { searchParams } = new URL(req.url);
+    const id = searchParams.get("id");
+    if (!id) {
+      return NextResponse.json({
+        code: 403,
+        msg: "Empty id",
+        data: null,
+      });
+    }
+
+    const res = await findShareByLocalId(id);
+
+    if (res) {
+      await updateShareClick(res.id, res.click); // 数据库id
+      return NextResponse.json({
+        code: 200,
+        msg: "Successed!",
+        data: res,
+      });
+    }
+
+    return NextResponse.json({
+      code: 404,
+      msg: "Something wrong",
+      data: null,
+    });
+  } catch (error) {
+    return NextResponse.json(error);
+  }
+}
+
+export async function POST(
+  req: NextRequest,
+  { params }: { params: Record<string, string | string | undefined[]> },
+) {
+  try {
+    const session = await getServerSession(authOptions);
+    if (!session?.user) {
+      return NextResponse.json({
+        code: 401,
+        msg: "Unauthorized! Please login",
+        data: null,
+      });
+    }
+
+    const user = await getUserByEmail(session.user.email);
+
+    if (!user) {
+      return NextResponse.json({
+        code: 403,
+        msg: "Something wrong",
+        data: null,
+      });
+    }
+
+    const { data } = await req.json();
+    if (!data) {
+      return NextResponse.json({
+        code: 405,
+        msg: "Empty data",
+        data: null,
+      });
+    }
+
+    const find_share_count = await findUserSharesCount(user.id);
+
+    if (
+      find_share_count >= Account_Plans[Number(user.plan)].note_upload_count
+    ) {
+      return NextResponse.json({
+        code: 429,
+        msg: "You have exceeded the maximum number of uploads, please upgrade your plan.",
+        data: null,
+      });
+    }
+
+    // 必需要用户ID
+    const find_res = await findShareByLocalId(data.id, user.id);
+
+    if (find_res) {
+      const update_res = await updateShareNote(data, find_res.id);
+      return NextResponse.json({
+        code: 200,
+        msg: "Updated!",
+        data: update_res,
+      });
+    }
+
+    const res = await createShareNote(data, user.id);
+
+    if (res) {
+      return NextResponse.json({
+        code: 200,
+        msg: "Successed!",
+        data: res,
+      });
+    }
+
+    return NextResponse.json({
+      code: 404,
+      msg: "Something wrong",
+      data: null,
+    });
+  } catch (error) {
+    return NextResponse.json({
+      code: 500,
+      msg: error,
+      data: null,
+    });
+  }
+}
+
+export async function DELETE(
+  req: NextRequest,
+  { params }: { params: Record<string, string | string | undefined[]> },
+) {
+  try {
+    const { searchParams } = new URL(req.url);
+    const id = searchParams.get("id");
+    if (!id) {
+      return NextResponse.json({
+        code: 403,
+        msg: "Empty id",
+        data: null,
+      });
+    }
+
+    const res = await deleteShareNote(id);
+    if (res) {
+      return NextResponse.json({
+        code: 200,
+        msg: "Successed!",
+        data: res,
+      });
+    }
+
+    return NextResponse.json({
+      code: 404,
+      msg: "Something wrong",
+      data: null,
+    });
+  } catch (error) {
+    return NextResponse.json(error);
+  }
+}
+
+// fix error: "DYNAMIC_SERVER_USAGE"
+export const dynamic = "force-dynamic";
--- a/apps/web/app/api/share/update/keep/route.ts
+++ b/apps/web/app/api/share/update/keep/route.ts
@@ -0,0 +1,45 @@
+import { NextRequest, NextResponse } from "next/server";
+import { findShareByDBId, updateShareKeeps } from "@/lib/db/share";
+
+export async function POST(
+  req: NextRequest,
+  { params }: { params: Record<string, string | string | undefined[]> },
+) {
+  try {
+    const { id } = await req.json();
+    if (!id) {
+      return NextResponse.json({
+        code: 405,
+        msg: "Empty id",
+        data: null,
+      });
+    }
+
+    const find_res = await findShareByDBId(id);
+
+    if (find_res) {
+      const res = await updateShareKeeps(id, find_res.keeps);
+
+      return NextResponse.json({
+        code: 200,
+        msg: "success",
+        data: null,
+      });
+    }
+
+    return NextResponse.json({
+      code: 404,
+      msg: "Something wrong",
+      data: null,
+    });
+  } catch (error) {
+    return NextResponse.json({
+      code: 500,
+      msg: error,
+      data: null,
+    });
+  }
+}
+
+// fix error: "DYNAMIC_SERVER_USAGE"
+export const dynamic = "force-dynamic";
--- a/apps/web/app/api/status/route.ts
+++ b/apps/web/app/api/status/route.ts
@@ -0,0 +1,9 @@
+import { NextResponse } from "next/server";
+
+export async function GET() {
+  return NextResponse.json({
+    subject: "website",
+    status: "live",
+    color: "green",
+  });
+}
--- a/apps/web/app/api/upload/route.ts
+++ b/apps/web/app/api/upload/route.ts
@@ -1,17 +1,46 @@
-import { put } from "@vercel/blob";
+import { Account_Plans } from "@/lib/consts";
 import { NextResponse } from "next/server";
+// import { getServerSession } from "next-auth";
+// import { authOptions } from "../auth/[...nextauth]/route";
+// import { getUserByEmail } from "@/lib/db/user";
+import COS from "cos-nodejs-sdk-v5";
+import { Readable } from "stream";

-export const runtime = "edge";
+const uploadFile = (stream: Readable, filename: string): Promise<any> => {
+  return new Promise((resolve, reject) => {
+    const params = {
+      Bucket: "gcloud-1303456836",
+      Region: "ap-chengdu",
+      Key: "inke/" + filename,
+      Body: stream,
+    };
+
+    cos.putObject(params, (err: any, data: any) => {
+      if (err) {
+        reject(err);
+      } else {
+        resolve(data);
+      }
+    });
+  });
+};
+
+export const runtime = "nodejs";
+
+var cos = new COS({
+  SecretId: process.env.TencentSecretID || "",
+  SecretKey: process.env.TencentSecretKey || "",
+});

 export async function POST(req: Request) {
-  if (!process.env.BLOB_READ_WRITE_TOKEN) {
-    return new Response(
-      "Missing BLOB_READ_WRITE_TOKEN. Don't forget to add that to your .env file.",
-      {
-        status: 401,
-      },
-    );
-  }
+  // if (!process.env.BLOB_READ_WRITE_TOKEN) {
+  //   return new Response(
+  //     "Missing BLOB_READ_WRITE_TOKEN. Don't forget to add that to your .env file.",
+  //     {
+  //       status: 401,
+  //     },
+  //   );
+  // }

  const file = req.body || "";
  const filename = req.headers.get("x-vercel-filename") || "file.txt";
@@ -22,10 +51,25 @@ export async function POST(req: Request) {
  const finalName = filename.includes(fileType)
    ? filename
    : `${filename}${fileType}`;
-  const blob = await put(finalName, file, {
-    contentType,
-    access: "public",
-  });

-  return NextResponse.json(blob);
+  const fileStream = Readable.from(file as any);
+
+  const res = await uploadFile(fileStream, finalName);
+  // console.log("上传结果", res, res.Location);
+
+  if (res && res.statusCode === 200) {
+    return NextResponse.json({ url: "https://" + res.Location });
+  }
+
+  // if (
+  //   blob &&
+  //   Number(blob.size) > Account_Plans[plan].image_upload_size * 1024 * 1024
+  // ) {
+  //   return new Response(
+  //     "You have exceeded the maximum size of uploads, please upgrade your plan.",
+  //     {
+  //       status: 429,
+  //     },
+  //   );
+  // }
 }
--- a/apps/web/app/api/users/route.ts
+++ b/apps/web/app/api/users/route.ts
@@ -0,0 +1,50 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getUserByEmail, getUserById, updateUserName } from "@/lib/db/user";
+
+export async function GET(
+  req: NextRequest,
+  { params }: { params: Record<string, string | string | undefined[]> },
+) {
+  try {
+    const { searchParams } = new URL(req.url);
+    const email = searchParams.get("email");
+    const id = searchParams.get("id");
+
+    if (email) {
+      const user = await getUserByEmail(email);
+      return NextResponse.json(user);
+    } else if (id && id !== "undefined") {
+      const user = await getUserById(id);
+      return NextResponse.json(user);
+    }
+
+    return NextResponse.json("empty params");
+  } catch (error) {
+    return NextResponse.json(error);
+  }
+}
+
+export async function POST(
+  req: NextRequest,
+  { params }: { params: Record<string, string | string | undefined[]> },
+) {
+  try {
+    const { userId, userName } = await req.json();
+    if (!userId || !userName) {
+      return NextResponse.json("empty content");
+    }
+
+    const res = await updateUserName(userId, userName);
+
+    if (res) {
+      return NextResponse.json(res);
+    }
+
+    return NextResponse.json("something wrong");
+  } catch {
+    return NextResponse.json("error");
+  }
+}
+
+// fix error: "DYNAMIC_SERVER_USAGE"
+export const dynamic = "force-dynamic";
--- a/apps/web/app/error.tsx
+++ b/apps/web/app/error.tsx
@@ -0,0 +1,53 @@
+"use client"; // Error components must be Client Components
+
+// import { Note_Storage_Key } from "@/lib/consts";
+import { useEffect } from "react";
+import Image from "next/image";
+import Link from "next/link";
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error;
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error(error);
+  }, [error]);
+
+  return (
+    <div className="z-10 mt-32 text-center">
+      <Image
+        src="/cat.png"
+        alt="404"
+        width="250"
+        height="250"
+        className="mx-auto mb-4 rounded-sm"
+      />
+      <h2>Oops, Something went wrong!</h2>
+
+      <Link href="/">
+        <button className="mt-4 rounded-md border px-4 py-2 text-sm hover:border-gray-800">
+          Back to home
+        </button>
+      </Link>
+
+      <Link className="ml-4" href="/feedback">
+        <button className="mt-4 rounded-md border px-4 py-2 text-sm hover:border-gray-800">
+          Report error
+        </button>
+      </Link>
+
+      {/* <button
+        className="mt-4 rounded-md border px-4 py-2 text-sm text-red-500 hover:border-gray-800"
+        onClick={() => {
+          localStorage.removeItem(Note_Storage_Key);
+        }}
+      >
+        Clear local storage
+      </button> */}
+    </div>
+  );
+}
--- a/apps/web/app/favicon.ico
+++ b/apps/web/app/favicon.ico
--- a/apps/web/app/features/card.tsx
+++ b/apps/web/app/features/card.tsx
@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+
+export function CardItem({
+  bgColor = "bg-yellow-400",
+  rotate = "rotate-12",
+  icon,
+}: {
+  bgColor?: string;
+  rotate?: string;
+  icon: ReactNode;
+}) {
+  return (
+    <>
+      <div
+        className={
+          `${bgColor} ${rotate}` +
+          " flex h-14 w-14 cursor-pointer items-center justify-center rounded-xl text-xl shadow-lg transition-all hover:rotate-0 md:h-20 md:w-20"
+        }
+      >
+        <span className="font-bold text-slate-100 md:scale-150">{icon}</span>
+      </div>
+    </>
+  );
+}
--- a/apps/web/app/features/guide.tsx
+++ b/apps/web/app/features/guide.tsx
@@ -0,0 +1,305 @@
+"use client";
+
+import NewPostButton from "@/ui/new-post-button";
+import Image from "next/image";
+import Link from "next/link";
+import { Session } from "next-auth";
+import { TypeAnimation } from "react-type-animation";
+import Checked from "@/ui/shared/icons/checked";
+import { Account_Plans } from "@/lib/consts";
+import { CardItem } from "./card";
+import { motion } from "framer-motion";
+
+export function Welcome() {
+  return (
+    <div className="grids mt-3 flex w-full max-w-6xl flex-col items-center justify-center py-6">
+      <p className="title-font animate-fade-up font-display text-center text-3xl font-bold tracking-[-0.02em] text-slate-700 drop-shadow-sm md:text-5xl">
+        <span className="bg-gradient-to-r from-slate-400 via-slate-500 to-slate-800 bg-clip-text text-transparent ">
+          Lightweight
+        </span>{" "}
+        . <br className="block sm:hidden" />
+        AI Powered . <br className="block sm:hidden" />
+        <span className="bg-gradient-to-r from-slate-800 via-slate-500 to-slate-400 bg-clip-text text-transparent ">
+          Markdown
+        </span>
+      </p>
+
+      <p className="mx-auto mb-6 mt-3 w-[270px] text-center font-mono text-lg font-semibold text-slate-600 md:mt-5 md:w-full">
+        <TypeAnimation
+          className="w-[320px]"
+          sequence={[
+            "AI notebook, empowering writing.",
+            1000,
+            "AI notebook, empowering editing.",
+            1000,
+            "AI notebook, empowering translation.",
+            1000,
+            "AI notebook, empowering collaboration.",
+            1000,
+            "AI notebook, empowering anything.",
+            3000,
+          ]}
+          preRenderFirstString={true}
+          speed={50}
+          repeat={5}
+        />
+      </p>
+
+      <NewPostButton
+        className="h-10 w-36 py-2 font-medium shadow-md md:h-12 md:w-44 md:px-3 md:text-lg"
+        text="Start writing now"
+      />
+    </div>
+  );
+}
+
+export function Landing({ session }: { session: Session | null }) {
+  return (
+    <>
+      <div className="mt-12 w-full max-w-6xl px-6">
+        <div className="flex flex-col items-center justify-around gap-10 md:flex-row">
+          <Image
+            className="rounded-lg shadow-lg transition-all hover:opacity-90 hover:shadow-xl"
+            alt={"example"}
+            src="/desktop.png"
+            placeholder="blur"
+            blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAYAAAD68A/GAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxMAAAsTAQCanBgAAACCSURBVBhXZYzBCgIxDEQnTdPau+hveBB/XtiLn+NJQdoNS2Orq6zuO0zgZRhSVbvegeAJGx7hvUeMAUSEzu1RUesEKuNkIgyrFaoFzB4i8i1+cDEwXHOuRc65lbVpe38XuPm+YMdIKa3WOj9F60vWcj0IOg8Xy7ngdDxgv9vO+h/gCZNAKuSRdQ2rAAAAAElFTkSuQmCC"
+            width={430}
+            height={280}
+          />
+          <div className="grids px-2 py-4">
+            <h3 className="mb-6 text-xl font-bold md:text-3xl">
+              Rich editing components
+            </h3>
+            <p className="text-lg">
+              📖 Integrate rich text, Markdown, and final render with JSON.
+            </p>
+          </div>
+        </div>
+
+        <div className="my-14 flex flex-col items-center justify-around gap-10 md:flex-row-reverse">
+          <Image
+            className="rounded-lg shadow-lg transition-all hover:opacity-90 hover:shadow-xl"
+            alt={"example"}
+            src="/e1.png"
+            placeholder="blur"
+            blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAYAAAD68A/GAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxMAAAsTAQCanBgAAACCSURBVBhXZYzBCgIxDEQnTdPau+hveBB/XtiLn+NJQdoNS2Orq6zuO0zgZRhSVbvegeAJGx7hvUeMAUSEzu1RUesEKuNkIgyrFaoFzB4i8i1+cDEwXHOuRc65lbVpe38XuPm+YMdIKa3WOj9F60vWcj0IOg8Xy7ngdDxgv9vO+h/gCZNAKuSRdQ2rAAAAAElFTkSuQmCC"
+            width={450}
+            height={280}
+          />
+          <div className="grids px-2 py-4">
+            <h3 className="mb-6 text-xl font-bold md:text-3xl">
+              AI empowering writing
+            </h3>
+            <p className="text-lg">
+              🎉 Continue writing, editing, translation, chat with AI, all in
+              one.
+            </p>
+          </div>
+        </div>
+
+        <div className="my-14 flex flex-col items-center justify-around gap-10 md:flex-row">
+          <Image
+            className="rounded-lg shadow-lg transition-all hover:opacity-90 hover:shadow-xl"
+            alt={"example"}
+            src="/e2.png"
+            placeholder="blur"
+            blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAYAAAD68A/GAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxMAAAsTAQCanBgAAACCSURBVBhXZYzBCgIxDEQnTdPau+hveBB/XtiLn+NJQdoNS2Orq6zuO0zgZRhSVbvegeAJGx7hvUeMAUSEzu1RUesEKuNkIgyrFaoFzB4i8i1+cDEwXHOuRc65lbVpe38XuPm+YMdIKa3WOj9F60vWcj0IOg8Xy7ngdDxgv9vO+h/gCZNAKuSRdQ2rAAAAAElFTkSuQmCC"
+            width={430}
+            height={280}
+          />
+          <div className="grids px-2 py-4">
+            <h3 className="mb-6 text-xl font-bold md:text-3xl">
+              Online Collaboration
+            </h3>
+            <p className="text-lg">
+              👨‍👩‍👦 One click to start real-time online collaboration among
+              multiple people.
+            </p>
+          </div>
+        </div>
+
+        <div className="flex flex-col items-center justify-around gap-10 md:flex-row-reverse">
+          <Image
+            className="rounded-lg shadow-lg transition-all hover:opacity-90 hover:shadow-xl"
+            alt={"example"}
+            src="/e3.png"
+            placeholder="blur"
+            blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAYAAAD68A/GAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxMAAAsTAQCanBgAAACCSURBVBhXZYzBCgIxDEQnTdPau+hveBB/XtiLn+NJQdoNS2Orq6zuO0zgZRhSVbvegeAJGx7hvUeMAUSEzu1RUesEKuNkIgyrFaoFzB4i8i1+cDEwXHOuRc65lbVpe38XuPm+YMdIKa3WOj9F60vWcj0IOg8Xy7ngdDxgv9vO+h/gCZNAKuSRdQ2rAAAAAElFTkSuQmCC"
+            width={460}
+            height={280}
+          />
+          <div className="grids px-2 py-4">
+            <h3 className="mb-6 text-xl font-bold md:text-3xl">
+              Export & Theme
+            </h3>
+            <p className="text-lg">
+              🍥 One click simple export of PDF, images, Markdown, Json files
+            </p>
+          </div>
+        </div>
+
+        <h1 className="my-12 text-center text-3xl font-bold">PLAN</h1>
+
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
+          <div
+            className={
+              "dark:bg-zinc-850 relative flex flex-col justify-between rounded-lg border border-gray-300 bg-white p-6 shadow-lg"
+            }
+          >
+            <div>
+              <h3 className="text-center text-2xl font-bold">Free</h3>
+              <div className="mt-4 text-center text-zinc-600 dark:text-zinc-400">
+                <span className="text-4xl font-bold">
+                  ${Account_Plans[0].pay}
+                </span>
+              </div>
+              <ul className="mt-4 space-y-2 text-sm">
+                <li className="flex items-center">
+                  <Checked />
+                  Unlimited number of local notes
+                </li>
+                <li className="flex items-center">
+                  <Checked />
+                  {Account_Plans[0].note_upload_count} notes upload to Cloud
+                </li>
+                <li className="flex items-center">
+                  <Checked />
+                  AI generates {Account_Plans[0].ai_generate_day} times per day
+                </li>
+                <li className="flex items-center">
+                  <Checked />
+                  AI generates up to {Account_Plans[0].ai_generate_chars}{" "}
+                  characters per time
+                </li>
+                <li className="flex items-center">
+                  <Checked />
+                  Less than {Account_Plans[0].image_upload_size}MB for upload
+                  image per time
+                </li>
+              </ul>
+            </div>
+            <div className="mt-6">
+              <button className="w-full rounded-lg bg-black px-3 py-2 font-semibold text-slate-100 shadow-md">
+                Sign in for free
+              </button>
+            </div>
+          </div>
+
+          <div
+            className={
+              "dark:bg-zinc-850 relative flex flex-col justify-between rounded-lg border-2 border-purple-500 bg-white p-6 shadow-lg"
+            }
+          >
+            <div className="absolute left-1/2 top-0 inline-block -translate-x-1/2 -translate-y-1/2 transform rounded-full bg-gradient-to-r from-pink-500 to-purple-500 px-4 py-1 text-sm text-slate-100">
+              Beta for free
+            </div>
+            <div>
+              <h3 className="text-center text-2xl font-bold">Basic</h3>
+              <div className="mt-4 text-center text-zinc-600 dark:text-zinc-400">
+                <p className="text-4xl font-bold">${Account_Plans[1].pay}</p>
+              </div>
+              <ul className="mt-4 space-y-2 text-sm">
+                <li className="flex items-center">
+                  <Checked />
+                  Unlimited number of local notes
+                </li>
+                <li className="flex items-center">
+                  <Checked />
+                  Unlimited number of Cloud notes
+                </li>
+                <li className="flex items-center">
+                  <Checked />
+                  AI generates {Account_Plans[1].ai_generate_day} times per day
+                </li>
+                <li className="flex items-center">
+                  <Checked />
+                  AI generates up to {Account_Plans[1].ai_generate_chars}{" "}
+                  characters per time
+                </li>
+                <li className="flex items-center">
+                  <Checked />
+                  Less than {Account_Plans[1].image_upload_size}MB for upload
+                  image per time
+                </li>
+                <li className="flex items-center">
+                  <Checked />
+                  All subsequent features will be used for free
+                </li>
+              </ul>
+            </div>
+            <div className="mt-6">
+              <Link href={"/pricing"}>
+                <button className="w-full rounded-lg bg-gradient-to-r from-pink-500 to-purple-500 px-3 py-2  font-semibold text-slate-100 shadow-md">
+                  Apply for free
+                </button>
+              </Link>
+            </div>
+          </div>
+
+          <div
+            className={
+              "dark:bg-zinc-850 relative flex flex-col justify-between rounded-lg border border-gray-300 bg-white p-6 shadow-lg"
+            }
+          >
+            <div>
+              <h3 className="text-center text-2xl font-bold">Pro</h3>
+              <div className="mt-4 text-center text-zinc-600 dark:text-zinc-400">
+                <p className="text-4xl font-bold">${Account_Plans[2].pay}</p>
+              </div>
+              <ul className="mt-4 space-y-2 text-sm">
+                <li className="flex items-center">
+                  <Checked />
+                  Unlimited number of local notes
+                </li>
+                <li className="flex items-center">
+                  <Checked />
+                  Unlimited number of Cloud notes
+                </li>
+                <li className="flex items-center">
+                  <Checked />
+                  AI generates {Account_Plans[2].ai_generate_day} times per day
+                </li>
+                <li className="flex items-center">
+                  <Checked />
+                  AI generates up to {Account_Plans[2].ai_generate_chars}{" "}
+                  characters per time
+                </li>
+                <li className="flex items-center">
+                  <Checked />
+                  Less than {Account_Plans[2].image_upload_size}MB for upload
+                  image per time
+                </li>
+                <li className="flex items-center">
+                  <Checked />
+                  All subsequent features will be used for free
+                </li>
+              </ul>
+            </div>
+            <div className="mt-6">
+              <button className="w-full rounded-lg bg-black px-3 py-2 font-semibold text-slate-100 shadow-md">
+                Coming soon
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="grids mt-10 flex w-full max-w-6xl items-center justify-center gap-8 pb-6 pt-6 md:gap-14 md:pb-10 md:pt-10">
+        <CardItem
+          bgColor="bg-cyan-400"
+          rotate="rotate-12 origin-top-left"
+          icon={"✏️"}
+        />
+        <CardItem bgColor="bg-orange-400" rotate="rotate-45" icon="👻" />
+        <CardItem rotate="rotate-12 origin-top-left" icon={"💯"} />
+        <CardItem bgColor="bg-pink-400" rotate="-rotate-12" icon="🎓" />
+      </div>
+
+      <NewPostButton
+        className="my-10 h-10 w-36 py-2 font-medium shadow-md md:h-12 md:w-44 md:px-3 md:text-lg"
+        text="Start writing now"
+      />
+    </>
+  );
+}
--- a/apps/web/app/feedback/layout.tsx
+++ b/apps/web/app/feedback/layout.tsx
@@ -0,0 +1,27 @@
+import Providers from "@/app/providers";
+import { siteConfig } from "@/config/site";
+import "@/styles/globals.css";
+import { Metadata } from "next";
+import { ReactNode } from "react";
+
+export const metadata: Metadata = {
+  title: "Feedback | Inke",
+  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>
+    </>
+  );
+}
--- a/apps/web/app/feedback/page.tsx
+++ b/apps/web/app/feedback/page.tsx
@@ -0,0 +1,19 @@
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/app/api/auth/[...nextauth]/route";
+import Nav from "@/ui/layout/nav";
+import Wrapper from "./wrapper";
+import Footer from "@/ui/layout/footer";
+
+export default async function Page() {
+  const session = await getServerSession(authOptions);
+  return (
+    <>
+      <div className="pt-16">
+        {/* @ts-expect-error Server Component */}
+        <Nav />
+        <Wrapper session={session} />
+        <Footer />
+      </div>
+    </>
+  );
+}
--- a/apps/web/app/feedback/wrapper.tsx
+++ b/apps/web/app/feedback/wrapper.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import { Session } from "next-auth";
+import Giscus from "@giscus/react";
+
+export default function Wrapper({ session }: { session: Session | null }) {
+  return (
+    <>
+      <div className="mx-auto min-h-screen max-w-3xl px-6">
+        <Giscus
+          id="feedback"
+          repo="yesmore/inke"
+          repoId="R_kgDOKYZChQ"
+          category="Q&A"
+          categoryId="DIC_kwDOKYZChc4CZ8wk"
+          mapping="title"
+          term="Welcome to Inke!"
+          reactionsEnabled="1"
+          emitMetadata="0"
+          inputPosition="top"
+          theme="light"
+          lang="en"
+          loading="lazy"
+        />
+      </div>
+    </>
+  );
+}
--- a/apps/web/app/google-analytics.tsx
+++ b/apps/web/app/google-analytics.tsx
@@ -0,0 +1,28 @@
+"use client";
+import Script from "next/script";
+const GoogleAnalytics = () => {
+  return (
+    <>
+      <Script
+        id="googletagmanager-a"
+        strategy="afterInteractive"
+        src={`https://www.googletagmanager.com/gtag/js?id=G-YK9MQYLLLR`}
+      />
+      <Script
+        id="gtag-init"
+        strategy="afterInteractive"
+        dangerouslySetInnerHTML={{
+          __html: `
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', 'G-YK9MQYLLLR', {
+            page_path: window.location.pathname,
+            });
+          `,
+        }}
+      />
+    </>
+  );
+};
+export default GoogleAnalytics;
--- a/apps/web/app/invite/[id]/layout.tsx
+++ b/apps/web/app/invite/[id]/layout.tsx
@@ -0,0 +1,28 @@
+import Providers from "@/app/providers";
+import { siteConfig } from "@/config/site";
+import "@/styles/globals.css";
+
+import { Metadata } from "next";
+import { ReactNode } from "react";
+
+export const metadata: Metadata = {
+  title: "Invite | Inke",
+  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>
+    </>
+  );
+}
--- a/apps/web/app/invite/[id]/page.tsx
+++ b/apps/web/app/invite/[id]/page.tsx
@@ -0,0 +1,19 @@
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/app/api/auth/[...nextauth]/route";
+import Nav from "@/ui/layout/nav";
+import Wrapper from "./wrapper";
+import Footer from "@/ui/layout/footer";
+
+export default async function Page({ params }: { params: { id: string } }) {
+  const session = await getServerSession(authOptions);
+  return (
+    <>
+      <div className="pt-16">
+        {/* @ts-expect-error Server Component */}
+        <Nav />
+        <Wrapper session={session} id={params.id} />
+        <Footer />
+      </div>
+    </>
+  );
+}
--- a/apps/web/app/invite/[id]/wrapper.tsx
+++ b/apps/web/app/invite/[id]/wrapper.tsx
@@ -0,0 +1,233 @@
+"use client";
+
+import {
+  useCollaborationById,
+  useCollaborationByRoomId,
+  useCollaborationInviteCount,
+} from "@/app/post/[id]/request";
+import { ContentItem } from "@/lib/types/note";
+import { IResponse } from "@/lib/types/response";
+import { fetcher } from "@/lib/utils";
+import { addNote, noteTable } from "@/store/db.model";
+import UINotFound from "@/ui/layout/not-found";
+import { LoadingCircle, LoadingDots } from "@/ui/shared/icons";
+import { Collaboration, User } from "@prisma/client";
+import { useLiveQuery } from "dexie-react-hooks";
+import { motion } from "framer-motion";
+import { Shapes, Users } from "lucide-react";
+import { Session } from "next-auth";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import toast, { Toaster } from "react-hot-toast";
+import { v4 as uuidv4 } from "uuid";
+
+export default function Wrapper({
+  session,
+  id,
+}: {
+  session: Session | null;
+  id: string;
+}) {
+  const { room, isLoading } = useCollaborationById(id);
+  const { count } = useCollaborationInviteCount(room?.data?.roomId);
+
+  const router = useRouter();
+  const contents = useLiveQuery<ContentItem[]>(() => noteTable.toArray());
+
+  const [isJoined, setIsJoined] = useState(false);
+  const [isClickJoin, setClickJoin] = useState(false);
+  const [creator, setCreator] = useState<User>();
+  const [firstCreatedRoom, setFirstCreatedRoom] = useState<Collaboration>();
+
+  useEffect(() => {
+    if (room && room.code === 200) {
+      // 查询第一个空间创建者
+      onRequestCreator(room.data.roomId);
+    }
+  }, [room]);
+
+  useEffect(() => {
+    // console.log(room?.data);
+
+    if (room && room.data) {
+      const index = contents.findIndex((item) => item.id === room.data.localId);
+      if (index !== -1) {
+        setIsJoined(true);
+      }
+    }
+  }, [contents, room]);
+
+  const onRequestCreator = async (roomId: string) => {
+    const res = await fetcher<IResponse<Collaboration>>(
+      "/api/collaboration/room",
+      {
+        method: "POST",
+        body: JSON.stringify({ roomId }),
+      },
+    );
+    if (res.code === 200) {
+      setFirstCreatedRoom(res.data);
+      const user = await fetcher<User>(`/api/users?id=${res.data.userId}`);
+      if (user) {
+        setCreator(user);
+      }
+    }
+  };
+
+  const handleJoin = async () => {
+    if (firstCreatedRoom && firstCreatedRoom.deletedAt) {
+      toast("Space has been deleted");
+      return;
+    }
+
+    setClickJoin(true);
+    const localId = uuidv4();
+    const res = await fetcher<IResponse<Collaboration | null>>(
+      "/api/collaboration",
+      {
+        method: "POST",
+        body: JSON.stringify({
+          roomId: room.data.roomId,
+          localId,
+          title: room.data.title,
+        }),
+      },
+    );
+
+    if (res.code === 200) {
+      toast.success(res.msg, {
+        icon: "🎉",
+      });
+      newPost(localId);
+      router.push(`/post/${localId}?work=${room.data.roomId}`);
+    } else if (res.code === 301) {
+      toast.success(res.msg, {
+        icon: "🎉",
+      });
+      // 其他设备加入了
+      const index = contents.findIndex((item) => item.id === room.data.localId);
+      if (index === -1) {
+        newPost(room.data.localId);
+        router.push(`/post/${room.data.localId}?work=${room.data.roomId}`);
+      } else {
+        router.push(`/post/${localId}?work=${room.data.roomId}`);
+      }
+    } else {
+      toast(res.msg);
+      setClickJoin(false);
+    }
+  };
+
+  const newPost = (localId: string) => {
+    const date = new Date();
+    addNote({
+      id: localId,
+      title: `Untitled-${localId.slice(0, 6)}-${
+        date.getMonth() + 1
+      }/${date.getDate()}`,
+      content: {},
+      tag: "",
+      created_at: date.getTime(),
+      updated_at: date.getTime(),
+    });
+  };
+
+  if (isLoading)
+    return (
+      <div className="flex h-screen w-full justify-center px-6 py-6 text-center">
+        <LoadingCircle className="h-6 w-6" />
+      </div>
+    );
+
+  if (!id || room.code !== 200) return <UINotFound />;
+
+  return (
+    <>
+      <Toaster />
+      <div className="mx-auto h-screen max-w-3xl px-6 py-6 text-center">
+        <Shapes className="mx-auto h-12 w-12 text-cyan-500 hover:text-slate-500" />
+        <h1 className="my-4 text-center text-2xl font-semibold">
+          🎉 Invite to Join Collaboration
+        </h1>
+        <p>You are being invited to join the collaboration space</p>
+
+        <motion.div
+          className="mx-auto mb-4 mt-6 w-80 rounded-lg border border-slate-100 p-3 text-sm shadow-md"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.3 }}
+        >
+          <li className="flex items-center justify-between border-b border-slate-100 pb-2">
+            <span>Space name</span>
+            <span className="font-semibold text-cyan-500">
+              {room?.data?.title}
+            </span>
+          </li>
+          <li className="flex items-center justify-between border-b border-slate-100 py-2">
+            <span>Joined members</span>
+            <span className="font-semibold">{count?.data || "-"}</span>
+          </li>
+          {creator && (
+            <>
+              <li className="flex items-center justify-between border-b border-slate-100 py-2">
+                <span>Space owner</span>
+                <span className="font-semibold">{creator.name}</span>
+              </li>
+            </>
+          )}
+          {firstCreatedRoom && (
+            <>
+              <li className="flex items-center justify-between border-b border-slate-100 py-2">
+                <span>Created at</span>
+                <span className="font-semibold">
+                  {firstCreatedRoom.createdAt.toString().slice(0, 10)}
+                </span>
+              </li>
+              <li className="flex items-center justify-between pt-2">
+                <span>Space status</span>
+                <span
+                  className={
+                    `${
+                      firstCreatedRoom.deletedAt
+                        ? "text-yellow-500"
+                        : "text-green-500"
+                    }` + " font-semibold"
+                  }
+                >
+                  {firstCreatedRoom.deletedAt ? "Deleted" : "Active"}
+                </span>
+              </li>
+            </>
+          )}
+        </motion.div>
+
+        {isJoined ? (
+          <button
+            className="mx-auto mt-6 flex h-10 min-w-[200px] items-center justify-center rounded-md bg-blue-500 px-3 py-2 text-slate-50 shadow-md hover:bg-blue-400"
+            disabled={isClickJoin}
+            onClick={() => {
+              setClickJoin(true);
+              router.push(
+                `/post/${room.data.localId}?work=${room.data.roomId}`,
+              );
+            }}
+          >
+            {isClickJoin ? (
+              <LoadingDots color="#f6f6f6" />
+            ) : (
+              "Joined, click for quick access"
+            )}
+          </button>
+        ) : (
+          <button
+            className="mx-auto mt-6 flex h-10 w-64 items-center justify-center rounded-md bg-blue-500 px-3 py-2 text-slate-50 shadow-md hover:bg-blue-400"
+            onClick={handleJoin}
+            disabled={isClickJoin}
+          >
+            {isClickJoin ? <LoadingDots color="#f6f6f6" /> : "Join Now"}
+          </button>
+        )}
+      </div>
+    </>
+  );
+}
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -3,33 +3,28 @@ import "@/styles/globals.css";
 import { Metadata } from "next";
 import { ReactNode } from "react";
 import Providers from "./providers";
-
-const title =
-  "Inke – Notion-style WYSIWYG editor with AI-powered autocompletions";
-const description =
-  "Inke is a Notion-style WYSIWYG editor with AI-powered autocompletions. Built with Tiptap, OpenAI, and Vercel AI SDK.";
+import { siteConfig } from "@/config/site";
+import GoogleAnalytics from "./google-analytics";

 export const metadata: Metadata = {
-  title,
-  description,
-  openGraph: {
-    title,
-    description,
-  },
-  twitter: {
-    title,
-    description,
-    card: "summary_large_image",
-    creator: "@steventey",
-  },
-  metadataBase: new URL("https://inke.app"),
-  themeColor: "#ffffff",
+  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 (
    <html lang="en" suppressHydrationWarning>
      <body>
+        <GoogleAnalytics />
        <Providers>{children}</Providers>
      </body>
    </html>
--- a/apps/web/app/manifest.ts
+++ b/apps/web/app/manifest.ts
@@ -0,0 +1,26 @@
+import { MetadataRoute } from "next";
+
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: "Inke",
+    short_name: "Inke",
+    description:
+      "Inke is a WYSIWYG editor with AI-powered autocompletions. Built with Tiptap, OpenAI, and Vercel AI SDK.",
+    start_url: "/",
+    display: "standalone",
+    background_color: "#fff",
+    theme_color: "#fff",
+    icons: [
+      {
+        src: "/favicon.ico",
+        sizes: "32x32",
+        type: "image/x-icon",
+      },
+      {
+        src: "/logo-256.png",
+        sizes: "256x256",
+        type: "image/png",
+      },
+    ],
+  };
+}
--- a/apps/web/app/not-found.tsx
+++ b/apps/web/app/not-found.tsx
@@ -0,0 +1,9 @@
+import UINotFound from "@/ui/layout/not-found";
+
+export default async function NotFound() {
+  return (
+    <>
+      <UINotFound />
+    </>
+  );
+}
--- a/apps/web/app/opengraph-image.png
+++ b/apps/web/app/opengraph-image.png
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -1,19 +1,18 @@
-import { Github } from "@/ui/icons";
-import Menu from "@/ui/menu";
-import Editor from "@/ui/editor";
+import Nav from "@/ui/layout/nav";
+import { Landing, Welcome } from "./features/guide";
+import Footer from "@/ui/layout/footer";
+import { getServerSession } from "next-auth";
+import { authOptions } from "./api/auth/[...nextauth]/route";

-export default function Page() {
+export default async function Page() {
+  const session = await getServerSession(authOptions);
  return (
-    <div className="flex min-h-screen flex-col items-center sm:px-5 sm:pt-[calc(20vh)]">
-      <a
-        href="https://github.com/yesmore/inke"
-        target="_blank"
-        className="absolute bottom-5 left-5 z-10 max-h-fit rounded-lg p-2 transition-colors duration-200 hover:bg-stone-100 sm:bottom-auto sm:top-5"
-      >
-        <Github />
-      </a>
-      <Menu />
-      <Editor />
+    <div className="mt-16 flex flex-col items-center sm:mx-6 sm:px-3">
+      {/* @ts-expect-error Server Component */}
+      <Nav />
+      <Welcome />
+      <Landing session={session} />
+      <Footer />
    </div>
  );
 }
--- a/apps/web/app/post/[id]/editor.tsx
+++ b/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>
+    </>
+  );
+}
--- a/apps/web/app/post/[id]/layout.tsx
+++ b/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>
+    </>
+  );
+}
--- a/apps/web/app/post/[id]/page.tsx
+++ b/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} />;
+}
--- a/apps/web/app/post/[id]/request.ts
+++ b/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,
+  };
+}
--- a/apps/web/app/post/[id]/sider.tsx
+++ b/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>
+  );
+}
--- a/apps/web/app/post/[id]/wrapper.tsx
+++ b/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>
+    </>
+  );
+}
--- a/apps/web/app/pricing/layout.tsx
+++ b/apps/web/app/pricing/layout.tsx
@@ -0,0 +1,28 @@
+import Providers from "@/app/providers";
+import { siteConfig } from "@/config/site";
+import "@/styles/globals.css";
+
+import { Metadata } from "next";
+import { ReactNode } from "react";
+
+export const metadata: Metadata = {
+  title: "Pricing | Inke",
+  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>
+    </>
+  );
+}
--- a/apps/web/app/pricing/page.tsx
+++ b/apps/web/app/pricing/page.tsx
@@ -0,0 +1,19 @@
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/app/api/auth/[...nextauth]/route";
+import Nav from "@/ui/layout/nav";
+import Wrapper from "./wrapper";
+import Footer from "@/ui/layout/footer";
+
+export default async function Page() {
+  const session = await getServerSession(authOptions);
+  return (
+    <>
+      <div className="pt-16">
+        {/* @ts-expect-error Server Component */}
+        <Nav />
+        <Wrapper session={session} />
+        <Footer />
+      </div>
+    </>
+  );
+}
--- a/apps/web/app/pricing/wrapper.tsx
+++ b/apps/web/app/pricing/wrapper.tsx
@@ -0,0 +1,254 @@
+"use client";
+
+import Checked from "@/ui/shared/icons/checked";
+import { Session } from "next-auth";
+import { useEffect, useState } from "react";
+import { useUserInfoByEmail } from "../post/[id]/request";
+import Link from "next/link";
+import { Account_Plans } from "@/lib/consts";
+
+export default function Wrapper({ session }: { session: Session | null }) {
+  const { user } = useUserInfoByEmail(session?.user?.email || "");
+
+  const [currentPlan, setCurrentPlan] = useState("5");
+
+  useEffect(() => {
+    if (user && user.plan) {
+      setCurrentPlan(user.plan);
+    }
+  }, [user]);
+
+  return (
+    <>
+      <div className="mx-auto min-h-screen">
+        <PlanCards activeIndex={currentPlan} />
+      </div>
+    </>
+  );
+}
+
+export function PlanCards({ activeIndex }: { activeIndex: string }) {
+  return (
+    <section className="mt-3 flex w-full justify-center py-6 dark:from-zinc-900 dark:to-zinc-800">
+      <div className="container px-4 md:px-6">
+        <h1 className=" text-center text-4xl font-bold">PLAN</h1>
+        <div className="mx-auto mt-10 px-3">
+          <p>
+            🎉 For users who are not logged in, the AI generation frequency will
+            be limited to <strong>50</strong> times per day. Once logged in,
+            they can receive <strong>100</strong> times. Sign in and upgrade
+            now!{" "}
+            <span className="text-blue-500">
+              Moreover, Inke is currently in beta version and you can apply for
+              the Basic plan for free. Please refer to `About plan` below for
+              the application method.
+            </span>
+          </p>
+        </div>
+
+        <div className="mt-16 grid grid-cols-1 gap-6 md:grid-cols-3">
+          <div
+            className={
+              (activeIndex === "0"
+                ? "border-2 border-purple-500"
+                : "border border-gray-300") +
+              " dark:bg-zinc-850 relative flex flex-col justify-between rounded-lg border bg-white p-6 shadow-lg"
+            }
+          >
+            {activeIndex === "0" && (
+              <div className="absolute left-1/2 top-0 inline-block -translate-x-1/2 -translate-y-1/2 transform rounded-full bg-gradient-to-r from-pink-500 to-purple-500 px-4 py-1 text-sm text-slate-100">
+                Current
+              </div>
+            )}
+            <div>
+              <h3 className="text-center text-2xl font-bold">Free</h3>
+              <div className="mt-4 text-center text-zinc-600 dark:text-zinc-400">
+                <span className="text-4xl font-bold">
+                  ${Account_Plans[0].pay}
+                </span>
+              </div>
+              <ul className="mt-4 space-y-2 text-sm">
+                <li className="flex items-center">
+                  <Checked />
+                  Unlimited number of local notes
+                </li>
+                <li className="flex items-center">
+                  <Checked />
+                  {Account_Plans[0].note_upload_count} notes upload to Cloud
+                </li>
+                <li className="flex items-center">
+                  <Checked />
+                  AI generates {Account_Plans[0].ai_generate_day} times per day
+                </li>
+                <li className="flex items-center">
+                  <Checked />
+                  AI generates up to {Account_Plans[0].ai_generate_chars}{" "}
+                  characters per time
+                </li>
+                <li className="flex items-center">
+                  <Checked />
+                  Less than {Account_Plans[0].image_upload_size}MB for upload
+                  image per time
+                </li>
+              </ul>
+            </div>
+            <div className="mt-6">
+              <button className="w-full rounded-lg bg-black px-3 py-2 font-semibold text-slate-100 shadow-md">
+                Sign in for free
+              </button>
+            </div>
+          </div>
+
+          <div
+            className={
+              (activeIndex === "1"
+                ? "border-2 border-purple-500"
+                : "border border-gray-300") +
+              " dark:bg-zinc-850 relative flex flex-col justify-between rounded-lg bg-white p-6 shadow-lg"
+            }
+          >
+            {activeIndex === "1" ? (
+              <div className="absolute left-1/2 top-0 inline-block -translate-x-1/2 -translate-y-1/2 transform rounded-full bg-gradient-to-r from-pink-500 to-purple-500 px-4 py-1 text-sm text-slate-100">
+                Current
+              </div>
+            ) : (
+              <div className="absolute left-1/2 top-0 inline-block -translate-x-1/2 -translate-y-1/2 transform rounded-full bg-gradient-to-r from-pink-500 to-purple-500 px-4 py-1 text-sm text-slate-100">
+                Beta for free
+              </div>
+            )}
+            <div>
+              <h3 className="text-center text-2xl font-bold">Basic</h3>
+              <div className="mt-4 text-center text-zinc-600 dark:text-zinc-400">
+                <p className="text-4xl font-bold">${Account_Plans[1].pay}</p>
+              </div>
+              <ul className="mt-4 space-y-2 text-sm">
+                <li className="flex items-center">
+                  <Checked />
+                  Unlimited number of local notes
+                </li>
+                <li className="flex items-center">
+                  <Checked />
+                  Unlimited number of Cloud notes
+                </li>
+                <li className="flex items-center">
+                  <Checked />
+                  AI generates {Account_Plans[1].ai_generate_day} times per day
+                </li>
+                <li className="flex items-center">
+                  <Checked />
+                  AI generates up to {Account_Plans[1].ai_generate_chars}{" "}
+                  characters per time
+                </li>
+                <li className="flex items-center">
+                  <Checked />
+                  Less than {Account_Plans[1].image_upload_size}MB for upload
+                  image per time
+                </li>
+                <li className="flex items-center">
+                  <Checked />
+                  All subsequent features will be used for free
+                </li>
+              </ul>
+            </div>
+            <div className="mt-6">
+              <button className="w-full rounded-lg bg-gradient-to-r from-pink-500 to-purple-500 px-3 py-2  font-semibold text-slate-100 shadow-md">
+                Apply for free
+              </button>
+            </div>
+          </div>
+
+          <div
+            className={
+              (activeIndex === "2"
+                ? "border-2 border-purple-500"
+                : "border border-gray-300") +
+              " dark:bg-zinc-850 relative flex flex-col justify-between rounded-lg border bg-white p-6 shadow-lg"
+            }
+          >
+            {activeIndex === "2" && (
+              <div className="absolute left-1/2 top-0 inline-block -translate-x-1/2 -translate-y-1/2 transform rounded-full bg-gradient-to-r from-pink-500 to-purple-500 px-4 py-1 text-sm text-slate-100">
+                Current
+              </div>
+            )}
+            <div>
+              <h3 className="text-center text-2xl font-bold">Pro</h3>
+              <div className="mt-4 text-center text-zinc-600 dark:text-zinc-400">
+                <p className="text-4xl font-bold">${Account_Plans[2].pay}</p>
+              </div>
+              <ul className="mt-4 space-y-2 text-sm">
+                <li className="flex items-center">
+                  <Checked />
+                  Unlimited number of local notes
+                </li>
+                <li className="flex items-center">
+                  <Checked />
+                  Unlimited number of Cloud notes
+                </li>
+                <li className="flex items-center">
+                  <Checked />
+                  AI generates {Account_Plans[2].ai_generate_day} times per day
+                </li>
+                <li className="flex items-center">
+                  <Checked />
+                  AI generates up to {Account_Plans[2].ai_generate_chars}{" "}
+                  characters per time
+                </li>
+                <li className="flex items-center">
+                  <Checked />
+                  Less than {Account_Plans[2].image_upload_size}MB for upload
+                  image per time
+                </li>
+                <li className="flex items-center">
+                  <Checked />
+                  All subsequent features will be used for free
+                </li>
+              </ul>
+            </div>
+            <div className="mt-6">
+              <button className="w-full rounded-lg bg-black px-3 py-2 font-semibold text-slate-100 shadow-md">
+                Coming soon
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div className="mx-3">
+          <h3 className="mb-4 mt-10 text-lg font-semibold" id="about-plan">
+            About Plan
+          </h3>
+          <p>
+            All paid plans are one-time purchases, allowing users to permanently
+            access all features.
+          </p>
+          <p className="my-2">
+            🎉 We have just introduced the Basic plan. And the best part is that
+            Basic plan is currently available for free activation indefinitely!
+            Simply give us a UPVOTE on{" "}
+            <Link
+              className="text-blue-500 after:content-['_↗'] hover:text-blue-300"
+              href="https://www.producthunt.com/posts/inke"
+              target="_blank"
+            >
+              Product Hunt
+            </Link>
+            , and send an email named{" "}
+            <strong>
+              <code>Apply for Upgrade</code>
+            </strong>{" "}
+            to{" "}
+            <strong>
+              <code>team@inke.app</code>
+            </strong>{" "}
+            , please include your registered email address (inke.app) and
+            Product Hunt nickname in the email content .
+          </p>
+          <p>
+            we will process your request within 1-2 business days. All you need
+            to do is stay updated on the latest status of this page. Thank you
+            for your continued support!
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}
--- a/apps/web/app/privacy/layout.tsx
+++ b/apps/web/app/privacy/layout.tsx
@@ -0,0 +1,28 @@
+import Providers from "@/app/providers";
+import { siteConfig } from "@/config/site";
+import "@/styles/globals.css";
+
+import { Metadata } from "next";
+import { ReactNode } from "react";
+
+export const metadata: Metadata = {
+  title: "Privacy | Inke",
+  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>
+    </>
+  );
+}
--- a/apps/web/app/privacy/page.tsx
+++ b/apps/web/app/privacy/page.tsx
@@ -0,0 +1,19 @@
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/app/api/auth/[...nextauth]/route";
+import Nav from "@/ui/layout/nav";
+import Wrapper from "./wrapper";
+import Footer from "@/ui/layout/footer";
+
+export default async function Page() {
+  const session = await getServerSession(authOptions);
+  return (
+    <>
+      <div className="pt-16">
+        {/* @ts-expect-error Server Component */}
+        <Nav />
+        <Wrapper session={session} />
+        <Footer />
+      </div>
+    </>
+  );
+}
--- a/apps/web/app/privacy/wrapper.tsx
+++ b/apps/web/app/privacy/wrapper.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import { Session } from "next-auth";
+
+export default function Wrapper({ session }: { session: Session | null }) {
+  return (
+    <>
+      <div className="mx-auto max-w-3xl px-6 py-6">
+        <h2 className="text-lg font-bold"> Privacy Policy</h2>
+        If you choose to use the services I provide, it means you agree to the
+        collection and use of information related to this policy. The personal
+        information I collect is used to provide and improve the services.
+        Unless otherwise stated in this privacy policy, I will not use or share
+        your information with anyone else. Unless otherwise specified in this
+        privacy policy, the terms used in this privacy policy have the same
+        meaning as our terms and conditions, which can be accessed in Inke.
+        <h2 className="mt-2 text-lg font-bold">
+          Information Collection and Use
+        </h2>
+        In order to provide a better experience, when using our services, I may
+        ask you to provide certain personal identity information, including but
+        not limited to email, avatar. The information I request will be retained
+        on your device and will not be collected by me in any way.
+        <h2 className="mt-2 text-lg font-bold">Other</h2>
+        It is strictly prohibited to upload notes with illegal or pornographic
+        content. We will take strict measures to permanently ban violators.
+        <h2 className="mt-2 text-lg font-bold">Contact Us </h2>
+        If you have any questions or suggestions regarding my privacy policy,
+        please feel free to contact me at{" "}
+        <a className="text-blue-400" href="/feedback" target="_blank">
+          feedback
+        </a>
+        .
+      </div>
+    </>
+  );
+}
--- a/apps/web/app/providers.tsx
+++ b/apps/web/app/providers.tsx
@@ -3,7 +3,6 @@
 import { Dispatch, ReactNode, SetStateAction, createContext } from "react";
 import { ThemeProvider, useTheme } from "next-themes";
 import { Toaster } from "sonner";
-import { Analytics } from "@vercel/analytics/react";
 import useLocalStorage from "@/lib/hooks/use-local-storage";

 export const AppContext = createContext<{
@@ -40,7 +39,6 @@ export default function Providers({ children }: { children: ReactNode }) {
      >
        <ToasterProvider />
        {children}
-        <Analytics />
      </AppContext.Provider>
    </ThemeProvider>
  );
--- a/apps/web/app/publish/[id]/layout.tsx
+++ b/apps/web/app/publish/[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>
+    </>
+  );
+}
--- a/apps/web/app/publish/[id]/page.tsx
+++ b/apps/web/app/publish/[id]/page.tsx
@@ -0,0 +1,22 @@
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/app/api/auth/[...nextauth]/route";
+import Wrapper from "./wrapper";
+import Nav from "@/ui/layout/nav";
+import FooterPublish from "@/ui/layout/footer-publish";
+
+// 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 (
+    <div className="mt-16 flex flex-col items-center sm:mx-6 sm:px-3">
+      {/* @ts-expect-error Server Component */}
+      <Nav />
+      <Wrapper id={params.id} session={session} />
+      <FooterPublish />
+    </div>
+  );
+}
--- a/apps/web/app/publish/[id]/wrapper.tsx
+++ b/apps/web/app/publish/[id]/wrapper.tsx
@@ -0,0 +1,138 @@
+"use client";
+
+import {
+  useShareNoteByLocalId,
+  useUserInfoById,
+} from "@/app/post/[id]/request";
+import {
+  Content_Public_Storage_Key,
+  Default_Debounce_Duration,
+} from "@/lib/consts";
+import { Session } from "next-auth";
+import { useEffect, useState } from "react";
+import { Editor as InkeEditor } from "inkejs";
+import { JSONContent } from "@tiptap/react";
+import UINotFound from "../../../ui/layout/not-found";
+import { LoadingCircle } from "@/ui/shared/icons";
+import NewPostButton from "@/ui/new-post-button";
+import Image from "next/image";
+import { BadgeInfo } from "lucide-react";
+import Tooltip from "@/ui/shared/tooltip";
+import { fetcher, timeAgo } from "@/lib/utils";
+import { ContentItem } from "@/lib/types/note";
+
+export default function Wrapper({
+  id,
+  session,
+}: {
+  id: string;
+  session: Session | null;
+}) {
+  const { share, isLoading } = useShareNoteByLocalId(id);
+  const [canRenderGuide, setCanRenderGuide] = useState(false);
+  const [parseContent, setParseContent] = useState<ContentItem>();
+  const [currentContent, setCurrentContent] = useState<JSONContent>({});
+
+  const { user } = useUserInfoById(share?.data.userId);
+
+  useEffect(() => {
+    if (window) {
+      localStorage.removeItem(Content_Public_Storage_Key);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (share && share.data && share.data.data) {
+      const parsed = JSON.parse(share.data.data || "{}");
+      setParseContent(parsed);
+      setCurrentContent(parsed.content);
+      setCanRenderGuide(true);
+      const title = parsed.title || "Untitled";
+      document.title = `${title} | Inke`;
+    }
+  }, [share]);
+
+  const handleUpdateKeeps = async () => {
+    if (share && share.data) {
+      await fetcher("/api/share/update/keep", {
+        method: "POST",
+        body: JSON.stringify({ id: share.data.id }),
+      });
+    }
+  };
+
+  return (
+    <div className="min-h-screen">
+      {isLoading && <LoadingCircle className="mx-auto h-6 w-6" />}
+      {!isLoading && share && share.data && canRenderGuide && (
+        <>
+          {user && (
+            <div className="mx-8 flex h-24 items-center justify-between">
+              <div className="flex items-center gap-2">
+                <Image
+                  alt="avatar"
+                  src={user && user.image ? user.image : "/cat.png"}
+                  width={50}
+                  height={50}
+                />
+                <div className="flex flex-col justify-between gap-1">
+                  <span className="cursor-pointer font-semibold text-slate-700">
+                    {user.name}
+                  </span>
+
+                  <p className="flex text-xs text-slate-500">
+                    <strong>{share.data.click}</strong>
+                    &nbsp;clicks,&nbsp;
+                    <strong>{share.data.keeps}</strong>&nbsp;keeps
+                    {parseContent.created_at && (
+                      <span className="ml-2 hidden border-l border-slate-300 pl-2 text-xs text-slate-500 sm:block">
+                        Updated {timeAgo(parseContent.updated_at)}
+                      </span>
+                    )}
+                  </p>
+                </div>
+              </div>
+
+              <div className="flex items-center gap-2">
+                <NewPostButton
+                  className="h-8 w-28 px-3 py-1"
+                  text="Keep writing"
+                  from="publish"
+                  defaultContent={currentContent}
+                  callback={handleUpdateKeeps}
+                />
+                <Tooltip
+                  content={
+                    <div className="w-64 px-3 py-2 text-sm text-slate-400">
+                      <h1 className="mb-2 font-semibold text-slate-500">
+                        What&apos;s keep writing?
+                      </h1>
+                      <p>
+                        Keep writing allows you to quickly create a note with
+                        the same content as this note locally.
+                      </p>
+                    </div>
+                  }
+                  fullWidth={false}
+                >
+                  <button className="hidden sm:block">
+                    <BadgeInfo className="h-4 w-4 text-slate-400 hover:text-slate-500" />
+                  </button>
+                </Tooltip>
+              </div>
+            </div>
+          )}
+          <InkeEditor
+            className="relative -mt-6 mb-3 w-screen max-w-screen-lg overflow-y-auto border-stone-200 bg-white"
+            storageKey={Content_Public_Storage_Key}
+            debounceDuration={Default_Debounce_Duration}
+            defaultValue={currentContent}
+            editable={false}
+            bot={true}
+          />
+        </>
+      )}
+      {!isLoading && !share.data && <UINotFound />}
+    </div>
+  );
+}
--- a/apps/web/app/server-sitemap-index.xml/route.ts
+++ b/apps/web/app/server-sitemap-index.xml/route.ts
@@ -0,0 +1,11 @@
+import { getServerSideSitemapIndex } from "next-sitemap";
+
+export async function GET(request: Request) {
+  // Method to source urls from cms
+  // const urls = await fetch('https//example.com/api')
+
+  return getServerSideSitemapIndex([
+    "https://inke.app/publish.xml",
+    "https://inke.app/pricing.xml",
+  ]);
+}
--- a/apps/web/app/settings/layout.tsx
+++ b/apps/web/app/settings/layout.tsx
@@ -0,0 +1,28 @@
+import Providers from "@/app/providers";
+import { siteConfig } from "@/config/site";
+import "@/styles/globals.css";
+
+import { Metadata } from "next";
+import { ReactNode } from "react";
+
+export const metadata: Metadata = {
+  title: "Setting | Inke",
+  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>
+    </>
+  );
+}
--- a/apps/web/app/settings/page.tsx
+++ b/apps/web/app/settings/page.tsx
@@ -0,0 +1,19 @@
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/app/api/auth/[...nextauth]/route";
+import Nav from "@/ui/layout/nav";
+import Wrapper from "./wrapper";
+import Footer from "@/ui/layout/footer";
+
+export default async function Page() {
+  const session = await getServerSession(authOptions);
+  return (
+    <>
+      <div className="pt-16">
+        {/* @ts-expect-error Server Component */}
+        <Nav />
+        <Wrapper session={session} />
+        <Footer />
+      </div>
+    </>
+  );
+}
--- a/apps/web/app/settings/wrapper.tsx
+++ b/apps/web/app/settings/wrapper.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import { Session } from "next-auth";
+import Image from "next/image";
+
+export default function Wrapper({ session }: { session: Session | null }) {
+  return (
+    <>
+      <div className="mx-auto h-screen max-w-3xl px-6">
+        <div className="flex flex-col items-center justify-center">
+          <Image
+            src="/cat.png"
+            alt="404"
+            width="250"
+            height="250"
+            className="ml-4 rounded-sm"
+          />
+          <p className="mt-4">Coming soon...</p>
+        </div>
+      </div>
+    </>
+  );
+}
--- a/apps/web/app/templates/layout.tsx
+++ b/apps/web/app/templates/layout.tsx
@@ -0,0 +1,28 @@
+import Providers from "@/app/providers";
+import { siteConfig } from "@/config/site";
+import "@/styles/globals.css";
+
+import { Metadata } from "next";
+import { ReactNode } from "react";
+
+export const metadata: Metadata = {
+  title: "Templates | Inke",
+  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>
+    </>
+  );
+}
--- a/apps/web/app/templates/page.tsx
+++ b/apps/web/app/templates/page.tsx
@@ -0,0 +1,19 @@
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/app/api/auth/[...nextauth]/route";
+import Nav from "@/ui/layout/nav";
+import Wrapper from "./wrapper";
+import Footer from "@/ui/layout/footer";
+
+export default async function Page() {
+  const session = await getServerSession(authOptions);
+  return (
+    <>
+      <div className="pt-16">
+        {/* @ts-expect-error Server Component */}
+        <Nav />
+        <Wrapper session={session} />
+        <Footer />
+      </div>
+    </>
+  );
+}
--- a/apps/web/app/templates/wrapper.tsx
+++ b/apps/web/app/templates/wrapper.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import { Session } from "next-auth";
+
+export default function Wrapper({ session }: { session: Session | null }) {
+  return (
+    <>
+      <div className="mx-auto max-w-3xl px-6 py-6">working...</div>
+    </>
+  );
+}