Feat: Prepare frontend future model

Frontend/src/components/shell/WorkspaceSidebar/WorkspaceSidebar.tsx

@@ -8,6 +8,7 @@ import {
 	createWorkspaceStaticTarget,
 	createWorkspaceSurfaceTarget,
 	createWorkspaceTreeTarget,
+	getWorkspaceNodeIcon,
 	workspaceSidebarHeaderActions,
 	workspaceStaticItems,
 	workspaceTree,
@@ -47,6 +48,9 @@ const WorkspaceHomeEntry = (props: {
 				aria-current={props.item.active ? "page" : undefined}
 				aria-label={props.item.label}
 				title={props.item.label}
+				data-slot="workspace-static-item"
+				data-target-kind={target.kind}
+				data-active={props.item.active ? "true" : "false"}
 				onContextMenu={(event): void => {
 					event.stopPropagation();
 					props.onOpenContextMenu(event, target);
@@ -82,7 +86,7 @@ const WorkspaceTreeBranch = (props: {
 		<ul class={styles.treeList} role="list">
 			<For each={props.nodes}>
 				{(node): JSX.Element => {
-					const Icon = node.icon;
+					const Icon = getWorkspaceNodeIcon(node);
 					const target = createWorkspaceTreeTarget(node);
 
 					return (
@@ -98,6 +102,10 @@ const WorkspaceTreeBranch = (props: {
 								aria-current={node.active ? "page" : undefined}
 								aria-label={node.label}
 								title={node.label}
+								data-slot="workspace-tree-item"
+								data-kind={node.kind}
+								data-item-type={node.kind === "item" ? node.itemType : undefined}
+								data-active={node.active ? "true" : "false"}
 								onContextMenu={(event): void => {
 									event.stopPropagation();
 									props.onOpenContextMenu(event, target);
@@ -163,6 +171,8 @@ const WorkspaceTreeBranch = (props: {
 					[styles.sidebarCollapsed]: props.collapsed,
 				}}
 				aria-label="Left workspace sidebar"
+				data-ui="workspace-sidebar"
+				data-collapsed={props.collapsed ? "true" : "false"}
 				onContextMenu={(event): void => {
 					contextMenu.openMenu(event, sidebarContextMenuTarget);
 				}}
@@ -172,8 +182,10 @@ const WorkspaceTreeBranch = (props: {
 						[styles.header]: true,
 						[styles.headerDrawerOpen]: isProjectDrawerOpen(),
 					}}
+					data-slot="workspace-sidebar-header"
+					data-drawer-open={isProjectDrawerOpen() ? "true" : "false"}
 				>
-					<div class={styles.headerActions}>
+					<div class={styles.headerActions} data-slot="workspace-sidebar-header-actions">
 						<button
 							type="button"
 							classList={{
@@ -182,6 +194,7 @@ const WorkspaceTreeBranch = (props: {
 							}}
 							aria-label={railToggleLabel()}
 							title={railToggleLabel()}
+							data-slot="workspace-sidebar-rail-toggle"
 							onClick={props.onToggleRailCollapse}
 						>
 							{props.railCollapsed ? <ChevronRight size={16} strokeWidth={2} /> : <ChevronLeft size={16} strokeWidth={2} />}
@@ -192,7 +205,7 @@ const WorkspaceTreeBranch = (props: {
 								const Icon = action.icon;
 
 								return (
-									<button type="button" class={styles.headerActionButton} aria-label={action.label} title={action.label}>
+									<button type="button" class={styles.headerActionButton} aria-label={action.label} title={action.label} data-slot="workspace-sidebar-header-action" data-action-id={action.id}>
 										<Icon size={16} strokeWidth={2} />
 									</button>
 								);
@@ -200,7 +213,7 @@ const WorkspaceTreeBranch = (props: {
 						</For>
 					</div>
 
-					<div class={styles.headerControls}>
+					<div class={styles.headerControls} data-slot="workspace-sidebar-header-controls">
 						<ProjectSelector
 							compact={props.collapsed}
 							isOpen={isProjectDrawerOpen()}
@@ -219,12 +232,13 @@ const WorkspaceTreeBranch = (props: {
 						[styles.section]: true,
 						[styles.sectionHidden]: isProjectDrawerOpen(),
 					}}
+					data-slot="workspace-sidebar-section"
 				>
 					<Show when={!props.collapsed}>
 						<span class={styles.sectionLabel}>Workspace</span>
 					</Show>
-					<div class={styles.navScroller}>
-						<ul class={styles.navList} role="list">
+					<div class={styles.navScroller} data-slot="workspace-sidebar-nav-scroller">
+						<ul class={styles.navList} role="list" data-slot="workspace-static-list">
 							<For each={workspaceStaticItems}>
 								{(item): JSX.Element => (
 									<WorkspaceHomeEntry
@@ -240,11 +254,13 @@ const WorkspaceTreeBranch = (props: {
 							<div class={styles.treeSectionLabel}>Items</div>
 						</Show>
 
+						<div data-slot="workspace-tree-root">
 						<WorkspaceTreeBranch
 							nodes={workspaceTree}
 							onOpenContextMenu={contextMenu.openMenu}
 							onOpenContextMenuFromKeyboard={contextMenu.openMenuFromElement}
 						/>
+						</div>
 					</div>
 				</div>
 			</aside>