Chore/lib migrations

.github/workflows/_.yaml

@@ -45,9 +45,8 @@ jobs:
     - name: Publish
       if: inputs.publish
       working-directory: src/TabKeeper.UI.Wasm
-      shell: pwsh
       run: |
-        .\css.ps1 -publish
+        npm run css:publish
         dotnet publish
 
     - name: Push to Cloudflare Pages

Directory.Packages.props

@@ -6,18 +6,16 @@
   <!---->
   <!-- Packagges -->
   <ItemGroup>
-    <PackageVersion Include="Annular.Translate" Version="0.1.7-dev" />
     <PackageVersion Include="Blazored.LocalStorage" Version="4.5.0" />
     <PackageVersion Include="DynamicData" Version="9.1.2" />
     <PackageVersion Include="Flurl" Version="4.0.0" />
     <PackageVersion Include="Ignis.Components.HeadlessUI" Version="1.4.0" />
-    <PackageVersion Include="Ignis.Components.Reactivity" Version="1.4.0" />
     <PackageVersion Include="Ignis.Components.WebAssembly" Version="1.4.0" />
-    <PackageVersion Include="Ignis.Utils" Version="1.4.0" />
     <PackageVersion Include="Microsoft.AspNetCore.Components.WebAssembly" Version="9.0.2" />
     <PackageVersion Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="9.0.2" />
     <PackageVersion Include="Microsoft.Extensions.Options" Version="8.0.2" />
     <PackageVersion Include="Microsoft.Extensions.Options.ConfigurationExtensions" Version="8.0.0" />
+    <PackageVersion Include="Noctilocus" Version="1.0.0-beta.5" />
     <PackageVersion Include="OneOf" Version="3.0.271" />
     <PackageVersion Include="P41.FontAwesome" Version="6.6.0.2" />
     <PackageVersion Include="System.Reactive" Version="6.0.1" />

src/TabKeeper.UI.Wasm/Common/Mixins/TranslateMixins.cs

@@ -8,7 +8,7 @@ public static class TranslateMixins
     public static IDisposable Update(this TranslateService translate, IComponent component)
     {
         if (component is not IHandleEvent handleEvent)
-            return Disposable.Empty;
+            return System.Reactive.Disposables.Disposable.Empty;
 
         var @ref = new WeakReference<IHandleEvent>(handleEvent);
 

src/TabKeeper.UI.Wasm/Common/ThemeModule.cs

@@ -18,21 +18,27 @@ public static Task Import(string? url = null)
         return JSHost.ImportAsync(name, url ?? "../js/theme.js");
     }
 
+    [JSImport("configure", name)]
+    public static partial void Configure([JSMarshalAs<JSType.Any>] object? options);
+
     [JSImport("updateDom", name)]
     public static partial void UpdateDom();
 
-    [JSImport("toggle", name)]
-    public static partial void Toggle();
+    [JSImport("getTheme", name)]
+    public static partial string GetTheme();
+
+    [JSImport("setTheme", name)]
+    public static partial string SetTheme([JSMarshalAs<JSType.String>] string theme);
+
+    [JSImport("setAuto", name)]
+    public static partial void SetAuto();
 
     [JSImport("setDark", name)]
     public static partial void SetDark();
 
     [JSImport("setLight", name)]
     public static partial void SetLight();
 
-    [JSImport("setAuto", name)]
-    public static partial void SetAuto();
-
-    [JSImport("getTheme", name)]
-    public static partial string GetTheme();
+    [JSImport("toggle", name)]
+    public static partial void Toggle();
 }

src/TabKeeper.UI.Wasm/Components/Button.razor

@@ -44,10 +44,9 @@
     [Parameter]
     public bool PreventDefault { get; set; }
 
-    private string TypeAttribute => this.GetAttributeOrDefault<string>("type", "button");
-
-    private bool DisabledAttribute => this.GetAttributeOrDefault<bool>("disabled", false) || IsLoading;
+    private string TypeAttribute => this.Type("button");
 
-    private string? ClassAttribute
-        => Css.Class(this.TryGetAttribute<string>("class"), ("cursor-not-allowed relative", IsLoading));
+    private bool DisabledAttribute => this.Disabled() || IsLoading;
+
+    private string? ClassAttribute => this.Class(("cursor-not-allowed relative", IsLoading));
 }

src/TabKeeper.UI.Wasm/Components/Dialog.razor

