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

40
Frontend/src/components/shell/MobileWorkspaceBrowser/MobileWorkspaceBrowser.tsx
View File

@@ -7,6 +7,7 @@ import {
createWorkspaceStaticTarget,
createWorkspaceSurfaceTarget,
createWorkspaceTreeTarget,
getWorkspaceNodeIcon,
workspaceStaticItems,
workspaceTree,
type SidebarItem,
@@ -25,7 +26,7 @@ type MobileWorkspaceBrowserProps = {
const TreeRow = (props: { node: WorkspaceTreeNode; depth?: number }): JSX.Element => {
const depth = props.depth ?? 0;
const Icon = props.node.icon;
const Icon = getWorkspaceNodeIcon(props.node);
const hasChildren = (props.node.children?.length ?? 0) > 0;
return (
@@ -37,6 +38,10 @@ const TreeRow = (props: { node: WorkspaceTreeNode; depth?: number }): JSX.Elemen
}}
type="button"
style={{ "--tree-depth": `${depth}` }}
data-slot="mobile-workspace-tree-row"
data-kind={props.node.kind}
data-item-type={props.node.kind === "item" ? props.node.itemType : undefined}
data-active={props.node.active ? "true" : "false"}
>
<span class={styles.treeRowLead}>
<Icon size={16} strokeWidth={2} />
@@ -59,7 +64,7 @@ const StaticRow = (props: { item: SidebarItem }): JSX.Element => {
const Icon = props.item.icon;
return (
<button classList={{ [styles.treeRow]: true, [styles.treeRowActive]: props.item.active ?? false }} type="button" style={{ "--tree-depth": "0" }}>
<button classList={{ [styles.treeRow]: true, [styles.treeRowActive]: props.item.active ?? false }} type="button" style={{ "--tree-depth": "0" }} data-slot="mobile-workspace-static-row" data-active={props.item.active ? "true" : "false"}>
<span class={styles.treeRowLead}>
<Icon size={16} strokeWidth={2} />
<span class={styles.treeLabel}>{props.item.label}</span>
@@ -87,6 +92,8 @@ const WorkspaceStaticRow = (props: {
return (
<li
class={styles.treeListItem}
data-slot="mobile-workspace-static-item"
data-target-kind={target.kind}
onContextMenu={(event): void => {
event.preventDefault();
props.onOpenActionSheet(target);
@@ -118,6 +125,9 @@ const WorkspaceTreeBranch = (props: {
return (
<li
class={styles.treeListItem}
data-slot="mobile-workspace-tree-item"
data-kind={node.kind}
data-item-type={node.kind === "item" ? node.itemType : undefined}
onContextMenu={(event): void => {
event.preventDefault();
props.onOpenActionSheet(target);
@@ -163,11 +173,12 @@ export const MobileWorkspaceBrowser = (props: MobileWorkspaceBrowserProps): JSX.
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.browserLayer} data-ui="mobile-workspace-browser">
<section class={styles.sheet} aria-label="Mobile workspace browser" data-slot="mobile-workspace-sheet">
<header class={styles.sheetHeader} data-slot="mobile-workspace-header">
<div
class={styles.brandBlock}
data-slot="mobile-workspace-brand"
onContextMenu={(event): void => {
event.preventDefault();
openWorkspaceActionSheet();
@@ -180,44 +191,45 @@ export const MobileWorkspaceBrowser = (props: MobileWorkspaceBrowserProps): JSX.
<span class={styles.brandContext}>{activeServer.name}</span>
</div>
<div class={styles.headerActions}>
<div class={styles.headerActions} data-slot="mobile-workspace-header-actions">
<button
class={styles.createButton}
type="button"
aria-label="Create"
data-slot="mobile-workspace-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}>
<button class={styles.closeButton} type="button" aria-label="Close workspace browser" data-slot="mobile-workspace-close" onClick={props.onClose}>
<X size={18} strokeWidth={2} />
</button>
</div>
</header>
<div class={styles.sheetBody}>
<section class={styles.sectionBlock}>
<div class={styles.sheetBody} data-slot="mobile-workspace-body">
<section class={styles.sectionBlock} data-slot="mobile-workspace-section" data-section-id="workspace">
<span class={styles.sectionLabel}>Workspace</span>
<ul class={styles.treeList}>
<ul class={styles.treeList} data-slot="mobile-workspace-list" data-section-id="workspace">
<For each={workspaceStaticItems}>
{(item): JSX.Element => <WorkspaceStaticRow item={item} onOpenActionSheet={openActionSheet} />}
</For>
</ul>
</section>
<section class={styles.sectionBlock}>
<section class={styles.sectionBlock} data-slot="mobile-workspace-section" data-section-id="items">
<span class={styles.sectionLabel}>Items</span>
<ul class={styles.treeList}>
<ul class={styles.treeList} data-slot="mobile-workspace-list" data-section-id="items">
<WorkspaceTreeBranch nodes={sectionNodes} onOpenActionSheet={openActionSheet} />
</ul>
</section>
<Show when={looseNodes.length > 0}>
<section class={styles.sectionBlock}>
<section class={styles.sectionBlock} data-slot="mobile-workspace-section" data-section-id="more">
<span class={styles.sectionLabel}>More</span>
<ul class={styles.treeList}>
<ul class={styles.treeList} data-slot="mobile-workspace-list" data-section-id="more">
<WorkspaceTreeBranch nodes={looseNodes} onOpenActionSheet={openActionSheet} />
</ul>
</section>