From 562b51d508a04fdf4866ec7f4c27db78235e5fdd Mon Sep 17 00:00:00 2001
From: Jake Mannens <jake@asger.xyz>
Date: Thu, 11 Jun 2026 00:49:00 +1000
Subject: Updated pages and components to use new Button component

---
 Pages/ViewMedia.razor | 109 +++++++++++++++++++++++++++++++++-----------------
 1 file changed, 72 insertions(+), 37 deletions(-)

(limited to 'Pages/ViewMedia.razor')

diff --git a/Pages/ViewMedia.razor b/Pages/ViewMedia.razor
index d44b430..3659b42 100644
--- a/Pages/ViewMedia.razor
+++ b/Pages/ViewMedia.razor
@@ -122,47 +122,77 @@
 			</div>
 			<div id="button-container">
 				<ButtonContainer>
-					<button @onclick=@(() => deleteDialog.Show()) class="warning" data-keyboard-shortcut="d">
-						<img src="/images/trash.svg"/>
+					<Button
+						BackgroundColor=Color.ButtonWarning
+						FontSize=8
+						IconUrl="/images/trash.svg"
+						ShortcutKey=@('d')
+						OnClick=@(async () => deleteDialog.Show())>
+
 						<p><u>D</u>elete</p>
-					</button>
-					<button @onclick=@(() => tagDialog.Show()) class="secondary" data-keyboard-shortcut="t">
-						<img src="/images/tag.svg"/>
+					</Button>
+					<Button
+						FontSize=8
+						IconUrl="/images/tag.svg"
+						ShortcutKey=@('t')
+						OnClick=@(async () => tagDialog.Show())>
+
 						<p>Add <u>T</u>ag</p>
-					</button>
-					<button @onclick=@(() => ocrDialog.Show()) class="secondary" data-keyboard-shortcut="o">
-						<img src="/images/book.svg"/>
+					</Button>
+					<Button
+						FontSize=8
+						IconUrl="/images/book.svg"
+						ShortcutKey=@('o')
+						OnClick=@(async () => ocrDialog.Show())>
+
 						<p>View <u>O</u>CR</p>
-					</button>
+					</Button>
                     @if(infoEditMode) {
-@*
-                        <button @onclick=@(() => ApplyInfoEdit(false)) class="secondary">
-							<img src="/images/cross.svg"/>
+                        <Button
+							FontSize=8
+							IconUrl="/images/cross.svg"
+							OnClick=@(async () => ApplyInfoEdit(false))>
+
 							<p>Cancel</p>
-						</button>
-						<button @onclick=@(() => ApplyInfoEdit(true))>
-							<img src="/images/checkmark.svg"/>
+						</Button>
+						<Button
+							FontSize=8
+							IconUrl="/images/checkmark.svg"
+							OnClick=@(async () => ApplyInfoEdit(true))>
+
 							<p>Apply</p>
-						</button>
-*@
+						</Button>
                     } else {
-						<button @onclick=@(() => InfoEditMode = true) class="secondary" data-keyboard-shortcut="e">
-							<img src="/images/edit.svg"/>
+						<Button
+							FontSize=8
+							IconUrl="/images/edit.svg"
+							ShortcutKey=@('e')
+							OnClick=@(async () => InfoEditMode = true)>
+
 							<p><u>E</u>dit Info</p>
-						</button>
+						</Button>
 					}
 @*
                     @if(media.IsIngest) {
-						<button @onclick=@(() => SetIngest(false)) data-keyboard-shortcut="c">
-							<img src="/images/checkmark.svg"/>
+						<Button
+							BackgroundColor=Color.ButtonPrimary
+							IconUrl="/images/checkmark.svg"
+							ShortcutKey=@('c')
+							OnClick=@(async () => SetIngest(false))>
+
 							<p>Mark Tagging <u>C</u>omplete</p>
-						</button>
+						</Button>
 					} else {
 *@
-                        <button class="secondary" @onclick=@(() => SetIngest(true)) data-keyboard-shortcut="c">
-							<img src="/images/cross.svg"/>
+                        <Button
+							FontSize=8
+							IconUrl="/images/cross.svg"
+							ShortcutKey=@('c')
+							OnClick=@(async () => SetIngest(true))
+							>
+
 							<p>Mark Tagging In<u>c</u>omplete</p>
-						</button>
+						</Button>
 					@* } *@
 				</ButtonContainer>
 			</div>
@@ -176,8 +206,8 @@
 
 <Dialog Title="Delete this media?" @ref=deleteDialog>
     <ButtonContainer>
-        <button @onclick=@(() => deleteDialog.Hide()) class="secondary">Cancel</button>
-        <button @onclick=DeleteMedia class="warning">Confirm</button>
+        <Button OnClick=@(async () => deleteDialog.Hide())>Cancel</Button>
+        <Button OnClick=DeleteMedia BackgroundColor=Color.ButtonWarning>Confirm</Button>
     </ButtonContainer>
 </Dialog>
 
@@ -190,7 +220,12 @@
     }
 *@
     <ButtonContainer>
-        <button @onclick=@(() => ocrDialog.Hide())>Close</button>
+        <Button
+			BackgroundColor=Color.ButtonPrimary
+			OnClick=@(async () => ocrDialog.Hide())>
+
+			Close
+		</Button>
     </ButtonContainer>
 </Dialog>
 
@@ -283,16 +318,16 @@
         }
     }
 
-    // private void ApplyInfoEdit(bool apply) {
-    //     if(apply) {
-    //         mediaService.SetDescription(media, shortDescription, longDescription);
-    //         LoadMedia();
-    //     }
+    private void ApplyInfoEdit(bool apply) {
+        if(apply) {
+            //mediaService.SetDescription(media, shortDescription, longDescription);
+            //LoadMedia();
+        }
 
-    //     infoEditMode = false;
-    // }
+        infoEditMode = false;
+    }
 
-    private async void DeleteMedia() {
+    private async Task DeleteMedia() {
         // mediaService.Delete(media);
         // await jsRuntime.InvokeVoidAsync("history.back");
     }
-- 
cgit v1.3