feat(desktop): ReadingColumn width cap, conditional Profile back, card styling pass

Introduces ReadingColumn, a top-level scaffold that caps feed/list screens at 720 dp and centers them — matches the Twitter/Mastodon desktop pattern so cards don't stretch disproportionately on 4K displays. Applied to: Home, Reads, Notifications, Bookmarks, Drafts, Highlights, Search, Thread, Profile, Settings. Messages stays full-width (its own two-pane sizing). Chess, Relay Dashboard, Article Reader/Editor keep their current full-width layouts (tools/reading logic dictates width independently). Header consistency: - Bookmarks / Drafts / Highlights / Search now have a minimum header row height of 48dp so screens without action buttons sit at the same visual weight as screens with IconButtons. - Drafts' "New Draft" button converted from text Button to IconButton for consistency with the other screens' icon-only actions. - Settings title switched from headlineMedium to titleMedium and wrapped in the standard h=12/v=8 header row. Profile back button: - UserProfileScreen now takes canGoBack: Boolean = false. The back arrow only renders when stacked onto a nav stack (clicking a user in the feed / notifications). Top-level "My Profile" accessed via the nav rail has no back arrow — nothing above it to pop. - Applied to both the in-header back button and the floating scroll-aware header that appears when scrolling through posts. Home cards: - NoteCard switched from surfaceVariant fill (gray) to surface (white) + 1dp elevation, matching LongFormCard on Reads. The subtle shadow gives the feed the same lift as the articles screen. https://claude.ai/code/session_01NufduPfZvYQVYwLkbCjCUo
2026-04-24 15:11:48 +00:00
parent 08f9c8bfd4
commit d212b88103
13 changed files with 946 additions and 816 deletions
@@ -29,7 +29,9 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.rememberScrollState
@@ -1319,16 +1321,34 @@ fun RelaySettingsScreen(
        accountManager.loadNwcConnection()
    }

+    Box(
+        modifier = Modifier.fillMaxSize(),
+        contentAlignment = Alignment.TopCenter,
+    ) {
        Column(
-        modifier = Modifier.fillMaxSize().verticalScroll(rememberScrollState()),
+            modifier =
+                Modifier
+                    .fillMaxSize()
+                    .widthIn(max = 720.dp)
+                    .verticalScroll(rememberScrollState())
+                    .padding(horizontal = 12.dp),
+        ) {
+            Row(
+                modifier =
+                    Modifier
+                        .fillMaxWidth()
+                        .heightIn(min = 48.dp)
+                        .padding(vertical = 8.dp),
+                verticalAlignment = Alignment.CenterVertically,
            ) {
                Text(
                    "Settings",
-            style = MaterialTheme.typography.headlineMedium,
+                    style = MaterialTheme.typography.titleMedium,
                    color = MaterialTheme.colorScheme.onBackground,
                )
+            }

-        Spacer(Modifier.height(24.dp))
+            Spacer(Modifier.height(16.dp))

            // Wallet Connect Section
            Text(
@@ -1528,4 +1548,5 @@ fun RelaySettingsScreen(
                Text("Logout")
            }
        }
+    }
 }
