refactor: reorganize profile settings and extract shared components

- Extract `ToggleSettingCard` into a standalone component to improve reusability across different settings sections.
- Move clipboard detection and "seen" history settings from the Appearance section to the Others section.
- Relocate `ClearSeenHistoryCard` to `Others.kt` to align with the updated settings structure.
- Replace custom `VerticalSpacer` with standard `Spacer(Modifier.height(...))` for consistency across the profile module.
- Update visibility modifiers for `ThemeModeOption` and `ThemeColorCard` to facilitate better internal access.

Author: rainxchzed

feature/profile/presentation/src/commonMain/kotlin/zed/rainxch/profile/presentation/components/ToggleSettingCard.kt

@@ -0,0 +1,75 @@
+package zed.rainxch.profile.presentation.components
+
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Arrangement
+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.selection.toggleable
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Switch
+import androidx.compose.material3.Text
+import androidx.compose.material3.ripple
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.semantics.Role
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import zed.rainxch.core.presentation.components.ExpressiveCard
+
+@Composable
+fun ToggleSettingCard(
+    title: String,
+    description: String,
+    checked: Boolean,
+    onCheckedChange: (Boolean) -> Unit,
+) {
+    ExpressiveCard {
+        Row(
+            modifier =
+                Modifier
+                    .fillMaxWidth()
+                    .toggleable(
+                        value = checked,
+                        onValueChange = onCheckedChange,
+                        role = Role.Switch,
+                        interactionSource = remember { MutableInteractionSource() },
+                        indication = ripple(),
+                    ).padding(16.dp),
+            horizontalArrangement = Arrangement.SpaceBetween,
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            Column(
+                modifier =
+                    Modifier
+                        .weight(1f)
+                        .padding(end = 16.dp),
+            ) {
+                Text(
+                    text = title,
+                    style = MaterialTheme.typography.titleMedium,
+                    color = MaterialTheme.colorScheme.onSurface,
+                    fontWeight = FontWeight.SemiBold,
+                )
+
+                Spacer(Modifier.height(4.dp))
+
+                Text(
+                    text = description,
+                    style = MaterialTheme.typography.bodyMedium,
+                    color = MaterialTheme.colorScheme.onSurfaceVariant,
+                )
+            }
+
+            Switch(
+                checked = checked,
+                onCheckedChange = null,
+            )
+        }
+    }
+}

feature/profile/presentation/src/commonMain/kotlin/zed/rainxch/profile/presentation/components/sections/Appearance.kt

@@ -63,6 +63,7 @@ import zed.rainxch.githubstore.core.presentation.res.*
 import zed.rainxch.profile.presentation.ProfileAction
 import zed.rainxch.profile.presentation.ProfileState
 import zed.rainxch.profile.presentation.components.SectionHeader
