Update UI

.env.template

@@ -0,0 +1,22 @@
+# App configurations
+APP_PORT=
+NODE_ENV=
+
+# For debugging
+DEFAULT_HF_TOKEN=
+INFERENCE_ENDPOINT_URL=
+
+# Hugging Face OAuth2.0 configurations.
+REDIRECT_URI=
+OAUTH_CLIENT_ID=
+OAUTH_CLIENT_SECRET=
+
+# Anysite gallery service API auth token.
+ANYSITE_GALLERY_AUTH_TOKEN=
+
+# optional. POSTHOG Auth configurations. 
+NEXT_PUBLIC_POSTHOG_HOST=
+NEXT_PUBLIC_POSTHOG_KEY=
+
+# Novita AI API Key
+NOVITA_API_TOKEN=

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next"
+}

README.md

@@ -18,4 +18,5 @@ models:
 ---
 
 ## Credits
-This space is inspired by https://huggingface.co/spaces/enzostvs/deepsite.
+
+This space is inspired by https://huggingface.co/spaces/enzostvs/deepsite.

components.json

@@ -18,4 +18,4 @@
     "hooks": "@/hooks"
   },
   "iconLibrary": "lucide"
-}
+}

package.json

@@ -1,12 +1,16 @@
 {
-  "name": "my-v0-project",
+  "name": "novita-anysite",
   "version": "0.1.0",
   "private": true,
   "scripts": {
     "dev": "next dev -p ${APP_PORT:-5001}",
     "build": "next build",
     "start": "next start -p ${APP_PORT:-5001}",
-    "lint": "next lint"
+    "lint": "next lint",
+    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md,css,scss}\"",
+    "format:check": "prettier --check \"**/*.{ts,tsx,js,jsx,json,md,css,scss}\"",
+    "format:ts": "prettier --write \"**/*.{ts,tsx}\"",
+    "type-check": "tsc --noEmit"
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.1",
@@ -48,6 +52,7 @@
     "date-fns": "4.1.0",
     "embla-carousel-react": "8.5.1",
     "input-otp": "1.4.1",
+    "liquid-glass-react": "^1.1.1",
     "lucide-react": "^0.454.0",
     "nanoid": "^5.1.5",
     "next": "15.2.4",
@@ -66,11 +71,14 @@
     "zod": "^3.24.1"
   },
   "devDependencies": {
+    "prettier": "^3.5.3",
     "@types/node": "^22",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "eslint": "^9.28.0",
+    "eslint-config-next": "15.3.3",
     "postcss": "^8",
     "tailwindcss": "^3.4.17",
     "typescript": "^5"
   }
-}
+}

src/app/api/auth/check-bypass/route.ts

@@ -6,4 +6,4 @@ export async function GET(request: NextRequest): Promise<NextResponse> {
   const fingerprint = generateFingerprintFromHeaders(request);
   const canBypass = evaluateLoginBypass(fingerprint, true);
   return new NextResponse(String(canBypass), { status: 200 });
-} 
+}

src/app/api/auth/login/route.ts

@@ -7,7 +7,8 @@ export async function GET(request: NextRequest) {
   const searchParams = request.nextUrl.searchParams;
   const code = searchParams.get("code");
 
-  const host = request.headers.get("x-forwarded-host") || request.headers.get("host");
+  const host =
+    request.headers.get("x-forwarded-host") || request.headers.get("host");
   const protocol = request.headers.get("x-forwarded-proto") || "http";
   const baseUrl = `${protocol}://${host}`;
 
@@ -16,7 +17,7 @@ export async function GET(request: NextRequest) {
   }
 
   const Authorization = `Basic ${Buffer.from(
-    `${process.env.OAUTH_CLIENT_ID}:${process.env.OAUTH_CLIENT_SECRET}`
+    `${process.env.OAUTH_CLIENT_ID}:${process.env.OAUTH_CLIENT_SECRET}`,
   ).toString("base64")}`;
 
   try {
@@ -32,7 +33,7 @@ export async function GET(request: NextRequest) {
         redirect_uri: REDIRECT_URI,
       }),
     });
-  
+
     const response = await request_auth.json();
     if (!response.access_token) {
       return NextResponse.redirect(new URL("/", baseUrl));
@@ -40,8 +41,8 @@ export async function GET(request: NextRequest) {
 
     const res = NextResponse.redirect(new URL("/", baseUrl));
     res.cookies.set("hf_token", response.access_token, {
-        httpOnly: false,
-        secure: true,
+      httpOnly: false,
+      secure: true,
       sameSite: "none",
       maxAge: 30 * 24 * 60 * 60 * 1000,
       path: "/",
@@ -52,4 +53,4 @@ export async function GET(request: NextRequest) {
     console.error("Error during login:", error);
     return NextResponse.redirect(new URL("/", baseUrl));
   }
-} 
+}

src/app/api/generate-code/route.ts

@@ -1,11 +1,11 @@
 import { NextRequest, NextResponse } from "next/server";
 import { MODEL_CONFIG_CODE_GENERATION } from "@/lib/constants";
-import { 
-  getInferenceToken, 
-  checkTokenLimit, 
-  createInferenceClient, 
+import {
+  getInferenceToken,
+  checkTokenLimit,
+  createInferenceClient,
   createStreamResponse,
-  getInferenceOptions
+  getInferenceOptions,
 } from "@/lib/inference-utils";
 
 export const dynamic = "force-dynamic";
@@ -13,7 +13,8 @@ const NO_THINK_TAG = " /no_think";
 
 export async function POST(request: NextRequest) {
   try {
-    const { prompt, html, previousPrompt, colors, modelId } = await request.json();
+    const { prompt, html, previousPrompt, colors, modelId } =
+      await request.json();
 
     if (!prompt) {
       return NextResponse.json(
@@ -21,13 +22,14 @@ export async function POST(request: NextRequest) {
           ok: false,
           message: "Missing required fields",
         },
-        { status: 400 }
+        { status: 400 },
       );
     }
 
     // Find the model config by modelId or use the first one as default
-    const modelConfig = modelId 
-      ? MODEL_CONFIG_CODE_GENERATION.find(config => config.id === modelId) || MODEL_CONFIG_CODE_GENERATION[0]
+    const modelConfig = modelId
+      ? MODEL_CONFIG_CODE_GENERATION.find((config) => config.id === modelId) ||
+        MODEL_CONFIG_CODE_GENERATION[0]
       : MODEL_CONFIG_CODE_GENERATION[0];
 
     // Get inference token
@@ -39,7 +41,7 @@ export async function POST(request: NextRequest) {
           openLogin: tokenResult.error.openLogin,
           message: tokenResult.error.message,
         },
-        { status: tokenResult.error.status }
+        { status: tokenResult.error.status },
       );
     }
 
@@ -54,8 +56,10 @@ export async function POST(request: NextRequest) {
       return NextResponse.json(tokenLimitError, { status: 400 });
     }
 
-    const actualNoThinkTag = modelConfig.default_enable_thinking ? NO_THINK_TAG : "";
-  
+    const actualNoThinkTag = modelConfig.default_enable_thinking
+      ? NO_THINK_TAG
+      : "";
+
     // Use streaming response
     return createStreamResponse(async (controller) => {
       const client = createInferenceClient(tokenResult);
@@ -68,27 +72,27 @@ export async function POST(request: NextRequest) {
         },
         ...(previousPrompt
           ? [
-            {
-              role: "user",
-              content: previousPrompt,
-            },
-          ]
+              {
+                role: "user",
+                content: previousPrompt,
+              },
+            ]
           : []),
         ...(html
           ? [
-            {
-              role: "assistant",
-              content: `The current code is: ${html}.`,
-            },
-          ]
+              {
+                role: "assistant",
+                content: `The current code is: ${html}.`,
+              },
+            ]
           : []),
-        ...((colors && colors.length > 0)
+        ...(colors && colors.length > 0
           ? [
-            {
-              role: "user",
-              content: `Use the following color palette in your UI design: ${colors.join(', ')}`,
-            },
-          ]
+              {
+                role: "user",
+                content: `Use the following color palette in your UI design: ${colors.join(", ")}`,
+              },
+            ]
           : []),
         {
           role: "user",
@@ -97,7 +101,7 @@ export async function POST(request: NextRequest) {
       ];
 
       const chatCompletion = client.chatCompletionStream(
-        getInferenceOptions(modelConfig, messages, modelConfig.max_tokens)
+        getInferenceOptions(modelConfig, messages, modelConfig.max_tokens),
       );
       const encoder = new TextEncoder();
       for await (const chunk of chatCompletion) {
@@ -117,7 +121,7 @@ export async function POST(request: NextRequest) {
         ok: false,
         message: error instanceof Error ? error.message : "Unknown error",
       },
-      { status: 500 }
+      { status: 500 },
     );
   }
-}
+}

src/app/api/improve-prompt/route.ts

@@ -1,11 +1,11 @@
 import { NextRequest, NextResponse } from "next/server";
 import { MODEL_CONFIG_PROMPT_IMPROVEMENT } from "@/lib/constants";
-import { 
-  getInferenceToken, 
-  checkTokenLimit, 
-  createInferenceClient, 
+import {
+  getInferenceToken,
+  checkTokenLimit,
+  createInferenceClient,
   createStreamResponse,
-  getInferenceOptions
+  getInferenceOptions,
 } from "@/lib/inference-utils";
 
 export const dynamic = "force-dynamic";
@@ -20,7 +20,7 @@ export async function POST(request: NextRequest) {
           ok: false,
           message: "Missing required fields",
         },
-        { status: 400 }
+        { status: 400 },
       );
     }
 
@@ -33,12 +33,12 @@ export async function POST(request: NextRequest) {
           openLogin: tokenResult.error.openLogin,
           message: tokenResult.error.message,
         },
-        { status: tokenResult.error.status }
+        { status: tokenResult.error.status },
       );
     }
 
     let TOKENS_USED = prompt?.length || 0;
-    
+
     let modelConfig = MODEL_CONFIG_PROMPT_IMPROVEMENT;
 
     // Check token limit
@@ -52,7 +52,7 @@ export async function POST(request: NextRequest) {
     // Use streaming response
     return createStreamResponse(async (controller) => {
       const client = createInferenceClient(tokenResult);
-      
+
       const messages = [
         {
           role: "system",
@@ -65,7 +65,7 @@ export async function POST(request: NextRequest) {
       ];
 
       const chatCompletion = client.chatCompletionStream(
-        getInferenceOptions(modelConfig, messages, modelConfig.max_tokens)
+        getInferenceOptions(modelConfig, messages, modelConfig.max_tokens),
       );
 
       const encoder = new TextEncoder();
@@ -82,7 +82,7 @@ export async function POST(request: NextRequest) {
         ok: false,
         message: error instanceof Error ? error.message : "Unknown error",
       },
-      { status: 500 }
+      { status: 500 },
     );
   }
-}
+}

src/app/api/login/route.ts

@@ -4,6 +4,6 @@ export const dynamic = "force-dynamic";
 
 export async function GET() {
   const url = `https://huggingface.co/oauth/authorize?client_id=${process.env.OAUTH_CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code&scope=openid%20profile%20inference-api&prompt=consent&state=1234567890`;
-  
+
   return NextResponse.redirect(url);
-}
+}

src/app/api/share-link/route.ts

@@ -1,4 +1,4 @@
-import { NextRequest, NextResponse } from 'next/server';
+import { NextRequest, NextResponse } from "next/server";
 
 const BASE_URL = "https://anysite-gallery.novita.ai";
 
@@ -7,10 +7,10 @@ export async function POST(request: NextRequest) {
     const { filename, code } = await request.json();
 
     const response = await fetch(`${BASE_URL}/api/upload-code`, {
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json',
-        'x-token': process.env.ANYSITE_GALLERY_AUTH_TOKEN || "",
+        "Content-Type": "application/json",
+        "x-token": process.env.ANYSITE_GALLERY_AUTH_TOKEN || "",
       },
       body: JSON.stringify({
         filename,
@@ -20,18 +20,21 @@ export async function POST(request: NextRequest) {
 
     if (!response.ok) {
       return NextResponse.json(
-        { success: false, message: `Failed to upload: ${response.status} ${response.statusText}` },
-        { status: response.status }
+        {
+          success: false,
+          message: `Failed to upload: ${response.status} ${response.statusText}`,
+        },
+        { status: response.status },
       );
     }
 
     const result = await response.json();
     return NextResponse.json(result);
   } catch (error) {
-    console.error('Error in share-link API:', error);
+    console.error("Error in share-link API:", error);
     return NextResponse.json(
-      { success: false, message: 'Internal server error' },
-      { status: 500 }
+      { success: false, message: "Internal server error" },
+      { status: 500 },
     );
   }
-} 
+}

src/app/layout.tsx

@@ -1,30 +1,36 @@
-import type React from "react"
-import type { Metadata } from "next"
-import { Inter } from "next/font/google"
-import "./globals.css"
-import { ThemeProvider } from "@/components/theme-provider"
-import { TooltipProvider } from "@/components/ui/tooltip"
-import { Toaster } from "sonner"
-import { ModelProvider } from "@/lib/contexts/model-context"
-import { PostHogProvider } from './providers'
+import type React from "react";
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+import { ThemeProvider } from "@/components/theme-provider";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { Toaster } from "sonner";
+import { ModelProvider } from "@/lib/contexts/model-context";
+import { PostHogProvider } from "./providers";
 
-const inter = Inter({ subsets: ["latin"] })
+const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
   title: "Novita AnySite",
-  description: "Create stunning websites with cutting-edge AI models powered by Novita AI.",
-}
+  description:
+    "Create stunning websites with cutting-edge AI models powered by Novita AI.",
+};
 
 export default function RootLayout({
   children,
 }: Readonly<{
-  children: React.ReactNode
+  children: React.ReactNode;
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
       <body className={inter.className} suppressHydrationWarning>
         <PostHogProvider>
-          <ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
+          <ThemeProvider
+            attribute="class"
+            defaultTheme="dark"
+            enableSystem
+            disableTransitionOnChange
+          >
             <ModelProvider>
               <TooltipProvider>{children}</TooltipProvider>
               <Toaster richColors />
@@ -33,5 +39,5 @@ export default function RootLayout({
         </PostHogProvider>
       </body>
     </html>
-  )
+  );
 }

src/app/providers.tsx

@@ -1,21 +1,17 @@
 // app/providers.tsx
-'use client'
+"use client";
 
-import posthog from 'posthog-js'
-import { PostHogProvider as PHProvider } from 'posthog-js/react'
-import { useEffect } from 'react'
+import posthog from "posthog-js";
+import { PostHogProvider as PHProvider } from "posthog-js/react";
+import { useEffect } from "react";
 
 export function PostHogProvider({ children }: { children: React.ReactNode }) {
-    useEffect(() => {
-      posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY || '', {
-        api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
-        defaults: '2025-05-24',
-      })
-  }, [])
+  useEffect(() => {
+    posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY || "", {
+      api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
+      defaults: "2025-05-24",
+    });
+  }, []);
 
-  return (
-    <PHProvider client={posthog}>
-      {children}
-    </PHProvider>
-  )
-}
+  return <PHProvider client={posthog}>{children}</PHProvider>;
+}

