Moku/Work
1
0
Fork 0
Code Issues Pull Requests Activity

Feat: Prepare frontend future model

Browse Source
This commit is contained in:
MangoPig
2026-06-18 16:58:31 +01:00
parent fcf96590bb
commit 25c6934801
13 changed files with 342 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
Frontend/src/components/shell/WorkspaceContextMenu/WorkspaceContextMenu.tsx
View File

@@ -121,47 +121,55 @@ export const WorkspaceContextMenu = (props: WorkspaceContextMenuProps): JSX.Elem
class={styles.menu}
role="menu"
aria-label={`${target.label} context menu`}
data-ui="workspace-context-menu"
data-target-kind={target.kind}
data-item-type={target.kind === "item" ? target.itemType : undefined}
style={{
left: `${position.x}px`,
top: `${position.y}px`,
}}
>
<Show when={target.kind !== "workspace"}>
<header class={styles.header}>
<header class={styles.header} data-slot="context-menu-header">
<span class={styles.eyebrow}>{getWorkspaceContextMenuEyebrow(target)}</span>
<strong class={styles.title}>{target.label}</strong>
</header>
</Show>
<div classList={{ [styles.sectionList]: true, [styles.sectionListCompact]: !sectionHasLabel() }}>
<div classList={{ [styles.sectionList]: true, [styles.sectionListCompact]: !sectionHasLabel() }} data-slot="context-menu-sections">
<For each={sections()}>
{(section): JSX.Element => (
<section class={styles.section}>
<section class={styles.section} data-slot="context-menu-section" data-section-id={section.id}>
<Show when={section.label}>
<span class={styles.sectionLabel}>{section.label}</span>
</Show>
<div class={styles.actionList}>
<div class={styles.actionList} data-slot="context-menu-action-list">
<For each={section.items}>
{(action): JSX.Element => {
const isSubmenuOpen = () => activeSubmenuActionId() === action.id;
return (
<div
class={styles.actionItem}
onMouseEnter={() => {
<div
class={styles.actionItem}
data-slot="context-menu-action-item"
data-action-id={action.id}
onMouseEnter={() => {
setActiveSubmenuActionId(action.children ? action.id : null);
}}
>
<button
type="button"
role="menuitem"
<button
type="button"
role="menuitem"
classList={{
[styles.action]: true,
[styles.actionCreate]: action.id === "create",
[styles.actionDanger]: action.tone === "danger",
[styles.actionSubmenuOpen]: isSubmenuOpen(),
}}
[styles.actionDanger]: action.tone === "danger",
[styles.actionSubmenuOpen]: isSubmenuOpen(),
}}
data-slot="context-menu-action"
data-action-id={action.id}
data-tone={action.tone ?? "default"}
onClick={() => {
if (action.children) {
setActiveSubmenuActionId(isSubmenuOpen() ? null : action.id);
@@ -188,18 +196,21 @@ export const WorkspaceContextMenu = (props: WorkspaceContextMenuProps): JSX.Elem
</button>
<Show when={action.children && isSubmenuOpen()}>
<div class={styles.submenu} role="menu" aria-label={`${action.label} submenu`}>
<div class={styles.submenuList}>
<div class={styles.submenu} role="menu" aria-label={`${action.label} submenu`} data-slot="context-menu-submenu">
<div class={styles.submenuList} data-slot="context-menu-submenu-list">
<For each={action.children ?? []}>
{(childAction): JSX.Element => (
<button
type="button"
role="menuitem"
<button
type="button"
role="menuitem"
classList={{
[styles.action]: true,
[styles.actionDanger]: childAction.tone === "danger",
}}
onClick={() => handleActionSelect(childAction, target)}
[styles.action]: true,
[styles.actionDanger]: childAction.tone === "danger",
}}
data-slot="context-menu-submenu-action"
data-action-id={childAction.id}
data-tone={childAction.tone ?? "default"}
onClick={() => handleActionSelect(childAction, target)}
>
<span class={styles.actionLabel}>{childAction.label}</span>
<div class={styles.actionMeta}>