Hidden way to update the account info

Usually when avatar or name changes

src/components/avatar.jsx

@@ -9,7 +9,7 @@ const SIZES = {
   xxxl: 64,
 };
 
-function Avatar({ url, size, alt = '' }) {
+function Avatar({ url, size, alt = '', ...props }) {
   size = SIZES[size] || size || SIZES.m;
   return (
     <span
@@ -19,6 +19,7 @@ function Avatar({ url, size, alt = '' }) {
         height: size,
       }}
       title={alt}
+      {...props}
     >
       {!!url && (
         <img src={url} width={size} height={size} alt={alt} loading="lazy" />

src/pages/settings.jsx

@@ -1,6 +1,6 @@
 import './settings.css';
 
-import { useRef, useState } from 'preact/hooks';
+import { useReducer, useRef, useState } from 'preact/hooks';
 import { useSnapshot } from 'valtio';
 
 import Avatar from '../components/avatar';
@@ -27,6 +27,8 @@ function Settings({ onClose }) {
   const moreThanOneAccount = accounts.length > 1;
   const [currentDefault, setCurrentDefault] = useState(0);
 
+  const [_, reload] = useReducer((x) => x + 1, 0);
+
   return (
     <div id="settings-container" class="sheet" tabIndex="-1">
       <main>
@@ -40,14 +42,30 @@ function Settings({ onClose }) {
               const isCurrent = account.info.id === currentAccount;
               const isDefault = i === (currentDefault || 0);
               return (
-                <li>
+                <li key={i + account.id}>
                   <div>
                     {moreThanOneAccount && (
                       <span class={`current ${isCurrent ? 'is-current' : ''}`}>
                         <Icon icon="check-circle" alt="Current" />
                       </span>
                     )}
-                    <Avatar url={account.info.avatarStatic} size="xxl" />
+                    <Avatar
+                      url={account.info.avatarStatic}
+                      size="xxl"
+                      onDblClick={async () => {
+                        if (isCurrent) {
+                          try {
+                            const info = await masto.v1.accounts.fetch(
+                              account.info.id,
+                            );
+                            console.log('fetched account info', info);
+                            account.info = info;
+                            store.local.setJSON('accounts', accounts);
+                            reload();
+                          } catch (e) {}
+                        }
+                      }}
+                    />
                     <NameText
                       account={account.info}
                       showAcct