feat(ui): move PoW, OTS and location pills to the note header's first line

Restyle DisplayPoW, DisplayOts and DisplayLocation as compact squared
chips via a new shared HeaderPill composable, matching the relay
information pills in the NIP-29 chat headers (which now reuse the same
composable). Move the three pills from SecondUserInfoRow to
FirstUserInfoRow in NoteCompose, and shrink the secondary markers on
that line (boosted, hashtag, community, draft, edited, expiration,
pinned, private-rumor) to 12sp/smaller icons since the row now carries
more information.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01AgEpNtwnetPhETXQSdq4b5

amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/NoteCompose.kt

@@ -761,7 +761,6 @@ fun InnerNoteWithReactions(
             if (showSecondRow) {
                 SecondUserInfoRow(
                     baseNote,
-                    editState,
                     accountViewModel,
                     nav,
                 )
@@ -883,7 +882,6 @@ fun NoteBody(
     if (showSecondRow) {
         SecondUserInfoRow(
             baseNote,
-            editState,
             accountViewModel,
             nav,
         )
@@ -1737,7 +1735,6 @@ fun ReplyNoteComposition(
 @Composable
 fun SecondUserInfoRow(
     note: Note,
-    editState: State<GenericLoadable<EditState>>,
     accountViewModel: AccountViewModel,
     nav: INav,
 ) {
@@ -1756,25 +1753,11 @@ fun SecondUserInfoRow(
             }
         }
 
-        val geo = remember(noteEvent) { noteEvent.geoHashOrScope() }
-        if (geo != null) {
-            Spacer(StdHorzSpacer)
-            DisplayLocation(geo, accountViewModel, nav)
-        }
-
         val baseReward = remember(noteEvent) { noteEvent.bountyBaseReward()?.let { Reward(it) } }
         if (baseReward != null) {
             Spacer(StdHorzSpacer)
             DisplayReward(baseReward, note, accountViewModel, nav)
         }
-
-        val pow = remember(noteEvent) { noteEvent.strongPoWOrNull() }
-        if (pow != null) {
-            Spacer(StdHorzSpacer)
-            DisplayPoW(pow)
-        }
-
-        DisplayOtsIfInOriginal(note, editState, accountViewModel)
     }
 }
 
@@ -1786,13 +1769,14 @@ fun DisplayExpiration(expirationDate: Long) {
         Icon(
             symbol = MaterialSymbols.Timer,
             contentDescription = stringRes(R.string.expiration_date_label),
-            modifier = Modifier.padding(start = 5.dp).size(15.dp),
+            modifier = Modifier.padding(start = 5.dp).size(12.dp),
             tint = MaterialTheme.colorScheme.placeholderText,
         )
         val context = LocalContext.current
         Text(
             text = timeAheadNoDot(expirationDate, context),
             color = MaterialTheme.colorScheme.placeholderText,
+            fontSize = Font12SP,
             maxLines = 1,
             modifier = Modifier.padding(start = 3.dp),
         )
@@ -1819,6 +1803,7 @@ fun DisplayDraft() {
     Text(
         "Draft",
         fontWeight = FontWeight.Bold,
+        fontSize = Font12SP,
         color = MaterialTheme.colorScheme.placeholderText,
         maxLines = 1,
         modifier = HalfStartPadding,
@@ -1919,6 +1904,22 @@ fun FirstUserInfoRow(
             PinnedMark()
         }
 
+        val noteEvent = baseNote.event
+
+        val geo = remember(noteEvent) { noteEvent?.geoHashOrScope() }
+        if (geo != null) {
+            Spacer(StdHorzSpacer)
+            DisplayLocation(geo, accountViewModel, nav)
+        }
+
+        val pow = remember(noteEvent) { noteEvent?.strongPoWOrNull() }
+        if (pow != null) {
+            Spacer(StdHorzSpacer)
+            DisplayPoW(pow)
+        }
+
+        DisplayOtsIfInOriginal(baseNote, editState, accountViewModel)
+
         Expiration(baseNote)
 
         JumpToParentReplyButton(baseNote, accountViewModel, nav)
@@ -1938,7 +1939,7 @@ fun PinnedMark() {
     Icon(
         symbol = MaterialSymbols.PushPin,
         contentDescription = stringRes(R.string.pinned_notes),
-        modifier = Modifier.padding(start = 5.dp).size(16.dp),
+        modifier = Modifier.padding(start = 5.dp).size(14.dp),
         tint = MaterialTheme.colorScheme.placeholderText,
     )
 }
@@ -1948,7 +1949,7 @@ fun PrivateRumorMark() {
     Icon(
         symbol = MaterialSymbols.Lock,
         contentDescription = stringRes(R.string.private_rumor_mark),
-        modifier = Modifier.padding(start = 5.dp).size(16.dp),
+        modifier = Modifier.padding(start = 5.dp).size(14.dp),
         tint = MaterialTheme.colorScheme.placeholderText,
     )
 }

amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/elements/BoostedMark.kt

@@ -26,6 +26,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.text.font.FontWeight
 import com.vitorpamplona.amethyst.R
 import com.vitorpamplona.amethyst.ui.stringRes
+import com.vitorpamplona.amethyst.ui.theme.Font12SP
 import com.vitorpamplona.amethyst.ui.theme.HalfStartPadding
 import com.vitorpamplona.amethyst.ui.theme.placeholderText
 
@@ -34,6 +35,7 @@ fun BoostedMark() {
     Text(
         stringRes(id = R.string.boosted),
         fontWeight = FontWeight.Bold,
+        fontSize = Font12SP,
         color = MaterialTheme.colorScheme.placeholderText,
         maxLines = 1,
         modifier = HalfStartPadding,

amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/elements/DisplayCommunity.kt

@@ -22,6 +22,7 @@ package com.vitorpamplona.amethyst.ui.note.elements
 
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.material3.LocalTextStyle
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -34,6 +35,7 @@ import com.vitorpamplona.amethyst.service.relayClient.reqCommand.event.observeNo
 import com.vitorpamplona.amethyst.ui.navigation.navs.INav
 import com.vitorpamplona.amethyst.ui.navigation.routes.Route
 import com.vitorpamplona.amethyst.ui.screen.loggedIn.AccountViewModel
+import com.vitorpamplona.amethyst.ui.theme.Font12SP
 import com.vitorpamplona.amethyst.ui.theme.HalfStartPadding
 import com.vitorpamplona.quartz.nip01Core.core.Address
 import com.vitorpamplona.quartz.nip72ModCommunities.communityAddress
@@ -64,6 +66,7 @@ private fun DisplayCommunity(
 
     ClickableTextColor(
         label,
+        style = LocalTextStyle.current.copy(fontSize = Font12SP),
         linkColor = MaterialTheme.colorScheme.primary.copy(alpha = 0.52f),
         overflow = TextOverflow.Ellipsis,
         maxLines = 1,

amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/elements/DisplayEditStatus.kt

@@ -30,6 +30,7 @@ import androidx.compose.ui.text.font.FontWeight
 import com.vitorpamplona.amethyst.R
 import com.vitorpamplona.amethyst.ui.note.types.EditState
 import com.vitorpamplona.amethyst.ui.stringRes
+import com.vitorpamplona.amethyst.ui.theme.Font12SP
 import com.vitorpamplona.amethyst.ui.theme.HalfStartPadding
 import com.vitorpamplona.amethyst.ui.theme.placeholderText
 
@@ -50,6 +51,7 @@ fun DisplayEditStatus(editState: EditState) {
             LocalTextStyle.current.copy(
                 color = MaterialTheme.colorScheme.placeholderText,
                 fontWeight = FontWeight.Bold,
+                fontSize = Font12SP,
             ),
         maxLines = 1,
         modifier = HalfStartPadding.clickable { editState.nextModification() },

amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/elements/DisplayHashtags.kt

@@ -23,6 +23,7 @@ package com.vitorpamplona.amethyst.ui.note.elements
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.material3.LocalTextStyle
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
@@ -38,6 +39,7 @@ import com.vitorpamplona.amethyst.model.Note
 import com.vitorpamplona.amethyst.ui.navigation.navs.INav
 import com.vitorpamplona.amethyst.ui.navigation.routes.Route
 import com.vitorpamplona.amethyst.ui.screen.loggedIn.AccountViewModel
+import com.vitorpamplona.amethyst.ui.theme.Font12SP
 import com.vitorpamplona.quartz.nip01Core.tags.hashtags.firstIsTaggedHashes
 import com.vitorpamplona.quartz.nip22Comments.CommentEvent
 import com.vitorpamplona.quartz.nip73ExternalIds.topics.HashtagId
@@ -82,6 +84,7 @@ private fun DisplayTagList(
 ) {
     ClickableTextColor(
         "#$firstTag",
+        style = LocalTextStyle.current.copy(fontSize = Font12SP),
         linkColor = MaterialTheme.colorScheme.primary.copy(alpha = 0.52f),
         overflow = TextOverflow.Ellipsis,
         maxLines = 1,

amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/elements/DisplayLocation.kt

@@ -20,20 +20,17 @@
  */
 package com.vitorpamplona.amethyst.ui.note.elements
 
-import androidx.compose.material3.LocalTextStyle
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.text.LinkAnnotation
-import androidx.compose.ui.text.buildAnnotatedString
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.withLink
+import com.vitorpamplona.amethyst.commons.icons.symbols.MaterialSymbols
 import com.vitorpamplona.amethyst.ui.navigation.navs.INav
 import com.vitorpamplona.amethyst.ui.navigation.routes.Route
 import com.vitorpamplona.amethyst.ui.note.creators.location.LoadCityName
 import com.vitorpamplona.amethyst.ui.screen.loggedIn.AccountViewModel
-import com.vitorpamplona.amethyst.ui.theme.Font14SP
 
+/**
+ * Compact pill showing the geohash a note is scoped to, resolved to a city
+ * name. Tapping it opens the geohash feed. Sits inline in note headers.
+ */
 @Composable
 fun DisplayLocation(
     geohashStr: String,
@@ -41,25 +38,10 @@ fun DisplayLocation(
     nav: INav,
 ) {
     LoadCityName(geohashStr) { cityName ->
-        Text(
-            text =
-                buildAnnotatedString {
-                    withLink(
-                        LinkAnnotation.Clickable("cityname") { nav.nav(Route.Geohash(geohashStr)) },
-                    ) {
-                        append(cityName)
-                    }
-                },
-            style =
-                LocalTextStyle.current.copy(
-                    color =
-                        MaterialTheme.colorScheme.primary.copy(
-                            alpha = 0.52f,
-                        ),
-                    fontSize = Font14SP,
-                    fontWeight = FontWeight.Bold,
-                ),
-            maxLines = 1,
+        HeaderPill(
+            symbol = MaterialSymbols.LocationOn,
+            text = cityName,
+            onClick = { nav.nav(Route.Geohash(geohashStr)) },
         )
     }
 }

amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/elements/DisplayOts.kt

@@ -20,27 +20,27 @@
  */
 package com.vitorpamplona.amethyst.ui.note.elements
 
-import androidx.compose.material3.LocalTextStyle
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.text.font.FontWeight
 import com.vitorpamplona.amethyst.R
-import com.vitorpamplona.amethyst.commons.ui.components.buildLinkString
+import com.vitorpamplona.amethyst.commons.icons.symbols.MaterialSymbols
 import com.vitorpamplona.amethyst.model.Note
 import com.vitorpamplona.amethyst.ui.note.LoadOts
 import com.vitorpamplona.amethyst.ui.note.timeAgoNoDot
 import com.vitorpamplona.amethyst.ui.screen.loggedIn.AccountViewModel
 import com.vitorpamplona.amethyst.ui.stringRes
-import com.vitorpamplona.amethyst.ui.theme.Font14SP
-import com.vitorpamplona.amethyst.ui.theme.lessImportantLink
+import com.vitorpamplona.amethyst.ui.theme.HalfStartPadding
 import java.text.SimpleDateFormat
 import java.util.Date
 
+/**
+ * Compact pill showing the note's NIP-03 OpenTimestamps proof: how long ago
+ * the note is proven to have existed. Tapping it explains the proof and shows
+ * the attested date. Sits inline in note headers.
+ */
 @Composable
 fun DisplayOts(
     note: Note,
@@ -60,31 +60,26 @@ fun DisplayOts(
                 )
             }
 
-            Text(
-                text =
-                    buildLinkString(stringRes(R.string.existed_since, timeStr)) {
-                        accountViewModel.toastManager.toast(
-                            R.string.ots_info_title,
-                            R.string.ots_info_description,
-                            SimpleDateFormat.getDateTimeInstance().format(Date(unixtimestamp * 1000)),
-                        )
-                    },
-                style =
-                    LocalTextStyle.current.copy(
-                        color = MaterialTheme.colorScheme.lessImportantLink,
-                        fontSize = Font14SP,
-                        fontWeight = FontWeight.Bold,
-                    ),
-                maxLines = 1,
+            HeaderPill(
+                symbol = MaterialSymbols.CheckCircle,
+                text = stringRes(R.string.existed_since, timeStr),
+                modifier = HalfStartPadding,
+                contentDescription = stringRes(R.string.ots_info_title),
+                onClick = {
+                    accountViewModel.toastManager.toast(
+                        R.string.ots_info_title,
+                        R.string.ots_info_description,
+                        SimpleDateFormat.getDateTimeInstance().format(Date(unixtimestamp * 1000)),
+                    )
+                },
             )
         },
         whenPending = {
-            Text(
-                stringRes(id = R.string.timestamp_pending_short),
-                color = MaterialTheme.colorScheme.lessImportantLink,
-                fontSize = Font14SP,
-                fontWeight = FontWeight.Bold,
-                maxLines = 1,
+            HeaderPill(
+                symbol = MaterialSymbols.Schedule,
+                text = stringRes(id = R.string.timestamp_pending_short),
+                modifier = HalfStartPadding,
+                contentDescription = stringRes(R.string.ots_info_title),
             )
         },
     )

amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/elements/DisplayPoW.kt

@@ -20,24 +20,9 @@
  */
 package com.vitorpamplona.amethyst.ui.note.elements
 
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-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.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
 import com.vitorpamplona.amethyst.R
-import com.vitorpamplona.amethyst.commons.icons.symbols.Icon
 import com.vitorpamplona.amethyst.commons.icons.symbols.MaterialSymbols
 import com.vitorpamplona.amethyst.ui.stringRes
 import com.vitorpamplona.amethyst.ui.theme.ThemeComparisonColumn
@@ -51,34 +36,15 @@ fun DisplayPoWPreview() {
 }
 
 /**
- * Compact pill showing the proof of work a received note carries: a bolt plus
+ * Compact pill showing the proof of work a received note carries: a gear plus
  * the difficulty in leading zero bits. Sits inline in note headers, so it
  * stays at text height.
  */
 @Composable
 fun DisplayPoW(pow: Int) {
-    Row(
-        verticalAlignment = Alignment.CenterVertically,
-        horizontalArrangement = Arrangement.spacedBy(2.dp),
-        modifier =
-            Modifier
-                .clip(RoundedCornerShape(50))
-                .background(MaterialTheme.colorScheme.secondaryContainer)
-                .padding(horizontal = 5.dp, vertical = 1.dp),
-    ) {
-        Icon(
-            symbol = MaterialSymbols.Manufacturing,
-            contentDescription = stringRes(R.string.pow_settings_title),
-            tint = MaterialTheme.colorScheme.onSecondaryContainer,
-            modifier = Modifier.size(10.dp),
-        )
-        Text(
-            text = pow.toString(),
-            color = MaterialTheme.colorScheme.onSecondaryContainer,
-            fontSize = 10.sp,
-            lineHeight = 10.sp,
-            fontWeight = FontWeight.Bold,
-            maxLines = 1,
-        )
-    }
+    HeaderPill(
+        symbol = MaterialSymbols.Manufacturing,
+        text = pow.toString(),
+        contentDescription = stringRes(R.string.pow_settings_title),
+    )
 }

amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/elements/HeaderPill.kt

@@ -0,0 +1,79 @@
+/*
+ * 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.ui.note.elements
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import com.vitorpamplona.amethyst.commons.icons.symbols.Icon
+import com.vitorpamplona.amethyst.commons.icons.symbols.MaterialSymbol
+
+/**
+ * Compact squared chip for note-header metadata (PoW, OTS, location, relay
+ * hosts, ...). Matches the relay information pills used in the NIP-29 chat
+ * headers so all header badges share one look: a small icon plus a short
+ * label on a secondary-container surface with slightly rounded corners.
+ */
+@Composable
+fun HeaderPill(
+    symbol: MaterialSymbol,
+    text: String,
+    modifier: Modifier = Modifier,
+    contentDescription: String? = null,
+    onClick: (() -> Unit)? = null,
+) {
+    Surface(
+        shape = RoundedCornerShape(6.dp),
+        color = MaterialTheme.colorScheme.secondaryContainer,
+        modifier = if (onClick != null) modifier.clickable(onClick = onClick) else modifier,
+    ) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(3.dp),
+            modifier = Modifier.padding(horizontal = 6.dp, vertical = 2.dp),
+        ) {
+            Icon(
+                symbol = symbol,
+                contentDescription = contentDescription,
+                tint = MaterialTheme.colorScheme.onSecondaryContainer,
+                modifier = Modifier.size(11.dp),
+            )
+            Text(
+                text = text,
+                style = MaterialTheme.typography.labelSmall,
+                color = MaterialTheme.colorScheme.onSecondaryContainer,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+            )
+        }
+    }
+}

amethyst/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/chats/rooms/ChatroomHeaderCompose.kt

@@ -20,20 +20,14 @@
  */
 package com.vitorpamplona.amethyst.ui.screen.loggedIn.chats.rooms
 
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.DropdownMenu
 import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.LocalTextStyle
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
@@ -78,6 +72,7 @@ import com.vitorpamplona.amethyst.ui.note.LoadDecryptedContentOrNull
 import com.vitorpamplona.amethyst.ui.note.LoadPublicChatChannel
 import com.vitorpamplona.amethyst.ui.note.NonClickableUserPictures
 import com.vitorpamplona.amethyst.ui.note.ObserveDraftEvent
+import com.vitorpamplona.amethyst.ui.note.elements.HeaderPill
 import com.vitorpamplona.amethyst.ui.note.elements.TimeAgoStyle
 import com.vitorpamplona.amethyst.ui.note.elements.ToggleableTimeAgoText
 import com.vitorpamplona.amethyst.ui.screen.loggedIn.AccountViewModel
@@ -453,31 +448,11 @@ private fun RelayNameChip(
     label: String,
     onClick: () -> Unit,
 ) {
-    Surface(
-        shape = RoundedCornerShape(6.dp),
-        color = MaterialTheme.colorScheme.secondaryContainer,
-        modifier = Modifier.clickable(onClick = onClick),
-    ) {
-        Row(
-            verticalAlignment = Alignment.CenterVertically,
-            horizontalArrangement = Arrangement.spacedBy(3.dp),
-            modifier = Modifier.padding(horizontal = 6.dp, vertical = 2.dp),
-        ) {
-            Icon(
-                symbol = MaterialSymbols.Dns,
-                contentDescription = null,
-                tint = MaterialTheme.colorScheme.onSecondaryContainer,
-                modifier = Modifier.size(11.dp),
-            )
-            Text(
-                text = label,
-                style = MaterialTheme.typography.labelSmall,
-                color = MaterialTheme.colorScheme.onSecondaryContainer,
-                maxLines = 1,
-                overflow = TextOverflow.Ellipsis,
-            )
-        }
-    }
+    HeaderPill(
+        symbol = MaterialSymbols.Dns,
+        text = label,
+        onClick = onClick,
+    )
 }
 
 @Composable