feat: working on configuring providers

.editorconfig

@@ -3,9 +3,6 @@ root = true
 # All files
 [*]
 indent_style = space
-
-# Xml files
-[*.xml]
 indent_size = 2
 
 # C# files
@@ -14,7 +11,6 @@ indent_size = 2
 #### Core EditorConfig Options ####
 
 # Indentation and spacing
-indent_size = 2
 tab_width = 2
 
 # New line preferences

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
   "cSpell.words": [
+    "onclick",
     "prerender",
     "rendermode"
   ]

src/AltGen.Web.Client/Components/Layout/Header.razor

@@ -0,0 +1,126 @@
+@rendermode @(new InteractiveWebAssemblyRenderMode(prerender: false))
+@inject IJSRuntime JsRuntime
+@implements IAsyncDisposable
+
+@* TODO: Create providers context.
+    - Load providers and present in table
+    - Allow form to add new provider
+    - Handle changing default provider
+ *@
+
+<header>
+  <button type="button" @onclick="HandleConfigButtonClick" class="config-button">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+      <path
+        d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z" />
+    </svg>
+  </button>
+</header>
+
+<dialog @ref="dialogElement">
+  <div class="providers-container">
+    <button type="button" @onclick="HandleCloseButtonClick" class="close-button">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+        <path
+          d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z" />
+      </svg>
+    </button>
+    <div class="providers-table-container">
+      <table>
+        <thead>
+          <tr>
+            <th>Provider</th>
+            <th>Provider Key</th>
+            <th>Default</th>
+          </tr>
+        </thead>
+        <tbody>
+          @for (int i = 0; i < 5; i++)
+          {
+            <tr>
+              <td>Provider @(i + 1)</td>
+              <td>Key @(i + 1)</td>
+              <td><input type="checkbox" /></td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    </div>
+    <div class="form-container">
+      <form>
+        <div class="form-group">
+          <label for="provider">Provider</label>
+          <input type="text" name="provider" id="provider">
+        </div>
+        <div class="form-group">
+          <label>Provider Key</label>
+          <input type="password" name="providerKey" id="providerKey">
+        </div>
+        <div class="form-group row">
+          <input type="checkbox" name="defaultProvider" id="defaultProvider">
+          <label for="">Default</label>
+        </div>
+        <button type="submit">Add</button>
+      </form>
+    </div>
+  </div>
+</dialog>
+
+@code {
+  private IJSObjectReference? _jsModule;
+  private ElementReference dialogElement;
+
+  protected override async Task OnAfterRenderAsync(bool firstRender)
+  {
+    if (firstRender)
+    {
+      _jsModule = await JsRuntime.InvokeAsync<IJSObjectReference>(JsFunctions.Import, ComponentAssets.JsModule);
+    }
+  }
+
+  private async Task HandleConfigButtonClick()
+  {
+    if (_jsModule is null)
+    {
+      return;
+    }
+
+    await _jsModule.InvokeVoidAsync(JsFunctions.ShowDialog, dialogElement);
+  }
+
+  private async Task HandleCloseButtonClick()
+  {
+    if (_jsModule is null)
+    {
+      return;
+    }
+
+    await _jsModule.InvokeVoidAsync(JsFunctions.CloseDialog, dialogElement);
+  }
+
+  async ValueTask IAsyncDisposable.DisposeAsync()
+  {
+    if (_jsModule is not null)
+    {
+      try
+      {
+        await _jsModule.DisposeAsync();
+      }
+      catch (JSDisconnectedException)
+      {
+      }
+    }
+  }
+
+  static class ComponentAssets
+  {
+    public const string JsModule = "./Components/Layout/Header.razor.js";
+  }
+
+  static class JsFunctions
+  {
+    public const string Import = "import";
+    public const string ShowDialog = "showDialog";
+    public const string CloseDialog = "closeDialog";
+  }
+}

src/AltGen.Web.Client/Components/Layout/Header.razor.css

@@ -0,0 +1,59 @@
+.config-button,
+.close-button{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+}
+
+.config-button svg,
+.close-button svg {
+  height: 1rem;
+  width: 1rem;
+}
+
+.providers-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  padding: 1.25rem;
+  position: relative;
+}
+
+.close-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+}
+
+.form-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.form-container form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.form-group.row {
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.form-group label {
+  font-size: 0.875rem;
+  font-weight: bold;
+}

src/AltGen.Web.Client/Components/Layout/Header.razor.js

@@ -0,0 +1,17 @@
+/**
+ * @summary Shows a dialog element by calling the `showModal` method on it.
+ * @param {HTMLDialogElement} dialog - The dialog element to show
+ * @returns {void}
+ */
+export function showDialog(dialog) {
+  dialog.showModal();
+}
+
+/**
+ * @summary Closes a dialog element by calling the `close` method on it.
+ * @param {HTMLDialogElement} dialog - The dialog element to close
+ * @returns {void}
+ */
+export function closeDialog(dialog) {
+  dialog.close();
+}

src/AltGen.Web.Client/Components/Pages/Home.razor

@@ -4,6 +4,10 @@
 @page "/"
 @rendermode @(new InteractiveWebAssemblyRenderMode(prerender: false))
 
+@* TODO: Present configured providers a dropdown.
+    If there is a default provider, use it.
+ *@
+
 <PageTitle>AltGen.Web</PageTitle>
 
 <h1>AI Generated Alt Text</h1>

src/AltGen.Web/Components/Layout/MainLayout.razor

@@ -1,6 +1,11 @@
 @inherits LayoutComponentBase
+@using AltGen.Web.Client.Components.Layout
 
-@Body
+<Header />
+
+<main>
+  @Body
+</main>
 
 <div id="blazor-error-ui" data-nosnippet>
   An unhandled error has occurred.

src/AltGen.Web/Components/Layout/MainLayout.razor.css

@@ -12,9 +12,9 @@
   z-index: 1000;
 }
 
-    #blazor-error-ui .dismiss {
+#blazor-error-ui .dismiss {
   cursor: pointer;
   position: absolute;
   right: 0.75rem;
   top: 0.5rem;
-    }
+}

src/AltGen.Web/Components/Pages/Error.razor

@@ -15,16 +15,18 @@
 
 <h3>Development Mode</h3>
 <p>
-    Swapping to <strong>Development</strong> environment will display more detailed information about the error that occurred.
+  Swapping to <strong>Development</strong> environment will display more detailed information about the error that
+  occurred.
 </p>
 <p>
   <strong>The Development environment shouldn't be enabled for deployed applications.</strong>
   It can result in displaying sensitive information from exceptions to end users.
-    For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
+  For local debugging, enable the <strong>Development</strong> environment by setting the
+  <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
   and restarting the app.
 </p>
 
-@code{
+@code {
   [CascadingParameter]
   private HttpContext? HttpContext { get; set; }
 

src/AltGen.Web/wwwroot/app.css

@@ -20,19 +20,25 @@ h1:focus {
   color: white;
 }
 
-    .blazor-error-boundary::after {
+.blazor-error-boundary::after {
   content: "An error has occurred."
-    }
+}
 
 .darker-border-checkbox.form-check-input {
   border-color: #929292;
 }
 
-.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
+.form-floating>.form-control-plaintext::placeholder,
+.form-floating>.form-control::placeholder {
   color: var(--bs-secondary-color);
   text-align: end;
 }
 
-.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
+.form-floating>.form-control-plaintext:focus::placeholder,
+.form-floating>.form-control:focus::placeholder {
   text-align: start;
 }
+
+dialog {
+  padding: 0;
+}