feat(profile): Add social and academic profile section

client/package.json

@@ -35,12 +35,13 @@
     "@radix-ui/react-slider": "^1.3.5",
     "@radix-ui/react-slot": "^1.1.1",
     "@radix-ui/react-tabs": "^1.1.0",
+    "@radix-ui/react-toast": "^1.2.15",
     "@radix-ui/react-toggle": "^1.1.2",
     "@radix-ui/react-toggle-group": "^1.1.2",
     "@radix-ui/react-tooltip": "^1.1.7",
     "@react-oauth/google": "^0.12.1",
     "@tanstack/react-form": "^0.41.3",
-    "@tanstack/react-query": "4",
+    "@tanstack/react-query": "^5.87.1",
     "@tanstack/react-table": "^8.21.2",
     "@uiw/react-md-editor": "^4.0.7",
     "autoprefixer": "^10.4.20",
@@ -58,6 +59,7 @@
     "lib": "workspace:*",
     "lucide-react": "^0.441.0",
     "mustache": "^4.2.0",
+    "next-themes": "^0.4.6",
     "postcss": "^8.4.45",
     "react": "^18.3.1",
     "react-day-picker": "8.10.1",
@@ -82,8 +84,8 @@
     "@types/human-date": "^1.4.5",
     "@types/mustache": "^4.2.6",
     "@types/node": "^22.5.4",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "eslint": "^9.18.0",
     "eslint-config-prettier": "^9.1.0",
@@ -98,7 +100,7 @@
     "prettier": "3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.6",
     "terser": "^5.43.1",
-    "typescript": "^5.5.3",
+    "typescript": "^5.8.2",
     "typescript-eslint": "^8.0.1",
     "vite": "^5.4.1"
   }

client/src/components/Providers.tsx

@@ -3,7 +3,8 @@ import { GOOGLE_CLIENT_ID } from "@/lib/constants";
 import { GoogleOAuthProvider } from "@react-oauth/google";
 import { AuthProvider } from "@/hooks/Auth";
 import { SidebarProvider } from "@/components/ui/sidebar";
-import { Toaster } from "@/components/ui/sonner";
+import { Toaster } from "@/components/ui/toaster";
+import { ThemeProvider } from "next-themes";
 
 const queryClient = new QueryClient();
 
@@ -12,8 +13,10 @@ const Providers = ({ children }: { children: React.ReactNode }) => {
     <QueryClientProvider client={queryClient}>
       <GoogleOAuthProvider clientId={GOOGLE_CLIENT_ID}>
         <AuthProvider>
-          <SidebarProvider>{children}</SidebarProvider>
-          <Toaster />
+          <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+            <SidebarProvider>{children}</SidebarProvider>
+            <Toaster />
+          </ThemeProvider>
         </AuthProvider>
       </GoogleOAuthProvider>
     </QueryClientProvider>

client/src/components/profile/CourseCard.tsx

@@ -0,0 +1,25 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+interface CourseCardProps {
+  title: string;
+  description: string;
+  onClick?: () => void;
+}
+
+const CourseCard = ({ title, description, onClick }: CourseCardProps) => {
+  return (
+    <Card 
+      className="cursor-pointer hover:shadow-md transition-shadow duration-200"
+      onClick={onClick}
+    >
+      <CardHeader>
+        <CardTitle className="text-lg font-semibold">{title}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <p className="text-sm text-gray-600 line-clamp-3">{description}</p>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default CourseCard;

client/src/components/profile/PatentCard.tsx

@@ -0,0 +1,25 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+interface PatentCardProps {
+  title: string;
+  description: string;
+  onClick?: () => void;
+}
+
+const PatentCard = ({ title, description, onClick }: PatentCardProps) => {
+  return (
+    <Card 
+      className="cursor-pointer hover:shadow-md transition-shadow duration-200"
+      onClick={onClick}
+    >
+      <CardHeader>
+        <CardTitle className="text-lg font-semibold">{title}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <p className="text-sm text-gray-600 line-clamp-3">{description}</p>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default PatentCard;

client/src/components/profile/ProjectCard.tsx

@@ -0,0 +1,25 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+interface ProjectCardProps {
+  title: string;
+  description: string;
+  onClick?: () => void;
+}
+
+const ProjectCard = ({ title, description, onClick }: ProjectCardProps) => {
+  return (
+    <Card 
+      className="cursor-pointer hover:shadow-md transition-shadow duration-200"
+      onClick={onClick}
+    >
+      <CardHeader>
+        <CardTitle className="text-lg font-semibold">{title}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <p className="text-sm text-gray-600 line-clamp-3">{description}</p>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default ProjectCard;