feat: add social features, leaderboard, auth enhancements, and admin fixes

- Implement Social Features: Shared Tasks, Global Access, Privacy Settings (Leaderboard/Searchable).
- Add Leaderboard Page and API.
- Enhance Auth: Support Email/Username login, explicit duplicate registration errors.
- Fix: Admin login password hash regression.
- Refactor: Move to wouter for routing, add Admin Dashboard and User Management.
- Add Setup Wizard.
- Update UI with Sidebar and Gamification elements.

client/src/pages/settings.tsx

@@ -6,10 +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 } from 'lucide-react';
+import { Globe, Tag, Plus, Edit, Trash2, Layers, User as UserIcon, ShieldCheck } from 'lucide-react'; // Added ShieldCheck
 import { Label } from '@shared/schema';
+import { User } from '@shared/schema';
 import { queryClient, apiRequest } from '@/lib/queryClient';
 import { useToast } from '@/hooks/use-toast';
+import { useLocation } from "wouter";
 
 interface SettingsProps {
   onNavigateToTemplates: () => void;
@@ -18,16 +20,37 @@ interface SettingsProps {
 export default function Settings({ onNavigateToTemplates }: SettingsProps) {
   const { t, i18n } = useTranslation();
   const { toast } = useToast();
-  
+  const [, setLocation] = useLocation();
+
+  // Fetch user
+  const { data: user } = useQuery<User>({
+    queryKey: ['/api/user']
+  });
+
   const [isLabelDialogOpen, setIsLabelDialogOpen] = useState(false);
   const [editingLabel, setEditingLabel] = useState<Label | null>(null);
   const [labelName, setLabelName] = useState('');
   const [labelColor, setLabelColor] = useState('#3B82F6');
 
-  const changeLanguage = (lng: string) => {
-    i18n.changeLanguage(lng);
-    localStorage.setItem('taskflow-language', lng);
-    console.log('Language changed to:', lng);
+  const handleLanguageChange = (value: string) => {
+    i18n.changeLanguage(value);
+    localStorage.setItem('taskflow-language', value);
+    console.log('Language changed to:', value);
+  };
+
+  const privacyMutation = useMutation({
+    mutationFn: async (updates: { showOnLeaderboard?: boolean; isSearchable?: boolean }) => {
+      const res = await apiRequest("PATCH", "/api/user/privacy", updates);
+      return res.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["/api/user"] });
+      toast({ title: "Privacy settings updated" });
+    },
+  });
+
+  const handlePrivacyUpdate = (updates: { showOnLeaderboard?: boolean; isSearchable?: boolean }) => {
+    privacyMutation.mutate(updates);
   };
 
   // Fetch labels
@@ -115,6 +138,49 @@ export default function Settings({ onNavigateToTemplates }: SettingsProps) {
         </h1>
       </div>
 
+      {/* Account Settings */}
+      <Card data-testid="card-account-settings">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <UserIcon className="w-5 h-5" />
+            Account
+          </CardTitle>
+          <CardDescription>
+            Manage your account settings
+          </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>
+          </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>
+        </CardContent>
+      </Card>
+
+      {/* Admin Settings */}
+      {user?.role === 'admin' && (
+        <Card className="border-primary/50 bg-primary/5">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <ShieldCheck className="w-5 h-5 text-primary" />
+              Administration
+            </CardTitle>
+            <CardDescription>
+              System-wide settings and user management
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Button onClick={() => setLocation("/admin/users")} className="w-full sm:w-auto">
+              Manage Users & Registration
+            </Button>
+          </CardContent>
+        </Card>
+      )}
+
       {/* Language Settings */}
       <Card data-testid="card-language-settings">
         <CardHeader>
@@ -197,8 +263,8 @@ export default function Settings({ onNavigateToTemplates }: SettingsProps) {
                     </div>
                   </div>
                   <div className="flex gap-3 pt-2">
-                    <Button 
-                      variant="outline" 
+                    <Button
+                      variant="outline"
                       onClick={() => {
                         setIsLabelDialogOpen(false);
                         setEditingLabel(null);
@@ -210,7 +276,7 @@ export default function Settings({ onNavigateToTemplates }: SettingsProps) {
                     >
                       {t('settings.labels.cancel')}
                     </Button>
-                    <Button 
+                    <Button
                       onClick={handleSaveLabel}
                       disabled={!labelName.trim() || createLabelMutation.isPending || updateLabelMutation.isPending}
                       className="flex-1"
@@ -232,15 +298,15 @@ export default function Settings({ onNavigateToTemplates }: SettingsProps) {
           ) : (
             <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
               {labels.map((label) => (
-                <Card 
-                  key={label.id} 
-                  className="p-4 hover-elevate active-elevate-2" 
+                <Card
+                  key={label.id}
+                  className="p-4 hover-elevate active-elevate-2"
                   style={{ borderLeft: `4px solid ${label.color}` }}
                   data-testid={`label-${label.id}`}
                 >
                   <div className="flex items-center justify-between">
                     <div className="flex items-center gap-3">
-                      <div 
+                      <div
                         className="w-4 h-4 rounded"
                         style={{ backgroundColor: label.color }}
                       />
@@ -305,7 +371,7 @@ export default function Settings({ onNavigateToTemplates }: SettingsProps) {
           </CardDescription>
         </CardHeader>
         <CardContent>
-          <Button 
+          <Button
             onClick={onNavigateToTemplates}
             data-testid="button-manage-templates"
           >