a fork of iceshrimp.net but a tweaked frontend to my personal liking. waow
fediverse social-media social iceshrimp fedi
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

[frontend] Refactor notifications

authored by

pancakes and committed by
Iceshrimp development
f4d2fec6 6f55afe6

+80 -42
+68 -42
Iceshrimp.Frontend/Components/NotificationComponent.razor
··· 7 7 @inject NavigationManager NavigationManager 8 8 9 9 <div class="notification"> 10 - @if (NotificationResponse is { User: not null, Type: "like" or "follow" or "reaction" or "followRequestReceived" or "followRequestAccepted" }) 11 - { 12 - <img class="user-avatar" src="@NotificationResponse.User.AvatarUrl"/> 10 + <div class="notification-header"> 11 + @if (NotificationResponse is { User: not null }) 12 + { 13 + <img @onclick="OpenProfile" class="user-avatar" src="@NotificationResponse.User.AvatarUrl"/> 14 + } 15 + 13 16 <div class="notification-body"> 14 - <span class="display-name">@(NotificationResponse.User.DisplayName ?? NotificationResponse.User.Username)</span> 17 + @if (NotificationResponse is { User: not null }) 18 + { 19 + <span @onclick="OpenProfile" class="display-name">@(NotificationResponse.User.DisplayName ?? NotificationResponse.User.Username)</span> 20 + } 15 21 16 22 @if (NotificationResponse is { Note: not null, Type: "like", User: not null }) 17 23 { 18 - <span @onclick="OpenNote" class="notification-text"> 19 - @Loc["liked your post: "]<MfmText Text="@NotificationResponse.Note.Text"></MfmText> 20 - </span> 24 + <span class="notification-text">@Loc["liked your post: "]</span> 21 25 } 22 - @if (NotificationResponse is { Note: not null, Type: "reaction" }) 26 + else if (NotificationResponse is { Note: not null, Type: "reaction" }) 23 27 { 24 - <span @onclick="OpenNote" class="notification-text"> 25 - @Loc["reacted to your post: "] <MfmText Text="@NotificationResponse.Note.Text"></MfmText> 26 - </span> 28 + <span class="notification-text">@Loc["reacted to your post:"]</span> 27 29 } 28 - 29 - @if (NotificationResponse is { Type: "follow", User: not null }) 30 + else if (NotificationResponse is { Type: "follow", User: not null }) 30 31 { 31 - <span @onclick="OpenProfile" class="notification-text">@Loc["Followed you."]</span> 32 + <span class="notification-text">@Loc["Followed you."]</span> 32 33 } 33 - @if (NotificationResponse is { Type: "followRequestReceived" }) 34 + else if (NotificationResponse is { Type: "followRequestReceived" }) 34 35 { 35 - <div @onclick="OpenFollowRequests" class="notification-text">@Loc["Requested to follow you."]</div> 36 + <span class="notification-text">@Loc["Requested to follow you."]</span> 36 37 } 37 - @if (NotificationResponse is { Type: "followRequestAccepted" }) 38 + else if (NotificationResponse is { Type: "followRequestAccepted" }) 38 39 { 39 - <span @onclick="OpenProfile" class="notification-text">@Loc["Accepted your follow request."]</span> 40 + <span class="notification-text">@Loc["Accepted your follow request."]</span> 40 41 } 41 - </div> 42 - } 43 - @if (NotificationResponse is { Type: "mention" }) 44 - { 45 - <div @onclick="OpenNote" class="notification-note"> 46 - <Note NoteResponse="NotificationResponse.Note"/> 47 - </div> 48 - } 49 - @if (NotificationResponse is { Type: "reply" }) 50 - { 51 - <div @onclick="OpenNote" class="notification-note"> 52 - <Note NoteResponse="NotificationResponse.Note"/> 53 - </div> 54 - } 55 - @if (NotificationResponse is { Type: "renote" }) 56 - { 57 - <div @onclick="OpenNote" class="notification-body"> 58 - <div class="renote-info">@Loc["{0} boosted your post.", NotificationResponse.User!.DisplayName ?? NotificationResponse.User.Username]</div> 59 - <div class="notification-note"> 60 - <Note NoteResponse="NotificationResponse.Note"/> 61 - </div> 42 + else if (NotificationResponse is { Type: "mention" }) 43 + { 44 + <span class="notification-text">@Loc["mentioned you:"]</span> 45 + } 46 + else if (NotificationResponse is { Type: "reply" }) 47 + { 48 + <span class="notification-text">@Loc["replied to your post:"]</span> 49 + } 50 + else if (NotificationResponse is { Type: "renote" }) 51 + { 52 + <span class="notification-text">@Loc["boosted your post:"]</span> 53 + } 54 + else if (NotificationResponse is { Type: "quote" }) 55 + { 56 + <span class="notification-text">@Loc["quoted your post:"]</span> 57 + } 58 + else 59 + { 60 + <span class="notification-text"> 61 + <i>@Loc["unsupported notification type"]</i> 62 + </span> 63 + <details> 64 + <summary>view details</summary> 65 + <span>ID: @NotificationResponse.Id</span> 66 + <span>Type: @NotificationResponse.Type</span> 67 + </details> 68 + } 62 69 </div> 63 - } 64 - @if (NotificationResponse is { Type: "quote" }) 70 + 71 + <span>@RenderDate(DateTime.Parse(NotificationResponse.CreatedAt))</span> 72 + </div> 73 + 74 + @if (NotificationResponse is { Note: not null }) 65 75 { 66 76 <div @onclick="OpenNote" class="notification-note"> 67 77 <Note NoteResponse="NotificationResponse.Note"/> 68 78 </div> 69 79 } 70 - 71 80 </div> 72 81 73 82 @code { ··· 88 97 var username = $"@{NotificationResponse.User?.Username}"; 89 98 if (NotificationResponse.User?.Host != null) username += $"@{NotificationResponse.User.Host}"; 90 99 NavigationManager.NavigateTo($"/{username}"); 100 + } 101 + 102 + // TODO: Deduplicate this and NoteMetadata.RenderDate 103 + private string RenderDate(DateTime date) 104 + { 105 + var diff = DateTime.Now - date; 106 + return diff switch 107 + { 108 + { TotalDays: >= 365 } => Loc["{0}y", Math.Round(diff.TotalDays / 365)], 109 + { TotalDays: >= 30 } => Loc["{0}mo", Math.Round(diff.TotalDays / 30)], 110 + { TotalDays: >= 7 } => Loc["{0}d", Math.Round(diff.TotalDays / 7)], 111 + { TotalDays: >= 1 } => Loc["{0}d", Math.Round(diff.TotalDays)], 112 + { TotalHours: >= 1 } => Loc["{0}h", Math.Round(diff.TotalHours)], 113 + { TotalMinutes: >= 1 } => Loc["{0}m", Math.Round(diff.TotalMinutes)], 114 + { TotalSeconds: >= 1 } => Loc["{0}s", Math.Round(diff.TotalSeconds)], 115 + _ => Loc["Just now"] 116 + }; 91 117 } 92 118 }
+12
Iceshrimp.Frontend/Components/NotificationComponent.razor.css
··· 1 1 .notification { 2 2 display: flex; 3 + flex-direction: column; 3 4 background-color: var(--foreground-color); 4 5 border-radius: 0.75rem; 5 6 padding: 1rem 1rem 1rem; /* top, left-right, bottom*/ ··· 15 16 display: flex; 16 17 flex-direction: column; 17 18 width: 100%; 19 + border-style: solid; 20 + border-color: var(--highlight-color); 21 + border-width: 0.2rem; 22 + border-radius: 1.25rem; 23 + padding: 0.5rem; 24 + margin-top: 1rem; 18 25 } 19 26 20 27 .user-avatar { ··· 34 41 .notification-body { 35 42 display: flex; 36 43 flex-direction: column; 44 + width: 100%; 45 + } 46 + 47 + .notification-header { 48 + display: flex; 37 49 width: 100%; 38 50 }