feat: add SVG cache clear button to developer tools caches section

Author: Just-Insane

src/app/components/room-avatar/AvatarImage.tsx

@@ -17,6 +17,11 @@ export function getSvgCacheSize(): number {
   return svgBlobCache.size;
 }
 
+/** Clear all SVG blob URLs from the module-level cache. */
+export function clearSvgBlobCache(): void {
+  svgBlobCache.clear();
+}
+
 type AvatarImageProps = {
   src: string;
   alt?: string;

src/app/features/settings/developer-tools/DevelopTools.tsx

@@ -18,7 +18,7 @@ import {
 import { copyToClipboard } from '$utils/dom';
 import { SequenceCardStyle } from '$features/settings/styles.css';
 import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback';
-import { getSvgCacheSize } from '$components/room-avatar/AvatarImage';
+import { getSvgCacheSize, clearSvgBlobCache } from '$components/room-avatar/AvatarImage';
 import { SettingsSectionPage } from '../SettingsSectionPage';
 import { AccountData } from './AccountData';
 import { SyncDiagnostics } from './SyncDiagnostics';
@@ -75,6 +75,11 @@ export function DeveloperTools({ requestBack, requestClose }: DeveloperToolsProp
     setCacheStats(getBlobCacheStats());
   }, []);
 
+  const clearSvgCacheAction = useCallback(() => {
+    clearSvgBlobCache();
+    setSvgCacheSize(getSvgCacheSize());
+  }, []);
+
   const [clearSwCacheState, clearSwCacheAction] = useAsyncCallback<void, Error, []>(
     useCallback(async () => {
       await caches.delete('sable-media-sw-v1');
@@ -288,6 +293,18 @@ export function DeveloperTools({ requestBack, requestClose }: DeveloperToolsProp
                       focusId="svg-cache"
                       title="SVG Avatar Cache"
                       description={`${svgCacheSize} ${svgCacheSize === 1 ? 'item' : 'items'} · processed SVG avatars, reused while app is open · cleared on reload`}
+                      after={
+                        <Button
+                          onClick={clearSvgCacheAction}
+                          variant="Secondary"
+                          fill="Soft"
+                          size="300"
+                          radii="300"
+                          outlined
+                        >
+                          <Text size="B300">Clear</Text>
+                        </Button>
+                      }
                     />
                     <SettingTile
                       focusId="clear-in-memory-cache"