From 5e00ed783c68746567f40bb56c7cf69f4224b711 Mon Sep 17 00:00:00 2001
From: Jake Mannens <jake@asger.xyz>
Date: Fri, 21 Aug 2026 00:37:58 +1000
Subject: Initial commit

---
 Pages/Component/Button.razor.css |  6 ++----
 Pages/Gallery.razor              | 38 ++++++++++++++++++++++++++++++++++++--
 wwwroot/images/grid-large.svg    |  3 +++
 wwwroot/images/grid-medium.svg   |  7 +++++++
 wwwroot/images/grid-small.svg    | 13 +++++++++++++
 wwwroot/styles/global.css        |  7 +++++--
 6 files changed, 66 insertions(+), 8 deletions(-)
 create mode 100644 wwwroot/images/grid-large.svg
 create mode 100644 wwwroot/images/grid-medium.svg
 create mode 100644 wwwroot/images/grid-small.svg

diff --git a/Pages/Component/Button.razor.css b/Pages/Component/Button.razor.css
index 5254030..1511e1d 100644
--- a/Pages/Component/Button.razor.css
+++ b/Pages/Component/Button.razor.css
@@ -14,9 +14,8 @@
 }
 
 button > img, button > svg {
-    height:       15px;
-    margin-right: 5px;
-    width:        15px;
+    height: 15px;
+    width:  15px;
 }
 
 @media (hover: none) and (pointer: coarse) {
@@ -26,7 +25,6 @@ button > img, button > svg {
 
     button > img, button > svg {
         height:       20px;
-        margin-right: 0;
         padding:      8px;
         width:        20px;
     }
diff --git a/Pages/Gallery.razor b/Pages/Gallery.razor
index 043f92d..deabd98 100644
--- a/Pages/Gallery.razor
+++ b/Pages/Gallery.razor
@@ -20,13 +20,34 @@
         <p><center>a tag ID have been specified!</center></p>
     </div>
 } else {
-	<div style="padding:var(--size-default-gap);">
+	<div style="margin:0 auto 0 auto;padding:var(--size-default-gap);">
+        <ButtonContainer>
+            <Button
+                OnClick=@(async () => await SetViewSize(GalleryViewSize.Small))
+                IconUrl="/images/grid-small.svg"/>
+            <Button
+                OnClick=@(async () => await SetViewSize(GalleryViewSize.Medium))
+                IconUrl="/images/grid-medium.svg"/>
+            <Button
+                OnClick=@(async () => await SetViewSize(GalleryViewSize.Large))
+                IconUrl="/images/grid-large.svg"/>
+        </ButtonContainer>
 		@foreach(var media in displayMedia) {
 			// Precalculate thumbnail size to help the browser
 			// lay out the images during initial page load
 			int width = (int) media.CurrentUploadedFile!.Width! * 200 / (int) media.CurrentUploadedFile.Height!;
 			<a href="/ViewMedia?m=@(media.Guid)">
-				<img src="/media/thumb/@(media.Guid)?h=200" width=@width height="200"/>
+                @switch(viewSize) {
+                    case GalleryViewSize.Small:
+						<img src="/media/thumb/@(media.Guid)?w=100&h=100" width="100" height="100"/>
+						break;
+                    case GalleryViewSize.Medium:
+						<img src="/media/thumb/@(media.Guid)?w=200&h=200" width="200" height="200"/>
+						break;
+                    case GalleryViewSize.Large:
+						<img src="/media/thumb/@(media.Guid)?h=200" width=@width height="200"/>
+						break;
+                }
 			</a>
 		}
 		<div id="canary" style="height:1px;"></div>
@@ -77,6 +98,8 @@
         }
     }
 
+    private GalleryViewSize viewSize = GalleryViewSize.Large;
+
     private List<Media> displayMedia;
 
     protected override void OnInitialized() =>
@@ -136,6 +159,17 @@
         });
     }
 
+    private async Task SetViewSize(GalleryViewSize viewSize) {
+		this.viewSize = viewSize;
+		await InvokeAsync(() => StateHasChanged());
+    }
+
     public void Dispose() =>
         userService.UserSessionState.OnStateChange -= ShowNsfwChanged;
+
+    public enum GalleryViewSize {
+        Small,
+        Medium,
+        Large
+    }
 }
diff --git a/wwwroot/images/grid-large.svg b/wwwroot/images/grid-large.svg
new file mode 100644
index 0000000..b458975
--- /dev/null
+++ b/wwwroot/images/grid-large.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 70 70" fill="none" stroke="#fff" stroke-linejoin="round" stroke-width="5px">
+  <rect x="10" y="10" width="50" height="50"/>
+</svg>
diff --git a/wwwroot/images/grid-medium.svg b/wwwroot/images/grid-medium.svg
new file mode 100644
index 0000000..410b362
--- /dev/null
+++ b/wwwroot/images/grid-medium.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 70 70" fill="none" stroke="#fff" stroke-linejoin="round" stroke-width="5px">
+  <rect x="10" y="10" width="20" height="20"/>
+  <rect x="40" y="10" width="20" height="20"/>
+
+  <rect x="10" y="40" width="20" height="20"/>
+  <rect x="40" y="40" width="20" height="20"/>
+</svg>
diff --git a/wwwroot/images/grid-small.svg b/wwwroot/images/grid-small.svg
new file mode 100644
index 0000000..fb75516
--- /dev/null
+++ b/wwwroot/images/grid-small.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 70 70" fill="none" stroke="#fff" stroke-linejoin="round" stroke-width="5px">
+  <rect x="10" y="10" width="10" height="10"/>
+  <rect x="30" y="10" width="10" height="10"/>
+  <rect x="50" y="10" width="10" height="10"/>
+
+  <rect x="10" y="30" width="10" height="10"/>
+  <rect x="30" y="30" width="10" height="10"/>
+  <rect x="50" y="30" width="10" height="10"/>
+
+  <rect x="10" y="50" width="10" height="10"/>
+  <rect x="30" y="50" width="10" height="10"/>
+  <rect x="50" y="50" width="10" height="10"/>
+</svg>
diff --git a/wwwroot/styles/global.css b/wwwroot/styles/global.css
index 9de9fc1..f2b6147 100644
--- a/wwwroot/styles/global.css
+++ b/wwwroot/styles/global.css
@@ -108,9 +108,12 @@ button.warning {
 }
 
 button > img {
-    height:       15px;
+    height: 15px;
+    width:  15px;
+}
+
+button > :not(:last-child) {
     margin-right: 5px;
-    width:        15px;
 }
 
 @media (hover: none) and (pointer: coarse) {
-- 
cgit v1.3