feat(ui): refine download controls and package motion

Move the global package disclosure action into a responsive right-aligned toolbar group and disable it for empty queues. Replace the decorative package title with a compact neutral filter group, coordinate disclosure opacity with height transitions, and make contextual help follow combined pointer and keyboard focus state.
This commit is contained in:
Sucukdeluxe
2026-08-24 20:59:50 +02:00
parent e8046f3fa3
commit 967eab00ae
6 changed files with 137 additions and 32 deletions
+29 -3
View File
@@ -1,4 +1,4 @@
import { Children, Fragment, isValidElement, useId, type ReactElement, type ReactNode } from "react";
import { Children, Fragment, isValidElement, useId, useRef, type ReactElement, type ReactNode } from "react";
import { Icon } from "./Icon";
export interface ContextInfoButtonProps {
@@ -37,19 +37,45 @@ export function ContextInfoButton({
onOpenChange
}: ContextInfoButtonProps): ReactElement | null {
const regionId = useId();
const pointerInside = useRef(false);
const focusInside = useRef(false);
if (!hasRenderableContent(content)) {
return null;
}
return (
<div className="ui-context-info">
<div
className="ui-context-info"
onBlur={(event) => {
if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {
focusInside.current = false;
if (!pointerInside.current) {
onOpenChange(false);
}
}
}}
onFocus={() => {
focusInside.current = true;
onOpenChange(true);
}}
onPointerEnter={() => {
pointerInside.current = true;
onOpenChange(true);
}}
onPointerLeave={() => {
pointerInside.current = false;
if (!focusInside.current) {
onOpenChange(false);
}
}}
>
<button
aria-controls={regionId}
aria-expanded={open}
aria-label="Informationen"
className="ui-context-info-trigger"
onClick={() => onOpenChange(!open)}
onClick={() => onOpenChange(true)}
title="Informationen"
type="button"
>