Fresh history cut from cynarAI/evoo antigravity-handoff/project-timeline (Voice First + project timeline). Brand docs/titles as evOo; keep @rakazo/* packages as tech debt. Excludes node_modules, caches, secrets, voice blobs.
28 lines
1.0 KiB
TypeScript
28 lines
1.0 KiB
TypeScript
import type { ReactNode } from "react";
|
|
|
|
export function MessageHoverMetadata({
|
|
side,
|
|
pinned = false,
|
|
children,
|
|
}: {
|
|
side: "start" | "end";
|
|
pinned?: boolean;
|
|
children: ReactNode;
|
|
}) {
|
|
// Touch exposes More; hover-capable pointers reveal the full rail on demand.
|
|
const reveal = pinned
|
|
? "pointer-events-auto opacity-100"
|
|
: "pointer-events-auto opacity-100 [@media(hover:hover)_and_(pointer:fine)]:pointer-events-none [@media(hover:hover)_and_(pointer:fine)]:opacity-0 [@media(hover:hover)_and_(pointer:fine)]:group-hover/message:pointer-events-auto [@media(hover:hover)_and_(pointer:fine)]:group-hover/message:opacity-100 [@media(hover:hover)_and_(pointer:fine)]:focus-within:pointer-events-auto [@media(hover:hover)_and_(pointer:fine)]:focus-within:opacity-100";
|
|
|
|
return (
|
|
<div
|
|
data-testid="message-hover-rail"
|
|
className={`absolute top-1/2 z-10 flex -translate-y-1/2 items-center transition-opacity ${reveal} ${
|
|
side === "end" ? "start-full ms-1" : "end-full me-1"
|
|
}`}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|