evOo-local/apps/web/src/components/MessageHoverMetadata.tsx
cynarAI 6c7eed7580 Initial clean evOo-local from f00577b
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.
2026-09-20 17:15:16 +02:00

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>
);
}