search-ui

UI Architecture

Component Hierarchy

┌─────────────────────────────────────────────────────────────────┐
│                        SearchTheme                              │
│   (Dynamic colors, typography, shapes)                          │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│   MainActivity                    SettingsActivity              │
│   ┌─────────────────────┐        ┌─────────────────────────┐   │
│   │                     │        │                         │   │
│   │  ┌───────────────┐  │        │  AnimatedContent        │   │
│   │  │ SearchField   │  │        │  (screen transitions)   │   │
│   │  └───────────────┘  │        │                         │   │
│   │                     │        │  ┌───────────────────┐  │   │
│   │  ┌───────────────┐  │        │  │ GeneralSettings   │  │   │
│   │  │RecentAppsList │  │        │  │ Screen            │  │   │
│   │  └───────────────┘  │        │  └───────────────────┘  │   │
│   │                     │        │           or            │   │
│   │  ┌───────────────┐  │        │  ┌───────────────────┐  │   │
│   │  │  ItemsList    │  │        │  │ WebSearchSettings │  │   │
│   │  │  (results)    │  │        │  │ Screen            │  │   │
│   │  └───────────────┘  │        │  └───────────────────┘  │   │
│   │                     │        │           or            │   │
│   │  ┌───────────────┐  │        │  ┌───────────────────┐  │   │
│   │  │ContactAction  │  │        │  │ ...other screens  │  │   │
│   │  │Sheet          │  │        │  └───────────────────┘  │   │
│   │  └───────────────┘  │        │                         │   │
│   │                     │        │                         │   │
│   └─────────────────────┘        └─────────────────────────┘   │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Navigation Pattern

Settings uses enum-based screen state navigation (no Navigation Component):

// Location: SettingsActivity.kt

private enum class Screen {
    Home, Providers, Appearance, Behavior, Aliases, Ranking,
    WebSearch, FileSearch, TextUtilities, AppSearch, ProviderList,
    SystemSettings, ContactsSettings, BackupRestore, TermuxSettings
}

@Composable
fun SettingsNavigation() {
    var currentScreen by remember { mutableStateOf(Screen.Home) }
    
    AnimatedContent(targetState = currentScreen) { screen ->
        when (screen) {
            Screen.Home -> GeneralSettingsScreen(
                onNavigate = { currentScreen = it }
            )
            Screen.Providers -> ProvidersSettingsScreen(...)
            Screen.WebSearch -> WebSearchSettingsScreen(...)
            // ... other screens
        }
    }
}

Theme System

// Location: ui/theme/Theme.kt

@Composable
fun SearchTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit
) {
    val colorScheme = when {
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
            if (darkTheme) dynamicDarkColorScheme(context)
            else dynamicLightColorScheme(context)
        }
        darkTheme -> DarkColorScheme
        else -> LightColorScheme
    }
    
    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography,
        content = content
    )
}

Theme Files

Reusable Settings Components

Located in ui/components/settings/:

Usage Example

@Composable
fun ExampleSettingsScreen() {
    Column {
        SettingsGroup(title = "General") {
            SettingsSwitch(
                title = "Enable Feature",
                description = "Description of what this does",
                checked = isEnabled,
                onCheckedChange = { /* update */ }
            )
            
            SettingsSliderRow(
                title = "Value",
                value = sliderValue,
                onValueChange = { /* update */ },
                valueRange = 0f..100f
            )
            
            SettingsNavigationRow(
                title = "Sub-settings",
                onClick = { onNavigate(Screen.SubSettings) }
            )
        }
    }
}

Main UI Components

Located in ui/components/:

Related Skills

• search-overview - Overall architecture
• search-guides - Adding new settings screens