refactor(settings): split SettingsScreen into section components and pure helpers

SettingsScreen CC 23 -> below 10. Form parsing, change detection and the dark-theme check moved to utils/ with unit tests; the dark switch now reads the OS scheme instead of comparing the background colour. Adds characterization tests for the screen.

components/settings/AboutCard.tsx

@@ -0,0 +1,38 @@
+import { useThemeColor } from '@/hooks/useThemeColor';
+import { Info, MonitorCog } from 'lucide-react-native';
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { SettingsSection } from './SettingsSection';
+
+export function AboutCard() {
+    const colors = useThemeColor();
+
+    return (
+        <SettingsSection title="ABOUT">
+            <View style={styles.rowGroup}>
+                <Info size={18} color={colors.textMuted} style={styles.infoIcon} />
+                <Text style={[styles.infoText, { color: colors.text }]}>LocalMind - Cross Platform Version</Text>
+            </View>
+            <View style={[styles.rowGroup, { marginTop: 8 }]}>
+                <MonitorCog size={18} color={colors.textMuted} style={styles.infoIcon} />
+                <Text style={[styles.infoText, { color: colors.textMuted, fontSize: 13 }]}>
+                    Connected via OpenAPI `/v1/chat/completions` specs
+                </Text>
+            </View>
+        </SettingsSection>
+    );
+}
+
+const styles = StyleSheet.create({
+    rowGroup: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    infoIcon: {
+        marginRight: 10,
+    },
+    infoText: {
+        fontSize: 15,
+        lineHeight: 22,
+    },
+});

components/settings/AppearanceCard.tsx

@@ -0,0 +1,61 @@
+import { useColorScheme } from '@/hooks/useColorScheme';
+import { useThemeColor } from '@/hooks/useThemeColor';
+import { useAppStore } from '@/store/useAppStore';
+import { isDarkTheme } from '@/utils/theme';
+import { Moon } from 'lucide-react-native';
+import React from 'react';
+import { StyleSheet, Switch, Text, View } from 'react-native';
+import { SettingsSection } from './SettingsSection';
+
+export function AppearanceCard() {
+    const colors = useThemeColor();
+    const systemScheme = useColorScheme();
+    const themePreference = useAppStore(state => state.theme);
+    const setTheme = useAppStore(state => state.setTheme);
+
+    const isDarkMode = isDarkTheme(themePreference, systemScheme);
+    const toggleTheme = () => setTheme(isDarkMode ? 'light' : 'dark');
+
+    return (
+        <SettingsSection title="APPEARANCE">
+            <View style={styles.row}>
+                <View style={styles.rowIconWrap}>
+                    <Moon size={20} color={colors.text} />
+                </View>
+                <View style={styles.rowText}>
+                    <Text style={[styles.rowTitle, { color: colors.text }]}>Dark Mode</Text>
+                    <Text style={[styles.rowSubtitle, { color: colors.textMuted }]}>Toggle sleek dark theme</Text>
+                </View>
+                <Switch
+                    value={isDarkMode}
+                    onValueChange={toggleTheme}
+                    trackColor={{ false: '#E2E8F0', true: colors.tint }}
+                    thumbColor={'#FFFFFF'}
+                />
+            </View>
+        </SettingsSection>
+    );
+}
+
+const styles = StyleSheet.create({
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingVertical: 4,
+    },
+    rowIconWrap: {
+        marginRight: 12,
+    },
+    rowText: {
+        flex: 1,
+    },
+    rowTitle: {
+        fontSize: 16,
+        fontWeight: '600',
+        marginBottom: 4,
+    },
+    rowSubtitle: {
+        fontSize: 14,
+    },
+});

components/settings/LabeledInput.tsx

