feat(desktop): handle local/remote/offline state on sidebar workspace icons

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

@@ -29,6 +29,7 @@ export function DashboardSidebarWorkspaceItem({
 		projectId,
 		accentColor = null,
 		hostType,
+		hostIsOnline,
 		name,
 		branch,
 		creationStatus,
@@ -85,6 +86,7 @@ export function DashboardSidebarWorkspaceItem({
 				)}
 				<DashboardSidebarCollapsedWorkspaceButton
 					hostType={hostType}
+					hostIsOnline={hostIsOnline}
 					isActive={isActive}
 					onClick={isPending ? handlePendingClick : handleClick}
 					creationStatus={creationStatus}

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

@@ -7,6 +7,7 @@ import { DashboardSidebarWorkspaceIcon } from "../DashboardSidebarWorkspaceIcon"
 interface DashboardSidebarCollapsedWorkspaceButtonProps
 	extends ComponentPropsWithoutRef<"button"> {
 	hostType: DashboardSidebarWorkspaceHostType;
+	hostIsOnline: boolean | null;
 	isActive: boolean;
 	workspaceStatus?: ActivePaneStatus | null;
 	creationStatus?: "preparing" | "generating-branch" | "creating" | "failed";
@@ -19,6 +20,7 @@ export const DashboardSidebarCollapsedWorkspaceButton = forwardRef<
 	(
 		{
 			hostType,
+			hostIsOnline,
 			isActive,
 			workspaceStatus = null,
 			creationStatus,
@@ -41,6 +43,7 @@ export const DashboardSidebarCollapsedWorkspaceButton = forwardRef<
 			>
 				<DashboardSidebarWorkspaceIcon
 					hostType={hostType}
+					hostIsOnline={hostIsOnline}
 					isActive={isActive}
 					variant="collapsed"
 					workspaceStatus={workspaceStatus}

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

@@ -59,6 +59,7 @@ export const DashboardSidebarExpandedWorkspaceRow = forwardRef<
 		const {
 			accentColor = null,
 			hostType,
+			hostIsOnline,
 			name,
 			branch,
 			pullRequest,
@@ -122,6 +123,7 @@ export const DashboardSidebarExpandedWorkspaceRow = forwardRef<
 						<div className="relative mr-2.5 flex size-5 shrink-0 items-center justify-center">
 							<DashboardSidebarWorkspaceIcon
 								hostType={hostType}
+								hostIsOnline={hostIsOnline}
 								isActive={isActive}
 								variant="expanded"
 								workspaceStatus={null}
@@ -130,9 +132,23 @@ export const DashboardSidebarExpandedWorkspaceRow = forwardRef<
 						</div>
 					</TooltipTrigger>
 					<TooltipContent side="right" sideOffset={8}>
-						<p className="text-xs font-medium">Worktree workspace</p>
+						<p className="text-xs font-medium">
+							{hostType === "local-device"
+								? "Local workspace"
+								: hostType === "remote-device"
+									? hostIsOnline === false
+										? "Remote workspace — device offline"
+										: "Remote workspace"
+									: "Cloud workspace"}
+						</p>
 						<p className="text-xs text-muted-foreground">
-							Isolated copy for parallel development
+							{hostType === "local-device"
+								? "Running on this device"
+								: hostType === "remote-device"
+									? hostIsOnline === false
+										? "The associated device isn't reachable right now"
+										: "Running on a paired device"
+									: "Hosted in the cloud"}
 						</p>
 					</TooltipContent>
 				</Tooltip>

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

@@ -1,13 +1,14 @@
 import { cn } from "@superset/ui/utils";
 import { HiExclamationTriangle } from "react-icons/hi2";
-import { LuCloud, LuFolderGit2, LuLaptop } from "react-icons/lu";
+import { LuCloud, LuCloudOff } from "react-icons/lu";
 import { AsciiSpinner } from "renderer/screens/main/components/AsciiSpinner";
 import { StatusIndicator } from "renderer/screens/main/components/StatusIndicator";
 import type { ActivePaneStatus } from "shared/tabs-types";
 import type { DashboardSidebarWorkspaceHostType } from "../../../../types";
 
 interface DashboardSidebarWorkspaceIconProps {
 	hostType: DashboardSidebarWorkspaceHostType;
+	hostIsOnline: boolean | null;
 	isActive: boolean;
 	variant: "collapsed" | "expanded";
 	workspaceStatus?: ActivePaneStatus | null;
@@ -21,46 +22,54 @@ const OVERLAY_POSITION = {
 
 export function DashboardSidebarWorkspaceIcon({
 	hostType,
+	hostIsOnline,
 	isActive,
 	variant,
 	workspaceStatus = null,
 	creationStatus,
 }: DashboardSidebarWorkspaceIconProps) {
 	const overlayPosition = OVERLAY_POSITION[variant];
+	const iconColor = isActive ? "text-foreground" : "text-muted-foreground";
+	const isRemoteDeviceOffline =
+		hostType === "remote-device" && hostIsOnline === false;
+
+	const renderHostIcon = () => {
+		if (hostType === "local-device") {
+			return (
+				<span
+					className={cn(
+						"size-1.5 rounded-full transition-colors",
+						isActive ? "bg-foreground" : "bg-muted-foreground",
+					)}
+				/>
+			);
+		}
+
+		if (isRemoteDeviceOffline) {
+			return (
+				<LuCloudOff
+					className={cn("size-4 transition-colors", iconColor, "opacity-60")}
+					strokeWidth={1.75}
+				/>
+			);
+		}
+
+		return (
+			<LuCloud
+				className={cn("size-4 transition-colors", iconColor)}
+				strokeWidth={1.75}
+			/>
+		);
+	};
 
 	return (
 		<>
 			{creationStatus === "failed" ? (
 				<HiExclamationTriangle className="size-4 text-destructive" />
 			) : creationStatus || workspaceStatus === "working" ? (
 				<AsciiSpinner className="text-base" />
-			) : hostType === "cloud" ? (
-				<LuCloud
-					className={cn(
-						"size-4 transition-colors",
-						variant === "expanded" && "transition-colors",
-						isActive ? "text-foreground" : "text-muted-foreground",
-					)}
-					strokeWidth={1.75}
-				/>
-			) : hostType === "remote-device" ? (
-				<LuLaptop
-					className={cn(
-						"size-4 transition-colors",
-						variant === "expanded" && "transition-colors",
-						isActive ? "text-foreground" : "text-muted-foreground",
-					)}
-					strokeWidth={1.75}
-				/>
 			) : (
-				<LuFolderGit2
-					className={cn(
-						"size-4 transition-colors",
-						variant === "expanded" && "transition-colors",
-						isActive ? "text-foreground" : "text-muted-foreground",
-					)}
-					strokeWidth={1.75}
-				/>
+				renderHostIcon()
 			)}
 			{workspaceStatus && workspaceStatus !== "working" && (
 				<span className={cn("absolute", overlayPosition)}>

apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/hooks/useDashboardSidebarData/useDashboardSidebarData.ts

@@ -120,6 +120,7 @@ export function useDashboardSidebarData() {
 					projectId: sidebarWorkspaces.sidebarState.projectId,
 					hostId: workspaces.hostId,
 					hostMachineId: hosts?.machineId ?? null,
+					hostIsOnline: hosts?.isOnline ?? null,
 					name: workspaces.name,
 					branch: workspaces.branch,
 					createdAt: workspaces.createdAt,
@@ -239,6 +240,10 @@ export function useDashboardSidebarData() {
 				projectId: workspace.projectId,
 				hostId: workspace.hostId,
 				hostType,
+				hostIsOnline:
+					hostType === "remote-device"
+						? (workspace.hostIsOnline ?? null)
+						: null,
 				accentColor: null,
 				name: workspace.name,
 				branch: workspace.branch,
@@ -290,6 +295,7 @@ export function useDashboardSidebarData() {
 				projectId: pw.projectId,
 				hostId: "",
 				hostType: "local-device",
+				hostIsOnline: null,
 				accentColor: null,
 				name: pw.name,
 				branch: pw.branchName,

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

@@ -25,6 +25,7 @@ export interface DashboardSidebarWorkspace {
 	projectId: string;
 	hostId: string;
 	hostType: DashboardSidebarWorkspaceHostType;
+	hostIsOnline: boolean | null;
 	accentColor: string | null;
 	name: string;
 	branch: string;