wip: more functionality and cleanup

app/src/main/kotlin/de/chaosdorf/meteroid/ui/money/MoneyTile.kt

+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2013-2023 Chaosdorf e.V.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+package de.chaosdorf.meteroid.ui.money
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun MoneyTile(
+  item: MonetaryAmount
+) {
+  Column(
+    modifier = Modifier.padding(4.dp)
+  ) {
+    Box {
+      Image(
+        painterResource(item.image),
+        contentDescription = null,
+        contentScale = ContentScale.Fit,
+        modifier = Modifier
+          .clip(CircleShape)
+          .background(MaterialTheme.colorScheme.primaryContainer)
+          .aspectRatio(1.0f)
+          .padding(8.dp)
+      )
+      Text(
+        String.format("%.02f €", item.amount),
+        color = MaterialTheme.colorScheme.onPrimary,
+        fontWeight = FontWeight.SemiBold,
+        modifier = Modifier
+          .padding(vertical = 12.dp)
+          .clip(RoundedCornerShape(16.dp))
+          .background(MaterialTheme.colorScheme.primary)
+          .align(Alignment.BottomEnd)
+          .padding(horizontal = 8.dp)
+      )
+    }
+  }
+}

app/src/main/kotlin/de/chaosdorf/meteroid/ui/home/HomeSections.kt → app/src/main/kotlin/de/chaosdorf/meteroid/ui/navigation/HomeSections.kt

@@ -22,15 +22,14 @@
  * THE SOFTWARE.
  */
 
-package de.chaosdorf.meteroid.ui.home
+package de.chaosdorf.meteroid.ui.navigation
 
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.twotone.Money
+import androidx.compose.material.icons.twotone.History
+import androidx.compose.material.icons.twotone.LocalAtm
 import androidx.compose.ui.graphics.vector.ImageVector
 import de.chaosdorf.meteroid.icons.MeteroidIcons
 import de.chaosdorf.meteroid.icons.twotone.WaterFull
