courrier preview

app/courrier/page.tsx

@@ -195,6 +195,7 @@ export default function CourrierPage() {
   const [newPassword, setNewPassword] = useState('');
   const [editLoading, setEditLoading] = useState(false);
   const [deleteLoading, setDeleteLoading] = useState(false);
+  const [selectedColor, setSelectedColor] = useState<string>('');
   
   // Use the reducer-managed values directly instead of tracked separately
   const [searchQuery, setSearchQuery] = useState('');
@@ -671,6 +672,7 @@ export default function CourrierPage() {
                   const updatedAccount = accounts.find(a => a.id === account.id);
                   if (updatedAccount) {
                     setAccountToEdit(updatedAccount as any);
+                    setSelectedColor(updatedAccount.color || '');
                     setShowEditModal(true);
                   } else {
                     toast({
@@ -918,6 +920,8 @@ export default function CourrierPage() {
           setEditLoading(false);
           setAccountToEdit(null);
           setNewPassword('');
+          setSelectedColor('');
+          window.location.reload();
         }
       }}>
         <DialogContent className="sm:max-w-[500px] bg-white text-gray-800">
@@ -929,7 +933,7 @@ export default function CourrierPage() {
             try {
               const formElement = e.target as HTMLFormElement;
               const displayName = (formElement.querySelector('#display-name') as HTMLInputElement).value;
-              const color = (formElement.querySelector('input[name="color"]:checked') as HTMLInputElement)?.value || accountToEdit.color;
+              const color = selectedColor;
               
               // If password is changed, test the connection first
               if (newPassword) {
@@ -994,6 +998,8 @@ export default function CourrierPage() {
               ));
               // Clear accountToEdit to ensure fresh data on next edit
               setAccountToEdit(null);
+              // Force a page refresh to reset all UI states
+              window.location.reload();
             } catch (err) {
               toast({ title: 'Error', description: err instanceof Error ? err.message : 'Failed to update account settings', variant: 'destructive' });
             } finally {
@@ -1034,15 +1040,17 @@ export default function CourrierPage() {
                       id={`color-${index}`}
                       name="color"
                       value={color}
-                      defaultChecked={accountToEdit?.color === color}
+                      checked={selectedColor === color}
+                      onChange={() => setSelectedColor(color)}
                       className="sr-only"
                     />
                     <label
                       htmlFor={`color-${index}`}
                       className={`w-8 h-8 rounded-full cursor-pointer flex items-center justify-center ${color} hover:ring-2 hover:ring-blue-300 transition-all`}
-                      style={{ boxShadow: accountToEdit?.color === color ? '0 0 0 2px white, 0 0 0 4px #3b82f6' : 'none' }}
+                      style={{ boxShadow: selectedColor === color ? '0 0 0 2px white, 0 0 0 4px #3b82f6' : 'none' }}
+                      onClick={() => setSelectedColor(color)}
                     >
-                      {accountToEdit?.color === color && (
+                      {selectedColor === color && (
                         <Check className="h-4 w-4 text-white" />
                       )}
                     </label>
@@ -1055,7 +1063,10 @@ export default function CourrierPage() {
               <Button 
                 type="button" 
                 className="bg-red-500 hover:bg-red-600 text-white" 
-                onClick={() => setShowEditModal(false)}
+                onClick={() => {
+                  setShowEditModal(false);
+                  window.location.reload();
+                }}
               >
                 Cancel
               </Button>