From deb69e6014fcd8af141853b1b464f456c0663f80 Mon Sep 17 00:00:00 2001
From: ChiaraBm <chiara.bm04@gmail.com>
Date: Mon, 26 Jan 2026 16:49:25 +0100
Subject: [PATCH] Upgraded to ShadcnBlazor 1.0.10. Started implementing
 instance management ui page

---
 Moonlight.Frontend/Moonlight.Frontend.csproj  |  4 +-
 .../UI/Admin/Modals/CreateApiKeyDialog.razor  |  2 +-
 .../UI/Admin/Modals/CreateRoleDialog.razor    |  2 +-
 .../UI/Admin/Modals/CreateUserDialog.razor    |  4 +-
 .../UI/Admin/Modals/UpdateApiKeyDialog.razor  |  2 +-
 .../UI/Admin/Modals/UpdateRoleDialog.razor    |  2 +-
 .../UI/Admin/Modals/UpdateUserDialog.razor    |  4 +-
 .../UI/Admin/Views/Sys/Index.razor            |  2 +-
 .../UI/Admin/Views/Sys/Instance.razor         | 55 +++++++++++++++++++
 .../UI/Admin/Views/Sys/Themes/Create.razor    |  6 +-
 .../UI/Admin/Views/Sys/Themes/Update.razor    |  6 +-
 11 files changed, 72 insertions(+), 17 deletions(-)

diff --git a/Moonlight.Frontend/Moonlight.Frontend.csproj b/Moonlight.Frontend/Moonlight.Frontend.csproj
index 73eb2f4e..404f41d0 100644
--- a/Moonlight.Frontend/Moonlight.Frontend.csproj
+++ b/Moonlight.Frontend/Moonlight.Frontend.csproj
@@ -24,8 +24,8 @@
         <PackageReference Include="Microsoft.AspNetCore.Components.Authorization" Version="10.0.1"/>
         <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="10.0.1"/>
         <PackageReference Include="Riok.Mapperly" Version="4.3.1-next.0"/>
-        <PackageReference Include="ShadcnBlazor" Version="1.0.9" />
-        <PackageReference Include="ShadcnBlazor.Extras" Version="1.0.9" />
+        <PackageReference Include="ShadcnBlazor" Version="1.0.10" />
+        <PackageReference Include="ShadcnBlazor.Extras" Version="1.0.10" />
     </ItemGroup>
 
     <ItemGroup>
diff --git a/Moonlight.Frontend/UI/Admin/Modals/CreateApiKeyDialog.razor b/Moonlight.Frontend/UI/Admin/Modals/CreateApiKeyDialog.razor
index 24a3b735..0969beb7 100644
--- a/Moonlight.Frontend/UI/Admin/Modals/CreateApiKeyDialog.razor
+++ b/Moonlight.Frontend/UI/Admin/Modals/CreateApiKeyDialog.razor
@@ -21,7 +21,7 @@
 
         <div class="grid gap-2">
             <Label for="keyName">Name</Label>
-            <InputField @bind-Value="Request.Name" id="keyName" placeholder="My API key" />
+            <TextInputField @bind-Value="Request.Name" id="keyName" placeholder="My API key" />
         </div>
 
         <div class="grid gap-2">
diff --git a/Moonlight.Frontend/UI/Admin/Modals/CreateRoleDialog.razor b/Moonlight.Frontend/UI/Admin/Modals/CreateRoleDialog.razor
index 7d1d1248..2070f74b 100644
--- a/Moonlight.Frontend/UI/Admin/Modals/CreateRoleDialog.razor
+++ b/Moonlight.Frontend/UI/Admin/Modals/CreateRoleDialog.razor
@@ -25,7 +25,7 @@
 
         <div class="grid gap-2">
             <Label for="roleName">Name</Label>
-            <InputField
+            <TextInputField
                 @bind-Value="Request.Name"
                 id="roleName"
                 placeholder="My fancy role"/>
diff --git a/Moonlight.Frontend/UI/Admin/Modals/CreateUserDialog.razor b/Moonlight.Frontend/UI/Admin/Modals/CreateUserDialog.razor
index 55597eb5..523713a3 100644
--- a/Moonlight.Frontend/UI/Admin/Modals/CreateUserDialog.razor
+++ b/Moonlight.Frontend/UI/Admin/Modals/CreateUserDialog.razor
@@ -23,7 +23,7 @@
 
         <div class="grid gap-2">
             <Label for="username">Username</Label>
