From d1dcc9365d5fc9194323b9689eff4e53ded0a968 Mon Sep 17 00:00:00 2001
From: Dominique Alexandre <d.alexandre@outlook.com>
Date: Fri, 27 Dec 2024 23:17:31 -0500
Subject: [PATCH 1/2] Clean the development page

---
 .../Settings/SettingsLayout.razor             |  1 +
 .../{UiClasses.razor => UiClasses.cs}         |  4 +-
 src/Sidekick.Common.Ui/wwwroot/css/app.css    | 38 ---------------
 src/Sidekick.Modules.Development/Home.razor   | 48 ++++++++-----------
 .../Layouts/DevelopmentLayout.razor           |  1 -
 src/Sidekick.Modules.Development/Tests.razor  |  6 +--
 .../Typography.razor                          | 12 -----
 7 files changed, 27 insertions(+), 83 deletions(-)
 rename src/Sidekick.Common.Ui/{UiClasses.razor => UiClasses.cs} (82%)
 delete mode 100644 src/Sidekick.Modules.Development/Typography.razor

diff --git a/src/Sidekick.Common.Blazor/Settings/SettingsLayout.razor b/src/Sidekick.Common.Blazor/Settings/SettingsLayout.razor
index 4524e5539..fbcbe517d 100644
--- a/src/Sidekick.Common.Blazor/Settings/SettingsLayout.razor
+++ b/src/Sidekick.Common.Blazor/Settings/SettingsLayout.razor
@@ -22,6 +22,7 @@
 
             @if (Debugger.IsAttached)
             {
+                <MenuItem Href="/development">Development</MenuItem>
                 <MenuItem Href="/settings/wealth">@Resources["WealthTracker"]</MenuItem>
             }
 
