Add Spectre, add bookmark container creation, save selected container to localStorage

Start/Client/Components/Alert.razor

@@ -0,0 +1,31 @@
+<div class="toast @AlertTypeToClass(this.Type)">
+    @ChildContent
+</div>
+
+@code {
+    [Parameter]
+    public AlertType Type { get; set; }
+    [Parameter]
+    public RenderFragment ChildContent { get; set; } = null!;
+
+    private string AlertTypeToClass(AlertType type)
+    {
+        switch (type)
+        {
+            case AlertType.Error: return "toast-error";
+            case AlertType.Warning: return "toast-warning";
+            case AlertType.Success: return "toast-success";
+            case AlertType.Info: return "toast-primary";
+            default: return "";
+        }
+    }
+
+    public enum AlertType
+    {
+        Error,
+        Warning,
+        Success,
+        Info,
+        None
+    }
+}

Start/Client/Components/BookmarkGroup.razor

@@ -0,0 +1,26 @@
+@using Start.Shared
+
+<h2 class="bookmarkGroupTitle" style="background-color: #@this.Group.Color">
+    @this.Group.Title
+</h2>
+<ul class="bookmarkGroupList">
+    @if (this.Group.Bookmarks == null || !this.Group.Bookmarks.Any())
+    {
+        <li class="bookmarkListItem noBookmarksItem"><i>No Bookmarks</i></li>
+    }
+    else
+    {
+        foreach (BookmarkDto bookmark in this.Group.Bookmarks!)
+        {
+            <li class="bookmarkListItem">
+                <a href="@bookmark.Url" class="bookmarkLink">@bookmark.Title</a>
+            </li>
+        }
+    }
+</ul>
+
+@code
+{
+    [Parameter]
+    public BookmarkGroupDto Group { get; set; } = null!; // [Required] is a .net 6 feature
+}

Start/Client/Components/CreateContainer.razor

@@ -0,0 +1,79 @@
+@using Start.Shared
+@using System.IO
+@inject HttpClient Http
+
+<Dialog Title="Create Container" Active="this.IsOpen" OnClose="this.OnDialogClose">
+    <EditForm Model="this.model" OnValidSubmit="this.OnSubmit">
+        @if (displayError)
+        {
+            <Alert Type="Alert.AlertType.Error">
+                There was an error creating the container
+            </Alert>
+        }
+        <div class="form-group">
+            <div class="container">
+                <div class="columns">
+                    <div class="column col-12">
+                        <div>
+                            <label for="createBookmarkContainerTitle" class="form-label">Title</label>
+                            <InputText id="createBookmarkContainerTitle" name="createBookmarkContainerTitle"
+                                       class="form-input" @bind-Value="this.model.Title" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="container">
+                <div class="columns">
+                    <div class="column col-12 text-right">
+                        <div>
+                            <button type="submit" class="btn btn-primary">
+                                <i class="icon icon-plus"></i> Create
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </EditForm>
+</Dialog>
+
+@code {
+    [Parameter]
+    public EventCallback<BookmarkContainerDto> OnCreated { get; set; }
+    [Parameter]
+    public bool IsOpen { get; set; }
+    [Parameter]
+    public EventCallback OnClose { get; set; }
+
+    private BookmarkContainerDto model = new("");
+    private bool displayError = false;
+
+    protected async void OnSubmit()
+    {
+        HttpResponseMessage response = await Http
+            .PostAsJsonAsync("Bookmarks/CreateBookmarkContainer", model.Title);
+
+        Stream stream = response.RequestMessage!.Content!.ReadAsStream();
+        StreamReader reader = new StreamReader(stream);
+        Console.WriteLine(reader.ReadToEnd());
+
+        BookmarkContainerDto? container = await response
+            !.Content
+            !.ReadFromJsonAsync<BookmarkContainerDto>();
+
+        if (container == null)
+        {
+            this.displayError = true;
+        }
+        else
+        {
+            await this.OnCreated.InvokeAsync(container);
+        }
+    }
+
+    protected async void OnDialogClose()
+    {
+        this.IsOpen = false;
+        await this.OnClose.InvokeAsync();
+    }
+}

Start/Client/Components/Dialog.razor

@@ -0,0 +1,31 @@
+<div class="modal @(this.Active ? "active" : "")">
+    <a class="modal-overlay" @onclick="this.OnDialogClose" aria-label="Close"></a>
+    <div class="modal-container">
+        <div class="modal-header">
+            <a class="btn btn-clear float-right" @onclick="this.OnClose" aria-label="Close"></a>
+            <div class="modal-title h5">@this.Title</div>
+        </div>
+        <div class="modal-body">
+            <div class="content">
+                @this.ChildContent
+            </div>
+        </div>
+    </div>
+</div>
+
+@code {
+    [Parameter]
+    public string Title { get; set; } = null!;
+    [Parameter]
+    public RenderFragment ChildContent { get; set; } = null!;
+    [Parameter]
+    public bool Active { get; set; }
+    [Parameter]
+    public EventCallback OnClose { get; set; }
+
+    public void OnDialogClose()
+    {
+        this.Active = false;
+        this.OnClose.InvokeAsync();
+    }
+}