v0.3.0

frontend/src/components/ProfileModal.jsx

@@ -9,6 +9,7 @@ export default function ProfileModal({ onClose }) {
   const toast = useToast();
 
   const [displayName, setDisplayName] = useState(user?.display_name || '');
+  const [displayNameWarning, setDisplayNameWarning] = useState('');
   const [aboutMe, setAboutMe] = useState(user?.about_me || '');
   const [currentPw, setCurrentPw] = useState('');
   const [newPw, setNewPw] = useState('');
@@ -18,6 +19,7 @@ export default function ProfileModal({ onClose }) {
   const [hideAdminTag, setHideAdminTag] = useState(!!user?.hide_admin_tag);
 
   const handleSaveProfile = async () => {
+    if (displayNameWarning) return toast('Display name is already in use', 'error');
     setLoading(true);
     try {
       const { user: updated } = await api.updateProfile({ displayName, aboutMe, hideAdminTag });
@@ -98,7 +100,24 @@ export default function ProfileModal({ onClose }) {
           <div className="flex-col gap-3">
             <div className="flex-col gap-1">
               <label className="text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>Display Name</label>
-              <input className="input" value={displayName} onChange={e => setDisplayName(e.target.value)} placeholder={user?.name} />
+              <input
+                className="input"
+                value={displayName}
+                onChange={async e => {
+                  const val = e.target.value;
+                  setDisplayName(val);
+                  setDisplayNameWarning('');
+                  if (val && val !== user?.display_name) {
+                    try {
+                      const { taken } = await api.checkDisplayName(val);
+                      if (taken) setDisplayNameWarning('Display name is already in use');
+                    } catch {}
+                  }
+                }}
+                placeholder={user?.name}
+                style={{ borderColor: displayNameWarning ? '#e53935' : undefined }}
+              />
+              {displayNameWarning && <span className="text-xs" style={{ color: '#e53935' }}>{displayNameWarning}</span>}
             </div>
             <div className="flex-col gap-1">
               <label className="text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>About Me</label>