feat: New UI & dialogs based on tailwindcss

.config/dotnet-tools.json

@@ -0,0 +1,12 @@
+{
+  "version": 1,
+  "isRoot": true,
+  "tools": {
+    "tailwindcss.cli": {
+      "version": "3.4.0",
+      "commands": [
+        "tailwindcss"
+      ]
+    }
+  }
+}

.devcontainer/devcontainer.json

@@ -1,16 +1,13 @@
-// For format details, see https://aka.ms/devcontainer.json. 
-// For config options, see the README at: 
-// https://github.com/microsoft/vscode-dev-containers/tree/v0.194.3/containers/dotnet
 {
 	"name": "Magic Card Tracker (.NET 8)",
 	"image": "mcr.microsoft.com/vscode/devcontainers/dotnet:8.0",
-	"settings": {},
-	"extensions": [
-		"ms-dotnettools.csharp",
-		"ms-dotnettools.blazorwasm-companion",
-		"fernandoescolar.vscode-solution-explorer",
-		"formulahendry.dotnet-test-explorer"
-	],
+	"customizations": {
+		"vscode": {
+			"extensions": [
+				"ms-dotnettools.csdevkit"
+			]
+		}
+	},
 	"forwardPorts": [5000, 5001],
 	"postCreateCommand": "dotnet restore; dotnet dev-certs https",
 	"remoteUser": "vscode"

README.md

@@ -52,7 +52,7 @@ The application is build on top of the following frameworks / libraries. Without
 * [.NET8 / ASP.NET Core Blazor](https://docs.microsoft.com/en-us/aspnet/core/blazor) 
 * [Blazored/LocalStorage](https://github.com/Blazored/LocalStorage) for accessing the local storage
 * [ChartJs.Blazor](https://github.com/mariusmuntean/ChartJs.Blazor) for the charts
-* [Bootstrap 5](https://getbootstrap.com/docs/5.0/getting-started/introduction/) for the grid layout and CSS helper classes
+* [tailwindcss](https://tailwindcss.com/)
 * [Satans Minions Font](https://www.dafont.com/satans-minions.font) for the typings in the application's logo
 * [AutoMapper](https://automapper.org/), [NSubstitue](https://nsubstitute.github.io/), [XUnit](https://xunit.net/), [MediatR](https://github.com/jbogard/MediatR) for unit testing, DTOs and separation of concerns.
 * [Scryfall](https://scryfall.com/) for the card database, imaginary and pricing information

Sources/MagicCardTracker.Contracts/Card.cs

@@ -56,7 +56,7 @@ public Card(Card card) : this(card.SetCode, card.Number, card.LanguageCode)
         /// <summary>
         ///     Gets or sets the language code of this card.
         /// </summary>
-        public string LanguageCode { get; }
+        public string LanguageCode { get; set; }
 
         /// <summary>
         ///     Gets or sets the image url of this card.

Sources/MagicCardTracker.Contracts/CollectedCard.cs

@@ -94,7 +94,7 @@ public decimal GetSingleCardValue(Currency currency)
                 ? Prices.CalculateValue(currency, isFoilCard: true)
                 : 0;
 
-            return Math.Max(standardValue, foilValue);
+            return Math.Round(Math.Max(standardValue, foilValue), 2);
         }
 
         /// <summary>

Sources/MagicCardTracker.Pwa/Components/CardDisplay.razor

@@ -1,27 +1,12 @@
 @using Contracts
-@inject IUserSettings _settings
+@inject IDialogService _dialogService
 
 @if (Cards != null && Cards.Any())
 {
-    <div class="row">
+    <div class="grid grid-cols-5 gap-4">
     @foreach (var card in Cards)
     {   
-        <div class="col-md-3 col-sm-4 col-6 mt-2 position-relative">
-            @if (ShowCountBadge && card is CollectedCard collectableCard)
-            {
-                <div class="mb-2 justify-content-center d-flex">
-                        <span class="badge rounded-pill bg-bad">
-                            @collectableCard.TotalCount
-                        </span>
-
-                        <span class="ms-2 badge rounded-pill bg-good">
-                            @collectableCard.Prices?.ToString(_settings.Currency, collectableCard.FoilCount > 0)
-                        </span>
-                    </div>
-            }
-            <img class="magic-card" src="@(card.ImageUrl)"
-        @onclick="@(async () => await OpenDetailsAsync(card))" />
-        </div>
+        <img class="rounded-2xl cursor-pointer" src="@(card.ImageUrl)" @onclick="() => OpenDetails(card)" />
     }
     </div>
 } 
@@ -30,8 +15,6 @@ else
     @ChildContent
 }
 
-<CardOverlay @ref="_cardOverlay"></CardOverlay>
-
 @code
 {
     [Parameter]
@@ -43,15 +26,8 @@ else
     [Parameter]
     public RenderFragment? ChildContent { get; set; }
 
-    private CardOverlay? _cardOverlay;
-
-    private Task OpenDetailsAsync(Card card)
+    private void OpenDetails(Card card)
     {
-        if (_cardOverlay == null)
-        {
-            return Task.CompletedTask;
-        }
-
-        return _cardOverlay.OpenAsync(card);
+        _dialogService.ShowDialog<CardDetailsDialog>("Card", card);
     }
 }

Sources/MagicCardTracker.Pwa/Components/DialogContainer.razor

@@ -0,0 +1,44 @@
+@implements IDisposable
+@inject IDialogService _dialogService
+
+@if (_dialogType != null)
+{
+    <div class="fixed inset-0 bg-black/60 backdrop-blur-sm flex justify-center">
+        <div class="mt-8">
+            <DynamicComponent Type="_dialogType" Parameters="_parameters"></DynamicComponent>
+        </div>
+    </div>
+}
+
+@code
+{
+    private Type? _dialogType;
+    private Dictionary<string, object> _parameters = [];
+
+    protected override Task OnInitializedAsync()
+    {
+        _dialogService.CloseRequested += CloseDialog;
+        _dialogService.DialogRequested += ShowDialog;
+
+        return Task.CompletedTask;
+    }
+
+    public void Dispose()
+    {
+        _dialogService.CloseRequested -= CloseDialog;
+        _dialogService.DialogRequested -= ShowDialog;
+    }
+
+    private void CloseDialog(object? sender, EventArgs e)
+    {
+        _dialogType = null;
+        StateHasChanged();
+    }
+
+    private void ShowDialog(object? sender, DialogMetadata dialogMetadata)
+    {
+        _dialogType = dialogMetadata.DialogType;
+        _parameters = dialogMetadata.Parameters;
+        StateHasChanged();
+    }
+}