-            <InputField
+            <TextInputField
                 @bind-Value="Request.Username"
                 id="username"
                 placeholder="Name of the user"/>
@@ -31,7 +31,7 @@
 
         <div class="grid gap-2">
             <Label for="emailAddress">Email Address</Label>
-            <InputField
+            <TextInputField
                 @bind-Value="Request.Email"
                 id="emailAddress"
                 Type="email"
diff --git a/Moonlight.Frontend/UI/Admin/Modals/UpdateApiKeyDialog.razor b/Moonlight.Frontend/UI/Admin/Modals/UpdateApiKeyDialog.razor
index 10696f83..6f0db39f 100644
--- a/Moonlight.Frontend/UI/Admin/Modals/UpdateApiKeyDialog.razor
+++ b/Moonlight.Frontend/UI/Admin/Modals/UpdateApiKeyDialog.razor
@@ -23,7 +23,7 @@
 
         <div class="grid gap-2">
             <Label for="keyName">Name</Label>
-            <InputField @bind-Value="Request.Name" id="keyName" placeholder="My API key" />
+            <TextInputField @bind-Value="Request.Name" id="keyName" placeholder="My API key" />
         </div>
 
         <div class="grid gap-2">
diff --git a/Moonlight.Frontend/UI/Admin/Modals/UpdateRoleDialog.razor b/Moonlight.Frontend/UI/Admin/Modals/UpdateRoleDialog.razor
index 8878320f..f70fa989 100644
--- a/Moonlight.Frontend/UI/Admin/Modals/UpdateRoleDialog.razor
+++ b/Moonlight.Frontend/UI/Admin/Modals/UpdateRoleDialog.razor
@@ -27,7 +27,7 @@
 
         <div class="grid gap-2">
             <Label for="roleName">Name</Label>
-            <InputField
+            <TextInputField
                 @bind-Value="Request.Name"
                 id="roleName"
                 placeholder="My fancy role"/>
diff --git a/Moonlight.Frontend/UI/Admin/Modals/UpdateUserDialog.razor b/Moonlight.Frontend/UI/Admin/Modals/UpdateUserDialog.razor
index fd2e77a8..0418d1ea 100644
--- a/Moonlight.Frontend/UI/Admin/Modals/UpdateUserDialog.razor
+++ b/Moonlight.Frontend/UI/Admin/Modals/UpdateUserDialog.razor
@@ -25,7 +25,7 @@
 
         <div class="grid gap-2">
             <Label for="username">Username</Label>
-            <InputField
+            <TextInputField
                 @bind-Value="Request.Username"
                 id="username"
                 placeholder="Name of the user"/>
@@ -33,7 +33,7 @@
 
         <div class="grid gap-2">
             <Label for="emailAddress">Email Address</Label>
-            <InputField
+            <TextInputField
                 @bind-Value="Request.Email"
                 id="emailAddress"
                 Type="email"
diff --git a/Moonlight.Frontend/UI/Admin/Views/Sys/Index.razor b/Moonlight.Frontend/UI/Admin/Views/Sys/Index.razor
index 87c5422f..3675d5cc 100644
--- a/Moonlight.Frontend/UI/Admin/Views/Sys/Index.razor
+++ b/Moonlight.Frontend/UI/Admin/Views/Sys/Index.razor
@@ -42,7 +42,7 @@
                 <div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
                     <div class="col-span-1 grid gap-3">
                         <Label for="instance-name">Instance Name</Label>
-                        <InputField id="instance-name" />
+                        <TextInputField id="instance-name" />
                     </div>
                 </div>
             </CardContent>
diff --git a/Moonlight.Frontend/UI/Admin/Views/Sys/Instance.razor b/Moonlight.Frontend/UI/Admin/Views/Sys/Instance.razor
index 2e58a953..0b85ef54 100644
--- a/Moonlight.Frontend/UI/Admin/Views/Sys/Instance.razor
+++ b/Moonlight.Frontend/UI/Admin/Views/Sys/Instance.razor
@@ -1,7 +1,11 @@
 @using LucideBlazor
 @using Moonlight.Shared.Http.Responses.Admin
+@using ShadcnBlazor.Cards
 @using ShadcnBlazor.Emptys
+@using ShadcnBlazor.Buttons
 @using ShadcnBlazor.Extras.Common
+@using ShadcnBlazor.Fields
+@using ShadcnBlazor.Selects
 
 @inject HttpClient HttpClient
 
