From 34d64bca5df9fbb26bb948b2647825ceb7d1e1ef Mon Sep 17 00:00:00 2001
From: Joe Kribs <jpkribs@outlook.com>
Date: Sun, 24 Nov 2024 15:52:20 -0700
Subject: [PATCH] [iOS] LetterPicker - Dynamic Scaling (#1326)

* Get the Size from Parent

* Use the Font for Sizing

* Make Static for Padding

* Using new sizing instead of a static 35
---
 .../Components/LetterPickerButton.swift          |  8 +++++---
 .../LetterPickerBar/LetterPickerBar.swift        | 16 +++++++++++++++-
 .../PagingLibraryView/PagingLibraryView.swift    |  2 +-
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/Swiftfin/Components/LetterPickerBar/Components/LetterPickerButton.swift b/Swiftfin/Components/LetterPickerBar/Components/LetterPickerButton.swift
index 1180e62f..c0f33ac6 100644
--- a/Swiftfin/Components/LetterPickerBar/Components/LetterPickerButton.swift
+++ b/Swiftfin/Components/LetterPickerBar/Components/LetterPickerButton.swift
@@ -20,10 +20,12 @@ extension LetterPickerBar {
         private var isSelected
 
         private let letter: ItemLetter
+        private let size: CGFloat
         private let viewModel: FilterViewModel
 
-        init(letter: ItemLetter, viewModel: FilterViewModel) {
+        init(letter: ItemLetter, size: CGFloat, viewModel: FilterViewModel) {
             self.letter = letter
+            self.size = size
             self.viewModel = viewModel
         }
 
@@ -37,15 +39,15 @@ extension LetterPickerBar {
             } label: {
                 ZStack {
                     RoundedRectangle(cornerRadius: 5)
+                        .frame(width: size, height: size)
                         .foregroundStyle(isSelected ? accentColor : Color.clear)
 
                     Text(letter.value)
                         .font(.headline)
                         .foregroundStyle(isSelected ? accentColor.overlayColor : accentColor)
+                        .frame(width: size, height: size, alignment: .center)
                 }
-                .frame(width: 20, height: 20)
             }
-            .frame(width: 50, height: 20)
         }
     }
 }
diff --git a/Swiftfin/Components/LetterPickerBar/LetterPickerBar.swift b/Swiftfin/Components/LetterPickerBar/LetterPickerBar.swift
index 6eacb2bf..e4d37f90 100644
--- a/Swiftfin/Components/LetterPickerBar/LetterPickerBar.swift
+++ b/Swiftfin/Components/LetterPickerBar/LetterPickerBar.swift
@@ -14,6 +14,8 @@ struct LetterPickerBar: View {
     @ObservedObject
     var viewModel: FilterViewModel
 
+    // MARK: - Body
+
     @ViewBuilder
     var body: some View {
         VStack(spacing: 0) {
@@ -22,6 +24,7 @@ struct LetterPickerBar: View {
             ForEach(ItemLetter.allCases, id: \.hashValue) { filterLetter in
                 LetterPickerButton(
                     letter: filterLetter,
+                    size: LetterPickerBar.size,
                     viewModel: viewModel
                 )
                 .environment(\.isSelected, viewModel.currentFilters.letter.contains(filterLetter))
@@ -30,6 +33,17 @@ struct LetterPickerBar: View {
             Spacer()
         }
         .scrollIfLargerThanContainer()
-        .frame(width: 30, alignment: .center)
+        .frame(width: LetterPickerBar.size, alignment: .center)
+    }
+
+    // MARK: - Letter Button Size
+
+    static var size: CGFloat {
+        String().height(
+            withConstrainedWidth: CGFloat.greatestFiniteMagnitude,
+            font: UIFont.preferredFont(
+                forTextStyle: .headline
+            )
+        )
     }
 }
diff --git a/Swiftfin/Views/PagingLibraryView/PagingLibraryView.swift b/Swiftfin/Views/PagingLibraryView/PagingLibraryView.swift
index 514710df..0107d5e6 100644
--- a/Swiftfin/Views/PagingLibraryView/PagingLibraryView.swift
+++ b/Swiftfin/Views/PagingLibraryView/PagingLibraryView.swift
@@ -284,7 +284,7 @@ struct PagingLibraryView<Element: Poster>: View {
         if letterPickerEnabled, let filterViewModel = viewModel.filterViewModel {
             ZStack(alignment: letterPickerOrientation.alignment) {
                 innerContent
-                    .padding(letterPickerOrientation.edge, 35)
+                    .padding(letterPickerOrientation.edge, LetterPickerBar.size + 10)
                     .frame(maxWidth: .infinity)
 
                 LetterPickerBar(viewModel: filterViewModel)