mobile: use the desktop sidebar's cloud glyph for the cloud scope

apps/mobile/screens/(authenticated)/(home)/filter/FilterScreen.tsx

@@ -2,7 +2,6 @@ import Ionicons from "@expo/vector-icons/Ionicons";
 import { useLingui } from "@lingui/react/macro";
 import { i18n } from "@superset/i18n";
 import { Stack, useRouter } from "expo-router";
-import { Cloud } from "lucide-react-native";
 import { View } from "react-native";
 import { Icon } from "@/components/ui/icon";
 import { useTheme } from "@/hooks/useTheme";
@@ -12,6 +11,7 @@ import {
 } from "@/screens/(authenticated)/(home)/home/stores/workspacesFilterStore";
 import { useSelectedHost } from "@/screens/(authenticated)/(home)/hooks/useSelectedHost";
 import { useWorkspaceScope } from "@/screens/(authenticated)/(home)/hooks/useWorkspaceScope";
+import { CloudIcon } from "@/screens/(authenticated)/components/CloudIcon";
 import { HostStatusDot } from "@/screens/(authenticated)/components/HostStatusDot";
 import { ListRow } from "@/screens/(authenticated)/components/ListRow";
 import { ListRowValue } from "@/screens/(authenticated)/components/ListRowValue";
@@ -47,7 +47,7 @@ export function FilterScreen() {
 						accessory={
 							cloud ? (
 								<Icon
-									as={Cloud}
+									as={CloudIcon}
 									className="text-muted-foreground size-4"
 									strokeWidth={2}
 								/>

apps/mobile/screens/(authenticated)/(home)/filter/scope/ScopeFilterScreen.tsx

@@ -1,6 +1,5 @@
 import { useLingui } from "@lingui/react/macro";
 import { useRouter } from "expo-router";
-import { Cloud } from "lucide-react-native";
 import { useMemo } from "react";
 import { ScrollView } from "react-native";
 import { Icon } from "@/components/ui/icon";
@@ -13,6 +12,7 @@ import {
 	useCloudScopeEnabled,
 	useWorkspaceScope,
 } from "@/screens/(authenticated)/(home)/hooks/useWorkspaceScope";
+import { CloudIcon } from "@/screens/(authenticated)/components/CloudIcon";
 import { HostStatusDot } from "@/screens/(authenticated)/components/HostStatusDot";
 import { ListRow } from "@/screens/(authenticated)/components/ListRow";
 import { ListRowCheck } from "@/screens/(authenticated)/components/ListRowCheck";
@@ -70,7 +70,7 @@ export function ScopeFilterScreen() {
 				<ListRow
 					icon={
 						<Icon
-							as={Cloud}
+							as={CloudIcon}
 							className="text-muted-foreground size-4"
 							strokeWidth={2}
 						/>

apps/mobile/screens/(authenticated)/(home)/home/components/ScopeBar/ScopeBar.tsx

@@ -1,7 +1,7 @@
-import { Cloud } from "lucide-react-native";
 import { View } from "react-native";
 import { Icon } from "@/components/ui/icon";
 import type { WorkspaceScope } from "@/screens/(authenticated)/(home)/home/stores/workspacesFilterStore";
+import { CloudIcon } from "@/screens/(authenticated)/components/CloudIcon";
 import { HostStatusDot } from "@/screens/(authenticated)/components/HostStatusDot";
 import { Chip } from "./components/Chip";
 
@@ -42,7 +42,7 @@ export function ScopeBar({
 					leading={
 						cloud ? (
 							<Icon
-								as={Cloud}
+								as={CloudIcon}
 								className="text-muted-foreground size-3.5"
 								strokeWidth={2}
 							/>

apps/mobile/screens/(authenticated)/components/CloudIcon/CloudIcon.tsx

@@ -0,0 +1,12 @@
+import { createLucideIcon } from "lucide-react-native";
+
+/** Tabler's cloud, the glyph the desktop sidebar draws for cloud workspaces. */
+export const CloudIcon = createLucideIcon("Cloud", [
+	[
+		"path",
+		{
+			d: "M6.657 18c-2.572 0 -4.657 -2.007 -4.657 -4.483c0 -2.475 2.085 -4.482 4.657 -4.482c.393 -1.762 1.794 -3.2 3.675 -3.773c1.88 -.572 3.956 -.193 5.444 1c1.488 1.19 2.162 3.007 1.77 4.769h.99c1.913 0 3.464 1.56 3.464 3.486c0 1.927 -1.551 3.487 -3.465 3.487h-11.878",
+			key: "cloud",
+		},
+	],
+]);

apps/mobile/screens/(authenticated)/components/CloudIcon/index.ts

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

apps/mobile/screens/(authenticated)/workspace/[id]/components/CloudWorkspaceProvisioningState/CloudWorkspaceProvisioningState.tsx

@@ -3,7 +3,6 @@ import { useRouter } from "expo-router";
 import {
 	AlertCircle,
 	Check,
-	Cloud,
 	GitBranch,
 	type LucideIcon,
 } from "lucide-react-native";
@@ -15,6 +14,7 @@ import { Text } from "@/components/ui/text";
 import { useCloudWorkspaceActions } from "@/hooks/useCloudWorkspaceActions";
 import type { CloudWorkspaceRow } from "@/hooks/useCloudWorkspaces";
 import { cn } from "@/lib/utils";
+import { CloudIcon } from "@/screens/(authenticated)/components/CloudIcon";
 
 /**
  * A warm sandbox is up in a second or two; the first ones after an image
@@ -64,7 +64,7 @@ export function CloudWorkspaceProvisioningState({
 	const sandboxReady = cloud.status !== "provisioning";
 
 	return (
-		<Frame icon={Cloud} iconClassName="text-muted-foreground">
+		<Frame icon={CloudIcon} iconClassName="text-muted-foreground">
 			<Heading
 				title={t({
 					message: "Starting workspace",