@@ -0,0 +1,44 @@
+import { useThemeColor } from '@/hooks/useThemeColor';
+import React from 'react';
+import { StyleSheet, Text, TextInput, TextInputProps, View } from 'react-native';
+
+interface LabeledInputProps extends TextInputProps {
+    label: string;
+}
+
+export function LabeledInput({ label, style, ...inputProps }: LabeledInputProps) {
+    const colors = useThemeColor();
+
+    return (
+        <View style={styles.inputGroup}>
+            <Text style={[styles.label, { color: colors.textMuted }]}>{label}</Text>
+            <TextInput
+                style={[
+                    styles.textInput,
+                    { backgroundColor: colors.inputBg, borderColor: colors.inputBorder, color: colors.text },
+                    style,
+                ]}
+                placeholderTextColor={colors.textMuted}
+                {...inputProps}
+            />
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    inputGroup: {
+        marginBottom: 16,
+    },
+    label: {
+        fontSize: 14,
+        fontWeight: '500',
+        marginBottom: 8,
+    },
+    textInput: {
+        borderWidth: 1,
+        borderRadius: 12,
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        fontSize: 16,
+    },
+});

components/settings/ServerConnectionCard.tsx

@@ -0,0 +1,194 @@
+import { ConnectionBadge } from '@/components/ui/ConnectionBadge';
+import { useLMStudio } from '@/hooks/useLMStudio';
+import { useThemeColor } from '@/hooks/useThemeColor';
+import * as api from '@/services/lmStudioApi';
+import { useAppStore } from '@/store/useAppStore';
+import { buildServerConfig, isConfigChanged } from '@/utils/serverConfig';
+import { Network } from 'lucide-react-native';
+import React, { useState } from 'react';
+import { ActivityIndicator, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { LabeledInput } from './LabeledInput';
+import { SettingsSection } from './SettingsSection';
+
+function TestResultBox({ ok }: { ok: boolean }) {
+    const colors = useThemeColor();
+
+    return (
+        <View style={[styles.resultBox, { backgroundColor: ok ? colors.successBg : colors.errorBg }]}>
+            <Text style={[styles.resultText, { color: ok ? colors.successText : colors.errorText }]}>
+                {ok
+                    ? 'Connection successful. API is ready.'
+                    : 'Connection failed. Verify host and port.'}
+            </Text>
+        </View>
+    );
+}
+
+export function ServerConnectionCard() {
+    const colors = useThemeColor();
+    const serverConfig = useAppStore(state => state.serverConfig);
+    const setServerConfig = useAppStore(state => state.setServerConfig);
+    const isConnected = useAppStore(state => state.isConnected);
+    const setIsConnected = useAppStore(state => state.setIsConnected);
+    const { fetchModels } = useLMStudio();
+
+    const [host, setHost] = useState(serverConfig.host);
+    const [port, setPort] = useState(serverConfig.port.toString());
+    const [apiKey, setApiKey] = useState(serverConfig.apiKey ?? '');
+    const [isTesting, setIsTesting] = useState(false);
+    const [testResult, setTestResult] = useState<boolean | null>(null);
+
+    const form = { host, port, apiKey };
+    const currentConfig = buildServerConfig(form);
+    const configChanged = isConfigChanged(form, serverConfig);
+
+    const handleSaveConfig = () => {
+        setServerConfig(currentConfig);
+        setTestResult(null);
+    };
+
+    const handleTestConnection = async () => {
+        handleSaveConfig();
+        setIsTesting(true);
+        setTestResult(null);
+
+        const ok = await api.testConnection(currentConfig);
+        setTestResult(ok);
+        setIsConnected(ok);
+        if (ok) {
+            await fetchModels();
+        }
+        setIsTesting(false);
+    };
+
+    return (
+        <SettingsSection title="SERVER CONNECTION">
+            <View style={styles.cardHeader}>
+                <View style={styles.cardHeaderTitle}>
+                    <Network size={20} color={colors.text} style={styles.headerIcon} />
+                    <Text style={[styles.cardTitle, { color: colors.text }]}>LM Studio API</Text>
+                </View>
+                <ConnectionBadge isConnected={isConnected} />
+            </View>
+
+            <View style={[styles.divider, { backgroundColor: colors.border }]} />
+
+            <LabeledInput
+                label="Host IP / Address"
+                value={host}
+                onChangeText={setHost}
+                placeholder="localhost"
+                autoCapitalize="none"
+                autoCorrect={false}
+            />
+            <LabeledInput
+                label="Port Number"
+                value={port}
+                onChangeText={setPort}
+                placeholder="1234"
+                keyboardType="numeric"
+            />
+            <LabeledInput
+                label="API Key (optional)"
+                value={apiKey}
+                onChangeText={setApiKey}
+                placeholder="Leave empty for local"
+                autoCapitalize="none"
+                autoCorrect={false}
+                secureTextEntry
+            />
+
+            <View style={styles.buttonRow}>
+                {configChanged && (
+                    <TouchableOpacity
+                        style={[styles.saveButton, { borderColor: colors.border, backgroundColor: colors.cardBackground }]}
+                        onPress={handleSaveConfig}
+                    >
+                        <Text style={[styles.saveButtonText, { color: colors.text }]}>Save Changes</Text>
+                    </TouchableOpacity>
+                )}
+                <TouchableOpacity
+                    style={[
+                        styles.testButton,
+                        { backgroundColor: colors.tint },
+                        isTesting && styles.testButtonDisabled
+                    ]}
+                    onPress={handleTestConnection}
+                    disabled={isTesting}
+                >
+                    {isTesting ? (
+                        <ActivityIndicator size="small" color={colors.backgroundColor} />
+                    ) : (
+                        <Text style={[styles.testButtonText, { color: colors.backgroundColor }]}>Test Connection</Text>
+                    )}
+                </TouchableOpacity>
+            </View>
+
+            {testResult !== null && <TestResultBox ok={testResult} />}
+        </SettingsSection>
+    );
+}
+
+const styles = StyleSheet.create({
+    cardHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: 16,
+    },
+    cardHeaderTitle: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    headerIcon: {
+        marginRight: 8,
+    },
+    cardTitle: {
+        fontSize: 18,
+        fontWeight: '700',
+    },
+    divider: {
+        height: 1,
+        width: '100%',
+        marginBottom: 16,
+    },
+    buttonRow: {
+        flexDirection: 'row',
+        gap: 12,
+        marginTop: 8,
+    },
+    saveButton: {
+        flex: 1,
+        paddingVertical: 14,
+        borderRadius: 12,
+        alignItems: 'center',
+        borderWidth: 1,
+    },
+    saveButtonText: {
+        fontSize: 15,
+        fontWeight: '600',
+    },
+    testButton: {
+        flex: 2,
+        paddingVertical: 14,
+        borderRadius: 12,
+        alignItems: 'center',
+    },
+    testButtonDisabled: {
+        opacity: 0.7,
+    },
+    testButtonText: {
+        fontSize: 15,
+        fontWeight: '600',
+    },
+    resultBox: {
+        marginTop: 16,
+        borderRadius: 12,
+        padding: 14,
+    },
+    resultText: {
+        fontSize: 14,
+        textAlign: 'center',
+        fontWeight: '500',
+    },
+});

