Skip to content

Repository navigation

Material Symbols (rounded) icons on Android, matching desktop #57

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ingoau merged 1 commit into from
Oct 10, 2026
Merged

Material Symbols (rounded) icons on Android, matching desktop #57

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions android/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,6 +202,15 @@ syllable lyrics and a streamed read with a ranged re-open against a real Navidro
33+ needs `jdk.internal.ref`, which the JDK does not export. It is skipped when the host `.so` is
absent.

## Icons

Icons are Material Symbols (rounded), the same glyphs as desktop, generated into
`ui/icons/HocketIcons.kt` by `scripts/gen-android-icons.mjs` (from desktop's
`@iconify-json/material-symbols` dev dependency, so `pnpm install` in `desktop/` first). The object
mirrors androidx's `Icons` layout: `HocketIcons.Filled.Home`, `HocketIcons.Outlined.Home`,
`HocketIcons.AutoMirrored.Filled.ArrowBack`. To add one, map its Compose-style name to a Material
Symbols name in the script, list it under its group, and re-run; the output is committed.

## Gesture and motion conventions

- Anything the finger drives settles with a spring (`ui/theme/Motion.kt`): low-bouncy for the
Expand Down
1 change: 0 additions & 1 deletion android/app/build.gradle.kts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,6 @@ dependencies {
implementation(libs.compose.animation)
implementation(libs.compose.material3)
implementation(libs.compose.material3.window.size)
implementation(libs.compose.material.icons.extended)
implementation(libs.coil.compose)
implementation(libs.reorderable)
implementation(libs.kotlinx.coroutines.android)
Expand Down
103 changes: 35 additions & 68 deletions android/app/src/main/java/app/hocket/ui/components/ActionSheet.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,40 +11,6 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.Redo
import androidx.compose.material.icons.automirrored.filled.Undo
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Album
import androidx.compose.material.icons.filled.AllInclusive
import androidx.compose.material.icons.filled.Bedtime
import androidx.compose.material.icons.filled.Cast
import androidx.compose.material.icons.filled.ClearAll
import androidx.compose.material.icons.filled.Delete
import androidx.compose.material.icons.filled.Download
import androidx.compose.material.icons.filled.DownloadDone
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.FavoriteBorder
import androidx.compose.material.icons.filled.History
import androidx.compose.material.icons.filled.Lyrics
import androidx.compose.material.icons.filled.Pause
import androidx.compose.material.icons.filled.Person
import androidx.compose.material.icons.filled.PlayArrow
import androidx.compose.material.icons.filled.PlaylistAdd
import androidx.compose.material.icons.filled.PlaylistAddCheck
import androidx.compose.material.icons.filled.PlaylistPlay
import androidx.compose.material.icons.filled.PlaylistRemove
import androidx.compose.material.icons.filled.PushPin
import androidx.compose.material.icons.filled.QueueMusic
import androidx.compose.material.icons.filled.Remove
import androidx.compose.material.icons.filled.Repeat
import androidx.compose.material.icons.filled.Shuffle
import androidx.compose.material.icons.filled.SkipNext
import androidx.compose.material.icons.filled.SkipPrevious
import androidx.compose.material.icons.filled.Star
import androidx.compose.material.icons.filled.StarOutline
import androidx.compose.material.icons.filled.Stop
import androidx.compose.material.icons.outlined.PushPin
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
import androidx.compose.material3.ListItem
Expand Down Expand Up @@ -78,43 +44,44 @@ import app.hocket.core.api.ActionTarget
import app.hocket.core.api.Playlist
import app.hocket.core.api.QueryResult
import app.hocket.ui.LocalCoreClient
import app.hocket.ui.icons.HocketIcons

/** Material Symbols names the core's action registry emits (`actions/defs.rs`), mapped to icons. */
fun actionIcon(name: String): ImageVector = when (name) {
"play_arrow" -> Icons.Filled.PlayArrow
"play_pause" -> Icons.Filled.PlayArrow
"pause" -> Icons.Filled.Pause
"stop" -> Icons.Filled.Stop
"skip_next" -> Icons.Filled.SkipNext
"skip_previous" -> Icons.Filled.SkipPrevious
"shuffle", "shuffle_on" -> Icons.Filled.Shuffle
"repeat" -> Icons.Filled.Repeat
"all_inclusive" -> Icons.Filled.AllInclusive
"playlist_play" -> Icons.Filled.PlaylistPlay
"playlist_add" -> Icons.Filled.PlaylistAdd
"playlist_add_check" -> Icons.Filled.PlaylistAddCheck
"playlist_remove", "remove_from_queue" -> Icons.Filled.PlaylistRemove
"queue_music" -> Icons.Filled.QueueMusic
"favorite" -> Icons.Filled.Favorite
"heart_minus", "heart_broken" -> Icons.Filled.FavoriteBorder
"star", "star_rate" -> Icons.Filled.Star
"star_outline" -> Icons.Filled.StarOutline
"download" -> Icons.Filled.Download
"download_done" -> Icons.Filled.DownloadDone
"delete", "delete_forever" -> Icons.Filled.Delete
"remove" -> Icons.Filled.Remove
"clear_all" -> Icons.Filled.ClearAll
"album" -> Icons.Filled.Album
"artist", "person" -> Icons.Filled.Person
"history" -> Icons.Filled.History
"push_pin" -> Icons.Filled.PushPin
"keep_off" -> Icons.Outlined.PushPin
"bedtime" -> Icons.Filled.Bedtime
"cast" -> Icons.Filled.Cast
"lyrics" -> Icons.Filled.Lyrics
"undo" -> Icons.AutoMirrored.Filled.Undo
"redo" -> Icons.AutoMirrored.Filled.Redo
else -> Icons.Filled.Add
"play_arrow" -> HocketIcons.Filled.PlayArrow
"play_pause" -> HocketIcons.Filled.PlayArrow
"pause" -> HocketIcons.Filled.Pause
"stop" -> HocketIcons.Filled.Stop
"skip_next" -> HocketIcons.Filled.SkipNext
"skip_previous" -> HocketIcons.Filled.SkipPrevious
"shuffle", "shuffle_on" -> HocketIcons.Filled.Shuffle
"repeat" -> HocketIcons.Filled.Repeat
"all_inclusive" -> HocketIcons.Filled.AllInclusive
"playlist_play" -> HocketIcons.Filled.PlaylistPlay
"playlist_add" -> HocketIcons.Filled.PlaylistAdd
"playlist_add_check" -> HocketIcons.Filled.PlaylistAddCheck
"playlist_remove", "remove_from_queue" -> HocketIcons.Filled.PlaylistRemove
"queue_music" -> HocketIcons.Filled.QueueMusic
"favorite" -> HocketIcons.Filled.Favorite
"heart_minus", "heart_broken" -> HocketIcons.Filled.FavoriteBorder
"star", "star_rate" -> HocketIcons.Filled.Star
"star_outline" -> HocketIcons.Filled.StarOutline
"download" -> HocketIcons.Filled.Download
"download_done" -> HocketIcons.Filled.DownloadDone
"delete", "delete_forever" -> HocketIcons.Filled.Delete
"remove" -> HocketIcons.Filled.Remove
"clear_all" -> HocketIcons.Filled.ClearAll
"album" -> HocketIcons.Filled.Album
"artist", "person" -> HocketIcons.Filled.Person
"history" -> HocketIcons.Filled.History
"push_pin" -> HocketIcons.Filled.PushPin
"keep_off" -> HocketIcons.Outlined.PushPin
"bedtime" -> HocketIcons.Filled.Bedtime
"cast" -> HocketIcons.Filled.Cast
"lyrics" -> HocketIcons.Filled.Lyrics
"undo" -> HocketIcons.AutoMirrored.Filled.Undo
"redo" -> HocketIcons.AutoMirrored.Filled.Redo
else -> HocketIcons.Filled.Add
}

/**
Expand Down
32 changes: 12 additions & 20 deletions android/app/src/main/java/app/hocket/ui/components/JobsIndicator.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,6 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Cancel
import androidx.compose.material.icons.filled.CheckCircle
import androidx.compose.material.icons.filled.Close
import androidx.compose.material.icons.filled.ErrorOutline
import androidx.compose.material.icons.filled.Pause
import androidx.compose.material.icons.filled.PlayArrow
import androidx.compose.material.icons.filled.Refresh
import androidx.compose.material.icons.filled.Sync
import androidx.compose.material3.ContainedLoadingIndicator
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
Expand All @@ -44,6 +35,7 @@ import app.hocket.core.Commands
import app.hocket.core.api.Job
import app.hocket.core.api.JobState
import app.hocket.ui.LocalCoreClient
import app.hocket.ui.icons.HocketIcons

/**
* The one progress indicator near search (design: job queue). Idle: a plain activity icon; running:
Expand All @@ -60,8 +52,8 @@ fun JobsIndicator(onClick: () -> Unit, modifier: Modifier = Modifier) {
IconButton(onClick = onClick, modifier = modifier.semantics { contentDescription = desc }) {
when {
active.isNotEmpty() -> LoadingIndicator(modifier = Modifier.size(28.dp))
hasProblems -> Icon(Icons.Filled.ErrorOutline, null, tint = MaterialTheme.colorScheme.error)
else -> Icon(Icons.Filled.Sync, null)
hasProblems -> Icon(HocketIcons.Filled.ErrorOutline, null, tint = MaterialTheme.colorScheme.error)
else -> Icon(HocketIcons.Filled.Sync, null)
}
}
}
Expand Down Expand Up @@ -100,14 +92,14 @@ fun JobsSheet(onDismiss: () -> Unit) {
}
items(problems, key = { it.id }) { p ->
Row(Modifier.fillMaxWidth().padding(horizontal = 24.dp, vertical = 8.dp), verticalAlignment = Alignment.CenterVertically) {
Icon(Icons.Filled.ErrorOutline, null, tint = MaterialTheme.colorScheme.error)
Icon(HocketIcons.Filled.ErrorOutline, null, tint = MaterialTheme.colorScheme.error)
Spacer(Modifier.size(12.dp))
Column(Modifier.weight(1f)) {
Text(p.summary, style = MaterialTheme.typography.bodyLarge)
p.detail?.let { Text(it, style = MaterialTheme.typography.bodySmall, color = MaterialTheme.colorScheme.onSurfaceVariant) }
}
if (p.retryable) IconButton(onClick = { client.dispatch(Commands.retryProblem(p.id)) }) { Icon(Icons.Filled.Refresh, stringResource(R.string.action_retry)) }
IconButton(onClick = { client.dispatch(Commands.dismissProblem(p.id)) }) { Icon(Icons.Filled.Close, stringResource(R.string.action_dismiss)) }
if (p.retryable) IconButton(onClick = { client.dispatch(Commands.retryProblem(p.id)) }) { Icon(HocketIcons.Filled.Refresh, stringResource(R.string.action_retry)) }
IconButton(onClick = { client.dispatch(Commands.dismissProblem(p.id)) }) { Icon(HocketIcons.Filled.Close, stringResource(R.string.action_dismiss)) }
}
}
}
Expand Down Expand Up @@ -139,15 +131,15 @@ private fun JobRow(job: Job) {
}
when (job.state) {
JobState.Running -> {
IconButton(onClick = { client.dispatch(Commands.pauseJob(job.id)) }) { Icon(Icons.Filled.Pause, stringResource(R.string.jobs_pause)) }
if (job.cancellable) IconButton(onClick = { client.dispatch(Commands.cancelJob(job.id)) }) { Icon(Icons.Filled.Cancel, stringResource(R.string.action_cancel)) }
IconButton(onClick = { client.dispatch(Commands.pauseJob(job.id)) }) { Icon(HocketIcons.Filled.Pause, stringResource(R.string.jobs_pause)) }
if (job.cancellable) IconButton(onClick = { client.dispatch(Commands.cancelJob(job.id)) }) { Icon(HocketIcons.Filled.Cancel, stringResource(R.string.action_cancel)) }
}
JobState.Paused, JobState.Queued -> {
IconButton(onClick = { client.dispatch(Commands.resumeJob(job.id)) }) { Icon(Icons.Filled.PlayArrow, stringResource(R.string.jobs_resume)) }
if (job.cancellable) IconButton(onClick = { client.dispatch(Commands.cancelJob(job.id)) }) { Icon(Icons.Filled.Cancel, stringResource(R.string.action_cancel)) }
IconButton(onClick = { client.dispatch(Commands.resumeJob(job.id)) }) { Icon(HocketIcons.Filled.PlayArrow, stringResource(R.string.jobs_resume)) }
if (job.cancellable) IconButton(onClick = { client.dispatch(Commands.cancelJob(job.id)) }) { Icon(HocketIcons.Filled.Cancel, stringResource(R.string.action_cancel)) }
}
JobState.Failed, JobState.Cancelled -> IconButton(onClick = { client.dispatch(Commands.retryJob(job.id)) }) { Icon(Icons.Filled.Refresh, stringResource(R.string.action_retry)) }
JobState.Done -> Icon(Icons.Filled.CheckCircle, stringResource(R.string.jobs_done), tint = MaterialTheme.colorScheme.primary)
JobState.Failed, JobState.Cancelled -> IconButton(onClick = { client.dispatch(Commands.retryJob(job.id)) }) { Icon(HocketIcons.Filled.Refresh, stringResource(R.string.action_retry)) }
JobState.Done -> Icon(HocketIcons.Filled.CheckCircle, stringResource(R.string.jobs_done), tint = MaterialTheme.colorScheme.primary)
}
}
if (job.state == JobState.Running || job.state == JobState.Paused) {
Expand Down
6 changes: 2 additions & 4 deletions android/app/src/main/java/app/hocket/ui/components/RatingStars.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,6 @@ package app.hocket.ui.components
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Star
import androidx.compose.material.icons.outlined.StarOutline
import androidx.compose.material3.AlertDialog
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
Expand All @@ -32,6 +29,7 @@ import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import app.hocket.R
import app.hocket.ui.a11y.Spoken
import app.hocket.ui.icons.HocketIcons
import kotlin.math.roundToInt

/**
Expand Down Expand Up @@ -69,7 +67,7 @@ fun RatingStars(rating: Int, onRate: (Int) -> Unit, modifier: Modifier = Modifie
for (i in 1..5) {
val filled = i <= rating
IconButton(onClick = { haptics.performHapticFeedback(HapticFeedbackType.Confirm); onRate(if (i == rating) 0 else i) }, modifier = Modifier.size(starSize + 12.dp)) {
Icon(if (filled) Icons.Filled.Star else Icons.Outlined.StarOutline, contentDescription = null, tint = if (filled) tint else MaterialTheme.colorScheme.outline, modifier = Modifier.size(starSize))
Icon(if (filled) HocketIcons.Filled.Star else HocketIcons.Outlined.StarOutline, contentDescription = null, tint = if (filled) tint else MaterialTheme.colorScheme.outline, modifier = Modifier.size(starSize))
}
}
}
Expand Down
Loading
Loading