home: add the subtracks wordmark, brick-pack the genres in three scrollable rows, centre artist names

This commit is contained in:
austinried
2026-10-04 00:30:06 +00:00
parent ff236836a2
commit e2c0511338
2 changed files with 59 additions and 10 deletions
@@ -1,10 +1,9 @@
package com.subtracks.ui.home
import androidx.compose.foundation.combinedClickable
import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ExperimentalLayoutApi
import androidx.compose.foundation.layout.FlowRow
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
@@ -18,9 +17,11 @@ import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyListScope
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.AssistChip
import androidx.compose.material3.Icon
import androidx.compose.material3.LocalContentColor
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
@@ -31,10 +32,12 @@ 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.res.painterResource
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import com.subtracks.R
import com.subtracks.data.model.Album
import com.subtracks.data.model.AlbumSongItem
import com.subtracks.data.model.Artist
@@ -149,6 +152,24 @@ fun HomeScreen(
modifier = modifier.fillMaxSize(),
contentPadding = PaddingValues(top = topInset + 8.dp, bottom = bottomInset + 24.dp),
) {
item(key = "home-title") {
Row(
modifier =
Modifier
.fillMaxWidth()
.padding(start = 16.dp, end = 16.dp, top = 4.dp, bottom = 12.dp),
verticalAlignment = Alignment.CenterVertically,
) {
Icon(
painter = painterResource(R.drawable.ic_subtracks_logo),
contentDescription = null,
tint = MaterialTheme.colorScheme.primary,
modifier = Modifier.size(width = 34.dp, height = 25.dp),
)
Spacer(Modifier.width(8.dp))
Text(text = "subtracks", style = MaterialTheme.typography.titleLarge)
}
}
albumRow(
HomeSection.RecentlyAddedAlbums,
feed.recentlyAddedAlbums,
@@ -249,6 +270,7 @@ private val TILE_SIZE = 132.dp
private val ARTIST_TILE_SIZE = 104.dp
private val TILE_SPACING = 8.dp
private val ARTIST_SPACING = 16.dp
private const val GENRE_ROWS = 3
private fun LazyListScope.albumRow(
section: HomeSection,
@@ -310,7 +332,6 @@ private fun LazyListScope.artistRow(
}
}
@OptIn(ExperimentalLayoutApi::class)
private fun LazyListScope.genreBlock(
section: HomeSection,
genres: List<String>,
@@ -322,13 +343,23 @@ private fun LazyListScope.genreBlock(
HomeSectionHeader(section.title) { onMore(section) }
}
item(key = "${section.name}-row") {
FlowRow(
modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
horizontalArrangement = Arrangement.spacedBy(TILE_SPACING),
verticalArrangement = Arrangement.spacedBy(TILE_SPACING),
Row(
modifier =
Modifier
.fillMaxWidth()
.horizontalScroll(rememberScrollState())
.padding(horizontal = 16.dp),
) {
genres.forEach { genre ->
AssistChip(onClick = { onGenreClick(genre) }, label = { Text(genre) })
Column(verticalArrangement = Arrangement.spacedBy(TILE_SPACING)) {
repeat(GENRE_ROWS) { row ->
Row(horizontalArrangement = Arrangement.spacedBy(TILE_SPACING)) {
genres.forEachIndexed { index, genre ->
if (index % GENRE_ROWS == row) {
AssistChip(onClick = { onGenreClick(genre) }, label = { Text(genre) })
}
}
}
}
}
}
}
@@ -426,7 +457,7 @@ private fun ArtistTile(
) {
Column(
modifier = Modifier.width(ARTIST_TILE_SIZE).combinedClickable(onClick = onClick, onLongClick = onLongClick),
horizontalAlignment = Alignment.Start,
horizontalAlignment = Alignment.CenterHorizontally,
) {
CoverArt(
ref = ref,
@@ -0,0 +1,18 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="34dp"
android:height="25dp"
android:viewportWidth="299.84"
android:viewportHeight="219.51">
<path
android:pathData="m23.84,-0c-12.76,0 -23.44,13 -23.65,25.12 -0.42,79.03 0,160.73 0,170.4 0,12.59 9.8,23.99 23.41,23.99l253.58,0c11.4,0 22.66,-12.38 22.66,-22.79L299.84,24.12c0,-10.8 -10.24,-23.81 -21.84,-23.81 -11.6,0 -254.16,-0.31 -254.16,-0.31zM39.05,25.28c0,0 217.71,0.71 223.67,0.71 6.07,0 12.17,6.83 12.17,12.06l0,142.25c0,8.97 -6.97,14.63 -12.48,14.64l-33.42,0.07c-5.32,0.01 -9.93,-7.19 -11.35,-10.61 -1.89,-4.55 -11.08,-25.75 -12.1,-28.1 -0.6,-1.38 -2.9,-2.83 -5.89,-2.83L98.33,153.45c-2.68,0 -4.89,2.87 -5.67,4.71 -1.12,2.66 -9.02,21.39 -11.63,27.57 -2.73,6.46 -4.37,9.06 -11.47,9.06l-30.97,0c-7.44,0 -13.69,-7.17 -13.67,-15.18l0.28,-139.51c0,-6.88 5.54,-14.83 13.85,-14.83z"
android:fillColor="#FFFFFFFF"
android:fillType="nonZero" />
<path
android:pathData="M90.09,95.03m-32.1,0a32.42,32.1 90,1 1,64.21 0a32.42,32.1 90,1 1,-64.21 0"
android:fillColor="#FFFFFFFF"
android:fillType="nonZero" />
<path
android:pathData="M209.94,95.03m-32.1,0a32.42,32.1 90,1 1,64.21 0a32.42,32.1 90,1 1,-64.21 0"
android:fillColor="#FFFFFFFF"
android:fillType="nonZero" />
</vector>