Update user profile settings and creator directory features

Refactors API base URL handling, modifies toast notification parameters from `message` to `description`, and introduces new UI components and logic for managing realm preferences in the Dashboard and creating creator profiles in the Creator Directory.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 9203795e-937a-4306-b81d-b4d5c78c240e
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Event-Id: d2c019e3-5d76-487b-9be0-1ca441f25a69
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/7c94b7a0-29c7-4f2e-94ef-44b2153872b7/9203795e-937a-4306-b81d-b4d5c78c240e/cjJvaG9
Replit-Helium-Checkpoint-Created: true

.replit

@@ -61,7 +61,7 @@ localPort = 40437
 externalPort = 3001
 
 [[ports]]
-localPort = 44257
+localPort = 43879
 externalPort = 3002
 
 [deployment]

client/api/creators.ts

@@ -51,7 +51,7 @@ export interface CreatorsResponse {
   };
 }
 
-const getApiBase = () =>
+const API_BASE =
   typeof window !== "undefined" ? window.location.origin : "";
 
 export async function getCreators(filters?: {
@@ -169,9 +169,7 @@ export async function endorseSkill(
   creatorId: string,
   skill: string,
 ): Promise<void> {
-  const apiBase = getApiBase();
+  const response = await fetch(`${API_BASE}/api/creators/${creatorId}/endorse`, {
-  if (!apiBase) throw new Error("No API base available");
-  const response = await fetch(`${apiBase}/api/creators/${creatorId}/endorse`, {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify({ skill }),

client/pages/Dashboard.tsx

@@ -180,6 +180,10 @@ export default function Dashboard() {
   const [twitter, setTwitter] = useState("");
   const [savingProfile, setSavingProfile] = useState(false);
   const [profileLinkCopied, setProfileLinkCopied] = useState(false);
+  const [selectedRealm, setSelectedRealm] = useState<RealmKey | null>(null);
+  const [selectedExperience, setSelectedExperience] = useState("intermediate");
+  const [realmHasChanges, setRealmHasChanges] = useState(false);
+  const [savingRealm, setSavingRealm] = useState(false);
 
   useEffect(() => {
     if (profile) {
@@ -189,9 +193,47 @@ export default function Dashboard() {
       setLinkedin(profile.linkedin_url || "");
       setGithub(profile.github_url || "");
       setTwitter(profile.twitter_url || "");
+      setSelectedRealm((profile as any).primary_realm || null);
+      setSelectedExperience((profile as any).experience_level || "intermediate");
     }
   }, [profile]);
 
+  const handleRealmChange = (realm: RealmKey) => {
+    setSelectedRealm(realm);
+    setRealmHasChanges(true);
+  };
+
+  const handleExperienceChange = (value: string) => {
+    setSelectedExperience(value);
+    setRealmHasChanges(true);
+  };
+
+  const handleSaveRealm = async () => {
+    if (!user || !selectedRealm) return;
+    setSavingRealm(true);
+    try {
+      const { error } = await (window as any).supabaseClient
+        .from("user_profiles")
+        .update({
+          primary_realm: selectedRealm,
+          experience_level: selectedExperience,
+        })
+        .eq("id", user.id);
+
+      if (error) throw error;
+      aethexToast.success({
+        description: "Realm preference saved!",
+      });
+      setRealmHasChanges(false);
+    } catch (error: any) {
+      aethexToast.error({
+        description: error?.message || "Failed to save realm preference",
+      });
+    } finally {
+      setSavingRealm(false);
+    }
+  };
+
   const handleSaveProfile = async () => {
     if (!user) return;
     setSavingProfile(true);
@@ -209,14 +251,12 @@ export default function Dashboard() {
         .eq("id", user.id);
 
       if (error) throw error;
-      aethexToast({
+      aethexToast.success({
-        message: "Profile updated successfully!",
+        description: "Profile updated successfully!",
-        type: "success",
       });
     } catch (error: any) {
-      aethexToast({
+      aethexToast.error({
-        message: error?.message || "Failed to update profile",
+        description: error?.message || "Failed to update profile",
-        type: "error",
       });
     } finally {
       setSavingProfile(false);
@@ -607,35 +647,111 @@ export default function Dashboard() {
 
             {/* Settings Tab */}
             <TabsContent value="settings" className="space-y-6 animate-fade-in">
+              {/* Realm Preference - Full Width */}
+              <Card className="bg-gradient-to-br from-purple-950/40 to-purple-900/20 border-purple-500/20">
+                <CardHeader>
+                  <CardTitle>Realm & Experience</CardTitle>
+                  <CardDescription>
+                    Choose your primary area of focus and experience level
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <RealmSwitcher
+                    selectedRealm={selectedRealm}
+                    onRealmChange={handleRealmChange}
+                    selectedExperience={selectedExperience}
+                    onExperienceChange={handleExperienceChange}
+                    hasChanges={realmHasChanges}
+                    onSave={handleSaveRealm}
+                    saving={savingRealm}
+                  />
+                </CardContent>
+              </Card>
+
               <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-                {/* Realm Preference */}
+                {/* Notifications */}
                 <Card className="bg-gradient-to-br from-purple-950/40 to-purple-900/20 border-purple-500/20">
                   <CardHeader>
-                    <CardTitle>Primary Realm</CardTitle>
+                    <CardTitle className="flex items-center gap-2">
+                      <Bell className="h-5 w-5" />
+                      Notifications
+                    </CardTitle>
                     <CardDescription>
-                      Choose your primary area of focus
+                      Manage your notification preferences
                     </CardDescription>
                   </CardHeader>
-                  <CardContent>
+                  <CardContent className="space-y-4">
-                    <RealmSwitcher />
+                    <div className="flex items-center justify-between py-2 border-b border-purple-500/10">
+                      <div>
+                        <p className="text-sm font-medium text-white">Email Notifications</p>
+                        <p className="text-xs text-gray-400">Receive updates via email</p>
+                      </div>
+                      <Badge variant="outline" className="text-purple-300 border-purple-500/30">Coming Soon</Badge>
+                    </div>
+                    <div className="flex items-center justify-between py-2 border-b border-purple-500/10">
+                      <div>
+                        <p className="text-sm font-medium text-white">Community Updates</p>
+                        <p className="text-xs text-gray-400">New posts and mentions</p>
+                      </div>
+                      <Badge variant="outline" className="text-purple-300 border-purple-500/30">Coming Soon</Badge>
+                    </div>
+                    <div className="flex items-center justify-between py-2">
+                      <div>
+                        <p className="text-sm font-medium text-white">Project Alerts</p>
+                        <p className="text-xs text-gray-400">Updates on your projects</p>
+                      </div>
+                      <Badge variant="outline" className="text-purple-300 border-purple-500/30">Coming Soon</Badge>
+                    </div>
                   </CardContent>
                 </Card>
 
                 {/* Account Actions */}
                 <Card className="bg-gradient-to-br from-red-950/40 to-red-900/20 border-red-500/20">
                   <CardHeader>
-                    <CardTitle>Account Actions</CardTitle>
+                    <CardTitle className="flex items-center gap-2">
-                    <CardDescription>Manage your account</CardDescription>
+                      <Settings className="h-5 w-5" />
+                      Account Actions
+                    </CardTitle>
+                    <CardDescription>Manage your account settings</CardDescription>
                   </CardHeader>
                   <CardContent className="space-y-3">
                     <Button
                       variant="outline"
-                      className="w-full justify-start gap-2 border-red-500/30 text-red-300 hover:bg-red-500/10 h-auto py-2"
+                      className="w-full justify-start gap-2 border-purple-500/30 text-purple-300 hover:bg-purple-500/10 h-auto py-3"
-                      onClick={() => signOut()}
+                      onClick={() => navigate("/creators")}
                     >
-                      <LogOut className="h-4 w-4" />
+                      <Users className="h-4 w-4" />
-                      Sign Out
+                      <div className="text-left">
+                        <p className="font-medium">Creator Profile</p>
+                        <p className="text-xs text-gray-400">Join the creator network</p>
+                      </div>
                     </Button>
+                    <Button
+                      variant="outline"
+                      className="w-full justify-start gap-2 border-purple-500/30 text-purple-300 hover:bg-purple-500/10 h-auto py-3"
+                      asChild
+                    >
+                      <Link to="/community">
+                        <Activity className="h-4 w-4" />
+                        <div className="text-left">
+                          <p className="font-medium">Community</p>
+                          <p className="text-xs text-gray-400">Join discussions and connect</p>
+                        </div>
+                      </Link>
+                    </Button>
+                    <div className="pt-3 border-t border-red-500/20">
+                      <Button
+                        variant="outline"
+                        className="w-full justify-start gap-2 border-red-500/30 text-red-300 hover:bg-red-500/10 h-auto py-3"
+                        onClick={() => signOut()}
+                      >
+                        <LogOut className="h-4 w-4" />
+                        <div className="text-left">
+                          <p className="font-medium">Sign Out</p>
+                          <p className="text-xs text-red-400/70">Log out of your account</p>
+                        </div>
+                      </Button>
+                    </div>
                   </CardContent>
                 </Card>
               </div>

client/pages/creators/CreatorDirectory.tsx

@@ -1,15 +1,51 @@
 import { useState, useEffect } from "react";
-import { useSearchParams } from "react-router-dom";
+import { useSearchParams, Link } from "react-router-dom";
 import Layout from "@/components/Layout";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Loader2, Search, Users } from "lucide-react";
+import { Label } from "@/components/ui/label";
-import { getCreators } from "@/api/creators";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Loader2, Search, Users, Plus, Sparkles } from "lucide-react";
+import { getCreators, createCreatorProfile } from "@/api/creators";
 import { CreatorCard } from "@/components/creator-network/CreatorCard";
 import { ArmFilter } from "@/components/creator-network/ArmFilter";
+import { useAuth } from "@/contexts/AuthContext";
+import { aethexToast } from "@/lib/aethex-toast";
 import type { Creator } from "@/api/creators";
 
+const ARMS = [
+  { value: "labs", label: "Labs - Research & Development" },
+  { value: "gameforge", label: "GameForge - Game Development" },
+  { value: "corp", label: "Corp - Business & Consulting" },
+  { value: "foundation", label: "Foundation - Education" },
+  { value: "devlink", label: "Dev-Link - Developer Network" },
+  { value: "nexus", label: "Nexus - Talent Marketplace" },
+];
+
+const EXPERIENCE_LEVELS = [
+  { value: "beginner", label: "Beginner (0-1 years)" },
+  { value: "intermediate", label: "Intermediate (1-3 years)" },
+  { value: "advanced", label: "Advanced (3-5 years)" },
+  { value: "expert", label: "Expert (5+ years)" },
+];
+
 export default function CreatorDirectory() {
+  const { user, profile } = useAuth();
   const [searchParams, setSearchParams] = useSearchParams();
   const [creators, setCreators] = useState<Creator[]>([]);
   const [isLoading, setIsLoading] = useState(true);
@@ -20,33 +56,52 @@ export default function CreatorDirectory() {
   const [page, setPage] = useState(parseInt(searchParams.get("page") || "1"));
   const [totalPages, setTotalPages] = useState(0);
 
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [formData, setFormData] = useState({
+    username: "",
+    bio: "",
+    skills: "",
+    primary_arm: "",
+    experience_level: "",
+  });
+
   useEffect(() => {
-    const fetchCreators = async () => {
+    if (profile) {
-      setIsLoading(true);
+      setFormData((prev) => ({
-      try {
+        ...prev,
-        const result = await getCreators({
+        username: profile.username || "",
-          arm: selectedArm,
+        bio: profile.bio || "",
-          search: search || undefined,
+      }));
-          page,
+    }
-          limit: 12,
+  }, [profile]);
-        });
-        setCreators(result.data);
-        setTotalPages(result.pagination.pages);
 
-        // Update URL params
+  const fetchCreators = async () => {
-        const params = new URLSearchParams();
+    setIsLoading(true);
-        if (selectedArm) params.set("arm", selectedArm);
+    try {
-        if (search) params.set("search", search);
+      const result = await getCreators({
-        if (page > 1) params.set("page", String(page));
+        arm: selectedArm,
-        setSearchParams(params);
+        search: search || undefined,
-      } catch (error) {
+        page,
-        console.error("Failed to fetch creators:", error);
+        limit: 12,
-        setCreators([]);
+      });
-      } finally {
+      setCreators(result.data);
-        setIsLoading(false);
+      setTotalPages(result.pagination.pages);
-      }
-    };
 
+      const params = new URLSearchParams();
+      if (selectedArm) params.set("arm", selectedArm);
+      if (search) params.set("search", search);
+      if (page > 1) params.set("page", String(page));
+      setSearchParams(params);
+    } catch (error) {
+      console.error("Failed to fetch creators:", error);
+      setCreators([]);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
     fetchCreators();
   }, [selectedArm, search, page, setSearchParams]);
 
@@ -60,10 +115,47 @@ export default function CreatorDirectory() {
     setPage(1);
   };
 
+  const handleSubmitCreator = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!user) {
+      aethexToast.error({ description: "Please sign in to register as a creator" });
+      return;
+    }
+
+    if (!formData.username || !formData.bio || !formData.primary_arm) {
+      aethexToast.error({ description: "Please fill in all required fields" });
+      return;
+    }
+
+    setIsSubmitting(true);
+    try {
+      await createCreatorProfile({
+        username: formData.username,
+        bio: formData.bio,
+        skills: formData.skills
+          .split(",")
+          .map((s) => s.trim())
+          .filter(Boolean),
+        avatar_url: profile?.avatar_url || "",
+        experience_level: formData.experience_level || "beginner",
+        primary_arm: formData.primary_arm,
+        arm_affiliations: [formData.primary_arm],
+      });
+
+      aethexToast.success({ description: "You're now a creator! Welcome to the network." });
+      setIsDialogOpen(false);
+      fetchCreators();
+    } catch (error: any) {
+      console.error("Failed to create creator profile:", error);
+      aethexToast.error({ description: error?.message || "Failed to create creator profile" });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
   return (
     <Layout>
       <div className="relative min-h-screen bg-black text-white overflow-hidden">
-        {/* Background */}
         <div className="pointer-events-none absolute inset-0 opacity-[0.12] [background-image:radial-gradient(circle_at_top,#8b5cf6_0,rgba(0,0,0,0.45)_55%,rgba(0,0,0,0.9)_100%)]" />
         <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(transparent_0,transparent_calc(100%-1px),rgba(139,92,246,0.05)_calc(100%-1px))] bg-[length:100%_32px]" />
         <div className="pointer-events-none absolute inset-0 opacity-[0.08] [background-image:linear-gradient(90deg,rgba(139,92,246,0.1)_1px,transparent_1px),linear-gradient(0deg,rgba(139,92,246,0.1)_1px,transparent_1px)] [background-size:50px_50px] animate-pulse" />
@@ -71,7 +163,6 @@ export default function CreatorDirectory() {
         <div className="pointer-events-none absolute bottom-20 right-10 w-72 h-72 bg-purple-600/10 rounded-full blur-3xl animate-blob animation-delay-2000" />
 
         <main className="relative z-10">
-          {/* Hero Section */}
           <section className="py-12 lg:py-20 border-b border-slate-800">
             <div className="container mx-auto max-w-6xl px-4">
               <div className="text-center mb-8">
@@ -81,13 +172,165 @@ export default function CreatorDirectory() {
                     Creator Directory
                   </h1>
                 </div>
-                <p className="text-lg text-gray-300 max-w-2xl mx-auto">
+                <p className="text-lg text-gray-300 max-w-2xl mx-auto mb-6">
                   Discover talented creators across all AeThex arms. Filter by
                   specialty, skills, and arm affiliation.
                 </p>
+
+                {user ? (
+                  <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+                    <DialogTrigger asChild>
+                      <Button className="bg-purple-600 hover:bg-purple-700">
+                        <Sparkles className="h-4 w-4 mr-2" />
+                        Become a Creator
+                      </Button>
+                    </DialogTrigger>
+                    <DialogContent className="bg-slate-900 border-slate-700 text-white max-w-lg">
+                      <DialogHeader>
+                        <DialogTitle className="text-xl">
+                          Join the Creator Network
+                        </DialogTitle>
+                        <DialogDescription className="text-gray-400">
+                          Register as a creator to showcase your work and
+                          connect with other builders.
+                        </DialogDescription>
+                      </DialogHeader>
+                      <form
+                        onSubmit={handleSubmitCreator}
+                        className="space-y-4 mt-4"
+                      >
+                        <div className="space-y-2">
+                          <Label htmlFor="username">Username *</Label>
+                          <Input
+                            id="username"
+                            value={formData.username}
+                            onChange={(e) =>
+                              setFormData({
+                                ...formData,
+                                username: e.target.value,
+                              })
+                            }
+                            placeholder="Your unique username"
+                            className="bg-slate-800 border-slate-600"
+                            required
+                          />
+                        </div>
+                        <div className="space-y-2">
+                          <Label htmlFor="bio">Bio *</Label>
+                          <Textarea
+                            id="bio"
+                            value={formData.bio}
+                            onChange={(e) =>
+                              setFormData({ ...formData, bio: e.target.value })
+                            }
+                            placeholder="Tell us about yourself and what you create..."
+                            className="bg-slate-800 border-slate-600 min-h-[100px]"
+                            required
+                          />
+                        </div>
+                        <div className="space-y-2">
+                          <Label htmlFor="skills">
+                            Skills (comma-separated)
+                          </Label>
+                          <Input
+                            id="skills"
+                            value={formData.skills}
+                            onChange={(e) =>
+                              setFormData({
+                                ...formData,
+                                skills: e.target.value,
+                              })
+                            }
+                            placeholder="React, TypeScript, Game Design..."
+                            className="bg-slate-800 border-slate-600"
+                          />
+                        </div>
+                        <div className="space-y-2">
+                          <Label htmlFor="primary_arm">Primary Arm *</Label>
+                          <Select
+                            value={formData.primary_arm}
+                            onValueChange={(value) =>
+                              setFormData({ ...formData, primary_arm: value })
+                            }
+                          >
+                            <SelectTrigger className="bg-slate-800 border-slate-600">
+                              <SelectValue placeholder="Select your primary arm" />
+                            </SelectTrigger>
+                            <SelectContent className="bg-slate-800 border-slate-600">
+                              {ARMS.map((arm) => (
+                                <SelectItem key={arm.value} value={arm.value}>
+                                  {arm.label}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        </div>
+                        <div className="space-y-2">
+                          <Label htmlFor="experience">Experience Level</Label>
+                          <Select
+                            value={formData.experience_level}
+                            onValueChange={(value) =>
+                              setFormData({
+                                ...formData,
+                                experience_level: value,
+                              })
+                            }
+                          >
+                            <SelectTrigger className="bg-slate-800 border-slate-600">
+                              <SelectValue placeholder="Select experience level" />
+                            </SelectTrigger>
+                            <SelectContent className="bg-slate-800 border-slate-600">
+                              {EXPERIENCE_LEVELS.map((level) => (
+                                <SelectItem
+                                  key={level.value}
+                                  value={level.value}
+                                >
+                                  {level.label}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        </div>
+                        <div className="flex gap-3 pt-4">
+                          <Button
+                            type="button"
+                            variant="outline"
+                            onClick={() => setIsDialogOpen(false)}
+                            className="flex-1"
+                          >
+                            Cancel
+                          </Button>
+                          <Button
+                            type="submit"
+                            disabled={isSubmitting}
+                            className="flex-1 bg-purple-600 hover:bg-purple-700"
+                          >
+                            {isSubmitting ? (
+                              <>
+                                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                                Creating...
+                              </>
+                            ) : (
+                              <>
+                                <Plus className="h-4 w-4 mr-2" />
+                                Join Network
+                              </>
+                            )}
+                          </Button>
+                        </div>
+                      </form>
+                    </DialogContent>
+                  </Dialog>
+                ) : (
+                  <Link to="/auth">
+                    <Button className="bg-purple-600 hover:bg-purple-700">
+                      <Sparkles className="h-4 w-4 mr-2" />
+                      Sign in to Become a Creator
+                    </Button>
+                  </Link>
+                )}
               </div>
 
-              {/* Search Bar */}
               <form onSubmit={handleSearch} className="max-w-2xl mx-auto">
                 <div className="relative">
                   <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
@@ -108,11 +351,9 @@ export default function CreatorDirectory() {
             </div>
           </section>
 
-          {/* Main Content */}
           <section className="py-12 lg:py-20">
             <div className="container mx-auto max-w-7xl px-4">
               <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
-                {/* Filters Sidebar */}
                 <div className="lg:col-span-1">
                   <div className="sticky top-24 space-y-4">
                     <ArmFilter
@@ -122,7 +363,6 @@ export default function CreatorDirectory() {
                   </div>
                 </div>
 
-                {/* Creators Grid */}
                 <div className="lg:col-span-3">
                   {isLoading ? (
                     <div className="flex items-center justify-center py-20">
@@ -135,18 +375,23 @@ export default function CreatorDirectory() {
                         No creators found
                       </h3>
                       <p className="text-gray-500 mb-6">
-                        Try adjusting your filters or search terms
+                        Be the first to join the creator network!
                       </p>
-                      <Button
+                      {user ? (
-                        onClick={() => {
+                        <Button
-                          setSearch("");
+                          onClick={() => setIsDialogOpen(true)}
-                          setSelectedArm(undefined);
+                          className="bg-purple-600 hover:bg-purple-700"
-                          setPage(1);
+                        >
-                        }}
+                          <Sparkles className="h-4 w-4 mr-2" />
-                        variant="outline"
+                          Become a Creator
-                      >
+                        </Button>
-                        Clear Filters
+                      ) : (
-                      </Button>
+                        <Link to="/auth">
+                          <Button className="bg-purple-600 hover:bg-purple-700">
+                            Sign in to Join
+                          </Button>
+                        </Link>
+                      )}
                     </div>
                   ) : (
                     <>
@@ -156,7 +401,6 @@ export default function CreatorDirectory() {
                         ))}
                       </div>
 
-                      {/* Pagination */}
                       {totalPages > 1 && (
                         <div className="flex items-center justify-center gap-2 mt-8">
                           <Button