From 9b6ae7159a3afbcc76d411d688fd4580a00458e9 Mon Sep 17 00:00:00 2001 From: Kgothatso Ngako Date: Wed, 1 Apr 2026 01:11:23 +0200 Subject: [PATCH] TextNoteDetail screen --- .../ac/aux/compose/extensions/Instant.kt | 17 +- .../ui/composable/NostrEventDetailScreen.kt | 78 +++++-- .../ui/composable/navigation/AuxNavHost.kt | 10 + .../widgets/detail/TextNoteDetail.kt | 203 ++++++++++++++++++ 4 files changed, 288 insertions(+), 20 deletions(-) create mode 100644 composeApp/src/commonMain/kotlin/ac/aux/compose/ui/composable/widgets/detail/TextNoteDetail.kt diff --git a/composeApp/src/commonMain/kotlin/ac/aux/compose/extensions/Instant.kt b/composeApp/src/commonMain/kotlin/ac/aux/compose/extensions/Instant.kt index c3c9d0e2..ca2d8b61 100644 --- a/composeApp/src/commonMain/kotlin/ac/aux/compose/extensions/Instant.kt +++ b/composeApp/src/commonMain/kotlin/ac/aux/compose/extensions/Instant.kt @@ -3,6 +3,7 @@ package ac.aux.compose.extensions import kotlinx.datetime.LocalDateTime import kotlinx.datetime.TimeZone import kotlinx.datetime.format +import kotlinx.datetime.format.MonthNames import kotlinx.datetime.format.char import kotlinx.datetime.toLocalDateTime import kotlin.time.Instant @@ -10,15 +11,19 @@ import kotlin.time.Instant fun Instant.toFormattedTimeAndDateString(): String { return toLocalDateTime(TimeZone.currentSystemDefault()).format( LocalDateTime.Format { - year() - char('-') - monthNumber() - char('-') - day() - char(' ') + + hour() char(':') minute() + char(' ') + day() + char(' ') + monthName( + MonthNames.ENGLISH_ABBREVIATED + ) + char(' ') + year() } ) } \ No newline at end of file diff --git a/composeApp/src/commonMain/kotlin/ac/aux/compose/ui/composable/NostrEventDetailScreen.kt b/composeApp/src/commonMain/kotlin/ac/aux/compose/ui/composable/NostrEventDetailScreen.kt index bbfa7db2..706a6312 100644 --- a/composeApp/src/commonMain/kotlin/ac/aux/compose/ui/composable/NostrEventDetailScreen.kt +++ b/composeApp/src/commonMain/kotlin/ac/aux/compose/ui/composable/NostrEventDetailScreen.kt @@ -1,21 +1,52 @@ package ac.aux.compose.ui.composable +import ac.aux.compose.database.model.NostrEvent +import ac.aux.compose.database.model.Profile +import ac.aux.compose.database.model.intermdiate.LocalNostrEvent +import ac.aux.compose.extensions.toFormattedTimeAndDateString import ac.aux.compose.repository.NostrRepository import ac.aux.compose.ui.composable.widgets.LoadingDataIndicator +import ac.aux.compose.ui.composable.widgets.detail.TextNoteDetail import ac.aux.compose.ui.theme.AuxTheme import ac.aux.compose.ui.view.model.NostrEventDetailViewModel import ac.aux.compose.ui.view.state.NostrEventDetailUIState 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.only import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.lazy.LazyColumn +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.filled.AddReaction +import androidx.compose.material.icons.filled.ArrowBackIosNew +import androidx.compose.material.icons.filled.ChatBubble +import androidx.compose.material.icons.filled.CurrencyBitcoin +import androidx.compose.material.icons.filled.Cyclone +import androidx.compose.material.icons.filled.Loop +import androidx.compose.material.icons.filled.MonetizationOn +import androidx.compose.material.icons.filled.Money +import androidx.compose.material.icons.filled.Person +import androidx.compose.material.icons.filled.Repeat +import androidx.compose.material3.BottomAppBar +import androidx.compose.material3.Button +import androidx.compose.material3.ExperimentalMaterial3Api +import androidx.compose.material3.ExtendedFloatingActionButton +import androidx.compose.material3.HorizontalDivider +import androidx.compose.material3.Icon +import androidx.compose.material3.IconButton +import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Scaffold import androidx.compose.material3.Surface import androidx.compose.material3.Text +import androidx.compose.material3.TopAppBar import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.lifecycle.viewmodel.compose.viewModel @@ -24,11 +55,14 @@ import com.vitorpamplona.quartz.nip01Core.metadata.MetadataEvent import com.vitorpamplona.quartz.nip10Notes.TextNoteEvent import com.vitorpamplona.quartz.nip18Reposts.RepostEvent +@OptIn(ExperimentalMaterial3Api::class) @Composable fun NostrEventDetailScreen( initialNostrEventDetailUIState: NostrEventDetailUIState, nostrEventId: HexKey, - nostrRepository: NostrRepository + nostrRepository: NostrRepository, + onNavigateBack: () -> Unit, + onNavigateToWriteAReply: (String) -> Unit ) { val nostrEventDetailViewModel: NostrEventDetailViewModel = viewModel( factory = NostrEventDetailViewModel.factory( @@ -63,16 +97,11 @@ fun NostrEventDetailScreen( } } TextNoteEvent.KIND -> { - // TODO: Post... - Column( - modifier = Modifier.fillMaxSize(), - verticalArrangement = Arrangement.Center, - horizontalAlignment = Alignment.CenterHorizontally - ) { - Text(feedListUIState.localNostrEvent.nostrEvent.content) - - Text("post functionality coming soon.") - } + TextNoteDetail( + feedListUIState.localNostrEvent, + onNavigateBack = onNavigateBack, + onNavigateToWriteAReply = onNavigateToWriteAReply + ) } RepostEvent.KIND -> { // TODO: RePost... @@ -102,7 +131,6 @@ fun NostrEventDetailScreen( } } } - } } } @@ -133,9 +161,31 @@ private fun NostrEventDetailScreenPreview() { modifier = Modifier.padding(20.dp) ) { NostrEventDetailScreen( - initialNostrEventDetailUIState = NostrEventDetailUIState.Loading, + initialNostrEventDetailUIState = NostrEventDetailUIState.Loaded( + localNostrEvent = LocalNostrEvent( + nostrEvent = NostrEvent( + id = "eventId", + pubKey = "publicKey", + content = """Lorem Ipsum is simply dummy text of the printing and typesetting industry. + +Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. + +It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.""".trimIndent(), + tags = emptyArray(), + sig = "", + kind = TextNoteEvent.KIND + ), + profile = Profile( + publicKey = "pubKey", + displayName = "John Doe", + nostrEventId = "nostrEventId" + ) + ) + ), nostrEventId = "", - nostrRepository = NostrRepository.NO_OP_NOSTR_REPOSITORY + nostrRepository = NostrRepository.NO_OP_NOSTR_REPOSITORY, + onNavigateBack = {}, + onNavigateToWriteAReply = {} ) } } diff --git a/composeApp/src/commonMain/kotlin/ac/aux/compose/ui/composable/navigation/AuxNavHost.kt b/composeApp/src/commonMain/kotlin/ac/aux/compose/ui/composable/navigation/AuxNavHost.kt index e499fdf6..f564e34d 100644 --- a/composeApp/src/commonMain/kotlin/ac/aux/compose/ui/composable/navigation/AuxNavHost.kt +++ b/composeApp/src/commonMain/kotlin/ac/aux/compose/ui/composable/navigation/AuxNavHost.kt @@ -339,6 +339,16 @@ fun AuxNavHost( initialNostrEventDetailUIState = NostrEventDetailUIState.Loading, nostrEventId = route.nostrEventId, nostrRepository = nostrRepository, + onNavigateBack = { + navController.popBackStack() + }, + onNavigateToWriteAReply = { nostrEventId -> + navController.navigate( + route = WriteNewNoteRoute( + inReplyToEventId = nostrEventId + ) + ) + } ) } composable { backStackEntry -> diff --git a/composeApp/src/commonMain/kotlin/ac/aux/compose/ui/composable/widgets/detail/TextNoteDetail.kt b/composeApp/src/commonMain/kotlin/ac/aux/compose/ui/composable/widgets/detail/TextNoteDetail.kt new file mode 100644 index 00000000..41512d8b --- /dev/null +++ b/composeApp/src/commonMain/kotlin/ac/aux/compose/ui/composable/widgets/detail/TextNoteDetail.kt @@ -0,0 +1,203 @@ +package ac.aux.compose.ui.composable.widgets.detail + +import ac.aux.compose.database.model.intermdiate.LocalNostrEvent +import ac.aux.compose.extensions.toFormattedTimeAndDateString +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.layout.size +import androidx.compose.foundation.lazy.LazyColumn +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.filled.AddReaction +import androidx.compose.material.icons.filled.ArrowBackIosNew +import androidx.compose.material.icons.filled.ChatBubble +import androidx.compose.material.icons.filled.CurrencyBitcoin +import androidx.compose.material.icons.filled.Person +import androidx.compose.material.icons.filled.Repeat +import androidx.compose.material3.BottomAppBar +import androidx.compose.material3.Button +import androidx.compose.material3.ExperimentalMaterial3Api +import androidx.compose.material3.ExtendedFloatingActionButton +import androidx.compose.material3.HorizontalDivider +import androidx.compose.material3.Icon +import androidx.compose.material3.IconButton +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Scaffold +import androidx.compose.material3.Text +import androidx.compose.material3.TopAppBar +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.unit.dp + +@OptIn(ExperimentalMaterial3Api::class) +@Composable +fun TextNoteDetail( + localNostrEvent: LocalNostrEvent, + onNavigateBack: () -> Unit, + onNavigateToWriteAReply: (String) -> Unit +) { + + Scaffold( + modifier = Modifier.fillMaxSize(), + topBar = { + TopAppBar( + navigationIcon = { + IconButton( + onClick = onNavigateBack + ) { + Icon( + Icons.Default.ArrowBackIosNew, + contentDescription = "Navigate back" + ) + } + }, + title = { + Text("Post") + }, + ) + } + ) { innerPadding -> + Column( + modifier = Modifier.padding(innerPadding).fillMaxSize() + ) { + + LazyColumn( + modifier = Modifier.fillMaxSize() + ) { + item { + Column( + modifier = Modifier.fillMaxWidth(), + verticalArrangement = Arrangement.Center, + horizontalAlignment = Alignment.CenterHorizontally + ) { + Row( + modifier = Modifier.fillMaxWidth().padding(20.dp), + horizontalArrangement = Arrangement.spacedBy(10.dp), + verticalAlignment = Alignment.CenterVertically + ) { + val profile = localNostrEvent.profile + + Icon( + Icons.Default.Person, + modifier = Modifier.size(50.dp), + contentDescription = profile.displayName ?: profile.userName ?: "Profile picture" + ) + + Column( + modifier = Modifier.weight(1f) + ) { + Text( + text = profile.displayName ?: profile.userName ?: profile.publicKey, + style = MaterialTheme.typography.bodyLarge + ) + + Text( + text = profile.nip05 ?: "", + style = MaterialTheme.typography.labelMedium + ) + } + + + Button( + onClick = { + + } + ) { + Text( + "Follow" + ) + } + } + Text( + modifier = Modifier.fillMaxWidth().padding( + horizontal = 20.dp + ), + textAlign = TextAlign.Start, + text = localNostrEvent.nostrEvent.content + ) + + + + Row( + modifier = Modifier.fillMaxWidth().padding(20.dp), + horizontalArrangement = Arrangement.Start + ) { + Text( + text = localNostrEvent.nostrEvent.createdAt.toFormattedTimeAndDateString() + ) + } + + HorizontalDivider() + + BottomAppBar( + actions = { + + + IconButton( + onClick = { + + } + ) { + Icon( + Icons.Default.AddReaction, + contentDescription = "Add Reaction" + ) + } + + IconButton( + onClick = { + + } + ) { + Icon( + Icons.Default.CurrencyBitcoin, + contentDescription = "Tip" + ) + } + + + IconButton( + onClick = { + // TODO: Repost... + } + ) { + Icon( + Icons.Default.Repeat, + contentDescription = "Repost" + ) + } + }, + floatingActionButton = { + ExtendedFloatingActionButton( + onClick = { + onNavigateToWriteAReply.invoke( + localNostrEvent.nostrEvent.id + ) + }, + icon = { + Icon( + Icons.Default.ChatBubble, + contentDescription = "Reply" + ) + }, + text = { + Text("Reply") + } + ) + }, + ) + + HorizontalDivider() + + Text("Replies coming soon...") + } + } + } + } + } +} \ No newline at end of file