290 lines
8.1 KiB
TypeScript
290 lines
8.1 KiB
TypeScript
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",
|
|
},
|
|
})
|