From 024bde9a499b9d2b6c91333c9e778dc8c165797d Mon Sep 17 00:00:00 2001
From: Toni <51962051+EinToni@users.noreply.github.com>
Date: Wed, 27 Nov 2024 22:05:23 +0100
Subject: [PATCH] Moved the selectable button into its own component.

* While adding in that no highligh of the button appears when it is empty the code in the duplicate-asset got quite crowded. I therefore moved the selectable button that holds the metadata into its own component.
---
 .../duplicate-asset-selection.svelte          | 48 ++++++++++++
 .../duplicates/duplicate-asset.svelte         | 75 +++++++------------
 2 files changed, 77 insertions(+), 46 deletions(-)
 create mode 100644 web/src/lib/components/utilities-page/duplicates/duplicate-asset-selection.svelte

diff --git a/web/src/lib/components/utilities-page/duplicates/duplicate-asset-selection.svelte b/web/src/lib/components/utilities-page/duplicates/duplicate-asset-selection.svelte
new file mode 100644
index 0000000000..348f0a8e53
--- /dev/null
+++ b/web/src/lib/components/utilities-page/duplicates/duplicate-asset-selection.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    displayedData: any;
+    isSelected: boolean;
+    isSelectedEqualOriginal: boolean;
+    selectedData: any;
+    slotHeight?: number;
+    onClick: () => void;
+    children?: Snippet;
+  }
+
+  let { displayedData, isSelected, isSelectedEqualOriginal, selectedData, slotHeight, onClick, children }: Props =
+    $props();
+
+  let button = $state<HTMLButtonElement>();
+  export function getHeight(): number {
+    if (button) {
+      return button.getBoundingClientRect().height;
+    }
+    return 0;
+  }
+
+  const getClasses = () => {
+    let classes = 'rounded-xl';
+    if (displayedData) {
+      classes += ' dark:hover:bg-gray-300';
+      classes += isSelected ? ' hover:bg-gray-300' : ' dark:hover:bg-gray-300 hover:bg-gray-500';
+    }
+    if (isSelected && selectedData !== null && !isSelectedEqualOriginal) {
+      classes += ' bg-red-300/90';
+    }
+
+    return classes;
+  };
+</script>
+
+<button
+  bind:this={button}
+  disabled={!displayedData}
+  type="button"
+  style="padding: 3px; {slotHeight ? 'height: ' + slotHeight + 'px' : ''}"
+  class={getClasses()}
+  onclick={onClick}
+>
+  {@render children?.()}
+</button>
diff --git a/web/src/lib/components/utilities-page/duplicates/duplicate-asset.svelte b/web/src/lib/components/utilities-page/duplicates/duplicate-asset.svelte
index ab3124a167..6b24e3fb11 100644
--- a/web/src/lib/components/utilities-page/duplicates/duplicate-asset.svelte
+++ b/web/src/lib/components/utilities-page/duplicates/duplicate-asset.svelte
@@ -11,6 +11,7 @@
   import { locale } from '$lib/stores/preferences.store';
   import type { SelectedSyncData } from '$lib/components/utilities-page/duplicates/duplicates-compare-control.svelte';
   import { DateTime } from 'luxon';