@@ -27,6 +27,7 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
@@ -247,12 +248,13 @@ fun BookmarksScreen(
    val currentEvents = if (selectedTab == BookmarkTab.PUBLIC) publicEvents else privateEvents
    val currentBookmarkIds = if (selectedTab == BookmarkTab.PUBLIC) publicBookmarkIds else privateBookmarkIds

-    Column(modifier = Modifier.fillMaxSize()) {
+    ReadingColumn {
        // Header with tabs
        Row(
            modifier =
                Modifier
                    .fillMaxWidth()
+                    .heightIn(min = 48.dp)
                    .padding(horizontal = 12.dp, vertical = 8.dp),
            verticalAlignment = Alignment.CenterVertically,
        ) {
@@ -26,14 +26,14 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.material3.AlertDialog
-import androidx.compose.material3.Button
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.Icon
@@ -67,11 +67,12 @@ fun DraftsScreen(
    val scope = rememberCoroutineScope()
    var deleteTarget by remember { mutableStateOf<DraftEntry?>(null) }

-    Column(modifier = Modifier.fillMaxSize()) {
+    ReadingColumn {
        Row(
            modifier =
                Modifier
                    .fillMaxWidth()
+                    .heightIn(min = 48.dp)
                    .padding(horizontal = 12.dp, vertical = 8.dp),
            horizontalArrangement = Arrangement.SpaceBetween,
            verticalAlignment = Alignment.CenterVertically,
@@ -81,9 +82,15 @@ fun DraftsScreen(
                style = MaterialTheme.typography.titleMedium,
                color = MaterialTheme.colorScheme.onBackground,
            )
-            Button(onClick = { onOpenEditor(null) }) {
-                Icon(MaterialSymbols.Add, contentDescription = null)
-                Text("New Draft", modifier = Modifier.padding(start = 4.dp))
+            // Convert "New Draft" button to an icon for consistency with other
+            // screens' tabs-first + icon-actions header pattern.
+            IconButton(onClick = { onOpenEditor(null) }, modifier = Modifier.size(32.dp)) {
+                Icon(
+                    MaterialSymbols.Add,
+                    contentDescription = "New Draft",
+                    tint = MaterialTheme.colorScheme.primary,
+                    modifier = Modifier.size(20.dp),
+                )
            }
        }

@@ -489,7 +489,7 @@ fun FeedScreen(
    }

    Box(modifier = Modifier.fillMaxSize()) {
-        Column(modifier = Modifier.fillMaxSize()) {
+        ReadingColumn {
            // Header with compose button
            FeedHeader(
                feedMode = feedMode,
@@ -25,7 +25,6 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
@@ -238,7 +237,7 @@ fun NotificationsScreen(
        }
    }

-    Column(modifier = Modifier.fillMaxSize()) {
+    ReadingColumn {
        FeedHeader(
            title = "Notifications",
            connectedRelayCount = connectedRelays.size,
@@ -0,0 +1,67 @@
+/*
+ * Copyright (c) 2025 Vitor Pamplona
+ *
+ * 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 com.vitorpamplona.amethyst.desktop.ui
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+
+/**
+ * Maximum reading width for single-pane content screens. Matches the
+ * comfortable column width used by Twitter / Mastodon / Threads on desktop —
+ * wider than a book column (which tops out around 600 dp), narrower than a
+ * full-window feed, so cards don't stretch disproportionately on 4K displays.
+ */
+val DefaultReadingWidth: Dp = 720.dp
+
+/**
+ * A top-level content scaffold that caps width and centers its column on wide
+ * displays. Each feed / list / profile screen wraps its contents in this so
+ * cards maintain a consistent proportion across the whole app.
+ *
+ * Not used by:
+ * - Messages (two-pane layout with its own sizing)
+ * - Article Reader (has its own narrower reading-width logic)
+ * - Editor / Chess / Relay Dashboard (rely on full width for tools / boards)
+ */
+@Composable
+fun ReadingColumn(
+    modifier: Modifier = Modifier,
+    maxWidth: Dp = DefaultReadingWidth,
+    content: @Composable ColumnScope.() -> Unit,
+) {
+    Box(
+        modifier = Modifier.fillMaxSize(),
+        contentAlignment = Alignment.TopCenter,
+    ) {
+        Column(
+            modifier = modifier.fillMaxSize().widthIn(max = maxWidth),
+            content = content,
+        )
+    }
+}
@@ -26,7 +26,6 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
@@ -288,7 +287,7 @@ fun ReadsScreen(
        }
    }

-    Column(modifier = Modifier.fillMaxSize()) {
+    ReadingColumn {
        // Header — Messages-style: tabs left, refresh right. The selected tab
        // (Following / Global) acts as the screen title, so no separate label.
        Row(
@@ -34,9 +34,11 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -289,10 +291,17 @@ fun SearchScreen(
        focusRequester.requestFocus()
    }

+    androidx.compose.foundation.layout.Box(
+        modifier =
+            androidx.compose.ui.Modifier
+                .fillMaxSize(),
+        contentAlignment = androidx.compose.ui.Alignment.TopCenter,
+    ) {
        Column(
            modifier =
                modifier
                    .fillMaxSize()
+                    .widthIn(max = DefaultReadingWidth)
                    .onPreviewKeyEvent { event ->
                        if (event.type != KeyEventType.KeyDown) return@onPreviewKeyEvent false
                        when (event.key) {
@@ -335,6 +344,7 @@ fun SearchScreen(
                modifier =
                    Modifier
                        .fillMaxWidth()
+                        .heightIn(min = 48.dp)
                        .padding(horizontal = 12.dp, vertical = 8.dp),
                horizontalArrangement = Arrangement.SpaceBetween,
                verticalAlignment = Alignment.CenterVertically,
@@ -512,6 +522,7 @@ fun SearchScreen(
                )
            }
        }
+    }
 }

@Composable
@@ -198,7 +198,7 @@ fun ThreadScreen(
    val replyNotes = threadNotes.filter { it.idHex != noteId }

    Box(modifier = Modifier.fillMaxSize()) {
-        Column(modifier = Modifier.fillMaxSize()) {
+        ReadingColumn {
            // Header — Messages-style: compact row with back + titleMedium
            Row(
                modifier = Modifier.fillMaxWidth().padding(horizontal = 12.dp, vertical = 8.dp),
@@ -36,6 +36,7 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.lazy.rememberLazyListState
@@ -115,6 +116,7 @@ fun UserProfileScreen(
    nwcConnection: com.vitorpamplona.quartz.nip47WalletConnect.Nip47WalletConnect.Nip47URINorm? = null,
    subscriptionsCoordinator: DesktopRelaySubscriptionsCoordinator? = null,
    onBack: () -> Unit,
+    canGoBack: Boolean = false,
    onCompose: () -> Unit = {},
    onNavigateToProfile: (String) -> Unit = {},
    onNavigateToThread: (String) -> Unit = {},
@@ -436,7 +438,8 @@ fun UserProfileScreen(
        previousFirstVisibleItemScrollOffset = currentOffset
    }

-    Box(modifier = Modifier.fillMaxSize()) {
+    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.TopCenter) {
+        Box(modifier = Modifier.fillMaxSize().widthIn(max = DefaultReadingWidth)) {
            if (connectedRelays.isEmpty()) {
                LoadingState("Connecting to relays...")
            } else {
@@ -468,6 +471,10 @@ fun UserProfileScreen(
                            verticalAlignment = Alignment.CenterVertically,
                        ) {
                            Row(verticalAlignment = Alignment.CenterVertically) {
+                                // Back is shown only when stacked onto a nav stack (e.g.
+                                // clicked a user in the feed). Top-level "My Profile"
+                                // from the nav rail sets canGoBack = false so no arrow.
+                                if (canGoBack) {
                                    IconButton(onClick = onBack, modifier = Modifier.size(32.dp)) {
                                        Icon(
                                            MaterialSymbols.AutoMirrored.ArrowBack,
@@ -477,6 +484,7 @@ fun UserProfileScreen(
                                        )
                                    }
                                    Spacer(Modifier.width(8.dp))
+                                }
                                Text(
                                    "Profile",
                                    style = MaterialTheme.typography.titleMedium,
@@ -899,13 +907,20 @@ fun UserProfileScreen(
                        Modifier
                            .fillMaxWidth()
                            .background(MaterialTheme.colorScheme.surface.copy(alpha = 0.95f))
-                        .padding(horizontal = 8.dp, vertical = 4.dp),
+                            .padding(horizontal = 12.dp, vertical = 4.dp),
                    verticalAlignment = Alignment.CenterVertically,
                ) {
-                IconButton(onClick = onBack) {
-                    Icon(MaterialSymbols.AutoMirrored.ArrowBack, "Back")
+                    if (canGoBack) {
+                        IconButton(onClick = onBack, modifier = Modifier.size(32.dp)) {
+                            Icon(
+                                MaterialSymbols.AutoMirrored.ArrowBack,
+                                contentDescription = "Back",
+                                tint = MaterialTheme.colorScheme.primary,
+                                modifier = Modifier.size(20.dp),
+                            )
+                        }
+                        Spacer(Modifier.width(4.dp))
                    }
-                Spacer(Modifier.width(8.dp))
                    UserAvatar(
                        userHex = pubKeyHex,
                        pictureUrl = picture,
@@ -922,6 +937,7 @@ fun UserProfileScreen(
                }
            }
        }
+    }

    // Lightbox overlay
    lightboxState?.let { state ->
@@ -460,6 +460,7 @@ internal fun OverlayContent(
                nwcConnection = nwcConnection,
                subscriptionsCoordinator = subscriptionsCoordinator,
                onBack = onBack,
+                canGoBack = true,
                onCompose = onShowComposeDialog,
                onNavigateToProfile = onNavigateToProfile,
                onNavigateToThread = onNavigateToThread,
@@ -26,9 +26,9 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyColumn
@@ -72,15 +72,21 @@ fun MyHighlightsScreen(
    val scope = rememberCoroutineScope()
    var deleteTarget by remember { mutableStateOf<HighlightData?>(null) }

-    Column(modifier = Modifier.fillMaxSize()) {
+    com.vitorpamplona.amethyst.desktop.ui.ReadingColumn {
+        Row(
+            modifier =
+                Modifier
+                    .fillMaxWidth()
+                    .heightIn(min = 48.dp)
+                    .padding(horizontal = 12.dp, vertical = 8.dp),
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
            Text(
                "Highlights",
                style = MaterialTheme.typography.titleMedium,
                color = MaterialTheme.colorScheme.onBackground,
-            modifier = Modifier.padding(horizontal = 12.dp, vertical = 8.dp),
            )
-
-        Spacer(Modifier.height(8.dp))
+        }

        if (allHighlights.isEmpty()) {
            EmptyState(
@@ -160,8 +160,9 @@ fun NoteCard(
        modifier = modifier.fillMaxWidth(),
        colors =
            CardDefaults.cardColors(
-                containerColor = MaterialTheme.colorScheme.surfaceVariant,
+                containerColor = MaterialTheme.colorScheme.surface,
            ),
+        elevation = CardDefaults.cardElevation(defaultElevation = 1.dp),
    ) {
        Column(modifier = Modifier.padding(12.dp)) {
            // Header + text area — clickable to navigate to thread