capacitor-sora-editor 1.2.1 → 1.8.2

package/android/src/main/java/com/abc15018045126/capacitor/soraeditor/compose/ComposeEditorActivity.kt

@@ -1,63 +1,63 @@
-package com.abc15018045126.capacitor.soraeditor.compose
-
-import android.os.Bundle
-import androidx.activity.ComponentActivity
-import androidx.activity.compose.setContent
-import androidx.activity.viewModels
-import androidx.compose.foundation.layout.*
-import androidx.compose.material3.*
-import androidx.compose.runtime.*
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.platform.LocalContext
-import com.abc15018045126.capacitor.soraeditor.compose.ui.EditorScreen
-import com.abc15018045126.capacitor.soraeditor.compose.ui.theme.NotesTheme
-
-class ComposeEditorActivity : ComponentActivity() {
-    private val viewModel: EditorViewModel by viewModels()
-
-    override fun onCreate(savedInstanceState: Bundle?) {
-        super.onCreate(savedInstanceState)
-        
-        // Get file path from intent
-        val filePath = intent.getStringExtra("FILE_PATH") ?: ""
-        val autoFocus = intent.getBooleanExtra("AUTO_FOCUS", false)
-        android.util.Log.d("ComposeEditorActivity", "onCreate with filePath: $filePath, autoFocus: $autoFocus")
-        
-        if (filePath.isNotEmpty()) {
-            viewModel.loadFile(this, filePath, autoFocus)
-        } else {
-            android.util.Log.e("ComposeEditorActivity", "No file path provided")
-        }
-
-        setContent {
-            val uiState by viewModel.uiState.collectAsState()
-            
-            LaunchedEffect(uiState.keyboardAdjust) {
-                if (uiState.keyboardAdjust) {
-                    window.setSoftInputMode(android.view.WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE)
-                } else {
-                    window.setSoftInputMode(android.view.WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN)
-                }
-            }
-
-            NotesTheme(darkTheme = uiState.isDarkTheme) {
-                Surface(
-                    modifier = Modifier.fillMaxSize(),
-                    color = MaterialTheme.colorScheme.background
-                ) {
-                    EditorScreen(
-                        uiState = uiState,
-                        viewModel = viewModel,
-                        onBack = { finish() }
-                    )
-                }
-            }
-        }
-    }
-
-    override fun onPause() {
-        super.onPause()
-        // Auto-save logic is handled inside saveOnExit, including rename check on exit
-        viewModel.saveOnExit(this)
-    }
-}
+package com.abc15018045126.capacitor.soraeditor.compose
+
+import android.os.Bundle
+import androidx.activity.ComponentActivity
+import androidx.activity.compose.setContent
+import androidx.activity.viewModels
+import androidx.compose.foundation.layout.*
+import androidx.compose.material3.*
+import androidx.compose.runtime.*
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
+import com.abc15018045126.capacitor.soraeditor.compose.ui.EditorScreen
+import com.abc15018045126.capacitor.soraeditor.compose.ui.theme.NotesTheme
+
+class ComposeEditorActivity : ComponentActivity() {
+    private val viewModel: EditorViewModel by viewModels()
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        
+        // Get file path from intent
+        val filePath = intent.getStringExtra("FILE_PATH") ?: ""
+        val autoFocus = intent.getBooleanExtra("AUTO_FOCUS", false)
+        android.util.Log.d("ComposeEditorActivity", "onCreate with filePath: $filePath, autoFocus: $autoFocus")
+        
+        if (filePath.isNotEmpty()) {
+            viewModel.loadFile(this, filePath, autoFocus)
+        } else {
+            android.util.Log.e("ComposeEditorActivity", "No file path provided")
+        }
+
+        setContent {
+            val uiState by viewModel.uiState.collectAsState()
+            
+            LaunchedEffect(uiState.keyboardAdjust) {
+                if (uiState.keyboardAdjust) {
+                    window.setSoftInputMode(android.view.WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE)
+                } else {
+                    window.setSoftInputMode(android.view.WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN)
+                }
+            }
+
+            NotesTheme(darkTheme = uiState.isDarkTheme) {
+                Surface(
+                    modifier = Modifier.fillMaxSize(),
+                    color = MaterialTheme.colorScheme.background
+                ) {
+                    EditorScreen(
+                        uiState = uiState,
+                        viewModel = viewModel,
+                        onBack = { finish() }
+                    )
+                }
+            }
+        }
+    }
+
+    override fun onPause() {
+        super.onPause()
+        // Auto-save logic is handled inside saveOnExit, including rename check on exit
+        viewModel.saveOnExit(this)
+    }
+}

