From fd39db6f764fe8b9d3e7b57dd4f883d7c3f30e7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Padez?= <andre.padez@gmail.com>
Date: Thu, 3 Sep 2026 12:42:39 +0100
Subject: [PATCH] the select circle was unreachable by hover
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`group` sat on the overlay <Link>. The checkbox is that link's SIBLING, not
its child, so `group-hover` could never have matched — and nothing in the
file used a `group-*` utility at all, so the class was inert.

The checkbox therefore fell back to its own `hover:opacity-100`, which
fires only once the pointer is already over an invisible 20px circle. The
affordance was there and unfindable, which reads as "there is no way to
select a photo".

`group` moves to the wrapper, the checkbox reads `group-hover`, and the
two dead `group` classes on the overlays are dropped.

Touch is still unserved: no hover means no way to begin a selection.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 manifest.ts       |  2 +-
 web/AssetTile.tsx | 13 +++++++++----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/manifest.ts b/manifest.ts
index 7c47da1..aec81e5 100644
--- a/manifest.ts
+++ b/manifest.ts
@@ -21,7 +21,7 @@ import type { PluginManifest } from '@@/plugins/manifest';
  */
 export const manifest: PluginManifest = {
   publisher: 'officerdev',
-  version: '2026.09.03.01',
+  version: '2026.09.03.02',
   platform: '>=1.0.0',
 
   label: 'Photos',
diff --git a/web/AssetTile.tsx b/web/AssetTile.tsx
index 709c161..96fe1e0 100644
--- a/web/AssetTile.tsx
+++ b/web/AssetTile.tsx
@@ -10,6 +10,11 @@ import { ASSET_PARAM, formatDuration, thumbUrl } from './shared';
 // into a tab, linked to, and closed with the back button. The select checkbox is a sibling <button> layered
 // over it, never nested inside the anchor: a button inside an anchor is invalid HTML and swallows the
 // keyboard behaviour of both.
+//
+// That sibling relationship is why `group` belongs on the WRAPPER. It sat on the overlay link instead, which
+// the checkbox is not inside, so `group-hover` could never have reached it — and the checkbox fell back to
+// its own `hover`, revealing itself only when the pointer was already over the invisible 20px circle. The
+// affordance existed and was unfindable.
 
 type AssetTileProps = {
   asset: GridAsset;
@@ -69,19 +74,19 @@ export const AssetTile = ({ asset, token, width, height, selected, selecting, on
   );
 
   return (
-    <div className="relative shrink-0 overflow-hidden rounded-sm" style={{ width, height }}>
+    <div className="group relative shrink-0 overflow-hidden rounded-sm" style={{ width, height }}>
       {selecting ? (
         // Once a selection exists, a plain click extends it rather than navigating — matching Immich, where
         // you can rubber-band through a month without the lightbox opening on every tile.
         <button
           type="button"
           onClick={(ev) => onToggle(asset.id, ev)}
-          className="group absolute inset-0 block h-full w-full cursor-pointer"
+          className="absolute inset-0 block h-full w-full cursor-pointer"
         >
           {inner}
         </button>
       ) : (
-        <Link to={href} className="group absolute inset-0 block h-full w-full">
+        <Link to={href} className="absolute inset-0 block h-full w-full">
           {inner}
         </Link>
       )}
@@ -91,7 +96,7 @@ export const AssetTile = ({ asset, token, width, height, selected, selecting, on
         onClick={(ev) => onToggle(asset.id, ev)}
         title={selected ? 'Deselect' : 'Select'}
         className={`absolute left-1.5 top-1.5 rounded-full text-white transition-opacity ${
-          selected ? 'opacity-100' : 'opacity-0 hover:opacity-100 focus-visible:opacity-100'
+          selected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100 focus-visible:opacity-100'
         } ${selecting ? 'opacity-100' : ''}`}
       >
         {selected ? (