feat: Mobile settings screen (#34)
This commit is contained in:
Alexander Whitestone
@@ -37,7 +37,8 @@
|
||||
"expo-web-browser"
|
||||
],
|
||||
"extra": {
|
||||
"apiDomain": "${EXPO_PUBLIC_DOMAIN}"
|
||||
"apiDomain": "${EXPO_PUBLIC_DOMAIN}",
|
||||
"gitCommitHash": "${EXPO_PUBLIC_GIT_SHA}"
|
||||
},
|
||||
"experiments": {
|
||||
"typedRoutes": true,
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import { BlurView } from "expo-blur";
|
||||
import { isLiquidGlassAvailable } from "expo-glass-effect";
|
||||
import { Tabs } from "expo-router";
|
||||
import { Link, Tabs, router } from "expo-router";
|
||||
import { Icon, Label, NativeTabs } from "expo-router/unstable-native-tabs";
|
||||
import { SymbolView } from "expo-symbols";
|
||||
import { Feather, MaterialCommunityIcons } from "@expo/vector-icons";
|
||||
import { Feather, MaterialCommunityIcons, Ionicons } from "@expo/vector-icons";
|
||||
import React from "react";
|
||||
import { Platform, StyleSheet, View, useColorScheme } from "react-native";
|
||||
import { Platform, Pressable, StyleSheet, View, useColorScheme } from "react-native";
|
||||
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||
|
||||
import { Colors } from "@/constants/colors";
|
||||
@@ -13,16 +13,16 @@ import { Colors } from "@/constants/colors";
|
||||
function NativeTabLayout() {
|
||||
return (
|
||||
<NativeTabs>
|
||||
<NativeTabs.Trigger name="index">
|
||||
<Icon sf={{ default: "face.smiling", selected: "face.smiling.fill" }} />
|
||||
<NativeTabs.Trigger name=\"index\">
|
||||
<Icon sf={{ default: \"face.smiling\", selected: \"face.smiling.fill\" }} />
|
||||
<Label>Timmy</Label>
|
||||
</NativeTabs.Trigger>
|
||||
<NativeTabs.Trigger name="matrix">
|
||||
<Icon sf={{ default: "cube", selected: "cube.fill" }} />
|
||||
<NativeTabs.Trigger name=\"matrix\">
|
||||
<Icon sf={{ default: \"cube\", selected: \"cube.fill\" }} />
|
||||
<Label>Matrix</Label>
|
||||
</NativeTabs.Trigger>
|
||||
<NativeTabs.Trigger name="feed">
|
||||
<Icon sf={{ default: "list.bullet", selected: "list.bullet.circle.fill" }} />
|
||||
<NativeTabs.Trigger name=\"feed\">
|
||||
<Icon sf={{ default: \"list.bullet\", selected: \"list.bullet.circle.fill\" }} />
|
||||
<Label>Feed</Label>
|
||||
</NativeTabs.Trigger>
|
||||
</NativeTabs>
|
||||
@@ -39,8 +39,7 @@ function ClassicTabLayout() {
|
||||
<Tabs
|
||||
screenOptions={{
|
||||
headerShown: false,
|
||||
tabBarActiveTintColor: C.accentGlow,
|
||||
tabBarInactiveTintColor: C.textMuted,
|
||||
tabBarActiveTintColor: C.accentGlow,\n tabBarInactiveTintColor: C.textMuted,
|
||||
tabBarStyle: {
|
||||
position: "absolute",
|
||||
backgroundColor: isIOS ? "transparent" : C.surface,
|
||||
@@ -52,7 +51,7 @@ function ClassicTabLayout() {
|
||||
isIOS ? (
|
||||
<BlurView
|
||||
intensity={80}
|
||||
tint="dark"
|
||||
tint=\"dark\"
|
||||
style={[StyleSheet.absoluteFill, { borderTopWidth: 0.5, borderTopColor: C.border }]}
|
||||
/>
|
||||
) : isWeb ? (
|
||||
@@ -61,52 +60,53 @@ function ClassicTabLayout() {
|
||||
/>
|
||||
) : (
|
||||
<View style={[StyleSheet.absoluteFill, { backgroundColor: C.surface, borderTopWidth: 0.5, borderTopColor: C.border }]} />
|
||||
),
|
||||
}}
|
||||
),\
|
||||
}}\
|
||||
>
|
||||
<Tabs.Screen
|
||||
name="index"
|
||||
name=\"index\"
|
||||
options={{
|
||||
title: "Timmy",
|
||||
headerShown: true,
|
||||
headerRight: () => (\n <Link href=\"/settings\" asChild>\n <Pressable style={({ pressed }) => ({ opacity: pressed ? 0.5 : 1 })}>
|
||||
<Ionicons name=\"settings-outline\" size={24} color={C.text} style={{ marginRight: 15 }} />\n </Pressable>\n </Link>\n ),
|
||||
tabBarIcon: ({ color, size }) =>
|
||||
isIOS ? (
|
||||
<SymbolView name="face.smiling" tintColor={color} size={size} />
|
||||
<SymbolView name=\"face.smiling\" tintColor={color} size={size} />
|
||||
) : (
|
||||
<MaterialCommunityIcons name="emoticon-outline" size={size} color={color} />
|
||||
),
|
||||
}}
|
||||
<MaterialCommunityIcons name=\"emoticon-outline\" size={size} color={color} />
|
||||
),\
|
||||
}}\
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="matrix"
|
||||
name=\"matrix\"
|
||||
options={{
|
||||
title: "Matrix",
|
||||
tabBarIcon: ({ color, size }) =>
|
||||
isIOS ? (
|
||||
<SymbolView name="cube" tintColor={color} size={size} />
|
||||
<SymbolView name=\"cube\" tintColor={color} size={size} />
|
||||
) : (
|
||||
<MaterialCommunityIcons name="cube-outline" size={size} color={color} />
|
||||
),
|
||||
}}
|
||||
<MaterialCommunityIcons name=\"cube-outline\" size={size} color={color} />
|
||||
),\
|
||||
}}\
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="feed"
|
||||
name=\"feed\"
|
||||
options={{
|
||||
title: "Feed",
|
||||
tabBarIcon: ({ color, size }) =>
|
||||
isIOS ? (
|
||||
<SymbolView name="list.bullet" tintColor={color} size={size} />
|
||||
<SymbolView name=\"list.bullet\" tintColor={color} size={size} />
|
||||
) : (
|
||||
<Feather name="activity" size={size} color={color} />
|
||||
),
|
||||
}}
|
||||
<Feather name=\"activity\" size={size} color={color} />
|
||||
),\
|
||||
}}\
|
||||
/>
|
||||
</Tabs>
|
||||
);
|
||||
}
|
||||
|
||||
export default function TabLayout() {
|
||||
if (isLiquidGlassAvailable()) {
|
||||
return <NativeTabLayout />;
|
||||
}
|
||||
return <ClassicTabLayout />;
|
||||
if (isLiquidGlassAvailable()) {\n return (\n <NativeTabs>\n <NativeTabs.Screen\n name=\"index\"\n options={{\n title: \"Timmy\",\n headerShown: true,\n headerRight: () => (\n <Link href=\"/settings\" asChild>\n <Pressable style={({ pressed }) => ({ opacity: pressed ? 0.5 : 1 })}>\n <Ionicons name=\"settings-outline\" size={24} color={C.text} style={{ marginRight: 15 }} />\n </Pressable>\n </Link>\n ),\n }}\n />\n <NativeTabs.Screen name=\"matrix\" />\n <NativeTabs.Screen name=\"feed\" />\n </NativeTabs>\n );\n }
|
||||
return <ClassicTabLayout />;\
|
||||
}
|
||||
|
||||
@@ -50,6 +50,7 @@ function RootLayoutNav() {
|
||||
<Stack screenOptions={{ headerBackTitle: "Back" }}>
|
||||
<Stack.Screen name="onboarding" options={{ headerShown: false, animation: "none" }} />
|
||||
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
|
||||
<Stack.Screen name="settings" options={{ headerShown: false, presentation: "modal" }} />
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
249
artifacts/mobile/app/settings.tsx
Normal file
249
artifacts/mobile/app/settings.tsx
Normal file
@@ -0,0 +1,249 @@
|
||||
import { Stack } from 'expo-router';
|
||||
import { View, Text, StyleSheet, ScrollView, TextInput, Switch, Pressable, Linking, Platform } from 'react-native';
|
||||
import { useState, useEffect } from 'react';
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
import * as SecureStore from 'expo-secure-store';
|
||||
import Constants from 'expo-constants';
|
||||
import { useTimmy } from '@/context/TimmyContext';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { ConnectionBadge } from '@/components/ConnectionBadge';
|
||||
import { Colors } from '@/constants/colors';
|
||||
|
||||
const STORAGE_KEYS = {
|
||||
SERVER_URL: 'settings_server_url',
|
||||
NOTIFICATIONS_JOB_COMPLETION: 'settings_notifications_job_completion',
|
||||
NOTIFICATIONS_LOW_BALANCE: 'settings_notifications_low_balance',
|
||||
NOSTR_PRIVATE_KEY: 'settings_nostr_private_key', // Use SecureStore for this
|
||||
};
|
||||
|
||||
export default function SettingsScreen() {
|
||||
const { apiBaseUrl, setApiBaseUrl, isConnected, nostrPublicKey, connectNostr, disconnectNostr } = useTimmy();
|
||||
const C = Colors.dark;
|
||||
|
||||
const [serverUrl, setServerUrl] = useState(apiBaseUrl);
|
||||
const [jobCompletionNotifications, setJobCompletionNotifications] = useState(false);
|
||||
const [lowBalanceWarning, setLowBalanceWarning] = useState(false);
|
||||
const [currentNpub, setCurrentNpub] = useState<string | null>(nostrPublicKey);
|
||||
|
||||
useEffect(() => {
|
||||
// Load settings from AsyncStorage and SecureStore
|
||||
const loadSettings = async () => {
|
||||
const storedServerUrl = await AsyncStorage.getItem(STORAGE_KEYS.SERVER_URL);
|
||||
if (storedServerUrl) {
|
||||
setServerUrl(storedServerUrl);
|
||||
}
|
||||
const storedJobCompletion = await AsyncStorage.getItem(STORAGE_KEYS.NOTIFICATIONS_JOB_COMPLETION);
|
||||
if (storedJobCompletion !== null) {
|
||||
setJobCompletionNotifications(JSON.parse(storedJobCompletion));
|
||||
}
|
||||
const storedLowBalance = await AsyncStorage.getItem(STORAGE_KEYS.NOTIFICATIONS_LOW_BALANCE);
|
||||
if (storedLowBalance !== null) {
|
||||
setLowBalanceWarning(JSON.parse(storedLowBalance));
|
||||
}
|
||||
// Nostr npub is handled by TimmyContext, so we just use the provided nostrPublicKey
|
||||
setCurrentNpub(nostrPublicKey);
|
||||
};
|
||||
loadSettings();
|
||||
}, [nostrPublicKey]);
|
||||
|
||||
// Update apiBaseUrl in context when serverUrl changes and is saved
|
||||
useEffect(() => {
|
||||
if (serverUrl !== apiBaseUrl) {
|
||||
setApiBaseUrl(serverUrl);
|
||||
AsyncStorage.setItem(STORAGE_KEYS.SERVER_URL, serverUrl);
|
||||
}
|
||||
}, [serverUrl, setApiBaseUrl, apiBaseUrl]);
|
||||
|
||||
const handleServerUrlChange = (text: string) => {
|
||||
setServerUrl(text);
|
||||
};
|
||||
|
||||
const toggleJobCompletionNotifications = async () => {
|
||||
const newValue = !jobCompletionNotifications;
|
||||
setJobCompletionNotifications(newValue);
|
||||
await AsyncStorage.setItem(STORAGE_KEYS.NOTIFICATIONS_JOB_COMPLETION, JSON.stringify(newValue));
|
||||
};
|
||||
|
||||
const toggleLowBalanceWarning = async () => {
|
||||
const newValue = !lowBalanceWarning;
|
||||
setLowBalanceWarning(newValue);
|
||||
await AsyncStorage.setItem(STORAGE_KEYS.NOTIFICATIONS_LOW_BALANCE, JSON.stringify(newValue));
|
||||
};
|
||||
|
||||
const handleConnectNostr = async () => {
|
||||
// This will ideally link to a dedicated Nostr connection flow
|
||||
console.log('Connect Nostr button pressed');
|
||||
// For now, simulate connection if not connected
|
||||
if (!currentNpub) {
|
||||
// This is a placeholder. Real implementation would involve generating/importing keys.
|
||||
const simulatedNpub = 'npub1xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
|
||||
connectNostr(simulatedNpub, 'private_key_placeholder'); // Pass a placeholder private key
|
||||
setCurrentNpub(simulatedNpub);
|
||||
// In a real app, the private key would be securely stored and managed by the context
|
||||
// For now, just a placeholder to show connected state
|
||||
}
|
||||
};
|
||||
|
||||
const handleDisconnectNostr = async () => {
|
||||
await disconnectNostr();
|
||||
setCurrentNpub(null);
|
||||
};
|
||||
|
||||
const appVersion = Constants.expoConfig?.version || 'N/A';
|
||||
const buildCommitHash = Constants.expoConfig?.extra?.gitCommitHash || 'N/A';
|
||||
const giteaRepoUrl = 'http://143.198.27.163:3000/replit/timmy-tower';
|
||||
|
||||
const openGiteaLink = () => {
|
||||
Linking.openURL(giteaRepoUrl);
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Stack.Screen options={{ title: 'Settings', headerShown: true, headerStyle: { backgroundColor: C.surface }, headerTintColor: C.text }} />
|
||||
<ScrollView contentContainerStyle={styles.scrollContent}>
|
||||
<Text style={styles.sectionHeader}>Connection</Text>
|
||||
<View style={styles.settingItem}>
|
||||
<Text style={styles.settingLabel}>Server URL</Text>
|
||||
<View style={styles.serverUrlContainer}>
|
||||
<TextInput
|
||||
style={[styles.input, { color: C.text, backgroundColor: C.field }]} // Apply text and background color from Colors
|
||||
value={serverUrl}
|
||||
onChangeText={handleServerUrlChange}
|
||||
placeholder="Enter server URL"
|
||||
placeholderTextColor={C.textMuted}
|
||||
autoCapitalize="none"
|
||||
autoCorrect={false}
|
||||
/>
|
||||
<ConnectionBadge isConnected={isConnected} />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<Text style={styles.sectionHeader}>Notifications</Text>
|
||||
<View style={styles.settingItem}>
|
||||
<Text style={styles.settingLabel}>Job Completion Push Notifications</Text>
|
||||
<Switch
|
||||
trackColor={{ false: C.surface, true: C.accentGlow }}
|
||||
thumbColor={Platform.OS === 'android' ? C.text : ''}
|
||||
ios_backgroundColor={C.field}
|
||||
onValueChange={toggleJobCompletionNotifications}
|
||||
value={jobCompletionNotifications}
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.settingItem}>
|
||||
<Text style={styles.settingLabel}>Low Balance Warning</Text>
|
||||
<Switch
|
||||
trackColor={{ false: C.surface, true: C.accentGlow }}
|
||||
thumbColor={Platform.OS === 'android' ? C.text : ''}
|
||||
ios_backgroundColor={C.field}
|
||||
onValueChange={toggleLowBalanceWarning}
|
||||
value={lowBalanceWarning}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<Text style={styles.sectionHeader}>Identity</Text>
|
||||
<View style={styles.settingItem}>
|
||||
<Text style={styles.settingLabel}>Nostr Public Key</Text>
|
||||
<Text style={[styles.settingValue, { color: C.textMuted }]}>
|
||||
{currentNpub ? `${currentNpub.substring(0, 10)}...${currentNpub.substring(currentNpub.length - 5)}` : 'Not connected'}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.buttonContainer}>
|
||||
{!currentNpub ? (
|
||||
<Pressable onPress={handleConnectNostr} style={({ pressed }) => [styles.button, { backgroundColor: C.accent, opacity: pressed ? 0.8 : 1 }]}>
|
||||
<Text style={[styles.buttonText, { color: C.textInverted }]}>Connect Nostr</Text>
|
||||
</Pressable>
|
||||
) : (
|
||||
<Pressable onPress={handleDisconnectNostr} style={({ pressed }) => [styles.button, { backgroundColor: C.destructive, opacity: pressed ? 0.8 : 1 }]}>
|
||||
<Text style={[styles.buttonText, { color: C.textInverted }]}>Disconnect Nostr</Text>
|
||||
</Pressable>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<Text style={styles.sectionHeader}>About</Text>
|
||||
<View style={styles.settingItem}>
|
||||
<Text style={styles.settingLabel}>App Version</Text>
|
||||
<Text style={[styles.settingValue, { color: C.text }]}>{appVersion}</Text>
|
||||
</View>
|
||||
<View style={styles.settingItem}>
|
||||
<Text style={styles.settingLabel}>Build Commit Hash</Text>
|
||||
<Text style={[styles.settingValue, { color: C.text }]}>{buildCommitHash}</Text>
|
||||
</View>
|
||||
<Pressable onPress={openGiteaLink} style={({ pressed }) => [styles.linkButton, { opacity: pressed ? 0.8 : 1 }]}>
|
||||
<Ionicons name="link" size={16} color={C.text} />
|
||||
<Text style={[styles.linkButtonText, { color: C.link }]}>View project on Gitea</Text>
|
||||
</Pressable>
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: Colors.dark.background, // Use background color from Colors
|
||||
},
|
||||
scrollContent: {
|
||||
padding: 20,
|
||||
paddingBottom: 40,
|
||||
},
|
||||
sectionHeader: {
|
||||
fontSize: 18,
|
||||
fontWeight: 'bold',
|
||||
color: Colors.dark.text,
|
||||
marginTop: 20,
|
||||
marginBottom: 10,
|
||||
},
|
||||
settingItem: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
paddingVertical: 12,
|
||||
borderBottomWidth: 0.5,
|
||||
borderBottomColor: Colors.dark.border,
|
||||
},
|
||||
settingLabel: {
|
||||
fontSize: 16,
|
||||
color: Colors.dark.text,
|
||||
flex: 1,
|
||||
},
|
||||
settingValue: {
|
||||
fontSize: 16,
|
||||
},
|
||||
serverUrlContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
flex: 2,
|
||||
},
|
||||
input: {
|
||||
flex: 1,
|
||||
borderWidth: 1,
|
||||
borderColor: Colors.dark.border,
|
||||
borderRadius: 8,
|
||||
padding: 8,
|
||||
fontSize: 14,
|
||||
marginRight: 10,
|
||||
},
|
||||
buttonContainer: {
|
||||
marginTop: 20,
|
||||
alignItems: 'flex-start',
|
||||
},
|
||||
button: {
|
||||
paddingVertical: 10,
|
||||
paddingHorizontal: 15,
|
||||
borderRadius: 8,
|
||||
},
|
||||
buttonText: {
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
linkButton: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginTop: 15,
|
||||
paddingVertical: 8,
|
||||
},
|
||||
linkButtonText: {
|
||||
marginLeft: 5,
|
||||
fontSize: 16,
|
||||
},
|
||||
});
|
||||
@@ -1,6 +1,6 @@
|
||||
const fs = require("fs");
|
||||
const path = require("path");
|
||||
const { spawn } = require("child_process");
|
||||
const { spawn, execSync } = require("child_process");
|
||||
const { Readable } = require("stream");
|
||||
const { pipeline } = require("stream/promises");
|
||||
|
||||
@@ -127,6 +127,15 @@ function getExpoPublicReplId() {
|
||||
return process.env.REPL_ID || process.env.EXPO_PUBLIC_REPL_ID;
|
||||
}
|
||||
|
||||
function getGitSha() {
|
||||
try {
|
||||
return execSync("git rev-parse HEAD", { cwd: workspaceRoot }).toString().trim();
|
||||
} catch (error) {
|
||||
console.warn("Could not get git commit hash:", error.message);
|
||||
return "unknown";
|
||||
}
|
||||
}
|
||||
|
||||
async function startMetro(expoPublicDomain, expoPublicReplId) {
|
||||
const isRunning = await checkMetroHealth();
|
||||
if (isRunning) {
|
||||
@@ -136,10 +145,12 @@ async function startMetro(expoPublicDomain, expoPublicReplId) {
|
||||
|
||||
console.log("Starting Metro...");
|
||||
console.log(`Setting EXPO_PUBLIC_DOMAIN=${expoPublicDomain}`);
|
||||
const gitSha = getGitSha();
|
||||
const env = {
|
||||
...process.env,
|
||||
EXPO_PUBLIC_DOMAIN: expoPublicDomain,
|
||||
EXPO_PUBLIC_REPL_ID: expoPublicReplId,
|
||||
EXPO_PUBLIC_GIT_SHA: gitSha,
|
||||
};
|
||||
|
||||
if (expoPublicReplId) {
|
||||
|
||||
Reference in New Issue
Block a user