refactor(settings): consolidate user profile into single settings page

Drop the standalone /settings/profile route + user-profile component;
folding the same fields into user-settings means one place to update
and one menu item. UserMenu loses the Profile dropdown entry.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/app/(dashboard)/[portSlug]/settings/profile/page.tsx

@@ -1,5 +0,0 @@
-import { UserProfile } from '@/components/settings/user-profile';
-
-export default function ProfilePage() {
-  return <UserProfile />;
-}

src/components/layout/user-menu.tsx

@@ -3,7 +3,7 @@
 /**
  * Unified user menu - used by the topbar avatar AND the sidebar-footer
  * profile row. Encapsulates:
- *   - Profile / Settings / Notification preferences links
+ *   - Settings / Notification preferences links
  *   - Dark-mode toggle
  *   - Sign out
  *   - Inline port switcher (when the user has access to >1 port)
@@ -15,7 +15,7 @@
 
 import { useRouter } from 'next/navigation';
 import { useQueryClient } from '@tanstack/react-query';
-import { LogOut, User, Settings, Bell, Check, Building2 } from 'lucide-react';
+import { LogOut, Settings, Bell, Check, Building2 } from 'lucide-react';
 import { type ReactNode } from 'react';
 
 import { useUIStore } from '@/stores/ui-store';
@@ -107,11 +107,6 @@ export function UserMenu({ trigger, align = 'end', user, ports }: UserMenuProps)
           </>
         )}
 
-        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
-        <DropdownMenuItem onClick={() => router.push(`${base}/settings/profile` as any)}>
-          <User className="w-4 h-4 mr-2" aria-hidden />
-          Profile
-        </DropdownMenuItem>
         {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
         <DropdownMenuItem onClick={() => router.push(`${base}/settings` as any)}>
           <Settings className="w-4 h-4 mr-2" aria-hidden />

src/components/settings/user-profile.tsx

@@ -1,229 +0,0 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import { Save } from 'lucide-react';
-
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { PageHeader } from '@/components/shared/page-header';
-import { apiFetch } from '@/lib/api/client';
-
-interface MeUser {
-  id?: string;
-  email?: string;
-  name?: string;
-}
-
-export function UserProfile() {
-  const [me, setMe] = useState<MeUser | null>(null);
-  const [displayName, setDisplayName] = useState('');
-  const [savingProfile, setSavingProfile] = useState(false);
-  const [profileMessage, setProfileMessage] = useState<{ kind: 'ok' | 'err'; text: string } | null>(
-    null,
-  );
-
-  const [currentPassword, setCurrentPassword] = useState('');
-  const [newPassword, setNewPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
-  const [revokeOthers, setRevokeOthers] = useState(true);
-  const [savingPassword, setSavingPassword] = useState(false);
-  const [passwordMessage, setPasswordMessage] = useState<{
-    kind: 'ok' | 'err';
-    text: string;
-  } | null>(null);
-
-  useEffect(() => {
-    async function load() {
-      const res = await apiFetch<{ data: { user?: MeUser } }>('/api/v1/me');
-      setMe(res.data.user ?? null);
-      setDisplayName(res.data.user?.name ?? '');
-    }
-    void load();
-  }, []);
-
-  async function saveProfile() {
-    setSavingProfile(true);
-    setProfileMessage(null);
-    try {
-      await apiFetch('/api/v1/me', {
-        method: 'PATCH',
-        body: { displayName: displayName || undefined },
-      });
-      setProfileMessage({ kind: 'ok', text: 'Profile saved' });
-    } catch (err) {
-      setProfileMessage({
-        kind: 'err',
-        text: err instanceof Error ? err.message : 'Failed to save profile',
-      });
-    } finally {
-      setSavingProfile(false);
-    }
-  }
-
-  async function changePassword(e: React.FormEvent) {
-    e.preventDefault();
-    setPasswordMessage(null);
-    if (newPassword.length < 9) {
-      setPasswordMessage({ kind: 'err', text: 'New password must be at least 9 characters' });
-      return;
-    }
-    if (newPassword !== confirmPassword) {
-      setPasswordMessage({ kind: 'err', text: 'New password and confirmation do not match' });
-      return;
-    }
-    setSavingPassword(true);
-    try {
-      await apiFetch('/api/v1/me/password', {
-        method: 'POST',
-        body: { currentPassword, newPassword, revokeOtherSessions: revokeOthers },
-      });
-      setCurrentPassword('');
-      setNewPassword('');
-      setConfirmPassword('');
-      setPasswordMessage({
-        kind: 'ok',
-        text: revokeOthers
-          ? 'Password changed. Other sessions have been signed out.'
-          : 'Password changed.',
-      });
-    } catch (err) {
-      setPasswordMessage({
-        kind: 'err',
-        text: err instanceof Error ? err.message : 'Failed to change password',
-      });
-    } finally {
-      setSavingPassword(false);
-    }
-  }
-
-  return (
-    <div>
-      <PageHeader title="Profile" description="Your account details and password" />
-
-      <div className="space-y-6 mt-6">
-        <Card>
-          <CardHeader>
-            <CardTitle>Account</CardTitle>
-            <CardDescription>Identity and display preferences for your CRM account</CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div>
-              <Label>Email</Label>
-              <Input value={me?.email ?? ''} readOnly className="mt-1" />
-              <p className="text-xs text-muted-foreground mt-1">
-                Email is your sign-in identifier and cannot be changed here.
-              </p>
-            </div>
-            <div>
-              <Label htmlFor="displayName">Display name</Label>
-              <Input
-                id="displayName"
-                value={displayName}
-                onChange={(e) => setDisplayName(e.target.value)}
-                placeholder="How your name appears in comments, audit log, and emails"
-                className="mt-1"
-              />
-            </div>
-            <div className="flex items-center gap-3">
-              <Button onClick={saveProfile} disabled={savingProfile} size="sm">
-                <Save className="h-3.5 w-3.5 mr-1.5" />
-                Save profile
-              </Button>
-              {profileMessage ? (
-                <span
-                  className={
-                    profileMessage.kind === 'ok' ? 'text-sm text-green-600' : 'text-sm text-red-600'
-                  }
-                >
-                  {profileMessage.text}
-                </span>
-              ) : null}
-            </div>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle>Change password</CardTitle>
-            <CardDescription>
-              Minimum 9 characters. You&rsquo;ll be prompted to sign in again on your other devices
-              if you check the box below.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <form onSubmit={changePassword} className="space-y-4 max-w-md">
-              <div>
-                <Label htmlFor="currentPassword">Current password</Label>
-                <Input
-                  id="currentPassword"
-                  type="password"
-                  autoComplete="current-password"
-                  required
-                  value={currentPassword}
-                  onChange={(e) => setCurrentPassword(e.target.value)}
-                  className="mt-1"
-                />
-              </div>
-              <div>
-                <Label htmlFor="newPassword">New password</Label>
-                <Input
-                  id="newPassword"
-                  type="password"
-                  autoComplete="new-password"
-                  required
-                  minLength={9}
-                  value={newPassword}
-                  onChange={(e) => setNewPassword(e.target.value)}
-                  className="mt-1"
-                />
-              </div>
-              <div>
-                <Label htmlFor="confirmPassword">Confirm new password</Label>
-                <Input
-                  id="confirmPassword"
-                  type="password"
-                  autoComplete="new-password"
-                  required
-                  minLength={9}
-                  value={confirmPassword}
-                  onChange={(e) => setConfirmPassword(e.target.value)}
-                  className="mt-1"
-                />
-              </div>
-              <div className="flex items-center gap-2">
-                <input
-                  id="revokeOthers"
-                  type="checkbox"
-                  checked={revokeOthers}
-                  onChange={(e) => setRevokeOthers(e.target.checked)}
-                  className="h-4 w-4"
-                />
-                <Label htmlFor="revokeOthers" className="text-sm font-normal cursor-pointer">
-                  Sign out of other devices
-                </Label>
-              </div>
-              <div className="flex items-center gap-3">
-                <Button type="submit" disabled={savingPassword} size="sm">
-                  Change password
-                </Button>
-                {passwordMessage ? (
-                  <span
-                    className={
-                      passwordMessage.kind === 'ok'
-                        ? 'text-sm text-green-600'
-                        : 'text-sm text-red-600'
-                    }
-                  >
-                    {passwordMessage.text}
-                  </span>
-                ) : null}
-              </div>
-            </form>
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  );
-}

src/components/settings/user-settings.tsx

@@ -435,6 +435,8 @@ export function UserSettings() {
           </CardContent>
         </Card>
 
+        <ChangePasswordCard />
+
         <section id="notifications" className="space-y-4">
           <div>
             <h2 className="text-lg font-semibold">Notifications</h2>
@@ -459,3 +461,134 @@ export function UserSettings() {
     </div>
   );
 }
+
+/** Direct change-password form (current + new). Lifted from the deprecated
+ *  user-profile.tsx into the unified settings page so we keep both reset-via-
+ *  email and change-in-place flows on a single screen. */
+function ChangePasswordCard() {
+  const [currentPassword, setCurrentPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [revokeOthers, setRevokeOthers] = useState(true);
+  const [savingPassword, setSavingPassword] = useState(false);
+  const [passwordMessage, setPasswordMessage] = useState<{
+    kind: 'ok' | 'err';
+    text: string;
+  } | null>(null);
+
+  async function changePassword(e: React.FormEvent) {
+    e.preventDefault();
+    setPasswordMessage(null);
+    if (newPassword.length < 9) {
+      setPasswordMessage({ kind: 'err', text: 'New password must be at least 9 characters' });
+      return;
+    }
+    if (newPassword !== confirmPassword) {
+      setPasswordMessage({ kind: 'err', text: 'New password and confirmation do not match' });
+      return;
+    }
+    setSavingPassword(true);
+    try {
+      await apiFetch('/api/v1/me/password', {
+        method: 'POST',
+        body: { currentPassword, newPassword, revokeOtherSessions: revokeOthers },
+      });
+      setCurrentPassword('');
+      setNewPassword('');
+      setConfirmPassword('');
+      setPasswordMessage({
+        kind: 'ok',
+        text: revokeOthers
+          ? 'Password changed. Other sessions have been signed out.'
+          : 'Password changed.',
+      });
+    } catch (err) {
+      setPasswordMessage({
+        kind: 'err',
+        text: err instanceof Error ? err.message : 'Failed to change password',
+      });
+    } finally {
+      setSavingPassword(false);
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Change password</CardTitle>
+        <CardDescription>
+          Minimum 9 characters. You&rsquo;ll be prompted to sign in again on your other devices if
+          you check the box below.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={changePassword} className="space-y-4 max-w-md">
+          <div>
+            <Label htmlFor="currentPassword">Current password</Label>
+            <Input
+              id="currentPassword"
+              type="password"
+              autoComplete="current-password"
+              required
+              value={currentPassword}
+              onChange={(e) => setCurrentPassword(e.target.value)}
+              className="mt-1"
+            />
+          </div>
+          <div>
+            <Label htmlFor="newPassword">New password</Label>
+            <Input
+              id="newPassword"
+              type="password"
+              autoComplete="new-password"
+              required
+              minLength={9}
+              value={newPassword}
+              onChange={(e) => setNewPassword(e.target.value)}
+              className="mt-1"
+            />
+          </div>
+          <div>
+            <Label htmlFor="confirmPassword">Confirm new password</Label>
+            <Input
+              id="confirmPassword"
+              type="password"
+              autoComplete="new-password"
+              required
+              minLength={9}
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              className="mt-1"
+            />
+          </div>
+          <div className="flex items-center gap-2">
+            <input
+              id="revokeOthers"
+              type="checkbox"
+              checked={revokeOthers}
+              onChange={(e) => setRevokeOthers(e.target.checked)}
+              className="h-4 w-4"
+            />
+            <Label htmlFor="revokeOthers" className="text-sm font-normal cursor-pointer">
+              Sign out of other devices
+            </Label>
+          </div>
+          <div className="flex items-center gap-3">
+            <Button type="submit" disabled={savingPassword} size="sm">
+              Change password
+            </Button>
+            {passwordMessage ? (
+              <span
+                className={
+                  passwordMessage.kind === 'ok' ? 'text-sm text-green-600' : 'text-sm text-red-600'
+                }
+              >
+                {passwordMessage.text}
+              </span>
+            ) : null}
+          </div>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}