footer+responsivenes

src/app/(app)/layout.tsx

@@ -1,12 +1,20 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import Link from 'next/link';
 import { usePathname, useRouter } from 'next/navigation';
 import { Button } from '@/components/ui/Button';
 import { Dropdown, DropdownItem } from '@/components/ui/Dropdown';
+import { Footer } from '@/components/ui/Footer';
 import { useTranslation } from '@/hooks/useTranslation';
 
+interface User {
+  id: string;
+  name: string | null;
+  email: string;
+  plan: string | null;
+}
+
 export default function AppLayout({
   children,
 }: {
@@ -16,6 +24,24 @@ export default function AppLayout({
   const router = useRouter();
   const { t } = useTranslation();
   const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [user, setUser] = useState<User | null>(null);
+
+  // Fetch user data on mount
+  useEffect(() => {
+    const fetchUser = async () => {
+      try {
+        const response = await fetch('/api/user');
+        if (response.ok) {
+          const userData = await response.json();
+          setUser(userData);
+        }
+      } catch (error) {
+        console.error('Error fetching user:', error);
+      }
+    };
+
+    fetchUser();
+  }, []);
 
   const handleSignOut = async () => {
     // Track logout event before clearing data
@@ -37,6 +63,34 @@ export default function AppLayout({
     router.push('/');
   };
 
+  // Get user initials for avatar (e.g., "Timo Schmidt" -> "TS")
+  const getUserInitials = () => {
+    if (!user) return 'U';
+
+    if (user.name) {
+      const names = user.name.trim().split(' ');
+      if (names.length >= 2) {
+        return (names[0][0] + names[names.length - 1][0]).toUpperCase();
+      }
+      return user.name.substring(0, 2).toUpperCase();
+    }
+
+    // Fallback to email
+    return user.email.substring(0, 1).toUpperCase();
+  };
+
+  // Get display name (first name or full name)
+  const getDisplayName = () => {
+    if (!user) return 'User';
+
+    if (user.name) {
+      return user.name;
+    }
+
+    // Fallback to email without domain
+    return user.email.split('@')[0];
+  };
+
   const navigation = [
     {
       name: t('nav.dashboard'),
@@ -169,11 +223,11 @@ export default function AppLayout({
                   <button className="flex items-center space-x-2 text-gray-700 hover:text-gray-900">
                     <div className="w-8 h-8 bg-primary-100 rounded-full flex items-center justify-center">
                       <span className="text-sm font-medium text-primary-600">
-                        U
+                        {getUserInitials()}
                       </span>
                     </div>
                     <span className="hidden md:block font-medium">
-                      User
+                      {getDisplayName()}
                     </span>
                     <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
@@ -193,6 +247,9 @@ export default function AppLayout({
         <main className="p-6">
           {children}
         </main>
+
+        {/* Footer */}
+        <Footer />
       </div>
     </div>
   );