Added hello page content

app/src/main/java/org/sirekanyan/outline/MainContent.kt

@@ -1,11 +1,33 @@
 package org.sirekanyan.outline
 
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.asPaddingValues
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.navigationBarsPadding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.systemBars
 import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Add
+import androidx.compose.material.icons.filled.Menu
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ModalNavigationDrawer
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
+import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.material3.surfaceColorAtElevation
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
 import kotlinx.coroutines.launch
 import org.sirekanyan.outline.api.OutlineApi
 import org.sirekanyan.outline.api.model.Key
@@ -17,10 +39,25 @@ import org.sirekanyan.outline.ui.KeyContent
 @Composable
 fun MainContent(api: OutlineApi, dao: ApiUrlDao, state: MainState, keys: List<Key>) {
     ModalNavigationDrawer({ DrawerContent(api, dao, state) }, drawerState = state.drawer) {
-        LazyColumn(contentPadding = WindowInsets.systemBars.asPaddingValues()) {
-            keys.sortedByDescending(Key::traffic).forEach { key ->
-                item {
-                    KeyContent(key)
+        if (state.page is HelloPage) {
+            Column {
+                MainTopAppBar {
+                    state.openDrawer()
+                }
+                Box(Modifier.fillMaxSize().navigationBarsPadding(), Alignment.Center) {
+                    TextButton(onClick = { state.page = DraftPage }) {
+                        Icon(Icons.Default.Add, null)
+                        Spacer(Modifier.size(8.dp))
+                        Text("Add server")
+                    }
+                }
+            }
+        } else {
+            LazyColumn(contentPadding = WindowInsets.systemBars.asPaddingValues()) {
+                keys.sortedByDescending(Key::traffic).forEach { key ->
+                    item {
+                        KeyContent(key)
+                    }
                 }
             }
         }
@@ -36,3 +73,15 @@ fun MainContent(api: OutlineApi, dao: ApiUrlDao, state: MainState, keys: List<Ke
         )
     }
 }
+
+@Composable
+@OptIn(ExperimentalMaterial3Api::class)
+private fun MainTopAppBar(onMenuClick: () -> Unit) {
+    TopAppBar(
+        title = { Text(stringResource(R.string.app_name)) },
+        navigationIcon = { IconButton({ onMenuClick() }) { Icon(Icons.Default.Menu, null) } },
+        colors = TopAppBarDefaults.topAppBarColors(
+            containerColor = MaterialTheme.colorScheme.surfaceColorAtElevation(3.dp),
+        ),
+    )
+}

app/src/main/java/org/sirekanyan/outline/MainState.kt

@@ -24,6 +24,12 @@ class MainState(val scope: CoroutineScope) {
     var page by mutableStateOf<Page>(HelloPage)
     val selected by derivedStateOf { (page as? SelectedPage)?.selected }
 
+    fun openDrawer() {
+        scope.launch {
+            drawer.open()
+        }
+    }
+
     fun closeDrawer(animated: Boolean = true) {
         scope.launch {
             if (animated) {