mirror of
https://github.com/stablyai/orca.git
synced 2026-10-08 00:02:38 +00:00
Jinwoo Hong
0034ede120
* fix(mobile): left-align every line of the desktop host card StatusDot carried its own marginRight on top of each row's spacing, so the host card's status text sat 14 px in and the worktree line was hand-indented to match. Move the dot spacing to the row gap in every consumer and drop the worktree-line indent. Claude-Session: https://claude.ai/code/session_01JNnE9qzUZMMnqpZWCqM3nb * test(mobile): re-pin tasks style parity hash for the title-row gap Claude-Session: https://claude.ai/code/session_01JNnE9qzUZMMnqpZWCqM3nb
48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
import { View, StyleSheet } from 'react-native'
|
|
import { colors } from '../theme/mobile-theme'
|
|
import type { ConnectionState } from '../transport/types'
|
|
import type { ConnectionVerdict } from '../transport/connection-health'
|
|
|
|
const stateColors: Record<ConnectionState, string> = {
|
|
connected: colors.statusGreen,
|
|
connecting: colors.statusAmber,
|
|
handshaking: colors.statusAmber,
|
|
reconnecting: colors.statusAmber,
|
|
disconnected: colors.textMuted,
|
|
'auth-failed': colors.statusRed
|
|
}
|
|
|
|
export function statusDotColor(state: ConnectionState, verdict?: ConnectionVerdict): string {
|
|
if (verdict?.kind === 'unreachable' || verdict?.kind === 'auth-failed') {
|
|
return colors.statusRed
|
|
}
|
|
if (verdict?.kind === 'warning' || (verdict?.kind === 'normal' && verdict.label.endsWith('…'))) {
|
|
return colors.statusAmber
|
|
}
|
|
return stateColors[state] ?? colors.textMuted
|
|
}
|
|
|
|
// Why: when caller passes a verdict, the dot color reflects the verdict's
|
|
// severity instead of the raw transport state. This avoids the "amber dot
|
|
// next to red 'Can't reach desktop' label" mismatch — the underlying
|
|
// transport is still 'reconnecting' (amber) but the user-visible meaning
|
|
// has escalated to error (red).
|
|
export function StatusDot({
|
|
state,
|
|
verdict
|
|
}: {
|
|
state: ConnectionState
|
|
verdict?: ConnectionVerdict
|
|
}) {
|
|
const color = statusDotColor(state, verdict)
|
|
return <View style={[styles.dot, { backgroundColor: color }]} />
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
dot: {
|
|
width: 8,
|
|
height: 8,
|
|
borderRadius: 4
|
|
}
|
|
})
|