Feat: Add workspace context actions
This commit is contained in:
MangoPig
@@ -30,6 +30,12 @@
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--color-border) 84%, transparent);
|
||||
}
|
||||
|
||||
.headerActions {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.brandBlock {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
@@ -74,6 +80,22 @@
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
|
||||
.createButton {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-2);
|
||||
min-height: var(--control-size-md);
|
||||
padding: 0 var(--space-3);
|
||||
border: 1px solid color-mix(in srgb, var(--color-border-strong, var(--color-border)) 82%, transparent);
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--color-surface) 94%, var(--color-canvas) 6%);
|
||||
color: var(--color-text);
|
||||
box-shadow: var(--shadow-soft);
|
||||
font: inherit;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.sheetBody {
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
|
||||
@@ -1,6 +1,21 @@
|
||||
import { For, Show, type JSX } from "solid-js";
|
||||
import { ChevronRight, X } from "../../../lib/icons";
|
||||
import { activeProject, activeServer, workspaceStaticItems, workspaceTree, type SidebarItem, type WorkspaceTreeNode } from "../data/shell.data";
|
||||
import { For, Show, createSignal, type JSX } from "solid-js";
|
||||
import { ChevronRight, Plus, X } from "../../../lib/icons";
|
||||
import { createLongPressGesture } from "../createLongPressGesture";
|
||||
import {
|
||||
activeProject,
|
||||
activeServer,
|
||||
createWorkspaceStaticTarget,
|
||||
createWorkspaceSurfaceTarget,
|
||||
createWorkspaceTreeTarget,
|
||||
workspaceStaticItems,
|
||||
workspaceTree,
|
||||
type SidebarItem,
|
||||
type WorkspaceContextMenuAction,
|
||||
type WorkspaceContextMenuTarget,
|
||||
type WorkspaceStaticItem,
|
||||
type WorkspaceTreeNode,
|
||||
} from "../data/shell.data";
|
||||
import { WorkspaceMobileActionSheet } from "../WorkspaceMobileActionSheet/WorkspaceMobileActionSheet";
|
||||
import styles from "./MobileWorkspaceBrowser.module.scss";
|
||||
|
||||
type MobileWorkspaceBrowserProps = {
|
||||
@@ -14,29 +29,29 @@ const TreeRow = (props: { node: WorkspaceTreeNode; depth?: number }): JSX.Elemen
|
||||
const hasChildren = (props.node.children?.length ?? 0) > 0;
|
||||
|
||||
return (
|
||||
<li class={styles.treeListItem}>
|
||||
<button classList={{ [styles.treeRow]: true, [styles.treeRowActive]: props.node.active ?? false, [styles.treeRowBranch]: hasChildren }} type="button" style={{ "--tree-depth": `${depth}` }}>
|
||||
<span class={styles.treeRowLead}>
|
||||
<Icon size={16} strokeWidth={2} />
|
||||
<span class={styles.treeLabel}>{props.node.label}</span>
|
||||
</span>
|
||||
<button
|
||||
classList={{
|
||||
[styles.treeRow]: true,
|
||||
[styles.treeRowActive]: props.node.active ?? false,
|
||||
[styles.treeRowBranch]: hasChildren,
|
||||
}}
|
||||
type="button"
|
||||
style={{ "--tree-depth": `${depth}` }}
|
||||
>
|
||||
<span class={styles.treeRowLead}>
|
||||
<Icon size={16} strokeWidth={2} />
|
||||
<span class={styles.treeLabel}>{props.node.label}</span>
|
||||
</span>
|
||||
|
||||
<span class={styles.treeRowTrail}>
|
||||
<Show when={props.node.meta}>
|
||||
<span class={styles.treeMeta}>{props.node.meta}</span>
|
||||
</Show>
|
||||
<Show when={hasChildren}>
|
||||
<ChevronRight size={14} strokeWidth={2} class={styles.treeChevron} />
|
||||
</Show>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<Show when={hasChildren}>
|
||||
<ul class={styles.treeListNested}>
|
||||
<For each={props.node.children}>{(child): JSX.Element => <TreeRow node={child} depth={depth + 1} />}</For>
|
||||
</ul>
|
||||
</Show>
|
||||
</li>
|
||||
<span class={styles.treeRowTrail}>
|
||||
<Show when={props.node.meta}>
|
||||
<span class={styles.treeMeta}>{props.node.meta}</span>
|
||||
</Show>
|
||||
<Show when={hasChildren}>
|
||||
<ChevronRight size={14} strokeWidth={2} class={styles.treeChevron} />
|
||||
</Show>
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -44,55 +59,158 @@ const StaticRow = (props: { item: SidebarItem }): JSX.Element => {
|
||||
const Icon = props.item.icon;
|
||||
|
||||
return (
|
||||
<li class={styles.treeListItem}>
|
||||
<button classList={{ [styles.treeRow]: true, [styles.treeRowActive]: props.item.active ?? false }} type="button" style={{ "--tree-depth": "0" }}>
|
||||
<span class={styles.treeRowLead}>
|
||||
<Icon size={16} strokeWidth={2} />
|
||||
<span class={styles.treeLabel}>{props.item.label}</span>
|
||||
</span>
|
||||
<span class={styles.treeRowTrail}>
|
||||
<Show when={props.item.meta}>
|
||||
<span class={styles.treeMeta}>{props.item.meta}</span>
|
||||
</Show>
|
||||
<ChevronRight size={14} strokeWidth={2} class={styles.treeChevron} />
|
||||
</span>
|
||||
</button>
|
||||
<button classList={{ [styles.treeRow]: true, [styles.treeRowActive]: props.item.active ?? false }} type="button" style={{ "--tree-depth": "0" }}>
|
||||
<span class={styles.treeRowLead}>
|
||||
<Icon size={16} strokeWidth={2} />
|
||||
<span class={styles.treeLabel}>{props.item.label}</span>
|
||||
</span>
|
||||
<span class={styles.treeRowTrail}>
|
||||
<Show when={props.item.meta}>
|
||||
<span class={styles.treeMeta}>{props.item.meta}</span>
|
||||
</Show>
|
||||
<ChevronRight size={14} strokeWidth={2} class={styles.treeChevron} />
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
const WorkspaceStaticRow = (props: {
|
||||
item: WorkspaceStaticItem;
|
||||
onOpenActionSheet: (target: WorkspaceContextMenuTarget) => void;
|
||||
}): JSX.Element => {
|
||||
const target = createWorkspaceStaticTarget(props.item);
|
||||
const longPress = createLongPressGesture({
|
||||
onLongPress: () => {
|
||||
props.onOpenActionSheet(target);
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<li
|
||||
class={styles.treeListItem}
|
||||
onContextMenu={(event): void => {
|
||||
event.preventDefault();
|
||||
props.onOpenActionSheet(target);
|
||||
}}
|
||||
{...longPress}
|
||||
>
|
||||
<StaticRow item={props.item} />
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
||||
const WorkspaceTreeBranch = (props: {
|
||||
nodes: readonly WorkspaceTreeNode[];
|
||||
depth?: number;
|
||||
onOpenActionSheet: (target: WorkspaceContextMenuTarget) => void;
|
||||
}): JSX.Element => {
|
||||
const depth = props.depth ?? 0;
|
||||
|
||||
return (
|
||||
<For each={props.nodes}>
|
||||
{(node): JSX.Element => {
|
||||
const target = createWorkspaceTreeTarget(node);
|
||||
const longPress = createLongPressGesture({
|
||||
onLongPress: () => {
|
||||
props.onOpenActionSheet(target);
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<li
|
||||
class={styles.treeListItem}
|
||||
onContextMenu={(event): void => {
|
||||
event.preventDefault();
|
||||
props.onOpenActionSheet(target);
|
||||
}}
|
||||
{...longPress}
|
||||
>
|
||||
<TreeRow node={node} depth={depth} />
|
||||
|
||||
<Show when={node.children?.length}>
|
||||
<ul class={styles.treeListNested}>
|
||||
<WorkspaceTreeBranch nodes={node.children ?? []} depth={depth + 1} onOpenActionSheet={props.onOpenActionSheet} />
|
||||
</ul>
|
||||
</Show>
|
||||
</li>
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
);
|
||||
};
|
||||
|
||||
export const MobileWorkspaceBrowser = (props: MobileWorkspaceBrowserProps): JSX.Element => {
|
||||
const [actionSheetTarget, setActionSheetTarget] = createSignal<WorkspaceContextMenuTarget | null>(null);
|
||||
const sectionNodes = workspaceTree.filter((node) => (node.children?.length ?? 0) > 0);
|
||||
const looseNodes = workspaceTree.filter((node) => (node.children?.length ?? 0) === 0);
|
||||
const workspaceTarget = createWorkspaceSurfaceTarget(activeProject);
|
||||
const openActionSheet = (target: WorkspaceContextMenuTarget): void => {
|
||||
setActionSheetTarget(target);
|
||||
};
|
||||
const closeActionSheet = (): void => {
|
||||
setActionSheetTarget(null);
|
||||
};
|
||||
const openWorkspaceActionSheet = (): void => {
|
||||
openActionSheet(workspaceTarget);
|
||||
};
|
||||
|
||||
const handleActionSelect = (_action: WorkspaceContextMenuAction, _target: WorkspaceContextMenuTarget): void => {
|
||||
// Mobile first pass only establishes the action-sheet IA and long-press behavior.
|
||||
};
|
||||
|
||||
const workspaceLongPress = createLongPressGesture({
|
||||
onLongPress: openWorkspaceActionSheet,
|
||||
});
|
||||
|
||||
return (
|
||||
<Show when={props.open}>
|
||||
<div class={styles.browserLayer}>
|
||||
<section class={styles.sheet} aria-label="Mobile workspace browser">
|
||||
<header class={styles.sheetHeader}>
|
||||
<div class={styles.brandBlock}>
|
||||
<div
|
||||
class={styles.brandBlock}
|
||||
onContextMenu={(event): void => {
|
||||
event.preventDefault();
|
||||
openWorkspaceActionSheet();
|
||||
}}
|
||||
{...workspaceLongPress}
|
||||
>
|
||||
{/* Long-pressing the browser header exposes workspace-level actions on mobile. */}
|
||||
<span class={styles.brandEyebrow}>Moku Work</span>
|
||||
<strong class={styles.brandTitle}>{activeProject.name}</strong>
|
||||
<span class={styles.brandContext}>{activeServer.name}</span>
|
||||
</div>
|
||||
|
||||
<button class={styles.closeButton} type="button" aria-label="Close workspace browser" onClick={props.onClose}>
|
||||
<X size={18} strokeWidth={2} />
|
||||
</button>
|
||||
<div class={styles.headerActions}>
|
||||
<button
|
||||
class={styles.createButton}
|
||||
type="button"
|
||||
aria-label="Create"
|
||||
onClick={openWorkspaceActionSheet}
|
||||
>
|
||||
<Plus size={16} strokeWidth={2.25} />
|
||||
<span>Create</span>
|
||||
</button>
|
||||
|
||||
<button class={styles.closeButton} type="button" aria-label="Close workspace browser" onClick={props.onClose}>
|
||||
<X size={18} strokeWidth={2} />
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class={styles.sheetBody}>
|
||||
<section class={styles.sectionBlock}>
|
||||
<span class={styles.sectionLabel}>Workspace</span>
|
||||
<ul class={styles.treeList}>
|
||||
<For each={workspaceStaticItems}>{(item): JSX.Element => <StaticRow item={item} />}</For>
|
||||
<For each={workspaceStaticItems}>
|
||||
{(item): JSX.Element => <WorkspaceStaticRow item={item} onOpenActionSheet={openActionSheet} />}
|
||||
</For>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class={styles.sectionBlock}>
|
||||
<span class={styles.sectionLabel}>Items</span>
|
||||
<ul class={styles.treeList}>
|
||||
<For each={sectionNodes}>{(node): JSX.Element => <TreeRow node={node} />}</For>
|
||||
<WorkspaceTreeBranch nodes={sectionNodes} onOpenActionSheet={openActionSheet} />
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
@@ -100,12 +218,18 @@ export const MobileWorkspaceBrowser = (props: MobileWorkspaceBrowserProps): JSX.
|
||||
<section class={styles.sectionBlock}>
|
||||
<span class={styles.sectionLabel}>More</span>
|
||||
<ul class={styles.treeList}>
|
||||
<For each={looseNodes}>{(node): JSX.Element => <TreeRow node={node} />}</For>
|
||||
<WorkspaceTreeBranch nodes={looseNodes} onOpenActionSheet={openActionSheet} />
|
||||
</ul>
|
||||
</section>
|
||||
</Show>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<WorkspaceMobileActionSheet
|
||||
target={actionSheetTarget()}
|
||||
onClose={closeActionSheet}
|
||||
onSelect={handleActionSelect}
|
||||
/>
|
||||
</div>
|
||||
</Show>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user