a fork of iceshrimp.net but a tweaked frontend to my personal liking. waow
fediverse
social-media
social
iceshrimp
fedi
[frontend] Refactor notifications
authored by
pancakes
and committed by
Iceshrimp development
f4d2fec6
6f55afe6
+80
-42
+68
-42
Iceshrimp.Frontend/Components/NotificationComponent.razor
+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
+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
}