v06.8 various bug fixes

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 [savedDisplayName, setSavedDisplayName] = useState(user?.display_name || '');
   const [displayNameWarning, setDisplayNameWarning] = useState('');
   const [aboutMe, setAboutMe] = useState(user?.about_me || '');
   const [currentPw, setCurrentPw] = useState('');
@@ -24,6 +25,7 @@ export default function ProfileModal({ onClose }) {
     try {
       const { user: updated } = await api.updateProfile({ displayName, aboutMe, hideAdminTag });
       updateUser(updated);
+      setSavedDisplayName(displayName);
       toast('Profile updated', 'success');
     } catch (e) {
       toast(e.message, 'error');
@@ -100,24 +102,37 @@ 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={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 }}
-              />
+              <div className="flex gap-2">
+                <input
+                  className="input flex-1"
+                  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 }}
+                />
+                {displayName !== savedDisplayName ? null : savedDisplayName ? (
+                  <button
+                    className="btn btn-sm"
+                    style={{ background: 'var(--surface-variant)', color: 'var(--text-secondary)', flexShrink: 0 }}
+                    onClick={() => setDisplayName('')}
+                    type="button"
+                  >
+                    Remove
+                  </button>
+                ) : null}
+              </div>
               {displayNameWarning && <span className="text-xs" style={{ color: '#e53935' }}>{displayNameWarning}</span>}
+              {savedDisplayName && <span className="text-xs" style={{ color: 'var(--text-tertiary)' }}>Username: {user?.name}</span>}
             </div>
             <div className="flex-col gap-1">
               <label className="text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>About Me</label>