[frontend] Add notification panel to appropriate places

Iceshrimp.Frontend/Components/NotificationList.razor

@@ -9,6 +9,7 @@
         {
             <NotificationComponent NotificationResponse="el" @key="el.Id"/>
         }
+        <ScrollEnd ManualLoad="LoadMore" IntersectionChange="LoadMore"></ScrollEnd>
     </div>
 }
 

Iceshrimp.Frontend/Components/NotificationList.razor.cs

@@ -11,6 +11,7 @@ public partial class NotificationList : IAsyncDisposable
     [Inject] private ApiService                 Api              { get; set; } = null!;
     private          List<NotificationResponse> Notifications    { get; set; } = [];
     private          State                      _state = State.Loading;
+    private          string?                    _minId;
 
     private enum State
     {
@@ -24,12 +25,17 @@ public partial class NotificationList : IAsyncDisposable
         try
         {
             var res = await Api.Notifications.GetNotifications(new PaginationQuery());
-            Notifications = res;
+            if (res.Count > 0)
-            foreach (var el in res)
             {
-                Console.WriteLine(el.Type);
+                Notifications = res;
+                _minId        = res.Last().Id;
+                foreach (var el in res)
+                {
+                    Console.WriteLine(el.Type);
+                }
             }
             
+
             _state = State.Init;
         }
         catch (ApiException)
@@ -38,6 +44,18 @@ public partial class NotificationList : IAsyncDisposable
         }
     }
 
+    private async Task LoadMore()
+    {
+        var pq  = new PaginationQuery { MaxId = _minId, Limit = 20 };
+        var res = await Api.Notifications.GetNotifications(pq);
+        if (res.Count > 0)
+        {
+            Notifications.AddRange(res);
+            _minId = res.Last().Id;
+            StateHasChanged();
+        }
+    }
+
     protected override async Task OnInitializedAsync()
     {
         StreamingService.Notification += OnNotification;

Iceshrimp.Frontend/Components/NotificationList.razor.css

@@ -3,4 +3,5 @@
     align-items: center;
     flex-direction: column;
     width: 100%;
+    overflow-x: scroll;;    
 }

Iceshrimp.Frontend/Layout/WidgetPanel.razor

@@ -1,5 +1,6 @@
+@using Iceshrimp.Frontend.Components
 <div class="widget-panel">
-    Widget Panel goes here.
+    <NotificationList /> 
 </div>
 @code {
     

Iceshrimp.Frontend/Layout/WidgetPanel.razor.css

@@ -1,7 +1,9 @@
 .widget-panel{
     display: flex;
-    max-width: 20rem;
+    max-width: 23rem;
-    min-width: 20rem;
+    min-width: 23rem;
     position: sticky;
     top: 0;
+    max-height: 100vh;
+    padding-left: 1rem;
 }

Iceshrimp.Frontend/Pages/NotificationPage.razor

@@ -0,0 +1,6 @@
+@page "/notifications"
+@using Iceshrimp.Frontend.Components
+<NotificationList />
+@code {
+    
+}