| ... | ... | @@ -1,8 +1,10 @@ |
| 1 | 1 | import { useAtomValue } from "@effect/atom-react"; |
| 2 | 2 | import { |
| 3 | 3 | type ConnectionRoute, |
| 4 | type ConnectionRouteKind, |
| 4 | 5 | connectionRouteAddress, |
| 5 | 6 | connectionRouteId, |
| 7 | connectionRouteKind, |
| 6 | 8 | connectionRouteLabel, |
| 7 | 9 | connectionRoutes, |
| 8 | 10 | isLearned, |
| ... | ... | @@ -10,18 +12,32 @@ import { |
| 10 | 12 | import type { EnvironmentId } from "@t3tools/contracts"; |
| 11 | 13 | import * as Option from "effect/Option"; |
| 12 | 14 | import { useEffect, useMemo, useRef, useState } from "react"; |
| 13 | | import { Alert, Pressable, View } from "react-native"; |
| 15 | import { Alert, Platform, Pressable, View } from "react-native"; |
| 14 | 16 | import { Gesture, GestureDetector } from "react-native-gesture-handler"; |
| 15 | 17 | import Reanimated, { ReduceMotion, useAnimatedStyle, withTiming } from "react-native-reanimated"; |
| 16 | 18 | |
| 17 | | import { SymbolView } from "../../components/AppSymbol"; |
| 19 | import { type AppSymbolName, SymbolView } from "../../components/AppSymbol"; |
| 18 | 20 | import { AppText as Text } from "../../components/AppText"; |
| 21 | import { StatusPill } from "../../components/StatusPill"; |
| 19 | 22 | import { environmentCatalog } from "../../connection/catalog"; |
| 23 | import { cn } from "../../lib/cn"; |
| 20 | 24 | import { environmentSession } from "../../state/session"; |
| 21 | 25 | import { useAtomCommand } from "../../state/use-atom-command"; |
| 26 | import { connectionTone } from "../connection/connectionTone"; |
| 27 | import { SettingsActionRow } from "./components/SettingsActionRow"; |
| 22 | 28 | import { SettingsSection } from "./components/SettingsSection"; |
| 23 | 29 | |
| 24 | | const ROW_HEIGHT = 64; |
| 30 | const ICON_SIZE = Platform.OS === "android" ? 24 : 22; |
| 31 | const REMOVE_SIZE = 20; |
| 32 | |
| 33 | const ROUTE_ICONS: Record<ConnectionRouteKind, AppSymbolName> = { |
| 34 | relay: "cloud", |
| 35 | loopback: "desktopcomputer", |
| 36 | lan: "wifi", |
| 37 | tailnet: "point.3.connected.trianglepath.dotted", |
| 38 | public: "globe", |
| 39 | ssh: "terminal", |
| 40 | }; |
| 25 | 41 | |
| 26 | 42 | /** |
| 27 | 43 | * The ways this device reaches an environment, preferred first. The first |
| ... | ... | @@ -56,6 +72,12 @@ export function EnvironmentRoutesSection({ |
| 56 | 72 | const [drag, setDrag] = useState<{ readonly id: string; readonly translation: number } | null>( |
| 57 | 73 | null, |
| 58 | 74 | ); |
| 75 | // Rows size to their content, so a drag measures how far it has moved past each one. |
| 76 | const [heights, setHeights] = useState<ReadonlyMap<string, number>>(() => new Map()); |
| 77 | // Each drop remounts the rows so the new order and the cleared drag offsets |
| 78 | // land in one frame. Kept rows would show their old offsets in their new |
| 79 | // slots until the animated style catches up, and the card flashes empty. |
| 80 | const [drops, setDrops] = useState(0); |
| 59 | 81 | if (entry === undefined) return null; |
| 60 | 82 | |
| 61 | 83 | const byId = new Map(saved.map((route) => [connectionRouteId(route.target), route])); |
| ... | ... | @@ -76,8 +98,19 @@ export function EnvironmentRoutesSection({ |
| 76 | 98 | next.splice(to, 0, moved!); |
| 77 | 99 | commit(next); |
| 78 | 100 | }; |
| 79 | | const dropIndex = (from: number, translation: number) => |
| 80 | | Math.max(0, Math.min(order.length - 1, from + Math.round(translation / ROW_HEIGHT))); |
| 101 | // A lifted row takes a neighbour's slot once it has moved past half of that row. |
| 102 | const dropIndex = (from: number, translation: number) => { |
| 103 | const step = translation > 0 ? 1 : -1; |
| 104 | let to = from; |
| 105 | let remaining = Math.abs(translation); |
| 106 | while (to + step >= 0 && to + step < order.length) { |
| 107 | const next = heights.get(order[to + step]!) ?? 0; |
| 108 | if (next === 0 || remaining < next / 2) break; |
| 109 | remaining -= next; |
| 110 | to += step; |
| 111 | } |
| 112 | return to; |
| 113 | }; |
| 81 | 114 | const confirmRemove = (route: ConnectionRoute) => |
| 82 | 115 | Alert.alert( |
| 83 | 116 | `Remove ${connectionRouteLabel(route)}?`, |
| ... | ... | @@ -106,7 +139,7 @@ export function EnvironmentRoutesSection({ |
| 106 | 139 | onPress={() => setEditing((value) => !value)} |
| 107 | 140 | className="px-2 py-1 active:opacity-70" |
| 108 | 141 | > |
| 109 | | <Text className="text-sm font-t3-medium text-primary-text"> |
| 142 | <Text className="text-sm font-t3-medium text-foreground android:text-primary-text"> |
| 110 | 143 | {editing ? "Done" : "Edit"} |
| 111 | 144 | </Text> |
| 112 | 145 | </Pressable> |
| ... | ... | @@ -116,17 +149,18 @@ export function EnvironmentRoutesSection({ |
| 116 | 149 | {routes.map((route, index) => { |
| 117 | 150 | const id = connectionRouteId(route.target); |
| 118 | 151 | // Rows between the lifted row and its drop slot shift to make room. |
| 152 | const lifted = drag === null ? 0 : (heights.get(drag.id) ?? 0); |
| 119 | 153 | const shift = |
| 120 | 154 | dragFrom === -1 || index === dragFrom |
| 121 | 155 | ? 0 |
| 122 | 156 | : dragFrom < dragTo && index > dragFrom && index <= dragTo |
| 123 | | ? -ROW_HEIGHT |
| 157 | ? -lifted |
| 124 | 158 | : dragFrom > dragTo && index < dragFrom && index >= dragTo |
| 125 | | ? ROW_HEIGHT |
| 159 | ? lifted |
| 126 | 160 | : 0; |
| 127 | 161 | return ( |
| 128 | 162 | <RouteRow |
| 129 | | key={id} |
| 163 | key={`${id}:${drops}`} |
| 130 | 164 | route={route} |
| 131 | 165 | position={index + 1} |
| 132 | 166 | count={routes.length} |
| ... | ... | @@ -134,10 +168,16 @@ export function EnvironmentRoutesSection({ |
| 134 | 168 | editing={editing} |
| 135 | 169 | offset={index === dragFrom ? (drag?.translation ?? 0) : shift} |
| 136 | 170 | lifted={index === dragFrom} |
| 171 | onHeight={(height) => |
| 172 | setHeights((current) => |
| 173 | current.get(id) === height ? current : new Map(current).set(id, height), |
| 174 | ) |
| 175 | } |
| 137 | 176 | onDragStart={() => setDrag({ id, translation: 0 })} |
| 138 | 177 | onDragMove={(translation) => setDrag({ id, translation })} |
| 139 | 178 | onDragEnd={(translation, cancelled) => { |
| 140 | 179 | setDrag(null); |
| 180 | setDrops((count) => count + 1); |
| 141 | 181 | if (!cancelled) move(index, dropIndex(index, translation)); |
| 142 | 182 | }} |
| 143 | 183 | onStep={(direction) => move(index, direction === "up" ? index - 1 : index + 1)} |
| ... | ... | @@ -149,14 +189,7 @@ export function EnvironmentRoutesSection({ |
| 149 | 189 | /> |
| 150 | 190 | ); |
| 151 | 191 | })} |
| 152 | | <Pressable |
| 153 | | accessibilityRole="button" |
| 154 | | onPress={onAddRoute} |
| 155 | | className="flex-row items-center gap-3 px-4 py-3.5 active:opacity-70" |
| 156 | | > |
| 157 | | <SymbolView name="plus" size={16} tintColorClassName="accent-icon" type="monochrome" /> |
| 158 | | <Text className="text-base text-primary-text">Add route</Text> |
| 159 | | </Pressable> |
| 192 | <SettingsActionRow icon="plus" label="Add route" onPress={onAddRoute} /> |
| 160 | 193 | </SettingsSection> |
| 161 | 194 | ); |
| 162 | 195 | } |
| ... | ... | @@ -169,6 +202,7 @@ function RouteRow(props: { |
| 169 | 202 | readonly editing: boolean; |
| 170 | 203 | readonly offset: number; |
| 171 | 204 | readonly lifted: boolean; |
| 205 | readonly onHeight: (height: number) => void; |
| 172 | 206 | readonly onDragStart: () => void; |
| 173 | 207 | readonly onDragMove: (translation: number) => void; |
| 174 | 208 | readonly onDragEnd: (translation: number, cancelled: boolean) => void; |
| ... | ... | @@ -190,25 +224,27 @@ function RouteRow(props: { |
| 190 | 224 | })); |
| 191 | 225 | return ( |
| 192 | 226 | <Reanimated.View |
| 193 | | style={[{ height: ROW_HEIGHT }, style]} |
| 194 | | className={ |
| 195 | | lifted ? "flex-row items-center bg-grouped-card shadow-md" : "flex-row items-center" |
| 196 | | } |
| 227 | style={style} |
| 228 | onLayout={(event) => props.onHeight(event.nativeEvent.layout.height)} |
| 229 | className={cn("flex-row items-center gap-4 pl-4", lifted && "bg-grouped-card shadow-md")} |
| 197 | 230 | > |
| 198 | 231 | {props.editing && props.onRemove ? ( |
| 199 | 232 | <Pressable |
| 200 | 233 | accessibilityRole="button" |
| 201 | 234 | accessibilityLabel={`Remove ${label} route`} |
| 235 | hitSlop={8} |
| 202 | 236 | onPress={props.onRemove} |
| 203 | | className="h-full items-center justify-center pl-4 active:opacity-70" |
| 237 | className="active:opacity-70" |
| 204 | 238 | > |
| 205 | 239 | <SymbolView |
| 206 | 240 | name="xmark.circle.fill" |
| 207 | | size={20} |
| 241 | size={REMOVE_SIZE} |
| 208 | 242 | tintColorClassName="accent-danger-foreground" |
| 209 | 243 | type="monochrome" |
| 210 | 244 | /> |
| 211 | 245 | </Pressable> |
| 246 | ) : props.editing ? ( |
| 247 | <View style={{ width: REMOVE_SIZE }} /> |
| 212 | 248 | ) : null} |
| 213 | 249 | <View |
| 214 | 250 | accessible |
| ... | ... | @@ -221,19 +257,35 @@ function RouteRow(props: { |
| 221 | 257 | ] |
| 222 | 258 | .filter((part) => part !== null) |
| 223 | 259 | .join(", ")} |
| 224 | | className="min-w-0 flex-1 gap-0.5 px-4" |
| 260 | // Matches the padding of the settings rows around it. |
| 261 | className={cn( |
| 262 | "min-w-0 flex-1 flex-row items-center gap-4 py-4 android:py-3", |
| 263 | address !== null ? "android:min-h-18" : "android:min-h-14", |
| 264 | !props.editing && "pr-4", |
| 265 | )} |
| 225 | 266 | > |
| 226 | | <View className="flex-row items-center gap-2"> |
| 227 | | <Text className="text-base text-foreground">{label}</Text> |
| 228 | | {props.inUse ? ( |
| 229 | | <Text className="text-xs font-t3-medium text-success-foreground">In use</Text> |
| 267 | <SymbolView |
| 268 | name={ROUTE_ICONS[connectionRouteKind(route)]} |
| 269 | size={ICON_SIZE} |
| 270 | tintColorClassName="accent-icon" |
| 271 | type="monochrome" |
| 272 | weight="regular" |
| 273 | /> |
| 274 | <View className="min-w-0 flex-1 gap-0.5 android:gap-1"> |
| 275 | <View className="flex-row items-center gap-2"> |
| 276 | <Text numberOfLines={1} className="shrink text-lg text-foreground android:text-base"> |
| 277 | {label} |
| 278 | </Text> |
| 279 | {props.inUse ? ( |
| 280 | <StatusPill {...connectionTone("connected")} label="In use" size="compact" /> |
| 281 | ) : null} |
| 282 | </View> |
| 283 | {address !== null ? ( |
| 284 | <Text numberOfLines={1} className="text-sm text-foreground-muted"> |
| 285 | {isLearned(route) ? `${address} · found automatically` : address} |
| 286 | </Text> |
| 230 | 287 | ) : null} |
| 231 | 288 | </View> |
| 232 | | {address !== null ? ( |
| 233 | | <Text numberOfLines={1} className="text-sm text-foreground-muted"> |
| 234 | | {isLearned(route) ? `${address} · found automatically` : address} |
| 235 | | </Text> |
| 236 | | ) : null} |
| 237 | 289 | </View> |
| 238 | 290 | {props.editing ? ( |
| 239 | 291 | <DragHandle |
| ... | ... | @@ -297,7 +349,7 @@ function DragHandle(props: { |
| 297 | 349 | if (nativeEvent.actionName === "decrement" && props.canMoveUp) props.onStep("up"); |
| 298 | 350 | if (nativeEvent.actionName === "increment" && props.canMoveDown) props.onStep("down"); |
| 299 | 351 | }} |
| 300 | | style={{ width: 48, height: ROW_HEIGHT, alignItems: "center", justifyContent: "center" }} |
| 352 | style={{ width: 48, alignSelf: "stretch", alignItems: "center", justifyContent: "center" }} |
| 301 | 353 | > |
| 302 | 354 | <SymbolView |
| 303 | 355 | name="line.3.horizontal" |
Julius Marminge <julius0216@outlook.com> 2026-10-05 08:55:33-07:00
GitHub <noreply@github.com> 2026-10-05 08:55:33-07:00