From a5a783e8d66417923f19717e0c26bd5f182f2756 Mon Sep 17 00:00:00 2001
From: REDCODE <aironenerowork@gmail.com>
Date: Mon, 17 Aug 2026 21:55:53 +0200
Subject: [PATCH] feat: use ViewModeToggle in detail pages

---
 .../Components/Pages/AlbumDetail.razor             | 14 +-------------
 .../Components/Pages/CosplayerDetail.razor         | 14 +-------------
 2 files changed, 2 insertions(+), 26 deletions(-)

diff --git a/MilkStream.Client/Components/Pages/AlbumDetail.razor b/MilkStream.Client/Components/Pages/AlbumDetail.razor
index 3548e3c..1e8efcb 100644
--- a/MilkStream.Client/Components/Pages/AlbumDetail.razor
+++ b/MilkStream.Client/Components/Pages/AlbumDetail.razor
@@ -44,16 +44,7 @@
                 </div>
             </div>
             <div class="album-detail-actions">
-                <div class="btn-group btn-group-sm">
-                    <button class="btn @(viewMode == "masonry" ? "btn-primary" : "btn-secondary")"
-                            @onclick="SetMasonry" title="Masonry">
-                        <i class="bi bi-grid-3x2-gap"></i>
-                    </button>
-                    <button class="btn @(viewMode == "grid" ? "btn-primary" : "btn-secondary")"
-                            @onclick="SetGrid" title="Grid">
-                        <i class="bi bi-grid-3x3"></i>
-                    </button>
-                </div>
+                <ViewModeToggle ViewMode="@viewMode" ViewModeChanged="@((string v) => viewMode = v)" />
                 @if (loginService.CanEdit(album?.Person)) {
                     @* Desktop: inline buttons *@
                     <div class="d-none d-md-flex gap-1 align-items-center">
@@ -251,9 +242,6 @@
     string viewMode = "masonry";
     bool _masonrySetup;
 
-    void SetMasonry() { viewMode = "masonry"; StateHasChanged(); }
-    void SetGrid() { viewMode = "grid"; StateHasChanged(); }
-
     AlbumAssetPreviewDto? currentPreview => album?.AssetPreviews != null && selectedIndex >= 0 && selectedIndex < album.AssetPreviews.Count
         ? album.AssetPreviews[selectedIndex]
         : null;
diff --git a/MilkStream.Client/Components/Pages/CosplayerDetail.razor b/MilkStream.Client/Components/Pages/CosplayerDetail.razor
index 410f01e..d7283c8 100644
--- a/MilkStream.Client/Components/Pages/CosplayerDetail.razor
+++ b/MilkStream.Client/Components/Pages/CosplayerDetail.razor
@@ -102,16 +102,7 @@
                        SortOptions="@albumSortOptions">
             <ActionButtons>
                 @if (person.TotalAlbums > 0) {
-                    <div class="btn-group btn-group-sm d-none d-md-inline-flex">
-                        <button class="btn @(viewMode == "masonry" ? "btn-primary" : "btn-secondary")"
-                                @onclick="SetMasonry" title="Masonry">
-                            <i class="bi bi-grid-3x2-gap"></i>
-                        </button>
-                        <button class="btn @(viewMode == "grid" ? "btn-primary" : "btn-secondary")"
-                                @onclick="SetGrid" title="Grid">
-                            <i class="bi bi-grid-3x3"></i>
-                        </button>
-                    </div>
+                    <ViewModeToggle ViewMode="@viewMode" ViewModeChanged="@((string v) => viewMode = v)" Class="d-none d-md-inline-flex" />
                 }
                 @if (loginService.CanEdit(Id)) {
                     @* Desktop: inline buttons *@
@@ -378,9 +369,6 @@
         await LoadPerson();
     }
 
-    void SetMasonry() => viewMode = "masonry";
-    void SetGrid() => viewMode = "grid";
-
     void CloseForm() => showForm = false;
 
     async Task OpenAlbumAssigner() {