+import zed.rainxch.profile.presentation.components.ToggleSettingCard
 
 @OptIn(ExperimentalMaterial3ExpressiveApi::class)
 fun LazyListScope.appearanceSection(
@@ -74,7 +75,7 @@ fun LazyListScope.appearanceSection(
             text = stringResource(Res.string.section_appearance),
         )
 
-        VerticalSpacer(8.dp)
+        Spacer(Modifier.height(8.dp))
 
         ThemeSelectionCard(
             isDarkTheme = state.isDarkTheme,
@@ -83,7 +84,7 @@ fun LazyListScope.appearanceSection(
             },
         )
 
-        VerticalSpacer(12.dp)
+        Spacer(Modifier.height(12.dp))
 
         ThemeColorCard(
             selectedThemeColor = state.selectedThemeColor,
@@ -92,7 +93,7 @@ fun LazyListScope.appearanceSection(
             },
         )
 
-        VerticalSpacer(16.dp)
+        Spacer(Modifier.height(16.dp))
 
         if (state.isDarkTheme == true || (state.isDarkTheme == null && isSystemInDarkTheme())) {
             ToggleSettingCard(
@@ -104,7 +105,7 @@ fun LazyListScope.appearanceSection(
                 },
             )
 
-            VerticalSpacer(8.dp)
+            Spacer(Modifier.height(8.dp))
         }
 
         ToggleSettingCard(
@@ -124,7 +125,7 @@ fun LazyListScope.appearanceSection(
             },
         )
 
-        VerticalSpacer(8.dp)
+        Spacer(Modifier.height(8.dp))
 
         ToggleSettingCard(
             title = stringResource(Res.string.liquid_glass_option_title),
@@ -134,44 +135,9 @@ fun LazyListScope.appearanceSection(
                 onAction(ProfileAction.OnLiquidGlassEnabledChange(enabled))
             },
         )
-
-        VerticalSpacer(8.dp)
-
-        ToggleSettingCard(
-            title = stringResource(Res.string.auto_detect_clipboard_links),
-            description = stringResource(Res.string.auto_detect_clipboard_description),
-            checked = state.autoDetectClipboardLinks,
-            onCheckedChange = { enabled ->
-                onAction(ProfileAction.OnAutoDetectClipboardToggled(enabled))
-            },
-        )
-
-        VerticalSpacer(8.dp)
-
-        ToggleSettingCard(
-            title = stringResource(Res.string.hide_seen_title),
-            description = stringResource(Res.string.hide_seen_description),
-            checked = state.isHideSeenEnabled,
-            onCheckedChange = { enabled ->
-                onAction(ProfileAction.OnHideSeenToggled(enabled))
-            },
-        )
-
-        VerticalSpacer(8.dp)
-
-        ClearSeenHistoryCard(
-            onClick = {
-                onAction(ProfileAction.OnClearSeenRepos)
-            },
-        )
     }
 }
 
