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/users/[username]/loading.tsx

@@ -0,0 +1,30 @@
+// app/users/[username]/loading.tsx
+import { Card } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
+// This is the ProfileSkeleton component from the previous step.
+// Next.js will automatically render this while page.tsx is loading.
+export default function ProfileLoading() {
+  return (
+    <div>
+      <Skeleton className="h-48 w-full" />
+      <main className="container mx-auto max-w-3xl p-4 -mt-16">
+        <Card className="p-6">
+          <div className="flex items-end gap-4">
+            <Skeleton className="h-24 w-24 rounded-full" />
+            <div className="space-y-2">
+              <Skeleton className="h-8 w-40" />
+              <Skeleton className="h-4 w-24" />
+            </div>
+          </div>
+          <Skeleton className="h-6 w-full mt-4" />
+          <Skeleton className="h-6 w-3/4 mt-2" />
+        </Card>
+        <div className="mt-8 space-y-4">
+          <Skeleton className="h-32 w-full" />
+          <Skeleton className="h-32 w-full" />
+        </div>
+      </main>
+    </div>
+  );
+}