User profile page.

[dknoern]

Add a user "profile" page where the user can set name, title, and interests or hobbies. All the user to save these details. Create a nav link to this new page.

[dknoern]

Implementation Plan for User Profile Page

1. Create Database Schema for User Profile

We'll need to store user profile information that isn't provided by Auth0.

model UserProfile {
  id        String   @id @default(cuid())
  userId    String   @unique
  name      String?
  title     String?
  interests String?
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

2. Create API Endpoint for User Profile

Create an API route to handle profile data operations:

• Location: /app/api/profile/route.ts
• Functionality:
  • GET: Retrieve user profile
  • PUT: Update user profile

3. Create User Profile Page

Create a new profile page under the dashboard:

• Location: /app/dashboard/profile/page.tsx
• Features:
  • Form with fields for name, title, and interests
  • Save button to update profile information
  • Clean, document-like layout per user preferences

4. Create Profile Form Component

• Location: /components/profile/form.tsx
• Functionality:
  • Input fields for name, title, and interests
  • Form validation
  • Submit handling with API integration
  • Success/error notifications

5. Update Navigation

Add a profile link to the app sidebar:

• Update /components/app-sidebar.tsx:
  • Add a new navigation item for the profile page
  • Use an appropriate Lucide icon
• Update the UserButton dropdown to include a profile link

6. Update User Button Component

Enhance the UserButton component to:

• Display user name if available from profile
• Add a link to the new profile page

7. Mobile Considerations

Ensure the sidebar automatically closes after navigation for mobile users, as per user preferences.

8. Visual Design

Based on user preferences:

• Create a clean, document-like layout
• Use bold text for section headers
• Ensure proper spacing between elements

Implementation Steps

1. Set up database schema extensions
2. Implement the API endpoints for profile management
3. Create the profile form component
4. Build the profile page
5. Update navigation and UserButton components
6. Add appropriate styling
7. Test the profile functionality
8. Deploy the changes