split compose functions, and organize stuff

2026-02-24 01:43:35 +00:00 · 2024-12-13 01:41:37 +05:30
parent 7b03a7e9f0
commit 809818f60d
32 changed files with 1733 additions and 1273 deletions
--- a/android/app/src/main/java/me/kavishdevar/aln/composables/AccessibilitySettings.kt
+++ b/android/app/src/main/java/me/kavishdevar/aln/composables/AccessibilitySettings.kt
@@ -0,0 +1,80 @@
+package me.kavishdevar.aln.composables
+
+import android.content.Context
+import android.content.SharedPreferences
+import androidx.compose.foundation.background
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import me.kavishdevar.aln.AirPodsService
+
+@Composable
+fun AccessibilitySettings(service: AirPodsService, sharedPreferences: SharedPreferences) {
+    val isDarkTheme = isSystemInDarkTheme()
+    val textColor = if (isDarkTheme) Color.White else Color.Black
+
+    Text(
+        text = "ACCESSIBILITY",
+        style = TextStyle(
+            fontSize = 14.sp,
+            fontWeight = FontWeight.Light,
+            color = textColor.copy(alpha = 0.6f)
+        ),
+        modifier = Modifier.padding(8.dp, bottom = 2.dp)
+    )
+
+    val backgroundColor = if (isDarkTheme) Color(0xFF1C1C1E) else Color(0xFFFFFFFF)
+
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(backgroundColor, RoundedCornerShape(14.dp))
+            .padding(top = 2.dp)
+    ) {
+
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(12.dp)
+        ) {
+            Text(
+                text = "Tone Volume",
+                modifier = Modifier
+                    .padding(end = 8.dp, bottom = 2.dp, start = 2.dp)
+                    .fillMaxWidth(),
+                style = TextStyle(
+                    fontSize = 16.sp,
+                    fontWeight = FontWeight.Medium,
+                    color = textColor
+                )
+            )
+
+            ToneVolumeSlider(service = service, sharedPreferences = sharedPreferences)
+        }
+
+//        TODO: Dropdown menu with 3 options, Default, Slower, Slowest – Press speed
+//        TODO: Dropdown menu with 3 options, Default, Slower, Slowest – Press and hold duration
+//        TODO: Dropdown menu with 3 options, Default, Slower, Slowest – Volume Swipe Speed
+
+        SinglePodANCSwitch(service = service, sharedPreferences = sharedPreferences)
+        VolumeControlSwitch(service = service, sharedPreferences = sharedPreferences)
+    }
+}
+
+@Preview
+@Composable
+fun AccessibilitySettingsPreview() {
+    AccessibilitySettings(service = AirPodsService(), sharedPreferences = LocalContext.current.getSharedPreferences("preview", Context.MODE_PRIVATE))
+}
--- a/android/app/src/main/java/me/kavishdevar/aln/composables/AdaptiveStrengthSlider.kt
+++ b/android/app/src/main/java/me/kavishdevar/aln/composables/AdaptiveStrengthSlider.kt
@@ -0,0 +1,137 @@
+package me.kavishdevar.aln.composables
+
+import android.content.Context
+import android.content.SharedPreferences
+import androidx.compose.foundation.background
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Slider
+import androidx.compose.material3.SliderDefaults
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.mutableFloatStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import me.kavishdevar.aln.AirPodsService
+import kotlin.math.roundToInt
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun AdaptiveStrengthSlider(service: AirPodsService, sharedPreferences: SharedPreferences) {
+    val sliderValue = remember { mutableFloatStateOf(0f) }
+    LaunchedEffect(sliderValue) {
+        if (sharedPreferences.contains("adaptive_strength")) {
+            sliderValue.floatValue = sharedPreferences.getInt("adaptive_strength", 0).toFloat()
+        }
+    }
+    LaunchedEffect(sliderValue.floatValue) {
+        sharedPreferences.edit().putInt("adaptive_strength", sliderValue.floatValue.toInt()).apply()
+    }
+
+    val isDarkTheme = isSystemInDarkTheme()
+
+    val trackColor = if (isDarkTheme) Color(0xFFB3B3B3) else Color(0xFFD9D9D9)
+    val thumbColor = if (isDarkTheme) Color(0xFFFFFFFF) else Color(0xFFFFFFFF)
+    val labelTextColor = if (isDarkTheme) Color.White else Color.Black
+
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(horizontal = 8.dp),
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        Slider(
+            value = sliderValue.floatValue,
+            onValueChange = {
+                sliderValue.floatValue = it
+                service.setAdaptiveStrength(100 - it.toInt())
+            },
+            valueRange = 0f..100f,
+            onValueChangeFinished = {
+                sliderValue.floatValue = sliderValue.floatValue.roundToInt().toFloat()
+            },
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(36.dp),
+            colors = SliderDefaults.colors(
+                thumbColor = thumbColor,
+                inactiveTrackColor = trackColor
+            ),
+            thumb = {
+                Box(
+                    modifier = Modifier
+                        .size(24.dp)
+                        .shadow(4.dp, CircleShape)
+                        .background(thumbColor, CircleShape)
+                )
+            },
+            track = {
+                Box(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .height(12.dp),
+                    contentAlignment = Alignment.CenterStart
+                )
+                {
+                    Box(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .height(4.dp)
+                            .background(trackColor, RoundedCornerShape(4.dp))
+                    )
+                }
+
+            }
+        )
+
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            horizontalArrangement = Arrangement.SpaceBetween
+        ) {
+            Text(
+                text = "Less Noise",
+                style = TextStyle(
+                    fontSize = 14.sp,
+                    fontWeight = FontWeight.Light,
+                    color = labelTextColor
+                ),
+                modifier = Modifier.padding(start = 4.dp)
+            )
+            Text(
+                text = "More Noise",
+                style = TextStyle(
+                    fontSize = 14.sp,
+                    fontWeight = FontWeight.Light,
+                    color = labelTextColor
+                ),
+                modifier = Modifier.padding(end = 4.dp)
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+fun AdaptiveStrengthSliderPreview() {
+    AdaptiveStrengthSlider(service = AirPodsService(), sharedPreferences = LocalContext.current.getSharedPreferences("preview", Context.MODE_PRIVATE))
+}
--- a/android/app/src/main/java/me/kavishdevar/aln/composables/AudioSettings.kt
+++ b/android/app/src/main/java/me/kavishdevar/aln/composables/AudioSettings.kt
@@ -0,0 +1,87 @@
+package me.kavishdevar.aln.composables
+
+import android.content.Context
+import android.content.SharedPreferences
+import androidx.compose.foundation.background
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import me.kavishdevar.aln.AirPodsService
+
+@Composable
+fun AudioSettings(service: AirPodsService, sharedPreferences: SharedPreferences) {
+    val isDarkTheme = isSystemInDarkTheme()
+    val textColor = if (isDarkTheme) Color.White else Color.Black
+
+    Text(
+        text = "AUDIO",
+        style = TextStyle(
+            fontSize = 14.sp,
+            fontWeight = FontWeight.Light,
+            color = textColor.copy(alpha = 0.6f)
+        ),
+        modifier = Modifier.padding(8.dp, bottom = 2.dp)
+    )
+
+    val backgroundColor = if (isDarkTheme) Color(0xFF1C1C1E) else Color(0xFFFFFFFF)
+
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(backgroundColor, RoundedCornerShape(14.dp))
+            .padding(top = 2.dp)
+    ) {
+
+        PersonalizedVolumeSwitch(service = service, sharedPreferences = sharedPreferences)
+        ConversationalAwarenessSwitch(service = service, sharedPreferences = sharedPreferences)
+        LoudSoundReductionSwitch(service = service, sharedPreferences = sharedPreferences)
+
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 8.dp, vertical = 10.dp)
+        ) {
+            Text(
+                text = "Adaptive Audio",
+                modifier = Modifier
+                    .padding(end = 8.dp, bottom = 2.dp, start = 2.dp)
+                    .fillMaxWidth(),
+                style = TextStyle(
+                    fontSize = 16.sp,
+                    color = textColor
+                )
+            )
+            Text(
+                text = "Adaptive audio dynamically responds to your environment and cancels or allows external noise. You can customize Adaptive Audio to allow more or less noise.",
+                modifier = Modifier
+                    .padding(bottom = 8.dp, top = 2.dp)
+                    .padding(end = 2.dp, start = 2.dp)
+                    .fillMaxWidth(),
+                style = TextStyle(
+                    fontSize = 12.sp,
+                    color = textColor.copy(alpha = 0.6f)
+                )
+            )
+
+            AdaptiveStrengthSlider(service = service, sharedPreferences = sharedPreferences)
+        }
+    }
+}
+
+@Preview
+@Composable
+fun AudioSettingsPreview() {
+    AudioSettings(service = AirPodsService(), sharedPreferences = LocalContext.current.getSharedPreferences("preview", Context.MODE_PRIVATE))
+}
--- a/android/app/src/main/java/me/kavishdevar/aln/composables/BatteryIndicator.kt
+++ b/android/app/src/main/java/me/kavishdevar/aln/composables/BatteryIndicator.kt
@@ -22,6 +22,7 @@ import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.Font
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import me.kavishdevar.aln.R
@@ -105,4 +106,10 @@ fun BatteryIndicator(batteryPercentage: Int, charging: Boolean = false) {
            style = TextStyle(fontSize = 16.sp, fontWeight = FontWeight.Bold)
        )
    }
