Create tab items

app-compose/src/main/kotlin/com/pitchedapps/frost/compose/FrostTheme.kt

@@ -18,6 +18,7 @@ package com.pitchedapps.frost.compose
 
 import android.os.Build
 import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.darkColorScheme
@@ -27,16 +28,15 @@ import androidx.compose.material3.lightColorScheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 
 /** Main Frost compose theme. */
 @Composable
 fun FrostTheme(
+  modifier: Modifier = Modifier,
   isDarkTheme: Boolean = isSystemInDarkTheme(),
   isDynamicColor: Boolean = true,
   transparent: Boolean = true,
-  modifier: Modifier = Modifier,
   content: @Composable () -> Unit
 ) {
   val context = LocalContext.current
@@ -57,8 +57,8 @@ fun FrostTheme(
 
   MaterialTheme(colorScheme = colorScheme) {
     Surface(
-      modifier = modifier,
+      modifier = modifier.fillMaxSize(),
-      color = if (transparent) Color.Transparent else MaterialTheme.colorScheme.surface,
+      //      color = if (transparent) Color.Transparent else MaterialTheme.colorScheme.surface,
       content = content,
     )
   }

app-compose/src/main/kotlin/com/pitchedapps/frost/facebook/FbItem.kt

@@ -41,6 +41,7 @@ import androidx.compose.ui.graphics.vector.ImageVector
 import com.pitchedapps.frost.R
 import com.pitchedapps.frost.ext.WebTargetId
 import com.pitchedapps.frost.main.MainTabItem
+import com.pitchedapps.frost.tabselector.TabData
 import compose.icons.FontAwesomeIcons
 import compose.icons.fontawesomeicons.Solid
 import compose.icons.fontawesomeicons.solid.GlobeAmericas
@@ -127,6 +128,13 @@ fun FbItem.tab(context: Context, id: WebTargetId): MainTabItem =
     url = url,
   )
 
+fun FbItem.tab(context: Context): TabData =
+  TabData(
+    key = key,
+    title = context.getString(titleId),
+    icon = icon,
+  )
+
 
 /// ** Note that this url only works if a query (?q=) is provided */
 // _SEARCH("search", R.string.kau_search, GoogleMaterial.Icon.gmd_search, "search/top"),

app-compose/src/main/kotlin/com/pitchedapps/frost/main/MainActivity.kt

@@ -23,10 +23,10 @@ import androidx.core.view.WindowCompat
 import com.google.common.flogger.FluentLogger
 import com.pitchedapps.frost.R
 import com.pitchedapps.frost.compose.FrostTheme
+import com.pitchedapps.frost.tabselector.TabSelectorScreen
 import com.pitchedapps.frost.web.state.FrostWebStore
 import dagger.hilt.android.AndroidEntryPoint
 import javax.inject.Inject
-import mozilla.components.lib.state.ext.observeAsState
 
 /**
  * Main activity.
@@ -52,11 +52,9 @@ class MainActivity : ComponentActivity() {
         //          tabs = tabs,
         //        )
 
-        val tabs =
+        TabSelectorScreen()
-          store.observeAsState(initialValue = null) { it.homeTabs.map { it.tab } }.value
-            ?: return@FrostTheme
 
-        MainScreenWebView(homeTabs = tabs)
+        //        MainScreenWebView()
       }
     }
   }

app-compose/src/main/kotlin/com/pitchedapps/frost/main/MainScreenWebView.kt

@@ -52,9 +52,12 @@ import kotlinx.coroutines.launch
 import mozilla.components.lib.state.ext.observeAsState
 
 @Composable
-fun MainScreenWebView(modifier: Modifier = Modifier, homeTabs: List<MainTabItem>) {
+fun MainScreenWebView(modifier: Modifier = Modifier) {
   val vm: MainScreenViewModel = viewModel()
 
+  val homeTabs =
+    vm.store.observeAsState(initialValue = null) { it.homeTabs.map { it.tab } }.value ?: return
+
   val selectedHomeTab by vm.store.observeAsState(initialValue = null) { it.selectedHomeTab }
 
   Scaffold(

app-compose/src/main/kotlin/com/pitchedapps/frost/tabselector/TabData.kt

@@ -0,0 +1,28 @@
+/*
+ * Copyright 2023 Allan Wang
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+package com.pitchedapps.frost.tabselector
+
+import androidx.compose.runtime.Immutable
+import androidx.compose.ui.graphics.vector.ImageVector
+
+/** Option for main screen tabs */
+@Immutable
+data class TabData(
+  val key: String,
+  val title: String,
+  val icon: ImageVector,
+)

app-compose/src/main/kotlin/com/pitchedapps/frost/tabselector/TabSelectorScreen.kt

@@ -0,0 +1,105 @@
+/*
+ * Copyright 2023 Allan Wang
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+package com.pitchedapps.frost.tabselector
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.statusBarsPadding
+import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.foundation.lazy.grid.items
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import com.pitchedapps.frost.facebook.FbItem
+import com.pitchedapps.frost.facebook.tab
+
+@Composable
+fun TabSelectorScreen(modifier: Modifier = Modifier) {
+
+  val context = LocalContext.current
+
+  var selected: List<TabData> by remember {
+    mutableStateOf(FbItem.defaults().map { it.tab(context) })
+  }
+
+  val options: Map<String, TabData> = remember {
+    FbItem.values().associateBy({ it.key }, { it.tab(context) })
+  }
+
+  val unselected = remember(selected) { options.values - selected.toSet() }
+
+  TabSelector(
+    modifier = modifier.statusBarsPadding(),
+    selected = selected,
+    unselected = unselected,
+    onSelect = { selected = it },
+  )
+}
+
+@Composable
+fun TabSelector(
+  modifier: Modifier,
+  selected: List<TabData>,
+  unselected: List<TabData>,
+  onSelect: (List<TabData>) -> Unit
+) {
+  LazyVerticalGrid(
+    modifier = modifier,
+    columns = GridCells.Fixed(4),
+  ) {
+    items(unselected, key = { it.key }) { TabItem(data = it) }
+  }
+}
+
+@Composable
+fun TabItem(
+  data: TabData,
+  modifier: Modifier = Modifier,
+) {
+  Column(
+    modifier.fillMaxWidth().padding(horizontal = 8.dp, vertical = 8.dp),
+    horizontalAlignment = Alignment.CenterHorizontally,
+  ) {
+    Icon(
+      modifier = Modifier.padding(4.dp),
+      imageVector = data.icon,
+      contentDescription = data.title,
+    )
+    Text(
+      modifier = Modifier.padding(bottom = 4.dp),
+      text = data.title,
+      minLines = 2,
+      maxLines = 2,
+      overflow = TextOverflow.Ellipsis,
+      style = MaterialTheme.typography.bodyMedium,
+      textAlign = TextAlign.Center,
+    )
+  }
+}