src/components/app-container.tsx

@@ -1,17 +1,21 @@
-"use client"
-
-import { useState, useRef, useEffect } from "react"
-import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@/components/ui/resizable"
-import { CodeEditor } from "./code-editor"
-import { Preview } from "./preview"
-import { PromptInput } from "./prompt-input"
-import { Header } from "./header"
-import { VersionDropdown } from "./version-dropdown"
-import { AuthErrorPopup } from "./auth-error-popup"
-import { toast } from "sonner"
-import { DEFAULT_HTML } from "@/lib/constants"
-import { Version, PreviewRef } from "@/lib/types"
-import { ErrorMessage } from "./ui/error-message"
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import {
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizableHandle,
+} from "@/components/ui/resizable";
+import { CodeEditor } from "./code-editor";
+import { Preview } from "./preview";
+import { PromptInput } from "./prompt-input";
+import { Header } from "./header";
+import { VersionDropdown } from "./version-dropdown";
+import { AuthErrorPopup } from "./auth-error-popup";
+import { toast } from "sonner";
+import { DEFAULT_HTML } from "@/lib/constants";
+import { Version, PreviewRef } from "@/lib/types";
+import { ErrorMessage } from "./ui/error-message";
 
 export function AppContainer() {
   const [code, setCode] = useState<string>("");
@@ -35,15 +39,17 @@ export function AppContainer() {
   // Initialize current version ID from localStorage on mount
   useEffect(() => {
     setInitialLoading(true);
-    
-    const storedVersions = localStorage.getItem('novita-versions');
+
+    const storedVersions = localStorage.getItem("novita-versions");
     if (storedVersions) {
       const parsedVersions = JSON.parse(storedVersions) as Version[];
       if (parsedVersions.length > 0) {
         // Sort by creation time, newest first
-        const sortedVersions = parsedVersions.sort((a, b) => b.createdAt - a.createdAt);
+        const sortedVersions = parsedVersions.sort(
+          (a, b) => b.createdAt - a.createdAt,
+        );
         const newestVersion = sortedVersions[0];
-        
+
         // Set the current version ID and also load its code and prompt
         setCurrentVersionId(newestVersion.id);
         latestVersionIdRef.current = newestVersion.id;
@@ -61,9 +67,9 @@ export function AppContainer() {
       setCode(DEFAULT_HTML);
       setCurrentVersionId(null);
       latestVersionIdRef.current = null;
-      localStorage.setItem('novita-versions', JSON.stringify([]));
+      localStorage.setItem("novita-versions", JSON.stringify([]));
     }
-    
+
     // Finish loading after a short delay to ensure everything renders properly
     setTimeout(() => {
       setInitialLoading(false);
@@ -73,23 +79,23 @@ export function AppContainer() {
   const handlePromptSubmit = async (newPrompt: string, colors: string[]) => {
     // Store the current prompt as previous prompt
     const oldPrompt = currentPromptRef.current;
-    
+
     // Update prompt state
     setPrompt(newPrompt);
     currentPromptRef.current = newPrompt; // Update the ref immediately
-    
+
     // Clear code and preview when submit is pressed
     setCode("");
-    
+
     // Create a new version immediately with empty code when submit is clicked
     const newVersionId = saveVersionInitial(newPrompt);
     setCurrentVersionId(newVersionId);
-    
+
     if (previewRef.current) {
       // Pass both the new prompt and old prompt for context
       await previewRef.current.generateCode(newPrompt, colors, oldPrompt);
     }
-  }
+  };
 
   // Handle code change and save version
   const handleCodeChange = (newCode: string, save = false) => {
@@ -101,73 +107,74 @@ export function AppContainer() {
       // Make sure we're updating the latest version
       updateVersionWithFinalCode(newCode);
     }
-  }
-  
+  };
+
   // Explicitly save version when loading completes
   const handleLoadingChange = (isLoading: boolean) => {
     setLoading(isLoading);
-  }
+  };
 
   // Function to create a new version initially with empty code
   const saveVersionInitial = (promptToSave: string) => {
     // Get existing versions
-    const storedVersions = localStorage.getItem('novita-versions');
+    const storedVersions = localStorage.getItem("novita-versions");
     let versions: Version[] = storedVersions ? JSON.parse(storedVersions) : [];
-    
+
     // Create new version with empty code
     const newVersion: Version = {
       id: Date.now().toString(),
       code: "", // Empty code field initially
       prompt: promptToSave,
-      createdAt: Date.now()
+      createdAt: Date.now(),
     };
-    
+
     // Add to beginning (newest first)
     versions = [newVersion, ...versions];
-    
+
     // Save to localStorage
-    localStorage.setItem('novita-versions', JSON.stringify(versions));
-    
+    localStorage.setItem("novita-versions", JSON.stringify(versions));
+
     // Update current version ID
     setCurrentVersionId(newVersion.id);
     // Also update the latest version ID ref
     latestVersionIdRef.current = newVersion.id;
-    
+
     return newVersion.id;
-  }
+  };
 
   // Function to update existing version with final code
   const updateVersionWithFinalCode = (finalCode: string) => {
     // Get existing versions
-    const storedVersions = localStorage.getItem('novita-versions');
+    const storedVersions = localStorage.getItem("novita-versions");
     if (!storedVersions) return;
-    
+
     let versions: Version[] = JSON.parse(storedVersions);
-    
+
     if (!versions.length) return;
-    
+
     // Prioritize using the latestVersionIdRef, then fall back to currentVersionId, then to the most recent version
-    const versionIdToUpdate = latestVersionIdRef.current || currentVersionId || versions[0].id;
-    
+    const versionIdToUpdate =
+      latestVersionIdRef.current || currentVersionId || versions[0].id;
+
     if (!versionIdToUpdate) return;
-    
+
     // Find and update the current version
-    const updatedVersions = versions.map(version => {
+    const updatedVersions = versions.map((version) => {
       if (version.id === versionIdToUpdate) {
         return { ...version, code: finalCode };
       }
       return version;
     });
-    
+
     // Save to localStorage
-    localStorage.setItem('novita-versions', JSON.stringify(updatedVersions));
-    
+    localStorage.setItem("novita-versions", JSON.stringify(updatedVersions));
+
     // Show a subtle toast notification when code generation completes
-    toast.success('Generated code saved', {
-      position: 'top-right',
+    toast.success("Generated code saved", {
+      position: "top-right",
       duration: 2000,
     });
-  }
+  };
 
   // Handle selecting a version from the dropdown
   const handleVersionSelect = (version: Version) => {
@@ -176,77 +183,78 @@ export function AppContainer() {
     currentPromptRef.current = version.prompt;
     setCurrentVersionId(version.id);
     latestVersionIdRef.current = version.id;
-  }
-  
+  };
+
   // Handle clearing all versions
   const handleClearAll = () => {
     // Reset to default HTML
     setCode(DEFAULT_HTML);
-    setPrompt('');
-    currentPromptRef.current = '';
+    setPrompt("");
+    currentPromptRef.current = "";
     setCurrentVersionId(null);
     latestVersionIdRef.current = null;
-  }
+  };
 
   const handleManualCodeEdit = (newCode: string) => {
     setCode(newCode);
-    
+
     if (currentVersionId) {
       updateVersionWithCode(newCode);
     }
   };
 
-  const updateVersionWithCode = (editedCode: string) => {    // Get existing versions
-    const storedVersions = localStorage.getItem('novita-versions');
+  const updateVersionWithCode = (editedCode: string) => {
+    // Get existing versions
+    const storedVersions = localStorage.getItem("novita-versions");
     if (!storedVersions || !currentVersionId) return;
-    
+
     let versions: Version[] = JSON.parse(storedVersions);
-    
-    const updatedVersions = versions.map(version => {
+
+    const updatedVersions = versions.map((version) => {
       if (version.id === currentVersionId) {
         return { ...version, code: editedCode };
       }
       return version;
     });
-    
-    localStorage.setItem('novita-versions', JSON.stringify(updatedVersions));
+
+    localStorage.setItem("novita-versions", JSON.stringify(updatedVersions));
   };
 
   return (
     <div className="flex flex-col h-screen bg-novita-dark text-white">
-      <Header 
+      <Header
         onVersionSelect={handleVersionSelect}
         currentVersion={currentVersionId || undefined}
         onClearAll={handleClearAll}
       />
       <div className="flex flex-1 overflow-hidden relative">
         <ResizablePanelGroup direction="horizontal" className="h-full">
-          <ResizablePanel 
-            defaultSize={33} 
-            minSize={20} 
+          <ResizablePanel
+            defaultSize={33}
+            minSize={20}
             maxSize={60}
             className="flex flex-col relative"
           >
-            <CodeEditor 
-              code={code} 
-              isLoading={loading} 
+            <CodeEditor
+              code={code}
+              isLoading={loading}
               onCodeChange={handleManualCodeEdit}
             />
-            
-            <AuthErrorPopup 
-              show={showAuthError} 
-              onClose={() => setShowAuthError(false)} 
+
+            <AuthErrorPopup
+              show={showAuthError}
+              onClose={() => setShowAuthError(false)}
             />
-            
-            <PromptInput 
-              onSubmit={handlePromptSubmit} 
-              isLoading={loading} 
+
+            <PromptInput
+              onSubmit={handlePromptSubmit}
+              isLoading={loading}
               initialPrompt={prompt}
               onImproveError={setImproveError}
             />
           </ResizablePanel>
-          
-          <ResizableHandle 
+
+          <ResizableHandle
             withHandle={false}
             className="w-1 bg-novita-gray/20 hover:bg-novita-gray/40 transition-colors duration-200 relative group cursor-col-resize"
           >
@@ -254,16 +262,16 @@ export function AppContainer() {
               <div className="w-0.5 h-8 bg-novita-gray/60 rounded-full" />
             </div>
           </ResizableHandle>
-          
-          <ResizablePanel 
-            defaultSize={67} 
+
+          <ResizablePanel
+            defaultSize={67}
             minSize={40}
             className="flex flex-col"
           >
-            <Preview 
+            <Preview
               ref={previewRef}
-              initialHtml={code} 
-              onCodeChange={handleCodeChange} 
+              initialHtml={code}
+              onCodeChange={handleCodeChange}
               onLoadingChange={handleLoadingChange}
               onAuthErrorChange={setShowAuthError}
               onErrorChange={setGenerationError}
@@ -271,29 +279,34 @@ export function AppContainer() {
             />
           </ResizablePanel>
         </ResizablePanelGroup>
-        
+
         {initialLoading && (
           <div className="absolute inset-0 bg-novita-dark/80 backdrop-blur-sm flex items-center justify-center z-[999]">
             <div className="p-4 text-center">
-              <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]" role="status">
-                <span className="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">Loading...</span>
+              <div
+                className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"
+                role="status"
+              >
+                <span className="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">
+                  Loading...
+                </span>
               </div>
               <p className="mt-2">Preparing the workspace...</p>
             </div>
           </div>
         )}
       </div>
-      
-      <ErrorMessage 
-        message={improveError || generationError} 
+
+      <ErrorMessage
+        message={improveError || generationError}
         onClose={() => {
           if (improveError) {
             setImproveError(null);
           } else if (generationError) {
             setGenerationError(null);
           }
-        }} 
+        }}
       />
     </div>
-  )
+  );
 }

src/components/auth-error-popup.tsx

@@ -1,40 +1,51 @@
-import React from 'react'
+import React from "react";
 
 interface AuthErrorPopupProps {
-  show: boolean
-  authUrl?: string
-  onClose?: () => void
+  show: boolean;
+  authUrl?: string;
+  onClose?: () => void;
 }
 
-export function AuthErrorPopup({ 
-  show, 
-  authUrl = '/api/login', 
-  onClose
+export function AuthErrorPopup({
+  show,
+  authUrl = "/api/login",
+  onClose,
 }: AuthErrorPopupProps) {
-  if (!show) return null
-  
+  if (!show) return null;
+
   return (
     <div className="absolute right-0 bottom-20 mr-4 w-fit px-2.5 bg-gray-800 border border-gray-600 rounded-lg p-4 shadow-xl z-50">
       {onClose && (
-        <button 
+        <button
           onClick={onClose}
           className="absolute top-1 right-1 text-gray-400 hover:text-white p-1 rounded-full hover:bg-gray-700 focus:outline-none"
           aria-label="Close"
         >
-          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          <svg
+            className="w-4 h-4"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M6 18L18 6M6 6l12 12"
+            />
           </svg>
         </button>
       )}
       <div className="flex flex-col items-center">
         <p className="mb-3 text-center">Sign in continue</p>
         <a href={authUrl} className="block w-[214px] h-[40px]">
-          <img 
-            src="https://huggingface.co/datasets/huggingface/badges/resolve/main/sign-in-with-huggingface-lg-dark.svg" 
-            alt="Sign in with Hugging Face" 
+          <img
+            src="https://huggingface.co/datasets/huggingface/badges/resolve/main/sign-in-with-huggingface-lg-dark.svg"
+            alt="Sign in with Hugging Face"
           />
         </a>
       </div>
     </div>
-  )
-}
+  );
+}

src/components/code-editor.tsx

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 
 import { useEffect, useRef, useState, useCallback } from "react";
 import { debounce, highlightHTML } from "@/lib/utils";
@@ -9,7 +9,11 @@ interface CodeEditorProps {
   onCodeChange?: (code: string) => void;
 }
 
-export function CodeEditor({ code, isLoading = false, onCodeChange }: CodeEditorProps) {
+export function CodeEditor({
+  code,
+  isLoading = false,
+  onCodeChange,
+}: CodeEditorProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const highlightRef = useRef<HTMLDivElement>(null);
@@ -22,7 +26,7 @@ export function CodeEditor({ code, isLoading = false, onCodeChange }: CodeEditor
         onCodeChange(newCode);
       }
     }, 1000),
-    [onCodeChange]
+    [onCodeChange],
   );
 
   useEffect(() => {
@@ -48,7 +52,11 @@ export function CodeEditor({ code, isLoading = false, onCodeChange }: CodeEditor
   };
 
   useEffect(() => {
-    if (isAtBottom && textareaRef.current && document.activeElement !== textareaRef.current) {
+    if (
+      isAtBottom &&
+      textareaRef.current &&
+      document.activeElement !== textareaRef.current
+    ) {
       textareaRef.current.scrollTop = textareaRef.current.scrollHeight;
       if (highlightRef.current) {
         highlightRef.current.scrollTop = highlightRef.current.scrollHeight;
@@ -58,16 +66,17 @@ export function CodeEditor({ code, isLoading = false, onCodeChange }: CodeEditor
 
   // Handle tab key for indentation
   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key === 'Tab') {
+    if (e.key === "Tab") {
       e.preventDefault();
       const textarea = e.currentTarget;
       const start = textarea.selectionStart;
       const end = textarea.selectionEnd;
-      
-      const newValue = localCode.substring(0, start) + '  ' + localCode.substring(end);
+
+      const newValue =
+        localCode.substring(0, start) + "  " + localCode.substring(end);
       setLocalCode(newValue);
       debouncedSave(newValue);
-      
+
       setTimeout(() => {
         textarea.selectionStart = textarea.selectionEnd = start + 2;
       }, 0);
@@ -78,20 +87,21 @@ export function CodeEditor({ code, isLoading = false, onCodeChange }: CodeEditor
 
   return (
     <div className="flex-1 overflow-hidden p-4 pr-2">
-      <div 
-        ref={containerRef} 
+      <div
+        ref={containerRef}
         className="code-area rounded-md font-mono text-sm h-full border border-novita-gray/20 relative overflow-hidden"
       >
         <div className="relative h-full">
           {/* Syntax highlighted background - always visible */}
-          <div 
+          <div
             ref={highlightRef}
             className="absolute inset-0 overflow-auto p-4 pointer-events-none whitespace-pre-wrap font-mono text-sm leading-relaxed"
-            style={{ 
-              fontSize: '0.875rem',
-              lineHeight: '1.5',
-              fontFamily: 'ui-monospace, SFMono-Regular, \"SF Mono\", Consolas, \"Liberation Mono\", Menlo, monospace',
-              color: '#d4d4d4'
+            style={{
+              fontSize: "0.875rem",
+              lineHeight: "1.5",
+              fontFamily:
+                'ui-monospace, SFMono-Regular, \"SF Mono\", Consolas, \"Liberation Mono\", Menlo, monospace',
+              color: "#d4d4d4",
             }}
             dangerouslySetInnerHTML={{ __html: highlightedCode }}
           />
@@ -105,20 +115,21 @@ export function CodeEditor({ code, isLoading = false, onCodeChange }: CodeEditor
             onKeyDown={handleKeyDown}
             disabled={isLoading}
             className="absolute inset-0 w-full h-full bg-transparent text-transparent caret-white resize-none outline-none whitespace-pre-wrap font-mono text-sm leading-relaxed p-4 selection:bg-blue-500/30"
-            style={{ 
-              fontSize: '0.875rem',
-              lineHeight: '1.5',
-              fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace'
+            style={{
+              fontSize: "0.875rem",
+              lineHeight: "1.5",
+              fontFamily:
+                'ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace',
             }}
             placeholder="Your generated code will appear here..."
             spellCheck={false}
           />
         </div>
-        
+
         {isLoading && (
           <span className="absolute bottom-4 right-4 inline-block h-4 w-2 bg-white/70 animate-pulse z-10"></span>
         )}
       </div>
     </div>
-  )
+  );
 }

src/components/color-panel.tsx

@@ -1,26 +1,42 @@
-"use client"
+"use client";
 
-import { useState, useEffect, useRef } from "react"
-import { Plus, X } from "lucide-react"
-import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider } from "@/components/ui/tooltip"
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
+import { useState, useEffect, useRef } from "react";
+import { Plus, X } from "lucide-react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  TooltipProvider,
+} from "@/components/ui/tooltip";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
 
 interface ColorCircleProps {
-  color: string
-  onClick?: () => void
-  onDelete?: () => void
-  className?: string
-  size?: "sm" | "md"
-  showDeleteIcon?: boolean
+  color: string;
+  onClick?: () => void;
+  onDelete?: () => void;
+  className?: string;
+  size?: "sm" | "md";
+  showDeleteIcon?: boolean;
 }
 
-function ColorCircle({ color, onClick, onDelete, className, size = "sm", showDeleteIcon = false }: ColorCircleProps) {
+function ColorCircle({
+  color,
+  onClick,
+  onDelete,
+  className,
+  size = "sm",
+  showDeleteIcon = false,
+}: ColorCircleProps) {
   const sizeClasses = {
     sm: "w-5 h-5",
     md: "w-6 h-6",
-  }
+  };
 
   return (
     <div className="relative group h-5">
@@ -49,7 +65,7 @@ function ColorCircle({ color, onClick, onDelete, className, size = "sm", showDel
         </button>
       )}
     </div>
-  )
+  );
 }
 
 const PRESET_COLORS = [
@@ -65,27 +81,27 @@ const PRESET_COLORS = [
   "#14b8a6", // Teal
   "#f97316", // Orange
   "#6366f1", // Indigo
-]
+];
 
 interface ColorPanelProps {
   onColorsChange?: (colors: string[]) => void;
 }
 
 export function ColorPanel({ onColorsChange }: ColorPanelProps) {
-  const maxColors = 6
-  const [colors, setColors] = useState<string[]>([])
-  const [isPopoverOpen, setIsPopoverOpen] = useState(false)
-  const [selectedColor, setSelectedColor] = useState<string | null>(null)
-  const [isAddingDisabled, setIsAddingDisabled] = useState(false)
-  const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+  const maxColors = 6;
+  const [colors, setColors] = useState<string[]>([]);
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const [selectedColor, setSelectedColor] = useState<string | null>(null);
+  const [isAddingDisabled, setIsAddingDisabled] = useState(false);
+  const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   useEffect(() => {
     return () => {
       if (debounceTimeoutRef.current) {
-        clearTimeout(debounceTimeoutRef.current)
+        clearTimeout(debounceTimeoutRef.current);
       }
-    }
-  }, [])
+    };
+  }, []);
 
   useEffect(() => {
     // Call onColorsChange when colors change
@@ -93,37 +109,38 @@ export function ColorPanel({ onColorsChange }: ColorPanelProps) {
   }, [colors, onColorsChange]);
 
   const addColor = () => {
-    if (colors.length >= maxColors || !selectedColor || isAddingDisabled) return
-    
+    if (colors.length >= maxColors || !selectedColor || isAddingDisabled)
+      return;
+
     if (!colors.includes(selectedColor)) {
-      setIsAddingDisabled(true)
-      setColors([...colors, selectedColor])
-      setSelectedColor(null)
-      setIsPopoverOpen(false)
-      
+      setIsAddingDisabled(true);
+      setColors([...colors, selectedColor]);
+      setSelectedColor(null);
+      setIsPopoverOpen(false);
+
       // Debounce to prevent rapid clicking
       debounceTimeoutRef.current = setTimeout(() => {
-        setIsAddingDisabled(false)
-      }, 500)
+        setIsAddingDisabled(false);
+      }, 500);
     }
-  }
+  };
 
   const selectColor = (color: string) => {
-    setSelectedColor(color)
-  }
+    setSelectedColor(color);
+  };
 
   const removeColor = (indexToRemove: number) => {
-    setColors(colors.filter((_, index) => index !== indexToRemove))
-  }
+    setColors(colors.filter((_, index) => index !== indexToRemove));
+  };
 
   return (
     <TooltipProvider>
       <div className="absolute top-2.5 left-3 flex items-center gap-1.5 z-10">
         {colors.map((color, index) => (
-          <ColorCircle 
-            key={`${color}-${index}`} 
-            color={color} 
-            onClick={() => removeColor(index)} 
+          <ColorCircle
+            key={`${color}-${index}`}
+            color={color}
+            onClick={() => removeColor(index)}
             onDelete={() => removeColor(index)}
             showDeleteIcon={true}
           />
@@ -163,13 +180,15 @@ export function ColorPanel({ onColorsChange }: ColorPanelProps) {
                       onClick={() => selectColor(color)}
                       className={cn(
                         selectedColor === color && "ring-2 ring-white/50",
-                        colors.includes(color) && "opacity-50"
+                        colors.includes(color) && "opacity-50",
                       )}
                     />
                   ))}
                 </div>
                 <div className="pt-2 border-t border-novita-gray/30">
-                  <label className="block text-xs text-novita-gray mb-1.5">Custom color</label>
+                  <label className="block text-xs text-novita-gray mb-1.5">
+                    Custom color
+                  </label>
                   <input
                     type="color"
                     className="w-full h-8 bg-transparent border border-novita-gray/30 rounded cursor-pointer"
@@ -178,7 +197,7 @@ export function ColorPanel({ onColorsChange }: ColorPanelProps) {
                   />
                 </div>
                 <div className="mt-3">
-                  <Button 
+                  <Button
                     onClick={addColor}
                     disabled={!selectedColor || isAddingDisabled}
                     className="w-full h-6 bg-novita-white hover:bg-novita-gray/90 text-white rounded border border-novita-gray/90"
@@ -192,5 +211,5 @@ export function ColorPanel({ onColorsChange }: ColorPanelProps) {
         )}
       </div>
     </TooltipProvider>
-  )
+  );
 }

src/components/header.tsx

@@ -1,16 +1,16 @@
-"use client"
-import { Logo } from "./logo"
-import { ModelSelector } from "./model-selector"
-import { VersionDropdown } from "./version-dropdown"
+"use client";
+import { Logo } from "./logo";
+import { ModelSelector } from "./model-selector";
+import { VersionDropdown } from "./version-dropdown";
 
 export function Header({
   onVersionSelect,
   currentVersion,
-  onClearAll
-}: { 
-  onVersionSelect?: (version: any) => void,
-  currentVersion?: string,
-  onClearAll?: () => void
+  onClearAll,
+}: {
+  onVersionSelect?: (version: any) => void;
+  currentVersion?: string;
+  onClearAll?: () => void;
 }) {
   return (
     <header className="border-b border-novita-gray/20 p-3 flex justify-between items-center bg-novita-dark">
@@ -21,17 +21,25 @@ export function Header({
             <div className="flex items-center">
               <ModelSelector />
               {onVersionSelect && (
-                <VersionDropdown 
-                  onVersionSelect={onVersionSelect} 
+                <VersionDropdown
+                  onVersionSelect={onVersionSelect}
                   currentVersion={currentVersion}
                   onClearAll={onClearAll}
                 />
               )}
             </div>
           </div>
-          <span className="text-sm text-white/40"><a href="https://novita.ai/models/llm" target="_blank" className="underline hover:text-white/70 transition-colors duration-200">Powered by novita.ai</a></span>
+          <span className="text-sm text-white/40">
+            <a
+              href="https://novita.ai/models/llm"
+              target="_blank"
+              className="underline hover:text-white/70 transition-colors duration-200"
+            >
+              Powered by novita.ai
+            </a>
+          </span>
         </div>
       </div>
     </header>
-  )
-}
+  );
+}

src/components/logo.tsx

@@ -10,5 +10,5 @@ export function Logo() {
     >
       <path d="M50 0L100 50H50L0 0H50Z" fill="currentColor" />
     </svg>
-  )
+  );
 }

src/components/model-selector.tsx

@@ -1,35 +1,38 @@
-"use client"
+"use client";
 
-import { useState, useEffect, useRef } from 'react'
-import { MODEL_CONFIG_CODE_GENERATION } from '@/lib/constants'
-import { useModel } from '@/lib/contexts/model-context'
-import { ChevronDown } from 'lucide-react'
+import { useState, useEffect, useRef } from "react";
+import { MODEL_CONFIG_CODE_GENERATION } from "@/lib/constants";
+import { useModel } from "@/lib/contexts/model-context";
+import { ChevronDown } from "lucide-react";
 
 export function ModelSelector() {
-  const { selectedModelIndex, setSelectedModelIndex } = useModel()
-  const [isOpen, setIsOpen] = useState(false)
-  const selectorRef = useRef<HTMLDivElement>(null)
+  const { selectedModelIndex, setSelectedModelIndex } = useModel();
+  const [isOpen, setIsOpen] = useState(false);
+  const selectorRef = useRef<HTMLDivElement>(null);
 
   const handleSelect = (index: number) => {
-    setSelectedModelIndex(index)
-    setIsOpen(false)
-  }
+    setSelectedModelIndex(index);
+    setIsOpen(false);
+  };
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
-      if (selectorRef.current && !selectorRef.current.contains(event.target as Node)) {
-        setIsOpen(false)
+      if (
+        selectorRef.current &&
+        !selectorRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
       }
-    }
+    };
 
     if (isOpen) {
-      document.addEventListener('mousedown', handleClickOutside)
+      document.addEventListener("mousedown", handleClickOutside);
     }
 
     return () => {
-      document.removeEventListener('mousedown', handleClickOutside)
-    }
-  }, [isOpen])
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen]);
 
   return (
     <div className="relative inline-block text-left" ref={selectorRef}>
@@ -42,13 +45,18 @@ export function ModelSelector() {
           border border-novita-gray/30 hover:border-novita-gray/60
           bg-novita-gray/5 hover:bg-novita-gray/20
           transition-all duration-200 ease-in-out
-          ${isOpen ? 'border-novita-gray/60 bg-novita-gray/20' : ''}
+          ${isOpen ? "border-novita-gray/60 bg-novita-gray/20" : ""}
         `}
       >
-        <span className="text-sm">{MODEL_CONFIG_CODE_GENERATION[selectedModelIndex]?.id || 'Select model'}</span>
-        <ChevronDown className={`w-4 h-4 transition-transform duration-200 ${isOpen ? 'transform rotate-180' : ''}`} />
+        <span className="text-sm">
+          {MODEL_CONFIG_CODE_GENERATION[selectedModelIndex]?.id ||
+            "Select model"}
+        </span>
+        <ChevronDown
+          className={`w-4 h-4 transition-transform duration-200 ${isOpen ? "transform rotate-180" : ""}`}
+        />
       </div>
-      
+
       {isOpen && (
         <div className="absolute z-40 mt-1 w-full origin-top-right rounded-md bg-novita-dark border border-novita-gray/20 shadow-lg">
           <div className="py-1">
@@ -58,7 +66,7 @@ export function ModelSelector() {
                 onClick={() => handleSelect(index)}
                 className={`
                   px-4 py-2 text-xs cursor-pointer hover:bg-novita-gray/20
-                  ${selectedModelIndex === index ? 'text-white bg-novita-gray/40' : 'text-white/70'}
+                  ${selectedModelIndex === index ? "text-white bg-novita-gray/40" : "text-white/70"}
                 `}
               >
                 {model.id}
@@ -68,5 +76,5 @@ export function ModelSelector() {
         </div>
       )}
     </div>
-  )
-} 
+  );
+}

src/components/preview.tsx

@@ -1,15 +1,26 @@
-"use client"
-
-import { useState, forwardRef, useImperativeHandle, useEffect, useRef } from "react"
-import { DEFAULT_HTML } from "@/lib/constants"
-import { PreviewRef } from "@/lib/types"
-import { MinimizeIcon, MaximizeIcon, DownloadIcon, RefreshIcon } from "./ui/icons"
-import { useModel } from "@/lib/contexts/model-context"
-import { Loader2, Share2 } from "lucide-react"
-import { cn } from "@/lib/utils"
-import { generateShareLink } from "@/lib/sharelink"
-import { ShareDialog } from "./share-dialog"
-import posthog from 'posthog-js'
+"use client";
+
+import {
+  useState,
+  forwardRef,
+  useImperativeHandle,
+  useEffect,
+  useRef,
+} from "react";
+import { DEFAULT_HTML } from "@/lib/constants";
+import { PreviewRef } from "@/lib/types";
+import {
+  MinimizeIcon,
+  MaximizeIcon,
+  DownloadIcon,
+  RefreshIcon,
+} from "./ui/icons";
+import { useModel } from "@/lib/contexts/model-context";
+import { Loader2, Share2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { generateShareLink } from "@/lib/sharelink";
+import { ShareDialog } from "./share-dialog";
+import posthog from "posthog-js";
 
 interface PreviewProps {
   initialHtml?: string;
@@ -21,8 +32,15 @@ interface PreviewProps {
 }
 
 export const Preview = forwardRef<PreviewRef, PreviewProps>(function Preview(
-  { initialHtml, onCodeChange, onAuthErrorChange, onLoadingChange, onErrorChange, currentVersion },
-  ref
+  {
+    initialHtml,
+    onCodeChange,
+    onAuthErrorChange,
+    onLoadingChange,
+    onErrorChange,
+    currentVersion,
+  },
+  ref,
 ) {
   const [html, setHtml] = useState<string>(initialHtml || "");
   const [isFullscreen, setIsFullscreen] = useState(false);
@@ -53,9 +71,13 @@ export const Preview = forwardRef<PreviewRef, PreviewProps>(function Preview(
   }, [error, onErrorChange]);
 
   useImperativeHandle(ref, () => ({
-    generateCode: async (prompt: string, colors: string[] = [], previousPrompt?: string) => {
+    generateCode: async (
+      prompt: string,
+      colors: string[] = [],
+      previousPrompt?: string,
+    ) => {
       await generateCode(prompt, colors, previousPrompt);
-    }
+    },
   }));
 
   const toggleFullscreen = () => {
@@ -64,31 +86,35 @@ export const Preview = forwardRef<PreviewRef, PreviewProps>(function Preview(
 
   const partialUpdate = (htmlStr: string) => {
     const parser = new DOMParser();
-    const partialDoc = parser.parseFromString(htmlStr, 'text/html');
-    const iframe = document.querySelector('iframe');
+    const partialDoc = parser.parseFromString(htmlStr, "text/html");
+    const iframe = document.querySelector("iframe");
     if (!iframe || !iframe.contentDocument) return;
-    
+
     const iframeContainer = iframe.contentDocument;
     if (iframeContainer?.body && iframeContainer) {
       iframeContainer.body.innerHTML = partialDoc.body?.innerHTML;
     }
     if (renderCount.current % 10 === 0 && !headUpdated.current) {
       setHtml(htmlStr);
-      if (htmlStr.includes('</head>')) {
+      if (htmlStr.includes("</head>")) {
         setTimeout(() => {
           headUpdated.current = true;
         }, 1000);
       }
     }
     renderCount.current++;
-  }
+  };
 
   const downloadHtml = () => {
     if (!html) return;
 
     // Get current version and generate filename
     // If we have a currentVersion, use it; otherwise omit version part
-    const timestamp = new Date().toISOString().replace(/[:.]/g, "-").replace("T", "_").slice(0, 19);
+    const timestamp = new Date()
+      .toISOString()
+      .replace(/[:.]/g, "-")
+      .replace("T", "_")
+      .slice(0, 19);
 
     // Load current version from localStorage if we have an ID
     let versionLabel = "";
@@ -99,9 +125,9 @@ export const Preview = forwardRef<PreviewRef, PreviewProps>(function Preview(
     // Format the filename with or without version
     const filename = `novita-anysite-generated${versionLabel}-${timestamp}.html`;
 
-    const blob = new Blob([html], { type: 'text/html' });
+    const blob = new Blob([html], { type: "text/html" });
     const url = window.URL.createObjectURL(blob);
-    const a = document.createElement('a');
+    const a = document.createElement("a");
     a.href = url;
     a.download = filename;
     document.body.appendChild(a);
@@ -112,10 +138,14 @@ export const Preview = forwardRef<PreviewRef, PreviewProps>(function Preview(
 
   const refreshPreview = () => {
     if (!html) return;
-    setRefreshKey(prev => prev + 1);
+    setRefreshKey((prev) => prev + 1);
   };
 
-  const generateCode = async (prompt: string, colors: string[] = [], previousPrompt?: string) => {
+  const generateCode = async (
+    prompt: string,
+    colors: string[] = [],
+    previousPrompt?: string,
+  ) => {
     setLoading(true);
     renderCount.current = 0;
     headUpdated.current = false;
@@ -132,30 +162,34 @@ export const Preview = forwardRef<PreviewRef, PreviewProps>(function Preview(
     setHtml("");
 
     // Initialize generated code variable at function scope so it's accessible in finally block
-    let generatedCode = '';
+    let generatedCode = "";
 
     try {
       // Only include html in the request if it's not DEFAULT_HTML
       const isDefaultHtml = initialHtml === DEFAULT_HTML;
 
-      posthog.capture("Generate code", {"model": selectedModelId});
+      posthog.capture("Generate code", { model: selectedModelId });
 
-      const response = await fetch('/api/generate-code', {
-        method: 'POST',
+      const response = await fetch("/api/generate-code", {
+        method: "POST",
         headers: {
-          'Content-Type': 'application/json',
+          "Content-Type": "application/json",
         },
         body: JSON.stringify({
           prompt,
           html: isDefaultHtml ? undefined : html,
           previousPrompt: isDefaultHtml ? undefined : previousPrompt,
           colors,
-          modelId: selectedModelId
+          modelId: selectedModelId,
         }),
       });
 
       if (!response.ok) {
-        posthog.capture("Generate code", {"type": "failed", "model": selectedModelId, "status": response.status});
+        posthog.capture("Generate code", {
+          type: "failed",
+          model: selectedModelId,
+          status: response.status,
+        });
         // Check specifically for 401 error (authentication required)
         if (response.status === 401 || response.status === 403) {
           try {
@@ -165,7 +199,7 @@ export const Preview = forwardRef<PreviewRef, PreviewProps>(function Preview(
               if (onAuthErrorChange) {
                 onAuthErrorChange(true);
               }
-              throw new Error('Signing in to Hugging Face is required.');
+              throw new Error("Signing in to Hugging Face is required.");
             }
           } catch (e) {
             // Fall back to default auth error handling if JSON parsing fails
@@ -173,12 +207,12 @@ export const Preview = forwardRef<PreviewRef, PreviewProps>(function Preview(
             if (onAuthErrorChange) {
               onAuthErrorChange(true);
             }
-            throw new Error('Signing in to Hugging Face is required.');
+            throw new Error("Signing in to Hugging Face is required.");
           }
         }
 
         const errorData = await response.json();
-        throw new Error(errorData.message || 'Failed to generate code');
+        throw new Error(errorData.message || "Failed to generate code");
       }
 
       // Handle streaming response
@@ -190,11 +224,11 @@ export const Preview = forwardRef<PreviewRef, PreviewProps>(function Preview(
         while (true) {
           const { done, value } = await reader.read();
           if (done) {
-            if (!generatedCode.includes('</html>')) {
-              generatedCode += '</html>';
+            if (!generatedCode.includes("</html>")) {
+              generatedCode += "</html>";
             }
             const finalCode = generatedCode.match(
-              /<!DOCTYPE html>[\s\S]*<\/html>/
+              /<!DOCTYPE html>[\s\S]*<\/html>/,
             )?.[0];
             if (finalCode) {
               // Update state with the final code
@@ -220,7 +254,7 @@ export const Preview = forwardRef<PreviewRef, PreviewProps>(function Preview(
             // Try to parse as JSON
             parsedChunk = JSON.parse(chunkText);
           } catch (parseError) {
-            appended = true
+            appended = true;
             // If JSON parsing fails, treat it as plain text (backwards compatibility)
             generatedCode += chunkText;
           }
@@ -252,13 +286,18 @@ export const Preview = forwardRef<PreviewRef, PreviewProps>(function Preview(
         }
       }
     } catch (err) {
-      const errorMessage = (err as Error).message || 'An error occurred while generating code';
-      posthog.capture("Generate code", {"type": "failed", "model": selectedModelId, "error": errorMessage});
+      const errorMessage =
+        (err as Error).message || "An error occurred while generating code";
+      posthog.capture("Generate code", {
+        type: "failed",
+        model: selectedModelId,
+        error: errorMessage,
+      });
       setError(errorMessage);
       if (onErrorChange) {
         onErrorChange(errorMessage);
       }
-      console.error('Error generating code:', err);
+      console.error("Error generating code:", err);
     } finally {
       setLoading(false);
       if (onLoadingChange) {
@@ -281,12 +320,12 @@ export const Preview = forwardRef<PreviewRef, PreviewProps>(function Preview(
       setShareUrl(uploadedUrl);
       setShareDialogOpen(true);
     } catch (err) {
-      const errorMessage = (err as Error).message || 'Failed to share HTML';
+      const errorMessage = (err as Error).message || "Failed to share HTML";
       setError(errorMessage);
       if (onErrorChange) {
         onErrorChange(errorMessage);
       }
-      console.error('Error sharing HTML:', err);
+      console.error("Error sharing HTML:", err);
     } finally {
       setIsSharing(false);
     }
@@ -300,14 +339,16 @@ export const Preview = forwardRef<PreviewRef, PreviewProps>(function Preview(
   };
 
   return (
-    <div className={`${isFullscreen ? 'fixed inset-0 z-10 bg-novita-dark' : 'h-full'} p-4 pl-2`}>
-      { isPartialGenerating && (
+    <div
+      className={`${isFullscreen ? "fixed inset-0 z-10 bg-novita-dark" : "h-full"} p-4 pl-2`}
+    >
+      {isPartialGenerating && (
         <div className="w-full bg-slate-50 border-b border-slate-200 py-2 px-4">
           <div className="container mx-auto flex items-center justify-center">
-          <div className="flex items-center space-x-2 text-slate-700">
-            <Loader2 className="h-4 w-4 animate-spin" />
-            <span className="text-sm font-medium">building...</span>
-          </div>
+            <div className="flex items-center space-x-2 text-slate-700">
+              <Loader2 className="h-4 w-4 animate-spin" />
+              <span className="text-sm font-medium">building...</span>
+            </div>
           </div>
         </div>
       )}
@@ -325,7 +366,7 @@ export const Preview = forwardRef<PreviewRef, PreviewProps>(function Preview(
             ) : (
               <Share2 className="h-3 w-3 mr-2" />
             )}
-            {isSharing ? 'Sharing...' : 'Share Link'}
+            {isSharing ? "Sharing..." : "Share Link"}
           </button>
 
           <button
@@ -347,8 +388,8 @@ export const Preview = forwardRef<PreviewRef, PreviewProps>(function Preview(
           <button
             onClick={toggleFullscreen}
             className="bg-novita-gray/90 text-white p-2 rounded-md shadow-md hover:bg-novita-gray/70 transition-colors flex items-center justify-center"
-            aria-label={isFullscreen ? 'Exit Fullscreen' : 'Full Screen'}
-            title={isFullscreen ? 'Exit Fullscreen' : 'Full Screen'}
+            aria-label={isFullscreen ? "Exit Fullscreen" : "Full Screen"}
+            title={isFullscreen ? "Exit Fullscreen" : "Full Screen"}
           >
             {isFullscreen ? <MinimizeIcon /> : <MaximizeIcon />}
           </button>
@@ -363,11 +404,11 @@ export const Preview = forwardRef<PreviewRef, PreviewProps>(function Preview(
         />
       </div>
 
-      <ShareDialog 
+      <ShareDialog
         open={shareDialogOpen}
         onOpenChange={handleShareDialogClose}
         shareUrl={shareUrl}
       />
     </div>
-  )
+  );
 });

src/components/prompt-input.tsx

@@ -1,17 +1,22 @@
-"use client"
+"use client";
 
-import type React from "react"
+import type React from "react";
 
-import { useState, useEffect } from "react"
-import { Wand2, ArrowUp, Loader2, Maximize2, Minimize2 } from "lucide-react"
-import { Button } from "@/components/ui/button"
-import { Textarea } from "@/components/ui/textarea"
-import { ColorPanel } from "./color-panel"
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
-import { FullscreenToggle } from "./ui/fullscreen-toggle"
-import { AuthErrorPopup } from "./auth-error-popup"
-import { getInferenceToken } from "@/lib/auth"
-import posthog from 'posthog-js'
+import { useState, useEffect } from "react";
+import { Wand2, ArrowUp, Loader2, Maximize2, Minimize2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { ColorPanel } from "./color-panel";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { FullscreenToggle } from "./ui/fullscreen-toggle";
+import { AuthErrorPopup } from "./auth-error-popup";
+import { getInferenceToken } from "@/lib/auth";
+import posthog from "posthog-js";
 
 interface PromptInputProps {
   onSubmit: (prompt: string, colors: string[]) => Promise<void>;
@@ -24,7 +29,7 @@ export function PromptInput({
   onSubmit,
   isLoading = false,
   initialPrompt = "",
-  onImproveError
+  onImproveError,
 }: PromptInputProps) {
   const [prompt, setPrompt] = useState(initialPrompt);
   const [isImprovingPrompt, setIsImprovingPrompt] = useState(false);
@@ -50,7 +55,9 @@ export function PromptInput({
       if (token) {
         return true;
       }
-      const canBypass = await fetch("/api/auth/check-bypass").then(res => res.json());
+      const canBypass = await fetch("/api/auth/check-bypass").then((res) =>
+        res.json(),
+      );
       if (!canBypass) {
         throw new Error("Authentication required");
       }
@@ -59,11 +66,11 @@ export function PromptInput({
       setShowAuthError(true);
       return false;
     }
-  }
+  };
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    if (prompt.trim() === '' || isLoading) return;
+    if (prompt.trim() === "" || isLoading) return;
 
     // Check for authentication
     const isAuthenticated = await checkAuth();
@@ -72,10 +79,10 @@ export function PromptInput({
     // Clear any previous errors
     setImproveError(null);
     await onSubmit(prompt, selectedColors);
-  }
+  };
 
   const improvePrompt = async () => {
-    if (prompt.trim() === '' || isImprovingPrompt || isLoading) return;
+    if (prompt.trim() === "" || isImprovingPrompt || isLoading) return;
 
     // Check for authentication
     const isAuthenticated = await checkAuth();
@@ -95,22 +102,27 @@ export function PromptInput({
           "Content-Type": "application/json",
         },
         body: JSON.stringify({ prompt: prompt.trim() }),
-      })
+      });
 
       if (!response.ok) {
-        posthog.capture("Improve prompt", {"type": "failed", "status": response.status});
+        posthog.capture("Improve prompt", {
+          type: "failed",
+          status: response.status,
+        });
 
         // Handle auth error with openLogin flag
         if (response.status === 401) {
           const errorData = await response.json();
           if (errorData.openLogin) {
             setShowAuthError(true);
-            throw new Error('Authentication required');
+            throw new Error("Authentication required");
           }
         }
-        
+
         const errorText = await response.text();
-        throw new Error(errorText || `Failed to improve prompt (${response.status})`);
+        throw new Error(
+          errorText || `Failed to improve prompt (${response.status})`,
+        );
       }
 
       if (!response.body) {
@@ -135,37 +147,41 @@ export function PromptInput({
         } catch (parseError) {
           appended = true;
           // If JSON parsing fails, treat it as plain text (backwards compatibility)
-          improvedPrompt += chunkText
-          setPrompt(improvedPrompt)
+          improvedPrompt += chunkText;
+          setPrompt(improvedPrompt);
         }
         if (parsedChunk && parsedChunk.type === "error") {
           throw new Error(parsedChunk.message || "An error occurred");
         } else if (!appended) {
-          improvedPrompt += chunkText
-          setPrompt(improvedPrompt)
+          improvedPrompt += chunkText;
+          setPrompt(improvedPrompt);
         }
       }
     } catch (error) {
-      posthog.capture("Improve prompt", {"type": "failed", "error": error});
-      console.error("Error improving prompt:", error)
-      setImproveError(error instanceof Error ? error.message : "Failed to improve prompt")
+      posthog.capture("Improve prompt", { type: "failed", error: error });
+      console.error("Error improving prompt:", error);
+      setImproveError(
+        error instanceof Error ? error.message : "Failed to improve prompt",
+      );
     } finally {
-      setIsImprovingPrompt(false)
+      setIsImprovingPrompt(false);
     }
-  }
+  };
 
   const toggleFullScreen = () => {
-    setIsFullScreen(!isFullScreen)
-  }
+    setIsFullScreen(!isFullScreen);
+  };
 
   const handleColorsChange = (colors: string[]) => {
     setSelectedColors(colors);
-  }
+  };
 
-  const isPromptTooShort = prompt.length < 10
+  const isPromptTooShort = prompt.length < 10;
 
   return (
-    <div className={`border-t border-novita-gray/20 p-4 relative transition-all duration-300 ease-in-out ${isFullScreen ? 'h-[50vh]' : ''}`}>
+    <div
+      className={`border-t border-novita-gray/20 p-4 relative transition-all duration-300 ease-in-out ${isFullScreen ? "h-[50vh]" : ""}`}
+    >
       <div className="absolute top-1 right-1 z-10">
         <FullscreenToggle
           isFullScreen={isFullScreen}
@@ -173,17 +189,17 @@ export function PromptInput({
         />
       </div>
       <form onSubmit={handleSubmit} className="flex flex-col gap-4 h-full">
-        <div className={`relative ${isFullScreen ? 'h-full' : ''}`}>
+        <div className={`relative ${isFullScreen ? "h-full" : ""}`}>
           <ColorPanel onColorsChange={handleColorsChange} />
           <Textarea
             value={prompt}
             onChange={(e) => {
-              setPrompt(e.target.value)
+              setPrompt(e.target.value);
               // Clear error when user types
-              if (improveError) setImproveError(null)
+              if (improveError) setImproveError(null);
             }}
             placeholder="Describe what site you want to build. E.g., Build a snake game"
-            className={`min-h-24 pr-20 pt-12 bg-novita-gray/20 border-novita-gray/30 text-white placeholder:text-novita-gray/70 resize-none ${isFullScreen ? 'h-full' : ''}`}
+            className={`min-h-24 pr-20 pt-12 bg-novita-gray/20 border-novita-gray/30 text-white placeholder:text-novita-gray/70 resize-none ${isFullScreen ? "h-full" : ""}`}
             disabled={isLoading || isImprovingPrompt}
           />
           <div className="absolute bottom-3 right-3 flex gap-2">
@@ -196,7 +212,9 @@ export function PromptInput({
                       size="icon"
                       variant="outline"
                       className="h-8 w-8 bg-novita-gray/20 border-novita-gray/30 text-white hover:bg-novita-gray/30"
-                      disabled={isPromptTooShort || isLoading || isImprovingPrompt}
+                      disabled={
+                        isPromptTooShort || isLoading || isImprovingPrompt
+                      }
                       onClick={improvePrompt}
                     >
                       {isImprovingPrompt ? (
@@ -210,7 +228,7 @@ export function PromptInput({
                 </TooltipTrigger>
                 {isPromptTooShort && (
                   <TooltipContent className="bg-novita-gray text-white">
-                    <p>Your prompt is too simple, we can't improve it.</p>
+                    <p>Your prompt is too simple, we can&apos;t improve it.</p>
                   </TooltipContent>
                 )}
               </Tooltip>
@@ -231,11 +249,11 @@ export function PromptInput({
           </div>
         </div>
       </form>
-      
-      <AuthErrorPopup 
-        show={showAuthError} 
-        onClose={() => setShowAuthError(false)} 
+
+      <AuthErrorPopup
+        show={showAuthError}
+        onClose={() => setShowAuthError(false)}
       />
     </div>
-  )
+  );
 }

src/components/share-dialog.tsx

@@ -1,9 +1,15 @@
-"use client"
+"use client";
 
-import { useState } from "react"
-import { Copy, Check, AlertTriangle } from "lucide-react"
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "./ui/dialog"
-import { Button } from "./ui/button"
+import { useState } from "react";
+import { Copy, Check, AlertTriangle } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "./ui/dialog";
+import { Button } from "./ui/button";
 
 interface ShareDialogProps {
   open: boolean;
@@ -11,7 +17,11 @@ interface ShareDialogProps {
   shareUrl: string;
 }
 
-export function ShareDialog({ open, onOpenChange, shareUrl }: ShareDialogProps) {
+export function ShareDialog({
+  open,
+  onOpenChange,
+  shareUrl,
+}: ShareDialogProps) {
   const [copied, setCopied] = useState(false);
 
   const handleCopyLink = async () => {
@@ -20,7 +30,7 @@ export function ShareDialog({ open, onOpenChange, shareUrl }: ShareDialogProps)
       setCopied(true);
       setTimeout(() => setCopied(false), 2000);
     } catch (err) {
-      console.error('Failed to copy link:', err);
+      console.error("Failed to copy link:", err);
     }
   };
 
@@ -35,11 +45,12 @@ export function ShareDialog({ open, onOpenChange, shareUrl }: ShareDialogProps)
         <DialogHeader>
           <DialogTitle>Share Your Creation</DialogTitle>
         </DialogHeader>
-        
+
         <div className="flex items-start space-x-2 p-3 rounded-md">
           <AlertTriangle className="h-4 w-4 text-muted-foreground mt-0.5 flex-shrink-0" />
           <p className="text-sm text-muted-foreground">
-            <strong>Note:</strong> This shared link is temporary and may not be permanently available.
+            <strong>Note:</strong> This shared link is temporary and may not be
+            permanently available.
           </p>
         </div>
 
@@ -55,9 +66,9 @@ export function ShareDialog({ open, onOpenChange, shareUrl }: ShareDialogProps)
               className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
             />
           </div>
-          <Button 
-            type="button" 
-            size="sm" 
+          <Button
+            type="button"
+            size="sm"
             className="px-3"
             onClick={handleCopyLink}
           >
@@ -70,21 +81,14 @@ export function ShareDialog({ open, onOpenChange, shareUrl }: ShareDialogProps)
           </Button>
         </div>
         <div className="flex justify-end space-x-2">
-          <Button
-            type="button"
-            variant="outline"
-            onClick={handleClose}
-          >
+          <Button type="button" variant="outline" onClick={handleClose}>
             Close
           </Button>
-          <Button
-            type="button"
-            onClick={() => window.open(shareUrl, '_blank')}
-          >
+          <Button type="button" onClick={() => window.open(shareUrl, "_blank")}>
             Open Link
           </Button>
         </div>
       </DialogContent>
     </Dialog>
   );
-} 
+}

src/components/theme-provider.tsx

@@ -1,11 +1,11 @@
-'use client'
+"use client";
 
-import * as React from 'react'
+import * as React from "react";
 import {
   ThemeProvider as NextThemesProvider,
   type ThemeProviderProps,
-} from 'next-themes'
+} from "next-themes";
 
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
-  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
 }

src/components/ui/accordion.tsx

@@ -1,12 +1,12 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDown } from "lucide-react"
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const Accordion = AccordionPrimitive.Root
+const Accordion = AccordionPrimitive.Root;
 
 const AccordionItem = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Item>,
@@ -17,8 +17,8 @@ const AccordionItem = React.forwardRef<
     className={cn("border-b", className)}
     {...props}
   />
-))
-AccordionItem.displayName = "AccordionItem"
+));
+AccordionItem.displayName = "AccordionItem";
 
 const AccordionTrigger = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Trigger>,
@@ -29,7 +29,7 @@ const AccordionTrigger = React.forwardRef<
       ref={ref}
       className={cn(
         "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
-        className
+        className,
       )}
       {...props}
     >
@@ -37,8 +37,8 @@ const AccordionTrigger = React.forwardRef<
       <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
-))
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
 
 const AccordionContent = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Content>,
@@ -51,8 +51,8 @@ const AccordionContent = React.forwardRef<
   >
     <div className={cn("pb-4 pt-0", className)}>{children}</div>
   </AccordionPrimitive.Content>
-))
+));
 
-AccordionContent.displayName = AccordionPrimitive.Content.displayName
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
 
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

src/components/ui/alert-dialog.tsx

@@ -1,16 +1,16 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/components/ui/button"
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
 
-const AlertDialog = AlertDialogPrimitive.Root
+const AlertDialog = AlertDialogPrimitive.Root;
 
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 
-const AlertDialogPortal = AlertDialogPrimitive.Portal
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
 
 const AlertDialogOverlay = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
@@ -19,13 +19,13 @@ const AlertDialogOverlay = React.forwardRef<
   <AlertDialogPrimitive.Overlay
     className={cn(
       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+      className,
     )}
     {...props}
     ref={ref}
   />
-))
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
 
 const AlertDialogContent = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Content>,
@@ -37,13 +37,13 @@ const AlertDialogContent = React.forwardRef<
       ref={ref}
       className={cn(
         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
+        className,
       )}
       {...props}
     />
   </AlertDialogPortal>
-))
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 
 const AlertDialogHeader = ({
   className,
@@ -52,12 +52,12 @@ const AlertDialogHeader = ({
   <div
     className={cn(
       "flex flex-col space-y-2 text-center sm:text-left",
-      className
+      className,
     )}
     {...props}
   />
-)
-AlertDialogHeader.displayName = "AlertDialogHeader"
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
 
 const AlertDialogFooter = ({
   className,
@@ -66,12 +66,12 @@ const AlertDialogFooter = ({
   <div
     className={cn(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
+      className,
     )}
     {...props}
   />
-)
-AlertDialogFooter.displayName = "AlertDialogFooter"
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
 
 const AlertDialogTitle = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Title>,
@@ -82,8 +82,8 @@ const AlertDialogTitle = React.forwardRef<
     className={cn("text-lg font-semibold", className)}
     {...props}
   />
-))
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
 
 const AlertDialogDescription = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Description>,
@@ -94,9 +94,9 @@ const AlertDialogDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
+));
 AlertDialogDescription.displayName =
-  AlertDialogPrimitive.Description.displayName
+  AlertDialogPrimitive.Description.displayName;
 
 const AlertDialogAction = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Action>,
@@ -107,8 +107,8 @@ const AlertDialogAction = React.forwardRef<
     className={cn(buttonVariants(), className)}
     {...props}
   />
-))
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
 
 const AlertDialogCancel = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
@@ -119,12 +119,12 @@ const AlertDialogCancel = React.forwardRef<
     className={cn(
       buttonVariants({ variant: "outline" }),
       "mt-2 sm:mt-0",
-      className
+      className,
     )}
     {...props}
   />
-))
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 
 export {
   AlertDialog,
@@ -138,4 +138,4 @@ export {
   AlertDialogDescription,
   AlertDialogAction,
   AlertDialogCancel,
-}
+};

src/components/ui/alert.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 alertVariants = cva(
   "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
@@ -16,8 +16,8 @@ const alertVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
-)
+  },
+);
 
 const Alert = React.forwardRef<
   HTMLDivElement,
@@ -29,8 +29,8 @@ const Alert = React.forwardRef<
     className={cn(alertVariants({ variant }), className)}
     {...props}
   />
-))
-Alert.displayName = "Alert"
+));
+Alert.displayName = "Alert";
 
 const AlertTitle = React.forwardRef<
   HTMLParagraphElement,
@@ -41,8 +41,8 @@ const AlertTitle = React.forwardRef<
     className={cn("mb-1 font-medium leading-none tracking-tight", className)}
     {...props}
   />
-))
-AlertTitle.displayName = "AlertTitle"
+));
+AlertTitle.displayName = "AlertTitle";
 
 const AlertDescription = React.forwardRef<
   HTMLParagraphElement,
@@ -53,7 +53,7 @@ const AlertDescription = React.forwardRef<
     className={cn("text-sm [&_p]:leading-relaxed", className)}
     {...props}
   />
-))
-AlertDescription.displayName = "AlertDescription"
+));
+AlertDescription.displayName = "AlertDescription";
 
-export { Alert, AlertTitle, AlertDescription }
+export { Alert, AlertTitle, AlertDescription };

src/components/ui/aspect-ratio.tsx

@@ -1,7 +1,7 @@
-"use client"
+"use client";
 
-import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
 
-const AspectRatio = AspectRatioPrimitive.Root
+const AspectRatio = AspectRatioPrimitive.Root;
 
-export { AspectRatio }
+export { AspectRatio };

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-muted",
-      className
+      className,
     )}
     {...props}
   />
-))
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
-export { Avatar, AvatarImage, AvatarFallback }
+export { Avatar, AvatarImage, AvatarFallback };

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 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
@@ -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 };

src/components/ui/breadcrumb.tsx

@@ -1,16 +1,16 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { ChevronRight, MoreHorizontal } from "lucide-react"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Breadcrumb = React.forwardRef<
   HTMLElement,
   React.ComponentPropsWithoutRef<"nav"> & {
-    separator?: React.ReactNode
+    separator?: React.ReactNode;
   }
->(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
-Breadcrumb.displayName = "Breadcrumb"
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+Breadcrumb.displayName = "Breadcrumb";
 
 const BreadcrumbList = React.forwardRef<
   HTMLOListElement,
@@ -20,12 +20,12 @@ const BreadcrumbList = React.forwardRef<
     ref={ref}
     className={cn(
       "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
-      className
+      className,
     )}
     {...props}
   />
-))
-BreadcrumbList.displayName = "BreadcrumbList"
+));
+BreadcrumbList.displayName = "BreadcrumbList";
 
 const BreadcrumbItem = React.forwardRef<
   HTMLLIElement,
@@ -36,16 +36,16 @@ const BreadcrumbItem = React.forwardRef<
     className={cn("inline-flex items-center gap-1.5", className)}
     {...props}
   />
-))
-BreadcrumbItem.displayName = "BreadcrumbItem"
+));
+BreadcrumbItem.displayName = "BreadcrumbItem";
 
 const BreadcrumbLink = React.forwardRef<
   HTMLAnchorElement,
   React.ComponentPropsWithoutRef<"a"> & {
-    asChild?: boolean
+    asChild?: boolean;
   }
 >(({ asChild, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : "a"
+  const Comp = asChild ? Slot : "a";
 
   return (
     <Comp
@@ -53,9 +53,9 @@ const BreadcrumbLink = React.forwardRef<
       className={cn("transition-colors hover:text-foreground", className)}
       {...props}
     />
-  )
-})
-BreadcrumbLink.displayName = "BreadcrumbLink"
+  );
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
 
 const BreadcrumbPage = React.forwardRef<
   HTMLSpanElement,
@@ -69,8 +69,8 @@ const BreadcrumbPage = React.forwardRef<
     className={cn("font-normal text-foreground", className)}
     {...props}
   />
-))
-BreadcrumbPage.displayName = "BreadcrumbPage"
+));
+BreadcrumbPage.displayName = "BreadcrumbPage";
 
 const BreadcrumbSeparator = ({
   children,
@@ -85,8 +85,8 @@ const BreadcrumbSeparator = ({
   >
     {children ?? <ChevronRight />}
   </li>
-)
-BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
 
 const BreadcrumbEllipsis = ({
   className,
@@ -101,8 +101,8 @@ const BreadcrumbEllipsis = ({
     <MoreHorizontal className="h-4 w-4" />
     <span className="sr-only">More</span>
   </span>
-)
-BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
 
 export {
   Breadcrumb,
@@ -112,4 +112,4 @@ export {
   BreadcrumbPage,
   BreadcrumbSeparator,
   BreadcrumbEllipsis,
-}
+};

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-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",
@@ -10,9 +10,12 @@ const buttonVariants = cva(
     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",
+        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",
       },
@@ -28,20 +31,26 @@ const buttonVariants = cva(
       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"
-    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
   },
-)
-Button.displayName = "Button"
+);
+Button.displayName = "Button";
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };

src/components/ui/calendar.tsx

@@ -1,13 +1,13 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { ChevronLeft, ChevronRight } from "lucide-react"
-import { DayPicker } from "react-day-picker"
+import * as React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { DayPicker } from "react-day-picker";
 
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/components/ui/button"
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
 
-export type CalendarProps = React.ComponentProps<typeof DayPicker>
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 
 function Calendar({
   className,
@@ -27,7 +27,7 @@ function Calendar({
         nav: "space-x-1 flex items-center",
         nav_button: cn(
           buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
         ),
         nav_button_previous: "absolute left-1",
         nav_button_next: "absolute right-1",
@@ -39,7 +39,7 @@ function Calendar({
         cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
         day: cn(
           buttonVariants({ variant: "ghost" }),
-          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
+          "h-9 w-9 p-0 font-normal aria-selected:opacity-100",
         ),
         day_range_end: "day-range-end",
         day_selected:
@@ -59,8 +59,8 @@ function Calendar({
       }}
       {...props}
     />
-  )
+  );
 }
-Calendar.displayName = "Calendar"
+Calendar.displayName = "Calendar";
 
-export { Calendar }
+export { Calendar };

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 bg-card text-card-foreground shadow-sm",
-      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<
   HTMLDivElement,
@@ -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<
   HTMLDivElement,
@@ -53,16 +53,16 @@ const CardDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", 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,
+};

src/components/ui/carousel.tsx

@@ -1,45 +1,45 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
 import useEmblaCarousel, {
   type UseEmblaCarouselType,
-} from "embla-carousel-react"
-import { ArrowLeft, ArrowRight } from "lucide-react"
+} from "embla-carousel-react";
+import { ArrowLeft, ArrowRight } 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";
 
-type CarouselApi = UseEmblaCarouselType[1]
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
-type CarouselOptions = UseCarouselParameters[0]
-type CarouselPlugin = UseCarouselParameters[1]
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
 
 type CarouselProps = {
-  opts?: CarouselOptions
-  plugins?: CarouselPlugin
-  orientation?: "horizontal" | "vertical"
-  setApi?: (api: CarouselApi) => void
-}
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugin;
+  orientation?: "horizontal" | "vertical";
+  setApi?: (api: CarouselApi) => void;
+};
 
 type CarouselContextProps = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
-  api: ReturnType<typeof useEmblaCarousel>[1]
-  scrollPrev: () => void
-  scrollNext: () => void
-  canScrollPrev: boolean
-  canScrollNext: boolean
-} & CarouselProps
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  api: ReturnType<typeof useEmblaCarousel>[1];
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+} & CarouselProps;
 
-const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
 
 function useCarousel() {
-  const context = React.useContext(CarouselContext)
+  const context = React.useContext(CarouselContext);
 
   if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />")
+    throw new Error("useCarousel must be used within a <Carousel />");
   }
 
-  return context
+  return context;
 }
 
 const Carousel = React.forwardRef<
@@ -56,69 +56,69 @@ const Carousel = React.forwardRef<
       children,
       ...props
     },
-    ref
+    ref,
   ) => {
     const [carouselRef, api] = useEmblaCarousel(
       {
         ...opts,
         axis: orientation === "horizontal" ? "x" : "y",
       },
-      plugins
-    )
-    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
-    const [canScrollNext, setCanScrollNext] = React.useState(false)
+      plugins,
+    );
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+    const [canScrollNext, setCanScrollNext] = React.useState(false);
 
     const onSelect = React.useCallback((api: CarouselApi) => {
       if (!api) {
-        return
+        return;
       }
 
-      setCanScrollPrev(api.canScrollPrev())
-      setCanScrollNext(api.canScrollNext())
-    }, [])
+      setCanScrollPrev(api.canScrollPrev());
+      setCanScrollNext(api.canScrollNext());
+    }, []);
 
     const scrollPrev = React.useCallback(() => {
-      api?.scrollPrev()
-    }, [api])
+      api?.scrollPrev();
+    }, [api]);
 
     const scrollNext = React.useCallback(() => {
-      api?.scrollNext()
-    }, [api])
+      api?.scrollNext();
+    }, [api]);
 
     const handleKeyDown = React.useCallback(
       (event: React.KeyboardEvent<HTMLDivElement>) => {
         if (event.key === "ArrowLeft") {
-          event.preventDefault()
-          scrollPrev()
+          event.preventDefault();
+          scrollPrev();
         } else if (event.key === "ArrowRight") {
-          event.preventDefault()
-          scrollNext()
+          event.preventDefault();
+          scrollNext();
         }
       },
-      [scrollPrev, scrollNext]
-    )
+      [scrollPrev, scrollNext],
+    );
 
     React.useEffect(() => {
       if (!api || !setApi) {
-        return
+        return;
       }
 
-      setApi(api)
-    }, [api, setApi])
+      setApi(api);
+    }, [api, setApi]);
 
     React.useEffect(() => {
       if (!api) {
-        return
+        return;
       }
 
-      onSelect(api)
-      api.on("reInit", onSelect)
-      api.on("select", onSelect)
+      onSelect(api);
+      api.on("reInit", onSelect);
+      api.on("select", onSelect);
 
       return () => {
-        api?.off("select", onSelect)
-      }
-    }, [api, onSelect])
+        api?.off("select", onSelect);
+      };
+    }, [api, onSelect]);
 
     return (
       <CarouselContext.Provider
@@ -145,16 +145,16 @@ const Carousel = React.forwardRef<
           {children}
         </div>
       </CarouselContext.Provider>
-    )
-  }
-)
-Carousel.displayName = "Carousel"
+    );
+  },
+);
+Carousel.displayName = "Carousel";
 
 const CarouselContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => {
-  const { carouselRef, orientation } = useCarousel()
+  const { carouselRef, orientation } = useCarousel();
 
   return (
     <div ref={carouselRef} className="overflow-hidden">
@@ -163,20 +163,20 @@ const CarouselContent = React.forwardRef<
         className={cn(
           "flex",
           orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-          className
+          className,
         )}
         {...props}
       />
     </div>
-  )
-})
-CarouselContent.displayName = "CarouselContent"
+  );
+});
+CarouselContent.displayName = "CarouselContent";
 
 const CarouselItem = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => {
-  const { orientation } = useCarousel()
+  const { orientation } = useCarousel();
 
   return (
     <div
@@ -186,19 +186,19 @@ const CarouselItem = React.forwardRef<
       className={cn(
         "min-w-0 shrink-0 grow-0 basis-full",
         orientation === "horizontal" ? "pl-4" : "pt-4",
-        className
+        className,
       )}
       {...props}
     />
-  )
-})
-CarouselItem.displayName = "CarouselItem"
+  );
+});
+CarouselItem.displayName = "CarouselItem";
 
 const CarouselPrevious = React.forwardRef<
   HTMLButtonElement,
   React.ComponentProps<typeof Button>
 >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
 
   return (
     <Button
@@ -210,7 +210,7 @@ const CarouselPrevious = React.forwardRef<
         orientation === "horizontal"
           ? "-left-12 top-1/2 -translate-y-1/2"
           : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
+        className,
       )}
       disabled={!canScrollPrev}
       onClick={scrollPrev}
@@ -219,15 +219,15 @@ const CarouselPrevious = React.forwardRef<
       <ArrowLeft className="h-4 w-4" />
       <span className="sr-only">Previous slide</span>
     </Button>
-  )
-})
-CarouselPrevious.displayName = "CarouselPrevious"
+  );
+});
+CarouselPrevious.displayName = "CarouselPrevious";
 
 const CarouselNext = React.forwardRef<
   HTMLButtonElement,
   React.ComponentProps<typeof Button>
 >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollNext, canScrollNext } = useCarousel()
+  const { orientation, scrollNext, canScrollNext } = useCarousel();
 
   return (
     <Button
@@ -239,7 +239,7 @@ const CarouselNext = React.forwardRef<
         orientation === "horizontal"
           ? "-right-12 top-1/2 -translate-y-1/2"
           : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
+        className,
       )}
       disabled={!canScrollNext}
       onClick={scrollNext}
@@ -248,9 +248,9 @@ const CarouselNext = React.forwardRef<
       <ArrowRight className="h-4 w-4" />
       <span className="sr-only">Next slide</span>
     </Button>
-  )
-})
-CarouselNext.displayName = "CarouselNext"
+  );
+});
+CarouselNext.displayName = "CarouselNext";
 
 export {
   type CarouselApi,
@@ -259,4 +259,4 @@ export {
   CarouselItem,
   CarouselPrevious,
   CarouselNext,
-}
+};

src/components/ui/chart.tsx

@@ -1,50 +1,50 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as RechartsPrimitive from "recharts"
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 // Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: ".dark" } as const
+const THEMES = { light: "", dark: ".dark" } as const;
 
 export type ChartConfig = {
   [k in string]: {
-    label?: React.ReactNode
-    icon?: React.ComponentType
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
   } & (
     | { color?: string; theme?: never }
     | { color?: never; theme: Record<keyof typeof THEMES, string> }
-  )
-}
+  );
+};
 
 type ChartContextProps = {
-  config: ChartConfig
-}
+  config: ChartConfig;
+};
 
-const ChartContext = React.createContext<ChartContextProps | null>(null)
+const ChartContext = React.createContext<ChartContextProps | null>(null);
 
 function useChart() {
-  const context = React.useContext(ChartContext)
+  const context = React.useContext(ChartContext);
 
   if (!context) {
-    throw new Error("useChart must be used within a <ChartContainer />")
+    throw new Error("useChart must be used within a <ChartContainer />");
   }
 
-  return context
+  return context;
 }
 
 const ChartContainer = React.forwardRef<
   HTMLDivElement,
   React.ComponentProps<"div"> & {
-    config: ChartConfig
+    config: ChartConfig;
     children: React.ComponentProps<
       typeof RechartsPrimitive.ResponsiveContainer
-    >["children"]
+    >["children"];
   }
 >(({ id, className, children, config, ...props }, ref) => {
-  const uniqueId = React.useId()
-  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
 
   return (
     <ChartContext.Provider value={{ config }}>
@@ -53,7 +53,7 @@ const ChartContainer = React.forwardRef<
         ref={ref}
         className={cn(
           "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
-          className
+          className,
         )}
         {...props}
       >
@@ -63,17 +63,17 @@ const ChartContainer = React.forwardRef<
         </RechartsPrimitive.ResponsiveContainer>
       </div>
     </ChartContext.Provider>
-  )
-})
-ChartContainer.displayName = "Chart"
+  );
+});
+ChartContainer.displayName = "Chart";
 
 const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
   const colorConfig = Object.entries(config).filter(
-    ([_, config]) => config.theme || config.color
-  )
+    ([_, config]) => config.theme || config.color,
+  );
 
   if (!colorConfig.length) {
-    return null
+    return null;
   }
 
   return (
@@ -87,30 +87,30 @@ ${colorConfig
   .map(([key, itemConfig]) => {
     const color =
       itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
-      itemConfig.color
-    return color ? `  --color-${key}: ${color};` : null
+      itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
   })
   .join("\n")}
 }
-`
+`,
           )
           .join("\n"),
       }}
     />
-  )
-}
+  );
+};
 
-const ChartTooltip = RechartsPrimitive.Tooltip
+const ChartTooltip = RechartsPrimitive.Tooltip;
 
 const ChartTooltipContent = React.forwardRef<
   HTMLDivElement,
   React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
     React.ComponentProps<"div"> & {
-      hideLabel?: boolean
-      hideIndicator?: boolean
-      indicator?: "line" | "dot" | "dashed"
-      nameKey?: string
-      labelKey?: string
+      hideLabel?: boolean;
+      hideIndicator?: boolean;
+      indicator?: "line" | "dot" | "dashed";
+      nameKey?: string;
+      labelKey?: string;
     }
 >(
   (
@@ -129,36 +129,36 @@ const ChartTooltipContent = React.forwardRef<
       nameKey,
       labelKey,
     },
-    ref
+    ref,
   ) => {
-    const { config } = useChart()
+    const { config } = useChart();
 
     const tooltipLabel = React.useMemo(() => {
       if (hideLabel || !payload?.length) {
-        return null
+        return null;
       }
 
-      const [item] = payload
-      const key = `${labelKey || item.dataKey || item.name || "value"}`
-      const itemConfig = getPayloadConfigFromPayload(config, item, key)
+      const [item] = payload;
+      const key = `${labelKey || item.dataKey || item.name || "value"}`;
+      const itemConfig = getPayloadConfigFromPayload(config, item, key);
       const value =
         !labelKey && typeof label === "string"
           ? config[label as keyof typeof config]?.label || label
-          : itemConfig?.label
+          : itemConfig?.label;
 
       if (labelFormatter) {
         return (
           <div className={cn("font-medium", labelClassName)}>
             {labelFormatter(value, payload)}
           </div>
-        )
+        );
       }
 
       if (!value) {
-        return null
+        return null;
       }
 
-      return <div className={cn("font-medium", labelClassName)}>{value}</div>
+      return <div className={cn("font-medium", labelClassName)}>{value}</div>;
     }, [
       label,
       labelFormatter,
@@ -167,35 +167,35 @@ const ChartTooltipContent = React.forwardRef<
       labelClassName,
       config,
       labelKey,
-    ])
+    ]);
 
     if (!active || !payload?.length) {
-      return null
+      return null;
     }
 
-    const nestLabel = payload.length === 1 && indicator !== "dot"
+    const nestLabel = payload.length === 1 && indicator !== "dot";
 
     return (
       <div
         ref={ref}
         className={cn(
           "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
-          className
+          className,
         )}
       >
         {!nestLabel ? tooltipLabel : null}
         <div className="grid gap-1.5">
           {payload.map((item, index) => {
-            const key = `${nameKey || item.name || item.dataKey || "value"}`
-            const itemConfig = getPayloadConfigFromPayload(config, item, key)
-            const indicatorColor = color || item.payload.fill || item.color
+            const key = `${nameKey || item.name || item.dataKey || "value"}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            const indicatorColor = color || item.payload.fill || item.color;
 
             return (
               <div
                 key={item.dataKey}
                 className={cn(
                   "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
-                  indicator === "dot" && "items-center"
+                  indicator === "dot" && "items-center",
                 )}
               >
                 {formatter && item?.value !== undefined && item.name ? (
@@ -215,7 +215,7 @@ const ChartTooltipContent = React.forwardRef<
                               "w-0 border-[1.5px] border-dashed bg-transparent":
                                 indicator === "dashed",
                               "my-0.5": nestLabel && indicator === "dashed",
-                            }
+                            },
                           )}
                           style={
                             {
@@ -229,7 +229,7 @@ const ChartTooltipContent = React.forwardRef<
                     <div
                       className={cn(
                         "flex flex-1 justify-between leading-none",
-                        nestLabel ? "items-end" : "items-center"
+                        nestLabel ? "items-end" : "items-center",
                       )}
                     >
                       <div className="grid gap-1.5">
@@ -247,33 +247,33 @@ const ChartTooltipContent = React.forwardRef<
                   </>
                 )}
               </div>
-            )
+            );
           })}
         </div>
       </div>
