From 5cde52eec97912462024e5b4eb09d5b45be04cb9 Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Thu, 20 Jun 2024 23:14:34 +0200
Subject: [PATCH] feat(web): duplicate ui tweaks (#10506)

---
 .../duplicates/duplicate-asset.svelte         | 71 +++++++++----------
 .../duplicates-compare-control.svelte         | 30 ++++----
 2 files changed, 46 insertions(+), 55 deletions(-)

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 0f30eb6166..a978a3f4b2 100644
--- a/web/src/lib/components/utilities-page/duplicates/duplicate-asset.svelte
+++ b/web/src/lib/components/utilities-page/duplicates/duplicate-asset.svelte
@@ -16,12 +16,16 @@
   $: assetData = JSON.stringify(asset, null, 2);
 </script>
 
-<div class="relative">
+<div
+  class="max-w-60 rounded-xl border-4 transition-colors font-semibold text-xs {isSelected
+    ? 'bg-immich-primary dark:bg-immich-dark-primary border-immich-primary dark:border-immich-dark-primary'
+    : 'bg-gray-200 dark:bg-gray-800 border-gray-200 dark:border-gray-800'}"
+>
   <div class="relative">
     <button
       type="button"
       on:click={() => onSelectAsset(asset)}
-      class="block relative rounded-t-xl"
+      class="block relative"
       aria-pressed={isSelected}
       aria-label={$t('keep')}
     >
@@ -29,21 +33,23 @@
       <img
         src={getAssetThumbnailUrl(asset.id)}
         alt={getAltText(asset)}
-        title={`${assetData}`}
-        class={`size-60 object-cover rounded-t-xl border-4 border-b-0 border-gray-300 ${isSelected ? 'border-immich-primary dark:border-immich-dark-primary' : 'dark:border-gray-800'} transition-all`}
+        title={assetData}
+        class="h-60 object-cover rounded-t-xl"
         draggable="false"
       />
 
       <!-- OVERLAY CHIP -->
       <div
-        class={`absolute bottom-2 right-3 ${isSelected ? 'bg-green-400/90' : 'bg-red-300/90'} px-4 py-1 rounded-xl text-xs font-semibold`}
+        class="absolute bottom-1 right-3 px-4 py-1 rounded-xl text-xs transition-colors {isSelected
+          ? 'bg-green-400/90'
+          : 'bg-red-300/90'}"
       >
         {isSelected ? $t('keep') : $t('to_trash')}
       </div>
 
       <!-- EXTERNAL LIBRARY CHIP-->
       {#if isFromExternalLibrary}
-        <div class="absolute top-2 right-3 bg-immich-primary/90 px-4 py-1 rounded-xl text-xs font-semibold text-white">
+        <div class="absolute top-2 right-3 bg-immich-primary/90 px-4 py-1 rounded-xl text-xs text-white">
           {$t('external')}
         </div>
       {/if}
@@ -52,43 +58,30 @@
     <button
       type="button"
       on:click={() => onViewAsset(asset)}
-      class="absolute rounded-full bottom-1 left-2 text-gray-200 p-1.5 hover:text-white bg-black/35"
+      class="absolute rounded-full bottom-1 left-1 text-gray-200 p-2 hover:text-white bg-black/35 hover:bg-black/50"
       title={$t('view')}
     >
-      <Icon ariaLabel={$t('view')} path={mdiMagnifyPlus} flipped />
+      <Icon ariaLabel={$t('view')} path={mdiMagnifyPlus} flipped size="18" />
     </button>
   </div>
 
-  <!-- ASSET INFO-->
-  <table
-    class={`text-xs w-full rounded-b-xl font-semibold ${isSelected ? 'bg-immich-primary text-white dark:bg-immich-dark-primary dark:text-black' : 'bg-gray-200 dark:bg-gray-800 dark:text-white'} mt-0 transition-all`}
+  <div
+    class="grid place-items-center gap-y-2 py-2 text-xs transition-colors {isSelected
+      ? 'text-white dark:text-black'
+      : 'dark:text-white'}"
   >
-    <tr
-      class={`h-8 ${isSelected ? 'border-immich-primary rounded-xl dark:border-immich-dark-primary' : 'border-gray-300'} text-center `}
-    >
-      <td>{asset.originalFileName}</td>
-    </tr>
-
-    <tr
-      class={`h-8 ${isSelected ? 'border-immich-primary rounded-xl dark:border-immich-dark-primary' : 'border-gray-300'} text-center`}
-    >
-      <td>{getAssetResolution(asset)} - {getFileSize(asset)}</td>
-    </tr>
-
-    <tr
-      class={`h-8 ${isSelected ? 'border-immich-primary rounded-xl dark:border-immich-dark-primary' : 'border-gray-300'} text-center `}
-    >
-      <td>
-        {#await getAllAlbums({ assetId: asset.id })}
-          {$t('scanning_for_album')}
-        {:then albums}
-          {#if albums.length === 0}
-            {$t('not_in_any_album')}
-          {:else}
-            {$t('in_albums', { values: { count: albums.length } })}
-          {/if}
-        {/await}
-      </td>
-    </tr>
-  </table>
+    <span class="break-all text-center">{asset.originalFileName}</span>
+    <span>{getAssetResolution(asset)} - {getFileSize(asset)}</span>
+    <span>
+      {#await getAllAlbums({ assetId: asset.id })}
+        {$t('scanning_for_album')}
+      {:then albums}
+        {#if albums.length === 0}
+          {$t('not_in_any_album')}
+        {:else}
+          {$t('in_albums', { values: { count: albums.length } })}
+        {/if}
+      {/await}
+    </span>
+  </div>
 </div>
diff --git a/web/src/lib/components/utilities-page/duplicates/duplicates-compare-control.svelte b/web/src/lib/components/utilities-page/duplicates/duplicates-compare-control.svelte
index 4e5aac8d18..21b6e94e67 100644
--- a/web/src/lib/components/utilities-page/duplicates/duplicates-compare-control.svelte
+++ b/web/src/lib/components/utilities-page/duplicates/duplicates-compare-control.svelte
@@ -73,35 +73,33 @@
     {/each}
   </div>
 
-  <div class="flex mt-10 mb-4 px-6 w-full place-content-end justify-between h-11">
+  <div class="flex flex-wrap gap-y-6 mt-10 mb-4 px-6 w-full place-content-end justify-between">
     <!-- MARK ALL BUTTONS -->
     <div class="flex text-xs text-black">
       <button
         type="button"
-        class="px-4 flex place-items-center gap-2 rounded-tl-full rounded-bl-full dark:bg-immich-dark-primary hover:dark:bg-immich-dark-primary/90 bg-immich-primary/25 hover:bg-immich-primary/50"
+        class="px-4 py-3 flex place-items-center gap-2 rounded-tl-full rounded-bl-full dark:bg-immich-dark-primary hover:dark:bg-immich-dark-primary/90 bg-immich-primary/25 hover:bg-immich-primary/50"
         on:click={onSelectAll}><Icon path={mdiCheck} size="20" />{$t('select_keep_all')}</button
       >
       <button
         type="button"
-        class="px-4 flex place-items-center gap-2 rounded-tr-full rounded-br-full dark:bg-immich-dark-primary/50 hover:dark:bg-immich-dark-primary/70 bg-immich-primary hover:bg-immich-primary/80 text-white"
+        class="px-4 py-3 flex place-items-center gap-2 rounded-tr-full rounded-br-full dark:bg-immich-dark-primary/50 hover:dark:bg-immich-dark-primary/70 bg-immich-primary hover:bg-immich-primary/80 text-white"
         on:click={onSelectNone}><Icon path={mdiTrashCanOutline} size="20" />{$t('select_trash_all')}</button
       >
     </div>
 
     <!-- CONFIRM BUTTONS -->
-    <div class="flex gap-4">
-      {#if trashCount === 0}
-        <Button size="sm" color="primary" class="flex place-items-center gap-2" on:click={handleResolve}>
-          <Icon path={mdiCheck} size="20" />{$t('keep_all')}
-        </Button>
-      {:else}
-        <Button size="sm" color="red" class="flex place-items-center gap-2" on:click={handleResolve}>
-          <Icon path={mdiTrashCanOutline} size="20" />{trashCount === assets.length
-            ? $t('trash_all')
-            : $t('trash_count', { values: { count: trashCount } })}
-        </Button>
-      {/if}
-    </div>
+    {#if trashCount === 0}
+      <Button size="sm" color="primary" class="flex place-items-center gap-2" on:click={handleResolve}>
+        <Icon path={mdiCheck} size="20" />{$t('keep_all')}
+      </Button>
+    {:else}
+      <Button size="sm" color="red" class="flex place-items-center gap-2 py-3" on:click={handleResolve}>
+        <Icon path={mdiTrashCanOutline} size="20" />{trashCount === assets.length
+          ? $t('trash_all')
+          : $t('trash_count', { values: { count: trashCount } })}
+      </Button>
+    {/if}
   </div>
 </div>