feat: Add reactive image (re)fetching on storage subscription event

Author: 3urobeat

src/components/imgLazy.vue

@@ -5,7 +5,7 @@
  * Created Date: 2026-03-24 21:17:26
  * Author: 3urobeat
  *
- * Last Modified: 2026-03-26 18:24:13
+ * Last Modified: 2026-05-10 19:12:42
  * Modified By: 3urobeat
  *
  * Copyright (c) 2026 3urobeat <https://github.com/3urobeat>
@@ -24,15 +24,15 @@
         :class="props.conClass"
         v-element-visibility="onVisibility"
     >
-        <div v-if="imgBlob === null" class="absolute self-center loader"></div>
-        <PhImageBroken v-else-if="imgBlob === undefined" class="h-2/3 w-2/3 self-center text-text-secondary-light/50 dark:text-text-secondary-dark/50" />
+        <div v-if="cachedImage?.imgBlob === null" class="absolute self-center loader"></div>
+        <PhImageBroken v-else-if="cachedImage?.imgBlob === undefined" class="h-2/3 w-2/3 self-center text-text-secondary-light/50 dark:text-text-secondary-dark/50" />
 
         <!-- Show image if available -->
         <img
             v-else
             class="max-w-full max-h-full"
             :class="imgClass"
-            :src="'data:image/png;base64,' + imgBlob"
+            :src="'data:image/png;base64,' + cachedImage.imgBlob"
             :alt="$t('imageFallbackText', { name: itemName })"
         >
     </div>
@@ -44,28 +44,6 @@
     import { PhImageBroken } from "@phosphor-icons/vue";
     import { vElementVisibility } from "@vueuse/components";
 