-    )
-  }
-)
-ChartTooltipContent.displayName = "ChartTooltip"
+    );
+  },
+);
+ChartTooltipContent.displayName = "ChartTooltip";
 
-const ChartLegend = RechartsPrimitive.Legend
+const ChartLegend = RechartsPrimitive.Legend;
 
 const ChartLegendContent = React.forwardRef<
   HTMLDivElement,
   React.ComponentProps<"div"> &
     Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
-      hideIcon?: boolean
-      nameKey?: string
+      hideIcon?: boolean;
+      nameKey?: string;
     }
 >(
   (
     { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
-    ref
+    ref,
   ) => {
-    const { config } = useChart()
+    const { config } = useChart();
 
     if (!payload?.length) {
-      return null
+      return null;
     }
 
     return (
@@ -282,18 +282,18 @@ const ChartLegendContent = React.forwardRef<
         className={cn(
           "flex items-center justify-center gap-4",
           verticalAlign === "top" ? "pb-3" : "pt-3",
-          className
+          className,
         )}
       >
         {payload.map((item) => {
-          const key = `${nameKey || item.dataKey || "value"}`
-          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+          const key = `${nameKey || item.dataKey || "value"}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
 
           return (
             <div
               key={item.value}
               className={cn(
-                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground",
               )}
             >
               {itemConfig?.icon && !hideIcon ? (
@@ -308,22 +308,22 @@ const ChartLegendContent = React.forwardRef<
               )}
               {itemConfig?.label}
             </div>
-          )
+          );
         })}
       </div>
-    )
-  }
-)
-ChartLegendContent.displayName = "ChartLegend"
+    );
+  },
+);
+ChartLegendContent.displayName = "ChartLegend";
 
 // Helper to extract item config from a payload.
 function getPayloadConfigFromPayload(
   config: ChartConfig,
   payload: unknown,
-  key: string
+  key: string,
 ) {
   if (typeof payload !== "object" || payload === null) {
-    return undefined
+    return undefined;
   }
 
   const payloadPayload =
@@ -331,15 +331,15 @@ function getPayloadConfigFromPayload(
     typeof payload.payload === "object" &&
     payload.payload !== null
       ? payload.payload
-      : undefined
+      : undefined;
 
-  let configLabelKey: string = key
+  let configLabelKey: string = key;
 
   if (
     key in payload &&
     typeof payload[key as keyof typeof payload] === "string"
   ) {
-    configLabelKey = payload[key as keyof typeof payload] as string
+    configLabelKey = payload[key as keyof typeof payload] as string;
   } else if (
     payloadPayload &&
     key in payloadPayload &&
@@ -347,12 +347,12 @@ function getPayloadConfigFromPayload(
   ) {
     configLabelKey = payloadPayload[
       key as keyof typeof payloadPayload
-    ] as string
+    ] as string;
   }
 
   return configLabelKey in config
     ? config[configLabelKey]
-    : config[key as keyof typeof config]
+    : config[key as keyof typeof config];
 }
 
 export {
@@ -362,4 +362,4 @@ export {
   ChartLegend,
   ChartLegendContent,
   ChartStyle,
-}
+};

src/components/ui/checkbox.tsx

@@ -1,10 +1,10 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { Check } from "lucide-react"
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
@@ -14,7 +14,7 @@ const Checkbox = React.forwardRef<
     ref={ref}
     className={cn(
       "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-      className
+      className,
     )}
     {...props}
   >
@@ -24,7 +24,7 @@ const Checkbox = React.forwardRef<
       <Check className="h-4 w-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
-))
-Checkbox.displayName = CheckboxPrimitive.Root.displayName
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
-export { Checkbox }
+export { Checkbox };

src/components/ui/collapsible.tsx

@@ -1,11 +1,11 @@
-"use client"
+"use client";
 
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
 
-const Collapsible = CollapsiblePrimitive.Root
+const Collapsible = CollapsiblePrimitive.Root;
 
-const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
 
-const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
 
-export { Collapsible, CollapsibleTrigger, CollapsibleContent }
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

src/components/ui/command.tsx

@@ -1,12 +1,12 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { type DialogProps } from "@radix-ui/react-dialog"
-import { Command as CommandPrimitive } from "cmdk"
-import { Search } from "lucide-react"
+import * as React from "react";
+import { type DialogProps } from "@radix-ui/react-dialog";
+import { Command as CommandPrimitive } from "cmdk";
+import { Search } from "lucide-react";
 
-import { cn } from "@/lib/utils"
-import { Dialog, DialogContent } from "@/components/ui/dialog"
+import { cn } from "@/lib/utils";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,
@@ -16,12 +16,12 @@ const Command = React.forwardRef<
     ref={ref}
     className={cn(
       "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-      className
+      className,
     )}
     {...props}
   />
-))
-Command.displayName = CommandPrimitive.displayName
+));
+Command.displayName = CommandPrimitive.displayName;
 
 const CommandDialog = ({ children, ...props }: DialogProps) => {
   return (
@@ -32,8 +32,8 @@ const CommandDialog = ({ children, ...props }: DialogProps) => {
         </Command>
       </DialogContent>
     </Dialog>
-  )
-}
+  );
+};
 
 const CommandInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
@@ -45,14 +45,14 @@ const CommandInput = React.forwardRef<
       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
+        className,
       )}
       {...props}
     />
   </div>
-))
+));
 
-CommandInput.displayName = CommandPrimitive.Input.displayName
+CommandInput.displayName = CommandPrimitive.Input.displayName;
 
 const CommandList = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.List>,
@@ -63,9 +63,9 @@ const CommandList = React.forwardRef<
     className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
     {...props}
   />
-))
+));
 
-CommandList.displayName = CommandPrimitive.List.displayName
+CommandList.displayName = CommandPrimitive.List.displayName;
 
 const CommandEmpty = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Empty>,
@@ -76,9 +76,9 @@ const CommandEmpty = React.forwardRef<
     className="py-6 text-center text-sm"
     {...props}
   />
-))
+));
 
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
 
 const CommandGroup = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Group>,
@@ -88,13 +88,13 @@ const CommandGroup = React.forwardRef<
     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
+      className,
     )}
     {...props}
   />
-))
+));
 
-CommandGroup.displayName = CommandPrimitive.Group.displayName
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
 
 const CommandSeparator = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Separator>,
@@ -105,8 +105,8 @@ const CommandSeparator = React.forwardRef<
     className={cn("-mx-1 h-px bg-border", className)}
     {...props}
   />
-))
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
 
 const CommandItem = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Item>,
@@ -116,13 +116,13 @@ const CommandItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-      className
+      className,
     )}
     {...props}
   />
-))
+));
 
-CommandItem.displayName = CommandPrimitive.Item.displayName
+CommandItem.displayName = CommandPrimitive.Item.displayName;
 
 const CommandShortcut = ({
   className,
@@ -132,13 +132,13 @@ const CommandShortcut = ({
     <span
       className={cn(
         "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
+        className,
       )}
       {...props}
     />
-  )
-}
-CommandShortcut.displayName = "CommandShortcut"
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";
 
 export {
   Command,
@@ -150,4 +150,4 @@ export {
   CommandItem,
   CommandShortcut,
   CommandSeparator,
-}
+};

src/components/ui/context-menu.tsx

@@ -1,27 +1,27 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
+import * as React from "react";
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const ContextMenu = ContextMenuPrimitive.Root
+const ContextMenu = ContextMenuPrimitive.Root;
 
-const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
 
-const ContextMenuGroup = ContextMenuPrimitive.Group
+const ContextMenuGroup = ContextMenuPrimitive.Group;
 
-const ContextMenuPortal = ContextMenuPrimitive.Portal
+const ContextMenuPortal = ContextMenuPrimitive.Portal;
 
-const ContextMenuSub = ContextMenuPrimitive.Sub
+const ContextMenuSub = ContextMenuPrimitive.Sub;
 
-const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
 
 const ContextMenuSubTrigger = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, children, ...props }, ref) => (
   <ContextMenuPrimitive.SubTrigger
@@ -29,15 +29,15 @@ const ContextMenuSubTrigger = React.forwardRef<
     className={cn(
       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   >
     {children}
     <ChevronRight className="ml-auto h-4 w-4" />
   </ContextMenuPrimitive.SubTrigger>
-))
-ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+));
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
 
 const ContextMenuSubContent = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
@@ -47,12 +47,12 @@ const ContextMenuSubContent = React.forwardRef<
     ref={ref}
     className={cn(
       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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
+      className,
     )}
     {...props}
   />
-))
-ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
+));
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
 
 const ContextMenuContent = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Content>,
@@ -63,18 +63,18 @@ const ContextMenuContent = React.forwardRef<
       ref={ref}
       className={cn(
         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 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
+        className,
       )}
       {...props}
     />
   </ContextMenuPrimitive.Portal>
-))
-ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+));
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
 
 const ContextMenuItem = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <ContextMenuPrimitive.Item
@@ -82,12 +82,12 @@ const ContextMenuItem = React.forwardRef<
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   />
-))
-ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+));
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
 
 const ContextMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
@@ -97,7 +97,7 @@ const ContextMenuCheckboxItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     checked={checked}
     {...props}
@@ -109,9 +109,9 @@ const ContextMenuCheckboxItem = React.forwardRef<
     </span>
     {children}
   </ContextMenuPrimitive.CheckboxItem>
-))
+));
 ContextMenuCheckboxItem.displayName =
-  ContextMenuPrimitive.CheckboxItem.displayName
+  ContextMenuPrimitive.CheckboxItem.displayName;
 
 const ContextMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
@@ -121,7 +121,7 @@ const ContextMenuRadioItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     {...props}
   >
@@ -132,13 +132,13 @@ const ContextMenuRadioItem = React.forwardRef<
     </span>
     {children}
   </ContextMenuPrimitive.RadioItem>
-))
-ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+));
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
 
 const ContextMenuLabel = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <ContextMenuPrimitive.Label
@@ -146,12 +146,12 @@ const ContextMenuLabel = React.forwardRef<
     className={cn(
       "px-2 py-1.5 text-sm font-semibold text-foreground",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   />
-))
-ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+));
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
 
 const ContextMenuSeparator = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Separator>,
@@ -162,8 +162,8 @@ const ContextMenuSeparator = React.forwardRef<
     className={cn("-mx-1 my-1 h-px bg-border", className)}
     {...props}
   />
-))
-ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
+));
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
 
 const ContextMenuShortcut = ({
   className,
@@ -173,13 +173,13 @@ const ContextMenuShortcut = ({
     <span
       className={cn(
         "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
+        className,
       )}
       {...props}
     />
-  )
-}
-ContextMenuShortcut.displayName = "ContextMenuShortcut"
+  );
+};
+ContextMenuShortcut.displayName = "ContextMenuShortcut";
 
 export {
   ContextMenu,
@@ -197,4 +197,4 @@ export {
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuRadioGroup,
-}
+};

src/components/ui/dialog.tsx

@@ -1,18 +1,18 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { X } from "lucide-react"
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const Dialog = DialogPrimitive.Root
+const Dialog = DialogPrimitive.Root;
 
-const DialogTrigger = DialogPrimitive.Trigger
+const DialogTrigger = DialogPrimitive.Trigger;
 
-const DialogPortal = DialogPrimitive.Portal
+const DialogPortal = DialogPrimitive.Portal;
 
-const DialogClose = DialogPrimitive.Close
+const DialogClose = DialogPrimitive.Close;
 
 const DialogOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
@@ -22,12 +22,12 @@ const DialogOverlay = React.forwardRef<
     ref={ref}
     className={cn(
       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+      className,
     )}
     {...props}
   />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
@@ -39,7 +39,7 @@ const DialogContent = React.forwardRef<
       ref={ref}
       className={cn(
         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
+        className,
       )}
       {...props}
     >
@@ -50,8 +50,8 @@ const DialogContent = React.forwardRef<
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
   </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({
   className,
@@ -60,12 +60,12 @@ const DialogHeader = ({
   <div
     className={cn(
       "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
+      className,
     )}
     {...props}
   />
-)
-DialogHeader.displayName = "DialogHeader"
+);
+DialogHeader.displayName = "DialogHeader";
 
 const DialogFooter = ({
   className,
@@ -74,12 +74,12 @@ const DialogFooter = ({
   <div
     className={cn(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
+      className,
     )}
     {...props}
   />
-)
-DialogFooter.displayName = "DialogFooter"
+);
+DialogFooter.displayName = "DialogFooter";
 
 const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
@@ -89,12 +89,12 @@ const DialogTitle = React.forwardRef<
     ref={ref}
     className={cn(
       "text-lg font-semibold leading-none tracking-tight",
-      className
+      className,
     )}
     {...props}
   />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
 const DialogDescription = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Description>,
@@ -105,8 +105,8 @@ const DialogDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {
   Dialog,
@@ -119,4 +119,4 @@ export {
   DialogFooter,
   DialogTitle,
   DialogDescription,
-}
+};

src/components/ui/drawer.tsx

@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { Drawer as DrawerPrimitive } from "vaul"
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Drawer = ({
   shouldScaleBackground = true,
@@ -13,14 +13,14 @@ const Drawer = ({
     shouldScaleBackground={shouldScaleBackground}
     {...props}
   />
-)
-Drawer.displayName = "Drawer"
+);
+Drawer.displayName = "Drawer";
 
-const DrawerTrigger = DrawerPrimitive.Trigger
+const DrawerTrigger = DrawerPrimitive.Trigger;
 
-const DrawerPortal = DrawerPrimitive.Portal
+const DrawerPortal = DrawerPrimitive.Portal;
 
-const DrawerClose = DrawerPrimitive.Close
+const DrawerClose = DrawerPrimitive.Close;
 
 const DrawerOverlay = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Overlay>,
@@ -31,8 +31,8 @@ const DrawerOverlay = React.forwardRef<
     className={cn("fixed inset-0 z-50 bg-black/80", className)}
     {...props}
   />
-))
-DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
+));
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
 
 const DrawerContent = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Content>,
@@ -44,7 +44,7 @@ const DrawerContent = React.forwardRef<
       ref={ref}
       className={cn(
         "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
-        className
+        className,
       )}
       {...props}
     >
@@ -52,8 +52,8 @@ const DrawerContent = React.forwardRef<
       {children}
     </DrawerPrimitive.Content>
   </DrawerPortal>
-))
-DrawerContent.displayName = "DrawerContent"
+));
+DrawerContent.displayName = "DrawerContent";
 
 const DrawerHeader = ({
   className,
@@ -63,8 +63,8 @@ const DrawerHeader = ({
     className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
     {...props}
   />
-)
-DrawerHeader.displayName = "DrawerHeader"
+);
+DrawerHeader.displayName = "DrawerHeader";
 
 const DrawerFooter = ({
   className,
@@ -74,8 +74,8 @@ const DrawerFooter = ({
     className={cn("mt-auto flex flex-col gap-2 p-4", className)}
     {...props}
   />
-)
-DrawerFooter.displayName = "DrawerFooter"
+);
+DrawerFooter.displayName = "DrawerFooter";
 
 const DrawerTitle = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Title>,
@@ -85,12 +85,12 @@ const DrawerTitle = React.forwardRef<
     ref={ref}
     className={cn(
       "text-lg font-semibold leading-none tracking-tight",
-      className
+      className,
     )}
     {...props}
   />
-))
-DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+));
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
 
 const DrawerDescription = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Description>,
@@ -101,8 +101,8 @@ const DrawerDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-DrawerDescription.displayName = DrawerPrimitive.Description.displayName
+));
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
 
 export {
   Drawer,
@@ -115,4 +115,4 @@ export {
   DrawerFooter,
   DrawerTitle,
   DrawerDescription,
-}
+};

src/components/ui/dropdown-menu.tsx

@@ -1,27 +1,27 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const DropdownMenu = DropdownMenuPrimitive.Root
+const DropdownMenu = DropdownMenuPrimitive.Root;
 
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 
-const DropdownMenuGroup = DropdownMenuPrimitive.Group
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 
-const DropdownMenuSub = DropdownMenuPrimitive.Sub
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
 const DropdownMenuSubTrigger = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, children, ...props }, ref) => (
   <DropdownMenuPrimitive.SubTrigger
@@ -29,16 +29,16 @@ const DropdownMenuSubTrigger = React.forwardRef<
     className={cn(
       "flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   >
     {children}
     <ChevronRight className="ml-auto" />
   </DropdownMenuPrimitive.SubTrigger>
-))
+));
 DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName
+  DropdownMenuPrimitive.SubTrigger.displayName;
 
 const DropdownMenuSubContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
@@ -48,13 +48,13 @@ const DropdownMenuSubContent = React.forwardRef<
     ref={ref}
     className={cn(
       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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
+      className,
     )}
     {...props}
   />
-))
+));
 DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName
+  DropdownMenuPrimitive.SubContent.displayName;
 
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
@@ -66,18 +66,18 @@ const DropdownMenuContent = React.forwardRef<
       sideOffset={sideOffset}
       className={cn(
         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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
+        className,
       )}
       {...props}
     />
   </DropdownMenuPrimitive.Portal>
-))
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
 const DropdownMenuItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Item
@@ -85,12 +85,12 @@ const DropdownMenuItem = React.forwardRef<
     className={cn(
       "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   />
-))
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
 const DropdownMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
@@ -100,7 +100,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     checked={checked}
     {...props}
@@ -112,9 +112,9 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.CheckboxItem>
-))
+));
 DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName
+  DropdownMenuPrimitive.CheckboxItem.displayName;
 
 const DropdownMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
@@ -124,7 +124,7 @@ const DropdownMenuRadioItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     {...props}
   >
@@ -135,13 +135,13 @@ const DropdownMenuRadioItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.RadioItem>
-))
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 
 const DropdownMenuLabel = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Label
@@ -149,12 +149,12 @@ const DropdownMenuLabel = React.forwardRef<
     className={cn(
       "px-2 py-1.5 text-sm font-semibold",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   />
-))
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 
 const DropdownMenuSeparator = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
@@ -165,8 +165,8 @@ const DropdownMenuSeparator = React.forwardRef<
     className={cn("-mx-1 my-1 h-px bg-muted", className)}
     {...props}
   />
-))
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 
 const DropdownMenuShortcut = ({
   className,
@@ -177,9 +177,9 @@ const DropdownMenuShortcut = ({
       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
       {...props}
     />
-  )
-}
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 export {
   DropdownMenu,
@@ -197,4 +197,4 @@ export {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuRadioGroup,
-}
+};

src/components/ui/error-message.tsx

@@ -6,18 +6,34 @@ interface ErrorMessageProps {
   className?: string;
 }
 
-export function ErrorMessage({ message, onClose, className = "" }: ErrorMessageProps) {
+export function ErrorMessage({
+  message,
+  onClose,
+  className = "",
+}: ErrorMessageProps) {
   if (!message) return null;
-  
+
   return (
-    <div className={`p-2 bg-red-600/20 text-red-200 text-sm text-center relative ${className}`}>
+    <div
+      className={`p-2 bg-red-600/20 text-red-200 text-sm text-center relative ${className}`}
+    >
       {onClose && (
-        <button 
-          onClick={onClose} 
+        <button
+          onClick={onClose}
           className="absolute right-2 top-1/2 -translate-y-1/2 text-red-200 hover:text-white"
           aria-label="Close error message"
         >
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
             <line x1="18" y1="6" x2="6" y2="18"></line>
             <line x1="6" y1="6" x2="18" y2="18"></line>
           </svg>
@@ -26,4 +42,4 @@ export function ErrorMessage({ message, onClose, className = "" }: ErrorMessageP
       {message}
     </div>
   );
-} 
+}

src/components/ui/form.tsx

@@ -1,8 +1,8 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { Slot } from "@radix-ui/react-slot"
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
 import {
   Controller,
   ControllerProps,
@@ -10,27 +10,27 @@ import {
   FieldValues,
   FormProvider,
   useFormContext,
-} from "react-hook-form"
+} from "react-hook-form";
 
-import { cn } from "@/lib/utils"
-import { Label } from "@/components/ui/label"
+import { cn } from "@/lib/utils";
+import { Label } from "@/components/ui/label";
 
-const Form = FormProvider
+const Form = FormProvider;
 
 type FormFieldContextValue<
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = {
-  name: TName
-}
+  name: TName;
+};
 
 const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue
-)
+  {} as FormFieldContextValue,
+);
 
 const FormField = <
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >({
   ...props
 }: ControllerProps<TFieldValues, TName>) => {
@@ -38,21 +38,21 @@ const FormField = <
     <FormFieldContext.Provider value={{ name: props.name }}>
       <Controller {...props} />
     </FormFieldContext.Provider>
-  )
-}
+  );
+};
 
 const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext)
-  const itemContext = React.useContext(FormItemContext)
-  const { getFieldState, formState } = useFormContext()
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
 
-  const fieldState = getFieldState(fieldContext.name, formState)
+  const fieldState = getFieldState(fieldContext.name, formState);
 
   if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>")
+    throw new Error("useFormField should be used within <FormField>");
   }
 
-  const { id } = itemContext
+  const { id } = itemContext;
 
   return {
     id,
@@ -61,36 +61,36 @@ const useFormField = () => {
     formDescriptionId: `${id}-form-item-description`,
     formMessageId: `${id}-form-item-message`,
     ...fieldState,
-  }
-}
+  };
+};
 
 type FormItemContextValue = {
-  id: string
-}
+  id: string;
+};
 
 const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
-)
+  {} as FormItemContextValue,
+);
 
 const FormItem = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => {
-  const id = React.useId()
+  const id = React.useId();
 
   return (
     <FormItemContext.Provider value={{ id }}>
       <div ref={ref} className={cn("space-y-2", className)} {...props} />
     </FormItemContext.Provider>
-  )
-})
-FormItem.displayName = "FormItem"
+  );
+});
+FormItem.displayName = "FormItem";
 
 const FormLabel = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
 >(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField()
+  const { error, formItemId } = useFormField();
 
   return (
     <Label
@@ -99,15 +99,16 @@ const FormLabel = React.forwardRef<
       htmlFor={formItemId}
       {...props}
     />
-  )
-})
-FormLabel.displayName = "FormLabel"
+  );
+});
+FormLabel.displayName = "FormLabel";
 
 const FormControl = React.forwardRef<
   React.ElementRef<typeof Slot>,
   React.ComponentPropsWithoutRef<typeof Slot>
 >(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
 
   return (
     <Slot
@@ -121,15 +122,15 @@ const FormControl = React.forwardRef<
       aria-invalid={!!error}
       {...props}
     />
-  )
-})
-FormControl.displayName = "FormControl"
+  );
+});
+FormControl.displayName = "FormControl";
 
 const FormDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField()
+  const { formDescriptionId } = useFormField();
 
   return (
     <p
@@ -138,19 +139,19 @@ const FormDescription = React.forwardRef<
       className={cn("text-sm text-muted-foreground", className)}
       {...props}
     />
-  )
-})
-FormDescription.displayName = "FormDescription"
+  );
+});
+FormDescription.displayName = "FormDescription";
 
 const FormMessage = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField()
-  const body = error ? String(error?.message) : children
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
 
   if (!body) {
-    return null
+    return null;
   }
 
   return (
@@ -162,9 +163,9 @@ const FormMessage = React.forwardRef<
     >
       {body}
     </p>
-  )
-})
-FormMessage.displayName = "FormMessage"
+  );
+});
+FormMessage.displayName = "FormMessage";
 
 export {
   useFormField,
@@ -175,4 +176,4 @@ export {
   FormDescription,
   FormMessage,
   FormField,
-}
+};

src/components/ui/fullscreen-toggle.tsx

@@ -1,16 +1,25 @@
-"use client"
+"use client";
 
-import { Maximize2, Minimize2 } from "lucide-react"
-import { Button } from "@/components/ui/button"
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import { Maximize2, Minimize2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 interface FullscreenToggleProps {
-  isFullScreen: boolean
-  onClick: () => void
-  className?: string
+  isFullScreen: boolean;
+  onClick: () => void;
+  className?: string;
 }
 
-export function FullscreenToggle({ isFullScreen, onClick, className = "" }: FullscreenToggleProps) {
+export function FullscreenToggle({
+  isFullScreen,
+  onClick,
+  className = "",
+}: FullscreenToggleProps) {
   return (
     <TooltipProvider>
       <Tooltip>
@@ -31,9 +40,9 @@ export function FullscreenToggle({ isFullScreen, onClick, className = "" }: Full
           </Button>
         </TooltipTrigger>
         <TooltipContent className="bg-novita-gray text-white">
-          <p>{isFullScreen ? 'Exit full screen' : 'Enter full screen'}</p>
+          <p>{isFullScreen ? "Exit full screen" : "Enter full screen"}</p>
         </TooltipContent>
       </Tooltip>
     </TooltipProvider>
-  )
-} 
+  );
+}

src/components/ui/hover-card.tsx

@@ -1,13 +1,13 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+import * as React from "react";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const HoverCard = HoverCardPrimitive.Root
+const HoverCard = HoverCardPrimitive.Root;
 
-const HoverCardTrigger = HoverCardPrimitive.Trigger
+const HoverCardTrigger = HoverCardPrimitive.Trigger;
 
 const HoverCardContent = React.forwardRef<
   React.ElementRef<typeof HoverCardPrimitive.Content>,
@@ -19,11 +19,11 @@ const HoverCardContent = React.forwardRef<
     sideOffset={sideOffset}
     className={cn(
       "z-50 w-64 rounded-md border bg-popover 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
+      className,
     )}
     {...props}
   />
-))
-HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+));
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
 
-export { HoverCard, HoverCardTrigger, HoverCardContent }
+export { HoverCard, HoverCardTrigger, HoverCardContent };

src/components/ui/icons.tsx

@@ -1,42 +1,82 @@
 export function MinimizeIcon() {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
       <path d="M8 3v3a2 2 0 0 1-2 2H3"></path>
       <path d="M21 8h-3a2 2 0 0 1-2-2V3"></path>
       <path d="M3 16h3a2 2 0 0 1 2 2v3"></path>
       <path d="M16 21v-3a2 2 0 0 1 2-2h3"></path>
     </svg>
-  )
+  );
 }
 
 export function MaximizeIcon() {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
       <polyline points="15 3 21 3 21 9"></polyline>
       <polyline points="9 21 3 21 3 15"></polyline>
       <line x1="21" y1="3" x2="14" y2="10"></line>
       <line x1="3" y1="21" x2="10" y2="14"></line>
     </svg>
-  )
+  );
 }
 
 export function DownloadIcon() {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
       <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
       <polyline points="7 10 12 15 17 10"></polyline>
       <line x1="12" y1="15" x2="12" y2="3"></line>
     </svg>
-  )
+  );
 }
 
 export function RefreshIcon() {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
       <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path>
       <path d="M21 3v5h-5"></path>
       <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path>
       <path d="M3 21v-5h5"></path>
     </svg>
-  )
-} 
+  );
+}

src/components/ui/input-otp.tsx

@@ -1,10 +1,10 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { OTPInput, OTPInputContext } from "input-otp"
-import { Dot } from "lucide-react"
+import * as React from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { Dot } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const InputOTP = React.forwardRef<
   React.ElementRef<typeof OTPInput>,
@@ -14,28 +14,28 @@ const InputOTP = React.forwardRef<
     ref={ref}
     containerClassName={cn(
       "flex items-center gap-2 has-[:disabled]:opacity-50",
-      containerClassName
+      containerClassName,
     )}
     className={cn("disabled:cursor-not-allowed", className)}
     {...props}
   />
-))
-InputOTP.displayName = "InputOTP"
+));
+InputOTP.displayName = "InputOTP";
 
 const InputOTPGroup = React.forwardRef<
   React.ElementRef<"div">,
   React.ComponentPropsWithoutRef<"div">
 >(({ className, ...props }, ref) => (
   <div ref={ref} className={cn("flex items-center", className)} {...props} />
-))
-InputOTPGroup.displayName = "InputOTPGroup"
+));
+InputOTPGroup.displayName = "InputOTPGroup";
 
 const InputOTPSlot = React.forwardRef<
   React.ElementRef<"div">,
   React.ComponentPropsWithoutRef<"div"> & { index: number }
 >(({ index, className, ...props }, ref) => {
-  const inputOTPContext = React.useContext(OTPInputContext)
-  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
 
   return (
     <div
@@ -43,7 +43,7 @@ const InputOTPSlot = React.forwardRef<
       className={cn(
         "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
         isActive && "z-10 ring-2 ring-ring ring-offset-background",
-        className
+        className,
       )}
       {...props}
     >
@@ -54,9 +54,9 @@ const InputOTPSlot = React.forwardRef<
         </div>
       )}
     </div>
-  )
-})
-InputOTPSlot.displayName = "InputOTPSlot"
+  );
+});
+InputOTPSlot.displayName = "InputOTPSlot";
 
 const InputOTPSeparator = React.forwardRef<
   React.ElementRef<"div">,
@@ -65,7 +65,7 @@ const InputOTPSeparator = React.forwardRef<
   <div ref={ref} role="separator" {...props}>
     <Dot />
   </div>
-))
-InputOTPSeparator.displayName = "InputOTPSeparator"
+));
+InputOTPSeparator.displayName = "InputOTPSeparator";
 
-export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };