Sign-in, dashboard, repositories, issues and inbox screens, adaptive (refs #2) 144cbf7bf2b5

package io.oxygenhub.android.ui.account

import androidx.compose.foundation.layout.Arrangement

import androidx.compose.foundation.layout.Box

import androidx.compose.foundation.layout.Column

import androidx.compose.foundation.layout.Spacer

import androidx.compose.foundation.layout.fillMaxWidth

import androidx.compose.foundation.layout.height

import androidx.compose.foundation.layout.padding

import androidx.compose.foundation.layout.size

import androidx.compose.foundation.layout.widthIn

import androidx.compose.foundation.rememberScrollState

import androidx.compose.foundation.shape.CircleShape

import androidx.compose.foundation.verticalScroll

import androidx.compose.material.icons.Icons

import androidx.compose.material.icons.automirrored.outlined.Logout

import androidx.compose.material.icons.outlined.Dns

import androidx.compose.material.icons.outlined.Key

import androidx.compose.material.icons.outlined.Memory

import androidx.compose.material3.AlertDialog

import androidx.compose.material3.Card

import androidx.compose.material3.CircularProgressIndicator

import androidx.compose.material3.Icon

import androidx.compose.material3.ListItem

import androidx.compose.material3.MaterialTheme

import androidx.compose.material3.OutlinedButton

import androidx.compose.material3.Surface

import androidx.compose.material3.Text

import androidx.compose.material3.TextButton

import androidx.compose.runtime.Composable

import androidx.compose.runtime.getValue

import androidx.compose.runtime.mutableStateOf

import androidx.compose.runtime.remember

import androidx.compose.runtime.rememberCoroutineScope

import androidx.compose.runtime.setValue

import androidx.compose.ui.Alignment

import androidx.compose.ui.Modifier

import androidx.compose.ui.text.font.FontWeight

import androidx.compose.ui.unit.dp

import io.oxygenhub.android.auth.Session

import io.oxygenhub.android.ui.common.AppScreen

import kotlinx.coroutines.launch

/** Who is signed in, to which hub, with what; and signing out. */

@Composable

fun AccountScreen(session: Session, nativeCore: () -> String, onSignOut: suspend () -> Unit) {

    var confirming by remember { mutableStateOf(false) }

    var signingOut by remember { mutableStateOf(false) }

    val scope = rememberCoroutineScope()

    val core = remember { runCatching(nativeCore).getOrElse { "unavailable: ${it.message}" } }

    AppScreen(title = "Account") {

        Box(Modifier.fillMaxWidth(), contentAlignment = Alignment.TopCenter) {

            Column(

                Modifier.widthIn(max = 600.dp).verticalScroll(rememberScrollState()).padding(16.dp),

                verticalArrangement = Arrangement.spacedBy(16.dp),

            ) {

                Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {

                    Surface(Modifier.size(72.dp), shape = CircleShape, color = MaterialTheme.colorScheme.primaryContainer) {

                        Box(contentAlignment = Alignment.Center) {

                            Text(

                                session.username.take(1).uppercase(),

                                style = MaterialTheme.typography.headlineMedium,

                                color = MaterialTheme.colorScheme.onPrimaryContainer,

                            )

                        }

                    }

                    Spacer(Modifier.height(8.dp))

                    Text(session.username, style = MaterialTheme.typography.titleLarge, fontWeight = FontWeight.Bold)

                }

                Card(Modifier.fillMaxWidth()) {

                    ListItem(

                        leadingContent = { Icon(Icons.Outlined.Dns, contentDescription = null) },

                        headlineContent = { Text("Hub") },

                        supportingContent = { Text(session.hub) },

                    )

                    ListItem(

                        leadingContent = { Icon(Icons.Outlined.Key, contentDescription = null) },

                        headlineContent = { Text("Allowed") },

                        supportingContent = { Text(session.scopes.ifEmpty { listOf("(the hub did not say)") }.joinToString(", ")) },

                    )

                    ListItem(

                        leadingContent = { Icon(Icons.Outlined.Memory, contentDescription = null) },

                        headlineContent = { Text("Native core") },

                        supportingContent = { Text(core) },

                    )

                }

                Text(

                    "This phone's sign-in is a device token, kept encrypted with a key in the Android Keystore. " +

                        "It lasts while it is used, and ends after 90 days without use. Signing out revokes it on the hub.",

                    style = MaterialTheme.typography.bodySmall,

                    color = MaterialTheme.colorScheme.onSurfaceVariant,

                )

                OutlinedButton(onClick = { confirming = true }, enabled = !signingOut, modifier = Modifier.fillMaxWidth()) {

                    if (signingOut) {

                        CircularProgressIndicator(Modifier.size(18.dp), strokeWidth = 2.dp)

                    } else {

                        Icon(Icons.AutoMirrored.Outlined.Logout, contentDescription = null)

                    }

                    Spacer(Modifier.size(8.dp))

                    Text("Sign out")

                }

            }

        }

    }

    if (confirming) {

        AlertDialog(

            onDismissRequest = { confirming = false },

            title = { Text("Sign out?") },

            text = { Text("The token this phone uses is revoked on ${session.hub}. You can sign in again at any time.") },

            confirmButton = {

                TextButton(onClick = {

                    confirming = false

                    signingOut = true

                    scope.launch { onSignOut() }

                }) { Text("Sign out") }

            },

            dismissButton = { TextButton(onClick = { confirming = false }) { Text("Cancel") } },

        )

    }

}

package io.oxygenhub.android.ui.common

import androidx.compose.foundation.layout.Box

import androidx.compose.foundation.layout.Column

import androidx.compose.foundation.layout.RowScope

import androidx.compose.foundation.layout.WindowInsets

import androidx.compose.foundation.layout.fillMaxSize

import androidx.compose.foundation.layout.padding

import androidx.compose.material.icons.Icons

import androidx.compose.material.icons.automirrored.filled.ArrowBack

import androidx.compose.material3.ExperimentalMaterial3Api

import androidx.compose.material3.Icon

import androidx.compose.material3.MaterialTheme

import androidx.compose.material3.IconButton

import androidx.compose.material3.Scaffold

import androidx.compose.material3.SnackbarHost

import androidx.compose.material3.SnackbarHostState

import androidx.compose.material3.Text

import androidx.compose.material3.TopAppBar

import androidx.compose.runtime.Composable

import androidx.compose.runtime.remember

import androidx.compose.ui.Modifier

import androidx.compose.ui.text.style.TextOverflow

/**

 * A screen with its top bar. The navigation bar or rail around it takes

 * the bottom and side insets, so only the top bar's own are applied here.

 */

@OptIn(ExperimentalMaterial3Api::class)

@Composable

fun AppScreen(

    title: String,

    modifier: Modifier = Modifier,

    subtitle: String? = null,

    onBack: (() -> Unit)? = null,

    snackbar: SnackbarHostState = remember { SnackbarHostState() },

    actions: @Composable RowScope.() -> Unit = {},

    content: @Composable () -> Unit,

) {

    Scaffold(

        modifier = modifier,

        contentWindowInsets = WindowInsets(0, 0, 0, 0),

        snackbarHost = { SnackbarHost(snackbar) },

        topBar = {

            TopAppBar(

                title = {

                    Column {

                        Text(title, maxLines = 1, overflow = TextOverflow.Ellipsis)

                        if (subtitle != null) {

                            Text(

                                subtitle,

                                style = MaterialTheme.typography.labelMedium,

                                color = MaterialTheme.colorScheme.onSurfaceVariant,

                                maxLines = 1,

                                overflow = TextOverflow.Ellipsis,

                            )

                        }

                    }

                },

                navigationIcon = {

                    if (onBack != null) {

                        IconButton(onClick = onBack) { Icon(Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "Back") }

                    }

                },

                actions = actions,

            )

        },

    ) { padding ->

        Box(Modifier.fillMaxSize().padding(padding)) { content() }

    }

}

package io.oxygenhub.android.ui.common

import androidx.lifecycle.ViewModel

import androidx.lifecycle.viewModelScope

import io.oxygenhub.android.api.userMessage

import kotlinx.coroutines.CancellationException

import kotlinx.coroutines.Job

import kotlinx.coroutines.flow.MutableStateFlow

import kotlinx.coroutines.launch

/** Something fetched from the hub: on its way, here, or failed. */

sealed interface Load<out T> {

    data object Loading : Load<Nothing>

    /** [refreshing] while a pull-to-refresh fetches it again. */

    data class Ready<T>(val value: T, val refreshing: Boolean = false) : Load<T>

    data class Failed(val message: String) : Load<Nothing>

    val valueOrNull: T? get() = (this as? Ready<T>)?.value

    companion object {

        fun failed(e: Throwable): Failed = Failed(e.userMessage())

    }

}

/** The same value, marked as being fetched again (or Loading if there is none yet). */

fun <T> Load<T>.refreshing(): Load<T> = when (this) {

    is Load.Ready -> copy(refreshing = true)

    else -> Load.Loading

}

/**

 * Fetches into [into], keeping what is shown while it refreshes; cancels

 * [previous] first, so a second pull never races the first.

 */

fun <T> ViewModel.load(into: MutableStateFlow<Load<T>>, previous: Job?, fetch: suspend () -> T): Job {

    previous?.cancel()

    into.value = into.value.refreshing()

    return viewModelScope.launch {

        into.value = try {

            Load.Ready(fetch())

        } catch (e: CancellationException) {

            throw e

        } catch (e: Exception) {

            Load.failed(e)

        }

    }

}

package io.oxygenhub.android.ui.common

import android.text.format.DateUtils

import androidx.compose.foundation.layout.Arrangement

import androidx.compose.foundation.layout.Box

import androidx.compose.foundation.layout.Column

import androidx.compose.foundation.layout.Spacer

import androidx.compose.foundation.layout.fillMaxSize

import androidx.compose.foundation.layout.height

import androidx.compose.foundation.layout.padding

import androidx.compose.foundation.layout.size

import androidx.compose.material.icons.Icons

import androidx.compose.material.icons.outlined.CloudOff

import androidx.compose.material3.Button

import androidx.compose.material3.CircularProgressIndicator

import androidx.compose.material3.ExperimentalMaterial3Api

import androidx.compose.material3.Icon

import androidx.compose.material3.MaterialTheme

import androidx.compose.material3.Text

import androidx.compose.material3.pulltorefresh.PullToRefreshBox

import androidx.compose.runtime.Composable

import androidx.compose.ui.Alignment

import androidx.compose.ui.Modifier

import androidx.compose.ui.graphics.vector.ImageVector

import androidx.compose.ui.text.style.TextAlign

import androidx.compose.ui.unit.dp

/** A spinner in the middle of the space. */

@Composable

fun LoadingState(modifier: Modifier = Modifier) {

    Box(modifier.fillMaxSize(), contentAlignment = Alignment.Center) {

        CircularProgressIndicator()

    }

}

/** Nothing to show, said plainly, with an icon. */

@Composable

fun EmptyState(

    icon: ImageVector,

    title: String,

    body: String,

    modifier: Modifier = Modifier,

    action: (@Composable () -> Unit)? = null,

) {

    Message(icon, title, body, modifier) {

        if (action != null) {

            Spacer(Modifier.height(8.dp))

            action()

        }

    }

}

/** What went wrong, and a way to try again. */

@Composable

fun ErrorState(message: String, onRetry: () -> Unit, modifier: Modifier = Modifier) {

    Message(Icons.Outlined.CloudOff, "Couldn't load this", message, modifier) {

        Spacer(Modifier.height(16.dp))

        Button(onClick = onRetry) { Text("Try again") }

    }

}

@Composable

private fun Message(

    icon: ImageVector,

    title: String,

    body: String,

    modifier: Modifier = Modifier,

    extra: @Composable () -> Unit = {},

) {

    Column(

        modifier.fillMaxSize().padding(32.dp),

        horizontalAlignment = Alignment.CenterHorizontally,

        verticalArrangement = Arrangement.Center,

    ) {

        Icon(icon, contentDescription = null, modifier = Modifier.size(48.dp), tint = MaterialTheme.colorScheme.onSurfaceVariant)

        Spacer(Modifier.height(16.dp))

        Text(title, style = MaterialTheme.typography.titleMedium, textAlign = TextAlign.Center)

        Spacer(Modifier.height(8.dp))

        Text(body, style = MaterialTheme.typography.bodyMedium, color = MaterialTheme.colorScheme.onSurfaceVariant, textAlign = TextAlign.Center)

        extra()

    }

}

/**

 * The usual body of a screen over a [Load]: a spinner, the error with a

 * retry, or [content] in a pull-to-refresh box.

 */

@OptIn(ExperimentalMaterial3Api::class)

@Composable

fun <T> LoadContent(

    load: Load<T>,

    onRefresh: () -> Unit,

    modifier: Modifier = Modifier,

    content: @Composable (T) -> Unit,

) {

    when (load) {

        Load.Loading -> LoadingState(modifier)

        is Load.Failed -> ErrorState(load.message, onRefresh, modifier)

        is Load.Ready -> PullToRefreshBox(isRefreshing = load.refreshing, onRefresh = onRefresh, modifier = modifier.fillMaxSize()) {

            content(load.value)

        }

    }

}

/** "3 hours ago", from milliseconds since the epoch. */

fun relativeTime(ms: Long, now: Long = System.currentTimeMillis()): String =

    if (ms <= 0) "" else DateUtils.getRelativeTimeSpanString(ms, now, DateUtils.MINUTE_IN_MILLIS).toString()

package io.oxygenhub.android.ui.dashboard

import androidx.compose.foundation.clickable

import androidx.compose.foundation.layout.Arrangement

import androidx.compose.foundation.layout.BoxWithConstraints

import androidx.compose.foundation.layout.Column

import androidx.compose.foundation.layout.Row

import androidx.compose.foundation.layout.Spacer

import androidx.compose.foundation.layout.fillMaxWidth

import androidx.compose.foundation.layout.height

import androidx.compose.foundation.layout.padding

import androidx.compose.foundation.rememberScrollState

import androidx.compose.foundation.verticalScroll

import androidx.compose.material.icons.Icons

import androidx.compose.material.icons.outlined.Inbox

import androidx.compose.material.icons.outlined.MarkEmailUnread

import androidx.compose.material3.Card

import androidx.compose.material3.HorizontalDivider

import androidx.compose.material3.Icon

import androidx.compose.material3.ListItem

import androidx.compose.material3.MaterialTheme

import androidx.compose.material3.Text

import androidx.compose.material3.TextButton

import androidx.compose.runtime.Composable

import androidx.compose.runtime.getValue

import androidx.compose.ui.Modifier

import androidx.compose.ui.text.font.FontWeight

import androidx.compose.ui.unit.dp

import androidx.lifecycle.compose.collectAsStateWithLifecycle

import io.oxygenhub.android.api.Inbox

import io.oxygenhub.android.api.Repository

import io.oxygenhub.android.ui.common.AppScreen

import io.oxygenhub.android.ui.common.Load

import io.oxygenhub.android.ui.common.LoadContent

import io.oxygenhub.android.ui.repos.RepositoryRow

@Composable

fun DashboardScreen(

    vm: DashboardViewModel,

    hub: String,

    inbox: Load<Inbox>,

    onRefreshInbox: () -> Unit,

    onOpenRepository: (Repository) -> Unit,

    onAllRepositories: () -> Unit,

    onInbox: () -> Unit,

) {

    val state by vm.state.collectAsStateWithLifecycle()

    AppScreen(title = "Dashboard", subtitle = hub.substringAfter("://")) {

        LoadContent(state, onRefresh = { vm.refresh(); onRefreshInbox() }) { d ->

            DashboardContent(d, inbox, onOpenRepository, onAllRepositories, onInbox)

        }

    }

}

@Composable

fun DashboardContent(

    d: Dashboard,

    inbox: Load<Inbox>,

    onOpenRepository: (Repository) -> Unit,

    onAllRepositories: () -> Unit,

    onInbox: () -> Unit,

) {

    BoxWithConstraints {

        // Side by side once there is room (a tablet, or a foldable open).

        val wide = maxWidth >= 720.dp

        Column(

            Modifier

                .fillMaxWidth()

                .verticalScroll(rememberScrollState())

                .padding(16.dp),

        ) {

            Text(d.greeting, style = MaterialTheme.typography.headlineMedium, fontWeight = FontWeight.Bold)

            Spacer(Modifier.height(16.dp))

            if (wide) {

                Row(horizontalArrangement = Arrangement.spacedBy(16.dp)) {

                    Column(Modifier.weight(2f)) { Recent(d, onOpenRepository, onAllRepositories) }

                    Column(Modifier.weight(1f)) { Unread(inbox, onInbox) }

                }

            } else {

                Unread(inbox, onInbox)

                Spacer(Modifier.height(16.dp))

                Recent(d, onOpenRepository, onAllRepositories)

            }

        }

    }

}

@Composable

private fun Unread(inbox: Load<Inbox>, onInbox: () -> Unit) {

    Card(Modifier.fillMaxWidth().clickable(onClick = onInbox)) {

        ListItem(

            leadingContent = {

                Icon(if ((inbox.valueOrNull?.unread ?: 0) > 0) Icons.Outlined.MarkEmailUnread else Icons.Outlined.Inbox, contentDescription = null)

            },

            headlineContent = {

                Text(

                    when (inbox) {

                        Load.Loading -> "Inbox"

                        is Load.Failed -> "Inbox unavailable"

                        is Load.Ready -> when (val n = inbox.value.unread) {

                            0L -> "Nothing unread"

                            1L -> "1 unread notification"

                            else -> "$n unread notifications"

                        }

                    },

                )

            },

            supportingContent = (inbox as? Load.Failed)?.let { f -> { Text(f.message) } },

        )

    }

}

@Composable

private fun Recent(d: Dashboard, onOpenRepository: (Repository) -> Unit, onAllRepositories: () -> Unit) {

    Card(Modifier.fillMaxWidth()) {

        Text(

            if (d.recentAreYours) "Your recent repositories" else "Recently updated on the hub",

            style = MaterialTheme.typography.titleMedium,

            modifier = Modifier.padding(start = 16.dp, top = 16.dp, end = 16.dp),

        )

        if (!d.recentAreYours) {

            Text(

                "You have no repositories of your own yet.",

                style = MaterialTheme.typography.bodySmall,

                color = MaterialTheme.colorScheme.onSurfaceVariant,

                modifier = Modifier.padding(horizontal = 16.dp),

            )

        }

        if (d.recent.isEmpty()) {

            Text("No repositories to show.", modifier = Modifier.padding(16.dp))

        }

        d.recent.forEachIndexed { i, repo ->

            if (i > 0) HorizontalDivider()

            RepositoryRow(repo, onClick = { onOpenRepository(repo) })

        }

        TextButton(onClick = onAllRepositories, modifier = Modifier.padding(8.dp)) { Text("All repositories") }

    }

}

package io.oxygenhub.android.ui.dashboard

import androidx.lifecycle.ViewModel

import io.oxygenhub.android.api.HubApi

import io.oxygenhub.android.api.Repository

import io.oxygenhub.android.api.User

import io.oxygenhub.android.auth.Session

import io.oxygenhub.android.ui.common.Load

import io.oxygenhub.android.ui.common.load

import kotlinx.coroutines.CancellationException

import kotlinx.coroutines.Job

import kotlinx.coroutines.async

import kotlinx.coroutines.coroutineScope

import kotlinx.coroutines.flow.MutableStateFlow

import kotlinx.coroutines.flow.StateFlow

import kotlinx.coroutines.flow.asStateFlow

import java.util.Calendar

data class Dashboard(

    val greeting: String,

    /** The account, or null when the token may not read it (no `user:read`). */

    val user: User?,

    /** The newest-updated repositories: the user's own, or everyone's when they own none. */

    val recent: List<Repository>,

    val recentAreYours: Boolean,

    val repositoryCount: Int,

)

class DashboardViewModel(

    private val api: HubApi,

    private val session: Session,

    private val hourOfDay: () -> Int = { Calendar.getInstance().get(Calendar.HOUR_OF_DAY) },

) : ViewModel() {

    private val _state = MutableStateFlow<Load<Dashboard>>(Load.Loading)

    val state: StateFlow<Load<Dashboard>> = _state.asStateFlow()

    private var job: Job? = null

    init {

        refresh()

    }

    fun refresh() {

        job = load(_state, job) { fetch() }

    }

    private suspend fun fetch(): Dashboard = coroutineScope {

        // The account is a nicety (a display name); the repositories are the page.

        val user = async {

            try {

                api.user()

            } catch (e: CancellationException) {

                throw e

            } catch (_: Exception) {

                null

            }

        }

        val repos = api.repositories()

        val me = user.await()

        val username = me?.username ?: session.username

        val mine = repos.filter { it.owner == username }

        val pool = mine.ifEmpty { repos }

        Dashboard(

            greeting = greeting(hourOfDay(), me?.shownName ?: session.username),

            user = me,

            recent = pool.sortedByDescending { it.updatedMs }.take(RECENT),

            recentAreYours = mine.isNotEmpty(),

            repositoryCount = mine.size,

        )

    }

    companion object {

        const val RECENT = 5

        fun greeting(hour: Int, name: String): String {

            val part = when (hour) {

                in 5..11 -> "Good morning"

                in 12..17 -> "Good afternoon"

                else -> "Good evening"

            }

            return "$part, $name"

        }

    }

}

package io.oxygenhub.android.ui.inbox

import androidx.compose.foundation.clickable

import androidx.compose.foundation.layout.Box

import androidx.compose.foundation.layout.fillMaxSize

import androidx.compose.foundation.layout.size

import androidx.compose.foundation.lazy.LazyColumn

import androidx.compose.foundation.lazy.items

import androidx.compose.foundation.shape.CircleShape

import androidx.compose.material.icons.Icons

import androidx.compose.material.icons.outlined.AlternateEmail

import androidx.compose.material.icons.outlined.BugReport

import androidx.compose.material.icons.automirrored.outlined.CallMerge

import androidx.compose.material.icons.outlined.Backup

import androidx.compose.material.icons.outlined.ChatBubbleOutline

import androidx.compose.material.icons.outlined.DoneAll

import androidx.compose.material.icons.outlined.Inbox

import androidx.compose.material.icons.outlined.Notifications

import androidx.compose.material.icons.outlined.PlayCircle

import androidx.compose.material.icons.outlined.RateReview

import androidx.compose.material3.HorizontalDivider

import androidx.compose.material3.Icon

import androidx.compose.material3.IconButton

import androidx.compose.material3.ListItem

import androidx.compose.material3.ListItemDefaults

import androidx.compose.material3.MaterialTheme

import androidx.compose.material3.SnackbarHostState

import androidx.compose.material3.Surface

import androidx.compose.material3.Text

import androidx.compose.runtime.Composable

import androidx.compose.runtime.LaunchedEffect

import androidx.compose.runtime.getValue

import androidx.compose.runtime.remember

import androidx.compose.ui.Alignment

import androidx.compose.ui.Modifier

import androidx.compose.ui.graphics.vector.ImageVector

import androidx.compose.ui.platform.LocalUriHandler

import androidx.compose.ui.text.font.FontWeight

import androidx.compose.ui.text.style.TextOverflow

import androidx.compose.ui.unit.dp

import androidx.lifecycle.compose.collectAsStateWithLifecycle

import io.oxygenhub.android.api.Notification

import io.oxygenhub.android.ui.common.AppScreen

import io.oxygenhub.android.ui.common.EmptyState

import io.oxygenhub.android.ui.common.LoadContent

import io.oxygenhub.android.ui.common.relativeTime

/** The inbox. A notification opens its page on the hub (in-app pages come with #4 and #5). */

@Composable

fun InboxScreen(vm: InboxViewModel) {

    val state by vm.state.collectAsStateWithLifecycle()

    val message by vm.message.collectAsStateWithLifecycle()

    val snackbar = remember { SnackbarHostState() }

    val uri = LocalUriHandler.current

    LaunchedEffect(message) {

        message?.let {

            snackbar.showSnackbar(it)

            vm.messageShown()

        }

    }

    val unread = state.valueOrNull?.unread ?: 0

    AppScreen(

        title = "Inbox",

        subtitle = if (unread > 0) "$unread unread" else null,

        snackbar = snackbar,

        actions = {

            if (unread > 0) {

                IconButton(onClick = vm::markAllRead) { Icon(Icons.Outlined.DoneAll, contentDescription = "Mark all read") }

            }

        },

    ) {

        LoadContent(state, onRefresh = vm::refresh) { inbox ->

            if (inbox.items.isEmpty()) {

                EmptyState(Icons.Outlined.Inbox, "Your inbox is empty", "Mentions, reviews and activity on what you watch arrive here.")

            } else {

                LazyColumn(Modifier.fillMaxSize()) {

                    items(inbox.items, key = { it.id }) { n ->

                        NotificationRow(n, onClick = {

                            vm.markRead(n)

                            if (n.url.isNotBlank()) uri.openUri(n.url)

                        })

                        HorizontalDivider()

                    }

                }

            }

        }

    }

}

@Composable

fun NotificationRow(n: Notification, onClick: () -> Unit) {

    ListItem(

        modifier = Modifier.clickable(onClick = onClick),

        colors = if (n.read) ListItemDefaults.colors() else ListItemDefaults.colors(containerColor = MaterialTheme.colorScheme.surfaceContainerHigh),

        leadingContent = {

            Box(contentAlignment = Alignment.TopEnd) {

                Icon(iconFor(n.kind), contentDescription = null)

                if (!n.read) {

                    Surface(Modifier.size(8.dp), shape = CircleShape, color = MaterialTheme.colorScheme.primary) {}

                }

            }

        },

        headlineContent = {

            Text(n.title, maxLines = 2, overflow = TextOverflow.Ellipsis, fontWeight = if (n.read) FontWeight.Normal else FontWeight.SemiBold)

        },

        supportingContent = {

            val who = if (n.actor.isNotBlank()) "${n.actor} · " else ""

            Text("$who${describe(n.kind)} · ${relativeTime(n.atMs)}", maxLines = 1, overflow = TextOverflow.Ellipsis)

        },

    )

}

private fun iconFor(kind: String): ImageVector = when {

    kind == "mention" -> Icons.Outlined.AlternateEmail

    kind.startsWith("proposal.review") -> Icons.Outlined.RateReview

    kind.endsWith(".comment") -> Icons.Outlined.ChatBubbleOutline

    kind.startsWith("proposal") -> Icons.AutoMirrored.Outlined.CallMerge

    kind.startsWith("issue") -> Icons.Outlined.BugReport

    kind.startsWith("flow") -> Icons.Outlined.PlayCircle

    kind.startsWith("backup") -> Icons.Outlined.Backup

    else -> Icons.Outlined.Notifications

}

/**

 * What a kind of notification is called, as the hub's emails name them

 * (oxygenhub crates/hub/src/notify/mod.rs, `label`), without the emoji.

 */

internal fun describe(kind: String): String = when (kind) {

    "flow.failed" -> "Build broken"

    "flow.fixed" -> "Build fixed"

    "flow.runner_drained" -> "Runner drained"

    "backup" -> "Backup failed"

    "backup.recovered" -> "Backup recovered"

    "backup.summary" -> "Daily backup summary"

    "proposal.opened" -> "New proposal"

    "proposal.review_requested" -> "Review requested"

    "proposal.review" -> "New review"

    "proposal.landed" -> "Proposal landed"

    "proposal.comment", "issue.comment", "drop.comment" -> "New comment"

    "issue.opened" -> "New issue"

    "issue.assigned" -> "Issue assigned"

    "issue.closed" -> "Issue closed"

    "account.registered" -> "New sign-up"

    "mention" -> "Mentioned you"

    else -> kind.replace('.', ' ').replace('_', ' ').replaceFirstChar { it.uppercase() }

}

package io.oxygenhub.android.ui.inbox

import androidx.lifecycle.ViewModel

import androidx.lifecycle.viewModelScope

import io.oxygenhub.android.api.HubApi

import io.oxygenhub.android.api.Inbox

import io.oxygenhub.android.api.Notification

import io.oxygenhub.android.api.userMessage

import io.oxygenhub.android.ui.common.Load

import io.oxygenhub.android.ui.common.load

import kotlinx.coroutines.CancellationException

import kotlinx.coroutines.Job

import kotlinx.coroutines.flow.MutableStateFlow

import kotlinx.coroutines.flow.StateFlow

import kotlinx.coroutines.flow.asStateFlow

import kotlinx.coroutines.flow.update

import kotlinx.coroutines.launch

/**

 * The inbox, shared by the inbox screen, the dashboard's unread count and

 * the navigation badge. Marking read shows at once and is put back if the

 * hub refuses it.

 */

class InboxViewModel(private val api: HubApi) : ViewModel() {

    private val _state = MutableStateFlow<Load<Inbox>>(Load.Loading)

    val state: StateFlow<Load<Inbox>> = _state.asStateFlow()

    /** A one-line message for a snackbar (a failed mark-read). */

    private val _message = MutableStateFlow<String?>(null)

    val message: StateFlow<String?> = _message.asStateFlow()

    private var job: Job? = null

    init {

        refresh()

    }

    fun refresh() {

        job = load(_state, job) { api.inbox(LIMIT) }

    }

    /** Marks [n] read (if it is not already); the caller then opens its page. */

    fun markRead(n: Notification) {

        if (n.read) return

        val before = _state.value

        edit { inbox ->

            inbox.copy(

                unread = (inbox.unread - 1).coerceAtLeast(0),

                items = inbox.items.map { if (it.id == n.id) it.copy(read = true) else it },

            )

        }

        viewModelScope.launch {

            try {

                api.markRead(n.id)

            } catch (e: CancellationException) {

                throw e

            } catch (e: Exception) {

                _state.value = before

                _message.value = "Couldn't mark it read: ${e.userMessage()}"

            }

        }

    }

    fun markAllRead() {

        val before = _state.value

        if ((before.valueOrNull?.unread ?: 0) == 0L) return

        edit { inbox -> inbox.copy(unread = 0, items = inbox.items.map { it.copy(read = true) }) }

        viewModelScope.launch {

            try {

                api.markAllRead()

            } catch (e: CancellationException) {

                throw e

            } catch (e: Exception) {

                _state.value = before

                _message.value = "Couldn't mark the inbox read: ${e.userMessage()}"

            }

        }

    }

    fun messageShown() {

        _message.value = null

    }

    private fun edit(change: (Inbox) -> Inbox) {

        _state.update { s -> if (s is Load.Ready) s.copy(value = change(s.value)) else s }

    }

    companion object {

        const val LIMIT = 100

    }

}

package io.oxygenhub.android.ui.issues

import androidx.compose.foundation.background

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.FlowRow

import androidx.compose.foundation.layout.Row

import androidx.compose.foundation.layout.fillMaxSize

import androidx.compose.foundation.layout.padding

import androidx.compose.foundation.lazy.LazyColumn

import androidx.compose.foundation.lazy.items

import androidx.compose.foundation.rememberScrollState

import androidx.compose.foundation.shape.RoundedCornerShape

import androidx.compose.material.icons.Icons

import androidx.compose.material.icons.outlined.CheckCircle

import androidx.compose.material.icons.outlined.ChatBubbleOutline

import androidx.compose.material.icons.outlined.PushPin

import androidx.compose.material.icons.outlined.RadioButtonUnchecked

import androidx.compose.material.icons.outlined.TaskAlt

import androidx.compose.material3.FilterChip

import androidx.compose.material3.HorizontalDivider

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.runtime.getValue

import androidx.compose.ui.Alignment

import androidx.compose.ui.Modifier

import androidx.compose.ui.draw.clip

import androidx.compose.ui.graphics.Color

import androidx.compose.ui.graphics.luminance

import androidx.compose.ui.platform.LocalUriHandler

import androidx.compose.ui.text.style.TextOverflow

import androidx.compose.ui.unit.dp

import androidx.compose.ui.unit.sp

import androidx.lifecycle.compose.collectAsStateWithLifecycle

import io.oxygenhub.android.api.Issue

import io.oxygenhub.android.api.IssueState

import io.oxygenhub.android.api.Label

import io.oxygenhub.android.ui.common.AppScreen

import io.oxygenhub.android.ui.common.EmptyState

import io.oxygenhub.android.ui.common.LoadContent

import io.oxygenhub.android.ui.common.relativeTime

import io.oxygenhub.android.ui.theme.LocalStatusColors

/**

 * A repository's issues. For now this is the repository's whole detail

 * pane; the repository overview (oxygenhub-android#3) will hold it as one

 * of its tabs. An issue opens on the hub's web page until #4 brings the

 * issue screen.

 */

@Composable

fun IssuesScreen(vm: IssuesViewModel, onBack: (() -> Unit)?) {

    val state by vm.state.collectAsStateWithLifecycle()

    val filter by vm.filter.collectAsStateWithLifecycle()

    val uri = LocalUriHandler.current

    AppScreen(title = "${vm.owner}/${vm.name}", subtitle = "Issues", onBack = onBack) {

        Column(Modifier.fillMaxSize()) {

            Row(

                Modifier.horizontalScroll(rememberScrollState()).padding(horizontal = 16.dp),

                horizontalArrangement = Arrangement.spacedBy(8.dp),

            ) {

                IssueState.entries.forEach { s ->

                    FilterChip(selected = filter == s, onClick = { vm.setFilter(s) }, label = { Text(s.name) })

                }

            }

            LoadContent(state, onRefresh = vm::refresh) { issues ->

                if (issues.isEmpty()) {

                    EmptyState(

                        Icons.Outlined.TaskAlt,

                        when (filter) {

                            IssueState.Open -> "No open issues"

                            IssueState.Closed -> "No closed issues"

                            IssueState.All -> "No issues yet"

                        },

                        "Issues for ${vm.owner}/${vm.name} show here.",

                    )

                } else {

                    LazyColumn(Modifier.fillMaxSize()) {

                        items(issues, key = { it.number }) { issue ->

                            IssueRow(issue, onClick = { if (issue.url.isNotBlank()) uri.openUri(issue.url) })

                            HorizontalDivider()

                        }

                    }

                }

            }

        }

    }

}

@Composable

fun IssueRow(issue: Issue, onClick: () -> Unit) {

    val status = LocalStatusColors.current

    ListItem(

        modifier = Modifier.clickable(onClick = onClick),

        leadingContent = {

            if (issue.isOpen) {

                Icon(Icons.Outlined.RadioButtonUnchecked, contentDescription = "Open", tint = status.ok)

            } else {

                Icon(Icons.Outlined.CheckCircle, contentDescription = "Closed", tint = status.warn)

            }

        },

        overlineContent = if (issue.pinned) {

            {

                Row(verticalAlignment = Alignment.CenterVertically) {

                    Icon(Icons.Outlined.PushPin, contentDescription = null, modifier = Modifier.padding(end = 4.dp))

                    Text("Pinned")

                }

            }

        } else {

            null

        },

        headlineContent = { Text(issue.title, maxLines = 2, overflow = TextOverflow.Ellipsis) },

        supportingContent = {

            Column {

                val verb = if (issue.isOpen) "opened" else "closed"

                val at = if (issue.isOpen) issue.createdMs else (issue.closedMs ?: issue.updatedMs)

                Text("#${issue.number} $verb ${relativeTime(at)} by ${issue.author}", maxLines = 1, overflow = TextOverflow.Ellipsis)

                if (issue.labels.isNotEmpty()) {

                    FlowRow(Modifier.padding(top = 4.dp), horizontalArrangement = Arrangement.spacedBy(4.dp), verticalArrangement = Arrangement.spacedBy(4.dp)) {

                        issue.labels.forEach { LabelChip(it) }

                    }

                }

            }

        },

        trailingContent = if (issue.comments > 0) {

            {

                Row(verticalAlignment = Alignment.CenterVertically) {

                    Icon(Icons.Outlined.ChatBubbleOutline, contentDescription = "Comments", modifier = Modifier.padding(end = 4.dp))

                    Text(issue.comments.toString())

                }

            }

        } else {

            null

        },

    )

}

@Composable

private fun LabelChip(label: Label) {

    val colour = parseColour(label.colour) ?: MaterialTheme.colorScheme.secondaryContainer

    val ink = if (colour.luminance() > 0.5f) Color.Black else Color.White

    Text(

        label.name,

        color = ink,

        fontSize = 12.sp,

        modifier = Modifier

            .clip(RoundedCornerShape(50))

            .background(colour)

            .padding(horizontal = 8.dp, vertical = 2.dp),

    )

}

/** `#rrggbb` (or `rrggbb`) to a colour; null for anything else. */

internal fun parseColour(s: String): Color? {

    val hex = s.trim().removePrefix("#")

    if (hex.length != 6) return null

    val v = hex.toLongOrNull(16) ?: return null

    return Color(0xFF000000 or v)

}

package io.oxygenhub.android.ui.issues

import androidx.lifecycle.ViewModel

import io.oxygenhub.android.api.HubApi

import io.oxygenhub.android.api.Issue

import io.oxygenhub.android.api.IssueState

import io.oxygenhub.android.ui.common.Load

import io.oxygenhub.android.ui.common.load

import kotlinx.coroutines.Job

import kotlinx.coroutines.flow.MutableStateFlow

import kotlinx.coroutines.flow.StateFlow

import kotlinx.coroutines.flow.asStateFlow

/** A repository's issues, open, closed or all; pinned ones first. */

class IssuesViewModel(

    private val api: HubApi,

    val owner: String,

    val name: String,

) : ViewModel() {

    private val _state = MutableStateFlow<Load<List<Issue>>>(Load.Loading)

    val state: StateFlow<Load<List<Issue>>> = _state.asStateFlow()

    private val _filter = MutableStateFlow(IssueState.Open)

    val filter: StateFlow<IssueState> = _filter.asStateFlow()

    private var job: Job? = null

    init {

        refresh()

    }

    fun setFilter(state: IssueState) {

        if (state == _filter.value) return

        _filter.value = state

        // Another list: show the spinner rather than the last filter's issues.

        _state.value = Load.Loading

        refresh()

    }

    fun refresh() {

        val state = _filter.value

        job = load(_state, job) { order(api.issues(owner, name, state)) }

    }

    companion object {

        /** Pinned first, then newest first, as the hub's issue page lists them. */

        fun order(issues: List<Issue>): List<Issue> =

            issues.sortedWith(compareByDescending<Issue> { it.pinned }.thenByDescending { it.number })

    }

}

package io.oxygenhub.android.ui.nav

import androidx.compose.material.icons.Icons

import androidx.compose.material.icons.filled.AccountCircle

import androidx.compose.material.icons.filled.Book

import androidx.compose.material.icons.filled.Dashboard

import androidx.compose.material.icons.filled.Inbox

import androidx.compose.material.icons.outlined.AccountCircle

import androidx.compose.material.icons.outlined.Book

import androidx.compose.material.icons.outlined.Dashboard

import androidx.compose.material.icons.outlined.Inbox

import androidx.compose.material3.Badge

import androidx.compose.material3.BadgedBox

import androidx.compose.material3.Icon

import androidx.compose.material3.Text

import androidx.compose.material3.adaptive.navigationsuite.NavigationSuiteScaffold

import androidx.compose.runtime.Composable

import androidx.compose.runtime.getValue

import androidx.compose.ui.graphics.vector.ImageVector

import androidx.lifecycle.ViewModel

import androidx.lifecycle.compose.collectAsStateWithLifecycle

import androidx.lifecycle.viewmodel.compose.viewModel

import androidx.lifecycle.viewmodel.initializer

import androidx.lifecycle.viewmodel.viewModelFactory

import androidx.navigation.NavDestination.Companion.hasRoute

import androidx.navigation.NavDestination.Companion.hierarchy

import androidx.navigation.NavGraph.Companion.findStartDestination

import androidx.navigation.NavHostController

import androidx.navigation.compose.NavHost

import androidx.navigation.compose.composable

import androidx.navigation.compose.currentBackStackEntryAsState

import androidx.navigation.compose.rememberNavController

import androidx.navigation.toRoute

import io.oxygenhub.android.api.HubApi

import io.oxygenhub.android.auth.Session

import io.oxygenhub.android.ui.account.AccountScreen

import io.oxygenhub.android.ui.dashboard.DashboardScreen

import io.oxygenhub.android.ui.dashboard.DashboardViewModel

import io.oxygenhub.android.ui.inbox.InboxScreen

import io.oxygenhub.android.ui.inbox.InboxViewModel

import io.oxygenhub.android.ui.issues.IssuesScreen

import io.oxygenhub.android.ui.issues.IssuesViewModel

import io.oxygenhub.android.ui.repos.RepositoriesScreen

import io.oxygenhub.android.ui.repos.RepositoriesViewModel

import kotlinx.serialization.Serializable

import kotlin.reflect.KClass

// The app's routes. Top-level ones are in the navigation bar (or rail, or

// drawer, as the window allows); the rest are pushed over them. Browse

// (oxygenhub-android#3) adds a repository's overview, code and history

// under the repository's route.

@Serializable data object DashboardRoute

@Serializable data object RepositoriesRoute

@Serializable data object InboxRoute

@Serializable data object AccountRoute

/** A repository's issues, opened from outside the repositories list (the dashboard). */

@Serializable data class IssuesRoute(val owner: String, val name: String)

enum class TopLevel(val label: String, val icon: ImageVector, val selectedIcon: ImageVector, val route: Any, val routeClass: KClass<*>) {

    Dashboard("Dashboard", Icons.Outlined.Dashboard, Icons.Filled.Dashboard, DashboardRoute, DashboardRoute::class),

    Repositories("Repositories", Icons.Outlined.Book, Icons.Filled.Book, RepositoriesRoute, RepositoriesRoute::class),

    Inbox("Inbox", Icons.Outlined.Inbox, Icons.Filled.Inbox, InboxRoute, InboxRoute::class),

    Account("Account", Icons.Outlined.AccountCircle, Icons.Filled.AccountCircle, AccountRoute, AccountRoute::class),

}

/** A view model made by [make], kept by the screen's back stack entry (or [key] within it). */

@Composable

inline fun <reified VM : ViewModel> rememberViewModel(key: String? = null, crossinline make: () -> VM): VM =

    viewModel(key = key, factory = viewModelFactory { initializer { make() } })

/** The signed-in app: navigation around the dashboard, repositories, inbox and account. */

@Composable

fun SignedInApp(

    session: Session,

    api: HubApi,

    nativeCore: () -> String,

    onSignOut: suspend () -> Unit,

) {

    val nav = rememberNavController()

    // One inbox for the badge, the dashboard's count and the inbox screen.

    val inbox = rememberViewModel(key = "inbox:${session.hub}:${session.username}") { InboxViewModel(api) }

    val inboxState by inbox.state.collectAsStateWithLifecycle()

    val unread = inboxState.valueOrNull?.unread ?: 0

    val entry by nav.currentBackStackEntryAsState()

    val destination = entry?.destination

    NavigationSuiteScaffold(

        navigationSuiteItems = {

            TopLevel.entries.forEach { top ->

                val selected = destination?.hierarchy?.any { it.hasRoute(top.routeClass) } == true

                item(

                    selected = selected,

                    onClick = { nav.goTo(top) },

                    icon = {

                        val icon = if (selected) top.selectedIcon else top.icon

                        if (top == TopLevel.Inbox && unread > 0) {

                            BadgedBox(badge = { Badge { Text(if (unread > 99) "99+" else unread.toString()) } }) {

                                Icon(icon, contentDescription = "${top.label}, $unread unread")

                            }

                        } else {

                            Icon(icon, contentDescription = top.label)

                        }

                    },

                    label = { Text(top.label) },

                )

            }

        },

    ) {

        NavHost(nav, startDestination = DashboardRoute) {

            composable<DashboardRoute> {

                DashboardScreen(

                    vm = rememberViewModel { DashboardViewModel(api, session) },

                    hub = session.hub,

                    inbox = inboxState,

                    onRefreshInbox = inbox::refresh,

                    onOpenRepository = { nav.navigate(IssuesRoute(it.owner, it.name)) },

                    onAllRepositories = { nav.goTo(TopLevel.Repositories) },

                    onInbox = { nav.goTo(TopLevel.Inbox) },

                )

            }

            composable<RepositoriesRoute> {

                RepositoriesScreen(rememberViewModel { RepositoriesViewModel(api, session.username) }) { slug, onBack ->

                    val (owner, name) = slug.split('/', limit = 2)

                    IssuesScreen(rememberViewModel(key = "issues:$slug") { IssuesViewModel(api, owner, name) }, onBack)

                }

            }

            composable<IssuesRoute> { e ->

                val r = e.toRoute<IssuesRoute>()

                IssuesScreen(rememberViewModel { IssuesViewModel(api, r.owner, r.name) }, onBack = { nav.popBackStack() })

            }

            composable<InboxRoute> { InboxScreen(inbox) }

            composable<AccountRoute> { AccountScreen(session, nativeCore, onSignOut) }

        }

    }

}

/** To a top-level destination, keeping one copy of each and its state, as the bar's own taps do. */

private fun NavHostController.goTo(top: TopLevel) {

    navigate(top.route) {

        popUpTo(graph.findStartDestination().id) { saveState = true }

        launchSingleTop = true

        restoreState = true

    }

}

package io.oxygenhub.android.ui.repos

import androidx.compose.foundation.layout.Arrangement

import androidx.compose.foundation.layout.Column

import androidx.compose.foundation.layout.Row

import androidx.compose.foundation.layout.fillMaxSize

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.material.icons.Icons

import androidx.compose.material.icons.outlined.Book

import androidx.compose.material.icons.outlined.Search

import androidx.compose.material3.FilterChip

import androidx.compose.material3.HorizontalDivider

import androidx.compose.material3.Icon

import androidx.compose.material3.OutlinedTextField

import androidx.compose.material3.Text

import androidx.compose.material3.TextButton

import androidx.compose.material3.adaptive.ExperimentalMaterial3AdaptiveApi

import androidx.compose.material3.adaptive.currentWindowAdaptiveInfo

import androidx.compose.material3.adaptive.layout.AnimatedPane

import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffoldRole

import androidx.compose.material3.adaptive.layout.PaneAdaptedValue

import androidx.compose.material3.adaptive.layout.calculatePaneScaffoldDirective

import androidx.compose.material3.adaptive.navigation.NavigableListDetailPaneScaffold

import androidx.compose.material3.adaptive.navigation.rememberListDetailPaneScaffoldNavigator

import androidx.compose.runtime.Composable

import androidx.compose.runtime.getValue

import androidx.compose.runtime.rememberCoroutineScope

import androidx.compose.ui.Modifier

import androidx.compose.ui.unit.dp

import androidx.lifecycle.compose.collectAsStateWithLifecycle

import androidx.window.core.layout.WindowSizeClass

import io.oxygenhub.android.api.Repository

import io.oxygenhub.android.ui.common.AppScreen

import io.oxygenhub.android.ui.common.EmptyState

import io.oxygenhub.android.ui.common.LoadContent

import kotlinx.coroutines.launch

/**

 * Repositories as a list and detail: one pane on a phone (the detail over

 * the list, back returning to it), both side by side from a medium width

 * up, so a foldable opened shows a repository's issues beside the list.

 * The scaffold keeps panes off a vertical hinge.

 */

@OptIn(ExperimentalMaterial3AdaptiveApi::class)

@Composable

fun RepositoriesScreen(

    vm: RepositoriesViewModel,

    detail: @Composable (slug: String, onBack: (() -> Unit)?) -> Unit,

) {

    val info = currentWindowAdaptiveInfo()

    val base = calculatePaneScaffoldDirective(info)

    val twoPanes = info.windowSizeClass.isWidthAtLeastBreakpoint(WindowSizeClass.WIDTH_DP_MEDIUM_LOWER_BOUND)

    val directive = if (twoPanes && base.maxHorizontalPartitions < 2) base.copy(maxHorizontalPartitions = 2) else base

    val navigator = rememberListDetailPaneScaffoldNavigator<String>(scaffoldDirective = directive)

    val scope = rememberCoroutineScope()

    val selected = navigator.currentDestination?.contentKey

    val detailShownAlone = navigator.scaffoldValue[ListDetailPaneScaffoldRole.List] == PaneAdaptedValue.Hidden

    NavigableListDetailPaneScaffold(

        navigator = navigator,

        listPane = {

            AnimatedPane {

                RepositoryList(vm, selected = selected, onOpen = { repo ->

                    scope.launch { navigator.navigateTo(ListDetailPaneScaffoldRole.Detail, repo.slug) }

                })

            }

        },

        detailPane = {

            AnimatedPane {

                if (selected == null) {

                    EmptyState(Icons.Outlined.Book, "Choose a repository", "Its issues show here.")

                } else {

                    detail(selected, if (detailShownAlone) ({ scope.launch { navigator.navigateBack() } }) else null)

                }

            }

        },

    )

}

@Composable

private fun RepositoryList(vm: RepositoriesViewModel, selected: String?, onOpen: (Repository) -> Unit) {

    val state by vm.state.collectAsStateWithLifecycle()

    val query by vm.query.collectAsStateWithLifecycle()

    AppScreen(title = "Repositories") {

        Column(Modifier.fillMaxSize()) {

            OutlinedTextField(

                value = query.text,

                onValueChange = vm::setText,

                placeholder = { Text("Filter") },

                leadingIcon = { Icon(Icons.Outlined.Search, contentDescription = null) },

                singleLine = true,

                modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),

            )

            Row(Modifier.padding(horizontal = 16.dp, vertical = 8.dp), horizontalArrangement = Arrangement.spacedBy(8.dp)) {

                FilterChip(query.filter == RepoFilter.Yours, onClick = { vm.setFilter(RepoFilter.Yours) }, label = { Text("Yours") })

                FilterChip(query.filter == RepoFilter.All, onClick = { vm.setFilter(RepoFilter.All) }, label = { Text("All you can see") })

            }

            LoadContent(state, onRefresh = vm::refresh) { all ->

                val shown = vm.shown(all, query)

                if (shown.isEmpty()) {

                    EmptyState(

                        Icons.Outlined.Book,

                        if (query.text.isBlank()) "No repositories" else "Nothing matches “${query.text.trim()}”",

                        if (query.filter == RepoFilter.Yours) "You own none here yet." else "The hub has none you can see.",

                        action = if (query.filter == RepoFilter.Yours) {

                            { TextButton(onClick = { vm.setFilter(RepoFilter.All) }) { Text("Show all you can see") } }

                        } else {

                            null

                        },

                    )

                } else {

                    LazyColumn(Modifier.fillMaxSize()) {

                        items(shown, key = { it.slug }) { repo ->

                            RepositoryRow(repo, onClick = { onOpen(repo) }, selected = repo.slug == selected)

                            HorizontalDivider()

                        }

                    }

                }

            }

        }

    }

}

package io.oxygenhub.android.ui.repos

import androidx.lifecycle.ViewModel