+}
+
+@Preview
+@Composable
+fun BatteryIndicatorPreview() {
+    BatteryIndicator(batteryPercentage = 48, charging = true)
 }
--- a/android/app/src/main/java/me/kavishdevar/aln/composables/BatteryView.kt
+++ b/android/app/src/main/java/me/kavishdevar/aln/composables/BatteryView.kt
@@ -22,12 +22,12 @@ import androidx.compose.ui.draw.scale
 import androidx.compose.ui.graphics.ImageBitmap
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.imageResource
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import me.kavishdevar.aln.AirPodsNotifications
 import me.kavishdevar.aln.AirPodsService
 import me.kavishdevar.aln.Battery
 import me.kavishdevar.aln.BatteryComponent
-import me.kavishdevar.aln.composables.BatteryIndicator
 import me.kavishdevar.aln.BatteryStatus
 import me.kavishdevar.aln.R

@@ -37,19 +37,28 @@ fun BatteryView(service: AirPodsService, preview: Boolean = false) {
    @Suppress("DEPRECATION") val batteryReceiver = remember {
        object : BroadcastReceiver() {
            override fun onReceive(context: Context, intent: Intent) {
-                batteryStatus.value =
-                    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
-                        intent.getParcelableArrayListExtra("data", Battery::class.java)
-                    } else {
-                        intent.getParcelableArrayListExtra("data")
-                    }?.toList() ?: listOf()
+                if (intent.action == AirPodsNotifications.BATTERY_DATA) {
+                    batteryStatus.value =
+                        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
+                            intent.getParcelableArrayListExtra("data", Battery::class.java)
+                        } else {
+                            intent.getParcelableArrayListExtra("data")
+                        }?.toList() ?: listOf()
+                }
+                else if (intent.action == AirPodsNotifications.DISCONNECT_RECEIVERS) {
+                    context.unregisterReceiver(this)
+                }
            }
        }
    }
    val context = LocalContext.current

    LaunchedEffect(context) {
-        val batteryIntentFilter = IntentFilter(AirPodsNotifications.BATTERY_DATA)
+        val batteryIntentFilter = IntentFilter()
+            .apply {
+                addAction(AirPodsNotifications.BATTERY_DATA)
+                addAction(AirPodsNotifications.DISCONNECT_RECEIVERS)
+            }
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
            context.registerReceiver(
                batteryReceiver,
@@ -132,4 +141,10 @@ fun BatteryView(service: AirPodsService, preview: Boolean = false) {
            }
        }
    }
