From 04b6add7c678a6535044aa720d001ac063bbee96 Mon Sep 17 00:00:00 2001
From: codetorso <pruthvirajthinks@gmail.com>
Date: Tue, 11 Jun 2024 07:45:21 +0530
Subject: [PATCH] AI code refactored

---
 apps/web/app/(auth)/signin/page.tsx           |  12 +-
 apps/web/app/(dash)/dynamicisland.tsx         |  13 +-
 apps/web/app/(editor)/ai.md                   |  43 ++++
 apps/web/app/(editor)/api/generate/route.ts   | 141 ------------
 apps/web/app/(editor)/api/upload/route.ts     |  26 ---
 .../app/(editor)/components/aigenerate.tsx    | 213 ++++++++++--------
 .../(editor)/components/editorcommands.tsx    |  85 +++++++
 .../app/(editor)/components/image-upload.ts   |  14 +-
 .../generative/ai-completion-command.tsx      |  66 ------
 .../generative/ai-selector-commands.tsx       |  76 -------
 .../tailwind/generative/ai-selector.tsx       | 111 ---------
 .../components/tailwind/ui/button.tsx         |  47 ----
 .../components/tailwind/ui/command.tsx        | 134 -----------
 .../tailwind/ui/icons/font-default.tsx        |  15 --
 .../tailwind/ui/icons/font-mono.tsx           |  22 --
 .../tailwind/ui/icons/font-serif.tsx          |  23 --
 .../components/tailwind/ui/icons/index.tsx    |   3 -
 .../tailwind/ui/icons/loading-circle.tsx      |  20 --
 .../components/tailwind/ui/popover.tsx        |  31 ---
 .../components/tailwind/ui/scroll-area.tsx    |  40 ----
 apps/web/app/(editor)/components/topbar.tsx   |  86 +++++++
 .../{tailwind/ui/icons => ui}/asksvg.tsx      |   0
 .../ui/icons => ui}/autocompletesvg.tsx       |   0
 .../ui/icons => ui}/crazy-spinner.tsx         |   0
 .../{tailwind/ui/icons => ui}/magic.tsx       |   0
 .../{tailwind/ui/icons => ui}/rewritesvg.tsx  |   0
 .../ui/icons => ui}/translatesvg.tsx          |   0
 apps/web/app/(editor)/editor.tsx              | 131 ++---------
 apps/web/app/(editor)/lib/debouncedsave.ts    |  20 ++
 apps/web/app/(editor)/lib/editorprops.ts      |  16 ++
 apps/web/app/(editor)/styles/globals.css      |   5 +-
 apps/web/app/layout.tsx                       |   6 +-
 packages/ui/components/icons.tsx              |   4 +-
 .../ui => packages/ui/shadcn}/separator.tsx   |   0
 34 files changed, 419 insertions(+), 984 deletions(-)
 create mode 100644 apps/web/app/(editor)/ai.md
 delete mode 100644 apps/web/app/(editor)/api/generate/route.ts
 delete mode 100644 apps/web/app/(editor)/api/upload/route.ts
 create mode 100644 apps/web/app/(editor)/components/editorcommands.tsx
 delete mode 100644 apps/web/app/(editor)/components/tailwind/generative/ai-completion-command.tsx
 delete mode 100644 apps/web/app/(editor)/components/tailwind/generative/ai-selector-commands.tsx
 delete mode 100644 apps/web/app/(editor)/components/tailwind/generative/ai-selector.tsx
 delete mode 100644 apps/web/app/(editor)/components/tailwind/ui/button.tsx
 delete mode 100644 apps/web/app/(editor)/components/tailwind/ui/command.tsx
 delete mode 100644 apps/web/app/(editor)/components/tailwind/ui/icons/font-default.tsx
 delete mode 100644 apps/web/app/(editor)/components/tailwind/ui/icons/font-mono.tsx
 delete mode 100644 apps/web/app/(editor)/components/tailwind/ui/icons/font-serif.tsx
 delete mode 100644 apps/web/app/(editor)/components/tailwind/ui/icons/index.tsx
 delete mode 100644 apps/web/app/(editor)/components/tailwind/ui/icons/loading-circle.tsx
 delete mode 100644 apps/web/app/(editor)/components/tailwind/ui/popover.tsx
 delete mode 100644 apps/web/app/(editor)/components/tailwind/ui/scroll-area.tsx
 create mode 100644 apps/web/app/(editor)/components/topbar.tsx
 rename apps/web/app/(editor)/components/{tailwind/ui/icons => ui}/asksvg.tsx (100%)
 rename apps/web/app/(editor)/components/{tailwind/ui/icons => ui}/autocompletesvg.tsx (100%)
 rename apps/web/app/(editor)/components/{tailwind/ui/icons => ui}/crazy-spinner.tsx (100%)
 rename apps/web/app/(editor)/components/{tailwind/ui/icons => ui}/magic.tsx (100%)
 rename apps/web/app/(editor)/components/{tailwind/ui/icons => ui}/rewritesvg.tsx (100%)
 rename apps/web/app/(editor)/components/{tailwind/ui/icons => ui}/translatesvg.tsx (100%)
 create mode 100644 apps/web/app/(editor)/lib/debouncedsave.ts
 create mode 100644 apps/web/app/(editor)/lib/editorprops.ts
 rename {apps/web/app/(editor)/components/tailwind/ui => packages/ui/shadcn}/separator.tsx (100%)

