fixed console errors for component client errors

Author: Gerome-Elassaad

.gitignore

@@ -28,3 +28,4 @@ yarn-error.log*
 next-env.d.ts
 .vercel
 
+.firebase

app/api/github/auth/route.ts

@@ -38,7 +38,6 @@ export async function POST(request: NextRequest) {
       )
     }
 
-    // Store token in Supabase user metadata
     const cookieStore = cookies()
     const supabase = createServerClient(
       process.env.NEXT_PUBLIC_SUPABASE_URL!,

app/globals.css

@@ -14,75 +14,81 @@ body {
 
 @layer base {
   :root {
-    /* GitHub Light Mode */
-    --background: 0 0% 100%; /* #ffffff */
-    --foreground: 213 13% 17%; /* #24292f */
-    --card: 210 40% 98%; /* #f6f8fa */
-    --card-foreground: 213 13% 17%; /* #24292f */
+    /* Loveable.dev Inspired Light Mode */
+    --background: 0 0% 99%; /* #fcfcfc */
+    --foreground: 0 0% 20%; /* #333333 */
+    --card: 0 0% 100%; /* #ffffff */
+    --card-foreground: 0 0% 20%; /* #333333 */
     --popover: 0 0% 100%; /* #ffffff */
-    --popover-foreground: 213 13% 17%; /* #24292f */
-    --primary: 212 92% 43%; /* #0969da */
+    --popover-foreground: 0 0% 20%; /* #333333 */
+    --primary: 323 100% 45%; /* #e6007e */
     --primary-foreground: 0 0% 100%; /* #ffffff */
-    --secondary: 210 40% 98%; /* #f6f8fa */
-    --secondary-foreground: 213 13% 17%; /* #24292f */
-    --muted: 210 40% 98%; /* #f6f8fa */
-    --muted-foreground: 213 12% 40%; /* #656d76 */
-    --accent: 210 40% 96%; /* #eef2f7 */
-    --accent-foreground: 213 13% 17%; /* #24292f */
-    --destructive: 0 84% 60%; /* #f85149 */
+    --secondary: 0 0% 96%; /* #f5f5f5 */
+    --secondary-foreground: 0 0% 20%; /* #333333 */
+    --muted: 0 0% 96%; /* #f5f5f5 */
+    --muted-foreground: 0 0% 40%; /* #666666 */
+    --accent: 323 100% 95%; /* #ffe5f6 */
+    --accent-foreground: 323 100% 45%; /* #e6007e */
+    --destructive: 0 72% 51%; /* #e53e3e */
     --destructive-foreground: 0 0% 100%; /* #ffffff */
-    --border: 214 32% 85%; /* #d0d7de */
-    --input: 214 32% 85%; /* #d0d7de */
-    --ring: 212 92% 43%; /* #0969da */
-    --chart-1: 212 92% 43%;
-    --chart-2: 142 71% 45%;
-    --chart-3: 262 83% 58%;
-    --chart-4: 47 96% 53%;
-    --chart-5: 0 84% 60%;
+    --border: 0 0% 87%; /* #dedede */
+    --input: 0 0% 87%; /* #dedede */
+    --ring: 323 100% 45%; /* #e6007e */
+    --chart-1: 323 100% 45%; /* #e6007e */
+    --chart-2: 197 71% 55%; /* #47a8d9 */
+    --chart-3: 270 50% 60%; /* #9966cc */
+    --chart-4: 35 100% 60%; /* #ffb333 */
+    --chart-5: 130 50% 55%; /* #66c277 */
     --radius: 6px;
-    --sidebar-background: 0 0% 100%;
-    --sidebar-foreground: 213 13% 17%;
-    --sidebar-primary: 212 92% 43%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 210 40% 98%;
-    --sidebar-accent-foreground: 213 13% 17%;
-    --sidebar-border: 214 32% 85%;
-    --sidebar-ring: 212 92% 43%;
+    --sidebar-background: 0 0% 99%; /* #fcfcfc */
+    --sidebar-foreground: 0 0% 20%; /* #333333 */
+    --sidebar-primary: 323 100% 45%; /* #e6007e */
+    --sidebar-primary-foreground: 0 0% 100%; /* #ffffff */
+    --sidebar-accent: 323 100% 95%; /* #ffe5f6 */
+    --sidebar-accent-foreground: 323 100% 45%; /* #e6007e */
+    --sidebar-border: 0 0% 87%; /* #dedede */
+    --sidebar-ring: 323 100% 45%; /* #e6007e */
+    --foreground-rgb: 51, 51, 51;      /* #333333 */
+    --background-start-rgb: 252, 252, 252; /* #fcfcfc */
+    --background-end-rgb: 252, 252, 252;   /* #fcfcfc */
   }
   .dark {
     /* GitHub Dark Mode */
-    --background: 220 13% 6%; /* #0d1117 */
-    --foreground: 213 31% 91%; /* #e6edf3 */
-    --card: 215 28% 10%; /* #161b22 */
-    --card-foreground: 213 31% 91%; /* #e6edf3 */
-    --popover: 215 28% 10%; /* #161b22 */
-    --popover-foreground: 213 31% 91%; /* #e6edf3 */
-    --primary: 212 92% 45%; /* #2f81f7 */
-    --primary-foreground: 220 13% 6%; /* #0d1117 */
-    --secondary: 215 28% 10%; /* #161b22 */
-    --secondary-foreground: 213 31% 91%; /* #e6edf3 */
-    --muted: 215 28% 10%; /* #161b22 */
-    --muted-foreground: 217 10% 55%; /* #8b949e */
-    --accent: 216 12% 15%; /* #21262d */
-    --accent-foreground: 213 31% 91%; /* #e6edf3 */
-    --destructive: 0 81% 67%; /* #f85149 */
+    --background: 222 30% 6%; /* #0d1117 */
+    --foreground: 210 40% 90%; /* #e6edf3 */
+    --card: 215 28% 11%; /* #161b22 */
+    --card-foreground: 210 40% 90%; /* #e6edf3 */
+    --popover: 215 28% 11%; /* #161b22 */
+    --popover-foreground: 210 40% 90%; /* #e6edf3 */
+    --primary: 212 100% 67%; /* #58a6ff */
+    --primary-foreground: 222 30% 6%; /* #0d1117 */
+    --secondary: 215 28% 11%; /* #161b22 */
+    --secondary-foreground: 210 40% 90%; /* #e6edf3 */
+    --muted: 215 28% 11%; /* #161b22 */
+    --muted-foreground: 217 9% 57%; /* #8b949e */
+    --accent: 216 15% 15%; /* #21262d */
+    --accent-foreground: 210 40% 90%; /* #e6edf3 */
+    --destructive: 1 65% 52%; /* #da3633 */
     --destructive-foreground: 0 0% 100%; /* #ffffff */
-    --border: 215 14% 19%; /* #30363d */
-    --input: 215 14% 19%; /* #30363d */
-    --ring: 212 92% 45%; /* #2f81f7 */
-    --chart-1: 212 92% 45%;
-    --chart-2: 142 71% 45%;
-    --chart-3: 262 83% 58%;
-    --chart-4: 47 96% 53%;
-    --chart-5: 0 81% 67%;
-    --sidebar-background: 220 13% 6%;
-    --sidebar-foreground: 213 31% 91%;
-    --sidebar-primary: 212 92% 45%;
-    --sidebar-primary-foreground: 220 13% 6%;
-    --sidebar-accent: 215 28% 10%;
-    --sidebar-accent-foreground: 213 31% 91%;
-    --sidebar-border: 215 14% 19%;
-    --sidebar-ring: 212 92% 45%;
+    --border: 214 14% 21%; /* #30363d */
+    --input: 214 14% 21%; /* #30363d */
+    --ring: 212 100% 67%; /* #58a6ff */
+    --chart-1: 212 100% 67%; /* #58a6ff */
+    --chart-2: 130 60% 55%; /* #56d364 */
+    --chart-3: 270 70% 70%; /* #b392f0 */
+    --chart-4: 35 90% 65%; /* #f0c674 */
+    --chart-5: 340 80% 70%; /* #f778ba */
+    --sidebar-background: 215 28% 11%; /* #161b22 */
+    --sidebar-foreground: 210 40% 90%; /* #e6edf3 */
+    --sidebar-primary: 212 100% 67%; /* #58a6ff */
+    --sidebar-primary-foreground: 222 30% 6%; /* #0d1117 */
+    --sidebar-accent: 216 15% 15%; /* #21262d */
+    --sidebar-accent-foreground: 210 40% 90%; /* #e6edf3 */
+    --sidebar-border: 214 14% 21%; /* #30363d */
+    --sidebar-ring: 212 100% 67%; /* #58a6ff */
+    --foreground-rgb: 230, 237, 243;    /* #e6edf3 */
+    --background-start-rgb: 13, 17, 23; /* #0d1117 */
+    --background-end-rgb: 13, 17, 23;   /* #0d1117 */
   }
 }
 

app/layout.tsx

@@ -1,15 +1,14 @@
 import './globals.css'
 import { PostHogProvider, ThemeProvider } from './providers'
 import { Toaster } from '@/components/ui/toaster'
-import { Analytics } from '@vercel/analytics/next'
 import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
 
 const inter = Inter({ subsets: ['latin'] })
 
 export const metadata: Metadata = {
   metadataBase: new URL('https://codingit.vercel.app'),
-  title: '#1 Open Source AI Software Engineer',
+  title: 'CodinIT #1 Open Source AI Software Engineer',
   keywords: [
     'AI software engineer',
     'open source',
@@ -60,7 +59,6 @@ export default function RootLayout({
             {children}
           </ThemeProvider>
           <Toaster />
-          <Analytics />
         </body>
       </PostHogProvider>
     </html>

app/page.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import type React from "react"
+import React from "react"
 
 import type { ViewType } from "@/components/auth"
 import { AuthDialog } from "@/components/auth-dialog"
@@ -22,7 +22,9 @@ import type { DeepPartial } from "ai"
 import { experimental_useObject as useObject } from "ai/react"
 import { usePostHog } from "posthog-js/react"
 import { type SetStateAction, useCallback, useEffect, useState } from "react"
-import { useLocalStorage } from "usehooks-ts"
+import { useLocalStorage } from "usehooks-ts";
+import posthog from "posthog-js"
+
 const TEMPLATE_IDS = {
   CODE_INTERPRETER_V1: "code-interpreter-v1",
   NEXTJS_DEVELOPER: "nextjs-developer",
@@ -259,7 +261,10 @@ export default function Home() {
   })
 
   const currentModel = filteredModels.find((model) => model.id === languageModel.model)
-  const currentTemplate = selectedTemplate === "auto" ? templates : { [selectedTemplate]: templates[selectedTemplate] }
+  const currentTemplate = React.useMemo(
+    () => selectedTemplate === "auto" ? templates : { [selectedTemplate]: templates[selectedTemplate] },
+    [selectedTemplate]
+  )
 
   const {
     object,
@@ -433,11 +438,11 @@ export default function Home() {
     }
   }, [error, stop])
 
-  async function handleSubmitAuth(
+  const handleSubmitAuth = useCallback(async (
     e: React.FormEvent<HTMLFormElement>, 
     projectFiles?: File[], 
     projectAnalysis?: ProjectAnalysis
-  ) {
+  ) => {
     e.preventDefault()
 
     if (isLoading) {
@@ -550,9 +555,9 @@ export default function Home() {
       console.error("[handleSubmitAuth] Submit error:", error)
       setErrorMessage("Failed to submit request. Please try again.")
     }
-  }
+  }, [isLoading, session, userTeam, currentModel, isSubmitting, stop, chatInput, files, messages, currentTemplate, languageModel, setAuthDialog, setErrorMessage, setCurrentRequestId, setChatInput, setFiles, setCurrentTab, setIsRateLimited, setProjectContext, posthog, submit, selectedTemplate])
 
-  function retry() {
+  const retry = useCallback(() => {
     if (!session?.user?.id || !userTeam?.id) {
       console.error("[retry] Missing authentication data")
       setErrorMessage("Authentication error. Please sign out and sign in again.")
@@ -592,37 +597,36 @@ export default function Home() {
     })
 
     submit(submitData)
-  }
+  }, [session, userTeam, currentModel, messages, currentTemplate, languageModel, projectContext, setErrorMessage, setIsRateLimited, setIsPreviewLoading, setCurrentRequestId, submit])
 
-  function handleSaveInputChange(e: React.ChangeEvent<HTMLTextAreaElement> | React.ChangeEvent<HTMLInputElement>) {
+  const handleSaveInputChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement> | React.ChangeEvent<HTMLInputElement>) => {
     setChatInput(e.target.value)
-  }
+  }, [setChatInput]);
 
-  function handleFileChange(change: SetStateAction<File[]>) {
+  const handleFileChange = useCallback((change: SetStateAction<File[]>) => {
     setFiles(change)
-  }
+  }, [setFiles]);
 
-  function logout() {
+  const logout = useCallback(() => {
     supabase ? supabase.auth.signOut() : console.warn("Supabase is not initialized")
-  }
+  }, []); // supabase is stable
 
-  function handleLanguageModelChange(e: LLMModelConfig) {
+  const handleLanguageModelChange = useCallback((e: LLMModelConfig) => {
     setLanguageModel({ ...languageModel, ...e })
-  }
+  }, [languageModel, setLanguageModel]);
 
-  function handleSocialClick(target: "github" | "x" | "discord") {
+  const handleSocialClick = useCallback((target: "github" | "x" | "discord") => {
     if (target === "github") {
       window.open("https://github.com/Gerome-Elassaad/CodinIT", "_blank")
     } else if (target === "x") {
       window.open("https://x.com/codinit_dev", "_blank")
     } else if (target === "discord") {
       window.open("https://discord.gg/codinit", "_blank")
     }
-
     posthog.capture(`${target}_click`)
-  }
+  }, [posthog]);
 
-  function handleClearChat() {
+  const handleClearChat = useCallback(() => {
     stop()
     setChatInput("")
     setFiles([])
@@ -635,32 +639,38 @@ export default function Home() {
     setIsRateLimited(false)
     setCurrentRequestId(null)
     setProjectContext({ files: [], analysis: null })
-  }
+  }, [stop, setChatInput, setFiles, setMessages, setFragment, setResult, setCurrentTab, setIsPreviewLoading, setErrorMessage, setIsRateLimited, setCurrentRequestId, setProjectContext]);
 
-  function setCurrentPreview(preview: {
+  const setCurrentPreview = useCallback((preview: {
     fragment: DeepPartial<FragmentSchema> | undefined
     result: ExecutionResult | undefined
-  }) {
+  }) => {
     setFragment(preview.fragment)
     setResult(preview.result)
-  }
+  }, [setFragment, setResult]);
 
-  function handleUndo() {
+  const handleUndo = useCallback(() => {
     if (messages.length > 1) {
       setMessages((previousMessages) => [...previousMessages.slice(0, -2)])
       setCurrentPreview({ fragment: undefined, result: undefined })
       setErrorMessage("")
       setIsPreviewLoading(false)
     }
-  }
+  }, [messages.length, setMessages, setCurrentPreview, setErrorMessage, setIsPreviewLoading]);
 
-  function handleRetryAuth() {
+  const handleRetryAuth = useCallback(() => {
     if (supabase) {
       supabase.auth.signOut().then(() => {
         setTimeout(() => setAuthDialog(true), 500)
       })
     }
-  }
+  }, [setAuthDialog]); // supabase is a stable import, setAuthDialog is a stable state setter
+
+  const handlePreviewClose = useCallback(() => {
+    setFragment(undefined);
+    setResult(undefined);
+    setCurrentTab("code");
+  }, [setFragment, setResult, setCurrentTab]);
 
   if (isLoading) {
     return (
@@ -739,11 +749,7 @@ export default function Home() {
                 isPreviewLoading={isPreviewLoading}
                 fragment={fragment}
                 result={result as ExecutionResult}
-                onClose={() => {
-                  setFragment(undefined)
-                  setResult(undefined)
-                  setCurrentTab("code")
-                }}
+                onClose={handlePreviewClose}
               />
             </div>
           )}

components/chat-picker.tsx

@@ -56,7 +56,6 @@ export function ChatPicker({
                 <SelectItem key={templateId} value={templateId}>
                   <div className="flex items-center space-x-2">
                     <Image
-                      className="flex"
                       src={`/thirdparty/templates/${templateId}.svg`}
                       alt={templateId}
                       width={14}
@@ -89,7 +88,6 @@ export function ChatPicker({
                   <SelectItem key={model.id} value={model.id}>
                     <div className="flex items-center space-x-2">
                       <Image
-                        className="flex"
                         src={`/thirdparty/logos/${model.providerId}.svg`}
                         alt={model.provider}
                         width={14}