+}
+
+@Preview
+@Composable
+fun BatteryViewPreview() {
+    BatteryView(AirPodsService(), preview = true)
 }
--- a/android/app/src/main/java/me/kavishdevar/aln/composables/ConversationalAwarenessSwitch.kt
+++ b/android/app/src/main/java/me/kavishdevar/aln/composables/ConversationalAwarenessSwitch.kt
@@ -0,0 +1,107 @@
+package me.kavishdevar.aln.composables
+
+import android.content.SharedPreferences
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import me.kavishdevar.aln.AirPodsService
+
+@Composable
+fun ConversationalAwarenessSwitch(service: AirPodsService, sharedPreferences: SharedPreferences) {
+    var conversationalAwarenessEnabled by remember {
+        mutableStateOf(
+            sharedPreferences.getBoolean("conversational_awareness", true)
+        )
+    }
+
+    fun updateConversationalAwareness(enabled: Boolean) {
+        conversationalAwarenessEnabled = enabled
+        sharedPreferences.edit().putBoolean("conversational_awareness", enabled).apply()
+        service.setCAEnabled(enabled)
+    }
+
+    val isDarkTheme = isSystemInDarkTheme()
+    val textColor = if (isDarkTheme) Color.White else Color.Black
+
+    val isPressed = remember { mutableStateOf(false) }
+
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(
+                shape = RoundedCornerShape(14.dp),
+                color = if (isPressed.value) Color(0xFFE0E0E0) else Color.Transparent
+            )
+            .padding(horizontal = 12.dp, vertical = 12.dp)
+            .pointerInput(Unit) {
+                detectTapGestures(
+                    onPress = {
+                        isPressed.value = true
+                        tryAwaitRelease()
+                        isPressed.value = false
+                    }
+                )
+            }
+            .clickable(
+                indication = null,
+                interactionSource = remember { MutableInteractionSource() }
+            ) {
+                updateConversationalAwareness(!conversationalAwarenessEnabled)
+            },
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Column(
+            modifier = Modifier
+                .weight(1f)
+                .padding(end = 4.dp)
+        ) {
+            Text(
+                text = "Conversational Awareness",
+                fontSize = 16.sp,
+                color = textColor
+            )
+            Spacer(modifier = Modifier.height(4.dp))
+            Text(
+                text = "Lowers media volume and reduces background noise when you start speaking to other people.",
+                fontSize = 12.sp,
+                color = textColor.copy(0.6f),
+                lineHeight = 14.sp,
+            )
+        }
+        StyledSwitch(
+            checked = conversationalAwarenessEnabled,
+            onCheckedChange = {
+                updateConversationalAwareness(it)
+            },
+        )
+    }
+}
+
+@Preview
+@Composable
+fun ConversationalAwarenessSwitchPreview() {
+    ConversationalAwarenessSwitch(AirPodsService(), LocalContext.current.getSharedPreferences("preview", 0))
+}
--- a/android/app/src/main/java/me/kavishdevar/aln/composables/IndependentToggle.kt
+++ b/android/app/src/main/java/me/kavishdevar/aln/composables/IndependentToggle.kt
@@ -0,0 +1,84 @@
+package me.kavishdevar.aln.composables
+
+import android.content.SharedPreferences
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import me.kavishdevar.aln.AirPodsService
+
+@Composable
+fun IndependentToggle(name: String, service: AirPodsService, functionName: String, sharedPreferences: SharedPreferences, default: Boolean = false) {
+    val isDarkTheme = isSystemInDarkTheme()
+    val textColor = if (isDarkTheme) Color.White else Color.Black
+
+    val snakeCasedName = name.replace(Regex("[\\W\\s]+"), "_").lowercase()
+    var checked by remember { mutableStateOf(default) }
+
+    LaunchedEffect(sharedPreferences) {
+        checked = sharedPreferences.getBoolean(snakeCasedName, true)
+    }
+    Box (
+        modifier = Modifier
+            .padding(vertical = 8.dp)
+            .background(
+                if (isDarkTheme) Color(0xFF1C1C1E) else Color(0xFFFFFFFF),
+                RoundedCornerShape(14.dp)
+            )
+            .clickable {
+                checked = !checked
+                sharedPreferences
+                    .edit()
+                    .putBoolean(snakeCasedName, checked)
+                    .apply()
+
+                val method = service::class.java.getMethod(functionName, Boolean::class.java)
+                method.invoke(service, checked)
+            },
+    )
+    {
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(55.dp)
+                .padding(horizontal = 12.dp),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            Text(text = name, modifier = Modifier.weight(1f), fontSize = 16.sp, color = textColor)
+            StyledSwitch(
+                checked = checked,
+                onCheckedChange = {
+                    checked = it
+                    sharedPreferences.edit().putBoolean(snakeCasedName, it).apply()
+                    val method = service::class.java.getMethod(functionName, Boolean::class.java)
+                    method.invoke(service, it)
+                },
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+fun IndependentTogglePreview() {
+    IndependentToggle("Test", AirPodsService(), "test", LocalContext.current.getSharedPreferences("preview", 0), true)
+}
--- a/android/app/src/main/java/me/kavishdevar/aln/composables/LoudSoundReductionSwitch.kt
+++ b/android/app/src/main/java/me/kavishdevar/aln/composables/LoudSoundReductionSwitch.kt
@@ -0,0 +1,108 @@
+package me.kavishdevar.aln.composables
+
+import android.content.SharedPreferences
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import me.kavishdevar.aln.AirPodsService
+
+@Composable
+fun LoudSoundReductionSwitch(service: AirPodsService, sharedPreferences: SharedPreferences) {
+    var loudSoundReductionEnabled by remember {
+        mutableStateOf(
+            sharedPreferences.getBoolean("loud_sound_reduction", true)
+        )
+    }
+
+    fun updateLoudSoundReduction(enabled: Boolean) {
+        loudSoundReductionEnabled = enabled
+        sharedPreferences.edit().putBoolean("loud_sound_reduction", enabled).apply()
+        service.setLoudSoundReduction(enabled)
+    }
+
+    val isDarkTheme = isSystemInDarkTheme()
+    val textColor = if (isDarkTheme) Color.White else Color.Black
+
+    val isPressed = remember { mutableStateOf(false) }
+
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(
+                shape = RoundedCornerShape(14.dp),
+                color = if (isPressed.value) Color(0xFFE0E0E0) else Color.Transparent
+            )
+            .padding(horizontal = 12.dp, vertical = 12.dp)
+            .pointerInput(Unit) {
+                detectTapGestures(
+                    onPress = {
+                        isPressed.value = true
+                        tryAwaitRelease()
+                        isPressed.value = false
+                    }
+                )
+            }
+            .clickable(
+                indication = null,
+                interactionSource = remember { MutableInteractionSource() }
+            ) {
+                updateLoudSoundReduction(!loudSoundReductionEnabled)
+            },
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Column(
+            modifier = Modifier
+                .weight(1f)
+                .padding(end = 4.dp)
+        ) {
+            Text(
+                text = "Loud Sound Reduction",
+                fontSize = 16.sp,
+                color = textColor
+            )
+            Spacer(modifier = Modifier.height(4.dp))
+            Text(
+                text = "Reduces loud sounds you are exposed to.",
+                fontSize = 12.sp,
+                color = textColor.copy(0.6f),
+                lineHeight = 14.sp,
+            )
+        }
+
+        StyledSwitch(
+            checked = loudSoundReductionEnabled,
+            onCheckedChange = {
+                updateLoudSoundReduction(it)
+            },
+        )
+    }
+}
+
+@Preview
+@Composable
+fun LoudSoundReductionSwitchPreview() {
+    LoudSoundReductionSwitch(AirPodsService(), LocalContext.current.getSharedPreferences("preview", 0))
+}
--- a/android/app/src/main/java/me/kavishdevar/aln/composables/NavigationButton.kt
+++ b/android/app/src/main/java/me/kavishdevar/aln/composables/NavigationButton.kt
@@ -0,0 +1,70 @@
+package me.kavishdevar.aln.composables
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.KeyboardArrowRight
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.IconButtonDefaults
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.navigation.NavController
+
+
+@Composable
+fun NavigationButton(to: String, name: String, navController: NavController) {
+    Row(
+        modifier = Modifier
+            .background(
+                if (isSystemInDarkTheme()) Color(
+                    0xFF1C1C1E
+                ) else Color(0xFFFFFFFF), RoundedCornerShape(14.dp)
+            )
+            .height(55.dp)
+            .clickable {
+                navController.navigate(to)
+            }
+    ) {
+        Text(
+            text = name,
+            modifier = Modifier.padding(16.dp),
+            color = if (isSystemInDarkTheme()) Color.White else Color.Black
+        )
+        Spacer(modifier = Modifier.weight(1f))
+        IconButton(
+            onClick = { navController.navigate(to) },
+            colors = IconButtonDefaults.iconButtonColors(
+                containerColor = Color.Transparent,
+                contentColor = if (isSystemInDarkTheme()) Color.White else Color.Black
+            ),
+            modifier = Modifier
+                .padding(start = 16.dp)
+                .fillMaxHeight()
+        ) {
+            @Suppress("DEPRECATION")
+            Icon(
+                imageVector = Icons.Default.KeyboardArrowRight,
+                contentDescription = name
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+fun NavigationButtonPreview() {
+    NavigationButton("to", "Name", NavController(LocalContext.current))
+}
--- a/android/app/src/main/java/me/kavishdevar/aln/composables/NoiseControlButton.kt
+++ b/android/app/src/main/java/me/kavishdevar/aln/composables/NoiseControlButton.kt
@@ -0,0 +1,62 @@
+package me.kavishdevar.aln.composables
+
+import me.kavishdevar.aln.R
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Icon
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ImageBitmap
+import androidx.compose.ui.res.imageResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun NoiseControlButton(
+    icon: ImageBitmap,
+    onClick: () -> Unit,
+    textColor: Color,
+    backgroundColor: Color,
+    modifier: Modifier = Modifier
+) {
+    Column(
+        modifier = modifier
+            .fillMaxHeight()
+            .padding(horizontal = 4.dp, vertical = 4.dp)
+            .background(color = backgroundColor, shape = RoundedCornerShape(11.dp))
+            .clickable(
+                onClick = onClick,
+                indication = null,
+                interactionSource = remember { MutableInteractionSource() }),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center
+    ) {
+        Icon(
+            bitmap = icon,
+            contentDescription = null,
+            tint = textColor,
+            modifier = Modifier.size(40.dp)
+        )
+    }
+}
+
+@Preview
+@Composable
+fun NoiseControlButtonPreview() {
+    NoiseControlButton(
+        icon = ImageBitmap.imageResource(R.drawable.noise_cancellation),
+        onClick = {},
+        textColor = Color.White,
+        backgroundColor = Color.Black
+    )
+}
--- a/android/app/src/main/java/me/kavishdevar/aln/composables/NoiseControlSettings.kt
+++ b/android/app/src/main/java/me/kavishdevar/aln/composables/NoiseControlSettings.kt
@@ -0,0 +1,231 @@
+package me.kavishdevar.aln.composables
+
+import android.annotation.SuppressLint
+import android.content.BroadcastReceiver
+import android.content.Context
+import android.content.Intent
+import android.content.IntentFilter
+import android.os.Build
+import androidx.compose.foundation.background
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.material3.VerticalDivider
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableFloatStateOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ImageBitmap
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.imageResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import me.kavishdevar.aln.AirPodsNotifications
+import me.kavishdevar.aln.AirPodsService
+import me.kavishdevar.aln.NoiseControlMode
+import me.kavishdevar.aln.R
+
+@SuppressLint("UnspecifiedRegisterReceiverFlag")
+@Composable
+fun NoiseControlSettings(service: AirPodsService) {
+    val isDarkTheme = isSystemInDarkTheme()
+    val backgroundColor = if (isDarkTheme) Color(0xFF1C1C1E) else Color(0xFFE3E3E8)
+    val textColor = if (isDarkTheme) Color.White else Color.Black
+    val textColorSelected = if (isDarkTheme) Color.White else Color.Black
+    val selectedBackground = if (isDarkTheme) Color(0xFF5C5A5F) else Color(0xFFFFFFFF)
+
+    val noiseControlMode = remember { mutableStateOf(NoiseControlMode.OFF) }
+
+
+    val d1a = remember { mutableFloatStateOf(0f) }
+    val d2a = remember { mutableFloatStateOf(0f) }
+    val d3a = remember { mutableFloatStateOf(0f) }
+
+    fun onModeSelected(mode: NoiseControlMode, received: Boolean = false) {
+        noiseControlMode.value = mode
+        if (!received) service.setANCMode(mode.ordinal+1)
+        when (mode) {
+            NoiseControlMode.NOISE_CANCELLATION -> {
+                d1a.floatValue = 1f
+                d2a.floatValue = 1f
+                d3a.floatValue = 0f
+            }
+            NoiseControlMode.OFF -> {
+                d1a.floatValue = 0f
+                d2a.floatValue = 1f
+                d3a.floatValue = 1f
+            }
+            NoiseControlMode.ADAPTIVE -> {
+                d1a.floatValue = 1f
+                d2a.floatValue = 0f
+                d3a.floatValue = 0f
+            }
+            NoiseControlMode.TRANSPARENCY -> {
+                d1a.floatValue = 0f
+                d2a.floatValue = 0f
+                d3a.floatValue = 1f
+            }
+        }
+    }
+
+    val noiseControlReceiver = remember {
+        object : BroadcastReceiver() {
+            override fun onReceive(context: Context, intent: Intent) {
+                if (intent.action == AirPodsNotifications.ANC_DATA) {
+                    noiseControlMode.value = NoiseControlMode.entries.toTypedArray()[intent.getIntExtra("data", 3) - 1]
+                    onModeSelected(noiseControlMode.value, true)
+                }
+                else if (intent.action == AirPodsNotifications.DISCONNECT_RECEIVERS) {
+                    context.unregisterReceiver(this)
+                }
+            }
+        }
+    }
+
+    val context = LocalContext.current
+    val noiseControlIntentFilter = IntentFilter()
+        .apply {
+            addAction(AirPodsNotifications.ANC_DATA)
+            addAction(AirPodsNotifications.DISCONNECT_RECEIVERS)
+        }
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
+        context.registerReceiver(noiseControlReceiver, noiseControlIntentFilter, Context.RECEIVER_EXPORTED)
+    }
+    else {
+        context.registerReceiver(noiseControlReceiver, noiseControlIntentFilter)
+    }
+
+    Text(
+        text = "NOISE CONTROL",
+        style = TextStyle(
+            fontSize = 14.sp,
+            fontWeight = FontWeight.Light,
+            color = textColor.copy(alpha = 0.6f)
+        ),
+        modifier = Modifier.padding(8.dp, bottom = 2.dp)
+    )
+
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(vertical = 16.dp)
+    ) {
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(75.dp)
+                .padding(8.dp)
+        ) {
+            Row(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .background(backgroundColor, RoundedCornerShape(14.dp))
+            ) {
+                NoiseControlButton(
+                    icon = ImageBitmap.imageResource(R.drawable.noise_cancellation),
+                    onClick = { onModeSelected(NoiseControlMode.OFF) },
+                    textColor = if (noiseControlMode.value == NoiseControlMode.OFF) textColorSelected else textColor,
+                    backgroundColor = if (noiseControlMode.value == NoiseControlMode.OFF) selectedBackground else Color.Transparent,
+                    modifier = Modifier.weight(1f)
+                )
+                VerticalDivider(
+                    thickness = 1.dp,
+                    modifier = Modifier
+                        .padding(vertical = 10.dp)
+                        .alpha(d1a.floatValue),
+                    color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.12f),
+                )
+                NoiseControlButton(
+                    icon = ImageBitmap.imageResource(R.drawable.transparency),
+                    onClick = { onModeSelected(NoiseControlMode.TRANSPARENCY) },
+                    textColor = if (noiseControlMode.value == NoiseControlMode.TRANSPARENCY) textColorSelected else textColor,
+                    backgroundColor = if (noiseControlMode.value == NoiseControlMode.TRANSPARENCY) selectedBackground else Color.Transparent,
+                    modifier = Modifier.weight(1f)
+                )
+                VerticalDivider(
+                    thickness = 1.dp,
+                    modifier = Modifier
+                        .padding(vertical = 10.dp)
+                        .alpha(d2a.floatValue),
+                    color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.12f),
+                )
+                NoiseControlButton(
+                    icon = ImageBitmap.imageResource(R.drawable.adaptive),
+                    onClick = { onModeSelected(NoiseControlMode.ADAPTIVE) },
+                    textColor = if (noiseControlMode.value == NoiseControlMode.ADAPTIVE) textColorSelected else textColor,
+                    backgroundColor = if (noiseControlMode.value == NoiseControlMode.ADAPTIVE) selectedBackground else Color.Transparent,
+                    modifier = Modifier.weight(1f)
+                )
+                VerticalDivider(
+                    thickness = 1.dp,
+                    modifier = Modifier
+                        .padding(vertical = 10.dp)
+                        .alpha(d3a.floatValue),
+                    color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.12f),
+                )
+                NoiseControlButton(
+                    icon = ImageBitmap.imageResource(R.drawable.noise_cancellation),
+                    onClick = { onModeSelected(NoiseControlMode.NOISE_CANCELLATION) },
+                    textColor = if (noiseControlMode.value == NoiseControlMode.NOISE_CANCELLATION) textColorSelected else textColor,
+                    backgroundColor = if (noiseControlMode.value == NoiseControlMode.NOISE_CANCELLATION) selectedBackground else Color.Transparent,
+                    modifier = Modifier.weight(1f)
+                )
+            }
+        }
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 8.dp)
+                .padding(top = 1.dp)
+        ) {
+            Text(
+                text = "Off",
+                style = TextStyle(fontSize = 12.sp, color = textColor),
+                textAlign = TextAlign.Center,
+                fontWeight = FontWeight.Bold,
+                modifier = Modifier.weight(1f)
+            )
+            Text(
+                text = "Transparency",
+                style = TextStyle(fontSize = 12.sp, color = textColor),
+                textAlign = TextAlign.Center,
+                fontWeight = FontWeight.Bold,
+                modifier = Modifier.weight(1f)
+            )
+            Text(
+                text = "Adaptive",
+                style = TextStyle(fontSize = 12.sp, color = textColor),
+                textAlign = TextAlign.Center,
+                fontWeight = FontWeight.Bold,
+                modifier = Modifier.weight(1f)
+            )
+            Text(
+                text = "Noise Cancellation",
+                style = TextStyle(fontSize = 12.sp, color = textColor),
+                textAlign = TextAlign.Center,
+                fontWeight = FontWeight.Bold,
+                modifier = Modifier.weight(1f)
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+fun NoiseControlSettingsPreview() {
+    NoiseControlSettings(AirPodsService())
+}
--- a/android/app/src/main/java/me/kavishdevar/aln/composables/PersonalizedVolumeSwitch.kt
+++ b/android/app/src/main/java/me/kavishdevar/aln/composables/PersonalizedVolumeSwitch.kt
@@ -0,0 +1,108 @@
+package me.kavishdevar.aln.composables
+
+import android.content.SharedPreferences
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import me.kavishdevar.aln.AirPodsService
+
+@Composable
+fun PersonalizedVolumeSwitch(service: AirPodsService, sharedPreferences: SharedPreferences) {
+    var personalizedVolumeEnabled by remember {
+        mutableStateOf(
+            sharedPreferences.getBoolean("personalized_volume", true)
+        )
+    }
+
+    fun updatePersonalizedVolume(enabled: Boolean) {
+        personalizedVolumeEnabled = enabled
+        sharedPreferences.edit().putBoolean("personalized_volume", enabled).apply()
+        service.setPVEnabled(enabled)
+    }
+
+    val isDarkTheme = isSystemInDarkTheme()
+    val textColor = if (isDarkTheme) Color.White else Color.Black
+
+    val isPressed = remember { mutableStateOf(false) }
+
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(
+                shape = RoundedCornerShape(14.dp),
+                color = if (isPressed.value) Color(0xFFE0E0E0) else Color.Transparent
+            )
+            .padding(horizontal = 12.dp, vertical = 12.dp)
+            .pointerInput(Unit) {
+                detectTapGestures(
+                    onPress = {
+                        isPressed.value = true
+                        tryAwaitRelease()
+                        isPressed.value = false
+                    }
+                )
+            }
+            .clickable(
+                indication = null,
+                interactionSource = remember { MutableInteractionSource() }
+            ) {
+                updatePersonalizedVolume(!personalizedVolumeEnabled)
+            },
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Column(
+            modifier = Modifier
+                .weight(1f)
+                .padding(end = 4.dp)
+        ) {
+            Text(
+                text = "Personalized Volume",
+                fontSize = 16.sp,
+                color = textColor
+            )
+            Spacer(modifier = Modifier.height(4.dp))
+            Text(
+                text = "Adjusts the volume of media in response to your environment.",
+                fontSize = 12.sp,
+                color = textColor.copy(0.6f),
+                lineHeight = 14.sp,
+            )
+        }
+
+        StyledSwitch(
+            checked = personalizedVolumeEnabled,
+            onCheckedChange = {
+                updatePersonalizedVolume(it)
+            },
+        )
+    }
+}
+
+@Preview
+@Composable
+fun PersonalizedVolumeSwitchPreview() {
+    PersonalizedVolumeSwitch(service = AirPodsService(), sharedPreferences = LocalContext.current.getSharedPreferences("preview", 0))
+}
--- a/android/app/src/main/java/me/kavishdevar/aln/composables/PressAndHoldSettings.kt
+++ b/android/app/src/main/java/me/kavishdevar/aln/composables/PressAndHoldSettings.kt
@@ -0,0 +1,174 @@
+package me.kavishdevar.aln.composables
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.KeyboardArrowRight
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.Font
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.navigation.NavController
+import me.kavishdevar.aln.R
+
+@Composable
+fun PressAndHoldSettings(navController: NavController) {
+    val isDarkTheme = isSystemInDarkTheme()
+    val textColor = if (isDarkTheme) Color.White else Color.Black
+
+    Text(
+        text = "PRESS AND HOLD AIRPODS",
+        style = TextStyle(
+            fontSize = 14.sp,
+            fontWeight = FontWeight.Light,
+            color = textColor.copy(alpha = 0.6f),
+            fontFamily = FontFamily(Font(R.font.sf_pro))
+        ),
+        modifier = Modifier.padding(8.dp, bottom = 2.dp)
+    )
+
+    val backgroundColor = if (isDarkTheme) Color(0xFF1C1C1E) else Color(0xFFFFFFFF)
+
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(backgroundColor, RoundedCornerShape(14.dp))
+            .padding(top = 2.dp)
+    ) {
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(55.dp)
+                .background(
+                    backgroundColor,
+                    RoundedCornerShape(14.dp)
+                )
+                .clickable(
+                    onClick = {
+                        navController.navigate("long_press/Left")
+                    }
+                ),
+            contentAlignment = Alignment.Center
+        ) {
+            Row(
+                modifier = Modifier
+                    .padding(start = 16.dp),
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Text(
+                    text = "Left",
+                    style = TextStyle(
+                        fontSize = 18.sp,
+                        color = textColor,
+                        fontFamily = FontFamily(Font(R.font.sf_pro))
+                    ),
+                )
+                Spacer(modifier = Modifier.weight(1f))
+                Text(
+                    // TODO: Implement voice assistant on long press; for now, it's noise control
+                    text = "Noise Control",
+                    style = TextStyle(
+                        fontSize = 18.sp,
+                        color = textColor.copy(alpha = 0.6f),
+                        fontFamily = FontFamily(Font(R.font.sf_pro))
+                    ),
+                )
+                IconButton(
+                    onClick = {
+                        navController.navigate("long_press/Left")
+                    }
+                ) {
+                    Icon(
+                        imageVector = Icons.AutoMirrored.Filled.KeyboardArrowRight,
+                        contentDescription = "go",
+                        tint = textColor
+                    )
+                }
+            }
+        }
+        HorizontalDivider(
+            thickness = 2.dp,
+            color = Color(0xFF4D4D4D).copy(alpha = 0.4f),
+            modifier = Modifier
+                .padding(start = 16.dp)
+        )
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(55.dp)
+                .background(
+                    backgroundColor,
+                    RoundedCornerShape(18.dp)
+                )
+                .clickable(
+                    onClick = {
+                        navController.navigate("long_press/Right")
+                    }
+                ),
+            contentAlignment = Alignment.Center
+        ) {
+            Row(
+                modifier = Modifier
+                    .padding(start = 16.dp),
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Text(
+                    text = "Right",
+                    style = TextStyle(
+                        fontSize = 18.sp,
+                        color = textColor,
+                        fontFamily = FontFamily(Font(R.font.sf_pro))
+                    ),
+                )
+                Spacer(modifier = Modifier.weight(1f))
+                Text(
+                    // TODO: Implement voice assistant on long press; for now, it's noise control
+                    text = "Noise Control",
+                    style = TextStyle(
+                        fontSize = 18.sp,
+                        color = textColor.copy(alpha = 0.6f),
+                        fontFamily = FontFamily(Font(R.font.sf_pro))
+                    ),
+                )
+                IconButton(
+                    onClick = {
+                        navController.navigate("long_press/Right")
+                    }
+                ) {
+                    Icon(
+                        imageVector = Icons.AutoMirrored.Filled.KeyboardArrowRight,
+                        contentDescription = "go",
+                        tint = textColor
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+fun PressAndHoldSettingsPreview() {
+    PressAndHoldSettings(navController = NavController(LocalContext.current))
+}
--- a/android/app/src/main/java/me/kavishdevar/aln/composables/SinglePodANCSwitch.kt
+++ b/android/app/src/main/java/me/kavishdevar/aln/composables/SinglePodANCSwitch.kt
@@ -5,6 +5,7 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.gestures.detectTapGestures
 import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
@@ -12,7 +13,6 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -22,8 +22,9 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.luminance
 import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import me.kavishdevar.aln.AirPodsService
@@ -42,7 +43,7 @@ fun SinglePodANCSwitch(service: AirPodsService, sharedPreferences: SharedPrefere
        service.setNoiseCancellationWithOnePod(enabled)
    }

-    val isDarkTheme = MaterialTheme.colorScheme.surface.luminance() < 0.5
+    val isDarkTheme = isSystemInDarkTheme()
    val textColor = if (isDarkTheme) Color.White else Color.Black

    val isPressed = remember { mutableStateOf(false) }
@@ -97,4 +98,10 @@ fun SinglePodANCSwitch(service: AirPodsService, sharedPreferences: SharedPrefere
            },
        )
    }
+}
+
+@Preview
+@Composable
+fun SinglePodANCSwitchPreview() {
+    SinglePodANCSwitch(service = AirPodsService(), sharedPreferences = LocalContext.current.getSharedPreferences("preview", 0))
 }
--- a/android/app/src/main/java/me/kavishdevar/aln/composables/StyledSwitch.kt
+++ b/android/app/src/main/java/me/kavishdevar/aln/composables/StyledSwitch.kt
@@ -3,6 +3,7 @@ package me.kavishdevar.aln.composables
 import androidx.compose.animation.core.animateDpAsState
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.offset
@@ -11,14 +12,13 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.luminance
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp

@Composable
@@ -26,7 +26,7 @@ fun StyledSwitch(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit
 ) {
-    val isDarkTheme = MaterialTheme.colorScheme.surface.luminance() < 0.5
+    val isDarkTheme = isSystemInDarkTheme()

    val thumbColor = Color.White
    val trackColor = if (checked) Color(0xFF34C759) else if (isDarkTheme) Color(0xFF5B5B5E) else Color(0xFFD1D1D6)
@@ -53,3 +53,9 @@ fun StyledSwitch(
        )
    }
 }