+  import DuplicateAssetSelection from '$lib/components/utilities-page/duplicates/duplicate-asset-selection.svelte';
 
   interface Props {
     asset: AssetResponseDto;
@@ -56,31 +57,16 @@
   selectedSyncData.isFavorite = selectedSyncData.isFavorite || asset.isFavorite;
   selectedSyncData.isArchived = selectedSyncData.isArchived || asset.isArchived;
 
-  let descriptionItem = $state<HTMLButtonElement>();
-  let locationItem = $state<HTMLButtonElement>();
+  let descriptionItem = $state<DuplicateAssetSelection>();
+  let locationItem = $state<DuplicateAssetSelection>();
   let albums: AlbumResponseDto[] = $state([]);
   onMount(async () => {
-    setDescriptionHeight(descriptionItem.getBoundingClientRect().height);
-    setLocationHeight(locationItem.getBoundingClientRect().height);
+    setDescriptionHeight(descriptionItem.getHeight());
+    setLocationHeight(locationItem.getHeight());
     albums = await getAllAlbums({ assetId: asset.id });
     setAlbums(albums);
   });
 
-  const getBackgroundColor = (isSelected: boolean, syncDataExist: boolean, syncIsAssetData: boolean) => {
-    let color = 'rounded-xl dark:hover:bg-gray-300';
-    color += isSelected ? ' hover:bg-gray-300' : ' hover:bg-gray-500';
-    if (isSelected) {
-      if (syncDataExist && !syncIsAssetData) {
-        color += ' bg-red-300/90';
-      }
-    } else {
-      if (syncIsAssetData) {
-        color += ' bg-green-400/90';
-      }
-    }
-    return color;
-  };
-
   let timeZone = $derived(asset.exifInfo?.timeZone);
   let dateTime = $derived(
     timeZone && asset.exifInfo?.dateTimeOriginal
@@ -217,11 +203,12 @@
         {$t('in_albums', { values: { count: displayedAlbums.length } })}
       {/if}
     </span>
-    <button
-      type="button"
-      style="padding: 3px;"
-      class={getBackgroundColor(isSelected, selectedSyncData?.dateTime, selectedSyncData.dateTime?.ts === dateTime?.ts)}
-      onclick={() => onSelectDate(displayedDateTime)}
+    <DuplicateAssetSelection
+      {isSelected}
+      selectedData={selectedSyncData.dateTime}
+      displayedData={displayedDateTime}
+      isSelectedEqualOriginal={selectedSyncData.dateTime?.ts === dateTime?.ts}
+      onClick={() => onSelectDate(displayedDateTime)}
     >
       {displayedDateTime.toLocaleString(
         {
@@ -240,18 +227,16 @@
         },
         { locale: $locale },
       )}
-    </button>
-    <button
-      type="button"
+    </DuplicateAssetSelection>
+    <DuplicateAssetSelection
       bind:this={locationItem}
-      style="padding: 3px; {locationHeight ? 'height: ' + locationHeight + 'px' : ''}"
-      class={getBackgroundColor(
-        isSelected,
-        selectedSyncData?.location !== null,
-        selectedSyncData?.location?.latitude === location.latitude &&
-          selectedSyncData?.location?.longitude === location.longitude,
-      )}
-      onclick={() => onSelectLocation(displayedLocation)}
+      {isSelected}
+      slotHeight={locationHeight}
+      selectedData={selectedSyncData?.location}
+      displayedData={displayedLocation?.city && displayedLocation?.state && displayedLocation?.country}
+      isSelectedEqualOriginal={selectedSyncData?.location?.latitude === location.latitude &&
+        selectedSyncData?.location?.longitude === location.longitude}
+      onClick={() => onSelectLocation(displayedLocation)}
     >
       {#if displayedLocation?.city}
         <div class="text-sm">
@@ -264,19 +249,17 @@
       {#if displayedLocation?.country}
         <p>{displayedLocation.country}</p>
       {/if}
-    </button>
-    <button
-      type="button"
+    </DuplicateAssetSelection>
+    <DuplicateAssetSelection
       bind:this={descriptionItem}
-      style="padding: 3px; {descriptionHeight ? 'height: ' + descriptionHeight + 'px' : ''}"
-      class={getBackgroundColor(
-        isSelected,
-        selectedSyncData?.description !== null,
-        selectedSyncData?.description === description,
-      )}
-      onclick={() => onSelectDescription(displayedDescription)}
+      {isSelected}
+      slotHeight={descriptionHeight}
+      selectedData={selectedSyncData.description}
+      displayedData={displayedDescription}
+      isSelectedEqualOriginal={selectedSyncData?.description === description}
+      onClick={() => onSelectDescription(displayedDescription)}
     >
       {displayedDescription}
-    </button>
+    </DuplicateAssetSelection>
   </div>
 </div>