feat: launch first topic of a site & enable to switch topic

Author: paulcoding810

app/src/main/java/com/paulcoding/hviewer/extensions/String.kt

@@ -0,0 +1,5 @@
+package com.paulcoding.hviewer.extensions
+
+import java.util.Locale
+
+fun String.toCapital() = replaceFirstChar { if (it.isLowerCase()) it.titlecase(Locale.ROOT) else it.toString() }

app/src/main/java/com/paulcoding/hviewer/ui/page/AppEntry.kt

@@ -39,7 +39,12 @@ fun AppEntry() {
             SitesPage(siteConfigs = siteConfigs,
                 refresh = { Github.refreshLocalConfigs() },
                 navToTopics = { site ->
-                    navController.navigate("${Route.TOPICS}/$site")
+                    val firstTopic = siteConfigs.sites[site]?.tags?.keys?.first()
+                    if (firstTopic != null) {
+                        navController.navigate("${Route.POSTS}/$site/$firstTopic")
+                    } else {
+                        navController.navigate("${Route.TOPICS}/$site")
+                    }
                 }, navToSettings = {
                     navController.navigate(Route.SETTINGS)
                 },
@@ -69,7 +74,7 @@ fun AppEntry() {
 
             PostsPage(
                 siteConfig = siteConfig,
-                topic = topic,
+                initialTopic = topic,
                 navToImages = { postUrl: String ->
                     navController.navigate(
                         "${Route.POST}/${site}/${topic}/${

app/src/main/java/com/paulcoding/hviewer/ui/page/posts/PostsPage.kt

@@ -2,11 +2,16 @@ package com.paulcoding.hviewer.ui.page.posts
 
 import android.widget.Toast
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.horizontalScroll
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.foundation.rememberScrollState
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
@@ -16,13 +21,16 @@ import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import androidx.lifecycle.viewmodel.compose.viewModel
 import com.paulcoding.hviewer.MainApp.Companion.appContext
 import com.paulcoding.hviewer.extensions.isScrolledToEnd
+import com.paulcoding.hviewer.extensions.toCapital
 import com.paulcoding.hviewer.model.PostItem
 import com.paulcoding.hviewer.model.SiteConfig
 import com.paulcoding.hviewer.ui.component.HBackIcon
@@ -35,27 +43,28 @@ import com.paulcoding.hviewer.ui.component.HLoading
 fun PostsPage(
     navToImages: (postUrl: String) -> Unit,
     siteConfig: SiteConfig,
-    topic: String,
+    initialTopic: String = "home",
     goBack: () -> Unit
 ) {
+    val listTopic = siteConfig.tags.keys.toList()
+    var topic by remember { mutableStateOf(initialTopic) }
+
     val viewModel: PostsViewModel = viewModel(
-        factory = PostsViewModelFactory(siteConfig, topic)
+        factory = PostsViewModelFactory(siteConfig, topic),
+        key = topic
     )
     val listState = rememberLazyListState()
     val uiState by viewModel.stateFlow.collectAsState()
 
-    var shouldFetchPosts by rememberSaveable { mutableStateOf(true) }
-
     LaunchedEffect(uiState.error) {
         uiState.error?.let {
             Toast.makeText(appContext, it.message ?: it.toString(), Toast.LENGTH_SHORT).show()
         }
     }
 
-    LaunchedEffect(shouldFetchPosts) {
-        if (shouldFetchPosts) {
+    LaunchedEffect(uiState.postItems) {
+        if (uiState.postItems.isEmpty()) {
             viewModel.getPosts(1)
-            shouldFetchPosts = false
         }
     }
 
@@ -66,25 +75,38 @@ fun PostsPage(
     }
 
     Scaffold(topBar = {
-        TopAppBar(title = { Text(topic) }, navigationIcon = {
+        TopAppBar(title = { Text(topic.toCapital()) }, navigationIcon = {
             HBackIcon { goBack() }
         })
     }) { paddings ->
-
-        LazyColumn(
-            modifier = Modifier
-                .padding(paddings),
-            state = listState
-        ) {
-            items(uiState.postItems) { post ->
-                PostItemView(post) { postUrl ->
-                    navToImages(postUrl)
+        Column(modifier = Modifier.padding(paddings)) {
+            Row(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .horizontalScroll(rememberScrollState()),
+                horizontalArrangement = Arrangement.spacedBy(12.dp)
+            ) {
+                listTopic.map {
+                    Text(it, fontSize = 10.sp, modifier = Modifier
+                        .clickable { topic = it }
+                        .padding(horizontal = 4.dp),
+                        fontWeight = if (topic == it) FontWeight.Bold else FontWeight.Normal
+                    )
                 }
             }
-            if (uiState.isLoading)
-                item {
-                    HLoading()
+            LazyColumn(
+                state = listState
+            ) {
+                items(uiState.postItems) { post ->
+                    PostItemView(post) { postUrl ->
+                        navToImages(postUrl)
+                    }
                 }
+                if (uiState.isLoading)
+                    item {
+                        HLoading()
+                    }
+            }
         }
     }
 }