feat(P7.T2): ComposerActionsMenu popover (Bild/Datei + Umfrage + Aktivitäten group)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
byGalax
@@ -0,0 +1,250 @@
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { MonitorShareIcon, PollIcon } from './icons';
|
||||
|
||||
interface Props {
|
||||
anchorRef: React.RefObject<HTMLButtonElement | null>;
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
onAttachFile: () => void;
|
||||
onCreatePoll: () => void;
|
||||
onCreateWhiteboard: () => void;
|
||||
onStartWatchTogether: () => void;
|
||||
onStartGame: () => void;
|
||||
canStartGame?: boolean;
|
||||
}
|
||||
|
||||
export function ComposerActionsMenu({
|
||||
anchorRef,
|
||||
open,
|
||||
onClose,
|
||||
onAttachFile,
|
||||
onCreatePoll,
|
||||
onCreateWhiteboard,
|
||||
onStartWatchTogether,
|
||||
onStartGame,
|
||||
canStartGame = true,
|
||||
}: Props) {
|
||||
const { t } = useTranslation();
|
||||
const menuRef = useRef<HTMLDivElement | null>(null);
|
||||
const firstItemRef = useRef<HTMLButtonElement | null>(null);
|
||||
|
||||
// Auto-focus the first item when menu opens (a11y) + click-outside/Esc handlers
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
firstItemRef.current?.focus();
|
||||
const onDocClick = (e: MouseEvent) => {
|
||||
const target = e.target as Node | null;
|
||||
if (!target) return;
|
||||
if (menuRef.current?.contains(target)) return;
|
||||
if (anchorRef.current?.contains(target)) return;
|
||||
onClose();
|
||||
};
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') onClose();
|
||||
};
|
||||
document.addEventListener('mousedown', onDocClick);
|
||||
document.addEventListener('keydown', onKey);
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', onDocClick);
|
||||
document.removeEventListener('keydown', onKey);
|
||||
};
|
||||
}, [open, onClose, anchorRef]);
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
// Each item: closes the menu, then runs the action.
|
||||
const items: Array<{
|
||||
key: string;
|
||||
label: string;
|
||||
Icon: React.ComponentType<React.ComponentPropsWithoutRef<'svg'>>;
|
||||
action: () => void;
|
||||
disabled?: boolean;
|
||||
disabledTitle?: string;
|
||||
section: 'top' | 'activities';
|
||||
}> = [
|
||||
{
|
||||
key: 'attach',
|
||||
label: t('app:composer.menu.attach', { defaultValue: 'Bild / Datei' }),
|
||||
Icon: PaperclipIcon,
|
||||
action: onAttachFile,
|
||||
section: 'top',
|
||||
},
|
||||
{
|
||||
key: 'poll',
|
||||
label: t('app:composer.menu.poll', { defaultValue: 'Umfrage' }),
|
||||
Icon: PollIcon,
|
||||
action: onCreatePoll,
|
||||
section: 'top',
|
||||
},
|
||||
{
|
||||
key: 'whiteboard',
|
||||
label: t('app:composer.menu.whiteboard', { defaultValue: 'Whiteboard' }),
|
||||
Icon: MonitorShareIcon,
|
||||
action: onCreateWhiteboard,
|
||||
section: 'activities',
|
||||
},
|
||||
{
|
||||
key: 'watch',
|
||||
label: t('app:composer.menu.watch', { defaultValue: 'Watch Together' }),
|
||||
Icon: PlayBoxIcon,
|
||||
action: onStartWatchTogether,
|
||||
section: 'activities',
|
||||
},
|
||||
{
|
||||
key: 'game',
|
||||
label: t('app:composer.menu.game', { defaultValue: 'Spiel starten' }),
|
||||
Icon: GameIcon,
|
||||
action: onStartGame,
|
||||
disabled: !canStartGame,
|
||||
disabledTitle: t('app:composer.menu.game_dm_only', {
|
||||
defaultValue: 'Nur in 1:1-Chats',
|
||||
}),
|
||||
section: 'activities',
|
||||
},
|
||||
];
|
||||
|
||||
const handleItemClick = (item: (typeof items)[number]) => {
|
||||
if (item.disabled) return;
|
||||
onClose();
|
||||
item.action();
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
|
||||
const focusable = menuRef.current?.querySelectorAll<HTMLButtonElement>(
|
||||
'button[role="menuitem"]:not([disabled])',
|
||||
);
|
||||
if (!focusable || focusable.length === 0) return;
|
||||
const list = Array.from(focusable);
|
||||
const idx = list.findIndex((el) => el === document.activeElement);
|
||||
if (e.key === 'ArrowDown') {
|
||||
e.preventDefault();
|
||||
list[(idx + 1) % list.length]?.focus();
|
||||
} else if (e.key === 'ArrowUp') {
|
||||
e.preventDefault();
|
||||
list[(idx - 1 + list.length) % list.length]?.focus();
|
||||
}
|
||||
};
|
||||
|
||||
const topItems = items.filter((i) => i.section === 'top');
|
||||
const activityItems = items.filter((i) => i.section === 'activities');
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={menuRef}
|
||||
role="menu"
|
||||
onKeyDown={handleKeyDown}
|
||||
// Positioned absolutely above the anchor; the wrapping parent (the
|
||||
// composer) must be `position: relative` for this to anchor correctly.
|
||||
className="absolute bottom-full left-0 z-30 mb-2 w-56 overflow-hidden rounded-xl border border-line bg-surface-2 shadow-xl"
|
||||
>
|
||||
{topItems.map((item, idx) => {
|
||||
const Icon = item.Icon;
|
||||
const isFirst = idx === 0;
|
||||
return (
|
||||
<button
|
||||
key={item.key}
|
||||
ref={isFirst ? firstItemRef : undefined}
|
||||
type="button"
|
||||
role="menuitem"
|
||||
onClick={() => handleItemClick(item)}
|
||||
disabled={item.disabled}
|
||||
title={item.disabled ? item.disabledTitle : undefined}
|
||||
className={
|
||||
'flex w-full cursor-pointer items-center gap-3 px-3 py-2.5 text-left text-sm font-medium text-fg transition focus:outline-none ' +
|
||||
(item.disabled
|
||||
? 'cursor-not-allowed opacity-50'
|
||||
: 'hover:bg-surface-3 focus-visible:bg-surface-3')
|
||||
}
|
||||
>
|
||||
<Icon className="h-4 w-4 shrink-0 text-fg-muted" />
|
||||
<span className="flex-1 truncate">{item.label}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
<div
|
||||
role="separator"
|
||||
className="border-t border-line/60"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<div className="px-3 pt-2 pb-1 text-[10px] font-semibold uppercase tracking-wider text-fg-muted">
|
||||
{t('app:composer.menu.section_activities', { defaultValue: 'Aktivitäten' })}
|
||||
</div>
|
||||
{activityItems.map((item) => {
|
||||
const Icon = item.Icon;
|
||||
return (
|
||||
<button
|
||||
key={item.key}
|
||||
type="button"
|
||||
role="menuitem"
|
||||
onClick={() => handleItemClick(item)}
|
||||
disabled={item.disabled}
|
||||
title={item.disabled ? item.disabledTitle : undefined}
|
||||
className={
|
||||
'flex w-full cursor-pointer items-center gap-3 px-3 py-2.5 text-left text-sm font-medium text-fg transition focus:outline-none ' +
|
||||
(item.disabled
|
||||
? 'cursor-not-allowed opacity-50'
|
||||
: 'hover:bg-surface-3 focus-visible:bg-surface-3')
|
||||
}
|
||||
>
|
||||
<Icon className="h-4 w-4 shrink-0 text-fg-muted" />
|
||||
<span className="flex-1 truncate">{item.label}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// --- Inline icons not in the central icons module ----------------------
|
||||
|
||||
function PaperclipIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
{...props}
|
||||
>
|
||||
<path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function PlayBoxIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
{...props}
|
||||
>
|
||||
<rect x="3" y="4" width="18" height="14" rx="2" />
|
||||
<path d="M10 9l5 3-5 3V9z" fill="currentColor" stroke="none" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function GameIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
{...props}
|
||||
>
|
||||
<rect x="3" y="6" width="18" height="12" rx="3" />
|
||||
<path d="M8 12h4M10 10v4M16 11v.01M16 14v.01" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user