@@ -11,6 +15,57 @@
         {
             if (StatusDto.IsReachable)
             {
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-5">
+                    <Card ClassName="col-span-1">
+                        <CardHeader>
+                            <CardTitle>Version</CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                            <FieldGroup>
+                                <FieldSet>
+                                    <FieldLegend>Update instance</FieldLegend>
+                                    <FieldDescription>
+                                        Select the version you want to update to
+                                    </FieldDescription>
+                                    <Field>
+                                        <FieldLabel>
+                                            Version
+                                        </FieldLabel>
+                                        <Select DefaultValue="Testy">
+                                            <SelectTrigger>
+                                                <SelectValue/>
+                                            </SelectTrigger>
+                                            <SelectContent>
+                                                <SelectItem Value="Testy">Testy</SelectItem>
+                                            </SelectContent>
+                                        </Select>
+                                    </Field>
+                                </FieldSet>
+                                <Field Orientation="FieldOrientation.Horizontal">
+                                    <Button>Apply</Button>
+                                </Field>
+                            </FieldGroup>
+                        </CardContent>
+                    </Card>
+                    <Card ClassName="col-span-1">
+                        <CardHeader>
+                            <CardTitle>Plugins</CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                            <Empty>
+                                <EmptyHeader>
+                                    <EmptyMedia Variant="EmptyMediaVariant.Icon">
+                                        <SearchIcon />
+                                    </EmptyMedia>
+                                    <EmptyTitle>No Plugins found</EmptyTitle>
+                                    <EmptyDescription>
+                                        No plugins found in instance configuration
+                                    </EmptyDescription>
+                                </EmptyHeader>
+                            </Empty>
+                        </CardContent>
+                    </Card>
+                </div>
             }
             else
             {
diff --git a/Moonlight.Frontend/UI/Admin/Views/Sys/Themes/Create.razor b/Moonlight.Frontend/UI/Admin/Views/Sys/Themes/Create.razor
index 9f12a2e5..d328fc8e 100644
--- a/Moonlight.Frontend/UI/Admin/Views/Sys/Themes/Create.razor
+++ b/Moonlight.Frontend/UI/Admin/Views/Sys/Themes/Create.razor
@@ -55,7 +55,7 @@
                     <div class="grid grid-cols-1 lg:grid-cols-2 gap-5">
                         <div class="col-span-1 grid gap-2">
                             <Label for="themeName">Name</Label>
-                            <InputField
+                            <TextInputField
                                 @bind-Value="Request.Name"
                                 id="themeName"
                                 placeholder="My cool theme"/>
@@ -63,7 +63,7 @@
 
                         <div class="col-span-1 grid gap-2">
                             <Label for="themeVersion">Version</Label>
-                            <InputField
+                            <TextInputField
                                 @bind-Value="Request.Version"
                                 id="themeVersion"
                                 Type="text"
@@ -72,7 +72,7 @@
                         
                         <div class="col-span-1 grid gap-2">
                             <Label for="themeAuthor">Author</Label>
-                            <InputField
+                            <TextInputField
                                 @bind-Value="Request.Author"
                                 id="themeAuthor"
                                 Type="text"
diff --git a/Moonlight.Frontend/UI/Admin/Views/Sys/Themes/Update.razor b/Moonlight.Frontend/UI/Admin/Views/Sys/Themes/Update.razor
index 2de60d7e..800ee14c 100644
--- a/Moonlight.Frontend/UI/Admin/Views/Sys/Themes/Update.razor
+++ b/Moonlight.Frontend/UI/Admin/Views/Sys/Themes/Update.razor
@@ -59,7 +59,7 @@
                         <div class="grid grid-cols-1 lg:grid-cols-2 gap-5">
                             <div class="col-span-1 grid gap-2">
                                 <Label for="themeName">Name</Label>
-                                <InputField
+                                <TextInputField
                                     @bind-Value="Request.Name"
                                     id="themeName"
                                     placeholder="My cool theme"/>
@@ -67,7 +67,7 @@
 
                             <div class="col-span-1 grid gap-2">
                                 <Label for="themeVersion">Version</Label>
-                                <InputField
+                                <TextInputField
                                     @bind-Value="Request.Version"
                                     id="themeVersion"
                                     Type="text"
@@ -76,7 +76,7 @@
 
                             <div class="col-span-1 grid gap-2">
                                 <Label for="themeAuthor">Author</Label>
-                                <InputField
+                                <TextInputField
                                     @bind-Value="Request.Author"
                                     id="themeAuthor"
                                     Type="text"