misc: UI polish

This commit is contained in:
Han Yin 2025-06-27 12:02:44 -07:00
parent d211c4c605
commit 8c6e449ad2
4 changed files with 135 additions and 153 deletions

View File

@ -504,13 +504,6 @@ fun AppContent(
)
}
// Settings General Screen
composable(AppDestinations.SETTINGS_GENERAL_ROUTE) {
SettingsGeneralScreen(
viewModel = settingsViewModel
)
}
// Models Management Screen
composable(AppDestinations.MODELS_MANAGEMENT_ROUTE) {
ModelsManagementScreen(
@ -518,6 +511,13 @@ fun AppContent(
viewModel = modelsManagementViewModel
)
}
// General Settings Screen
composable(AppDestinations.SETTINGS_GENERAL_ROUTE) {
SettingsGeneralScreen(
viewModel = settingsViewModel
)
}
}
}
}

View File

@ -23,16 +23,18 @@ class UserPreferences @Inject constructor (
) {
companion object {
private val Context.dataStore: DataStore<Preferences> by preferencesDataStore(name = "settings")
// Performance monitoring preferences
val PERFORMANCE_MONITORING_ENABLED = booleanPreferencesKey("performance_monitoring_enabled")
val USE_FAHRENHEIT_TEMPERATURE = booleanPreferencesKey("use_fahrenheit_temperature")
val MONITORING_INTERVAL_MS = longPreferencesKey("monitoring_interval_ms")
val THEME_MODE = intPreferencesKey("theme_mode")
private const val DATASTORE_SETTINGS = "settings"
private val Context.settingsDataStore: DataStore<Preferences>
by preferencesDataStore(name = DATASTORE_SETTINGS)
// Default values
const val DEFAULT_MONITORING_INTERVAL_MS = 5000L
private val PERFORMANCE_MONITORING_ENABLED = booleanPreferencesKey("performance_monitoring_enabled")
private val USE_FAHRENHEIT_TEMPERATURE = booleanPreferencesKey("use_fahrenheit_temperature")
private val MONITORING_INTERVAL_MS = longPreferencesKey("monitoring_interval_ms")
private val THEME_MODE = intPreferencesKey("theme_mode")
// Constants
private const val DEFAULT_MONITORING_INTERVAL_MS = 5000L
// Theme mode values
const val THEME_MODE_AUTO = 0
@ -44,7 +46,7 @@ class UserPreferences @Inject constructor (
* Gets whether performance monitoring is enabled.
*/
fun isPerformanceMonitoringEnabled(): Flow<Boolean> {
return context.dataStore.data.map { preferences ->
return context.settingsDataStore.data.map { preferences ->
preferences[PERFORMANCE_MONITORING_ENABLED] != false
}
}
@ -53,7 +55,7 @@ class UserPreferences @Inject constructor (
* Sets whether performance monitoring is enabled.
*/
suspend fun setPerformanceMonitoringEnabled(enabled: Boolean) {
context.dataStore.edit { preferences ->
context.settingsDataStore.edit { preferences ->
preferences[PERFORMANCE_MONITORING_ENABLED] = enabled
}
}
@ -62,7 +64,7 @@ class UserPreferences @Inject constructor (
* Gets whether temperature should be displayed in Fahrenheit.
*/
fun usesFahrenheitTemperature(): Flow<Boolean> {
return context.dataStore.data.map { preferences ->
return context.settingsDataStore.data.map { preferences ->
preferences[USE_FAHRENHEIT_TEMPERATURE] == true
}
}
@ -71,7 +73,7 @@ class UserPreferences @Inject constructor (
* Sets whether temperature should be displayed in Fahrenheit.
*/
suspend fun setUseFahrenheitTemperature(useFahrenheit: Boolean) {
context.dataStore.edit { preferences ->
context.settingsDataStore.edit { preferences ->
preferences[USE_FAHRENHEIT_TEMPERATURE] = useFahrenheit
}
}
@ -82,7 +84,7 @@ class UserPreferences @Inject constructor (
* TODO-han.yin: replace with Enum value instead of millisecond value
*/
fun getMonitoringInterval(): Flow<Long> {
return context.dataStore.data.map { preferences ->
return context.settingsDataStore.data.map { preferences ->
preferences[MONITORING_INTERVAL_MS] ?: DEFAULT_MONITORING_INTERVAL_MS
}
}
@ -91,7 +93,7 @@ class UserPreferences @Inject constructor (
* Sets the monitoring interval in milliseconds.
*/
suspend fun setMonitoringInterval(intervalMs: Long) {
context.dataStore.edit { preferences ->
context.settingsDataStore.edit { preferences ->
preferences[MONITORING_INTERVAL_MS] = intervalMs
}
}
@ -100,7 +102,7 @@ class UserPreferences @Inject constructor (
* Gets the current theme mode.
*/
fun getThemeMode(): Flow<Int> {
return context.dataStore.data.map { preferences ->
return context.settingsDataStore.data.map { preferences ->
preferences[THEME_MODE] ?: THEME_MODE_AUTO
}
}
@ -109,7 +111,7 @@ class UserPreferences @Inject constructor (
* Sets the theme mode.
*/
suspend fun setThemeMode(mode: Int) {
context.dataStore.edit { preferences ->
context.settingsDataStore.edit { preferences ->
preferences[THEME_MODE] = mode
}
}

View File

@ -147,19 +147,19 @@ private fun DrawerContent(
modifier = Modifier.padding(start = 8.dp, bottom = 8.dp)
)
DrawerNavigationItem(
icon = Icons.Default.Settings,
label = "General Settings",
isSelected = currentRoute == AppDestinations.SETTINGS_GENERAL_ROUTE,
onClick = { onNavigate { navigationActions.navigateToSettingsGeneral() } }
)
DrawerNavigationItem(
icon = Icons.Default.Folder,
label = "Models",
isSelected = currentRoute == AppDestinations.MODELS_MANAGEMENT_ROUTE,
onClick = { onNavigate { navigationActions.navigateToModelsManagement() } }
)
DrawerNavigationItem(
icon = Icons.Default.Settings,
label = "General Settings",
isSelected = currentRoute == AppDestinations.SETTINGS_GENERAL_ROUTE,
onClick = { onNavigate { navigationActions.navigateToSettingsGeneral() } }
)
}
}

View File

@ -55,6 +55,12 @@ fun SettingsGeneralScreen(
onCheckedChange = { viewModel.setMonitoringEnabled(it) }
)
Spacer(modifier = Modifier.height(8.dp))
HorizontalDivider()
Spacer(modifier = Modifier.height(8.dp))
SettingsSwitch(
title = "Use Fahrenheit",
description = "Display temperature in Fahrenheit instead of Celsius",
@ -64,11 +70,6 @@ fun SettingsGeneralScreen(
}
SettingsCategory(title = "Theme") {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp)
) {
Text(
text = "Theme Mode",
style = MaterialTheme.typography.titleMedium
@ -76,7 +77,7 @@ fun SettingsGeneralScreen(
Text(
text = "Follow system setting or override with your choice",
style = MaterialTheme.typography.bodySmall,
style = MaterialTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant
)
@ -110,16 +111,12 @@ fun SettingsGeneralScreen(
}
}
}
}
// ARM Features Visualizer with Tier Information description
SettingsCategory(title = "About your device") {
Column(
modifier = Modifier.padding(16.dp)
) {
Text(
text = "ARM Capabilities",
style = MaterialTheme.typography.titleLarge
style = MaterialTheme.typography.titleMedium
)
Text(
@ -137,7 +134,7 @@ fun SettingsGeneralScreen(
Text(
text = "Optimization Tier: ${tier.name}",
style = MaterialTheme.typography.bodyLarge
style = MaterialTheme.typography.titleMedium
)
Text(
@ -148,15 +145,11 @@ fun SettingsGeneralScreen(
)
}
}
}
SettingsCategory(title = "About this app") {
Column(
modifier = Modifier.padding(16.dp)
) {
Text(
text = APP_NAME,
style = MaterialTheme.typography.titleLarge
style = MaterialTheme.typography.titleMedium
)
Text(
@ -169,12 +162,11 @@ fun SettingsGeneralScreen(
Text(
text = "Local inference for LLM models on your device powered by Arm® technologies.",
style = MaterialTheme.typography.bodyLarge
style = MaterialTheme.typography.bodyMedium
)
}
}
}
}
@Composable
fun SettingsCategory(
@ -182,20 +174,16 @@ fun SettingsCategory(
content: @Composable () -> Unit
) {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(vertical = 8.dp)
modifier = Modifier.fillMaxWidth().padding(vertical = 8.dp)
) {
Text(
text = title,
style = MaterialTheme.typography.titleMedium,
style = MaterialTheme.typography.labelLarge,
modifier = Modifier.padding(bottom = 8.dp)
)
Card(
modifier = Modifier.fillMaxWidth()
) {
Column {
Card(modifier = Modifier.fillMaxWidth()) {
Column( modifier = Modifier.fillMaxWidth().padding(16.dp)) {
content()
}
}
@ -210,11 +198,6 @@ fun SettingsSwitch(
description: String,
checked: Boolean,
onCheckedChange: (Boolean) -> Unit
) {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp)
) {
Row(
verticalAlignment = Alignment.CenterVertically,
@ -241,6 +224,3 @@ fun SettingsSwitch(
)
}
}
HorizontalDivider()
}