Initial commit: OpenCode mobile app (extracted from opencode monorepo)
This commit is contained in:
Ubuntu
289
app/(tabs)/settings.tsx
Normal file
289
app/(tabs)/settings.tsx
Normal file
@@ -0,0 +1,289 @@
|
||||
import { useCallback, useState } from "react"
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
ScrollView,
|
||||
TouchableOpacity,
|
||||
Switch,
|
||||
StyleSheet,
|
||||
useColorScheme,
|
||||
Linking,
|
||||
Alert,
|
||||
} from "react-native"
|
||||
import { Ionicons } from "@expo/vector-icons"
|
||||
import { useAuth } from "../../src/stores/auth"
|
||||
import { useSettings } from "../../src/stores/settings"
|
||||
import {
|
||||
categories,
|
||||
categoryMeta,
|
||||
setup as setupNotifications,
|
||||
granted as notificationsGranted,
|
||||
} from "../../src/lib/notifications"
|
||||
import type { Category } from "../../src/lib/notifications"
|
||||
|
||||
function SettingRow({
|
||||
icon,
|
||||
label,
|
||||
description,
|
||||
isDark,
|
||||
right,
|
||||
onPress,
|
||||
}: {
|
||||
icon: keyof typeof Ionicons.glyphMap
|
||||
label: string
|
||||
description?: string
|
||||
isDark: boolean
|
||||
right?: React.ReactNode
|
||||
onPress?: () => void
|
||||
}) {
|
||||
const content = (
|
||||
<View style={[styles.settingRow, isDark && styles.settingRowDark]}>
|
||||
<View style={[styles.settingIcon, isDark && styles.settingIconDark]}>
|
||||
<Ionicons name={icon} size={22} color={isDark ? "#ffffff" : "#0a0a0a"} />
|
||||
</View>
|
||||
<View style={styles.settingContent}>
|
||||
<Text style={[styles.settingLabel, isDark && styles.textDark]}>{label}</Text>
|
||||
{description && <Text style={[styles.settingDescription, isDark && styles.metaDark]}>{description}</Text>}
|
||||
</View>
|
||||
{right}
|
||||
</View>
|
||||
)
|
||||
|
||||
if (onPress) {
|
||||
return <TouchableOpacity onPress={onPress}>{content}</TouchableOpacity>
|
||||
}
|
||||
|
||||
return content
|
||||
}
|
||||
|
||||
function SettingSection({ title, children, isDark }: { title: string; children: React.ReactNode; isDark: boolean }) {
|
||||
return (
|
||||
<View style={styles.section}>
|
||||
<Text style={[styles.sectionTitle, isDark && styles.sectionTitleDark]}>{title}</Text>
|
||||
<View style={[styles.sectionContent, isDark && styles.sectionContentDark]}>{children}</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default function SettingsScreen() {
|
||||
const colorScheme = useColorScheme()
|
||||
const isDark = colorScheme === "dark"
|
||||
|
||||
const { settings, hasBiometrics, updateSettings, lock } = useAuth()
|
||||
const { notifications, setNotification } = useSettings()
|
||||
const [osGranted, setOsGranted] = useState<boolean | null>(null)
|
||||
|
||||
// Check OS permission state on first toggle attempt
|
||||
const handleToggle = useCallback(
|
||||
async (category: Category, enabled: boolean) => {
|
||||
if (enabled) {
|
||||
const ok = await setupNotifications()
|
||||
setOsGranted(ok)
|
||||
if (!ok) {
|
||||
Alert.alert(
|
||||
"Notifications Disabled",
|
||||
"Enable notifications for OpenCode in your device settings to receive alerts.",
|
||||
)
|
||||
return
|
||||
}
|
||||
}
|
||||
setNotification(category, enabled)
|
||||
},
|
||||
[setNotification],
|
||||
)
|
||||
|
||||
// Lazy-check OS permission for status display
|
||||
if (osGranted === null) {
|
||||
notificationsGranted().then(setOsGranted)
|
||||
}
|
||||
|
||||
return (
|
||||
<ScrollView style={[styles.container, isDark && styles.containerDark]} contentContainerStyle={styles.content}>
|
||||
<SettingSection title="Security" isDark={isDark}>
|
||||
<SettingRow
|
||||
icon="finger-print"
|
||||
label="Require Biometric to Open"
|
||||
description={
|
||||
hasBiometrics ? "Use Face ID or Touch ID to unlock the app" : "Biometric authentication not available"
|
||||
}
|
||||
isDark={isDark}
|
||||
right={
|
||||
<Switch
|
||||
value={settings.requireBiometric}
|
||||
onValueChange={(value) => updateSettings({ requireBiometric: value })}
|
||||
disabled={!hasBiometrics}
|
||||
trackColor={{ false: "#767577", true: "#22c55e" }}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<SettingRow
|
||||
icon="lock-closed"
|
||||
label="Require Biometric to Send"
|
||||
description="Authenticate before sending messages"
|
||||
isDark={isDark}
|
||||
right={
|
||||
<Switch
|
||||
value={settings.requireBiometricForMessages}
|
||||
onValueChange={(value) => updateSettings({ requireBiometricForMessages: value })}
|
||||
disabled={!hasBiometrics || !settings.requireBiometric}
|
||||
trackColor={{ false: "#767577", true: "#22c55e" }}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
{settings.requireBiometric && (
|
||||
<SettingRow
|
||||
icon="exit"
|
||||
label="Lock App Now"
|
||||
description="Require authentication to reopen"
|
||||
isDark={isDark}
|
||||
onPress={lock}
|
||||
right={<Ionicons name="chevron-forward" size={20} color={isDark ? "#666666" : "#999999"} />}
|
||||
/>
|
||||
)}
|
||||
</SettingSection>
|
||||
|
||||
<SettingSection title="Notifications" isDark={isDark}>
|
||||
{categories.map((category) => {
|
||||
const meta = categoryMeta[category]
|
||||
return (
|
||||
<SettingRow
|
||||
key={category}
|
||||
icon={meta.icon as keyof typeof Ionicons.glyphMap}
|
||||
label={meta.label}
|
||||
description={meta.description}
|
||||
isDark={isDark}
|
||||
right={
|
||||
<Switch
|
||||
value={notifications[category]}
|
||||
onValueChange={(value) => handleToggle(category, value)}
|
||||
trackColor={{ false: "#767577", true: "#22c55e" }}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
{osGranted === false && (
|
||||
<View style={[styles.settingRow, isDark && styles.settingRowDark]}>
|
||||
<Text style={[styles.settingDescription, { color: "#ef4444", paddingLeft: 48 }]}>
|
||||
Notifications are disabled at the system level. Enable them in Settings to receive alerts.
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</SettingSection>
|
||||
|
||||
<SettingSection title="About" isDark={isDark}>
|
||||
<SettingRow icon="information-circle" label="Version" description="1.0.0" isDark={isDark} />
|
||||
<SettingRow
|
||||
icon="logo-github"
|
||||
label="GitHub"
|
||||
description="View source code"
|
||||
isDark={isDark}
|
||||
onPress={() => Linking.openURL("https://github.com/anomalyco/opencode")}
|
||||
right={<Ionicons name="open-outline" size={20} color={isDark ? "#666666" : "#999999"} />}
|
||||
/>
|
||||
<SettingRow
|
||||
icon="document-text"
|
||||
label="Documentation"
|
||||
description="Learn how to use OpenCode"
|
||||
isDark={isDark}
|
||||
onPress={() => Linking.openURL("https://opencode.ai/docs")}
|
||||
right={<Ionicons name="open-outline" size={20} color={isDark ? "#666666" : "#999999"} />}
|
||||
/>
|
||||
</SettingSection>
|
||||
|
||||
<View style={styles.footer}>
|
||||
<Text style={[styles.footerText, isDark && styles.metaDark]}>OpenCode Mobile</Text>
|
||||
<Text style={[styles.footerText, isDark && styles.metaDark]}>
|
||||
Connect to your AI coding assistant from anywhere
|
||||
</Text>
|
||||
</View>
|
||||
</ScrollView>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: "#f5f5f5",
|
||||
},
|
||||
containerDark: {
|
||||
backgroundColor: "#0a0a0a",
|
||||
},
|
||||
content: {
|
||||
paddingBottom: 32,
|
||||
},
|
||||
section: {
|
||||
marginTop: 24,
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: 13,
|
||||
fontWeight: "600",
|
||||
color: "#666666",
|
||||
marginLeft: 16,
|
||||
marginBottom: 8,
|
||||
textTransform: "uppercase",
|
||||
},
|
||||
sectionTitleDark: {
|
||||
color: "#888888",
|
||||
},
|
||||
sectionContent: {
|
||||
backgroundColor: "#ffffff",
|
||||
borderTopWidth: 1,
|
||||
borderBottomWidth: 1,
|
||||
borderColor: "#e5e5e5",
|
||||
},
|
||||
sectionContentDark: {
|
||||
backgroundColor: "#1a1a1a",
|
||||
borderColor: "#2a2a2a",
|
||||
},
|
||||
settingRow: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 16,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: "#e5e5e5",
|
||||
},
|
||||
settingRowDark: {
|
||||
borderBottomColor: "#2a2a2a",
|
||||
},
|
||||
settingIcon: {
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: 8,
|
||||
backgroundColor: "#f5f5f5",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
marginRight: 12,
|
||||
},
|
||||
settingIconDark: {
|
||||
backgroundColor: "#2a2a2a",
|
||||
},
|
||||
settingContent: {
|
||||
flex: 1,
|
||||
},
|
||||
settingLabel: {
|
||||
fontSize: 16,
|
||||
color: "#0a0a0a",
|
||||
},
|
||||
textDark: {
|
||||
color: "#ffffff",
|
||||
},
|
||||
settingDescription: {
|
||||
fontSize: 13,
|
||||
color: "#666666",
|
||||
marginTop: 2,
|
||||
},
|
||||
metaDark: {
|
||||
color: "#888888",
|
||||
},
|
||||
footer: {
|
||||
alignItems: "center",
|
||||
padding: 32,
|
||||
},
|
||||
footerText: {
|
||||
fontSize: 13,
|
||||
color: "#999999",
|
||||
textAlign: "center",
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user