extension styling such that website content is not affected https://twitter.com/DhravyaShah/status/1778189224396922948

11 files changed, 226 insertions, 215 deletions

diff --git a/apps/web/src/components/QueryAI.tsx b/apps/web/src/components/QueryAI.tsx
index 3cb14178..894b5d2d 100644
--- a/apps/web/src/components/QueryAI.tsx
+++ b/apps/web/src/components/QueryAI.tsx
@@ -1,18 +1,18 @@
-'use client';
+"use client";
 
-import { Label } from './ui/label';
-import React, { useEffect, useState } from 'react';
-import { Input } from './ui/input';
-import { Button } from './ui/button';
-import SearchResults from './SearchResults';
+import { Label } from "./ui/label";
+import React, { useEffect, useState } from "react";
+import { Input } from "./ui/input";
+import { Button } from "./ui/button";
+import SearchResults from "./SearchResults";
 
 function QueryAI() {
   const [searchResults, setSearchResults] = useState<string[]>([]);
   const [isAiLoading, setIsAiLoading] = useState(false);
 
-  const [aiResponse, setAIResponse] = useState('');
-  const [input, setInput] = useState('');
-  const [toBeParsed, setToBeParsed] = useState('');
+  const [aiResponse, setAIResponse] = useState("");
+  const [input, setInput] = useState("");
+  const [toBeParsed, setToBeParsed] = useState("");
 
   const handleStreamData = (newChunk: string) => {
     // Append the new chunk to the existing data to be parsed
@@ -25,13 +25,13 @@ function QueryAI() {
       // Attempt to parse the "toBeParsed" state as JSON
       try {
         // Split the accumulated data by the known delimiter "\n\n"
-        const parts = toBeParsed.split('\n\n');
-        let remainingData = '';
+        const parts = toBeParsed.split("\n\n");
+        let remainingData = "";
 
         // Process each part to extract JSON objects
         parts.forEach((part, index) => {
           try {
-            const parsedPart = JSON.parse(part.replace('data: ', '')); // Try to parse the part as JSON
+            const parsedPart = JSON.parse(part.replace("data: ", "")); // Try to parse the part as JSON
 
             // If the part is the last one and couldn't be parsed, keep it to  accumulate more data
             if (index === parts.length - 1 && !parsedPart) {
@@ -43,7 +43,7 @@ function QueryAI() {
           } catch (error) {
             // If parsing fails and it's not the last part, it's a malformed JSON
             if (index !== parts.length - 1) {
-              console.error('Malformed JSON part: ', part);
+              console.error("Malformed JSON part: ", part);
             } else {
               // If it's the last part, it may be incomplete, so keep it
               remainingData = part;
@@ -56,7 +56,7 @@ function QueryAI() {
           setToBeParsed(remainingData);
         }
       } catch (error) {
-        console.error('Error parsing accumulated data: ', error);
+        console.error("Error parsing accumulated data: ", error);
       }
     };
 
@@ -89,8 +89,8 @@ function QueryAI() {
 
     if (response.body) {
       let reader = response.body.getReader();
-      let decoder = new TextDecoder('utf-8');
-      let result = '';
+      let decoder = new TextDecoder("utf-8");
+      let result = "";
 
       // @ts-ignore
       reader.read().then(function processText({ done, value }) {
@@ -108,10 +108,10 @@ function QueryAI() {
   };
 
   return (
-    <div className="w-full max-w-2xl mx-auto">
+    <div className="mx-auto w-full max-w-2xl">
       <form onSubmit={async (e) => await getSearchResults(e)} className="mt-8">
         <Label htmlFor="searchInput">Ask your SuperMemory</Label>
-        <div className="flex flex-col md:flex-row md:w-full md:items-center space-y-2 md:space-y-0 md:space-x-2">
+        <div className="flex flex-col space-y-2 md:w-full md:flex-row md:items-center md:space-x-2 md:space-y-0">
           <Input
             value={input}
             onChange={(e) => setInput(e.target.value)}
diff --git a/apps/web/src/components/SearchResults.tsx b/apps/web/src/components/SearchResults.tsx
index 0445d0b4..d348814e 100644
--- a/apps/web/src/components/SearchResults.tsx
+++ b/apps/web/src/components/SearchResults.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client";
 
-import React from 'react';
-import { Card, CardContent } from './ui/card';
-import Markdown from 'react-markdown';
-import remarkGfm from 'remark-gfm'
+import React from "react";
+import { Card, CardContent } from "./ui/card";
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 
 function SearchResults({
   aiResponse,
@@ -17,11 +17,13 @@ function SearchResults({
       style={{
         backgroundImage: `linear-gradient(to right, #E5D9F2, #CDC1FF)`,
       }}
-      className="w-full max-w-2xl mx-auto px-4 py-6 space-y-6 border mt-4 rounded-xl"
+      className="mx-auto mt-4 w-full max-w-2xl space-y-6 rounded-xl border px-4 py-6"
     >
       <div className="text-start">
         <div className="text-xl text-black">
-          <Markdown remarkPlugins={[remarkGfm]}>{aiResponse.replace('</s>', '')}</Markdown>
+          <Markdown remarkPlugins={[remarkGfm]}>
+            {aiResponse.replace("</s>", "")}
+          </Markdown>
         </div>
       </div>
       <div className="grid gap-6">
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index 66ca1652..bdc9d600 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -1,42 +1,42 @@
-'use client';
-import { StoredContent } from '@/server/db/schema';
+"use client";
+import { StoredContent } from "@/server/db/schema";
 import {
   Plus,
   MoreHorizontal,
   ArrowUpRight,
   Edit3,
   Trash2,
-} from 'lucide-react';
+} from "lucide-react";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from './ui/dropdown-menu';
+} from "./ui/dropdown-menu";
 
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef } from "react";
 
 export default function Sidebar() {
   const websites: StoredContent[] = [
     {
       id: 1,
-      content: '',
-      title: 'Visual Studio Code',
-      url: 'https://code.visualstudio.com',
-      description: '',
-      image: 'https://code.visualstudio.com/favicon.ico',
-      baseUrl: 'https://code.visualstudio.com',
-      savedAt: new Date()
+      content: "",
+      title: "Visual Studio Code",
+      url: "https://code.visualstudio.com",
+      description: "",
+      image: "https://code.visualstudio.com/favicon.ico",
+      baseUrl: "https://code.visualstudio.com",
+      savedAt: new Date(),
     },
     {
       id: 1,
-      content: '',
+      content: "",
       title: "yxshv/vscode: An unofficial remake of vscode's landing page",
-      url: 'https://github.com/yxshv/vscode',
-      description: '',
-      image: 'https://github.com/favicon.ico',
-      baseUrl: 'https://github.com',
-      savedAt: new Date()
+      url: "https://github.com/yxshv/vscode",
+      description: "",
+      image: "https://github.com/favicon.ico",
+      baseUrl: "https://github.com",
+      savedAt: new Date(),
     },
   ];
 
@@ -86,8 +86,8 @@ export const ListItem: React.FC<{ item: StoredContent }> = ({ item }) => {
         ) : (
           <>
             <img
-              src={item.image ?? '/brain.png'}
-              alt={item.title ?? 'Untitiled website'}
+              src={item.image ?? "/brain.png"}
+              alt={item.title ?? "Untitiled website"}
               className="h-4 w-4"
             />
             <ArrowUpRight
@@ -102,13 +102,13 @@ export const ListItem: React.FC<{ item: StoredContent }> = ({ item }) => {
             ref={editInputRef}
             autoFocus
             className="text-rgray-12 w-full bg-transparent focus:outline-none"
-            placeholder={item.title ?? 'Untitled website'}
+            placeholder={item.title ?? "Untitled website"}
             onBlur={(e) => setIsEditing(false)}
-            onKeyDown={(e) => e.key === 'Escape' && setIsEditing(false)}
+            onKeyDown={(e) => e.key === "Escape" && setIsEditing(false)}
           />
         ) : (
           <span className="w-full truncate text-nowrap">
-            {item.title ?? 'Untitled website'}
+            {item.title ?? "Untitled website"}
           </span>
         )}
       </a>
diff --git a/apps/web/src/components/Sidebar/CategoryItem.tsx b/apps/web/src/components/Sidebar/CategoryItem.tsx
index 0cf8a70c..7fb571b5 100644
--- a/apps/web/src/components/Sidebar/CategoryItem.tsx
+++ b/apps/web/src/components/Sidebar/CategoryItem.tsx
@@ -1,13 +1,13 @@
-'use client';
-import { cleanUrl } from '@/lib/utils';
-import { StoredContent } from '@/server/db/schema';
+"use client";
+import { cleanUrl } from "@/lib/utils";
+import { StoredContent } from "@/server/db/schema";
 import {
   DropdownMenu,
   DropdownMenuTrigger,
   DropdownMenuContent,
   DropdownMenuItem,
-} from '../ui/dropdown-menu';
-import { Label } from '../ui/label';
+} from "../ui/dropdown-menu";
+import { Label } from "../ui/label";
 import {
   ArrowUpRight,
   MoreHorizontal,
@@ -19,8 +19,8 @@ import {
   ChevronRight,
   Plus,
   Minus,
-} from 'lucide-react';
-import { useState } from 'react';
+} from "lucide-react";
+import { useState } from "react";
 import {
   Drawer,
   DrawerContent,
@@ -29,106 +29,106 @@ import {
   DrawerDescription,
   DrawerFooter,
   DrawerClose,
-} from '../ui/drawer';
-import { Input } from '../ui/input';
-import { Textarea } from '../ui/textarea';
-import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
+} from "../ui/drawer";
+import { Input } from "../ui/input";
+import { Textarea } from "../ui/textarea";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import {
   AnimatePresence,
   motion,
   Reorder,
   useMotionValue,
-} from 'framer-motion';
+} from "framer-motion";
 
 const pages: StoredContent[] = [
   {
     id: 1,
-    content: '',
-    title: 'Visual Studio Code',
-    url: 'https://code.visualstudio.com',
-    description: '',
-    image: 'https://code.visualstudio.com/favicon.ico',
-    baseUrl: 'https://code.visualstudio.com',
+    content: "",
+    title: "Visual Studio Code",
+    url: "https://code.visualstudio.com",
+    description: "",
+    image: "https://code.visualstudio.com/favicon.ico",
+    baseUrl: "https://code.visualstudio.com",
     savedAt: new Date(),
   },
   {
     id: 2,
-    content: '',
+    content: "",
     title: "yxshv/vscode: An unofficial remake of vscode's landing page",
-    url: 'https://github.com/yxshv/vscode',
-    description: '',
-    image: 'https://github.com/favicon.ico',
-    baseUrl: 'https://github.com',
+    url: "https://github.com/yxshv/vscode",
+    description: "",
+    image: "https://github.com/favicon.ico",
+    baseUrl: "https://github.com",
     savedAt: new Date(),
   },
   {
     id: 3,
-    content: '',
+    content: "",
     title: "yxshv/vscode: An unofficial remake of vscode's landing page",
-    url: 'https://github.com/yxshv/vscode',
-    description: '',
-    image: 'https://github.com/favicon.ico',
-    baseUrl: 'https://github.com',
+    url: "https://github.com/yxshv/vscode",
+    description: "",
+    image: "https://github.com/favicon.ico",
+    baseUrl: "https://github.com",
     savedAt: new Date(),
   },
   {
     id: 4,
-    content: '',
+    content: "",
     title: "yxshv/vscode: An unofficial remake of vscode's landing page",
-    url: 'https://github.com/yxshv/vscode',
-    description: '',
-    image: 'https://github.com/favicon.ico',
-    baseUrl: 'https://github.com',
+    url: "https://github.com/yxshv/vscode",
+    description: "",
+    image: "https://github.com/favicon.ico",
+    baseUrl: "https://github.com",
     savedAt: new Date(),
   },
   {
     id: 5,
-    content: '',
+    content: "",
     title: "yxshv/vscode: An unofficial remake of vscode's landing page",
-    url: 'https://github.com/yxshv/vscode',
-    description: '',
-    image: 'https://github.com/favicon.ico',
-    baseUrl: 'https://github.com',
+    url: "https://github.com/yxshv/vscode",
+    description: "",
+    image: "https://github.com/favicon.ico",
+    baseUrl: "https://github.com",
     savedAt: new Date(),
   },
   {
     id: 6,
-    content: '',
+    content: "",
     title: "yxshv/vscode: An unofficial remake of vscode's landing page",
-    url: 'https://github.com/yxshv/vscode',
-    description: '',
-    image: 'https://github.com/favicon.ico',
-    baseUrl: 'https://github.com',
+    url: "https://github.com/yxshv/vscode",
+    description: "",
+    image: "https://github.com/favicon.ico",
+    baseUrl: "https://github.com",
     savedAt: new Date(),
   },
   {
     id: 7,
-    content: '',
+    content: "",
     title: "yxshv/vscode: An unofficial remake of vscode's landing page",
-    url: 'https://github.com/yxshv/vscode',
-    description: '',
-    image: 'https://github.com/favicon.ico',
-    baseUrl: 'https://github.com',
+    url: "https://github.com/yxshv/vscode",
+    description: "",
+    image: "https://github.com/favicon.ico",
+    baseUrl: "https://github.com",
     savedAt: new Date(),
   },
   {
     id: 8,
-    content: '',
+    content: "",
     title: "yxshv/vscode: An unofficial remake of vscode's landing page",
-    url: 'https://github.com/yxshv/vscode',
-    description: '',
-    image: 'https://github.com/favicon.ico',
-    baseUrl: 'https://github.com',
+    url: "https://github.com/yxshv/vscode",
+    description: "",
+    image: "https://github.com/favicon.ico",
+    baseUrl: "https://github.com",
     savedAt: new Date(),
   },
   {
     id: 9,
-    content: '',
+    content: "",
     title: "yxshv/vscode: An unofficial remake of vscode's landing page",
-    url: 'https://github.com/yxshv/vscode',
-    description: '',
-    image: 'https://github.com/favicon.ico',
-    baseUrl: 'https://github.com',
+    url: "https://github.com/yxshv/vscode",
+    description: "",
+    image: "https://github.com/favicon.ico",
+    baseUrl: "https://github.com",
     savedAt: new Date(),
   },
 ];
@@ -153,13 +153,13 @@ export const CategoryItem: React.FC<{ item: StoredContent }> = ({ item }) => {
             />
             <ChevronDown
               data-down-icon
-              className={`absolute left-1/2 top-1/2 z-[2] h-4 w-4 min-w-4 -translate-x-1/2 -translate-y-1/2 scale-75 opacity-0 transition-[transform,opacity] duration-150 ${isExpanded ? 'rotate-180' : 'rotate-0'}`}
+              className={`absolute left-1/2 top-1/2 z-[2] h-4 w-4 min-w-4 -translate-x-1/2 -translate-y-1/2 scale-75 opacity-0 transition-[transform,opacity] duration-150 ${isExpanded ? "rotate-180" : "rotate-0"}`}
               strokeWidth={1.5}
             />
           </div>
 
           <span className="w-full truncate text-nowrap text-left">
-            {item.title ?? 'Untitled website'}
+            {item.title ?? "Untitled website"}
           </span>
         </button>
         <Drawer
@@ -178,7 +178,7 @@ export const CategoryItem: React.FC<{ item: StoredContent }> = ({ item }) => {
                 href={item.url}
                 className="text-rgray-11/90 bg-rgray-3 text-md absolute right-0 top-0 flex w-min translate-y-1/2 items-center justify-center gap-1 rounded-full px-5 py-1"
               >
-                <img src={item.image ?? '/brain.png'} className="h-4 w-4" />
+                <img src={item.image ?? "/brain.png"} className="h-4 w-4" />
                 {cleanUrl(item.url)}
               </a>
             </DrawerHeader>
@@ -188,16 +188,16 @@ export const CategoryItem: React.FC<{ item: StoredContent }> = ({ item }) => {
               <Input
                 className=""
                 required
-                value={item.title ?? ''}
-                placeholder={item.title ?? 'Enter the title for the page'}
+                value={item.title ?? ""}
+                placeholder={item.title ?? "Enter the title for the page"}
               />
             </div>
             <div className="mt-5">
               <Label>Additional Context</Label>
               <Textarea
                 className=""
-                value={item.content ?? ''}
-                placeholder={'Enter additional context for this page'}
+                value={item.content ?? ""}
+                placeholder={"Enter additional context for this page"}
               />
             </div>
             <DrawerFooter className="flex flex-row-reverse items-center justify-end px-0 pt-5">
@@ -224,7 +224,7 @@ export const CategoryItem: React.FC<{ item: StoredContent }> = ({ item }) => {
             onReorder={setItems}
             as="div"
             initial={{ height: 0 }}
-            animate={{ height: 'auto' }}
+            animate={{ height: "auto" }}
             exit={{
               height: 0,
               transition: {},
@@ -272,8 +272,8 @@ export const CategoryPage: React.FC<{
       >
         <div className="relative h-4 min-w-4">
           <img
-            src={item.image ?? '/brain.png'}
-            alt={item.title ?? 'Untitiled website'}
+            src={item.image ?? "/brain.png"}
+            alt={item.title ?? "Untitiled website"}
             className="z-1 h-4 w-4 transition-[transform,opacity] delay-150 duration-150"
           />
           <ArrowUpRight
@@ -284,7 +284,7 @@ export const CategoryPage: React.FC<{
         </div>
 
         <span className="w-full truncate text-nowrap">
-          {item.title ?? 'Untitled website'}
+          {item.title ?? "Untitled website"}
         </span>
       </a>
       <button
diff --git a/apps/web/src/components/Sidebar/FilterCombobox.tsx b/apps/web/src/components/Sidebar/FilterCombobox.tsx
index 76b66db9..a8e3a1e5 100644
--- a/apps/web/src/components/Sidebar/FilterCombobox.tsx
+++ b/apps/web/src/components/Sidebar/FilterCombobox.tsx
@@ -1,10 +1,10 @@
-'use client';
+"use client";
 
-import * as React from 'react';
-import { Check, ChevronsUpDown } from 'lucide-react';
+import * as React from "react";
+import { Check, ChevronsUpDown } from "lucide-react";
 
-import { cn } from '@/lib/utils';
-import { Button } from '@/components/ui/button';
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
 import {
   Command,
   CommandEmpty,
@@ -12,28 +12,30 @@ import {
   CommandInput,
   CommandItem,
   CommandList,
-} from '@/components/ui/command';
+} from "@/components/ui/command";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/components/ui/popover';
-import { SpaceIcon } from '@/assets/Memories';
-import { AnimatePresence, LayoutGroup, motion } from 'framer-motion';
-import { useMemory } from '@/contexts/MemoryContext';
+} from "@/components/ui/popover";
+import { SpaceIcon } from "@/assets/Memories";
+import { AnimatePresence, LayoutGroup, motion } from "framer-motion";
+import { useMemory } from "@/contexts/MemoryContext";
 
 export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  side?: 'top' | 'bottom';
-  align?: 'end' | 'start' | 'center';
+  side?: "top" | "bottom";
+  align?: "end" | "start" | "center";
   onClose?: () => void;
   selectedSpaces: number[];
-  setSelectedSpaces: (spaces: number[] | ((prev: number[]) => number[])) => void;
+  setSelectedSpaces: (
+    spaces: number[] | ((prev: number[]) => number[]),
+  ) => void;
 }
 
 export function FilterCombobox({
   className,
-  side = 'bottom',
-  align = 'center',
+  side = "bottom",
+  align = "center",
   onClose,
   selectedSpaces,
   setSelectedSpaces,
@@ -65,7 +67,7 @@ export function FilterCombobox({
             <button
               data-state-on={open}
               className={cn(
-                'text-rgray-11/70 on:bg-rgray-3 focus-visible:ring-rgray-8 hover:bg-rgray-3 relative flex items-center justify-center gap-1 rounded-md px-3 py-1.5 ring-2 ring-transparent focus-visible:outline-none',
+                "text-rgray-11/70 on:bg-rgray-3 focus-visible:ring-rgray-8 hover:bg-rgray-3 relative flex items-center justify-center gap-1 rounded-md px-3 py-1.5 ring-2 ring-transparent focus-visible:outline-none",
                 className,
               )}
               {...props}
@@ -129,7 +131,7 @@ export function FilterCombobox({
                           <Check
                             data-state-on={selectedSpaces.includes(space.id)}
                             className={cn(
-                              'on:opacity-100 ml-auto h-4 w-4 opacity-0',
+                              "on:opacity-100 ml-auto h-4 w-4 opacity-0",
                             )}
                           />
                         </motion.div>
diff --git a/apps/web/src/components/Sidebar/index.tsx b/apps/web/src/components/Sidebar/index.tsx
index db36f66b..965455e6 100644
--- a/apps/web/src/components/Sidebar/index.tsx
+++ b/apps/web/src/components/Sidebar/index.tsx
@@ -1,13 +1,13 @@
-'use client';
-import { MemoryIcon } from '../../assets/Memories';
-import { Trash2, User2 } from 'lucide-react';
-import React, { useEffect, useState } from 'react';
-import { MemoriesBar } from './MemoriesBar';
-import { AnimatePresence, motion } from 'framer-motion';
-import { Bin } from '@/assets/Bin';
-import { Avatar, AvatarFallback, AvatarImage } from '@radix-ui/react-avatar';
-import { useSession } from 'next-auth/react';
-import MessagePoster from '@/app/MessagePoster';
+"use client";
+import { MemoryIcon } from "../../assets/Memories";
+import { Trash2, User2 } from "lucide-react";
+import React, { useEffect, useState } from "react";
+import { MemoriesBar } from "./MemoriesBar";
+import { AnimatePresence, motion } from "framer-motion";
+import { Bin } from "@/assets/Bin";
+import { Avatar, AvatarFallback, AvatarImage } from "@radix-ui/react-avatar";
+import { useSession } from "next-auth/react";
+import MessagePoster from "@/app/MessagePoster";
 
 export type MenuItem = {
   icon: React.ReactNode | React.ReactNode[];
@@ -17,7 +17,7 @@ export type MenuItem = {
 
 export default function Sidebar({
   selectChange,
-  jwt
+  jwt,
 }: {
   selectChange?: (selectedItem: string | null) => void;
   jwt: string;
@@ -26,7 +26,7 @@ export default function Sidebar({
   const menuItemsTop: Array<MenuItem> = [
     {
       icon: <MemoryIcon className="h-10 w-10" />,
-      label: 'Memories',
+      label: "Memories",
       content: <MemoriesBar />,
     },
   ];
@@ -34,7 +34,7 @@ export default function Sidebar({
   const menuItemsBottom: Array<MenuItem> = [
     {
       icon: <Trash2 strokeWidth={1.3} className="h-6 w-6" />,
-      label: 'Trash',
+      label: "Trash",
     },
     {
       icon: (
@@ -50,12 +50,12 @@ export default function Sidebar({
               <User2 strokeWidth={1.3} className="h-6 w-6" />
             )}
             <AvatarFallback>
-              {session?.user?.name?.split(' ').map((n) => n[0])}{' '}
+              {session?.user?.name?.split(" ").map((n) => n[0])}{" "}
             </AvatarFallback>
           </Avatar>
         </div>
       ),
-      label: 'Profile',
+      label: "Profile",
     },
   ];
 
@@ -76,7 +76,7 @@ export default function Sidebar({
         <div className="bg-rgray-2 border-r-rgray-6 relative z-[50] flex h-full w-full flex-col items-center justify-center border-r px-2 py-5 ">
           <MenuItem
             item={{
-              label: 'Memories',
+              label: "Memories",
               icon: <MemoryIcon className="h-10 w-10" />,
               content: <MemoriesBar />,
             }}
@@ -88,7 +88,7 @@ export default function Sidebar({
 
           <MenuItem
             item={{
-              label: 'Trash',
+              label: "Trash",
               icon: <Bin id="trash" className="z-[300] h-7 w-7" />,
             }}
             selectedItem={selectedItem}
@@ -97,7 +97,7 @@ export default function Sidebar({
           />
           <MenuItem
             item={{
-              label: 'Profile',
+              label: "Profile",
               icon: (
                 <div className="mb-2">
                   <Avatar>
@@ -111,7 +111,7 @@ export default function Sidebar({
                       <User2 strokeWidth={1.3} className="h-6 w-6" />
                     )}
                     <AvatarFallback>
-                      {session?.user?.name?.split(' ').map((n) => n[0])}{' '}
+                      {session?.user?.name?.split(" ").map((n) => n[0])}{" "}
                     </AvatarFallback>
                   </Avatar>
                 </div>
@@ -154,11 +154,11 @@ const MenuItem = ({
 export function SubSidebar({ children }: { children?: React.ReactNode }) {
   return (
     <motion.div
-      initial={{ opacity: 0, x: '-100%' }}
+      initial={{ opacity: 0, x: "-100%" }}
       animate={{ opacity: 1, x: 0 }}
       exit={{
         opacity: 0,
-        x: '-100%',
+        x: "-100%",
         transition: { delay: 0.2 },
       }}
       transition={{
diff --git a/apps/web/src/components/ui/avatar.tsx b/apps/web/src/components/ui/avatar.tsx
index fb190df3..47795451 100644
--- a/apps/web/src/components/ui/avatar.tsx
+++ b/apps/web/src/components/ui/avatar.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
@@ -13,12 +13,12 @@ const Avatar = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
-      className
+      className,
     )}
     {...props}
   />
-))
-Avatar.displayName = AvatarPrimitive.Root.displayName
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
 
 const AvatarImage = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Image>,
@@ -29,8 +29,8 @@ const AvatarImage = React.forwardRef<
     className={cn("aspect-square h-full w-full", className)}
     {...props}
   />
-))
-AvatarImage.displayName = AvatarPrimitive.Image.displayName
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
 
 const AvatarFallback = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Fallback>,
@@ -40,11 +40,11 @@ const AvatarFallback = React.forwardRef<
     ref={ref}
     className={cn(
       "flex h-full w-full items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800",
-      className
+      className,
     )}
     {...props}
   />
-))
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
-export { Avatar, AvatarImage, AvatarFallback }
+export { Avatar, AvatarImage, AvatarFallback };
diff --git a/apps/web/src/components/ui/badge.tsx b/apps/web/src/components/ui/badge.tsx
index 1e21383f..40b15b91 100644
--- a/apps/web/src/components/ui/badge.tsx
+++ b/apps/web/src/components/ui/badge.tsx
@@ -1,7 +1,7 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
   "inline-flex items-center rounded-full border border-gray-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-gray-950 focus:ring-offset-2 dark:border-gray-800 dark:focus:ring-gray-300",
@@ -20,8 +20,8 @@ const badgeVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
-)
+  },
+);
 
 export interface BadgeProps
   extends React.HTMLAttributes<HTMLDivElement>,
@@ -30,7 +30,7 @@ export interface BadgeProps
 function Badge({ className, variant, ...props }: BadgeProps) {
   return (
     <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  )
+  );
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };
diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx
index b67d2657..24fa903e 100644
--- a/apps/web/src/components/ui/button.tsx
+++ b/apps/web/src/components/ui/button.tsx
@@ -1,8 +1,8 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-gray-950 dark:focus-visible:ring-gray-300",
@@ -30,27 +30,27 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
-)
+  },
+);
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+  asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+    const Comp = asChild ? Slot : "button";
     return (
       <button
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
       />
-    )
-  }
-)
-Button.displayName = "Button"
+    );
+  },
+);
+Button.displayName = "Button";
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };
diff --git a/apps/web/src/components/ui/card.tsx b/apps/web/src/components/ui/card.tsx
index 65119a16..e98d500c 100644
--- a/apps/web/src/components/ui/card.tsx
+++ b/apps/web/src/components/ui/card.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Card = React.forwardRef<
   HTMLDivElement,
@@ -10,12 +10,12 @@ const Card = React.forwardRef<
     ref={ref}
     className={cn(
       "rounded-lg border border-gray-200 bg-white text-gray-950 shadow-sm dark:border-gray-800 dark:bg-gray-950 dark:text-gray-50",
-      className
+      className,
     )}
     {...props}
   />
-))
-Card.displayName = "Card"
+));
+Card.displayName = "Card";
 
 const CardHeader = React.forwardRef<
   HTMLDivElement,
@@ -26,8 +26,8 @@ const CardHeader = React.forwardRef<
     className={cn("flex flex-col space-y-1.5 p-6", className)}
     {...props}
   />
-))
-CardHeader.displayName = "CardHeader"
+));
+CardHeader.displayName = "CardHeader";
 
 const CardTitle = React.forwardRef<
   HTMLParagraphElement,
@@ -37,12 +37,12 @@ const CardTitle = React.forwardRef<
     ref={ref}
     className={cn(
       "text-2xl font-semibold leading-none tracking-tight",
-      className
+      className,
     )}
     {...props}
   />
-))
-CardTitle.displayName = "CardTitle"
+));
+CardTitle.displayName = "CardTitle";
 
 const CardDescription = React.forwardRef<
   HTMLParagraphElement,
@@ -53,16 +53,16 @@ const CardDescription = React.forwardRef<
     className={cn("text-sm text-gray-500 dark:text-gray-400", className)}
     {...props}
   />
-))
-CardDescription.displayName = "CardDescription"
+));
+CardDescription.displayName = "CardDescription";
 
 const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-))
-CardContent.displayName = "CardContent"
+));
+CardContent.displayName = "CardContent";
 
 const CardFooter = React.forwardRef<
   HTMLDivElement,
@@ -73,7 +73,14 @@ const CardFooter = React.forwardRef<
     className={cn("flex items-center p-6 pt-0", className)}
     {...props}
   />
-))
-CardFooter.displayName = "CardFooter"
+));
+CardFooter.displayName = "CardFooter";
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};
diff --git a/apps/web/src/components/ui/label.tsx b/apps/web/src/components/ui/label.tsx
index 53418217..84f8b0c7 100644
--- a/apps/web/src/components/ui/label.tsx
+++ b/apps/web/src/components/ui/label.tsx
@@ -1,14 +1,14 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-)
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+);
 
 const Label = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
@@ -20,7 +20,7 @@ const Label = React.forwardRef<
     className={cn(labelVariants(), className)}
     {...props}
   />
-))
-Label.displayName = LabelPrimitive.Root.displayName
+));
+Label.displayName = LabelPrimitive.Root.displayName;
 
-export { Label }
+export { Label };