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>
This commit is contained in:
+1
-1
@@ -21,7 +21,7 @@ import type { PluginManifest } from '@@/plugins/manifest';
|
|||||||
*/
|
*/
|
||||||
export const manifest: PluginManifest = {
|
export const manifest: PluginManifest = {
|
||||||
publisher: 'officerdev',
|
publisher: 'officerdev',
|
||||||
version: '2026.09.03.01',
|
version: '2026.09.03.02',
|
||||||
platform: '>=1.0.0',
|
platform: '>=1.0.0',
|
||||||
|
|
||||||
label: 'Photos',
|
label: 'Photos',
|
||||||
|
|||||||
+9
-4
@@ -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
|
// 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
|
// over it, never nested inside the anchor: a button inside an anchor is invalid HTML and swallows the
|
||||||
// keyboard behaviour of both.
|
// 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 = {
|
type AssetTileProps = {
|
||||||
asset: GridAsset;
|
asset: GridAsset;
|
||||||
@@ -69,19 +74,19 @@ export const AssetTile = ({ asset, token, width, height, selected, selecting, on
|
|||||||
);
|
);
|
||||||
|
|
||||||
return (
|
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 ? (
|
{selecting ? (
|
||||||
// Once a selection exists, a plain click extends it rather than navigating — matching Immich, where
|
// 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.
|
// you can rubber-band through a month without the lightbox opening on every tile.
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={(ev) => onToggle(asset.id, ev)}
|
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}
|
{inner}
|
||||||
</button>
|
</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}
|
{inner}
|
||||||
</Link>
|
</Link>
|
||||||
)}
|
)}
|
||||||
@@ -91,7 +96,7 @@ export const AssetTile = ({ asset, token, width, height, selected, selecting, on
|
|||||||
onClick={(ev) => onToggle(asset.id, ev)}
|
onClick={(ev) => onToggle(asset.id, ev)}
|
||||||
title={selected ? 'Deselect' : 'Select'}
|
title={selected ? 'Deselect' : 'Select'}
|
||||||
className={`absolute left-1.5 top-1.5 rounded-full text-white transition-opacity ${
|
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' : ''}`}
|
} ${selecting ? 'opacity-100' : ''}`}
|
||||||
>
|
>
|
||||||
{selected ? (
|
{selected ? (
|
||||||
|
|||||||
Reference in New Issue
Block a user