fix(charger): uploading a photo no longer blanks the page (#148)

invalidateExtensions() nulled the extensions cache, unmounting the
page and the nav until a manual reload. The upload endpoint already
persists and re-resolves server-side, so the client now only
cache-busts the local <img> via an onUploaded callback.

Author: gnacho

app/src/components/ChargerImageButtons.tsx

@@ -2,14 +2,13 @@ import { useRef, useState } from 'react';
 import { ImagePlus } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import type { ChargerCfg } from '@/data/types';
-import { invalidateExtensions } from '@/hooks/useExtensions';
 import { apiFetch } from '@/data/api-client';
 import { heliosToast } from '@/lib/toast';
 
 /** Boton pequeno (arriba-derecha de la tarjeta) para cambiar la foto del
  *  coche: reescala a 460 px de alto en canvas (conserva transparencia) y la
  *  sube al endpoint del cargador. La imagen vive en dataDir, no en el repo. */
-export default function ChargerImageButtons({ charger }: { charger: ChargerCfg }) {
+export default function ChargerImageButtons({ charger, onUploaded }: { charger: ChargerCfg; onUploaded?: () => void }) {
   const { t } = useTranslation();
   const fileRef = useRef<HTMLInputElement>(null);
   const [busy, setBusy] = useState(false);
@@ -40,7 +39,7 @@ export default function ChargerImageButtons({ charger }: { charger: ChargerCfg }
         body: JSON.stringify({ image: dataUrl }),
         headers: { 'Content-Type': 'application/json' },
       });
-      invalidateExtensions();
+      onUploaded?.();
       heliosToast(t('cargador.imageOk'));
     } catch (err) {
       console.error('[imagen]', err);

app/src/pages/Cargador.tsx

@@ -124,6 +124,8 @@ function ChargerView({ charger, live }: { charger: ChargerCfg; live?: ChargerLiv
   const { getHistory } = useEnergyData();
 
   const [curve, setCurve] = useState<ChargerCurvePoint[] | null>(null);
+  // cache-bust de la foto tras subirla (sin recargar la config global)
+  const [imgBust, setImgBust] = useState(0);
   const [history, setHistory] = useState<HistoryDay[] | null>(null);
   const [pwrBusy, setPwrBusy] = useState(false);
   const [ampBusy, setAmpBusy] = useState(false);
@@ -319,7 +321,7 @@ function ChargerView({ charger, live }: { charger: ChargerCfg; live?: ChargerLiv
               <stateChip.Icon size={14} />
               {stateChip.text}
             </span>
-              <ChargerImageButtons charger={charger} />
+              <ChargerImageButtons charger={charger} onUploaded={() => setImgBust(Date.now())} />
           </div>
 
           <div className="flex flex-col gap-5 lg:flex-row lg:items-stretch">
@@ -331,7 +333,7 @@ function ChargerView({ charger, live }: { charger: ChargerCfg; live?: ChargerLiv
             >
               {charger.imageUrl ? (
                 <img
-                  src={charger.imageUrl}
+                  src={`${charger.imageUrl}${imgBust ? `?t=${imgBust}` : ''}`}
                   alt={charger.name}
                   draggable={false}
                   className="h-full max-h-full w-full object-contain select-none"