package/android/src/main/java/com/abc15018045126/capacitor/soraeditor/compose/EditorViewModel.kt

@@ -68,7 +68,18 @@ data class EditorUiState(
     val keyboardAdjust: Boolean = true,
     val symbolBarColor: String = "#F5F5F5",
     val symbolTextColor: String = "#FF000000",
-    val symbolBarStyle: String = "rounded" // "rounded", "flat"
+    val symbolBarStyle: String = "rounded", // "rounded", "flat"
+    val isFastMode: Boolean = false,
+    val initialPreviewLines: Int = 20,
+    val lineNumberAlign: String = "left", // "left", "right", "center"
+    val isLineNumberRightOfDivider: Boolean = false,
+    val isLineNumberPinned: Boolean = false,
+    val lineNumberColor: String = "#FF000000",
+    val lineDividerColor: String = "#A0888888",
+    val editorTextColor: String = "auto",
+    val textActionMenuItems: List<String> = listOf("select_all", "copy", "paste", "long_select", "cut"),
+    val textActionMenuHidden: List<String> = emptyList(),
+    val textActionMenuBgColor: String = "auto"
 )
 
 class EditorViewModel : ViewModel() {
@@ -153,6 +164,34 @@ class EditorViewModel : ViewModel() {
         }
     }
 
