Allow UI to delete sessions

Shogi.UI/Pages/Play/GameBrowser.razor

@@ -10,31 +10,22 @@
 		<row class="header">
 			<span>Creator</span>
 			<span>Seats</span>
+			<span></span>
 		</row>
 		<hr />
 		<AuthorizeView>
 			@foreach (var session in allSessions)
 			{
-					<row>
-						<div>
-							<a href="play/@session.SessionId">@session.Player1</a>
-						</div>
-					@if (string.IsNullOrEmpty(session.Player2))
-					{
-								<span>1 / 2</span>
-					}
-					else
-					{
-								<span>Full</span>
-					}
-					</row>
+				<row>
+					<GameBrowserEntry Session="session" OnSessionDeleted="FetchSessions" />
+				</row>
 			}
 		</AuthorizeView>
 	</div>
 
 	@if (allSessions.Length == 0)
 	{
-			<p>There are no games being played.</p>
+		<p>There are no games being played.</p>
 	}
 </section>
 

Shogi.UI/Pages/Play/GameBrowser.razor.css

@@ -1,5 +1,18 @@
-row {
-	display: grid;
-	grid-template-columns: 18rem 5rem;
-	padding-left: 5px; /* Matches box shadow on hover */
+.GameBrowser {
 }
+
+	.GameBrowser row {
+		display: block;
+		width: max-content;
+	}
+
+		.GameBrowser row.header {
+			display: grid;
+			grid-template-columns: 18rem 5rem 5rem;
+			gap: 1rem;
+			margin-bottom: 0 !important;
+		}
+
+		.GameBrowser row:not(:last-of-type) {
+			margin-bottom: 1rem;
+		}

Shogi.UI/Pages/Play/GameBrowserEntry.razor

@@ -0,0 +1,75 @@
+@using Shogi.Contracts.Types
+
+@inject ShogiApi Api
+
+<gameBrowserEntry>
+	<AuthorizeView>
+		@if (showDeletePrompt)
+		{
+			<modal class="PrimaryTheme ThemeVariant--Contrast">
+				<div style="display: flex; gap: 1rem; justify-content: flex-end;">
+					@if (showDeleteError)
+					{
+						<p style="color: darkred;">An error occurred.</p>
+						<div style="flex: 1;" />
+						<button @onclick="HideModal">Cancel</button>
+					}
+					else
+					{
+						<p>Do you wish to delete this session?</p>
+						<div style="flex: 1;" />
+						<button @onclick="HideModal">No</button>
+						<button @onclick="DeleteSession">Yes</button>
+					}
+				</div>
+			</modal>
+		}
+
+		<div>
+			<a href="play/@Session.SessionId">@Session.Player1</a>
+		</div>
+		@if (string.IsNullOrEmpty(Session.Player2))
+		{
+			<span>1 / 2</span>
+		}
+		else
+		{
+			<span>Full</span>
+		}
+		@if (context.User.Identity?.Name == Session.Player1)
+		{
+			<IconButton OnClick="() => showDeletePrompt = true">
+				<TrashCanIcon />
+			</IconButton>
+		}
+	</AuthorizeView>
+</gameBrowserEntry>
+
+@code {
+	[Parameter][EditorRequired] public SessionMetadata Session { get; set; } = default!;
+	[Parameter][EditorRequired] public EventCallback OnSessionDeleted { get; set; }
+	private bool showDeletePrompt = false;
+	private bool showDeleteError = false;
+
+
+	void HideModal()
+	{
+		showDeletePrompt = showDeleteError = false;
+	}
+
+	async Task DeleteSession()
+	{
+		var response = await Api.DeleteSession(Session.SessionId);
+		if (response.IsSuccessStatusCode)
+		{
+			showDeletePrompt = false;
+			showDeleteError = false;
+			await OnSessionDeleted.InvokeAsync();
+		}
+		else
+		{
+			showDeletePrompt = true;
+			showDeleteError = true;
+		}
+	}
+}

Shogi.UI/Pages/Play/GameBrowserEntry.razor.css

@@ -0,0 +1,17 @@
+gameBrowserEntry {
+	position: relative;
+	display: grid;
+	grid-template-columns: 18rem 5rem 5rem;
+	padding-left: 5px; /* Matches box shadow on hover */
+	gap: 1rem;
+	place-items: center start;
+}
+
+modal {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+}
+