Fixed ui bugs, improved plugins page, added new 404 component

Moonlight/Shared/Components/Alerts/NotFoundAlert.razor

@@ -0,0 +1,31 @@
+<div class="mx-auto">
+    <div class="card">
+        <div class="d-flex justify-content-center pt-5">
+            <img height="300" width="300" src="/assets/media/svg/notfound.svg" alt="Not found"/>
+        </div>
+        <span class="card-title text-center fs-3">
+            <TL>The requested resource was not found</TL>
+        </span>
+        <p class="card-body text-center fs-4 text-gray-800">
+            <TL>We were not able to find the requested resource. This can have following reasons</TL>
+
+            <div class="mt-4 d-flex flex-column align-items-center">
+                <li class="d-flex align-items-center py-2">
+                    <span class="bullet me-5"></span> <TL>The resource was deleted</TL>
+                </li>
+                <li class="d-flex align-items-center py-2">
+                    <span class="bullet me-5"></span> <TL>You have to permission to access this resource</TL>
+                </li>
+                <li class="d-flex align-items-center py-2">
+                    <span class="bullet me-5"></span> <TL>You may have entered invalid data</TL>
+                </li>
+                <li class="d-flex align-items-center py-2">
+                    <span class="bullet me-5"></span> <TL>A unknown bug occured</TL>
+                </li>
+                <li class="d-flex align-items-center py-2">
+                    <span class="bullet me-5"></span> <TL>An api was down and not proper handled</TL>
+                </li>
+            </div>
+        </p>
+    </div>
+</div>

Moonlight/Shared/Components/Forms/WButton.razor

@@ -2,6 +2,7 @@
 {
     <button class="btn @(CssClasses)" @onclick="Do">
         @Text
+        @ChildContent
     </button>
 }
 else
@@ -20,14 +21,17 @@ else
     public string CssClasses { get; set; } = "btn-primary";
 
     [Parameter]
-    public string Text { get; set; } = "Mache was";
+    public string Text { get; set; } = "";
 
     [Parameter]
-    public string WorkingText { get; set; } = "Verarbeite...";
+    public string WorkingText { get; set; } = "";
     
     [Parameter]
     public Func<Task>? OnClick { get; set; }
 
+    [Parameter]
+    public RenderFragment ChildContent { get; set; }
+
     private async Task Do()
     {
         Working = true;

Moonlight/Shared/Views/Server/Index.razor

@@ -27,19 +27,7 @@
 <LazyLoader Load="LoadData">
     @if (CurrentServer == null)
     {
-        <div class="d-flex justify-content-center flex-center">
+        <NotFoundAlert />
-            <div class="card">
-                <img src="/assets/media/svg/nodata.svg" class="card-img-top w-50 mx-auto pt-5" alt="Not found image"/>
-                <div class="card-body text-center">
-                    <h1 class="card-title">
-                        <TL>Server not found</TL>
-                    </h1>
-                    <p class="card-text fs-4">
-                        <TL>A server with that id cannot be found or you have no access for this server</TL>
-                    </p>
-                </div>
-            </div>
-        </div>
     }
     else
     {

Moonlight/Shared/Views/Server/ServerAddons.razor

@@ -33,14 +33,14 @@
         </div>
         <div class="card-body">
             <LazyLoader @ref="PluginsLazyLoader" Load="LoadPlugins">
-                @foreach (var pluginsPart in Plugins.Chunk(3))
+                @if (Plugins.Any())
                 {
                     <div class="row">
-                        @foreach (var plugin in pluginsPart)
+                        @foreach (var plugin in Plugins)
                         {
-                            <div class="col">
+                            <div class="col-12 col-md-4 p-3">
-                                <div class="card p-2 card-bordered border-active">
+                                <div class="card bg-hover-secondary position-relative">
-                                    <div class="d-flex justify-content-center">
+                                    <div class="d-flex justify-content-center pt-5">
                                         <img height="100" width="100" src="@(plugin.IconUrl)" alt="@(plugin.Title)"/>
                                     </div>
                                     <div class="card-body">
@@ -48,10 +48,14 @@
                                         <p class="card-text">
                                             @(plugin.Description)
                                         </p>
-                                        <WButton Text="@(SmartTranslateService.Translate("Install"))"
+                                    </div>
-                                                 WorkingText="@(SmartTranslateService.Translate("Installing"))"
+                                    <div class="position-absolute top-0 end-0 mt-3 me-3">
-                                                 CssClasses="btn-primary"
+                                        <a href="https://modrinth.com/plugin/@(plugin.Slug)" class="btn btn-primary p-2" target="_blank">
+                                            <i class="ps-1 bx bx-sm bx-link"></i>
+                                        </a>
+                                        <WButton CssClasses="btn-success p-2"
                                                  OnClick="() => InstallPlugin(plugin)">
+                                            <i class="ps-1 bx bx-sm bx-download"></i>
                                         </WButton>
                                     </div>
                                 </div>
@@ -59,6 +63,10 @@
                         }
                     </div>
                 }
+                else
+                {
+                    <NotFoundAlert />
+                }
             </LazyLoader>
         </div>
     </div>
@@ -131,13 +139,7 @@ else
 
             await ToastService.CreateProcessToast("pluginDownload", "Preparing");
 
-            await AddonPluginService.InstallPlugin(fileAccess, version, project, delegate(string s)
+            await AddonPluginService.InstallPlugin(fileAccess, version, project, delegate(string s) { Task.Run(async () => { await ToastService.UpdateProcessToast("pluginDownload", s); }); });
-            {
-                Task.Run(async () =>
-                {
-                    await ToastService.UpdateProcessToast("pluginDownload", s);
-                });
-            });
 
             await ToastService.Success(
                 SmartTranslateService.Translate("Successfully installed " + project.Slug)
@@ -155,4 +157,3 @@ else
         }
     }
 }
