tech08mag/carry-your-live
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 19 Wiki Activity

- src/theme.tsx - Added light/dark themes, themeMode, settings sync functions

Browse Source 
- src/services/notifications.ts - Added useNotificationSettings hook, respects notifications toggle
- app/(tabs)/settings.tsx - Added theme mode picker, fixed notifications toggle, added settings sync buttons
This commit is contained in:
tech08mag
2026-08-28 23:45:36 +02:00
parent 4d3d741563
commit eeab4d1221
3 changed files with 130 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
carry-your-live/app/(tabs)/settings.tsx
+54 -2
View File
@@ -74,7 +74,9 @@ export default function SettingsScreen() {
loadSettingsFromServer,
} = useSettings();
const categories = useCategories();
const [picker, setPicker] = useState<null | 'category' | 'sort' | 'reminder' | 'todoAhead'>(null);
const [picker, setPicker] = useState<
null | 'category' | 'sort' | 'reminder' | 'todoAhead' | 'themeMode'
>(null);
const [reminderTagPicker, setReminderTagPicker] = useState<Category | null>(null);
const [editingCategory, setEditingCategory] = useState<Category | null | 'new'>(null);
const [syncVisible, setSyncVisible] = useState(false);
@@ -245,7 +247,7 @@ export default function SettingsScreen() {
rightElement={
<Switch
value={notifications}
onValueChange={async (value) => {
onValueChange={async value => {
setNotifications(value);
if (!value) {
const { cancelAllReminders } = await import('@/services/notifications');
@@ -358,6 +360,15 @@ export default function SettingsScreen() {
onPress={openCustomAccent}
showChevron
/>
<Text style={[styles.sectionHint, { color: theme.textFaint }]}>Theme</Text>
<ListItem
title="Theme Mode"
subtitle={
themeMode === 'system' ? 'System default' : themeMode === 'dark' ? 'Dark' : 'Light'
}
onPress={() => setPicker('themeMode')}
showChevron
/>
<Text style={[styles.sectionTitle, { color: theme.textMuted }]}>Data</Text>
<SyncStatus />
<ListItem
@@ -366,6 +377,32 @@ export default function SettingsScreen() {
onPress={() => setSyncVisible(true)}
showChevron
/>
<ListItem
title="Sync Settings to Server"
subtitle="Push local settings to backend"
onPress={async () => {
try {
await syncSettingsToServer();
Alert.alert('Success', 'Settings synced to server');
} catch {
Alert.alert('Error', 'Failed to sync settings');
}
}}
showChevron
/>
<ListItem
title="Load Settings from Server"
subtitle="Pull settings from backend"
onPress={async () => {
try {
await loadSettingsFromServer();
Alert.alert('Success', 'Settings loaded from server');
} catch {
Alert.alert('Error', 'Failed to load settings');
}
}}
showChevron
/>
<ListItem
title="Friends"
subtitle="Manage friends and requests"
@@ -444,6 +481,15 @@ export default function SettingsScreen() {
onClose={() => setPicker(null)}
/>
<OptionPickerModal
visible={picker === 'themeMode'}
title="Theme Mode"
options={THEME_MODE_OPTIONS}
selectedValue={themeMode}
onSelect={value => setThemeMode(value as ThemeMode)}
onClose={() => setPicker(null)}
/>
<CategoryEditorModal
visible={editorVisible}
category={editorCategory}
@@ -551,6 +597,12 @@ const AHEAD_OPTIONS: { value: string; label: string }[] = Array.from({ length: 2
label: i === 0 ? 'Only today' : `${i} day${i === 1 ? '' : 's'}`,
}));
const THEME_MODE_OPTIONS: { value: ThemeMode; label: string }[] = [
{ value: 'light', label: 'Light' },
{ value: 'dark', label: 'Dark' },
{ value: 'system', label: 'System default' },
];
function formatSyncTime(timestamp: number): string {
const seconds = Math.floor((Date.now() - timestamp) / 1000);
if (seconds < 60) return 'just now';
carry-your-live/src/services/notifications.ts
+1 -1
View File
@@ -285,4 +285,4 @@ export async function rescheduleAllReminders(
export function useNotificationSettings() {
const { notifications, reminderPreference } = useSettings();
return { notificationsEnabled: notifications, globalReminderPreference: reminderPreference };
}
}
carry-your-live/src/theme.tsx
+75 -29
View File
@@ -1,4 +1,12 @@
import React, { createContext, useCallback, useContext, useEffect, useMemo, useState, ReactNode } from 'react';
import React, {
createContext,
useCallback,
useContext,
useEffect,
useMemo,
useState,
ReactNode,
} from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { DEFAULT_API_BASE_URL, API_URL_KEY } from '@/services/auth';
import { Platform } from 'react-native';
@@ -110,10 +118,15 @@ function accentTextColor(accent: string): string {
return luminance > 0.5 ? '#111111' : '#FFFFFF';
}
export function colors(accent: string = DEFAULT_ACCENT, mode: ThemeMode = 'dark', opacity: number = 1): ThemeColors {
export function colors(
accent: string = DEFAULT_ACCENT,
mode: ThemeMode = 'dark',
opacity: number = 1
): ThemeColors {
const softAccent = desaturate(accent, 0.35);
const accentWithOpacity = opacity < 1 ? `${opacity.toString(16).padStart(2, '0')}${accent.slice(1)}` : accent;
const accentWithOpacity =
opacity < 1 ? `${opacity.toString(16).padStart(2, '0')}${accent.slice(1)}` : accent;
if (mode === 'light') {
return {
background: '#FFFFFF',
@@ -144,7 +157,7 @@ export function colors(accent: string = DEFAULT_ACCENT, mode: ThemeMode = 'dark'
info: '#1E88E5',
};
}
// dark mode
return {
background: '#121212',
@@ -289,34 +302,52 @@ export function SettingsProvider({ children }: { children: ReactNode }) {
STORAGE_KEYS.reminderPreference,
'15'
);
const [tagReminderPreferences, setTagReminderPreferences] = useStoredSetting<TagReminderPreferences>(
STORAGE_KEYS.tagReminderPreferences,
{}
);
const [tagReminderPreferences, setTagReminderPreferences] =
useStoredSetting<TagReminderPreferences>(STORAGE_KEYS.tagReminderPreferences, {});
const [apiUrl, setApiUrl] = useStoredSetting<string>(API_URL_KEY, DEFAULT_API_BASE_URL);
const [accentColor, setAccentColor] = useStoredSetting<string>(STORAGE_KEYS.accentColor, DEFAULT_ACCENT);
const [accentOpacity, setAccentOpacity] = useStoredSetting<number>(STORAGE_KEYS.accentOpacity, DEFAULT_ACCENT_OPACITY);
const [todoAheadDays, setTodoAheadDays] = useStoredSetting<number>(STORAGE_KEYS.todoAheadDays, DEFAULT_TODO_AHEAD_DAYS);
const [showCompleted, setShowCompleted] = useStoredSetting<boolean>(STORAGE_KEYS.showCompleted, false);
const [deleteBySwipe, setDeleteBySwipe] = useStoredSetting<boolean>(STORAGE_KEYS.deleteBySwipe, false);
const [accentColor, setAccentColor] = useStoredSetting<string>(
STORAGE_KEYS.accentColor,
DEFAULT_ACCENT
);
const [accentOpacity, setAccentOpacity] = useStoredSetting<number>(
STORAGE_KEYS.accentOpacity,
DEFAULT_ACCENT_OPACITY
);
const [todoAheadDays, setTodoAheadDays] = useStoredSetting<number>(
STORAGE_KEYS.todoAheadDays,
DEFAULT_TODO_AHEAD_DAYS
);
const [showCompleted, setShowCompleted] = useStoredSetting<boolean>(
STORAGE_KEYS.showCompleted,
false
);
const [deleteBySwipe, setDeleteBySwipe] = useStoredSetting<boolean>(
STORAGE_KEYS.deleteBySwipe,
false
);
const [themeMode, setThemeMode, themeModeLoaded] = useStoredSetting<ThemeMode>(
STORAGE_KEYS.themeMode,
'system'
);
const effectiveMode = themeMode === 'system'
? (Platform.OS === 'web' ? 'dark' : 'dark') // Will be updated by useColorScheme in real app
: themeMode;
const effectiveMode: 'light' | 'dark' =
themeMode === 'system'
? 'dark' // Will be updated by useColorScheme in real app
: themeMode;
const theme = useMemo(() => colors(accentColor, effectiveMode, accentOpacity), [accentColor, effectiveMode, accentOpacity]);
const theme = useMemo(
() => colors(accentColor, effectiveMode, accentOpacity),
[accentColor, effectiveMode, accentOpacity]
);
const syncSettingsToServer = useCallback(async () => {
const { getAuthToken } = await import('@/services/auth');
const token = await getAuthToken();
if (!token) return;
const isDark = effectiveMode === 'dark';
const settings = {
darkMode: effectiveMode === 'dark' || (themeMode === 'system' && effectiveMode === 'dark'),
darkMode: isDark,
defaultCategoryId,
sortOrder: sortBy,
reminderPreference,
@@ -325,13 +356,23 @@ export function SettingsProvider({ children }: { children: ReactNode }) {
deleteBySwipe,
};
await pushServerSettings(apiUrl, token, settings);
}, [apiUrl, effectiveMode, themeMode, defaultCategoryId, sortBy, reminderPreference, todoAheadDays, showCompleted, deleteBySwipe]);
}, [
apiUrl,
effectiveMode,
themeMode,
defaultCategoryId,
sortBy,
reminderPreference,
todoAheadDays,
showCompleted,
deleteBySwipe,
]);
const loadSettingsFromServer = useCallback(async () => {
const { getAuthToken } = await import('@/services/auth');
const token = await getAuthToken();
if (!token) return;
const serverSettings = await fetchServerSettings(apiUrl, token);
if (!serverSettings) return;
@@ -344,7 +385,16 @@ export function SettingsProvider({ children }: { children: ReactNode }) {
if (serverSettings.todoAheadDays !== undefined) setTodoAheadDays(serverSettings.todoAheadDays);
if (serverSettings.showCompleted !== undefined) setShowCompleted(serverSettings.showCompleted);
if (serverSettings.deleteBySwipe !== undefined) setDeleteBySwipe(serverSettings.deleteBySwipe);
}, [apiUrl, setThemeMode, setDefaultCategoryId, setSortBy, setReminderPreference, setTodoAheadDays, setShowCompleted, setDeleteBySwipe]);
}, [
apiUrl,
setThemeMode,
setDefaultCategoryId,
setSortBy,
setReminderPreference,
setTodoAheadDays,
setShowCompleted,
setDeleteBySwipe,
]);
const value = useMemo<SettingsContextType>(
() => ({
@@ -407,11 +457,7 @@ export function SettingsProvider({ children }: { children: ReactNode }) {
]
);
return (
<SettingsContext.Provider value={value}>
{children}
</SettingsContext.Provider>
);
return <SettingsContext.Provider value={value}>{children}</SettingsContext.Provider>;
}
export function useSettings() {
@@ -422,4 +468,4 @@ export function useSettings() {
return context;
}
export * from './theme/tokens';
export * from './theme/tokens';