fix: replace AccountPanel inline success banners with toasts

Missed in previous pass: "Profile updated!" and "Password changed!"
banners now use addToast instead of inline layout-shifting divs.
This commit is contained in:
Jannis Braun
2026-03-22 04:57:55 +01:00
parent dd33a62b22
commit 7694f732c9
@@ -1,5 +1,6 @@
import { useState, useEffect, useRef } from 'react'; import { useState, useEffect, useRef } from 'react';
import { useAuthStore } from '../../../stores/authStore'; import { useAuthStore } from '../../../stores/authStore';
import { useUIStore } from '../../../stores/uiStore';
import { useInstanceStore } from '../../../stores/instanceStore'; import { useInstanceStore } from '../../../stores/instanceStore';
import { Avatar } from '../../ui/Avatar'; import { Avatar } from '../../ui/Avatar';
import { ImageCropModal } from '../../ui/ImageCropModal'; import { ImageCropModal } from '../../ui/ImageCropModal';
@@ -35,8 +36,8 @@ export function AccountPanel() {
const [bannerCropSrc, setBannerCropSrc] = useState<string | null>(null); const [bannerCropSrc, setBannerCropSrc] = useState<string | null>(null);
const bannerInputRef = useRef<HTMLInputElement>(null); const bannerInputRef = useRef<HTMLInputElement>(null);
const addToast = useUIStore((s) => s.addToast);
const [error, setError] = useState(''); const [error, setError] = useState('');
const [success, setSuccess] = useState('');
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
useEffect(() => { useEffect(() => {
@@ -63,7 +64,6 @@ export function AccountPanel() {
const [newPassword, setNewPassword] = useState(''); const [newPassword, setNewPassword] = useState('');
const [confirmNewPassword, setConfirmNewPassword] = useState(''); const [confirmNewPassword, setConfirmNewPassword] = useState('');
const [passwordError, setPasswordError] = useState(''); const [passwordError, setPasswordError] = useState('');
const [passwordSuccess, setPasswordSuccess] = useState('');
const [passwordLoading, setPasswordLoading] = useState(false); const [passwordLoading, setPasswordLoading] = useState(false);
const [passwordResults, setPasswordResults] = useState<FederationOpResult[] | null>(null); const [passwordResults, setPasswordResults] = useState<FederationOpResult[] | null>(null);
const [showCurrentPassword, setShowCurrentPassword] = useState(false); const [showCurrentPassword, setShowCurrentPassword] = useState(false);
@@ -184,7 +184,6 @@ export function AccountPanel() {
const handleSave = async () => { const handleSave = async () => {
setError(''); setError('');
setSuccess('');
setIsLoading(true); setIsLoading(true);
try { try {
const updates: Record<string, string | undefined> = {}; const updates: Record<string, string | undefined> = {};
@@ -198,8 +197,7 @@ export function AccountPanel() {
if (bannerFilename !== null) updates.banner = bannerFilename; if (bannerFilename !== null) updates.banner = bannerFilename;
await updateProfile(updates as Parameters<typeof updateProfile>[0]); await updateProfile(updates as Parameters<typeof updateProfile>[0]);
setSuccess('Profile updated!'); addToast('Profile updated', 'success', 2000);
setTimeout(() => setSuccess(''), 2000);
} catch (err) { } catch (err) {
setError(err instanceof Error ? err.message : 'Failed to update profile'); setError(err instanceof Error ? err.message : 'Failed to update profile');
} finally { } finally {
@@ -209,7 +207,6 @@ export function AccountPanel() {
const handleChangePassword = async () => { const handleChangePassword = async () => {
setPasswordError(''); setPasswordError('');
setPasswordSuccess('');
setPasswordResults(null); setPasswordResults(null);
if (newPassword.length < 8) { if (newPassword.length < 8) {
@@ -224,7 +221,7 @@ export function AccountPanel() {
setPasswordLoading(true); setPasswordLoading(true);
try { try {
const results = await changePassword(currentPassword, newPassword); const results = await changePassword(currentPassword, newPassword);
setPasswordSuccess('Password changed successfully!'); addToast('Password changed', 'success', 2000);
setCurrentPassword(''); setCurrentPassword('');
setNewPassword(''); setNewPassword('');
setConfirmNewPassword(''); setConfirmNewPassword('');
@@ -234,7 +231,6 @@ export function AccountPanel() {
} }
setTimeout(() => { setTimeout(() => {
setPasswordSuccess('');
setPasswordResults(null); setPasswordResults(null);
}, 5000); }, 5000);
} catch (err) { } catch (err) {
@@ -658,9 +654,6 @@ export function AccountPanel() {
{passwordError && ( {passwordError && (
<div className="p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-xs">{passwordError}</div> <div className="p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-xs">{passwordError}</div>
)} )}
{passwordSuccess && (
<div className="p-2 bg-status-online/10 border border-status-online/30 rounded text-status-online text-xs">{passwordSuccess}</div>
)}
{passwordResults && passwordResults.length > 0 && ( {passwordResults && passwordResults.length > 0 && (
<div className="space-y-1"> <div className="space-y-1">
{passwordResults.map(r => ( {passwordResults.map(r => (
@@ -705,9 +698,6 @@ export function AccountPanel() {
{error && ( {error && (
<div className="p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-sm">{error}</div> <div className="p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-sm">{error}</div>
)} )}
{success && (
<div className="p-2 bg-status-online/10 border border-status-online/30 rounded text-status-online text-sm">{success}</div>
)}
{hasChanges && ( {hasChanges && (
<div className="sticky bottom-0 z-10 pointer-events-none"> <div className="sticky bottom-0 z-10 pointer-events-none">