-    // If null, image has not been loaded yet. If undefined, image does not exist
-    const imgBlob: Ref<string | null | undefined> = ref(null);
-
-    // Fetch image upon being visible
-    const isVisible = shallowRef(false)
-
-    function onVisibility(state: boolean) {
-        isVisible.value = state;
-
-        if (isVisible.value && imgBlob.value === null) {
-            console.debug(`[DEBUG] ImgLazy: Image '${props.imgPath}' became visible and is not fetched yet, loading...`);
-
-            getImageFromServer(props.imgPath, props.imgWidth)
-                .then((res) => {
-                    imgBlob.value = res?.imgBlob;
-                })
-                .catch((err) => {
-                    console.warn(`ImgLazy: Failed to load image '${props.imgPath}': ${err}`);
-                    imgBlob.value = undefined;
-                })
-        }
-    }
 
     // Define Props to be accepted by this component
     const props = defineProps({
@@ -94,4 +72,20 @@
     // Define stuff that can be accessed by the page
     // defineExpose();
 
+
+    // If null, image has not been loaded yet. If undefined, image does not exist
+    const { cachedImage, load } = useImage(toRef(props, "imgPath"), props.imgWidth); // Get image cache ref
+
+    // Fetch image upon being visible
+    const isVisible = shallowRef(false);
+
+    function onVisibility(state: boolean) {
+        isVisible.value = state;
+
+        if (state && cachedImage.value === null) {
+            console.debug(`[DEBUG] ImgLazy: Image '${props.imgPath}' became visible and is not fetched yet, loading...`);
+            load(); // Trigger load
+        }
+    }
+
 </script>

src/composables/storage.ts

@@ -4,7 +4,7 @@
  * Created Date: 2026-03-23 21:34:56
  * Author: 3urobeat
  *
- * Last Modified: 2026-05-09 20:37:01
+ * Last Modified: 2026-05-10 19:10:42
  * Modified By: 3urobeat
  *
  * Copyright (c) 2026 3urobeat <https://github.com/3urobeat>
@@ -30,6 +30,7 @@ import { State } from "./state";
 
 
 let cachedImages: Ref<StorageKindDataMap<StorageKind.IMAGES>[]>; // Perhaps replaceable by using useFetch() with !immediate?
+const imageCacheVersion: Ref<number> = ref(0); // Incremented on every IMAGES cache invalidation from server subscription
 
 
 /**
@@ -98,7 +99,8 @@ export async function handleStorageSubscriptionEvent(event: StorageSubscriptionE
         case StorageKind.IMAGES:
             newData = event.newData as StorageKindDataMap<StorageKind.IMAGES>;
             cachedImages.value = cachedImages.value.filter((e) => e.id !== newData.id);
-            console.debug(`[DEBUG] handleStorageSubscriptionEvent: Deleting image '${newData.id}' from cache...`);
+            imageCacheVersion.value++;
+            console.debug(`[DEBUG] handleStorageSubscriptionEvent: Deleting image '${newData.id}' from cache (v${imageCacheVersion.value})...`);
             break;
         case StorageKind.CLOTHES:
             newData = event.newData as StorageKindDataMap<StorageKind.CLOTHES>;
@@ -264,14 +266,14 @@ export async function setServerSettingsToServer(data: ServerSettings): Promise<A
     -------------------- IMAGES --------------------
 */
 
-export async function getSSRImageFromServer(imgPath: string, scaleToWidth: number | undefined): Promise<Ref<ApiResponse<CachedImage>>> { // Variant that supports SSR for image loads on page load
+/* export async function getSSRImageFromServer(imgPath: string, scaleToWidth: number | undefined): Promise<Ref<ApiResponse<CachedImage>>> { // Variant that supports SSR for image loads on page load
     const body = {
         filePath: imgPath,
         width: scaleToWidth
     };
 
     return (await useFetch("/api/get-image", { method: "POST", body: body })).data as Ref<ApiResponse<CachedImage>>;
-}
+} */ // Unused atm
 
 export async function getImageFromServer(imgPath: string, scaleToWidth: number | undefined): Promise<CachedImage | null> {
     if (!imgPath) return null;
@@ -296,7 +298,52 @@ export async function getImageFromServer(imgPath: string, scaleToWidth: number |
 
     return cachedImages.value[cachedImages.value.length - 1]!;
 }
-// TODO: SSR?
+
+/**
+ * Reactive image cache ref wrapper for getImageFromServer()
+ * @param imgPath Image ref that triggers refetch on change
+ * @param scaleToWidth Optional width to scale the image to
+ * @returns Returns a reactive imgBlob ref (null if not fetched, undefined if no match) and load function to trigger initial image load
+ */
+export function useImage(imgPath: Ref<string>, scaleToWidth?: number): { cachedImage: Ref<CachedImage | null | undefined>; load: () => Promise<void> } {
+    const cachedImage: Ref<CachedImage | null | undefined> = ref(null);
+    let   hasLoaded = false;
+
+    // Loads image
+    async function load() {
+        const path = unref(imgPath);
+        if (!path) {
+            cachedImage.value = undefined;
+            return;
+        }
+
+        try {
+            cachedImage.value = await getImageFromServer(path, scaleToWidth) ?? undefined;
+            hasLoaded = true;
+        } catch (err) {
+            console.warn(`[WARN] useImage: Failed to load image '${path}': ${err}`);
+            if (!hasLoaded) {
+                cachedImage.value = undefined;
+            }
+        }
+    }
+
+    // Watch cache for update and reload image
+    watch(imageCacheVersion, () => {
+        if (hasLoaded) {
+            load();
+        }
+    });
+
+    // Watch imgPath ref parameter to refetch on update
+    watch(imgPath, () => {
+        cachedImage.value = null;
+        hasLoaded = false;
+        load();
+    });
+
+    return { cachedImage: cachedImage, load };
+}
 
 export async function sendImageToServer(file: File): Promise<ApiResponse<{ filePath: string }>> {
 

src/pages/clothing/view.vue

@@ -5,7 +5,7 @@
  * Created Date: 2025-09-08 15:39:55
  * Author: 3urobeat
  *
- * Last Modified: 2026-05-09 23:23:22
+ * Last Modified: 2026-05-10 19:12:09
  * Modified By: 3urobeat
  *
  * Copyright (c) 2025 - 2026 3urobeat <https://github.com/3urobeat>
@@ -64,10 +64,10 @@
             >
                 <!-- Show image if available -->
                 <img
-                    v-if="thisClothingImgBlob"
+                    v-if="cachedImage?.imgBlob"
                     class="rounded-2xl self-center h-fit max-h-full select-none"
                     :class="editModeEnabled ? 'opacity-50' : ''"
-                    :src="'data:image/png;base64,' + thisClothingImgBlob"
+                    :src="'data:image/png;base64,' + cachedImage.imgBlob"
                     alt=""
                 >
                 <PhImageBroken v-else-if="!editModeEnabled" class="h-2/3 w-2/3 self-center text-text-secondary-light/50 dark:text-text-secondary-dark/50" />
@@ -160,7 +160,7 @@
     import { getNewLastLabelOrderIndex, sortLabelsList, type Label } from "~/model/label";
     import { getLabelsOfCategory, type Category } from "~/model/label-category";
     import { CategorySpecialityMap } from "~/model/label-category";
-    import { getImageFromServer, setCategoriesAndLabelsToServer } from "~/composables/storage";
+    import { useImage, setCategoriesAndLabelsToServer } from "~/composables/storage";
     import { StorageKind, type ItemID } from "~/model/storage";
     import { SubscriptionEventAction, SubscriptionEventType, type ApiResponse, type StorageSubscriptionEvent, type SubscriptionEvent } from "~/model/api";
 
@@ -172,9 +172,11 @@
     const storedCategories = getAllLabelCategoriesFromCache();
 
     // Refs, init for new piece of clothing
-    let   storedClothing:      Ref<ApiResponse<Clothing>> = ref({ success: true, message: null, document: { id: "", title: "", description: "", imgPath: "", labelIDs: [], addedTimestamp: 0, modifiedTimestamp: 0 } });
-    let   localClothing:       Ref<ApiResponse<Clothing>> = storedClothing;
-    const thisClothingImgBlob: Ref<string>                = ref("");
+    let   storedClothing: Ref<ApiResponse<Clothing>> = ref({ success: true, message: null, document: { id: "", title: "", description: "", imgPath: "", labelIDs: [], addedTimestamp: 0, modifiedTimestamp: 0 } });
+    let   localClothing:  Ref<ApiResponse<Clothing>> = storedClothing;
+
+    const currentImgPath = ref("");
+    const { cachedImage, load } = useImage(currentImgPath, 512);
 
 
     // Check if edit mode is enabled based on if name of this route is outfits-view or outfits-edit
@@ -200,10 +202,9 @@
         }
 
         // I think it actually provides a better user experience fetching the image afterwards here
-        // thisClothingImgBlob.value = (await getSSRImageFromServer(thisClothing.value.imgPath, 512))?.value.document?.imgBlob || "";
-        onMounted(async () => {
-            thisClothingImgBlob.value = (await getImageFromServer(localClothing.value.document!.imgPath, 512))?.imgBlob || ""; // TODO: Does ref break?
-        });
+        // cachedImage.value = (await getSSRImageFromServer(thisClothing.value.imgPath, 512))?.value.document?.imgBlob || "";
+        currentImgPath.value = localClothing.value.document!.imgPath;
+        onMounted(() => { load(); });
     }
 
 
@@ -225,6 +226,11 @@
                         const diff = getDiff(storedClothing.value.document!, newClothingData);
                         localClothing.value.document = applyDiff(localClothing.value.document!, diff);
                     }
+
+                    // Sync imgPath so useImage re-fetches new image
+                    if (newClothingData.imgPath !== currentImgPath.value) {
+                        currentImgPath.value = newClothingData.imgPath;
+                    }
                 }
             }
         }
@@ -280,13 +286,13 @@
 
 
     // Triggered when new image was uploaded
-    async function updateImage(fileName: string) {
+    function updateImage(fileName: string) {
         if (!fileName) throw("Error: Image was uploaded without file name?");
 
         localClothing.value.document!.imgPath = fileName;
         console.debug("DEBUG - updateImage: Setting imgPath of clothing to " + localClothing.value.document!.imgPath);
 
-        thisClothingImgBlob.value = (await getImageFromServer(fileName, 512))?.imgBlob || "";
+        currentImgPath.value = fileName;
     }