+    fun toggleLineNumberPinned(context: Context) {
+        _uiState.update { it.copy(isLineNumberPinned = !it.isLineNumberPinned) }
+        saveSettings(context)
+    }
+
+    fun setTextActionMenuBgColor(context: Context, color: String) {
+        _uiState.update { it.copy(textActionMenuBgColor = color) }
+        saveSettings(context)
+    }
+
+    fun setTextActionMenuOrder(context: Context, order: List<String>) {
+        _uiState.update { it.copy(textActionMenuItems = order) }
+        saveSettings(context)
+    }
+
+    fun toggleTextActionMenuItemVisibility(context: Context, id: String) {
+        _uiState.update { state ->
+            val hidden = state.textActionMenuHidden.toMutableList()
+            if (id in hidden) {
+                hidden.remove(id)
+            } else {
+                hidden.add(id)
+            }
+            state.copy(textActionMenuHidden = hidden)
+        }
+        saveSettings(context)
+    }
+
     private fun queueAutoSave(context: Context) {
         saveJob?.cancel()
         saveJob = viewModelScope.launch {
@@ -462,6 +501,36 @@ class EditorViewModel : ViewModel() {
         saveSettings(context)
     }
 
+    fun setFastMode(context: Context, enabled: Boolean) {
+        _uiState.update { it.copy(isFastMode = enabled) }
+        saveSettings(context)
+    }
+
+    fun setInitialPreviewLines(context: Context, lines: Int) {
+        _uiState.update { it.copy(initialPreviewLines = lines) }
+        saveSettings(context)
+    }
+
+    fun setLineNumberAlign(context: Context, align: String) {
+        _uiState.update { it.copy(lineNumberAlign = align) }
+        saveSettings(context)
+    }
+
+    fun setLineNumberRightOfDivider(context: Context, isRight: Boolean) {
+        _uiState.update { it.copy(isLineNumberRightOfDivider = isRight) }
+        saveSettings(context)
+    }
+    
+    fun setLineNumberColor(context: Context, color: String) {
+        _uiState.update { it.copy(lineNumberColor = color) }
+        saveSettings(context)
+    }
+    
+    fun setLineDividerColor(context: Context, color: String) {
+        _uiState.update { it.copy(lineDividerColor = color) }
+        saveSettings(context)
+    }
+
     fun renameFile(newName: String): Boolean {
         val currentFile = File(_uiState.value.filePath)
         val parent = currentFile.parentFile
@@ -542,7 +611,18 @@ class EditorViewModel : ViewModel() {
             keyboardAdjust = true,
             symbolBarColor = "#F5F5F5",
             symbolTextColor = "#FF000000",
-            symbolBarStyle = "rounded"
+            symbolBarStyle = "rounded",
+            isFastMode = false,
+            initialPreviewLines = 20,
+            lineNumberAlign = "left",
+            isLineNumberRightOfDivider = false,
+            isLineNumberPinned = false,
+            lineNumberColor = "#FF000000",
+            lineDividerColor = "#A0888888",
+            editorTextColor = "auto",
+            textActionMenuItems = listOf("select_all", "copy", "paste", "long_select", "cut"),
+            textActionMenuHidden = emptyList(),
+            textActionMenuBgColor = "auto"
         ) }
         saveSettings(context)
     }
@@ -594,6 +674,17 @@ class EditorViewModel : ViewModel() {
             put("symbolBarColor", _uiState.value.symbolBarColor)
             put("symbolTextColor", _uiState.value.symbolTextColor)
             put("symbolBarStyle", _uiState.value.symbolBarStyle)
+            put("isFastMode", _uiState.value.isFastMode)
+            put("initialPreviewLines", _uiState.value.initialPreviewLines)
+            put("lineNumberAlign", _uiState.value.lineNumberAlign)
+            put("isLineNumberRightOfDivider", _uiState.value.isLineNumberRightOfDivider)
+            put("isLineNumberPinned", _uiState.value.isLineNumberPinned)
+            put("lineNumberColor", _uiState.value.lineNumberColor)
+            put("lineDividerColor", _uiState.value.lineDividerColor)
+            put("editorTextColor", _uiState.value.editorTextColor)
+            put("textActionMenuItems", org.json.JSONArray(_uiState.value.textActionMenuItems))
+            put("textActionMenuHidden", org.json.JSONArray(_uiState.value.textActionMenuHidden))
+            put("textActionMenuBgColor", _uiState.value.textActionMenuBgColor)
         }
         prefs.edit().putString("settings_json", json.toString()).apply()
     }