-import de.chaosdorf.meteroid.ui.MeteroidNavSection
-import de.chaosdorf.meteroid.ui.Routes
 
 enum class HomeSections(
   override val title: String,
@@ -38,5 +37,6 @@ enum class HomeSections(
   override val route: String
 ) : MeteroidNavSection {
   PURCHASE("Drinks", MeteroidIcons.TwoTone.WaterFull, Routes.Home.Purchase),
-  DEPOSIT("Money", Icons.TwoTone.Money, Routes.Home.Deposit);
+  DEPOSIT("Money", Icons.TwoTone.LocalAtm, Routes.Home.Deposit),
+  HISTORY("History", Icons.TwoTone.History, Routes.Home.History);
 }

app/src/main/kotlin/de/chaosdorf/meteroid/ui/MeteroidNavSection.kt → app/src/main/kotlin/de/chaosdorf/meteroid/ui/navigation/MeteroidBottomBar.kt

@@ -22,36 +22,32 @@
  * THE SOFTWARE.
  */
 
-package de.chaosdorf.meteroid.ui
+package de.chaosdorf.meteroid.ui.navigation
 
-import androidx.compose.foundation.layout.RowScope
 import androidx.compose.material3.Icon
+import androidx.compose.material3.NavigationBar
 import androidx.compose.material3.NavigationBarItem
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.vector.ImageVector
-
-interface MeteroidNavSection {
-  val title: String
-  val icon: ImageVector
-  val route: String
-}
 
 @Composable
-fun <T : MeteroidNavSection> RowScope.MeteroidNavSections(
-  routes: Iterable<T>,
+fun <T : MeteroidNavSection> MeteroidBottomBar(
   currentRoute: T,
   navigateTo: (String) -> Unit,
+  historyEnabled: Boolean,
   modifier: Modifier = Modifier
 ) {
-  for (route in routes) {
+  NavigationBar {
+    for (route in HomeSections.entries) {
       NavigationBarItem(
         icon = { Icon(route.icon, contentDescription = route.title) },
         label = { Text(route.title) },
         selected = route == currentRoute,
         onClick = { navigateTo(route.route) },
-      modifier = modifier
+        modifier = modifier,
+        enabled = route != HomeSections.HISTORY || historyEnabled
       )
     }
   }
+}

app/src/main/kotlin/de/chaosdorf/meteroid/ui/navigation/MeteroidNavSection.kt

+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2013-2023 Chaosdorf e.V.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+package de.chaosdorf.meteroid.ui.navigation
+
+import androidx.compose.ui.graphics.vector.ImageVector
+
+interface MeteroidNavSection {
+  val title: String
+  val icon: ImageVector
+  val route: String
+}

app/src/main/kotlin/de/chaosdorf/meteroid/ui/navigation/MeteroidTopBar.kt

+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2013-2023 Chaosdorf e.V.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+package de.chaosdorf.meteroid.ui.navigation
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.ArrowBack
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import de.chaosdorf.meteroid.model.Server
+import de.chaosdorf.meteroid.model.User
+
+@Composable
+fun MeteroidTopBar(
+  account: Pair<Server, User?>?,
+  onNavigate: (String) -> Unit = {}
+) {
+  TopAppBar(
+    title = {
+      Text(
+        account?.second?.name
+          ?: account?.first?.name
+          ?: "Meteroid"
+      )
+    },
+    navigationIcon = {
+      IconButton(onClick = { onNavigate(Routes.Users.Root) }) {
+        Icon(Icons.AutoMirrored.Default.ArrowBack, contentDescription = "Back")
+      }
+    },
+    actions = {
+      account?.second?.let { user ->
+        val (foreground, background) =
+          if (user.balance < 0)
+            Pair(MaterialTheme.colorScheme.onError, MaterialTheme.colorScheme.error)
+          else
+            Pair(MaterialTheme.colorScheme.onPrimary, MaterialTheme.colorScheme.primary)
+
+        Text(
+          String.format("%.02f €", user.balance),
+          color = foreground,
+          fontSize = 14.sp,
+          lineHeight = 20.sp,
+          fontWeight = FontWeight.SemiBold,
+          modifier = Modifier
+            .padding(end = 20.dp)
+            .clip(RoundedCornerShape(16.dp))
+            .background(background)
+            .padding(horizontal = 8.dp)
+        )
+      }
+    },
+    modifier = Modifier.shadow(4.dp)
+  )
+}

app/src/main/kotlin/de/chaosdorf/meteroid/ui/Routes.kt → app/src/main/kotlin/de/chaosdorf/meteroid/ui/navigation/Routes.kt

@@ -22,7 +22,7 @@
  * THE SOFTWARE.
  */
 
-package de.chaosdorf.meteroid.ui
+package de.chaosdorf.meteroid.ui.navigation
 
 object Routes {
   const val Init = "init"
@@ -35,13 +35,14 @@ object Routes {
 
   object Users {
     const val Root = "users"
-    const val List = "${Root}/list"
-    //const val Add = "${Root}/new"
+    const val List = "$Root/list"
+    //const val Add = "$Root/new"
   }
 
   object Home {
     const val Root = "home"
-    const val Deposit = "home/deposit"
-    const val Purchase = "home/purchase"
+    const val Deposit = "$Root/deposit"
+    const val Purchase = "$Root/purchase"
+    const val History = "$Root/history"
   }
 }

app/src/main/kotlin/de/chaosdorf/meteroid/ui/purchases/PurchaseListItem.kt

+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2013-2023 Chaosdorf e.V.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+package de.chaosdorf.meteroid.ui.purchases
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.AttachMoney
+import androidx.compose.material.icons.filled.QuestionMark
+import androidx.compose.material3.Icon
+import androidx.compose.material3.ListItem
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import coil.compose.rememberAsyncImagePainter
+import de.chaosdorf.meteroid.model.Drink
+import de.chaosdorf.meteroid.model.Purchase
+import kotlinx.datetime.TimeZone
+import kotlinx.datetime.toJavaLocalDateTime
+import kotlinx.datetime.toLocalDateTime
+import java.time.format.DateTimeFormatter
+import java.time.format.FormatStyle
+
+@Composable
+fun PurchaseListItem(
+  purchase: Purchase,
+  drink: Drink?
+) {
+  val timestamp = purchase.createdAt.toLocalDateTime(TimeZone.currentSystemDefault())
+  val formatter = DateTimeFormatter.ofLocalizedDateTime(FormatStyle.SHORT)
+
+  ListItem(
+    headlineContent = {
+      val label =
+        if (drink != null) drink.name
+        else if (purchase.difference > 0.0) "Deposit"
+        else "Unknown"
+      Text(label)
+    },
+    supportingContent = {
+      Text(formatter.format(timestamp.toJavaLocalDateTime()))
+    },
+    leadingContent = {
+      Box(
+        modifier = Modifier
+          .size(48.dp)
+          .clip(CircleShape)
+          .background(MaterialTheme.colorScheme.primaryContainer)
+          .aspectRatio(1.0f)
+      ) {
+        if (drink != null) {
+          val thumbPainter = rememberAsyncImagePainter(
+            drink.logoUrl
+          )
+          val originalPainter = rememberAsyncImagePainter(
+            drink.logoUrl.replace("/thumb/", "/original/"),
+            error = thumbPainter
+          )
+
+          Image(
+            painter = originalPainter,
+            contentDescription = null,
+            contentScale = ContentScale.Fit,
+            modifier = Modifier
+              .align(Alignment.Center)
+              .fillMaxSize()
+          )
+        } else if (purchase.difference > 0) {
+          Icon(
+            Icons.Default.AttachMoney,
+            contentDescription = null,
+            modifier = Modifier.align(Alignment.Center)
+          )
+        } else {
+          Icon(
+            Icons.Default.QuestionMark,
+            contentDescription = null,
+            modifier = Modifier.align(Alignment.Center)
+          )
+        }
+      }
+    },
+    trailingContent = {
+      val (foreground, background) =
+        if (purchase.difference < 0)
+          Pair(MaterialTheme.colorScheme.onError, MaterialTheme.colorScheme.error)
+        else
+          Pair(MaterialTheme.colorScheme.onPrimary, MaterialTheme.colorScheme.primary)
+
+      Text(
+        String.format("%.02f €", purchase.difference),
+        color = foreground,
+        fontSize = 14.sp,
+        lineHeight = 20.sp,
+        fontWeight = FontWeight.SemiBold,
+        modifier = Modifier
+          .clip(RoundedCornerShape(16.dp))
+          .background(background)
+          .padding(horizontal = 8.dp)
+      )
+    }
+  )
+}

app/src/main/kotlin/de/chaosdorf/meteroid/ui/home/DrinkListScreen.kt → app/src/main/kotlin/de/chaosdorf/meteroid/ui/purchases/PurchaseListScreen.kt

@@ -22,40 +22,51 @@
  * THE SOFTWARE.
  */
 
-package de.chaosdorf.meteroid.ui.home
+package de.chaosdorf.meteroid.ui.purchases
 
-import android.annotation.SuppressLint
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.material3.LinearProgressIndicator
-import androidx.compose.material3.ListItem
-import androidx.compose.material3.Text
+import androidx.compose.material3.Scaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.tooling.preview.Preview
-import androidx.lifecycle.viewmodel.compose.viewModel
-import de.chaosdorf.meteroid.storage.SyncHandler
+import de.chaosdorf.meteroid.sync.SyncHandler
+import de.chaosdorf.meteroid.ui.navigation.HomeSections
+import de.chaosdorf.meteroid.ui.navigation.MeteroidBottomBar
+import de.chaosdorf.meteroid.ui.navigation.MeteroidTopBar
 
-@Preview
 @Composable
-fun DrinkListScreen(
-  viewModel: DrinkListViewModel = viewModel(),
-  @SuppressLint("ModifierParameter") modifier: Modifier = Modifier
+fun PurchaseListScreen(
+  viewModel: PurchaseViewModel,
+  onNavigate: (route: String) -> Unit = {}
 ) {
-  val drinks by viewModel.drinks.collectAsState()
+  val account by viewModel.account.collectAsState()
+  val purchases by viewModel.purchases.collectAsState()
   val syncState by viewModel.syncState.collectAsState()
 
-  Column(modifier = modifier) {
+  Scaffold(
+    topBar = { MeteroidTopBar(account, onNavigate) },
+    bottomBar = {
+      MeteroidBottomBar(
+        currentRoute = HomeSections.HISTORY,
+        historyEnabled = account?.second?.audit == true,
+        navigateTo = onNavigate
+      )
+    }
+  ) { paddingValues: PaddingValues ->
+    Column {
       if (syncState == SyncHandler.State.Loading) {
         LinearProgressIndicator()
       }
-    LazyColumn {
-      items(drinks) { drink ->
-        ListItem(headlineContent = { Text(drink.name) },
-          supportingContent = { Text("${drink.volume}l · ${drink.price}€") })
+      LazyColumn(modifier = Modifier.padding(paddingValues)) {
+        items(purchases) { (purchase, drink) ->
+          PurchaseListItem(purchase, drink)
+        }
       }
     }
   }

app/src/main/kotlin/de/chaosdorf/meteroid/ui/purchases/PurchaseViewModel.kt

+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2013-2023 Chaosdorf e.V.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+package de.chaosdorf.meteroid.ui.purchases
+
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import dagger.hilt.android.lifecycle.HiltViewModel
+import de.chaosdorf.meteroid.model.Drink
+import de.chaosdorf.meteroid.model.DrinkRepository
+import de.chaosdorf.meteroid.model.Purchase
+import de.chaosdorf.meteroid.model.PurchaseRepository
+import de.chaosdorf.meteroid.model.Server
+import de.chaosdorf.meteroid.model.User
+import de.chaosdorf.meteroid.sync.AccountProvider
+import de.chaosdorf.meteroid.sync.PurchaseSyncHandler
+import de.chaosdorf.meteroid.sync.SyncHandler
+import kotlinx.coroutines.flow.SharingStarted
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.combine
+import kotlinx.coroutines.flow.flatMapLatest
+import kotlinx.coroutines.flow.flowOf
+import kotlinx.coroutines.flow.mapLatest
+import kotlinx.coroutines.flow.stateIn
+import javax.inject.Inject
+import kotlin.time.Duration.Companion.minutes
+
+@HiltViewModel
+class PurchaseViewModel @Inject constructor(
+  accountProvider: AccountProvider,
+  repository: PurchaseRepository,
+  drinkRepository: DrinkRepository,
+  syncHandler: PurchaseSyncHandler
+) : ViewModel() {
+  val account: StateFlow<Pair<Server, User?>?> = accountProvider.account
+    .stateIn(viewModelScope, SharingStarted.WhileSubscribed(), null)
+
+  val purchases: StateFlow<List<Pair<Purchase, Drink?>>> = accountProvider.account
+    .flatMapLatest { account ->
+      account?.let { (server, user) ->
+        user?.let { user ->
+          combine(
+            repository.getAllFlow(server.serverId, user.userId),
+            drinkRepository.getAllFlow(server.serverId)
+          ) { purchases, drinks ->
+            purchases.map { purchase ->
+              Pair(purchase, drinks.firstOrNull { drink -> drink.drinkId == purchase.drinkId })
+            }
+          }
+        }
+      } ?: flowOf(emptyList())
+    }.mapLatest { list ->
+      list.mergeAdjecentDeposits()
+        .filter { it.second != null || it.first.difference != 0.0 }
+    }.stateIn(viewModelScope, SharingStarted.WhileSubscribed(), emptyList())
+
+  val syncState: StateFlow<SyncHandler.State> = syncHandler.state
+}
+
+fun List<Pair<Purchase, Drink?>>.mergeAdjecentDeposits(): List<Pair<Purchase, Drink?>> {
+  val result = mutableListOf<Pair<Purchase, Drink?>>()
+  for (entry in this) {
+    val previous = result.lastOrNull()
+    if (previous != null
+      && previous.first.difference > 0
+      && entry.first.difference > 0
+      && previous.second == null
+      && entry.second == null
+      && entry.first.createdAt.minus(previous.first.createdAt) < 5.minutes
+    ) {
+      result.removeLast()
+      result.add(
+        Pair(
+          entry.first.copy(difference = entry.first.difference + previous.first.difference),
+          null
+        )
+      )
+    } else {
+      result.add(entry)
+    }
+  }
+  return result
+}

app/src/main/kotlin/de/chaosdorf/meteroid/ui/servers/ServerListScreen.kt

@@ -25,15 +25,21 @@
 package de.chaosdorf.meteroid.ui.servers
 
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.material3.ListItem
+import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
 import androidx.lifecycle.viewmodel.compose.viewModel
 import de.chaosdorf.meteroid.model.ServerId
 
@@ -45,10 +51,21 @@ fun ServerListScreen(
   onSelect: (ServerId) -> Unit = {}
 ) {
   val servers by viewModel.servers.collectAsState()
-  LazyColumn {
+
+  Scaffold(
+    topBar = {
+      TopAppBar(
+        title = { Text("Meteroid") },
+        modifier = Modifier.shadow(4.dp)
+      )
+    }
+  ) { paddingValues ->
+    Column {
+      LazyColumn(modifier = Modifier.padding(paddingValues)) {
         items(servers) { server ->
           ListItem(
             headlineContent = { Text(server.name ?: server.url) },
+            supportingContent = { if (server.name != null) Text(server.url) },
             modifier = Modifier.clickable { onSelect(server.serverId) }
           )
         }
@@ -60,3 +77,5 @@ fun ServerListScreen(
         }
       }
     }
+  }
+}

app/src/main/kotlin/de/chaosdorf/meteroid/ui/users/UserListScreen.kt

@@ -29,7 +29,6 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material3.Icon
@@ -44,48 +43,48 @@ import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.shadow
-import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.zIndex
-import androidx.lifecycle.viewmodel.compose.viewModel
 import de.chaosdorf.mete.UserId
-import de.chaosdorf.meteroid.storage.SyncHandler
+import de.chaosdorf.meteroid.sync.SyncHandler
 
-@Preview
 @Composable
 fun UserListScreen(
-  viewModel: UserListViewModel = viewModel(),
+  viewModel: UserListViewModel,
   onAdd: () -> Unit = {},
   onSelect: (UserId) -> Unit = {},
   onBack: () -> Unit = {},
 ) {
+  val server by viewModel.account.collectAsState()
   val users by viewModel.users.collectAsState()
   val syncState by viewModel.syncState.collectAsState()
 
   Scaffold(
     topBar = {
       TopAppBar(
-        title = { Text("Meteroid") },
+        title = {
+          Text(
+            server?.first?.name
+              ?: "Meteroid"
+          )
+        },
         navigationIcon = {
-          IconButton(onClick = onBack) {
+          IconButton(onClick = { onBack() }) {
             Icon(Icons.AutoMirrored.Default.ArrowBack, contentDescription = "Back")
           }
         },
-        modifier = Modifier
-          .padding(8.dp)
-          .shadow(4.dp, shape = RoundedCornerShape(8.dp))
-          .zIndex(1.0f)
+        modifier = Modifier.shadow(4.dp)
       )
     }
   ) { paddingValues ->
-    Column(modifier = Modifier.padding(paddingValues)) {
+    Column {
       if (syncState == SyncHandler.State.Loading) {
         LinearProgressIndicator()
       }
-      LazyColumn {
+      LazyColumn(modifier = Modifier.padding(paddingValues)) {
         items(users) { user ->
           ListItem(
             headlineContent = { Text(user.name) },
+            supportingContent = { Text(user.email) },
             modifier = Modifier.clickable { onSelect(user.userId) }
           )
         }

app/src/main/kotlin/de/chaosdorf/meteroid/ui/users/UserListViewModel.kt

@@ -27,30 +27,34 @@ package de.chaosdorf.meteroid.ui.users
 import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
 import dagger.hilt.android.lifecycle.HiltViewModel
+import de.chaosdorf.meteroid.model.Server
 import de.chaosdorf.meteroid.model.User
 import de.chaosdorf.meteroid.model.UserRepository
-import de.chaosdorf.meteroid.storage.AccountPreferences
-import de.chaosdorf.meteroid.storage.UserSyncHandler
+import de.chaosdorf.meteroid.sync.AccountProvider
+import de.chaosdorf.meteroid.sync.SyncHandler
+import de.chaosdorf.meteroid.sync.UserSyncHandler
 import kotlinx.coroutines.flow.SharingStarted
 import kotlinx.coroutines.flow.StateFlow
 import kotlinx.coroutines.flow.flatMapLatest
 import kotlinx.coroutines.flow.flowOf
-import kotlinx.coroutines.flow.mapLatest
 import kotlinx.coroutines.flow.stateIn
 import javax.inject.Inject
 
 @HiltViewModel
 class UserListViewModel @Inject constructor(
-  accountPreferences: AccountPreferences,
-  userRepository: UserRepository,
+  accountProvider: AccountProvider,
+  repository: UserRepository,
   syncHandler: UserSyncHandler
 ) : ViewModel() {
-  private val serverId = accountPreferences.state.mapLatest { it.server }
+  val account: StateFlow<Pair<Server, User?>?> = accountProvider.account
+    .stateIn(viewModelScope, SharingStarted.WhileSubscribed(), null)
 
-  val users: StateFlow<List<User>> = serverId.flatMapLatest { serverId ->
-    if (serverId == null) flowOf(emptyList())
-    else userRepository.getAllFlow(serverId)
+  val users: StateFlow<List<User>> = accountProvider.account
+    .flatMapLatest { account ->
+      account?.let { (server, _) ->
+        repository.getAllFlow(server.serverId)
+      } ?: flowOf(emptyList())
     }.stateIn(viewModelScope, SharingStarted.WhileSubscribed(), emptyList())
 
-  val syncState = syncHandler.state
+  val syncState: StateFlow<SyncHandler.State> = syncHandler.state
 }