@@ -0,0 +1,121 @@
+@using Ignis.Components
+@using Ignis.Components.HeadlessUI
+
+@inherits CoreComponent
+@implements IAsyncDisposable
+
+<dialog id="@Id" class="@this.Class()" @onclose="OnClose" @oncancel="OnClose" @onclick="OnClick">
+    @if (IsOpen)
+    {
+        @(ChildContent?.Invoke(this))
+    }
+</dialog>
+
+@code {
+    private Lazy<ValueTask<IJSObjectReference>> dialog;
+    private IDisposable? currentAction;
+
+    [Parameter]
+    public bool IsOpen { get; set; }
+
+    [Parameter]
+    public EventCallback<bool> IsOpenChanged { get; set; }
+
+    [Parameter]
+    public IObservable<bool>? IsOpenWhen { get; set; }
+
+    [Parameter]
+    public IObservable<Nothing>? UpdateWhen { get; set; }
+
+    [Parameter]
+    public RenderFragment<Dialog>? ChildContent { get; set; }
+
+    [Parameter]
+    public EventCallback<MouseEventArgs> OnClick { get; set; }
+
+    [Parameter]
+    public EventCallback OnDismiss { get; set; }
+
+    [Parameter]
+    public EventCallback OnShow { get; set; }
+
+    public Dialog(IJSRuntime jsRuntime)
+    {
+        dialog = new(() => jsRuntime.InvokeAsync<IJSObjectReference>("document.getElementById", Id));
+    }
+
+    public void Open()
+    {
+        if (IsOpen || dialog is null) return;
+
+        currentAction?.Dispose();
+        currentAction = R3.Observable
+            .FromAsync(async ct => await (await dialog.Value).InvokeVoidAsync("showModal", ct))
+            .Subscribe(this, static (_, state) =>
+            {
+                state.IsOpen = true;
+                state.IsOpenChanged.InvokeAsync(true);
+                state.StateHasChanged();
+                state.OnShow.InvokeAsync();
+            });
+    }
+
+    public void Close()
+    {
+        if (!IsOpen || dialog is null) return;
+
+        currentAction?.Dispose();
+        currentAction = R3.Observable
+            .FromAsync(async ct => await (await dialog.Value).InvokeVoidAsync("close", ct))
+            .Subscribe(this, static (_, state) =>
+            {
+                state.IsOpen = false;
+                state.IsOpenChanged.InvokeAsync(false);
+                state.StateHasChanged();
+            });
+    }
+
+    public void Toggle()
+    {
+        if (IsOpen) Close();
+        else Open();
+    }
+
+    protected void OnClose()
+    {
+        IsOpen = false;
+        IsOpenChanged.InvokeAsync(IsOpen);
+        OnDismiss.InvokeAsync();
+    }
+
+    protected override void OnInitialized()
+    {
+        if (IsOpenWhen is { })
+        {
+            IsOpenWhen
+                .Subscribe(open =>
+                {
+                    if (open)
+                        Open();
+                    else
+                        Close();
+                })
+                .DisposeWith(this);
+        }
+        if (UpdateWhen is { })
+        {
+            UpdateWhen
+                .Subscribe(_ => Update())
+                .DisposeWith(this);
+        }
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        if (dialog.IsValueCreated is false)
+        {
+            return;
+        }
+        await (await dialog.Value).DisposeAsync();
+    }
+}

src/TabKeeper.UI.Wasm/Components/DropdownContent.razor

@@ -1,4 +1,5 @@
-@inherits CoreComponent
+@using Core.Common
+@inherits CoreComponent
 
 <Transition AsComponent="typeof(Fragment)"
             Enter="transition ease-out duration-100"
@@ -8,7 +9,7 @@
             LeaveFrom="transform opacity-100 scale-100"
             LeaveTo="transform opacity-0 scale-95"
             Context="transition">
-    <MenuItems class="@Css.Class("absolute space-y-1 rounded-md bg-tertiary-container shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none", this.Class(), GetPosition(Anchor), transition.CssClass)">
+    <MenuItems class="@Bl.Class("absolute space-y-1 rounded-md bg-tertiary-container shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none", this.Class(), GetPosition(Anchor), transition.CssClass)">
         @ChildContent
     </MenuItems>
 </Transition>
@@ -20,7 +21,7 @@
     [Parameter]
     public Anchor Anchor { get; set; } = Anchor.Bottom | Anchor.Left;
 
-    private static string GetPosition(Anchor anchor) => @Css.Class(
+    private static string GetPosition(Anchor anchor) => @Bl.Class(
         ("bottom-full mb-2", anchor.HasFlag(Anchor.Top)),
         ("top-full mt-2", anchor.HasFlag(Anchor.Bottom)),
         ("left-0", anchor.HasFlag(Anchor.Left)),

src/TabKeeper.UI.Wasm/Components/FluentValidator.cs

@@ -1,11 +1,10 @@
-using Core;
-using FluentValidation;
+using FluentValidation;
 using FluentValidation.Results;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Forms;
 using System.Buffers;
-using System.Reactive.Disposables;
-using System.Reactive.Linq;
+using CompositeDisposable = System.Reactive.Disposables.CompositeDisposable;
+using Observable = System.Reactive.Linq.Observable;
 
 namespace TabKeeper.Components;