diff --git a/apps/web/app/(auth)/signin/page.tsx b/apps/web/app/(auth)/signin/page.tsx
index 2f913a75..b84d3c7d 100644
--- a/apps/web/app/(auth)/signin/page.tsx
+++ b/apps/web/app/(auth)/signin/page.tsx
@@ -21,7 +21,7 @@ async function Signin() {
 
         <div>
           <h1 className="text-5xl text-foreground mb-8">
-            Hello, <span className="text-white">human</span>{" "}
+            Hello, <span className="text-white">human</span>
           </h1>
           <p className="text-white mb-8 text-lg">
             Write, ideate, and learn with all the wisdom of your bookmarks.
@@ -40,10 +40,14 @@ async function Signin() {
               >
                 <button
                   type="submit"
-                  className={`relative text-white transition-width flex justify-between w-full items-center rounded-2xl bg-[#37485E] px-6 py-4 outline-none duration-300 focus:outline-none`}
+                  className={`relative text-white transition-width flex justify-between w-full items-center rounded-lg bg-[#37485E] px-6 py-4 outline-none duration-300 focus:outline-none`}
                 >
-                  <Google />
-                  <span className="relative w-full self-start">
+                  <div className=""/>
+
+                  <div className="-translate-y-0">
+                    <Google />
+                  </div>
+                  <span className="text-xl font-medium tracking-wide relative w-full self-start">
                     Continue with Google
                   </span>
                 </button>
diff --git a/apps/web/app/(dash)/dynamicisland.tsx b/apps/web/app/(dash)/dynamicisland.tsx
index 6c911f3e..4da3298e 100644
--- a/apps/web/app/(dash)/dynamicisland.tsx
+++ b/apps/web/app/(dash)/dynamicisland.tsx
@@ -4,7 +4,7 @@ import { AddIcon } from "@repo/ui/icons";
 import Image from "next/image";
 
 import { AnimatePresence, useMotionValueEvent, useScroll } from "framer-motion";
-import { useState } from "react";
+import {  useState } from "react";
 import { motion } from "framer-motion";
 import { Label } from "@repo/ui/shadcn/label";
 import { Input } from "@repo/ui/shadcn/input";
@@ -81,6 +81,7 @@ function DynamicIslandContent() {
 const fakeitems = ["spaces", "page", "note"];
 
 function ToolBar({cancelfn}: {cancelfn: ()=> void}) {
+
   const [index, setIndex] = useState(0);
   return (
     <div className="flex flex-col items-center">
@@ -147,7 +148,7 @@ function SpaceForm({cancelfn}: {cancelfn: ()=> void}) {
     <div className="bg-[#1F2428] px-4 py-3 rounded-2xl mt-2 flex flex-col gap-3">
       <div >
         <Label className="text-[#858B92]" htmlFor="name">Name</Label>
-        <Input className="bg-[#2B3237] outline-none border-none focus:border-none focus:outline-none" id="name"/>
+        <Input  className="bg-[#2B3237] focus-visible:ring-0 border-none focus-visible:ring-offset-0" id="name"/>
       </div>
       <div className="flex justify-between">
         <a className="text-blue-500" href="">
@@ -164,11 +165,11 @@ function PageForm({cancelfn}: {cancelfn: ()=> void}) {
     <div className="bg-[#1F2428] px-4 py-3 rounded-2xl mt-2 flex flex-col gap-3">
     <div >
       <Label className="text-[#858B92]" htmlFor="name">Space</Label>
-      <Input className="bg-[#2B3237] outline-none border-none focus:border-none focus:outline-none" id="name"/>
+      <Input  className="bg-[#2B3237] focus-visible:ring-0 border-none focus-visible:ring-offset-0" id="name"/>
     </div>
     <div >
       <Label className="text-[#858B92]" htmlFor="name">Page Url</Label>
-      <Input className="bg-[#2B3237] outline-none border-none focus:border-none focus:outline-none" id="name"/>
+      <Input  className="bg-[#2B3237] focus-visible:ring-0 border-none focus-visible:ring-offset-0" id="name"/>
     </div>
     <div className="flex justify-end">
       <div onClick={cancelfn} className="bg-[#2B3237] px-2 py-1 rounded-xl cursor-pointer">cancel</div>
@@ -182,11 +183,11 @@ function NoteForm({cancelfn}: {cancelfn: ()=> void}) {
     <div className="bg-[#1F2428] px-4 py-3 rounded-2xl mt-2 flex flex-col gap-3">
     <div >
       <Label className="text-[#858B92]" htmlFor="name">Space</Label>
-      <Input className="bg-[#2B3237] outline-none border-none focus:border-none focus:outline-none" id="name"/>
+      <Input  className="bg-[#2B3237] focus-visible:ring-0 border-none focus-visible:ring-offset-0" id="name"/>
     </div>
     <div >
       <Label className="text-[#858B92]" htmlFor="name">Note</Label>
-      <Textarea cols={4} className="bg-[#2B3237] outline-none border-none resize-none" id="name"/>
+      <Textarea cols={4} className="bg-[#2B3237] focus-visible:ring-0 border-none focus-visible:ring-offset-0 resize-none" id="name"/>
     </div>
     <div className="flex justify-end">
       <div onClick={cancelfn} className="bg-[#2B3237] px-2 py-1 rounded-xl cursor-pointer">cancel</div>
diff --git a/apps/web/app/(editor)/ai.md b/apps/web/app/(editor)/ai.md
new file mode 100644
index 00000000..1528a7bd
--- /dev/null
+++ b/apps/web/app/(editor)/ai.md
@@ -0,0 +1,43 @@
+## to access the editor
+```
+import { useEditor } from "novel";
+const editor = useEditor()
+```
+
+## to get previous text
+```
+import { getPrevText } from "novel/utils";
+const pos = editor.state.selection.from;
+const text = getPrevText(editor, pos);
+```
+
+## selected content into markdown format 
+```
+const slice = editor.state.selection.content();
+const text = editor.storage.markdown.serializer.serialize(slice.content);
+```
+
+## replace Selection 
+```
+const selection = editor.view.state.selection;
+editor.chain().focus()
+  .insertContentAt(
+    {
+      from: selection.from,
+      to: selection.to,
+    },
+    completion,
+  )
+  .run();
+```
+
+
+## to insert after
+```
+const selection = editor.view.state.selection;
+editor
+  .chain()
+  .focus()
+  .insertContentAt(selection.to + 1, completion)
+  .run();
+```
diff --git a/apps/web/app/(editor)/api/generate/route.ts b/apps/web/app/(editor)/api/generate/route.ts
deleted file mode 100644
index ecd9effb..00000000
--- a/apps/web/app/(editor)/api/generate/route.ts
+++ /dev/null
@@ -1,141 +0,0 @@
-import { Ratelimit } from "@upstash/ratelimit";
-import { kv } from "@vercel/kv";
-import { OpenAIStream, StreamingTextResponse } from "ai";
-import OpenAI from "openai";
-import type { ChatCompletionMessageParam } from "openai/resources/index.mjs";
-import { match } from "ts-pattern";
-
-// Create an OpenAI API client (that's edge friendly!)
-
-// 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> {
-  const openai = new OpenAI({
-    apiKey: process.env.OPENAI_API_KEY,
-    baseURL: process.env.OPENAI_BASE_URL || "https://api.openai.com/v1",
-  });
-  // 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.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(),
-        },
-      });
-    }
-  }
-
-  const { prompt, option, command } = await req.json();
-  const messages = match(option)
-    .with("continue", () => [
-      {
-        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." +
-          "Use Markdown formatting when appropriate.",
-      },
-      {
-        role: "user",
-        content: prompt,
-      },
-    ])
-    .with("improve", () => [
-      {
-        role: "system",
-        content:
-          "You are an AI writing assistant that improves existing text. " +
-          "Limit your response to no more than 200 characters, but make sure to construct complete sentences." +
-          "Use Markdown formatting when appropriate.",
-      },
-      {
-        role: "user",
-        content: `The existing text is: ${prompt}`,
-      },
-    ])
-    .with("shorter", () => [
-      {
-        role: "system",
-        content:
-          "You are an AI writing assistant that shortens existing text. " + "Use Markdown formatting when appropriate.",
-      },
-      {
-        role: "user",
-        content: `The existing text is: ${prompt}`,
-      },
-    ])
-    .with("longer", () => [
-      {
-        role: "system",
-        content:
-          "You are an AI writing assistant that lengthens existing text. " +
-          "Use Markdown formatting when appropriate.",
-      },
-      {
-        role: "user",
-        content: `The existing text is: ${prompt}`,
-      },
-    ])
-    .with("fix", () => [
-      {
-        role: "system",
-        content:
-          "You are an AI writing assistant that fixes grammar and spelling errors in existing text. " +
-          "Limit your response to no more than 200 characters, but make sure to construct complete sentences." +
-          "Use Markdown formatting when appropriate.",
-      },
-      {
-        role: "user",
-        content: `The existing text is: ${prompt}`,
-      },
-    ])
-    .with("zap", () => [
-      {
-        role: "system",
-        content:
-          "You area an AI writing assistant that generates text based on a prompt. " +
-          "You take an input from the user and a command for manipulating the text" +
-          "Use Markdown formatting when appropriate.",
-      },
-      {
-        role: "user",
-        content: `For this text: ${prompt}. You have to respect the command: ${command}`,
-      },
-    ])
-    .run() as ChatCompletionMessageParam[];
-
-  const response = await openai.chat.completions.create({
-    model: "gpt-3.5-turbo",
-    stream: true,
-    messages,
-    temperature: 0.7,
-    top_p: 1,
-    frequency_penalty: 0,
-    presence_penalty: 0,
-    n: 1,
-  });
-
-  // Convert the response into a friendly text-stream
-  const stream = OpenAIStream(response);
-
-  // Respond with the stream
-  return new StreamingTextResponse(stream);
-}
diff --git a/apps/web/app/(editor)/api/upload/route.ts b/apps/web/app/(editor)/api/upload/route.ts
deleted file mode 100644
index ce7f1513..00000000
--- a/apps/web/app/(editor)/api/upload/route.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { put } from "@vercel/blob";
-import { NextResponse } from "next/server";
-
-export const runtime = "edge";
-
-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,
-    });
-  }
-
-  const file = req.body || "";
-  const filename = req.headers.get("x-vercel-filename") || "file.txt";
-  const contentType = req.headers.get("content-type") || "text/plain";
-  const fileType = `.${contentType.split("/")[1]}`;
-
-  // construct final filename based on content-type if not provided
-  const finalName = filename.includes(fileType) ? filename : `${filename}${fileType}`;
-  const blob = await put(finalName, file, {
-    contentType,
-    access: "public",
-  });
-
-  return NextResponse.json(blob);
-}
diff --git a/apps/web/app/(editor)/components/aigenerate.tsx b/apps/web/app/(editor)/components/aigenerate.tsx
index 91c97584..b1c4ccd4 100644
--- a/apps/web/app/(editor)/components/aigenerate.tsx
+++ b/apps/web/app/(editor)/components/aigenerate.tsx
@@ -1,90 +1,94 @@
-import React, { useEffect, useState } from 'react'
-import Magic from './tailwind/ui/icons/magic'
-import CrazySpinner from './tailwind/ui/icons/crazy-spinner'
-import Asksvg from './tailwind/ui/icons/asksvg'
-import Rewritesvg from './tailwind/ui/icons/rewritesvg'
-import Translatesvg from './tailwind/ui/icons/translatesvg'
-import Autocompletesvg from './tailwind/ui/icons/autocompletesvg'
-import { motion, AnimatePresence } from "framer-motion"
-import { GoogleGenerativeAI } from "@google/generative-ai";
-import type { Editor } from '@tiptap/core'
-import { removeAIHighlight } from 'novel/extensions'
-import { useEditor } from 'novel'
+import React, {  useEffect, useRef, useState } from "react";
+import Magic from "./ui/magic";
+import CrazySpinner from "./ui/crazy-spinner";
+import Asksvg from "./ui/asksvg";
+import Rewritesvg from "./ui/rewritesvg";
+import Translatesvg from "./ui/translatesvg";
+import Autocompletesvg from "./ui/autocompletesvg";
+import { motion, AnimatePresence } from "framer-motion";
+import type { Editor } from "@tiptap/core";
+import { useEditor } from "novel";
 
 
 function Aigenerate() {
-  const [visible, setVisible] = useState(false)
-  const [generating, setGenerating] = useState(false)
+  const [visible, setVisible] = useState(false);
+  const [generating, setGenerating] = useState(false);
+  
+  // generating -> can be converted to false, so we need to make sure the generation gets cancelled
+  // visible 
 
   const { editor } = useEditor();
-
-  useEffect(()=> {
-    if (!visible) {
-      setGenerating(visible)
-    } else{
-      removeAIHighlight(editor);
-      editor.chain().unsetHighlight().run();
-    }
-
-  }, [visible])
-
-  const setGeneratingfn = (v: boolean) => setGenerating(v)
+  const setGeneratingfn = (v: boolean) => setGenerating(v);
 
   return (
-  <div  className="z-[60] bg-[#171B1F] fixed left-0 bottom-0 w-screen flex justify-center py-4">
-    <motion.div
-      animate={{
-        y: visible ? "30%" : 0,
-      }}
-     onClick={()=> {
-      setVisible(!visible);
-     }}
-     className={`select-none relative z-[70] rounded-3xl text-[#369DFD] bg-[#21303D] px-4 py-3 text-sm flex gap-2 items-center font-medium whitespace-nowrap overflow-hidden transition-[width] w-[6.25rem] ${visible && "w-[10.56rem]"}`}>
-      <Magic className="h-4 w-4 shrink-0 translate-y-[5%]" />
-      {
-        (visible && generating) ? (
-          <>Generating <CrazySpinner /></>
+    <div className="z-[60] bg-[#171B1F] fixed left-0 bottom-0 w-screen flex justify-center pt-4 pb-6">
+      <motion.div
+        animate={{
+          y: visible ? "30%" : 0,
+        }}
+        onClick={() => {
+          setVisible(!visible);
+          if (visible) editor?.commands.unsetAIHighlight();
+        }}
+        className={`select-none relative z-[70] rounded-3xl text-[#369DFD] bg-[#21303D] px-4 py-3 text-sm flex gap-2 items-center font-medium whitespace-nowrap overflow-hidden transition-[width] w-[6.25rem] ${visible && "w-[10.55rem]"}`}
+      >
+        <Magic className="h-4 w-4 shrink-0 translate-y-[5%]" />
+        {visible && generating ? (
+          <>
+            Generating <CrazySpinner />
+          </>
         ) : visible ? (
           <>Press Commands</>
         ) : (
           <>Ask AI</>
-        )
-      }
-    </motion.div>
-    <motion.div 
-      initial={{
-        opacity: 0,
-        y: 20,
-      }}
-      animate={{
-        y: visible ? "-60%" : 20,
-        opacity: visible ? 1 : 0,
-      }}
-      whileHover={{ scale: 1.05 }}
-      transition={{
-        duration: 0.2,
-      }}
-    className='absolute z-50 top-0'>
-      <ToolBar setGeneratingfn={setGeneratingfn} editor={editor} />
-    </motion.div>
-  </div>
-  )
+        )}
+      </motion.div>
+      <motion.div
+        initial={{
+          opacity: 0,
+          y: 20,
+        }}
+        animate={{
+          y: visible ? "-60%" : 20,
+          opacity: visible ? 1 : 0,
+        }}
+        whileHover={{ scale: 1.05 }}
+        transition={{
+          duration: 0.2,
+        }}
+        className="absolute z-50 top-0"
+      >
+        <ToolBar  setGeneratingfn={setGeneratingfn} editor={editor} />
+        <div className="h-8 w-18rem bg-blue-600  blur-[16rem]" />
+      </motion.div>
+    </div>
+  );
 }
 
