Author SHA1 Message Date
pastilhasandClaude Opus 5 fd39db6f76 the select circle was unreachable by hover
`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>
2026-09-03 12:42:39 +01:00
2 changed files with 10 additions and 5 deletions
+1 -1
View File
@@ -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',
+9 -4
View File
@@ -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 ? (