+
+@Preview
+@Composable
+fun StyledSwitchPreview() {
+    StyledSwitch(checked = true, onCheckedChange = {})
+}
--- a/android/app/src/main/java/me/kavishdevar/aln/composables/StyledTextField.kt
+++ b/android/app/src/main/java/me/kavishdevar/aln/composables/StyledTextField.kt
@@ -1,6 +1,7 @@
 package me.kavishdevar.aln.composables

 import androidx.compose.foundation.background
+import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -8,7 +9,6 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.BasicTextField
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -20,8 +20,8 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.SolidColor
-import androidx.compose.ui.graphics.luminance
 import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp

@@ -33,7 +33,7 @@ fun StyledTextField(
 ) {
    var isFocused by remember { mutableStateOf(false) }

-    val isDarkTheme = MaterialTheme.colorScheme.surface.luminance() < 0.5
+    val isDarkTheme = isSystemInDarkTheme()

    val backgroundColor = if (isDarkTheme) Color(0xFF1C1C1E) else Color(0xFFFFFFFF)
    val textColor = if (isDarkTheme) Color.White else Color.Black
@@ -86,4 +86,10 @@ fun StyledTextField(
                }
        )
    }
+}
+
+@Preview
+@Composable
+fun StyledTextFieldPreview() {
+    StyledTextField(name = "Name", value = "AirPods Pro", onValueChange = {})
 }
