feat: add UI components including Skeleton, Slider, Toaster, Switch, Table, Tabs, Textarea, Toggle Group, Toggle, Tooltip, and User Avatar

- Implemented Skeleton component for loading states.
- Added Slider component using Radix UI for customizable sliders.
- Created Toaster component for notifications with theme support.
- Developed Switch component for toggle functionality.
- Introduced Table component with subcomponents for structured data display.
- Built Tabs component for tabbed navigation.
- Added Textarea component for multi-line text input.
- Implemented Toggle Group and Toggle components for grouped toggle buttons.
- Created Tooltip component for displaying additional information on hover.
- Added User Avatar component for displaying user images with fallback.
- Implemented useIsMobile hook for responsive design.
- Created API utility functions for user and thought data fetching.
- Added utility function for class name merging.
- Updated package.json with new dependencies for UI components and utilities.
- Added TypeScript configuration for path aliasing.

thoughts-frontend/app/page.tsx

@@ -1,6 +1,10 @@
 "use client";
 
 import { useState, useEffect, FormEvent } from "react";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { Card, CardHeader, CardContent } from "@/components/ui/card";
+import { Alert } from "@/components/ui/alert";
 
 interface Thought {
   id: number;
@@ -10,16 +14,11 @@ interface Thought {
 }
 
 export default function Home() {
-  // State to store the list of thoughts for the feed
   const [thoughts, setThoughts] = useState<Thought[]>([]);
-  // State for the content of the new thought being typed
   const [newThoughtContent, setNewThoughtContent] = useState("");
-  // State to manage loading status
   const [isLoading, setIsLoading] = useState(true);
-  // State to hold any potential errors during API calls
   const [error, setError] = useState<string | null>(null);
 
-  // Function to fetch the feed from the backend API
   const fetchFeed = async () => {
     try {
       setError(null);
@@ -28,7 +27,6 @@ export default function Home() {
         throw new Error(`HTTP error! status: ${response.status}`);
       }
       const data = await response.json();
-      // The API returns { thoughts: [...] }, so we access the nested array
       setThoughts(data.thoughts || []);
     } catch (e: unknown) {
       console.error("Failed to fetch feed:", e);
@@ -40,15 +38,13 @@ export default function Home() {
     }
   };
 
-  // useEffect hook to fetch the feed when the component first loads
   useEffect(() => {
     fetchFeed();
   }, []);
 
-  // Handler for submitting the new thought form
   const handleSubmitThought = async (e: FormEvent) => {
     e.preventDefault();
-    if (!newThoughtContent.trim()) return; // Prevent empty posts
+    if (!newThoughtContent.trim()) return;
 
     try {
       const response = await fetch("http://localhost:8000/thoughts", {
@@ -56,7 +52,6 @@ export default function Home() {
         headers: {
           "Content-Type": "application/json",
         },
-        // We are hardcoding author_id: 1 as we don't have auth yet
         body: JSON.stringify({ content: newThoughtContent, author_id: 1 }),
       });
 
@@ -64,9 +59,7 @@ export default function Home() {
         throw new Error(`HTTP error! status: ${response.status}`);
       }
 
-      // Clear the input box
       setNewThoughtContent("");
-      // Refresh the feed to show the new post
       fetchFeed();
     } catch (e: unknown) {
       console.error("Failed to post thought:", e);
@@ -91,12 +84,14 @@ export default function Home() {
         </header>
 
         {/* New Thought Form */}
-        <div className="bg-white/70 backdrop-blur-lg rounded-xl shadow-lg p-5 mb-8">
+        <Card className="bg-white/70 backdrop-blur-lg rounded-xl shadow-lg p-5 mb-8">
           <form onSubmit={handleSubmitThought}>
-            <textarea
+            <Textarea
               value={newThoughtContent}
-              onChange={(e) => setNewThoughtContent(e.target.value)}
-              className="w-full h-24 p-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-sky-400 focus:outline-none resize-none transition-shadow"
+              onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+                setNewThoughtContent(e.target.value)
+              }
+              className="resize-none"
               placeholder="What's on your mind?"
               maxLength={128}
             />
@@ -104,25 +99,25 @@ export default function Home() {
               <span className="text-sm text-gray-500">
                 {128 - newThoughtContent.length} characters remaining
               </span>
-              <button
+              <Button
                 type="submit"
-                className="px-6 py-2 bg-sky-500 text-white font-semibold rounded-full shadow-md hover:bg-sky-600 active:scale-95 transition-all duration-150 ease-in-out disabled:bg-gray-400"
+                variant="default"
                 disabled={!newThoughtContent.trim()}
               >
                 Post
-              </button>
+              </Button>
             </div>
           </form>
-        </div>
+        </Card>
 
         {/* Feed Section */}
         <main>
           {isLoading ? (
             <p className="text-center text-gray-600">Loading feed...</p>
           ) : error ? (
-            <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg text-center">
-              <p>{error}</p>
-            </div>
+            <Alert variant="destructive" className="text-center">
+              {error}
+            </Alert>
           ) : thoughts.length === 0 ? (
             <p className="text-center text-gray-600">
               The feed is empty. Follow some users to see their thoughts!
@@ -130,13 +125,12 @@ export default function Home() {
           ) : (
             <div className="space-y-4">
               {thoughts.map((thought) => (
-                <div
+                <Card
                   key={thought.id}
                   className="bg-white/80 backdrop-blur-lg rounded-xl shadow-lg p-4 transition-transform hover:scale-[1.02]"
                 >
-                  <div className="flex items-center mb-2">
+                  <CardHeader className="flex items-center mb-2">
                     <div className="w-10 h-10 rounded-full bg-gradient-to-br from-green-300 to-sky-400 flex items-center justify-center font-bold text-white mr-3">
-                      {/* Placeholder for avatar */}
                       {thought.author_id}
                     </div>
                     <div>
@@ -145,9 +139,13 @@ export default function Home() {
                         {new Date(thought.created_at).toLocaleString()}
                       </p>
                     </div>
-                  </div>
-                  <p className="text-gray-800 break-words">{thought.content}</p>
-                </div>
+                  </CardHeader>
+                  <CardContent>
+                    <p className="text-gray-800 break-words">
+                      {thought.content}
+                    </p>
+                  </CardContent>
+                </Card>
               ))}
             </div>
           )}