-@Composable
-private fun VerticalSpacer(height: Dp) {
-    Spacer(Modifier.height(height))
-}
-
 @OptIn(ExperimentalMaterial3ExpressiveApi::class)
 @Composable
 private fun ThemeSelectionCard(
@@ -216,7 +182,7 @@ private fun ThemeSelectionCard(
 
 @OptIn(ExperimentalMaterial3ExpressiveApi::class)
 @Composable
-private fun ThemeModeOption(
+fun ThemeModeOption(
     icon: ImageVector,
     label: String,
     isSelected: Boolean,
@@ -275,7 +241,7 @@ private fun ThemeModeOption(
 
 @OptIn(ExperimentalMaterial3ExpressiveApi::class)
 @Composable
-private fun ThemeColorCard(
+fun ThemeColorCard(
     selectedThemeColor: AppTheme,
     onThemeColorSelected: (AppTheme) -> Unit,
 ) {
@@ -290,7 +256,7 @@ private fun ThemeColorCard(
                 fontWeight = FontWeight.SemiBold,
             )
 
-            VerticalSpacer(12.dp)
+            Spacer(Modifier.height(12.dp))
 
             LazyRow(
                 modifier = Modifier.fillMaxWidth(),
@@ -398,91 +364,3 @@ private fun ThemeColorOption(
         )
     }
 }
-
-@Composable
-private fun ToggleSettingCard(
-    title: String,
-    description: String,
-    checked: Boolean,
-    onCheckedChange: (Boolean) -> Unit,
-) {
-    ExpressiveCard {
-        Row(
-            modifier =
-                Modifier
-                    .fillMaxWidth()
-                    .toggleable(
-                        value = checked,
-                        onValueChange = onCheckedChange,
-                        role = Role.Switch,
-                        interactionSource = remember { MutableInteractionSource() },
-                        indication = ripple(),
-                    ).padding(16.dp),
-            horizontalArrangement = Arrangement.SpaceBetween,
-            verticalAlignment = Alignment.CenterVertically,
-        ) {
-            Column(
-                modifier =
-                    Modifier
-                        .weight(1f)
-                        .padding(end = 16.dp),
-            ) {
-                Text(
-                    text = title,
-                    style = MaterialTheme.typography.titleMedium,
-                    color = MaterialTheme.colorScheme.onSurface,
-                    fontWeight = FontWeight.SemiBold,
-                )
-
-                VerticalSpacer(4.dp)
-
-                Text(
-                    text = description,
-                    style = MaterialTheme.typography.bodyMedium,
-                    color = MaterialTheme.colorScheme.onSurfaceVariant,
-                )
-            }
-
-            Switch(
-                checked = checked,
-                onCheckedChange = null,
-            )
-        }
-    }
-}
-
-@Composable
-private fun ClearSeenHistoryCard(
-    onClick: () -> Unit,
-) {
-    ExpressiveCard {
-        Row(
-            modifier =
-                Modifier
-                    .fillMaxWidth()
-                    .clickable(onClick = onClick)
-                    .padding(16.dp),
-            horizontalArrangement = Arrangement.SpaceBetween,
-            verticalAlignment = Alignment.CenterVertically,
-        ) {
-            Column(
-                modifier = Modifier.weight(1f),
-            ) {
-                Text(
-                    text = stringResource(Res.string.clear_seen_history),
-                    style = MaterialTheme.typography.titleMedium,
-                    color = MaterialTheme.colorScheme.onSurface,
-                    fontWeight = FontWeight.SemiBold,
-                )
-
-                VerticalSpacer(4.dp)
-
-                Text(
-                    text = stringResource(Res.string.clear_seen_history_description),
-                    style = MaterialTheme.typography.bodyMedium,
-                    color = MaterialTheme.colorScheme.onSurfaceVariant,
-                )
-            }
-        }
-    }
-}

feature/profile/presentation/src/commonMain/kotlin/zed/rainxch/profile/presentation/components/sections/Others.kt

@@ -1,6 +1,7 @@
 package zed.rainxch.profile.presentation.components.sections
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
@@ -19,6 +20,7 @@ import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -30,6 +32,7 @@ import zed.rainxch.githubstore.core.presentation.res.*
 import zed.rainxch.profile.presentation.ProfileAction
 import zed.rainxch.profile.presentation.ProfileState
 import zed.rainxch.profile.presentation.components.SectionHeader
+import zed.rainxch.profile.presentation.components.ToggleSettingCard
 
 @OptIn(ExperimentalMaterial3ExpressiveApi::class)
 fun LazyListScope.othersSection(
@@ -100,5 +103,69 @@ fun LazyListScope.othersSection(
                 }
             }
         }
+
+        Spacer(Modifier.height(16.dp))
+
+        ToggleSettingCard(
+            title = stringResource(Res.string.auto_detect_clipboard_links),
+            description = stringResource(Res.string.auto_detect_clipboard_description),
+            checked = state.autoDetectClipboardLinks,
+            onCheckedChange = { enabled ->
+                onAction(ProfileAction.OnAutoDetectClipboardToggled(enabled))
+            },
+        )
+
+        Spacer(Modifier.height(16.dp))
+
+        ToggleSettingCard(
+            title = stringResource(Res.string.hide_seen_title),
+            description = stringResource(Res.string.hide_seen_description),
+            checked = state.isHideSeenEnabled,
+            onCheckedChange = { enabled ->
+                onAction(ProfileAction.OnHideSeenToggled(enabled))
+            },
+        )
+
+        Spacer(Modifier.height(8.dp))
+
+        ClearSeenHistoryCard(
+            onClick = {
+                onAction(ProfileAction.OnClearSeenRepos)
+            },
+        )
+    }
+}
+
+@Composable
+private fun ClearSeenHistoryCard(onClick: () -> Unit) {
+    ExpressiveCard {
+        Row(
+            modifier =
+                Modifier
+                    .fillMaxWidth()
+                    .clickable(onClick = onClick)
+                    .padding(16.dp),
+            horizontalArrangement = Arrangement.SpaceBetween,
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            Column(
+                modifier = Modifier.weight(1f),
+            ) {
+                Text(
+                    text = stringResource(Res.string.clear_seen_history),
+                    style = MaterialTheme.typography.titleMedium,
+                    color = MaterialTheme.colorScheme.onSurface,
+                    fontWeight = FontWeight.SemiBold,
+                )
+
+                Spacer(Modifier.height(4.dp))
+
+                Text(
+                    text = stringResource(Res.string.clear_seen_history_description),
+                    style = MaterialTheme.typography.bodyMedium,
+                    color = MaterialTheme.colorScheme.onSurfaceVariant,
+                )
+            }
+        }
     }
 }