@@ -637,7 +728,22 @@ class EditorViewModel : ViewModel() {
             keyboardAdjust = json.optBoolean("keyboardAdjust", true),
             symbolBarColor = json.optString("symbolBarColor", "#F5F5F5"),
             symbolTextColor = json.optString("symbolTextColor", "#FF000000"),
-            symbolBarStyle = json.optString("symbolBarStyle", "rounded")
+            symbolBarStyle = json.optString("symbolBarStyle", "rounded"),
+            isFastMode = json.optBoolean("isFastMode", false),
+            initialPreviewLines = json.optInt("initialPreviewLines", 20),
+            lineNumberAlign = json.optString("lineNumberAlign", "left"),
+            isLineNumberRightOfDivider = json.optBoolean("isLineNumberRightOfDivider", false),
+            isLineNumberPinned = json.optBoolean("isLineNumberPinned", false),
+            lineNumberColor = json.optString("lineNumberColor", "#FF000000"),
+            lineDividerColor = json.optString("lineDividerColor", "#A0888888"),
+            editorTextColor = json.optString("editorTextColor", "auto"),
+            textActionMenuItems = json.optJSONArray("textActionMenuItems")?.let { arr ->
+                List(arr.length()) { arr.getString(it) }
+            } ?: listOf("select_all", "copy", "paste", "long_select", "cut"),
+            textActionMenuHidden = json.optJSONArray("textActionMenuHidden")?.let { arr ->
+                List(arr.length()) { arr.getString(it) }
+            } ?: emptyList(),
+            textActionMenuBgColor = json.optString("textActionMenuBgColor", "auto")
             )
         } catch (e: Exception) {
             e.printStackTrace()
@@ -681,7 +787,22 @@ class EditorViewModel : ViewModel() {
                 keyboardAdjust = json.optBoolean("keyboardAdjust", _uiState.value.keyboardAdjust),
                 symbolBarColor = json.optString("symbolBarColor", _uiState.value.symbolBarColor),
                 symbolTextColor = json.optString("symbolTextColor", _uiState.value.symbolTextColor),
-                symbolBarStyle = json.optString("symbolBarStyle", _uiState.value.symbolBarStyle)
+                symbolBarStyle = json.optString("symbolBarStyle", _uiState.value.symbolBarStyle),
+                isFastMode = json.optBoolean("isFastMode", _uiState.value.isFastMode),
+                initialPreviewLines = json.optInt("initialPreviewLines", _uiState.value.initialPreviewLines),
+                lineNumberAlign = json.optString("lineNumberAlign", _uiState.value.lineNumberAlign),
+                isLineNumberRightOfDivider = json.optBoolean("isLineNumberRightOfDivider", _uiState.value.isLineNumberRightOfDivider),
+                isLineNumberPinned = json.optBoolean("isLineNumberPinned", _uiState.value.isLineNumberPinned),
+                lineNumberColor = json.optString("lineNumberColor", _uiState.value.lineNumberColor),
+                lineDividerColor = json.optString("lineDividerColor", _uiState.value.lineDividerColor),
+                editorTextColor = json.optString("editorTextColor", _uiState.value.editorTextColor),
+                textActionMenuItems = json.optJSONArray("textActionMenuItems")?.let { arr ->
+                    List(arr.length()) { arr.getString(it) }
+                } ?: _uiState.value.textActionMenuItems,
+                textActionMenuHidden = json.optJSONArray("textActionMenuHidden")?.let { arr ->
+                    List(arr.length()) { arr.getString(it) }
+                } ?: _uiState.value.textActionMenuHidden,
+                textActionMenuBgColor = json.optString("textActionMenuBgColor", _uiState.value.textActionMenuBgColor)
             )
             saveSettings(context)
             true
@@ -727,6 +848,21 @@ class EditorViewModel : ViewModel() {
             put("symbolBarColor", _uiState.value.symbolBarColor)
             put("symbolTextColor", _uiState.value.symbolTextColor)
             put("symbolBarStyle", _uiState.value.symbolBarStyle)
-        } .toString(4)
+            put("isFastMode", _uiState.value.isFastMode)
+            put("initialPreviewLines", _uiState.value.initialPreviewLines)
+            put("lineNumberAlign", _uiState.value.lineNumberAlign)
+            put("isLineNumberRightOfDivider", _uiState.value.isLineNumberRightOfDivider)
+            put("lineNumberColor", _uiState.value.lineNumberColor)
+            put("lineDividerColor", _uiState.value.lineDividerColor)
+            put("editorTextColor", _uiState.value.editorTextColor)
+            put("textActionMenuItems", org.json.JSONArray(_uiState.value.textActionMenuItems))
+            put("textActionMenuHidden", org.json.JSONArray(_uiState.value.textActionMenuHidden))
+            put("textActionMenuBgColor", _uiState.value.textActionMenuBgColor)
+        }.toString(4)
+    }
+
+    fun setEditorTextColor(context: Context, color: String) {
+        _uiState.update { it.copy(editorTextColor = color) }
+        saveSettings(context)
     }
 }

package/android/src/main/java/com/abc15018045126/capacitor/soraeditor/compose/ui/EditorColorSettings.kt

