[frontend] Implement basic notification display component

Iceshrimp.Frontend/Components/NotificationComponent.razor

@@ -0,0 +1,67 @@
+@using Iceshrimp.Shared.Schemas
+@using Iceshrimp.Frontend.Components.Note
+@using Iceshrimp.Frontend.Localization
+@using Microsoft.Extensions.Localization
+@inject IStringLocalizer<Localization> Loc;
+@inject NavigationManager              NavigationManager
+
+
+<div class="notification">
+    @if (NotificationResponse is { User: not null, Type: "like" or "follow" })
+    {
+        <img class="user-avatar" src="@NotificationResponse.User.AvatarUrl"/>
+        <div class="notification-body">
+            <span class="display-name">@(NotificationResponse.User.DisplayName ?? NotificationResponse.User.Username)</span>
+
+            @if (NotificationResponse is { Note: not null, Type: "like", User: not null })
+            {
+                <span @onclick="OpenNote" class="notification-text">
+                    @Loc["liked your post: \"{0}\"", NotificationResponse.Note.Text ?? NotificationResponse.Note.Cw ?? "This one!"]
+                </span>
+            }
+
+            @if (NotificationResponse is { Type: "follow", User: not null })
+            {
+                <span class="notification-text">@Loc["Followed you."]</span>
+            }
+        </div>
+    }
+    @if (NotificationResponse is { Type: "mention" })
+    {
+        <div class="notification-note">
+            <Note NoteResponse="NotificationResponse.Note"/>
+        </div>
+    }
+    @if (NotificationResponse is { Type: "reply" })
+    {
+        <div class="notification-note">
+            <Note NoteResponse="NotificationResponse.Note"/>
+        </div>
+    }
+    @if (NotificationResponse is { Type: "renote" })
+    {
+        <div class="notification-body">
+            <div class="renote-info">@Loc["{0} boosted your post.", NotificationResponse.User!.DisplayName ?? NotificationResponse.User.Username]</div>
+            <div class="notification-note">
+                <Note NoteResponse="NotificationResponse.Note"/>
+            </div>
+        </div>
+    }
+    @if (NotificationResponse is { Type: "quote" })
+    {
+        <div class="notification-note">
+            <Note NoteResponse="NotificationResponse.Note"/>
+        </div>
+    }
+
+</div>
+
+@code {
+    [Parameter] public required NotificationResponse NotificationResponse { get; set; }
+
+    private void OpenNote()
+    {
+        NavigationManager.NavigateTo($"/notes/{NotificationResponse.Note!.Id}");
+    }
+
+}

Iceshrimp.Frontend/Components/NotificationComponent.razor.css

@@ -0,0 +1,34 @@
+.notification {
+    display: flex;
+    background-color: var(--foreground-color);
+    border-radius: 0.75rem;
+    padding: 1rem 1rem 1rem; /* top, left-right, bottom*/
+    margin-bottom: 1rem;
+    max-width: 45rem;
+    width: 100%;
+}
+.notification-text {
+}
+.notification-note {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+.user-avatar {
+    border-radius: 8px;
+    object-fit: cover;
+    width: 3em;
+    height: 3em;
+    margin-right: 0.5em;
+}
+.display-name {
+    white-space: wrap;
+    text-overflow: ellipsis;
+    overflow: clip;
+}
+.notification-body {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}

Iceshrimp.Frontend/Components/NotificationList.razor

@@ -0,0 +1,28 @@
+@using Iceshrimp.Frontend.Core.Miscellaneous
+@using Iceshrimp.Frontend.Core.Services
+@using Iceshrimp.Shared.Schemas
+
+@if (_state == State.Init)
+{
+    <div class="scroller">
+        @foreach (var el in Notifications)
+        {
+            <NotificationComponent NotificationResponse="el" @key="el.Id"/>
+        }
+    </div>
+}
+
+@if (_state == State.Loading)
+{
+    <div>Loading!</div>
+}
+
+@if (_state == State.Error)
+{
+    <div>Something went wrong!</div>
+}
+
+@code {
+    
+}
+

Iceshrimp.Frontend/Components/NotificationList.razor.cs

@@ -0,0 +1,61 @@
+using Iceshrimp.Frontend.Core.Miscellaneous;
+using Iceshrimp.Frontend.Core.Services;
+using Iceshrimp.Shared.Schemas;
+using Microsoft.AspNetCore.Components;
+
+namespace Iceshrimp.Frontend.Components;
+
+public partial class NotificationList : IAsyncDisposable
+{
+    [Inject] private StreamingService           StreamingService { get; set; } = null!;
+    [Inject] private ApiService                 Api              { get; set; } = null!;
+    private          List<NotificationResponse> Notifications    { get; set; } = [];
+    private          State                      _state = State.Loading;
+
+    private enum State
+    {
+        Loading,
+        Error,
+        Init
+    }
+
+    private async Task GetNotifications()
+    {
+        try
+        {
+            var res = await Api.Notifications.GetNotifications(new PaginationQuery());
+            Notifications = res;
+            foreach (var el in res)
+            {
+                Console.WriteLine(el.Type);
+            }
+
+            _state = State.Init;
+        }
+        catch (ApiException)
+        {
+            _state = State.Error;
+        }
+    }
+
+    protected override async Task OnInitializedAsync()
+    {
+        StreamingService.Notification += OnNotification;
+        await StreamingService.Connect();
+        await GetNotifications();
+        StateHasChanged();
+    }
+
+    private async void OnNotification(object? _, NotificationResponse notificationResponse)
+    {
+        Notifications.Insert(0, notificationResponse);
+        StateHasChanged();
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        StreamingService.Notification -= OnNotification;
+        
+        await StreamingService.DisposeAsync();
+    }
+}

Iceshrimp.Frontend/Components/NotificationList.razor.css

@@ -0,0 +1,6 @@
+.scroller {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    width: 100%;
+}