-export default Aigenerate
+export default Aigenerate;
 
 const options = [
-  <div  className='flex items-center whitespace-nowrap gap-3 relative z-[60] pointer-events-none'><Translatesvg />Translate</div>,
-  <div  className='flex items-center whitespace-nowrap gap-3 relative z-[60] pointer-events-none'><Rewritesvg />Change Tone</div>,
-  <div  className='flex items-center whitespace-nowrap gap-3 relative z-[60] pointer-events-none'><Asksvg />Ask Gemini</div>,
-  <div  className='flex items-center whitespace-nowrap gap-3 relative z-[60] pointer-events-none'><Autocompletesvg />Auto Complete</div>
+  <><Translatesvg />Translate</>,
+  <><Rewritesvg />Change Tone</>,
+  <><Asksvg />Ask Gemini</>,
+  <><Autocompletesvg />Auto Complete</>
 ];
 
-function ToolBar({editor, setGeneratingfn}: {editor:Editor, setGeneratingfn:  (v: boolean) => void}) {
+function ToolBar({
+  editor,
+  setGeneratingfn,
+}: {
+  editor: Editor;
+  setGeneratingfn: (v: boolean) => void;
+}) {
   const [index, setIndex] = useState(0);
 
   return (
-    <div className={"flex gap-6 bg-[#1F2428] active:scale-[.98] transition rounded-3xl px-1 py-1 text-sm font-medium"}>
+    <div
+      className={
+        "select-none flex gap-6 bg-[#1F2428] active:scale-[.98] transition rounded-3xl px-1 py-1 text-sm font-medium"
+      }
+    >
       {options.map((item, idx) => (
         <div
           key={idx}
@@ -94,8 +98,10 @@ function ToolBar({editor, setGeneratingfn}: {editor:Editor, setGeneratingfn:  (v
           <AnimatePresence>
             {index === idx && (
               <motion.span
-                onClick={()=> AigenerateContent({idx, editor,setGeneratingfn })}
-                className="absolute inset-0 block h-full w-full rounded-xl bg-[#33393D]"
+                onClick={() =>
+                  AigenerateContent({ idx, editor, setGeneratingfn })
+                }
+                className="absolute select-none inset-0 block h-full w-full rounded-xl bg-[#33393D]"
                 layoutId="hoverBackground"
                 initial={{ opacity: 0 }}
                 animate={{
@@ -109,36 +115,63 @@ function ToolBar({editor, setGeneratingfn}: {editor:Editor, setGeneratingfn:  (v
               />
             )}
           </AnimatePresence>
+          <div className="select-none flex items-center whitespace-nowrap gap-3 relative z-[60] pointer-events-none">
           {item}
+          </div>
         </div>
       ))}
     </div>
   );
 }
 
-async function AigenerateContent({idx, editor, setGeneratingfn}:{idx:number, editor:Editor, setGeneratingfn: (v:boolean) => void}){
-    setGeneratingfn(true);
-    const from = editor.view.state.selection.from
-    const to = editor.view.state.selection.to
-    editor.chain().setTextSelection({from, to}).run();
-    editor.commands.setAIHighlight({color: "#0538A2"})
-    const query = editor.state.doc.textBetween(from, to, " $$$ ")
-    console.log("hello there!", from, to)
-    setGeneratingfn(false);
+async function AigenerateContent({
+  idx,
+  editor,
+  setGeneratingfn,
+}: {
+  idx: number;
+  editor: Editor;
+  setGeneratingfn: (v: boolean) => void;
+}) {
+  setGeneratingfn(true);
 
-    // const genAI = new GoogleGenerativeAI("AIzaSyDGwJCP9SH5gryyvh65LJ6xTZ0SOdNvzyY");
-    // const model = genAI.getGenerativeModel({ model: "gemini-pro"});
+  const {from, to} = editor.view.state.selection;
+  const content = editor.view.state.selection.content();
+  content.content.forEach((v, i)=> {
+    v.forEach((v, i)=> {
+      console.log(v.text)
+    })
+  })
 
-    
+  const transaction = editor.state.tr
+  transaction.replaceRange(from, to, content)
 
-    // const result = (await model.generateContent(`${ty}, ${query}`)).response.text();
+  editor.view.dispatch(transaction)
 
-    // .insertContentAt(
-    //   {
-    //     from: from,
-    //     to: to,
-    //   },
-    //   result,
-    // )
-    // .run();
+  // console.log(content)
+  // content.map((v, i)=> console.log(v.content))
+
+  // const fragment = Fragment.fromArray(content);
+
+  // console.log(fragment)
+
+  // editor.view.state.selection.content().content.append(content)
+
+  setGeneratingfn(false);
+
+
+
+  // const genAI = new GoogleGenerativeAI("AIzaSyDGwJCP9SH5gryyvh65LJ6xTZ0SOdNvzyY");
+  // const model = genAI.getGenerativeModel({ model: "gemini-pro"});
+
+  // const result = (await model.generateContent(`${ty}, ${query}`)).response.text();
+
+  // .insertContentAt(
+  //   {
+  //     from: from,
+  //     to: to,
+  //   },
+  //   result,
+  // )
+  // .run();
 }
diff --git a/apps/web/app/(editor)/components/editorcommands.tsx b/apps/web/app/(editor)/components/editorcommands.tsx
new file mode 100644
index 00000000..8e80df46
--- /dev/null
+++ b/apps/web/app/(editor)/components/editorcommands.tsx
@@ -0,0 +1,85 @@
+import React, { useState } from "react";
+import {
+  EditorBubble,
+  EditorCommand,
+  EditorCommandEmpty,
+  EditorCommandItem,
+  EditorCommandList,
+} from "novel";
+import { suggestionItems } from "./slash-command";
+import { Separator } from "@repo/ui/shadcn/separator";
+import { NodeSelector } from "./selectors/node-selector";
+import { LinkSelector } from "./selectors/link-selector";
+import { TextButtons } from "./selectors/text-buttons";
+import { ColorSelector } from "./selectors/color-selector";
+import { BgColorSelector } from "./selectors/bgcolor-selector";
+
+function EditorCommands() {
+  return (
+    <>
+      <SlashCommand />
+      <PopupMenu />
+    </>
+  );
+}
+
+function SlashCommand() {
+  return (
+    <EditorCommand className="z-50 h-auto max-h-[330px] min-w-[20rem] overflow-y-auto rounded-lg bg-[#1F2428]  shadow-md transition-all">
+      <EditorCommandEmpty className="px-4 text-lg text-muted-foreground">
+        No results
+      </EditorCommandEmpty>
+      <EditorCommandList>
+        {suggestionItems.map((item) => (
+          <EditorCommandItem
+            value={item.title}
+            onCommand={(val) => item.command(val)}
+            className="flex w-full items-center space-x-4 rounded-md px-4 py-3 text-left text-sm hover:bg-accent aria-selected:bg-[#21303D] group/command"
+            key={item.title}
+          >
+            <div className="flex h-11 w-11 items-center justify-center rounded-md bg-[#2D343A] group-aria-selected/command:bg-[#369DFD33] stroke-[#989EA4] group-aria-selected/command:stroke-[#369DFD]">
+              {item.icon}
+            </div>
+            <div>
+              <p className="font-medium text-[#FFFFFF] group-aria-selected/command:text-[#369DFD]">
+                {item.title}
+              </p>
+              <p className="text-xs text-muted-foreground group-aria-selected/command:text-[#369DFDB2]">
+                {item.description}
+              </p>
+            </div>
+          </EditorCommandItem>
+        ))}
+      </EditorCommandList>
+    </EditorCommand>
+  );
+}
+
+function PopupMenu() {
+  const [openNode, setOpenNode] = useState(false);
+  const [openColor, setOpenColor] = useState(false);
+  const [openBgColor, setOpenBgColor] = useState(false);
+  const [openLink, setOpenLink] = useState(false);
+  const [openMenu, setOpenMenu] = useState(false);
+  return (
+    <EditorBubble
+      tippyOptions={{
+        placement: openMenu ? "bottom-start" : "top",
+      }}
+      className="flex w-fit max-w-[90vw] overflow-hidden bg-[#1F2428] text-white rounded "
+    >
+      <Separator orientation="vertical" />
+      <NodeSelector open={openNode} onOpenChange={setOpenNode} />
+      <Separator orientation="vertical" />
+      <LinkSelector open={openLink} onOpenChange={setOpenLink} />
+      <Separator orientation="vertical" />
+      <TextButtons />
+      <Separator orientation="vertical" />
+      <ColorSelector open={openColor} onOpenChange={setOpenColor} />
+      <Separator orientation="vertical" />
+      <BgColorSelector open={openBgColor} onOpenChange={setOpenBgColor} />
+    </EditorBubble>
+  );
+}
+
+export default EditorCommands;
diff --git a/apps/web/app/(editor)/components/image-upload.ts b/apps/web/app/(editor)/components/image-upload.ts
index 0cf93a40..d10be168 100644
--- a/apps/web/app/(editor)/components/image-upload.ts
+++ b/apps/web/app/(editor)/components/image-upload.ts
@@ -2,32 +2,22 @@ import { createImageUpload } from "novel/plugins";
 import { toast } from "sonner";
 
 const onUpload = (file: File) => {
-  const promise = fetch("/api/upload", {
+  //Endpoint: to upload the image
+  const promise = fetch("", {
     method: "POST",
-    headers: {
-      "content-type": file?.type || "application/octet-stream",
-      "x-vercel-filename": file?.name || "image.png",
-    },
     body: file,
   });
 
   return new Promise((resolve, reject) => {
     toast.promise(
       promise.then(async (res) => {
-        // Successfully uploaded image
         if (res.status === 200) {
           const { url } = (await res.json()) as { url: string };
-          // preload the image
           const image = new Image();
           image.src = url;
           image.onload = () => {
             resolve(url);
           };
-          // No blob store configured
-        } else if (res.status === 401) {
-          resolve(file);
-          throw new Error("`BLOB_READ_WRITE_TOKEN` environment variable not found, reading image locally instead.");
-          // Unknown error
         } else {
           throw new Error("Error uploading image. Please try again.");
         }
diff --git a/apps/web/app/(editor)/components/tailwind/generative/ai-completion-command.tsx b/apps/web/app/(editor)/components/tailwind/generative/ai-completion-command.tsx
deleted file mode 100644
index 7d37b74a..00000000
--- a/apps/web/app/(editor)/components/tailwind/generative/ai-completion-command.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { CommandGroup, CommandItem, CommandSeparator } from "../ui/command";
-import { useEditor } from "novel";
-import { Check, TextQuote, TrashIcon } from "lucide-react";
-
-const AICompletionCommands = ({
-  completion,
-  onDiscard,
-}: {
-  completion: string;
-  onDiscard: () => void;
-}) => {
-  const { editor } = useEditor();
-  return (
-    <>
-      <CommandGroup>
-        <CommandItem
-          className="gap-2 px-4"
-          value="replace"
-          onSelect={() => {
-            const selection = editor.view.state.selection;
-
-            editor
-              .chain()
-              .focus()
-              .insertContentAt(
-                {
-                  from: selection.from,
-                  to: selection.to,
-                },
-                completion,
-              )
-              .run();
-          }}
-        >
-          <Check className="h-4 w-4 text-muted-foreground" />
-          Replace selection
-        </CommandItem>
-        <CommandItem
-          className="gap-2 px-4"
-          value="insert"
-          onSelect={() => {
-            const selection = editor.view.state.selection;
-            editor
-              .chain()
-              .focus()
-              .insertContentAt(selection.to + 1, completion)
-              .run();
-          }}
-        >
-          <TextQuote className="h-4 w-4 text-muted-foreground" />
-          Insert below
-        </CommandItem>
-      </CommandGroup>
-      <CommandSeparator />
-
-      <CommandGroup>
-        <CommandItem onSelect={onDiscard} value="thrash" className="gap-2 px-4">
-          <TrashIcon className="h-4 w-4 text-muted-foreground" />
-          Discard
-        </CommandItem>
-      </CommandGroup>
-    </>
-  );
-};
-
-export default AICompletionCommands;
diff --git a/apps/web/app/(editor)/components/tailwind/generative/ai-selector-commands.tsx b/apps/web/app/(editor)/components/tailwind/generative/ai-selector-commands.tsx
deleted file mode 100644
index dad106b0..00000000
--- a/apps/web/app/(editor)/components/tailwind/generative/ai-selector-commands.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { ArrowDownWideNarrow, CheckCheck, RefreshCcwDot, StepForward, WrapText } from "lucide-react";
-import { useEditor } from "novel";
-import { getPrevText } from "novel/utils";
-import { CommandGroup, CommandItem, CommandSeparator } from "../ui/command";
-
-const options = [
-  {
-    value: "improve",
-    label: "Improve writing",
-    icon: RefreshCcwDot,
-  },
-
-  {
-    value: "fix",
-    label: "Fix grammar",
-    icon: CheckCheck,
-  },
-  {
-    value: "shorter",
-    label: "Make shorter",
-    icon: ArrowDownWideNarrow,
-  },
-  {
-    value: "longer",
-    label: "Make longer",
-    icon: WrapText,
-  },
-];
-
-interface AISelectorCommandsProps {
-  onSelect: (value: string, option: string) => void;
-}
-
-const AISelectorCommands = ({ onSelect }: AISelectorCommandsProps) => {
-  const { editor } = useEditor();
-
-  return (
-    <>
-      <CommandGroup heading="Edit or review selection">
-        {options.map((option) => (
-          <CommandItem
-            onSelect={(value) => {
-              const slice = editor.state.selection.content();
-              const text = editor.storage.markdown.serializer.serialize(slice.content);
-              onSelect(text, value);
-            }}
-            className="flex gap-2 px-4"
-            key={option.value}
-            value={option.value}
-          >
-            <option.icon className="h-4 w-4 text-purple-500" />
-            {option.label}
-          </CommandItem>
-        ))}
-      </CommandGroup>
-      <CommandSeparator />
-      <CommandGroup heading="Use AI to do more">
-        <CommandItem
-          onSelect={() => {
-            const pos = editor.state.selection.from;
-
-            const text = getPrevText(editor, pos);
-            onSelect(text, "continue");
-          }}
-          value="continue"
-          className="gap-2 px-4"
-        >
-          <StepForward className="h-4 w-4 text-purple-500" />
-          Continue writing
-        </CommandItem>
-      </CommandGroup>
-    </>
-  );
-};
-
-export default AISelectorCommands;
diff --git a/apps/web/app/(editor)/components/tailwind/generative/ai-selector.tsx b/apps/web/app/(editor)/components/tailwind/generative/ai-selector.tsx
deleted file mode 100644
index 88ca1681..00000000
--- a/apps/web/app/(editor)/components/tailwind/generative/ai-selector.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-"use client";
-
-import { Command, CommandInput } from "@/components/tailwind/ui/command";
-
-import { useCompletion } from "ai/react";
-import { ArrowUp } from "lucide-react";
-import { useEditor } from "novel";
-import { addAIHighlight } from "novel/extensions";
-import { useState } from "react";
-import Markdown from "react-markdown";
-import { toast } from "sonner";
-import { Button } from "../ui/button";
-import CrazySpinner from "../ui/icons/crazy-spinner";
-import Magic from "../ui/icons/magic";
-import { ScrollArea } from "../ui/scroll-area";
-import AICompletionCommands from "./ai-completion-command";
-import AISelectorCommands from "./ai-selector-commands";
-//TODO: I think it makes more sense to create a custom Tiptap extension for this functionality https://tiptap.dev/docs/editor/ai/introduction
-
-interface AISelectorProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-}
-
-export function AISelector({ onOpenChange }: AISelectorProps) {
-  const { editor } = useEditor();
-  const [inputValue, setInputValue] = useState("");
-
-  const { completion, complete, isLoading } = useCompletion({
-    // id: "novel",
-    api: "/api/generate",
-    onResponse: (response) => {
-      if (response.status === 429) {
-        toast.error("You have reached your request limit for the day.");
-        return;
-      }
-    },
-    onError: (e) => {
-      toast.error(e.message);
-    },
-  });
-
-  const hasCompletion = completion.length > 0;
-
-  return (
-    <Command className="w-[350px]">
-      {hasCompletion && (
-        <div className="flex max-h-[400px]">
-          <ScrollArea>
-            <div className="prose p-2 px-4 prose-sm">
-              <Markdown>{completion}</Markdown>
-            </div>
-          </ScrollArea>
-        </div>
-      )}
-
-      {isLoading && (
-        <div className="flex h-12 w-full items-center px-4 text-sm font-medium text-muted-foreground text-purple-500">
-          <Magic className="mr-2 h-4 w-4 shrink-0  " />
-          AI is thinking
-          <div className="ml-2 mt-1">
-            <CrazySpinner />
-          </div>
-        </div>
-      )}
-      {!isLoading && (
-        <>
-          <div className="relative">
-            <CommandInput
-              value={inputValue}
-              onValueChange={setInputValue}
-              autoFocus
-              placeholder={hasCompletion ? "Tell AI what to do next" : "Ask AI to edit or generate..."}
-              onFocus={() => addAIHighlight(editor)}
-            />
-            <Button
-              size="icon"
-              className="absolute right-2 top-1/2 h-6 w-6 -translate-y-1/2 rounded-full bg-purple-500 hover:bg-purple-900"
-              onClick={() => {
-                if (completion)
-                  return complete(completion, {
-                    body: { option: "zap", command: inputValue },
-                  }).then(() => setInputValue(""));
-
-                const slice = editor.state.selection.content();
-                const text = editor.storage.markdown.serializer.serialize(slice.content);
-
-                complete(text, {
-                  body: { option: "zap", command: inputValue },
-                }).then(() => setInputValue(""));
-              }}
-            >
-              <ArrowUp className="h-4 w-4" />
-            </Button>
-          </div>
-          {hasCompletion ? (
-            <AICompletionCommands
-              onDiscard={() => {
-                editor.chain().unsetHighlight().focus().run();
-                onOpenChange(false);
-              }}
-              completion={completion}
-            />
-          ) : (
-            <AISelectorCommands onSelect={(value, option) => complete(value, { body: { option } })} />
-          )}
-        </>
-      )}
-    </Command>
-  );
-}
diff --git a/apps/web/app/(editor)/components/tailwind/ui/button.tsx b/apps/web/app/(editor)/components/tailwind/ui/button.tsx
deleted file mode 100644
index 9995a5e8..00000000
--- a/apps/web/app/(editor)/components/tailwind/ui/button.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "@repo/ui/lib/utils";
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
-  },
-);
-Button.displayName = "Button";
-
-export { Button, buttonVariants };
diff --git a/apps/web/app/(editor)/components/tailwind/ui/command.tsx b/apps/web/app/(editor)/components/tailwind/ui/command.tsx
deleted file mode 100644
index 751bbc53..00000000
--- a/apps/web/app/(editor)/components/tailwind/ui/command.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-"use client";
-
-import * as React from "react";
-import type { DialogProps } from "@radix-ui/react-dialog";
-import { Command as CommandPrimitive } from "cmdk";
-
-import { cn } from "@repo/ui/lib/utils";
-import { Dialog, DialogContent } from "@repo/ui/shadcn/dialog";
-import Magic from "./icons/magic";
-
-const Command = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive
-    ref={ref}
-    className={cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-      className,
-    )}
-    {...props}
-  />
-));
-Command.displayName = CommandPrimitive.displayName;
-
-interface CommandDialogProps extends DialogProps {}
-
-const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
-  return (
-    <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0 shadow-lg">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
-          {children}
-        </Command>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-const CommandInput = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b px-4" cmdk-input-wrapper="">
-    <Magic className="mr-2 h-4 w-4 shrink-0 text-purple-500 " />
-    <CommandPrimitive.Input
-      ref={ref}
-      className={cn(
-        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-        className,
-      )}
-      {...props}
-    />
-  </div>
-));
-
-CommandInput.displayName = CommandPrimitive.Input.displayName;
-
-const CommandList = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.List
-    ref={ref}
-    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
-    {...props}
-  />
-));
-
-CommandList.displayName = CommandPrimitive.List.displayName;
-
-const CommandEmpty = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Empty>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, ref) => <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />);
-
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
-
-const CommandGroup = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Group>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Group
-    ref={ref}
-    className={cn(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
-      className,
-    )}
-    {...props}
-  />
-));
-
-CommandGroup.displayName = CommandPrimitive.Group.displayName;
-
-const CommandSeparator = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Separator ref={ref} className={cn("-mx-1 h-px bg-border", className)} {...props} />
-));
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
-
-const CommandItem = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className,
-    )}
-    {...props}
-  />
-));
-
-CommandItem.displayName = CommandPrimitive.Item.displayName;
-
-const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return <span className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)} {...props} />;
-};
-CommandShortcut.displayName = "CommandShortcut";
-
-export {
-  Command,
-  CommandDialog,
-  CommandInput,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandShortcut,
-  CommandSeparator,
-};
diff --git a/apps/web/app/(editor)/components/tailwind/ui/icons/font-default.tsx b/apps/web/app/(editor)/components/tailwind/ui/icons/font-default.tsx
deleted file mode 100644
index bf29e4b5..00000000
--- a/apps/web/app/(editor)/components/tailwind/ui/icons/font-default.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-export default function FontDefault({ className }: { className?: string }) {
-  return (
-    <svg width="27" height="17" viewBox="0 0 27 17" xmlns="http://www.w3.org/2000/svg" className={className}>
-      <title>Font Default Icon</title>
-      <path
-        d="M2.67735 16.7224H0L6.01587 0H8.92994L14.9458 16.7224H12.2685L7.54229 3.03746H7.41169L2.67735 16.7224ZM3.12629 10.1739H11.8114V12.2968H3.12629V10.1739Z"
-        fill="currentColor"
-      />
-      <path
-        d="M20.8127 17C20.0182 17 19.2999 16.853 18.6578 16.5591C18.0156 16.2597 17.5068 15.8269 17.1314 15.2608C16.7613 14.6947 16.5763 14.0006 16.5763 13.1787C16.5763 12.471 16.7123 11.8886 16.9844 11.4313C17.2565 10.9741 17.6238 10.6121 18.0864 10.3453C18.5489 10.0786 19.0659 9.8772 19.6373 9.74111C20.2087 9.60503 20.7909 9.5016 21.3841 9.43084C22.1351 9.34374 22.7445 9.27298 23.2125 9.21854C23.6805 9.15866 24.0206 9.0634 24.2329 8.93276C24.4451 8.80211 24.5512 8.58982 24.5512 8.29587V8.23871C24.5512 7.52562 24.3499 6.9731 23.9472 6.58117C23.5499 6.18924 22.9568 5.99328 22.1677 5.99328C21.346 5.99328 20.6984 6.17563 20.225 6.54035C19.757 6.89962 19.4332 7.29971 19.2536 7.74063L16.9599 7.21806C17.232 6.45597 17.6293 5.84086 18.1517 5.37272C18.6795 4.89914 19.2863 4.5562 19.972 4.3439C20.6576 4.12616 21.3787 4.01729 22.1351 4.01729C22.6357 4.01729 23.1663 4.07717 23.7268 4.19693C24.2927 4.31124 24.8206 4.52354 25.3103 4.83381C25.8055 5.14409 26.2109 5.58774 26.5266 6.16475C26.8422 6.73631 27 7.47935 27 8.39385V16.7224H24.6165V15.0077H24.5186C24.3607 15.3234 24.124 15.6337 23.8084 15.9385C23.4928 16.2434 23.0874 16.4965 22.5922 16.6979C22.097 16.8993 21.5038 17 20.8127 17ZM21.3433 15.0403C22.0181 15.0403 22.5949 14.907 23.0738 14.6403C23.5581 14.3735 23.9254 14.0251 24.1757 13.5951C24.4315 13.1596 24.5594 12.6942 24.5594 12.1988V10.5821C24.4723 10.6692 24.3036 10.7509 24.0533 10.8271C23.8084 10.8979 23.5282 10.9605 23.2125 11.0149C22.8969 11.0639 22.5894 11.1102 22.2902 11.1537C21.9909 11.1918 21.7405 11.2245 21.5392 11.2517C21.0658 11.3116 20.6331 11.4123 20.2413 11.5538C19.855 11.6953 19.5448 11.8995 19.3108 12.1662C19.0822 12.4275 18.968 12.7759 18.968 13.2113C18.968 13.8156 19.1911 14.2728 19.6373 14.5831C20.0835 14.8879 20.6522 15.0403 21.3433 15.0403Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
diff --git a/apps/web/app/(editor)/components/tailwind/ui/icons/font-mono.tsx b/apps/web/app/(editor)/components/tailwind/ui/icons/font-mono.tsx
deleted file mode 100644
index 6e7b301b..00000000
--- a/apps/web/app/(editor)/components/tailwind/ui/icons/font-mono.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-export default function FontMono({ className }: { className?: string }) {
-  return (
-    <svg
-      width="28"
-      height="19"
-      viewBox="0 0 28 19"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-    >
-      <title>Font Mono Icon</title>
-      <path
-        d="M10.4513 13.9906H3.35401L3.80321 11.8861H9.94225L10.4513 13.9906ZM7.06738 5.72075L2.90481 18.6739H0L6.4984 0H7.66631L14.1647 18.6739H11.1701L7.06738 5.72075Z"
-        fill="currentColor"
-      />
-      <path
-        d="M20.6032 19C19.066 19 17.8681 18.6542 17.0096 17.9626C16.1711 17.2512 15.7519 16.3323 15.7519 15.2059C15.7519 14.455 15.9216 13.7832 16.261 13.1903C16.6203 12.5777 17.1194 12.0541 17.7583 11.6193C18.4171 11.1846 19.2057 10.8487 20.1241 10.6115C21.0424 10.3547 22.0806 10.2262 23.2385 10.2262C23.4781 10.2262 23.7276 10.2361 23.9872 10.2559C24.2667 10.2559 24.5562 10.2657 24.8556 10.2855C25.175 10.3053 25.4945 10.325 25.8139 10.3448L25.9037 12.4493C25.6242 12.4098 25.3248 12.3801 25.0053 12.3604C24.7059 12.3406 24.4064 12.3307 24.107 12.3307C23.8075 12.3307 23.528 12.3307 23.2685 12.3307C22.4898 12.3307 21.8111 12.39 21.2321 12.5086C20.6731 12.6074 20.2039 12.7655 19.8246 12.9828C19.4652 13.2002 19.1957 13.467 19.016 13.7832C18.8364 14.0993 18.7465 14.4649 18.7465 14.8799C18.7465 15.2158 18.8064 15.5122 18.9262 15.7691C19.046 16.0062 19.2057 16.194 19.4053 16.3323C19.625 16.4706 19.8745 16.5793 20.154 16.6583C20.4535 16.7176 20.7729 16.7473 21.1123 16.7473C21.7711 16.7473 22.3501 16.6386 22.8492 16.4212C23.3483 16.2038 23.7676 15.8877 24.107 15.4727C24.4663 15.038 24.7358 14.5044 24.9155 13.8721C25.0952 13.22 25.185 12.4592 25.185 11.5897C25.185 10.3843 25.0453 9.44566 24.7658 8.77379C24.5062 8.10192 24.1169 7.63755 23.5979 7.38066C23.0788 7.12376 22.4299 6.99532 21.6513 6.99532C21.0125 6.99532 20.3936 7.104 19.7947 7.32137C19.2157 7.51898 18.6467 7.89444 18.0877 8.44774L16.5005 6.66927C17.2592 5.95788 18.0877 5.4441 18.9861 5.12793C19.9045 4.81175 20.8428 4.65367 21.8011 4.65367C22.6795 4.65367 23.4881 4.76235 24.2267 4.97972C24.9854 5.17733 25.6442 5.51326 26.2032 5.98752C26.7822 6.46178 27.2214 7.104 27.5209 7.9142C27.8403 8.72439 28 9.75195 28 10.9969V18.6739H24.8856V16.9844C24.626 17.3796 24.3365 17.7155 24.0171 17.9922C23.6977 18.2491 23.3483 18.4566 22.969 18.6147C22.6096 18.753 22.2303 18.8518 21.831 18.9111C21.4317 18.9704 21.0225 19 20.6032 19Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
diff --git a/apps/web/app/(editor)/components/tailwind/ui/icons/font-serif.tsx b/apps/web/app/(editor)/components/tailwind/ui/icons/font-serif.tsx
deleted file mode 100644
index 92225a36..00000000
--- a/apps/web/app/(editor)/components/tailwind/ui/icons/font-serif.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-export default function FontSerif({ className }: { className?: string }) {
-  return (
-    <svg
-      width="31"
-      height="18"
-      viewBox="0 0 31 18"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-    >
-      <title>Font Serif Icon</title>
-
-      <path
-        d="M0.108486 17.8929C0.0361621 17.8214 0 17.6875 0 17.4911C0 17.1696 0.0180811 17.0089 0.0542432 17.0089C0.198892 17.0089 0.406824 16.9732 0.67804 16.9018C0.967337 16.8304 1.23855 16.7411 1.49169 16.6339C1.7629 16.5089 1.93467 16.3839 2.007 16.2589C2.18781 15.9911 2.35958 15.6875 2.52231 15.3482C2.68504 14.9911 2.85681 14.5982 3.03762 14.1696L8.08224 2.11607C8.51619 1.02679 8.85069 0.383929 9.08574 0.1875C9.21231 0.0625 9.366 0 9.54681 0C9.67337 0 9.78186 0.0446429 9.87227 0.133929L15.5678 14.1696C15.7125 14.5089 15.8481 14.8482 15.9746 15.1875C16.1193 15.5089 16.2549 15.8214 16.3815 16.125C16.4538 16.3036 16.6165 16.4643 16.8696 16.6071C17.1228 16.7321 17.385 16.8304 17.6562 16.9018C17.9274 16.9732 18.1353 17.0089 18.28 17.0089C18.3523 17.0089 18.3885 17.1696 18.3885 17.4911C18.3885 17.6875 18.3704 17.8214 18.3342 17.8929L14.9169 17.7321L11.3911 17.8929C11.3188 17.8214 11.2826 17.6518 11.2826 17.3839C11.2826 17.1339 11.3188 17.0089 11.3911 17.0089C11.608 17.0089 11.9064 16.9554 12.2861 16.8482C12.6658 16.7411 12.8918 16.6161 12.9641 16.4732C13.0184 16.3661 13.0455 16.25 13.0455 16.125C13.0455 15.9464 13.0003 15.7054 12.9099 15.4018C12.8195 15.0982 12.6929 14.7232 12.5302 14.2768L11.5809 11.7857C11.5086 11.7143 11.4453 11.6786 11.3911 11.6786C11.1018 11.6607 10.7582 11.6518 10.3605 11.6518C9.98075 11.6339 9.54681 11.625 9.05862 11.625C8.08224 11.625 7.05162 11.6518 5.96675 11.7054C5.85827 11.7054 5.80402 11.7411 5.80402 11.8125L4.7734 14.3036C4.59259 14.75 4.45698 15.125 4.36658 15.4286C4.29425 15.7143 4.25809 15.9196 4.25809 16.0446C4.25809 16.2589 4.35754 16.4375 4.55643 16.5804C4.66492 16.6518 4.82765 16.7232 5.04462 16.7946C5.27967 16.8482 5.51473 16.9018 5.74978 16.9554C5.98484 16.9911 6.14756 17.0089 6.23797 17.0089C6.29221 17.0268 6.31933 17.1518 6.31933 17.3839C6.31933 17.5089 6.31029 17.6161 6.29221 17.7054C6.29221 17.7768 6.28317 17.8393 6.26509 17.8929C5.59609 17.8571 5.04462 17.8214 4.61067 17.7857C4.19481 17.75 3.80607 17.7321 3.44444 17.7321C3.08282 17.7321 2.64888 17.7411 2.14261 17.7589C1.63634 17.7768 0.958297 17.8214 0.108486 17.8929ZM8.57043 10.1786C9.22135 10.1786 9.96267 10.1518 10.7944 10.0982L10.8486 9.99107L8.7874 4.63393L6.56343 9.99107C6.56343 10.0625 6.58151 10.0982 6.61767 10.0982C7.25051 10.1518 7.90143 10.1786 8.57043 10.1786Z"
-        fill="currentColor"
-      />
-      <path
-        d="M23.0534 18C22.1493 18 21.408 17.7589 20.8294 17.2768C20.2689 16.7768 19.9886 16.0982 19.9886 15.2411C19.9886 14.6518 20.1785 14.1161 20.5582 13.6339C20.956 13.1518 21.5074 12.7411 22.2126 12.4018C22.4657 12.2768 22.6917 12.1786 22.8906 12.1071C23.1076 12.0179 23.3065 11.9375 23.4873 11.8661C24.1202 11.6696 24.6445 11.5089 25.0604 11.3839C25.4943 11.2589 25.8017 11.1696 25.9825 11.1161C26.1452 11.0268 26.2266 10.8839 26.2266 10.6875V9.21429C26.2266 8.58929 26.0819 8.09821 25.7927 7.74107C25.5034 7.38393 25.1146 7.20536 24.6264 7.20536C24.084 7.20536 23.6591 7.375 23.3517 7.71429C23.0443 8.03571 22.8906 8.5 22.8906 9.10714C22.8906 9.46429 22.755 9.73214 22.4838 9.91071C22.2126 10.0714 21.9052 10.1518 21.5617 10.1518C20.8927 10.1518 20.4226 9.9375 20.1514 9.50893C20.1514 9.08036 20.3141 8.66071 20.6395 8.25C20.965 7.82143 21.3899 7.4375 21.9143 7.09821C22.4567 6.75893 23.0534 6.49107 23.7043 6.29464C24.3552 6.08036 25.0061 5.97321 25.657 5.97321C26.7781 5.97321 27.6188 6.26786 28.1794 6.85714C28.7399 7.42857 29.0201 8.41964 29.0201 9.83036V15.1071C29.0201 15.8393 29.3185 16.2054 29.9151 16.2054C30.1864 16.2054 30.4937 16.0893 30.8373 15.8571C30.9458 15.875 31 15.9732 31 16.1518C31 16.4911 30.9458 16.7589 30.8373 16.9554C30.5661 17.1696 30.2044 17.3929 29.7524 17.625C29.3004 17.8571 28.8664 17.9732 28.4506 17.9732C28.0347 17.9732 27.6279 17.8214 27.2301 17.5179C26.8323 17.2143 26.5701 16.8839 26.4436 16.5268C26.2989 16.6518 26.1904 16.7411 26.1181 16.7946C26.0458 16.8482 25.9283 16.9375 25.7655 17.0625C25.3858 17.3125 24.97 17.5357 24.5179 17.7321C24.0659 17.9107 23.5777 18 23.0534 18ZM24.4366 16.2589C24.9248 16.2589 25.3406 16.1339 25.6842 15.8839C26.0458 15.6339 26.2266 15.3482 26.2266 15.0268V12.2946L24.4908 12.8839C24.0749 13.0625 23.7043 13.2768 23.3788 13.5268C23.0534 13.7768 22.8906 14.1339 22.8906 14.5982C22.8906 15.1696 23.0353 15.5893 23.3246 15.8571C23.6139 16.125 23.9845 16.2589 24.4366 16.2589Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
diff --git a/apps/web/app/(editor)/components/tailwind/ui/icons/index.tsx b/apps/web/app/(editor)/components/tailwind/ui/icons/index.tsx
deleted file mode 100644
index 5b284462..00000000
--- a/apps/web/app/(editor)/components/tailwind/ui/icons/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as FontDefault } from "./font-default";
-export { default as FontSerif } from "./font-serif";
-export { default as FontMono } from "./font-mono";
diff --git a/apps/web/app/(editor)/components/tailwind/ui/icons/loading-circle.tsx b/apps/web/app/(editor)/components/tailwind/ui/icons/loading-circle.tsx
deleted file mode 100644
index 2a638117..00000000
--- a/apps/web/app/(editor)/components/tailwind/ui/icons/loading-circle.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-export default function LoadingCircle({ dimensions }: { dimensions?: string }) {
-  return (
-    <svg
-      aria-hidden="true"
-      className={`${dimensions || "h-4 w-4"} animate-spin fill-stone-600 text-stone-200`}
-      viewBox="0 0 100 101"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
-        fill="currentColor"
-      />
-      <path
-        d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
-        fill="currentFill"
-      />
-    </svg>
-  );
-}
diff --git a/apps/web/app/(editor)/components/tailwind/ui/popover.tsx b/apps/web/app/(editor)/components/tailwind/ui/popover.tsx
deleted file mode 100644
index 0bf7e696..00000000
--- a/apps/web/app/(editor)/components/tailwind/ui/popover.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-
-import { cn } from "@repo/ui/lib/utils";
-
-const Popover = PopoverPrimitive.Root;
-
-const PopoverTrigger = PopoverPrimitive.Trigger;
-
-const PopoverContent = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 w-72 rounded-md border bg-[#171B1F] p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className,
-      )}
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
-));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-
-export { Popover, PopoverTrigger, PopoverContent };
diff --git a/apps/web/app/(editor)/components/tailwind/ui/scroll-area.tsx b/apps/web/app/(editor)/components/tailwind/ui/scroll-area.tsx
deleted file mode 100644
index eb6c1f59..00000000
--- a/apps/web/app/(editor)/components/tailwind/ui/scroll-area.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
-
-import { cn } from "@repo/ui/lib/utils";
-
-const ScrollArea = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ className, children, ...props }, ref) => (
-  <ScrollAreaPrimitive.Root ref={ref} className={cn("relative overflow-hidden", className)} {...props}>
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">{children}</ScrollAreaPrimitive.Viewport>
-    <ScrollBar />
-    <ScrollAreaPrimitive.Corner />
-  </ScrollAreaPrimitive.Root>
-));
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-
-const ScrollBar = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({ className, orientation = "vertical", ...props }, ref) => (
-  <ScrollAreaPrimitive.ScrollAreaScrollbar
-    ref={ref}
-    orientation={orientation}
-    className={cn(
-      "flex touch-none select-none transition-colors",
-      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
-      className,
-    )}
-    {...props}
-  >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
-  </ScrollAreaPrimitive.ScrollAreaScrollbar>
-));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
-
-export { ScrollArea, ScrollBar };
diff --git a/apps/web/app/(editor)/components/topbar.tsx b/apps/web/app/(editor)/components/topbar.tsx
new file mode 100644
index 00000000..1178f9a0
--- /dev/null
+++ b/apps/web/app/(editor)/components/topbar.tsx
@@ -0,0 +1,86 @@
+"use client";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+import {
+  AnimatePresence,
+  useMotionValueEvent,
+  useScroll,
+  motion,
+} from "framer-motion";
+import React, { useState } from "react";
+
+function Topbar({charsCount, saveStatus}: {charsCount: number | undefined;  saveStatus: string}) {
+  const [visible, setVisible] = useState(true);
+
+  const { scrollYProgress } = useScroll();
+  useMotionValueEvent(scrollYProgress, "change", (current) => {
+    if (typeof current === "number") {
+      let direction = current! - scrollYProgress.getPrevious()!;
+
+      if (direction < 0 || direction === 1) {
+        setVisible(true);
+      } else {
+        setVisible(false);
+      }
+    }
+  });
+  return (
+    <div className="fixed left-0 top-0 z-10">
+      <AnimatePresence mode="wait">
+        <motion.div
+          initial={{
+            opacity: 1,
+            y: -150,
+          }}
+          animate={{
+            y: visible ? 0 : -150,
+            opacity: visible ? 1 : 0,
+          }}
+          transition={{
+            duration: 0.2,
+          }}
+          className="flex flex-col items-center"
+        >
+          <div className="gap-2 w-screen flex bg-[#171B1F] justify-center items-center pt-6 pb-4">
+            <div className="rounded-lg bg-[#21303D] px-2 py-1 text-sm text-muted-foreground">
+              Untitled
+            </div>
+            <div className="rounded-lg bg-[#21303D] px-2 py-1 text-sm text-muted-foreground">
+              {saveStatus}
+            </div>
+            {charsCount && (
+              <div className="rounded-lg bg-[#21303D] px-2 py-1 text-sm text-muted-foreground">
+                {`${charsCount} words`}
+              </div>
+            )}
+          </div>
+        </motion.div>
+      </AnimatePresence>
+    </div>
+  );
+}
+
+export default Topbar;
diff --git a/apps/web/app/(editor)/components/tailwind/ui/icons/asksvg.tsx b/apps/web/app/(editor)/components/ui/asksvg.tsx
similarity index 100%
rename from apps/web/app/(editor)/components/tailwind/ui/icons/asksvg.tsx
rename to apps/web/app/(editor)/components/ui/asksvg.tsx
diff --git a/apps/web/app/(editor)/components/tailwind/ui/icons/autocompletesvg.tsx b/apps/web/app/(editor)/components/ui/autocompletesvg.tsx
similarity index 100%
rename from apps/web/app/(editor)/components/tailwind/ui/icons/autocompletesvg.tsx
rename to apps/web/app/(editor)/components/ui/autocompletesvg.tsx
diff --git a/apps/web/app/(editor)/components/tailwind/ui/icons/crazy-spinner.tsx b/apps/web/app/(editor)/components/ui/crazy-spinner.tsx
similarity index 100%
rename from apps/web/app/(editor)/components/tailwind/ui/icons/crazy-spinner.tsx
rename to apps/web/app/(editor)/components/ui/crazy-spinner.tsx
diff --git a/apps/web/app/(editor)/components/tailwind/ui/icons/magic.tsx b/apps/web/app/(editor)/components/ui/magic.tsx
similarity index 100%
rename from apps/web/app/(editor)/components/tailwind/ui/icons/magic.tsx
rename to apps/web/app/(editor)/components/ui/magic.tsx
diff --git a/apps/web/app/(editor)/components/tailwind/ui/icons/rewritesvg.tsx b/apps/web/app/(editor)/components/ui/rewritesvg.tsx
similarity index 100%
rename from apps/web/app/(editor)/components/tailwind/ui/icons/rewritesvg.tsx
rename to apps/web/app/(editor)/components/ui/rewritesvg.tsx
diff --git a/apps/web/app/(editor)/components/tailwind/ui/icons/translatesvg.tsx b/apps/web/app/(editor)/components/ui/translatesvg.tsx
similarity index 100%
rename from apps/web/app/(editor)/components/tailwind/ui/icons/translatesvg.tsx
rename to apps/web/app/(editor)/components/ui/translatesvg.tsx
diff --git a/apps/web/app/(editor)/editor.tsx b/apps/web/app/(editor)/editor.tsx
index 140207e0..5b4a60ce 100644
--- a/apps/web/app/(editor)/editor.tsx
+++ b/apps/web/app/(editor)/editor.tsx
@@ -1,66 +1,25 @@
 "use client";
 import { defaultEditorContent } from "./lib/content";
