authorgravatar for maria@kuuro.netmaria <maria@kuuro.net> 2026-10-04 08:58:25-03:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-10-04 08:58:25-03:00
logd3bec62ec167e783412effbc929da77167f08c4d
tree72970f2d5c4bf92afbdba26544e398b8216d2a80
parentc346fb679bac106c4c162ab145c27e3c8b9640bd
signature Signed by PGP key B5690EEEBB952194

fix(web): reveal sidebar actions for secondary hovering pointers (#15536)

2 files changed, 18 insertions(+), 9 deletions(-)

apps/web/src/components/Sidebar.tsx+9-9
......@@ -1807,7 +1807,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
18071807 <span
18081808 className={cn(
18091809 "inline-flex justify-end tabular-nums text-secondary-label transition-opacity",
1810 !isWoke && "group-hover/sidebar-row:opacity-0",
1810 !isWoke && "group-any-hover/sidebar-row:opacity-0",
18111811 )}
18121812 >
18131813 {variantAction === "unsnooze" && props.snoozeWakeLabelText !== null ? (
......@@ -1851,8 +1851,8 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
18511851 onClick={handleUnsnoozeClick}
18521852 onPointerDown={handleActionPointerDown}
18531853 className={cn(
1854 "pointer-events-none absolute inset-y-0 right-0 -mr-1 inline-flex cursor-pointer items-center gap-1 rounded-md bg-transparent px-1.5 text-xs text-muted-foreground opacity-0 transition-opacity hover:text-foreground focus-visible:pointer-events-auto focus-visible:opacity-100 group-hover/sidebar-row:pointer-events-auto group-hover/sidebar-row:opacity-100",
1855 isWoke && "group-hover/sidebar-row:static",
1854 "pointer-events-none absolute inset-y-0 right-0 -mr-1 inline-flex cursor-pointer items-center gap-1 rounded-md bg-transparent px-1.5 text-xs text-muted-foreground opacity-0 transition-opacity hover:text-foreground focus-visible:pointer-events-auto focus-visible:opacity-100 group-any-hover/sidebar-row:pointer-events-auto group-any-hover/sidebar-row:opacity-100",
1855 isWoke && "group-any-hover/sidebar-row:static",
18561856 )}
18571857 >
18581858 <AlarmClockOffIcon className="mb-px size-3" />
......@@ -1868,8 +1868,8 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
18681868 onClick={handleUnsettleClick}
18691869 onPointerDown={handleActionPointerDown}
18701870 className={cn(
1871 "pointer-events-none absolute inset-y-0 right-0 -mr-1 inline-flex cursor-pointer items-center gap-1 rounded-md bg-transparent px-1.5 text-xs text-muted-foreground opacity-0 transition-opacity hover:text-foreground focus-visible:pointer-events-auto focus-visible:opacity-100 group-hover/sidebar-row:pointer-events-auto group-hover/sidebar-row:opacity-100",
1872 isWoke && "group-hover/sidebar-row:static",
1871 "pointer-events-none absolute inset-y-0 right-0 -mr-1 inline-flex cursor-pointer items-center gap-1 rounded-md bg-transparent px-1.5 text-xs text-muted-foreground opacity-0 transition-opacity hover:text-foreground focus-visible:pointer-events-auto focus-visible:opacity-100 group-any-hover/sidebar-row:pointer-events-auto group-any-hover/sidebar-row:opacity-100",
1872 isWoke && "group-any-hover/sidebar-row:static",
18731873 )}
18741874 />
18751875 }
......@@ -1885,8 +1885,8 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
18851885 onClick={handleSettleClick}
18861886 onPointerDown={handleActionPointerDown}
18871887 className={cn(
1888 "pointer-events-none absolute inset-y-0 right-0 inline-flex cursor-pointer items-center gap-1 rounded-md bg-transparent px-2 text-xs text-muted-foreground opacity-0 transition-opacity hover:text-foreground focus-visible:pointer-events-auto focus-visible:opacity-100 group-hover/sidebar-row:pointer-events-auto group-hover/sidebar-row:opacity-100",
1889 isWoke && "group-hover/sidebar-row:static",
1888 "pointer-events-none absolute inset-y-0 right-0 inline-flex cursor-pointer items-center gap-1 rounded-md bg-transparent px-2 text-xs text-muted-foreground opacity-0 transition-opacity hover:text-foreground focus-visible:pointer-events-auto focus-visible:opacity-100 group-any-hover/sidebar-row:pointer-events-auto group-any-hover/sidebar-row:opacity-100",
1889 isWoke && "group-any-hover/sidebar-row:static",
18901890 )}
18911891 >
18921892 <CheckIcon className="size-3" />
......@@ -1975,7 +1975,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
19751975 className={cn(
19761976 isWokeStatus
19771977 ? "pointer-events-auto"
1978 : "pointer-events-none group-has-[:focus-visible]/sidebar-status-slot:absolute group-has-[:focus-visible]/sidebar-status-slot:right-0 group-has-[:focus-visible]/sidebar-status-slot:opacity-0 group-hover/sidebar-row:absolute group-hover/sidebar-row:right-0 group-hover/sidebar-row:opacity-0",
1978 : "pointer-events-none group-has-[:focus-visible]/sidebar-status-slot:absolute group-has-[:focus-visible]/sidebar-status-slot:right-0 group-has-[:focus-visible]/sidebar-status-slot:opacity-0 group-any-hover/sidebar-row:absolute group-any-hover/sidebar-row:right-0 group-any-hover/sidebar-row:opacity-0",
19791979 "flex items-center self-center justify-self-end tabular-nums text-secondary-label transition-opacity",
19801980 snoozeMenuOpen && "pointer-events-none absolute right-0 opacity-0",
19811981 )}
......@@ -2042,7 +2042,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
20422042 // would keep the controls pinned over the status label
20432043 // once the pointer moves away (e.g. after a failed
20442044 // settle) instead of cross-fading back.
2045 "pointer-events-none absolute inset-y-0 right-0 flex items-stretch opacity-0 transition-opacity has-[:focus-visible]:pointer-events-auto has-[:focus-visible]:static has-[:focus-visible]:opacity-100 group-hover/sidebar-row:pointer-events-auto group-hover/sidebar-row:static group-hover/sidebar-row:opacity-100",
2045 "pointer-events-none absolute inset-y-0 right-0 flex items-stretch opacity-0 transition-opacity has-[:focus-visible]:pointer-events-auto has-[:focus-visible]:static has-[:focus-visible]:opacity-100 group-any-hover/sidebar-row:pointer-events-auto group-any-hover/sidebar-row:static group-any-hover/sidebar-row:opacity-100",
20462046 snoozeMenuOpen && "pointer-events-auto static opacity-100",
20472047 )}
20482048 >
apps/web/src/index.css+9
......@@ -5,6 +5,15 @@
55/* Window Controls Overlay: active when Electron exposes native titlebar control geometry. */
66@custom-variant wco (&:is(.wco, .wco *));
77
8/* Secondary hovering pointers reveal sidebar actions on touch-primary devices. */
9@custom-variant any-hover {
10 @media (any-hover: hover) {
11 &:hover {
12 @slot;
13 }
14 }
15}
16
817/* On mobile, morph the expanded hero composer into the compact docked
918 composer while it moves; the rest of the app remains visually stationary. */
1019html[data-mobile-composer-route-transition="true"]::view-transition-old(root),