BUG: #133 - Fix frontend issues

frontend/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@supabase/supabase-js": "^2.53.0",
     "axios": "^1.8.3",
+    "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "framer-motion": "^12.5.0",
     "lucide-react": "^0.344.0",

frontend/src/App.tsx

@@ -16,12 +16,30 @@ import LoginPage from './components/pages/LoginPage';
 import ProfilePage from './components/pages/ProfilePage';
 import SignUpPage from './components/pages/SignUpPage';
 import { supabase } from './lib/supabaseClient';
-import ForgotPasswrdPage from './components/pages/ForgotPasswrdPage';
+import ForgotPasswordPage from './components/pages/ForgotPasswordPage';
 import ResetPasswordPage from './components/pages/ResetPasswordPage';
 
+// Define proper TypeScript interfaces
+interface RepositoryData {
+  id: string;
+  name: string;
+  full_name: string;
+  description?: string;
+  html_url: string;
+  stargazers_count: number;
+  forks_count: number;
+  language?: string;
+  created_at: string;
+  updated_at: string;
+  owner: {
+    login: string;
+    avatar_url: string;
+  };
+}
+
 function App() {
   const [isSidebarOpen, setIsSidebarOpen] = useState(true);
-  const [repoData, setRepoData] = useState<any>(null);
+  const [repoData, setRepoData] = useState<RepositoryData | null>(null);
   const [isAuthenticated, setIsAuthenticated] = useState(false);
 
   // Auto login if user has already logged in
@@ -37,7 +55,6 @@ function App() {
 
     const { data: subscription } = supabase.auth.onAuthStateChange(
       (event, session) => {
-        console.log("Auth event:", event, session);
         switch (event) {
           case "SIGNED_IN":
             setIsAuthenticated(true);
@@ -54,10 +71,10 @@ function App() {
             toast("Check your email to reset your password.");
             break;
           case "TOKEN_REFRESHED":
-            console.log("Session refreshed");
+            // Session refreshed silently
             break;
           case "USER_UPDATED":
-            console.log("User updated", session?.user);
+            // User profile updated
             break;
         }
       }
@@ -126,7 +143,7 @@ function App() {
               isAuthenticated ? (
                 <Navigate to="/" replace />
               ) : (
-                <ForgotPasswrdPage />
+                <ForgotPasswordPage />
               )
             }
           />

frontend/src/components/pages/ForgotPasswrdPage.tsx → frontend/src/components/pages/ForgotPasswordPage.tsx

@@ -46,7 +46,7 @@ const InputField = ({ icon: Icon, ...props }: InputFieldProps) => (
 );
 
 
-export default function ForgotPasswrdPage() {
+export default function ForgotPasswordPage() {
   const navigate = useNavigate();
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [mailPage, setMailPage] = useState<boolean>(false);
@@ -65,14 +65,12 @@ export default function ForgotPasswrdPage() {
       const redirectTo = new URL('/reset-password', base).toString();
       const { error } = await supabase.auth.resetPasswordForEmail(email, { redirectTo });
       if (error) {
-        console.error('resetPasswordForEmail failed', error);
         toast.error(error.message || 'Could not send reset email.');
         return;
       }
       toast.success('Password reset email sent.');
       setMailPage(true);
     } catch (err) {
-      console.error('resetPasswordForEmail unexpected error', err);
       toast.error("Something went wrong. Please try again.");
     } finally {
       setIsLoading(false);

frontend/src/components/utils/helpers.ts

@@ -1,21 +1,8 @@
-import { type ClassValue, clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-/**
- * Combines Tailwind CSS classes conditionally and merges duplicates.
- * @param inputs Tailwind class strings
- * @returns Optimized className string
- */
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
-
 /**
  * Generates a random API key
  * @returns {string} The generated API key
  */
 export const generateApiKey = (): string => {
-  console.log('hello');
   const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
   const length = 32;
   let result = 'pk_';