feat: Implement AI Chat Agent, Email Notifications, and UI enhancements

client/src/pages/settings.tsx

@@ -6,7 +6,12 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
-import { Globe, Tag, Plus, Edit, Trash2, Layers, User as UserIcon, ShieldCheck } from 'lucide-react'; // Added ShieldCheck
+import { Globe, Tag, Plus, Edit, Trash2, Layers, User as UserIcon, ShieldCheck, Share2, Server, Copy, Settings as SettingsIcon } from 'lucide-react';
+import { Switch } from '@/components/ui/switch';
+import { ShareAccessModal } from '@/components/ShareAccessModal';
+import { ChangePasswordModal } from '@/components/ChangePasswordModal';
+import { UpdateProfileModal } from '@/components/UpdateProfileModal';
+import { ShareLabelModal } from '@/components/ShareLabelModal';
 import { Label } from '@shared/schema';
 import { User } from '@shared/schema';
 import { queryClient, apiRequest } from '@/lib/queryClient';
@@ -31,6 +36,11 @@ export default function Settings({ onNavigateToTemplates }: SettingsProps) {
   const [editingLabel, setEditingLabel] = useState<Label | null>(null);
   const [labelName, setLabelName] = useState('');
   const [labelColor, setLabelColor] = useState('#3B82F6');
+  const [isShareAccessOpen, setIsShareAccessOpen] = useState(false);
+  const [isShareLabelOpen, setIsShareLabelOpen] = useState(false);
+  const [sharingLabel, setSharingLabel] = useState<Label | null>(null);
+  const [isChangePasswordOpen, setIsChangePasswordOpen] = useState(false);
+  const [isUpdateProfileOpen, setIsUpdateProfileOpen] = useState(false);
 
   const handleLanguageChange = (value: string) => {
     i18n.changeLanguage(value);
@@ -39,17 +49,17 @@ export default function Settings({ onNavigateToTemplates }: SettingsProps) {
   };
 
   const privacyMutation = useMutation({
-    mutationFn: async (updates: { showOnLeaderboard?: boolean; isSearchable?: boolean }) => {
+    mutationFn: async (updates: { showOnLeaderboard?: boolean; isSearchable?: boolean; aiEnabled?: boolean }) => {
       const res = await apiRequest("PATCH", "/api/user/privacy", updates);
       return res.json();
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["/api/user"] });
-      toast({ title: "Privacy settings updated" });
+      toast({ title: "Settings updated" });
     },
   });
 
-  const handlePrivacyUpdate = (updates: { showOnLeaderboard?: boolean; isSearchable?: boolean }) => {
+  const handlePrivacyUpdate = (updates: { showOnLeaderboard?: boolean; isSearchable?: boolean; aiEnabled?: boolean }) => {
     privacyMutation.mutate(updates);
   };
 
@@ -130,6 +140,37 @@ export default function Settings({ onNavigateToTemplates }: SettingsProps) {
     }
   };
 
+  const handleShareLabel = (label: Label) => {
+    setSharingLabel(label);
+    setIsShareLabelOpen(true);
+  };
+
+  const generateApiKeyMutation = useMutation({
+    mutationFn: async () => {
+      const res = await apiRequest("POST", "/api/user/apikey", {});
+      return res.json();
+    },
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({ queryKey: ["/api/user"] });
+      toast({ title: t('settings.mcp.generated') });
+    },
+  });
+
+  const revokeApiKeyMutation = useMutation({
+    mutationFn: async () => {
+      await apiRequest("DELETE", "/api/user/apikey");
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["/api/user"] });
+      toast({ title: t('settings.mcp.revoked') });
+    },
+  });
+
+  const copyToClipboard = (text: string) => {
+    navigator.clipboard.writeText(text);
+    toast({ title: "Copied!" });
+  }
+
   return (
     <div className="space-y-6">
       <div>
@@ -143,20 +184,158 @@ export default function Settings({ onNavigateToTemplates }: SettingsProps) {
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
             <UserIcon className="w-5 h-5" />
-            Account
+            {t('settings.account.title')}
           </CardTitle>
           <CardDescription>
-            Manage your account settings
+            {t('settings.account.description')}
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
           <div className="space-y-1">
-            <p className="text-sm font-medium leading-none">Username</p>
-            <p className="text-sm text-muted-foreground">{user?.username || 'Loading...'}</p>
+            <p className="text-sm font-medium leading-none">{t('settings.account.username')}</p>
+            <p className="text-sm text-muted-foreground">{user?.username || t('common.loading')}</p>
           </div>
-          <div className="space-y-1">
-            <p className="text-sm font-medium leading-none">User ID</p>
-            <p className="text-sm text-muted-foreground font-mono">{user?.id || '...'}</p>
+
+          <div className="space-y-1" data-testid="container-email">
+            <p className="text-sm font-medium leading-none">{t('auth.email')}</p>
+            <div className="flex items-center gap-2">
+              <p className="text-sm text-muted-foreground" data-testid="text-email">{user?.email || 'No email set'}</p>
+              <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => setIsUpdateProfileOpen(true)} data-testid="button-edit-email">
+                <Edit className="h-3 w-3" />
+              </Button>
+            </div>
+          </div>
+
+          {user?.role === 'admin' && (
+            <div className="space-y-1">
+              <p className="text-sm font-medium leading-none">{t('settings.account.userId')}</p>
+              <p className="text-sm text-muted-foreground font-mono">{user?.id || '...'}</p>
+            </div>
+          )}
+
+          <div className="pt-2">
+            <Button variant="outline" onClick={() => setIsChangePasswordOpen(true)} data-testid="button-change-password">
+              {t('auth.changePassword')}
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      {user && (
+        <>
+          <UpdateProfileModal open={isUpdateProfileOpen} onOpenChange={setIsUpdateProfileOpen} user={user} />
+          <ChangePasswordModal open={isChangePasswordOpen} onOpenChange={setIsChangePasswordOpen} />
+        </>
+      )}
+
+      {/* Social & Privacy */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <UserIcon className="w-5 h-5" />
+            {t('settings.social.title')}
+          </CardTitle>
+          <CardDescription>
+            {t('settings.social.description')}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div className="space-y-0.5">
+              <p className="font-medium">{t('settings.social.publicLeaderboard')}</p>
+              <p className="text-sm text-muted-foreground">{t('settings.social.publicLeaderboardDesc')}</p>
+            </div>
+            <Switch
+              checked={user?.showOnLeaderboard}
+              onCheckedChange={(checked) => handlePrivacyUpdate({ showOnLeaderboard: checked })}
+            />
+          </div>
+          <div className="flex items-center justify-between">
+            <div className="space-y-0.5">
+              <p className="font-medium">{t('settings.social.searchable')}</p>
+              <p className="text-sm text-muted-foreground">{t('settings.social.searchableDesc')}</p>
+            </div>
+            <Switch
+              checked={user?.isSearchable}
+              onCheckedChange={(checked) => handlePrivacyUpdate({ isSearchable: checked })}
+            />
+          </div>
+          <div className="flex items-center justify-between">
+            <div className="space-y-0.5">
+              <p className="font-medium">{t('settings.ai.enableUser')}</p>
+              <p className="text-sm text-muted-foreground">{t('settings.ai.enableUserDesc')}</p>
+            </div>
+            <Switch
+              checked={user?.aiEnabled}
+              onCheckedChange={(checked) => handlePrivacyUpdate({ aiEnabled: checked })}
+            />
+          </div>
+          <div className="pt-2">
+            <Button variant="outline" onClick={() => setIsShareAccessOpen(true)}>
+              <Share2 className="w-4 h-4 mr-2" />
+              {t('settings.social.shareAccess')}
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      <ShareAccessModal open={isShareAccessOpen} onOpenChange={setIsShareAccessOpen} />
+
+      {/* MCP Integration */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Server className="w-5 h-5" />
+            {t('settings.mcp.title')}
+          </CardTitle>
+          <CardDescription>{t('settings.mcp.description')}</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div className="space-y-0.5">
+              <p className="font-medium">{t('settings.mcp.status')}</p>
+            </div>
+            <div className="flex items-center gap-2 text-green-500">
+              <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
+              <span className="font-medium">{t('settings.mcp.running')}</span>
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <p className="text-sm font-medium">{t('settings.mcp.url')}</p>
+            <div className="flex gap-2">
+              <Input readOnly value={`${window.location.protocol}//${window.location.host}/api/mcp/sse`} />
+              <Button variant="outline" size="icon" onClick={() => copyToClipboard(`${window.location.protocol}//${window.location.host}/api/mcp/sse`)}>
+                <Copy className="w-4 h-4" />
+              </Button>
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <p className="text-sm font-medium">{t('settings.mcp.apiKey')}</p>
+            {user?.apiKey ? (
+              <div className="flex gap-2">
+                <Input type="password" readOnly value={user.apiKey} />
+                {/* Show full key on click/copy only, usually concealed */}
+                <Button variant="outline" size="icon" onClick={() => copyToClipboard(user.apiKey!)}>
+                  <Copy className="w-4 h-4" />
+                </Button>
+                <Button variant="destructive" onClick={() => revokeApiKeyMutation.mutate()} disabled={revokeApiKeyMutation.isPending}>
+                  {t('settings.mcp.revoke')}
+                </Button>
+              </div>
+            ) : (
+              <div className="space-y-2">
+                <p className="text-sm text-muted-foreground">{t('settings.mcp.noKey')}</p>
+                <Button onClick={() => generateApiKeyMutation.mutate()} disabled={generateApiKeyMutation.isPending}>
+                  {t('settings.mcp.generate')}
+                </Button>
+              </div>
+            )}
+          </div>
+
+          <div className="bg-muted/50 p-3 rounded-lg text-sm text-muted-foreground">
+            {t('settings.mcp.instructions')}
           </div>
         </CardContent>
       </Card>
@@ -167,16 +346,21 @@ export default function Settings({ onNavigateToTemplates }: SettingsProps) {
           <CardHeader>
             <CardTitle className="flex items-center gap-2">
               <ShieldCheck className="w-5 h-5 text-primary" />
-              Administration
+              {t('settings.admin.title')}
             </CardTitle>
             <CardDescription>
-              System-wide settings and user management
+              {t('settings.admin.description')}
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <Button onClick={() => setLocation("/admin/users")} className="w-full sm:w-auto">
-              Manage Users & Registration
-            </Button>
+            <div className="flex flex-col sm:flex-row gap-4">
+              <Button onClick={() => setLocation("/admin/users")} className="w-full sm:w-auto">
+                {t('settings.admin.manageUsers')}
+              </Button>
+              <Button onClick={() => setLocation("/admin/settings")} variant="outline" className="w-full sm:w-auto">
+                {t('settings.admin.smtpSettings')}
+              </Button>
+            </div>
           </CardContent>
         </Card>
       )}
@@ -193,7 +377,7 @@ export default function Settings({ onNavigateToTemplates }: SettingsProps) {
           </CardDescription>
         </CardHeader>
         <CardContent>
-          <Select value={i18n.language} onValueChange={changeLanguage}>
+          <Select value={i18n.language} onValueChange={handleLanguageChange}>
             <SelectTrigger className="w-full sm:w-64" data-testid="select-language">
               <SelectValue />
             </SelectTrigger>
@@ -315,6 +499,17 @@ export default function Settings({ onNavigateToTemplates }: SettingsProps) {
                       </span>
                     </div>
                     <div className="flex items-center gap-1">
+                      {label.creatorId === user?.id && (
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="w-6 h-6 text-muted-foreground hover:text-primary"
+                          onClick={() => handleShareLabel(label)}
+                          title={t('settings.labels.share')}
+                        >
+                          <Share2 className="w-3 h-3" />
+                        </Button>
+                      )}
                       <Button
                         variant="ghost"
                         size="icon"
@@ -359,6 +554,13 @@ export default function Settings({ onNavigateToTemplates }: SettingsProps) {
         </CardContent>
       </Card>
 
+      <ShareLabelModal
+        open={isShareLabelOpen}
+        onOpenChange={setIsShareLabelOpen}
+        label={sharingLabel}
+        currentUser={user}
+      />
+
       {/* Project Templates */}
       <Card data-testid="card-project-templates">
         <CardHeader>
@@ -380,6 +582,31 @@ export default function Settings({ onNavigateToTemplates }: SettingsProps) {
           </Button>
         </CardContent>
       </Card>
-    </div>
+
+      {/* Admin Section */}
+      {
+        user?.role === 'admin' && (
+          <Card className="border-destructive/20 bg-destructive/5">
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2 text-destructive">
+                <ShieldCheck className="w-5 h-5" />
+                {t('settings.admin.title')}
+              </CardTitle>
+              <CardDescription>{t('settings.admin.description')}</CardDescription>
+            </CardHeader>
+            <CardContent className="flex flex-col sm:flex-row gap-4">
+              <Button variant="outline" onClick={() => setLocation('/admin/users')}>
+                <UserIcon className="w-4 h-4 mr-2" />
+                {t('settings.admin.manageUsers')}
+              </Button>
+              <Button variant="outline" onClick={() => setLocation('/admin/settings')}>
+                <SettingsIcon className="w-4 h-4 mr-2" />
+                {t('settings.ai.title')} / {t('settings.smtp.title')}
+              </Button>
+            </CardContent>
+          </Card>
+        )
+      }
+    </div >
   );
 }