From 3d9c950b5871df5c0aff42cdb6185e4cdfe448e7 Mon Sep 17 00:00:00 2001
From: pancakes <trypancakes@tutanota.com>
Date: Tue, 25 Mar 2025 15:13:22 +1000
Subject: [PATCH] [frontend/components] Display username host-part consistently

---
 Iceshrimp.Frontend/Components/Note/NoteUserInfo.razor.css | 4 ----
 Iceshrimp.Frontend/Components/NoteLikeDetails.razor       | 8 +++++++-
 Iceshrimp.Frontend/Components/NoteRenoteDetails.razor     | 8 +++++++-
 Iceshrimp.Frontend/Components/ReactionDetails.razor       | 8 +++++++-
 Iceshrimp.Frontend/Components/UserProfileCard.razor       | 3 +--
 Iceshrimp.Frontend/Pages/ProfileView.razor                | 3 +--
 Iceshrimp.Frontend/wwwroot/css/app.css                    | 4 ++++
 7 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/Iceshrimp.Frontend/Components/Note/NoteUserInfo.razor.css b/Iceshrimp.Frontend/Components/Note/NoteUserInfo.razor.css
index ebc8b7f3..7538b6e7 100644
--- a/Iceshrimp.Frontend/Components/Note/NoteUserInfo.razor.css
+++ b/Iceshrimp.Frontend/Components/Note/NoteUserInfo.razor.css
@@ -8,10 +8,6 @@
         text-overflow: ellipsis;
         overflow: clip;
         white-space: wrap;
-
-        .host {
-            opacity: 0.5;
-        }
     }
     min-width: 2rem;
     overflow: clip;
diff --git a/Iceshrimp.Frontend/Components/NoteLikeDetails.razor b/Iceshrimp.Frontend/Components/NoteLikeDetails.razor
index 7c4066be..adc0c411 100644
--- a/Iceshrimp.Frontend/Components/NoteLikeDetails.razor
+++ b/Iceshrimp.Frontend/Components/NoteLikeDetails.razor
@@ -14,7 +14,13 @@
                 <UserAvatar User="@el"/>
                 <div class="name-section">
                     <div class="displayname"><UserDisplayName User="@el"/></div>
-                    <div class="username">@@@el.Username@(el.Host != null ? $"@{el.Host}" : "")</div>
+                    <div class="username">
+                        @@@el.Username
+                        @if (el.Host != null)
+                        {
+                            <span class="host">@@@el.Host</span>
+                        }
+                    </div>
                 </div>
             </div>
         }
diff --git a/Iceshrimp.Frontend/Components/NoteRenoteDetails.razor b/Iceshrimp.Frontend/Components/NoteRenoteDetails.razor
index 2666f1ef..32b98f2b 100644
--- a/Iceshrimp.Frontend/Components/NoteRenoteDetails.razor
+++ b/Iceshrimp.Frontend/Components/NoteRenoteDetails.razor
@@ -14,7 +14,13 @@
                 <UserAvatar User="@el"/>
                 <div class="name-section">
                     <div class="displayname"><UserDisplayName User="@el"/></div>
-                    <div class="username">@@@el.Username@(el.Host != null ? $"@{el.Host}" : "")</div>
+                    <div class="username">
+                        @@@el.Username
+                        @if (el.Host != null)
+                        {
+                            <span class="host">@@@el.Host</span>
+                        }
+                    </div>
                 </div>
             </div>
         }
diff --git a/Iceshrimp.Frontend/Components/ReactionDetails.razor b/Iceshrimp.Frontend/Components/ReactionDetails.razor
index 50200f3e..877b0934 100644
--- a/Iceshrimp.Frontend/Components/ReactionDetails.razor
+++ b/Iceshrimp.Frontend/Components/ReactionDetails.razor
@@ -14,7 +14,13 @@
                 <UserAvatar User="@el"/>
                 <div class="name-section">
                     <div class="displayname"><UserDisplayName User="@el"/></div>
-                    <div class="username">@@@el.Username@(el.Host != null ? $"@{el.Host}" : "")</div>
+                    <div class="username">
+                        @@@el.Username
+                        @if (el.Host != null)
+                        {
+                            <span class="host">@@@el.Host</span>
+                        }
+                    </div>
                 </div>
             </div>
         }
diff --git a/Iceshrimp.Frontend/Components/UserProfileCard.razor b/Iceshrimp.Frontend/Components/UserProfileCard.razor
index 9a1ab816..a4fa25e2 100644
--- a/Iceshrimp.Frontend/Components/UserProfileCard.razor
+++ b/Iceshrimp.Frontend/Components/UserProfileCard.razor
@@ -20,8 +20,7 @@
                     @@@User.Username
                     @if (User.Host != null)
                     {
-                        var host = $"@{User.Host}";
-                        @host
+                        <span class="host">@@@User.Host</span>
                     }
                 </div>
                 <div class="metadata">
diff --git a/Iceshrimp.Frontend/Pages/ProfileView.razor b/Iceshrimp.Frontend/Pages/ProfileView.razor
index f91be2d8..69d280c7 100644
--- a/Iceshrimp.Frontend/Pages/ProfileView.razor
+++ b/Iceshrimp.Frontend/Pages/ProfileView.razor
@@ -48,8 +48,7 @@
                             @@@UserResponse.Username
                             @if (UserResponse.Host != null)
                             {
-                                var host = $"@{UserResponse.Host}";
-                                @host
+                                <span class="host">@@@UserResponse.Host</span>
                             }
                             @if (Profile != null && Profile.Relations.HasFlag(Relations.FollowedBy))
                             {
diff --git a/Iceshrimp.Frontend/wwwroot/css/app.css b/Iceshrimp.Frontend/wwwroot/css/app.css
index 7b177cd9..db006fea 100644
--- a/Iceshrimp.Frontend/wwwroot/css/app.css
+++ b/Iceshrimp.Frontend/wwwroot/css/app.css
@@ -348,6 +348,10 @@ pre:has(code) {
     animation: 3s spinner infinite;
 }
 
+.host {
+    opacity: 0.5;
+}
+
 .lazy-component-target-internal.visible {
     transition: min-height 1s ease-in;
     min-height: 0;