feat: show when asset is used (#5365)

Ref #572
#3261

- made settings gear visible when asset is used anywhere
- when asset is used delete button shows dialog with all usages

<img width="235" height="149" alt="image"
src="https://github.com/user-attachments/assets/50fc7e45-fb84-451d-9825-592b3ef45388"
/>



<img width="277" height="288" alt="image"
src="https://github.com/user-attachments/assets/37187a5c-92b5-413c-bcdf-caaf506525a4"
/>


<img width="428" height="246" alt="Screenshot 2025-08-09 at 11 30 37"
src="https://github.com/user-attachments/assets/e77d262a-3de0-4d46-b681-b38becb55862"
/>

Author: TrySound

apps/builder/app/builder/shared/assets/use-assets.tsx

@@ -2,35 +2,125 @@ import { useMemo } from "react";
 import { computed } from "nanostores";
 import { useStore } from "@nanostores/react";
 import warnOnce from "warn-once";
-import type { Asset } from "@webstudio-is/sdk";
+import invariant from "tiny-invariant";
+import type { Asset, Page } from "@webstudio-is/sdk";
 import type { AssetType } from "@webstudio-is/asset-uploader";
 import { Box, toast, css, theme } from "@webstudio-is/design-system";
 import { sanitizeS3Key } from "@webstudio-is/asset-uploader";
+import { Image, wsImageLoader } from "@webstudio-is/image";
+import type { ImageValue, StyleValue } from "@webstudio-is/css-engine";
 import { restAssetsUploadPath, restAssetsPath } from "~/shared/router-utils";
-import type {
-  AssetContainer,
-  UploadedAssetContainer,
-  UploadingAssetContainer,
-} from "./types";
+import { fetch } from "~/shared/fetch.client";
 import type { ActionData } from "~/builder/shared/assets";
 import {
   $assets,
   $authToken,
+  $pages,
   $project,
+  $props,
+  $styles,
   $uploadingFilesDataStore,
   type UploadingFileData,
 } from "~/shared/nano-states";
 import { serverSyncStore } from "~/shared/sync";
+import type {
+  AssetContainer,
+  UploadedAssetContainer,
+  UploadingAssetContainer,
+} from "./types";
 import {
   getFileName,
   getMimeType,
   getSha256Hash,
   getSha256HashOfFile,
   uploadingFileDataToAsset,
 } from "./asset-utils";
-import { Image, wsImageLoader } from "@webstudio-is/image";
-import invariant from "tiny-invariant";
-import { fetch } from "~/shared/fetch.client";
+import { mapGetOrInsert } from "~/shared/shim";
+
+export type AssetUsage =
+  | { type: "favicon" }
+  | { type: "socialImage"; pageId: Page["id"] }
+  | { type: "marketplaceThumbnail"; pageId: Page["id"] }
+  | { type: "prop"; propId: string }
+  | { type: "style"; styleDeclKey: string };
+
+const traverseStyleValue = (
+  styleValue: StyleValue,
+  callback: (value: ImageValue) => void
+) => {
+  if (styleValue.type === "image") {
+    callback(styleValue);
+  }
+  if (styleValue.type === "tuple") {
+    for (const item of styleValue.value) {
+      traverseStyleValue(item, callback);
+    }
+  }
+  if (styleValue.type === "layers") {
+    for (const item of styleValue.value) {
+      traverseStyleValue(item, callback);
+    }
+  }
+};
+
+export const $usagesByAssetId = computed(
+  [$pages, $props, $styles],
+  (pages, props, styles) => {
+    const usagesByAsset = new Map<Asset["id"], AssetUsage[]>();
+    if (pages?.meta?.faviconAssetId) {
+      const usages = mapGetOrInsert(
+        usagesByAsset,
+        pages.meta.faviconAssetId,
+        []
+      );
+      usages.push({ type: "favicon" });
+    }
+    if (pages) {
+      for (const page of [pages.homePage, ...pages.pages]) {
+        if (page.meta.socialImageAssetId) {
+          const usages = mapGetOrInsert(
+            usagesByAsset,
+            page.meta.socialImageAssetId,
+            []
+          );
+          usages.push({ type: "socialImage", pageId: page.id });
+        }
+        if (page.marketplace?.thumbnailAssetId) {
+          const usages = mapGetOrInsert(
+            usagesByAsset,
+            page.marketplace.thumbnailAssetId,
+            []
+          );
+          usages.push({ type: "marketplaceThumbnail", pageId: page.id });
+        }
+      }
+    }
+    for (const prop of props.values()) {
+      if (
+        prop.type === "asset" &&
+        // ignore width and height properties which are specific to size
+        prop.name !== "width" &&
+        prop.name !== "height"
+      ) {
+        const usages = mapGetOrInsert(usagesByAsset, prop.value, []);
+        usages.push({ type: "prop", propId: prop.id });
+      }
+    }
+    for (const [styleDeclKey, styleDecl] of styles) {
+      traverseStyleValue(styleDecl.value, (imageValue) => {
+        if (imageValue.value.type === "asset") {
+          const usages = mapGetOrInsert(
+            usagesByAsset,
+            imageValue.value.value,
+            []
+          );
+          usages.push({ type: "style", styleDeclKey });
+        }
+      });
+    }
+    return usagesByAsset;
+  }
+);
 
 export const deleteAssets = (assetIds: Asset["id"][]) => {
   serverSyncStore.createTransaction([$assets], (assets) => {