-import {
-  EditorCommand,
-  EditorCommandEmpty,
-  EditorCommandItem,
-  EditorCommandList,
-  EditorContent,
-  type EditorInstance,
-  EditorRoot,
-  type JSONContent,
-  EditorBubble,
-} from "novel";
-import { ImageResizer, handleCommandNavigation } from "novel/extensions";
+import { EditorContent, EditorRoot, type JSONContent } from "novel";
+import { ImageResizer } from "novel/extensions";
 import { useEffect, useState } from "react";
-import { useDebouncedCallback } from "use-debounce";
 import { defaultExtensions } from "./components/extensions";
-import { ColorSelector } from "./components/selectors/color-selector";
-import { LinkSelector } from "./components/selectors/link-selector";
-import { NodeSelector } from "./components/selectors/node-selector";
-import { Separator } from "./components/tailwind/ui/separator";
-import { TextButtons } from "./components/selectors/text-buttons";
-import { BgColorSelector } from "./components/selectors/bgcolor-selector";
 
-import { handleImageDrop, handleImagePaste } from "novel/plugins";
-import { uploadFn } from "./components/image-upload";
-import { slashCommand, suggestionItems } from "./components/slash-command";
+import { slashCommand } from "./components/slash-command";
+import { Updates } from "./lib/debouncedsave";
+import { editorProps } from "./lib/editorprops";
+import EditorCommands from "./components/editorcommands";
 import Aigenerate from "./components/aigenerate";