diff --git a/src/Sidekick.Common.Ui/UiClasses.razor b/src/Sidekick.Common.Ui/UiClasses.cs
similarity index 82%
rename from src/Sidekick.Common.Ui/UiClasses.razor
rename to src/Sidekick.Common.Ui/UiClasses.cs
index 4d9717c45..8a3ea4015 100644
--- a/src/Sidekick.Common.Ui/UiClasses.razor
+++ b/src/Sidekick.Common.Ui/UiClasses.cs
@@ -1,5 +1,7 @@
-@code {
+namespace Sidekick.Common.Ui;
 
+public static class UiClasses
+{
     public const string FocusClasses = "focus:outline-none focus:ring-2 focus:ring-offset-0 dark:focus:ring-violet-400";
 
     public const string FormInputClasses = $"border block rounded-lg dark:bg-zinc-700 dark:border-zinc-600 dark:placeholder-zinc-400 dark:text-white {FocusClasses}";
diff --git a/src/Sidekick.Common.Ui/wwwroot/css/app.css b/src/Sidekick.Common.Ui/wwwroot/css/app.css
index 73072351d..5b97b0c59 100644
--- a/src/Sidekick.Common.Ui/wwwroot/css/app.css
+++ b/src/Sidekick.Common.Ui/wwwroot/css/app.css
@@ -1419,18 +1419,10 @@ video {
   z-index: 30;
 }
 
-.col-span-4 {
-  grid-column: span 4 / span 4;
-}
-
 .col-span-6 {
   grid-column: span 6 / span 6;
 }
 
-.col-span-8 {
-  grid-column: span 8 / span 8;
-}
-
 .float-start {
   float: inline-start;
 }
@@ -3028,11 +3020,6 @@ video {
   background-color: rgb(255 0 0 / var(--tw-bg-opacity));
 }
 
-.bg-amber-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(180 83 9 / var(--tw-bg-opacity));
-}
-
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -3043,11 +3030,6 @@ video {
   background-color: rgb(29 78 216 / var(--tw-bg-opacity));
 }
 
-.bg-emerald-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(4 120 87 / var(--tw-bg-opacity));
-}
-
 .bg-fuchsia-700 {
   --tw-bg-opacity: 1;
   background-color: rgb(162 28 175 / var(--tw-bg-opacity));
@@ -3083,11 +3065,6 @@ video {
   background-color: rgb(127 29 29 / var(--tw-bg-opacity));
 }
 
-.bg-slate-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(51 65 85 / var(--tw-bg-opacity));
-}
-
 .bg-stone-800 {
   --tw-bg-opacity: 1;
   background-color: rgb(41 37 36 / var(--tw-bg-opacity));
@@ -4250,21 +4227,11 @@ video {
   border-color: rgb(87 83 78 / var(--tw-border-opacity));
 }
 
-.hover\:bg-amber-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(245 158 11 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-blue-500:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-emerald-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(16 185 129 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-fuchsia-500:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(217 70 239 / var(--tw-bg-opacity));
@@ -4275,11 +4242,6 @@ video {
   background-color: rgb(185 28 28 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-slate-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(100 116 139 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-stone-700:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(68 64 60 / var(--tw-bg-opacity));
diff --git a/src/Sidekick.Modules.Development/Home.razor b/src/Sidekick.Modules.Development/Home.razor
index a14341523..f9becbf77 100644
--- a/src/Sidekick.Modules.Development/Home.razor
+++ b/src/Sidekick.Modules.Development/Home.razor
@@ -7,48 +7,40 @@
 @layout DevelopmentLayout
 
 <AppContainer>
-    <div class="grid grid-cols-12 gap-3">
-        <div class="col-span-8">
-            <Heading2 Class="mb-3">Items</Heading2>
-            <FormTextarea @bind-Value="ItemText"/>
-            <div class="grid grid-cols-12 gap-3 mt-3">
-                <div class="col-span-6">
-                    <HomeButton Class="bg-blue-700 hover:bg-blue-500" OnClick="PriceCheck">Check Prices</HomeButton>
-                </div>
-                <div class="col-span-6">
-                    <HomeButton Class="bg-fuchsia-700 hover:bg-fuchsia-500" OnClick="MapCheck">Check Map</HomeButton>
-                </div>
+    <Fieldset Legend="Copy your item text here">
+        <FormTextarea @bind-Value="ItemText" />
+        <div class="grid grid-cols-12 gap-3 mt-3">
+            <div class="col-span-6">
+                <HomeButton Class="bg-blue-700 hover:bg-blue-500" OnClick="PriceCheck">Check Prices</HomeButton>
+            </div>
+            <div class="col-span-6">
+                <HomeButton Class="bg-fuchsia-700 hover:bg-fuchsia-500" OnClick="MapCheck">Check Map</HomeButton>
             </div>
         </div>
-        <div class="col-span-4">
-            <Heading2 Class="mb-3">Other Pages</Heading2>
-            <HomeButton Class="bg-emerald-700 hover:bg-emerald-500 mb-3" OnClick="@(() => NavigationManager.NavigateTo("/wealth"))">Wealth</HomeButton>
-            <HomeButton Class="bg-slate-700 hover:bg-slate-500 mb-3" OnClick="@(() => NavigationManager.NavigateTo("/settings"))">Settings</HomeButton>
-            <Heading2 Class="mb-3">Keybinds</Heading2>
-            <HomeButton Class="bg-amber-700 hover:bg-amber-500 mb-3" OnClick="RegisterHooks">Register Hooks</HomeButton>
-        </div>
-    </div>
+    </Fieldset>
+    <Fieldset Legend="Other sections">
+        <ButtonPrimary OnClick="@(() => NavigationManager.NavigateTo("/settings"))">Settings</ButtonPrimary>
+    </Fieldset>
 </AppContainer>
 
-@inject IKeyboardProvider KeyboardProvider
-
 @code {
 
     private string? ItemText { get; set; }
 
     private void PriceCheck()
     {
-        NavigationManager.NavigateTo($"/trade/{ItemText.EncodeBase64Url()}");
+        if (ItemText != null)
+        {
+            NavigationManager.NavigateTo($"/trade/{ItemText.EncodeBase64Url()}");
+        }
     }
 
     private void MapCheck()
     {
-        NavigationManager.NavigateTo($"/map/{ItemText.EncodeBase64Url()}");
-    }
-
-    private void RegisterHooks()
-    {
-        KeyboardProvider.RegisterHooks();
+        if (ItemText != null)
+        {
+            NavigationManager.NavigateTo($"/map/{ItemText.EncodeBase64Url()}");
+        }
     }
 
 }
diff --git a/src/Sidekick.Modules.Development/Layouts/DevelopmentLayout.razor b/src/Sidekick.Modules.Development/Layouts/DevelopmentLayout.razor
index 001edf8b2..cdf9a13d6 100644
--- a/src/Sidekick.Modules.Development/Layouts/DevelopmentLayout.razor
+++ b/src/Sidekick.Modules.Development/Layouts/DevelopmentLayout.razor
@@ -9,7 +9,6 @@
     <LeftContent>
         <MenuList>
             <MenuItem Href="/development">Development</MenuItem>
-            <MenuItem Href="/development/typography">Typography</MenuItem>
             <MenuItem Href="/development/tests">Tests</MenuItem>
         </MenuList>
     </LeftContent>
diff --git a/src/Sidekick.Modules.Development/Tests.razor b/src/Sidekick.Modules.Development/Tests.razor
index 48d462a8f..8b78fbcf3 100644
--- a/src/Sidekick.Modules.Development/Tests.razor
+++ b/src/Sidekick.Modules.Development/Tests.razor
@@ -4,9 +4,9 @@
 @inherits SidekickView
 
 <AppContainer>
-    <div class="flex items-center justify-center gap-2">
+    <Fieldset Legend="Custom actions">
         <ButtonPrimary OnClick="ThrowException">Throw an exception</ButtonPrimary>
-    </div>
+    </Fieldset>
 </AppContainer>
 
 @code {
@@ -14,7 +14,7 @@
     public void ThrowException()
     {
 #pragma warning disable S112 // General exceptions should never be thrown
-        throw new Exception("Developper test from the exception page.");
+        throw new Exception("[Development] This is a test exception.");
 #pragma warning restore S112 // General exceptions should never be thrown
     }
 
diff --git a/src/Sidekick.Modules.Development/Typography.razor b/src/Sidekick.Modules.Development/Typography.razor
deleted file mode 100644
index 95b71fe53..000000000
--- a/src/Sidekick.Modules.Development/Typography.razor
+++ /dev/null
@@ -1,12 +0,0 @@
-@page "/development/typography"
-@layout DevelopmentLayout
-@using Sidekick.Modules.Development.Layouts
-@inherits SidekickView
-
-<AppContainer>
-    <Heading1>Heading 1</Heading1>
-    <Heading2>Heading 2</Heading2>
-    <Heading3>Heading 3</Heading3>
-    <TextBase>Text Base</TextBase>
-    <TextCaption>Text Caption</TextCaption>
-</AppContainer>

From 9c4bb70368c1e7b5c6c5d41ce3376be3ca92ae5b Mon Sep 17 00:00:00 2001
From: Dominique Alexandre <d.alexandre@outlook.com>
Date: Sat, 28 Dec 2024 10:53:26 -0500
Subject: [PATCH 2/2] Add bind hooks in test page

---
 src/Sidekick.Modules.Development/Home.razor  |  1 -
 src/Sidekick.Modules.Development/Tests.razor | 15 +++++++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/Sidekick.Modules.Development/Home.razor b/src/Sidekick.Modules.Development/Home.razor
index f9becbf77..4ac6291e1 100644
--- a/src/Sidekick.Modules.Development/Home.razor
+++ b/src/Sidekick.Modules.Development/Home.razor
@@ -1,6 +1,5 @@
 @page "/development"
 @using Sidekick.Common.Extensions
-@using Sidekick.Common.Platform
 @using Sidekick.Modules.Development.Components
 @using Sidekick.Modules.Development.Layouts
 @inherits SidekickView
diff --git a/src/Sidekick.Modules.Development/Tests.razor b/src/Sidekick.Modules.Development/Tests.razor
index 8b78fbcf3..23a817061 100644
--- a/src/Sidekick.Modules.Development/Tests.razor
+++ b/src/Sidekick.Modules.Development/Tests.razor
@@ -1,21 +1,32 @@
 @page "/development/tests"
 @layout DevelopmentLayout
 @using Sidekick.Modules.Development.Layouts
+@using Sidekick.Common.Platform
 @inherits SidekickView
 
 <AppContainer>
     <Fieldset Legend="Custom actions">
-        <ButtonPrimary OnClick="ThrowException">Throw an exception</ButtonPrimary>
+        <div class="flex gap-3">
+            <ButtonPrimary OnClick="RegisterHooks">Bind keyboard hooks</ButtonPrimary>
+            <ButtonPrimary OnClick="ThrowException">Throw an exception</ButtonPrimary>
+        </div>
     </Fieldset>
 </AppContainer>
 
+@inject IKeyboardProvider KeyboardProvider
+
 @code {
 
-    public void ThrowException()
+    private void ThrowException()
     {
 #pragma warning disable S112 // General exceptions should never be thrown
         throw new Exception("[Development] This is a test exception.");
 #pragma warning restore S112 // General exceptions should never be thrown
     }
 
+    private void RegisterHooks()
+    {
+        KeyboardProvider.RegisterHooks();
+    }
+
 }