--- a/android/app/src/main/java/me/kavishdevar/aln/composables/ToneVolumeSlider.kt
+++ b/android/app/src/main/java/me/kavishdevar/aln/composables/ToneVolumeSlider.kt
@@ -2,6 +2,7 @@ package me.kavishdevar.aln.composables

 import android.content.SharedPreferences
 import androidx.compose.foundation.background
+import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
@@ -12,7 +13,6 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Slider
 import androidx.compose.material3.SliderDefaults
 import androidx.compose.material3.Text
@@ -24,11 +24,12 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.luminance
+import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.Font
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import me.kavishdevar.aln.AirPodsService
@@ -48,7 +49,7 @@ fun ToneVolumeSlider(service: AirPodsService, sharedPreferences: SharedPreferenc
        sharedPreferences.edit().putInt("tone_volume", sliderValue.floatValue.toInt()).apply()
    }

-    val isDarkTheme = MaterialTheme.colorScheme.surface.luminance() < 0.5
+    val isDarkTheme = isSystemInDarkTheme()

    val trackColor = if (isDarkTheme) Color(0xFFB3B3B3) else Color(0xFF929491)
    val activeTrackColor = if (isDarkTheme) Color(0xFF007AFF) else Color(0xFF3C6DF5)
@@ -132,4 +133,10 @@ fun ToneVolumeSlider(service: AirPodsService, sharedPreferences: SharedPreferenc
            modifier = Modifier.padding(end = 4.dp)
        )
    }
