fix(app): preserve persisted theme styles after startup

Module-level style composites could materialize the temporary adaptive theme before persisted settings loaded. Keep Unistyles reads in render and guard against eager module-scope access.
This commit is contained in:
Mohamed Boudra
2026-07-18 17:45:02 +02:00
parent c0622a7046
commit e0e50c9a8e
31 changed files with 188 additions and 133 deletions
@@ -212,7 +212,6 @@ function AutoExpandReasoningRow({ value, onChange }: AutoExpandReasoningRowProps
);
}
const TOOL_CALL_DETAIL_ROW_STYLE = [settingsStyles.row, settingsStyles.rowBorder];
const TOOL_CALL_DETAIL_LEVELS: readonly AppSettings["toolCallDetailLevel"][] = [
"detailed",
"overview",
@@ -250,7 +249,7 @@ function ToolCallDetailRow({ value, onChange }: ToolCallDetailRowProps) {
const { t } = useTranslation();
const selectedLabel = getToolCallDetailLevelLabel(t, value);
return (
<View style={TOOL_CALL_DETAIL_ROW_STYLE}>
<View style={[settingsStyles.row, settingsStyles.rowBorder]}>
<View style={settingsStyles.rowContent}>
<Text style={settingsStyles.rowTitle}>{t("settings.general.toolCallDetail.label")}</Text>
<Text style={settingsStyles.rowHint}>
@@ -150,7 +150,7 @@ function HostNotFound() {
const { t } = useTranslation();
return (
<View>
<View style={EMPTY_CARD_STYLE}>
<View style={[settingsStyles.card, styles.emptyCard]}>
<Text style={styles.emptyText}>{t("settings.host.notFound")}</Text>
</View>
</View>
@@ -276,7 +276,7 @@ export function HostAgentsPage({ serverId }: { serverId: string }) {
<AppendSystemPromptCard serverId={serverId} />
</SettingsSection>
) : (
<View style={EMPTY_CARD_STYLE}>
<View style={[settingsStyles.card, styles.emptyCard]}>
<Text style={styles.emptyText}>{t("settings.host.agents.unavailable")}</Text>
</View>
)}
@@ -300,7 +300,7 @@ export function HostWorkspacesPage({ serverId }: { serverId: string }) {
<AutoArchiveMergedWorkspacesCard serverId={serverId} />
</SettingsSection>
) : (
<View style={EMPTY_CARD_STYLE}>
<View style={[settingsStyles.card, styles.emptyCard]}>
<Text style={styles.emptyText}>{t("settings.host.workspaces.unavailable")}</Text>
</View>
)}
@@ -1940,4 +1940,3 @@ const styles = StyleSheet.create((theme) => ({
}));
const FLEX_1_STYLE = { flex: 1 };
const EMPTY_CARD_STYLE = [settingsStyles.card, styles.emptyCard];
@@ -264,7 +264,7 @@ export function KeyboardShortcutsSection() {
if (isNative) {
return (
<SettingsSection title={t("settings.sections.shortcuts")}>
<View style={mobileCardStyle}>
<View style={[settingsStyles.card, styles.mobileCard]}>
<Text style={styles.mobileText}>{t("settings.shortcuts.unavailableOnMobile")}</Text>
</View>
</SettingsSection>
@@ -362,5 +362,3 @@ const styles = StyleSheet.create((theme) => ({
color: theme.colors.foregroundMuted,
},
}));
const mobileCardStyle = [settingsStyles.card, styles.mobileCard];
@@ -410,12 +410,12 @@ export function ProvidersSection({ serverId }: ProvidersSectionProps) {
style={styles.sectionSpacing}
>
{!hasServer || !isConnected ? (
<View style={EMPTY_CARD_STYLE}>
<View style={[settingsStyles.card, styles.emptyCard]}>
<Text style={styles.emptyText}>{t("settings.providers.unavailable")}</Text>
</View>
) : null}
{hasServer && isConnected && isLoading ? (
<View style={EMPTY_CARD_STYLE}>
<View style={[settingsStyles.card, styles.emptyCard]}>
<Text style={styles.emptyText}>{t("settings.providers.loading")}</Text>
</View>
) : null}
@@ -543,5 +543,3 @@ const styles = StyleSheet.create((theme) => ({
backgroundColor: theme.colors.surface3,
},
}));
const EMPTY_CARD_STYLE = [settingsStyles.card, styles.emptyCard];