feat(desktop): group sessions into tag folders in the sidebar

apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/DashboardSidebar.tsx

@@ -131,6 +131,8 @@ export function DashboardSidebar({
 		groups,
 		pinnedWorkspaces,
 		sessionWorkspaces,
+		sessionTagGroups,
+		ungroupedSessionWorkspaces,
 		refreshWorkspacePullRequest,
 		toggleProjectCollapsed,
 	} = useDashboardSidebarData();
@@ -265,6 +267,7 @@ export function DashboardSidebar({
 	return (
 		<DashboardSidebarSelectionProvider
 			availableWorkspaceIds={selectableWorkspaceIds}
+			activeWorkspaceId={activeV2WorkspaceId}
 		>
 			<DashboardSidebarSectionRenameProvider>
 				<DashboardSidebarHoverProvider>
@@ -303,6 +306,8 @@ export function DashboardSidebar({
 										/>
 										<DashboardSidebarSessionsSection
 											sessionWorkspaces={sessionWorkspaces}
+											tagGroups={sessionTagGroups}
+											ungroupedWorkspaces={ungroupedSessionWorkspaces}
 											isCollapsed={isCollapsed}
 											workspaceShortcutLabels={workspaceShortcutLabels}
 											onWorkspaceHover={refreshWorkspacePullRequest}

apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarCloudSection/DashboardSidebarCloudSection.tsx

@@ -145,6 +145,7 @@ export function DashboardSidebarCloudSection({
 					<DashboardSidebarWorkspaceItem
 						key={workspace.id}
 						workspace={workspace}
+						indentation="top-level"
 						onHoverCardOpen={onWorkspaceHover}
 					/>
 				))}

apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarGroupHeader/DashboardSidebarGroupHeader.tsx

@@ -0,0 +1,91 @@
+import { cn } from "@superset/ui/utils";
+import {
+	type ComponentPropsWithoutRef,
+	forwardRef,
+	type ReactNode,
+} from "react";
+import { HiChevronRight } from "react-icons/hi2";
+
+interface DashboardSidebarGroupHeaderProps
+	extends ComponentPropsWithoutRef<"div"> {
+	label: ReactNode;
+	isCollapsed: boolean;
+	onToggleCollapse: () => void;
+	actions?: ReactNode;
+	isEditing?: boolean;
+	isDraggable?: boolean;
+}
+
+/** Shared visual and interaction shell for every nested sidebar group. */
+export const DashboardSidebarGroupHeader = forwardRef<
+	HTMLDivElement,
+	DashboardSidebarGroupHeaderProps
+>(
+	(
+		{
+			label,
+			isCollapsed,
+			onToggleCollapse,
+			actions,
+			isEditing = false,
+			isDraggable = false,
+			className,
+			...props
+		},
+		ref,
+	) => (
+		// biome-ignore lint/a11y/noStaticElementInteractions: The header acts as a single toggle target while preserving nested inline controls in edit mode.
+		<div
+			ref={ref}
+			role={isEditing ? undefined : "button"}
+			tabIndex={isEditing ? undefined : 0}
+			onClick={isEditing ? undefined : onToggleCollapse}
+			onKeyDown={
+				isEditing
+					? undefined
+					: (event) => {
+							if (event.key === "Enter" || event.key === " ") {
+								event.preventDefault();
+								onToggleCollapse();
+							}
+						}
+			}
+			className={cn(
+				// Group containers have a 2px left accent border. Use a 6px left
+				// margin so their content aligns with borderless top-level rows.
+				"group ml-1.5 mr-2 flex min-h-7 items-center rounded-md py-1 pl-2 pr-2 text-[13px] font-medium text-muted-foreground transition-colors hover:bg-fill-hover",
+				className,
+			)}
+			{...props}
+		>
+			<div
+				className={cn(
+					"mr-1 grid h-5 w-5 shrink-0 place-items-center",
+					isDraggable && "cursor-grab active:cursor-grabbing",
+				)}
+			>
+				<HiChevronRight
+					className={cn(
+						"size-3 text-muted-foreground transition-transform duration-150",
+						!isCollapsed && "rotate-90",
+					)}
+				/>
+			</div>
+			<div className="flex min-w-0 flex-1 items-center gap-1.5">{label}</div>
+			{!isEditing && (
+				<div className="ml-1 flex size-5 shrink-0 items-center justify-center">
+					{actions ? (
+						// biome-ignore lint/a11y/noStaticElementInteractions: Nested action controls own their semantics; this wrapper isolates them from the header toggle.
+						<div
+							className="hidden size-full items-center justify-center group-hover:flex group-has-[:focus]:flex has-[[data-state=open]]:flex"
+							onClick={(event) => event.stopPropagation()}
+							onKeyDown={(event) => event.stopPropagation()}
+						>
+							{actions}
+						</div>
+					) : null}
+				</div>
+			)}
+		</div>
+	),
+);

apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarGroupHeader/index.ts

@@ -0,0 +1 @@
+export { DashboardSidebarGroupHeader } from "./DashboardSidebarGroupHeader";

apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarPinnedSection/DashboardSidebarPinnedSection.tsx

@@ -91,6 +91,7 @@ export function DashboardSidebarPinnedSection({
 								key={String(id)}
 								sortableId={String(id)}
 								workspace={workspace}
+								indentation="top-level"
 								pinnedContext={{
 									projectName: project?.name ?? null,
 									projectIconUrl: project?.iconUrl ?? null,

apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarSection/components/DashboardSidebarSectionContextMenu/components/SectionActionsMenuItems/SectionActionsMenuItems.tsx

@@ -102,7 +102,7 @@ export function SectionActionsMenuItems({
 
 		return renderItem({
 			key: projectColor.value,
-			onSelect: () => onSetColor(isDefault ? null : projectColor.value),
+			onSelect: () => onSetColor?.(isDefault ? null : projectColor.value),
 			children: (
 				<>
 					<span
@@ -145,21 +145,21 @@ export function SectionActionsMenuItems({
 					</>
 				),
 			})}
-			{kind === "context" ? (
+			{onSetColor && kind === "context" ? (
 				<ContextMenuSub>
 					<ContextMenuSubTrigger>{colorTrigger}</ContextMenuSubTrigger>
 					<ContextMenuSubContent className="w-40 max-h-80 overflow-y-auto">
 						{colorItems}
 					</ContextMenuSubContent>
 				</ContextMenuSub>
-			) : (
+			) : onSetColor ? (
 				<DropdownMenuSub>
 					<DropdownMenuSubTrigger>{colorTrigger}</DropdownMenuSubTrigger>
 					<DropdownMenuSubContent className="w-40 max-h-80 overflow-y-auto">
 						{colorItems}
 					</DropdownMenuSubContent>
 				</DropdownMenuSub>
-			)}
+			) : null}
 			{onHide
 				? renderItem({
 						onSelect: onHide,

apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarSection/components/DashboardSidebarSectionContextMenu/types.ts

@@ -1,7 +1,7 @@
 export interface DashboardSidebarSectionActionsProps {
 	color: string | null;
 	onRename: () => void;
-	onSetColor: (color: string | null) => void;
+	onSetColor?: (color: string | null) => void;
 	onDelete: () => void;
 	/** Tag-backed folders only: hide the folder without untagging anyone. */
 	onHide?: () => void;