+}
+
+@Preview
+@Composable
+fun ToneVolumeSliderPreview() {
+    ToneVolumeSlider(AirPodsService(), sharedPreferences = LocalContext.current.getSharedPreferences("preview", 0))
 }
--- a/android/app/src/main/java/me/kavishdevar/aln/composables/VolumeControlSwitch.kt
+++ b/android/app/src/main/java/me/kavishdevar/aln/composables/VolumeControlSwitch.kt
@@ -5,6 +5,7 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.gestures.detectTapGestures
 import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
@@ -12,7 +13,6 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -22,8 +22,9 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.luminance
 import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import me.kavishdevar.aln.AirPodsService
@@ -41,7 +42,7 @@ fun VolumeControlSwitch(service: AirPodsService, sharedPreferences: SharedPrefer
        service.setVolumeControl(enabled)
    }

-    val isDarkTheme = MaterialTheme.colorScheme.surface.luminance() < 0.5
+    val isDarkTheme = isSystemInDarkTheme()
    val textColor = if (isDarkTheme) Color.White else Color.Black

    val isPressed = remember { mutableStateOf(false) }
@@ -96,4 +97,10 @@ fun VolumeControlSwitch(service: AirPodsService, sharedPreferences: SharedPrefer
            },
        )
    }
+}
+
+@Preview
+@Composable
+fun VolumeControlSwitchPreview() {
+    VolumeControlSwitch(service = AirPodsService(), sharedPreferences = LocalContext.current.getSharedPreferences("preview", 0))
 }