From 5f75b247b9ccffca614c83f26f1c41fa13f29b04 Mon Sep 17 00:00:00 2001 From: Neil <4138956+nwparker@users.noreply.github.com> Date: Sat, 29 Aug 2026 20:07:23 -0700 Subject: [PATCH] Extract mobile troubleshoot screen styles (#17146) * Split speech session lifecycle * Split terminal output scheduler pipeline * Split mobile browser pane modules * Prune resolved max-lines suppressions * Split pane tree equalization logic * Extract mobile troubleshoot screen styles * Fix F3-speech for #17123 * Fix F1-cycle for #17131 --- config/max-lines-baseline.txt | 1 - mobile/.oxlintrc.json | 6 - mobile/app/troubleshoot.tsx | 145 +----------------- .../diagnostics/troubleshoot-screen-styles.ts | 134 ++++++++++++++++ 4 files changed, 137 insertions(+), 149 deletions(-) create mode 100644 mobile/src/diagnostics/troubleshoot-screen-styles.ts diff --git a/config/max-lines-baseline.txt b/config/max-lines-baseline.txt index db6c77afbd8..859b4f5c59c 100644 --- a/config/max-lines-baseline.txt +++ b/config/max-lines-baseline.txt @@ -79,7 +79,6 @@ mobile-config app/h/*/session/*.tsx mobile-config app/h/*/source-control/*.tsx mobile-config app/h/*/tasks.tsx mobile-config app/index.tsx -mobile-config app/troubleshoot.tsx mobile-config scripts/mock-server.ts mobile-config src/terminal/terminal-webview-html.ts mobile-config src/transport/rpc-client.ts diff --git a/mobile/.oxlintrc.json b/mobile/.oxlintrc.json index 9100394b001..f845c3e9a1f 100644 --- a/mobile/.oxlintrc.json +++ b/mobile/.oxlintrc.json @@ -69,12 +69,6 @@ "max-lines": ["error", { "max": 407, "skipBlankLines": true, "skipComments": true }] } }, - { - "files": ["app/troubleshoot.tsx"], - "rules": { - "max-lines": ["error", { "max": 436, "skipBlankLines": true, "skipComments": true }] - } - }, { "files": ["app/h/*/files/*.tsx"], "rules": { diff --git a/mobile/app/troubleshoot.tsx b/mobile/app/troubleshoot.tsx index c4313e88fcc..63fc0ddd477 100644 --- a/mobile/app/troubleshoot.tsx +++ b/mobile/app/troubleshoot.tsx @@ -1,13 +1,5 @@ import { useState, useCallback, useRef } from 'react' -import { - View, - Text, - StyleSheet, - Pressable, - ScrollView, - ActivityIndicator, - Platform -} from 'react-native' +import { View, Text, Pressable, ScrollView, ActivityIndicator, Platform } from 'react-native' import { useSafeAreaInsets } from 'react-native-safe-area-context' import { useRouter } from 'expo-router' import { @@ -20,7 +12,7 @@ import { XCircle, AlertTriangle } from 'lucide-react-native' -import { colors, spacing, typography } from '../src/theme/mobile-theme' +import { colors, spacing } from '../src/theme/mobile-theme' import { loadHosts } from '../src/transport/host-store' import { startDiagnosticFetchTimeout, @@ -32,6 +24,7 @@ import { unreachableHostDetail } from '../src/diagnostics/host-reachability' import { troubleshootCommonIssues } from '../src/diagnostics/troubleshoot-common-issues' +import { troubleshootScreenStyles as styles } from '../src/diagnostics/troubleshoot-screen-styles' type DiagnosticStatus = 'idle' | 'running' | 'done' @@ -281,135 +274,3 @@ export default function TroubleshootScreen() { ) } - -const styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: colors.bgBase, - padding: spacing.lg - }, - topRow: { - flexDirection: 'row', - alignItems: 'center', - marginBottom: spacing.lg - }, - backButton: { - width: 36, - height: 36, - borderRadius: 18, - alignItems: 'center', - justifyContent: 'center', - marginRight: spacing.sm - }, - heading: { - fontSize: 20, - fontWeight: '700', - color: colors.textPrimary - }, - scroll: { - flex: 1 - }, - scrollContent: { - paddingBottom: spacing.xl - }, - diagnosticButton: { - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'center', - gap: spacing.sm, - backgroundColor: colors.bgRaised, - borderRadius: 10, - paddingVertical: spacing.md, - paddingHorizontal: spacing.lg, - marginBottom: spacing.lg - }, - diagnosticButtonPressed: { - opacity: 0.7 - }, - diagnosticButtonDisabled: { - opacity: 0.5 - }, - diagnosticButtonLabel: { - fontSize: typography.bodySize, - fontWeight: '600', - color: colors.textPrimary - }, - checkRow: { - flexDirection: 'row', - alignItems: 'center', - gap: spacing.sm, - paddingVertical: spacing.sm + 2, - paddingHorizontal: spacing.md + 2 - }, - checkLabel: { - fontSize: typography.bodySize, - fontWeight: '500', - color: colors.textPrimary - }, - checkDetail: { - flex: 1, - textAlign: 'right', - fontSize: typography.metaSize, - color: colors.textMuted - }, - checkDetailFail: { - color: colors.statusRed - }, - sectionHeading: { - fontSize: typography.metaSize, - fontWeight: '600', - color: colors.textMuted, - textTransform: 'uppercase', - letterSpacing: 0.5, - marginBottom: spacing.sm, - marginTop: spacing.sm, - paddingHorizontal: spacing.xs - }, - section: { - backgroundColor: colors.bgPanel, - borderRadius: 12, - overflow: 'hidden', - marginBottom: spacing.lg - }, - separator: { - height: StyleSheet.hairlineWidth, - backgroundColor: colors.borderSubtle, - marginHorizontal: spacing.md - }, - rowPressed: { - backgroundColor: colors.bgRaised - }, - accordionHeader: { - flexDirection: 'row', - alignItems: 'center', - gap: spacing.sm + 2, - paddingVertical: spacing.md, - paddingHorizontal: spacing.md + 2 - }, - accordionTitle: { - flex: 1, - fontSize: typography.bodySize, - fontWeight: '500', - color: colors.textPrimary - }, - accordionBody: { - paddingHorizontal: spacing.md + 2, - paddingBottom: spacing.md, - gap: spacing.xs + 2 - }, - stepRow: { - flexDirection: 'row', - gap: spacing.sm - }, - bullet: { - fontSize: typography.metaSize, - color: colors.textMuted, - lineHeight: 18 - }, - stepText: { - flex: 1, - fontSize: typography.metaSize, - color: colors.textMuted, - lineHeight: 18 - } -}) diff --git a/mobile/src/diagnostics/troubleshoot-screen-styles.ts b/mobile/src/diagnostics/troubleshoot-screen-styles.ts new file mode 100644 index 00000000000..bf200e3c080 --- /dev/null +++ b/mobile/src/diagnostics/troubleshoot-screen-styles.ts @@ -0,0 +1,134 @@ +import { StyleSheet } from 'react-native' +import { colors, spacing, typography } from '../theme/mobile-theme' + +export const troubleshootScreenStyles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: colors.bgBase, + padding: spacing.lg + }, + topRow: { + flexDirection: 'row', + alignItems: 'center', + marginBottom: spacing.lg + }, + backButton: { + width: 36, + height: 36, + borderRadius: 18, + alignItems: 'center', + justifyContent: 'center', + marginRight: spacing.sm + }, + heading: { + fontSize: 20, + fontWeight: '700', + color: colors.textPrimary + }, + scroll: { + flex: 1 + }, + scrollContent: { + paddingBottom: spacing.xl + }, + diagnosticButton: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + gap: spacing.sm, + backgroundColor: colors.bgRaised, + borderRadius: 10, + paddingVertical: spacing.md, + paddingHorizontal: spacing.lg, + marginBottom: spacing.lg + }, + diagnosticButtonPressed: { + opacity: 0.7 + }, + diagnosticButtonDisabled: { + opacity: 0.5 + }, + diagnosticButtonLabel: { + fontSize: typography.bodySize, + fontWeight: '600', + color: colors.textPrimary + }, + checkRow: { + flexDirection: 'row', + alignItems: 'center', + gap: spacing.sm, + paddingVertical: spacing.sm + 2, + paddingHorizontal: spacing.md + 2 + }, + checkLabel: { + fontSize: typography.bodySize, + fontWeight: '500', + color: colors.textPrimary + }, + checkDetail: { + flex: 1, + textAlign: 'right', + fontSize: typography.metaSize, + color: colors.textMuted + }, + checkDetailFail: { + color: colors.statusRed + }, + sectionHeading: { + fontSize: typography.metaSize, + fontWeight: '600', + color: colors.textMuted, + textTransform: 'uppercase', + letterSpacing: 0.5, + marginBottom: spacing.sm, + marginTop: spacing.sm, + paddingHorizontal: spacing.xs + }, + section: { + backgroundColor: colors.bgPanel, + borderRadius: 12, + overflow: 'hidden', + marginBottom: spacing.lg + }, + separator: { + height: StyleSheet.hairlineWidth, + backgroundColor: colors.borderSubtle, + marginHorizontal: spacing.md + }, + rowPressed: { + backgroundColor: colors.bgRaised + }, + accordionHeader: { + flexDirection: 'row', + alignItems: 'center', + gap: spacing.sm + 2, + paddingVertical: spacing.md, + paddingHorizontal: spacing.md + 2 + }, + accordionTitle: { + flex: 1, + fontSize: typography.bodySize, + fontWeight: '500', + color: colors.textPrimary + }, + accordionBody: { + paddingHorizontal: spacing.md + 2, + paddingBottom: spacing.md, + gap: spacing.xs + 2 + }, + stepRow: { + flexDirection: 'row', + gap: spacing.sm + }, + bullet: { + fontSize: typography.metaSize, + color: colors.textMuted, + lineHeight: 18 + }, + stepText: { + flex: 1, + fontSize: typography.metaSize, + color: colors.textMuted, + lineHeight: 18 + } +})