git.iko.soy/opencode-android
on a40d3a2 help sign in
opencode-android/app/src/main/java/soy/iko/opencode/ui/file/FileBrowserScreen.kt
288 lines 12 kB history raw
1package soy.iko.opencode.ui.file
3import androidx.compose.foundation.clickable
4import androidx.compose.foundation.horizontalScroll
5import androidx.compose.foundation.layout.Box
6import androidx.compose.foundation.layout.Column
7import androidx.compose.foundation.layout.Row
8import androidx.compose.foundation.layout.fillMaxSize
9import androidx.compose.foundation.layout.fillMaxWidth
10import androidx.compose.foundation.layout.padding
11import androidx.compose.foundation.layout.size
12import androidx.compose.foundation.lazy.LazyColumn
13import androidx.compose.foundation.lazy.items
14import androidx.compose.foundation.rememberScrollState
15import androidx.compose.foundation.text.KeyboardOptions
16import androidx.compose.material.icons.Icons
17import androidx.compose.material.icons.automirrored.filled.ArrowBack
18import androidx.compose.material.icons.filled.ChevronRight
19import androidx.compose.material.icons.filled.Description
20import androidx.compose.material.icons.filled.Folder
21import androidx.compose.material.icons.filled.Home
22import androidx.compose.material.icons.filled.Search
23import androidx.compose.material3.CircularProgressIndicator
24import androidx.compose.material3.ExperimentalMaterial3Api
25import androidx.compose.material3.HorizontalDivider
26import androidx.compose.material3.Icon
27import androidx.compose.material3.IconButton
28import androidx.compose.material3.MaterialTheme
29import androidx.compose.material3.OutlinedTextField
30import androidx.compose.material3.Scaffold
31import androidx.compose.material3.SnackbarHost
32import androidx.compose.material3.SnackbarHostState
33import androidx.compose.material3.Text
34import androidx.compose.material3.TopAppBar
35import androidx.compose.runtime.Composable
36import androidx.compose.runtime.LaunchedEffect
37import androidx.compose.runtime.getValue
38import androidx.compose.runtime.remember
39import androidx.compose.ui.Alignment
40import androidx.compose.ui.Modifier
41import androidx.compose.ui.graphics.Color
42import androidx.compose.ui.platform.testTag
43import androidx.compose.ui.semantics.Role
44import androidx.compose.ui.semantics.contentDescription
45import androidx.compose.ui.semantics.role
46import androidx.compose.ui.semantics.semantics
47import androidx.compose.ui.text.font.FontFamily
48import androidx.compose.ui.text.input.ImeAction
49import androidx.compose.ui.text.style.TextOverflow
50import androidx.compose.ui.unit.dp
51import androidx.compose.ui.res.stringResource
52import androidx.lifecycle.compose.collectAsStateWithLifecycle
53import androidx.lifecycle.viewmodel.compose.viewModel
54import soy.iko.opencode.data.model.FileStatusEntry
55import soy.iko.opencode.di.AppContainer
56import soy.iko.opencode.R
57import soy.iko.opencode.ui.vmFactory
59@OptIn(ExperimentalMaterial3Api::class)
60@Composable
61fun FileBrowserScreen(
62 container: AppContainer,
63 onOpenFile: (String) -> Unit,
64 onBack: () -> Unit,
65) {
66 val vm: FileBrowserViewModel = viewModel(factory = vmFactory { FileBrowserViewModel(container) })
67 val state by vm.state.collectAsStateWithLifecycle()
68 val snackbar = remember { SnackbarHostState() }
70 LaunchedEffect(Unit) {
71 vm.transientErrors.collect { msg ->
72 snackbar.showSnackbar(msg)
73 }
74 }
76 Scaffold(
77 topBar = {
78 TopAppBar(
79 title = { Text(stringResource(R.string.files), maxLines = 1, overflow = TextOverflow.Ellipsis) },
80 navigationIcon = {
81 IconButton(onClick = onBack) {
82 Icon(Icons.AutoMirrored.Filled.ArrowBack, contentDescription = stringResource(R.string.back))
83 }
84 },
85 )
86 },
87 snackbarHost = { SnackbarHost(snackbar) },
88 ) { padding ->
89 Column(modifier = Modifier.fillMaxSize().padding(padding)) {
90 // Tappable breadcrumb trail so deep paths are navigable.
91 Breadcrumbs(
92 path = state.path,
93 onNavigate = vm::open,
94 modifier = Modifier.fillMaxWidth(),
95 )
96 OutlinedTextField(
97 value = state.query,
98 onValueChange = vm::setQuery,
99 modifier = Modifier.fillMaxWidth().padding(12.dp).testTag("file_search"),
100 placeholder = { Text(stringResource(R.string.search_files)) },
101 label = { Text(stringResource(R.string.search_files)) },
102 leadingIcon = { Icon(Icons.Filled.Search, contentDescription = null) },
103 singleLine = true,
104 keyboardOptions = KeyboardOptions(imeAction = ImeAction.Search),
105 )
107 Box(modifier = Modifier.fillMaxSize()) {
108 when {
109 state.loading || state.searching -> {
110 val loadingLabel = stringResource(R.string.loading)
111 CircularProgressIndicator(
112 Modifier.align(Alignment.Center).semantics { contentDescription = loadingLabel },
113 )
114 }
115 state.error != null -> Column(
116 modifier = Modifier.align(Alignment.Center).padding(24.dp),
117 horizontalAlignment = Alignment.CenterHorizontally,
118 ) {
119 Text(
120 state.error ?: "",
121 color = MaterialTheme.colorScheme.error,
122 )
123 androidx.compose.foundation.layout.Spacer(Modifier.size(12.dp))
124 androidx.compose.material3.TextButton(onClick = { vm.open(state.path) }) {
125 Text(stringResource(R.string.retry))
126 }
127 }
128 state.isSearching -> SearchResults(state.results, onOpenFile)
129 else -> DirectoryListing(
130 state = state,
131 onOpenDir = vm::open,
132 onUp = vm::up,
133 onOpenFile = onOpenFile,
134 )
135 }
136 }
137 }
138 }
141@Composable
142private fun Breadcrumbs(path: String, onNavigate: (String) -> Unit, modifier: Modifier = Modifier) {
143 val segments = if (path.isBlank()) emptyList() else path.trim('/').split('/').filter { it.isNotEmpty() }
144 Row(
145 modifier = modifier
146 .horizontalScroll(rememberScrollState())
147 .padding(horizontal = 16.dp, vertical = 8.dp),
148 verticalAlignment = Alignment.CenterVertically,
149 ) {
150 IconButton(onClick = { onNavigate("") }) {
151 Icon(Icons.Filled.Home, contentDescription = stringResource(R.string.root), modifier = Modifier.size(24.dp))
152 }
153 var acc = ""
154 segments.forEachIndexed { index, segment ->
155 acc = if (acc.isEmpty()) segment else "$acc/$segment"
156 Icon(
157 Icons.Filled.ChevronRight,
158 contentDescription = null,
159 modifier = Modifier.size(16.dp),
160 tint = MaterialTheme.colorScheme.onSurfaceVariant,
161 )
162 val target = acc
163 Text(
164 segment,
165 style = MaterialTheme.typography.bodyMedium,
166 color = if (index == segments.lastIndex) MaterialTheme.colorScheme.onSurface else MaterialTheme.colorScheme.primary,
167 modifier = Modifier
168 .clickable(role = Role.Button) { onNavigate(target) }
169 .padding(horizontal = 6.dp, vertical = 14.dp),
170 )
171 }
172 }
175@Composable
176private fun SearchResults(results: List<String>, onOpenFile: (String) -> Unit) {
177 if (results.isEmpty()) {
178 Text(stringResource(R.string.no_matches), modifier = Modifier.padding(24.dp))
179 return
180 }
181 LazyColumn(modifier = Modifier.fillMaxSize()) {
182 items(results, key = { it }) { path ->
183 FileRow(icon = false, label = path, onClick = { onOpenFile(path) })
184 HorizontalDivider()
185 }
186 }
189@Composable
190private fun DirectoryListing(
191 state: FileBrowserState,
192 onOpenDir: (String) -> Unit,
193 onUp: () -> Unit,
194 onOpenFile: (String) -> Unit,
195) {
196 if (state.entries.isEmpty() && state.path.isBlank()) {
197 Text(
198 stringResource(R.string.empty_folder),
199 modifier = Modifier.fillMaxWidth().padding(24.dp),
200 color = MaterialTheme.colorScheme.onSurfaceVariant,
201 )
202 return
203 }
204 LazyColumn(modifier = Modifier.fillMaxSize()) {
205 if (state.path.isNotBlank()) {
206 item(key = "__up") {
207 FileRow(icon = true, label = "..", onClick = onUp)
208 HorizontalDivider()
209 }
210 }
211 items(state.entries, key = { it.path + "_" + it.name }) { node ->
212 FileRow(
213 icon = node.isDirectory,
214 label = node.name,
215 onClick = { if (node.isDirectory) onOpenDir(node.path) else onOpenFile(node.path) },
216 status = state.statusMap[node.path],
217 )
218 HorizontalDivider()
219 }
220 }
223@Composable
224private fun FileRow(
225 icon: Boolean,
226 label: String,
227 onClick: () -> Unit,
228 status: FileStatusEntry? = null,
229) {
230 val desc = if (label == "..") stringResource(R.string.parent_dir)
231 else if (icon) stringResource(R.string.folder, label)
232 else stringResource(R.string.file_label, label)
233 Row(
234 modifier = Modifier
235 .fillMaxWidth()
236 .clickable(role = Role.Button, onClick = onClick)
237 .semantics(mergeDescendants = true) { contentDescription = desc }
238 .padding(horizontal = 16.dp, vertical = 14.dp),
239 verticalAlignment = Alignment.CenterVertically,
240 ) {
241 Icon(
242 if (icon) Icons.Filled.Folder else Icons.Filled.Description,
243 contentDescription = null,
244 modifier = Modifier.size(20.dp),
245 tint = if (icon) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.onSurfaceVariant,
246 )
247 Text(
248 label,
249 style = MaterialTheme.typography.bodyLarge,
250 maxLines = 1,
251 overflow = TextOverflow.Ellipsis,
252 modifier = Modifier.weight(1f).padding(start = 8.dp),
253 )
254 if (status != null) StatusBadge(status)
255 }
258@Composable
259private fun StatusBadge(status: FileStatusEntry) {
260 val (letter, color, desc) = when (status.status) {
261 "added" -> Triple("A", MaterialTheme.colorScheme.primary, stringResource(R.string.git_added))
262 "modified" -> Triple("M", MaterialTheme.colorScheme.tertiary, stringResource(R.string.git_modified))
263 "deleted" -> Triple("D", MaterialTheme.colorScheme.error, stringResource(R.string.git_deleted))
264 else -> Triple("·", MaterialTheme.colorScheme.onSurfaceVariant, "")
265 }
266 Row(
267 verticalAlignment = Alignment.CenterVertically,
268 modifier = Modifier.semantics(mergeDescendants = true) {
269 if (desc.isNotEmpty()) contentDescription = desc
270 },
271 ) {
272 Text(
273 letter,
274 style = MaterialTheme.typography.labelMedium,
275 fontFamily = FontFamily.Monospace,
276 color = color,
277 )
278 if (status.added > 0 || status.removed > 0) {
279 Text(
280 "+${status.added} −${status.removed}",
281 style = MaterialTheme.typography.labelSmall,
282 fontFamily = FontFamily.Monospace,
283 color = MaterialTheme.colorScheme.onSurfaceVariant,
284 modifier = Modifier.padding(start = 4.dp),
285 )
286 }
287 }