+import { useMotionValueEvent, useScroll } from "framer-motion";
+import Topbar from "./components/topbar";
 
-const hljs = require('highlight.js');
-
-const extensions = [...defaultExtensions, slashCommand];
-
-const TailwindAdvancedEditor = () => {
-  const [initialContent, setInitialContent] = useState<null | JSONContent>(null);
+const Editor = () => {
+  const [initialContent, setInitialContent] = useState<null | JSONContent>(
+    null
+  );
   const [saveStatus, setSaveStatus] = useState("Saved");
   const [charsCount, setCharsCount] = useState();
-
-  const [openNode, setOpenNode] = useState(false);
-  const [openColor, setOpenColor] = useState(false);
-  const [openBgColor, setOpenBgColor] = useState(false);
-  const [openLink, setOpenLink] = useState(false);
-  const [openAI, setOpenAI] = useState(false);
-
-  //Apply Codeblock Highlighting on the HTML from editor.getHTML()
-  const highlightCodeblocks = (content: string) => {
-    const doc = new DOMParser().parseFromString(content, 'text/html');
-    doc.querySelectorAll('pre code').forEach((el) => {
-      // @ts-ignore
-      // https://highlightjs.readthedocs.io/en/latest/api.html?highlight=highlightElement#highlightelement
-      hljs.highlightElement(el);
-    });
-    return new XMLSerializer().serializeToString(doc);
-  };
-
-  const debouncedUpdates = useDebouncedCallback(async (editor: EditorInstance) => {
-    const json = editor.getJSON();
-    setCharsCount(editor.storage.characterCount.words());
-    window.localStorage.setItem("html-content", highlightCodeblocks(editor.getHTML()));
-    window.localStorage.setItem("novel-content", JSON.stringify(json));
-    window.localStorage.setItem("markdown", editor.storage.markdown.getMarkdown());
-    setSaveStatus("Saved");
-  }, 500);
+  const [visible, setVisible] = useState(true);
 
   useEffect(() => {
     const content = window.localStorage.getItem("novel-content");
@@ -72,74 +31,24 @@ const TailwindAdvancedEditor = () => {
 
   return (
     <div className="relative w-full max-w-screen-xl">
-      <div className="fixed left-0 top-0 z-10 w-screen flex bg-[#171B1F] justify-center items-center pt-6 pb-4">
-        <div className="rounded-lg bg-[#21303D] px-2 py-1 text-sm text-muted-foreground">Untitled - {saveStatus}</div>
-      </div>
+      <Topbar charsCount={charsCount} saveStatus={saveStatus} />
       <EditorRoot>
         <EditorContent
           initialContent={initialContent}
-          extensions={extensions}   
-          className="relative min-h-[55vh] mt-[20vh] w-full max-w-screen-xl bg-[#171B1F] mb-[40vh]"
-          editorProps={{
-            handleDOMEvents: {
-              keydown: (_view, event) => handleCommandNavigation(event),
-            },
-            handlePaste: (view, event) => handleImagePaste(view, event, uploadFn),
-            handleDrop: (view, event, _slice, moved) => handleImageDrop(view, event, moved, uploadFn),
-            attributes: {
-              class:
-                "prose prose-lg dark:prose-invert prose-headings:font-title font-default focus:outline-none max-w-full",
-            },
-          }}
+          extensions={[...defaultExtensions, slashCommand]}
+          className="min-h-[55vh] mt-[8vh] w-full max-w-screen-xl bg-[#171B1F] mb-[40vh]"
+          editorProps={editorProps}
           onUpdate={({ editor }) => {
-            debouncedUpdates(editor);
-            setSaveStatus("Unsaved");
-            
+            Updates({ editor, setCharsCount, setSaveStatus });
           }}
           slotAfter={<ImageResizer />}
         >
+          <EditorCommands />
           <Aigenerate />
-          <EditorCommand className="z-50 h-auto max-h-[330px] min-w-[20rem] overflow-y-auto rounded-3xl bg-[#1F2428]  shadow-md transition-all">
-            <EditorCommandEmpty className="px-4 text-lg text-muted-foreground">No results</EditorCommandEmpty>
-            <EditorCommandList>
-              {suggestionItems.map((item) => (
-                <EditorCommandItem
-                  value={item.title}
-                  onCommand={(val) => item.command(val)}
-                  className="flex w-full items-center space-x-4 rounded-md px-4 py-3 text-left text-sm hover:bg-accent aria-selected:bg-[#21303D] group/command"
-                  key={item.title}
-                >
-                  <div className="flex h-11 w-11 items-center justify-center rounded-md bg-[#2D343A] group-aria-selected/command:bg-[#369DFD33] stroke-[#989EA4] group-aria-selected/command:stroke-[#369DFD]">
-                    {item.icon}
-                  </div>
-                  <div>
-                    <p className="font-medium text-[#FFFFFF] group-aria-selected/command:text-[#369DFD]">{item.title}</p>
-                    <p className="text-xs text-muted-foreground group-aria-selected/command:text-[#369DFDB2]">{item.description}</p>
-                  </div>
-                </EditorCommandItem>
-              ))}
-            </EditorCommandList>
-          </EditorCommand>
-          <EditorBubble
-            tippyOptions={{
-              placement: openAI ? "bottom-start" : "top",
-            }}
-            className='flex w-fit max-w-[90vw] overflow-hidden bg-[#1F2428] text-white rounded '>
-              <Separator orientation="vertical" />
-              <NodeSelector open={openNode} onOpenChange={setOpenNode} />
-              <Separator orientation="vertical" />
-              <LinkSelector open={openLink} onOpenChange={setOpenLink} />
-              <Separator orientation="vertical" />
-              <TextButtons />
-              <Separator orientation="vertical" />
-              <ColorSelector open={openColor} onOpenChange={setOpenColor} />
-              <Separator orientation="vertical" />
-              <BgColorSelector open={openBgColor} onOpenChange={setOpenBgColor} />
-              </EditorBubble>
         </EditorContent>
       </EditorRoot>
     </div>
   );
 };
 
-export default TailwindAdvancedEditor;
+export default Editor;
diff --git a/apps/web/app/(editor)/lib/debouncedsave.ts b/apps/web/app/(editor)/lib/debouncedsave.ts
new file mode 100644
index 00000000..6490c6c4
--- /dev/null
+++ b/apps/web/app/(editor)/lib/debouncedsave.ts
@@ -0,0 +1,20 @@
+import hljs from 'highlight.js'
+import { debounce } from 'tldraw';
+import { useDebouncedCallback } from "use-debounce";
+
+export const Updates = debounce(({editor, setCharsCount, setSaveStatus})=> {
+  const json = editor.getJSON();
+  setCharsCount(editor.storage.characterCount.words());
+  window.localStorage.setItem("html-content", highlightCodeblocks(editor.getHTML()));
+  window.localStorage.setItem("novel-content", JSON.stringify(json));
+  window.localStorage.setItem("markdown", editor.storage.markdown.getMarkdown());
+  setSaveStatus("Saved");
+}, 500)
+
+export const highlightCodeblocks = (content: string) => {
+  const doc = new DOMParser().parseFromString(content, 'text/html');
+  doc.querySelectorAll('pre code').forEach((el) => {
+    hljs.highlightElement(el);
+  });
+  return new XMLSerializer().serializeToString(doc);
+};
\ No newline at end of file
diff --git a/apps/web/app/(editor)/lib/editorprops.ts b/apps/web/app/(editor)/lib/editorprops.ts
new file mode 100644
index 00000000..00d89264
--- /dev/null
+++ b/apps/web/app/(editor)/lib/editorprops.ts
@@ -0,0 +1,16 @@
+import { handleCommandNavigation } from "novel/extensions";
+import { handleImageDrop, handleImagePaste } from "novel/plugins";
+import { uploadFn } from "../components/image-upload";
+import { EditorView } from "prosemirror-view";
+
+export const editorProps = {
+  handleDOMEvents: {
+    keydown: (_view: EditorView, event: KeyboardEvent) => handleCommandNavigation(event),
+  },
+  handlePaste: (view: EditorView, event: ClipboardEvent) => handleImagePaste(view, event, uploadFn),
+  handleDrop: (view: EditorView, event: DragEvent, slice, moved:boolean) => handleImageDrop(view, event, moved, uploadFn),
+  attributes: {
+    class:
+      "prose prose-lg dark:prose-invert prose-headings:font-title font-default focus:outline-none max-w-full",
+  },
+}
\ No newline at end of file
diff --git a/apps/web/app/(editor)/styles/globals.css b/apps/web/app/(editor)/styles/globals.css
index 0b9378f3..336e2dae 100644
--- a/apps/web/app/(editor)/styles/globals.css
+++ b/apps/web/app/(editor)/styles/globals.css
@@ -162,8 +162,7 @@ pre {
     font-weight: 700;
   }
 }
-
-::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-track {
-  background: transparent;
+::-webkit-scrollbar{
+  width: 0;
 }
 
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 8d7cd5ea..1a5d6e18 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -2,6 +2,7 @@ import "@repo/tailwind-config/globals.css";
 
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
+import { Toaster } from "@repo/ui/shadcn/toaster";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -66,7 +67,10 @@ export default function RootLayout({
         <ThemeScript />
       </head> */}
       {/* TODO: when lightmode support is added, remove the 'dark' class from the body tag */}
-      <body className={`${inter.className} dark`}>{children}</body>
+      <body className={`${inter.className} dark`}>
+        {children}
+        <Toaster />
+      </body>
     </html>
   );
 }
diff --git a/packages/ui/components/icons.tsx b/packages/ui/components/icons.tsx
index d72c8e1f..134a2a96 100644
--- a/packages/ui/components/icons.tsx
+++ b/packages/ui/components/icons.tsx
@@ -277,8 +277,8 @@ export const X = (props: SVGProps<SVGSVGElement>) => (
 
 export const Google = (props: SVGProps<SVGSVGElement>) => (
   <svg
-    width="1em"
-    height="1em"
+    width="1.5em"
+    height="1.5em"
     viewBox="0 0 256 262"
     xmlns="http://www.w3.org/2000/svg"
     preserveAspectRatio="xMidYMid"
diff --git a/apps/web/app/(editor)/components/tailwind/ui/separator.tsx b/packages/ui/shadcn/separator.tsx
similarity index 100%
rename from apps/web/app/(editor)/components/tailwind/ui/separator.tsx
rename to packages/ui/shadcn/separator.tsx