@@ -0,0 +1,190 @@
+package com.abc15018045126.capacitor.soraeditor.compose.ui
+
+import android.content.Context
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
+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.unit.dp
+import androidx.compose.ui.unit.sp
+import com.abc15018045126.capacitor.soraeditor.compose.EditorUiState
+import com.abc15018045126.capacitor.soraeditor.compose.EditorViewModel
+
+@OptIn(ExperimentalLayoutApi::class)
+@Composable
+fun EditorColorSettings(
+    uiState: EditorUiState,
+    viewModel: EditorViewModel,
+    context: Context
+) {
+    Column(verticalArrangement = Arrangement.spacedBy(16.dp)) {
+        Text("主题颜色自定义 (也可在下面 JSON 自由配置)", style = MaterialTheme.typography.titleMedium)
+        val colors = listOf("#FFFFFF" to "白", "#F5F5F5" to "灰", "#E0E0E0" to "深灰", "#FFF8DC" to "米", "#E8F5E9" to "绿", "#E3F2FD" to "蓝", "#000000" to "黑")
+        
+        Column {
+            Text("编辑器背景 (Editor)", fontSize = 12.sp, color = Color.Gray)
+            FlowRow(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+                colors.forEach { (c, l) -> 
+                    ColorOption(c, l, uiState.backgroundColor == c) { viewModel.setBackgroundColor(context, c) }
+                }
+            }
+        }
+
+        Column {
+            Text("编辑器字体颜色 (Text Color)", fontSize = 12.sp, color = Color.Gray)
+            val textColors = listOf("auto" to "自动", "#FF000000" to "黑", "#FFFFFFFF" to "白", "#FF888888" to "灰", "#FF0000FF" to "蓝", "#FFFF0000" to "红", "#FF00FF00" to "绿")
+            FlowRow(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+                textColors.forEach { (c, l) -> 
+                    ColorOption(c, l, uiState.editorTextColor == c) { viewModel.setEditorTextColor(context, c) }
+                }
+            }
+        }
+
+        Column {
+            Row(verticalAlignment = Alignment.CenterVertically) {
+                Text("应用 UI 颜色 (Toolbar/Bottom)", fontSize = 12.sp, color = Color.Gray, modifier = Modifier.weight(1f))
+                TextButton(onClick = { 
+                    viewModel.setTocColor(context, uiState.uiColor)
+                    viewModel.setSearchColor(context, uiState.uiColor)
+                    viewModel.setMenuColor(context, uiState.uiColor)
+                }) {
+                    Text("同步到所有面板", fontSize = 10.sp)
+                }
+            }
+            FlowRow(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+                colors.forEach { (c, l) -> 
+                    ColorOption(c, l, uiState.uiColor == c) { viewModel.setUiColor(context, c) }
+                }
+            }
+        }
+
+        Column {
+            Text("更多菜单颜色 (More Menu)", fontSize = 12.sp, color = Color.Gray)
+            FlowRow(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+                colors.forEach { (c, l) -> 
+                    ColorOption(c, l, uiState.menuColor == c) { viewModel.setMenuColor(context, c) }
+                }
+            }
+        }
+
+        Column {
+            Text("目录面板颜色 (TOC)", fontSize = 12.sp, color = Color.Gray)
+            FlowRow(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+                colors.forEach { (c, l) -> 
+                    ColorOption(c, l, uiState.tocColor == c) { viewModel.setTocColor(context, c) }
+                }
+            }
+        }
+
+        Column {
+            Text("搜索面板颜色 (Search)", fontSize = 12.sp, color = Color.Gray)
+            FlowRow(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+                colors.forEach { (c, l) -> 
+                    ColorOption(c, l, uiState.searchColor == c) { viewModel.setSearchColor(context, c) }
+                }
+            }
+        }
+
+        Column {
+            Text("搜索匹配高亮颜色 (Search Match highlight)", fontSize = 12.sp, color = Color.Gray)
+            val matchColors = listOf(
+                "#FFF59D" to "淡黄", 
+                "#C8E6C9" to "淡绿", 
+                "#FFCDD2" to "淡红", 
+                "#B2EBF2" to "淡蓝", 
+                "#E1BEE7" to "淡紫", 
+                "#FFE0B2" to "淡橙", 
+                "#BBDEFB" to "灰蓝"
+            )
+            FlowRow(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+                matchColors.forEach { (c, l) -> 
+                    ColorOption(c, l, uiState.searchMatchBackgroundColor == c) { viewModel.setSearchMatchBackgroundColor(context, c) }
+                }
+            }
+        }
+
+        Column {
+            Text("当前行高亮颜色 (Current Line)", fontSize = 12.sp, color = Color.Gray)
+            val highlightColors = listOf(
+                "#00000000" to "无",
+                "#10000000" to "淡黑",
+                "#10888888" to "淡灰",
+                "#100000FF" to "淡蓝",
+                "#10FF0000" to "淡红",
+                "#1000FF00" to "淡绿",
+                "#20FFEB3B" to "浅黄"
+            )
+            FlowRow(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+                highlightColors.forEach { (c, l) -> 
+                    ColorOption(c, l, uiState.currentLineBackgroundColor == c) { viewModel.setCurrentLineBackgroundColor(context, c) }
+                }
+            }
+        }
+
+        Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
+            Text("光标颜色 (Cursor Color)", fontSize = 12.sp, color = Color.Gray)
+            val cursorColors = listOf("#FF000000" to "黑", "#FF888888" to "灰", "#FF0000FF" to "蓝", "#FFFF0000" to "红", "#FF00FF00" to "绿", "#FFFB8C00" to "橙", "#FF1976D2" to "深蓝")
+            FlowRow(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+                cursorColors.forEach { (c, l) -> 
+                    ColorOption(c, l, uiState.cursorColor == c) { viewModel.setCursorColor(context, c) }
+                }
+            }
+        }
+
+        Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
+            Text("光标提手颜色 (Handle Color)", fontSize = 12.sp, color = Color.Gray)
+            val handleColors = listOf("#FF000000" to "黑", "#FF888888" to "灰", "#FF0000FF" to "蓝", "#FFFF0000" to "红", "#FF00FF00" to "绿", "#FFFB8C00" to "橙", "#FF1976D2" to "深蓝")
+            FlowRow(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+                handleColors.forEach { (c, l) -> 
+                    ColorOption(c, l, uiState.handleColor == c) { viewModel.setHandleColor(context, c) }
+                }
+            }
+        }
+
+        Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
+            Text("行号颜色", fontSize = 12.sp, color = Color.Gray)
+            val lnColors = listOf("#FF000000" to "黑", "#FF888888" to "灰", "#A0888888" to "浅灰", "#FF0000FF" to "蓝", "#FFFF0000" to "红")
+            FlowRow(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+                lnColors.forEach { (c, l) -> 
+                    ColorOption(c, l, uiState.lineNumberColor == c) { viewModel.setLineNumberColor(context, c) }
+                }
+            }
+        }
+
+        Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
+            Text("分隔线颜色", fontSize = 12.sp, color = Color.Gray)
+            val divColors = listOf("#A0888888" to "默认灰", "#A0000000" to "黑", "#A0FF0000" to "红", "#A000FF00" to "绿", "#A00000FF" to "蓝")
+            FlowRow(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+                divColors.forEach { (c, l) -> 
+                    ColorOption(c, l, uiState.lineDividerColor == c) { viewModel.setLineDividerColor(context, c) }
+                }
+            }
+        }
+
+        Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
+            Text("滚动条颜色 (Scrollbar Color)", fontSize = 12.sp, color = Color.Gray)
+            val scrollbarColors = listOf("#A0888888" to "默认灰", "#A0000000" to "黑", "#A0FF0000" to "红", "#A000FF00" to "绿", "#A00000FF" to "蓝", "#A0FB8C00" to "橙", "#A01976D2" to "深蓝")
+            FlowRow(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+                scrollbarColors.forEach { (c, l) -> 
+                    ColorOption(c, l, uiState.scrollbarColor == c) { viewModel.setScrollbarColor(context, c) }
+                }
+            }
+        }
+    }
+}
+
+@Composable
+fun ColorOption(color: String, label: String, isSelected: Boolean, onClick: () -> Unit) {
+    Column(horizontalAlignment = Alignment.CenterHorizontally, modifier = Modifier.width(60.dp).clickable { onClick() }) {
+        Box(Modifier.size(40.dp).background(try { Color(android.graphics.Color.parseColor(color)) } catch(e:Exception) { Color.Gray }, RoundedCornerShape(20.dp)).border(if (isSelected) 2.dp else 1.dp, if (isSelected) MaterialTheme.colorScheme.primary else Color.LightGray, RoundedCornerShape(20.dp)))
+        Text(label, fontSize = 10.sp)
+    }
+}