components/settings/SettingsSection.tsx

@@ -0,0 +1,45 @@
+import { useThemeColor } from '@/hooks/useThemeColor';
+import React from 'react';
+import { StyleSheet, Text, useWindowDimensions, View } from 'react-native';
+
+interface SettingsSectionProps {
+    title: string;
+    children: React.ReactNode;
+}
+
+export function SettingsSection({ title, children }: SettingsSectionProps) {
+    const { width } = useWindowDimensions();
+    const colors = useThemeColor();
+    const isLargeScreen = width > 768;
+
+    return (
+        <View style={[styles.section, isLargeScreen && styles.desktopSection]}>
+            <Text style={[styles.sectionLabel, { color: colors.textMuted }]}>{title}</Text>
+            <View style={[styles.card, { backgroundColor: colors.cardBackground, borderColor: colors.border }]}>
+                {children}
+            </View>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    section: {
+        marginBottom: 24,
+    },
+    desktopSection: {
+        width: '100%',
+        maxWidth: 600,
+    },
+    sectionLabel: {
+        fontSize: 13,
+        fontWeight: '600',
+        marginLeft: 16,
+        marginBottom: 8,
+        letterSpacing: 0.5,
+    },
+    card: {
+        borderRadius: 16,
+        padding: 16,
+        borderWidth: 1,
+    },
+});