-

Moonlight/Shared/Views/Server/ServerNavigation.razor

@@ -42,10 +42,7 @@
                 </div>
             </div>
         </div>
-        <div class="row">
+        <div class="row mt-3">
-            <div class="separator my-5"></div>
-        </div>
-        <div class="row">
             <div class="card card-body">
                 <div class="row align-items-center">
                     <div class="col fs-5">
@@ -107,8 +104,8 @@
             </div>
         </div>
         <div class="mt-5 row">
-            <div class="d-flex flex-column flex-md-row card card-body p-10">
+            <div class="d-flex flex-column flex-md-row card card-body p-5">
-                <ul class="nav nav-tabs nav-pills flex-row border-0 flex-md-column me-5 mb-3 mb-md-0 fs-6 min-w-lg-200px">
+                <ul class="nav nav-tabs nav-pills flex-row border-0 flex-md-column fs-6 pe-5 mb-5">
                     <li class="nav-item w-100 me-0 mb-md-2">
                         <a href="/server/@(CurrentServer.Uuid)/" class="nav-link w-100 btn btn-flex @(Index == 0 ? "active" : "") btn-active-light-primary">
                             <i class="bx bx-terminal bx-sm me-2"></i>

Moonlight/Shared/Views/Server/ServerSettings.razor

@@ -3,12 +3,14 @@
 @using Microsoft.AspNetCore.Components.Rendering
 
 <LazyLoader Load="Load">
-    <div class="accordion" id="serverSetting">
+    <div class="row">
         @foreach (var setting in Settings)
         {
+            <div class="col-12 col-md-6 p-3">
+                <div class="accordion" id="serverSetting@(setting.GetHashCode())">
                     <div class="accordion-item">
                         <h2 class="accordion-header" id="serverSetting-header@(setting.GetHashCode())">
-                    <button class="accordion-button fs-4 fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#serverSetting-body@(setting.GetHashCode())" aria-expanded="true" aria-controls="serverSetting-body@(setting.GetHashCode())">
+                            <button class="accordion-button fs-4 fw-semibold collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#serverSetting-body@(setting.GetHashCode())" aria-expanded="false" aria-controls="serverSetting-body@(setting.GetHashCode())">
                                 <TL>@(setting.Key)</TL>
                             </button>
                         </h2>
@@ -18,6 +20,8 @@
                             </div>
                         </div>
                     </div>
+                </div>
+            </div>
         }
     </div>
 </LazyLoader>