fix(web): show full path on hover in duplicates utility (#31468)

web/src/lib/utils/duplicate-utils.ts

@@ -59,6 +59,7 @@ type MetadataFieldDefinition = {
   titleKey: string;
   keys: readonly string[];
   render: (asset: AssetResponseDto, $t: MessageFormatter, locale: string | undefined) => string;
+  tooltip?: (asset: AssetResponseDto, $t: MessageFormatter) => string;
 };
 
 const metadataFields = [
@@ -73,6 +74,7 @@ const metadataFields = [
     titleKey: 'path',
     keys: ['originalPath'],
     render: (asset, $t) => truncateMiddle(asset.originalPath) || $t('unknown'),
+    tooltip: (asset, $t) => $t('full_path', { values: { path: asset.originalPath } }),
   },
   {
     icon: mdiWeightKilogram,
@@ -233,11 +235,12 @@ export const countDifferingMetadataItems = (differing: DifferingMetadataFields):
   metadataFields.filter(({ keys }) => keys.some((k) => differing[k as MetadataFieldKey])).length;
 
 export const getAllMetadataItems = (asset: AssetResponseDto, $t: MessageFormatter, locale: string | undefined) =>
-  metadataFields.map(({ icon, titleKey, keys, render }) => ({
-    icon,
-    title: $t(titleKey),
-    render: render(asset, $t, locale),
-    keys,
+  metadataFields.map((field) => ({
+    icon: field.icon,
+    title: $t(field.titleKey),
+    render: field.render(asset, $t, locale),
+    tooltip: 'tooltip' in field ? field.tooltip(asset, $t) : undefined,
+    keys: field.keys,
   }));
 
 const normalizeForComparison = (key: MetadataFieldKey, value: unknown): unknown => {

web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/DuplicateAsset.svelte

@@ -106,8 +106,8 @@
       ? 'bg-success/15 dark:bg-[#001a06]'
       : 'bg-transparent'}"
   >
-    {#each visibleMetadataItems as { icon, title, render, keys } (keys[0])}
-      <InfoRow {icon} {title}>
+    {#each visibleMetadataItems as { icon, title, render, tooltip, keys } (keys[0])}
+      <InfoRow {icon} {title} {tooltip}>
         {render}
       </InfoRow>
     {/each}

web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/InfoRow.svelte

@@ -7,12 +7,17 @@
     children?: Snippet;
     borderBottom?: boolean;
     title?: string;
+    tooltip?: string;
   }
 
-  let { icon, children, borderBottom = true, title }: Props = $props();
+  let { icon, children, borderBottom = true, title, tooltip }: Props = $props();
 </script>
 
-<div class="grid w-full grid-cols-[20px_auto_1fr] overflow-hidden px-1 py-0.5" class:border-b={borderBottom} {title}>
+<div
+  class="grid w-full grid-cols-[20px_auto_1fr] overflow-hidden px-1 py-0.5"
+  class:border-b={borderBottom}
+  title={tooltip ?? title}
+>
   <Icon {icon} size="16" class="self-center text-dark/25" />
 
   {#if title}