From fbd480cd55699d0816581e617e75014bd4a968f1 Mon Sep 17 00:00:00 2001
From: theguymadmax <theguymadmax@proton.me>
Date: Wed, 8 Oct 2025 20:18:09 -0500
Subject: [PATCH] Enable alphapicker in movie collections tab (standard layout)

---
 src/controllers/movies/moviecollections.js | 29 ++++++++++++++++++++++
 src/controllers/movies/movies.html         |  3 +++
 2 files changed, 32 insertions(+)

diff --git a/src/controllers/movies/moviecollections.js b/src/controllers/movies/moviecollections.js
index 560badf4ac..5b51b5e61b 100644
--- a/src/controllers/movies/moviecollections.js
+++ b/src/controllers/movies/moviecollections.js
@@ -1,5 +1,6 @@
 import loading from '../../components/loading/loading';
 import libraryBrowser from '../../scripts/libraryBrowser';
+import { AlphaPicker } from '../../components/alphaPicker/alphaPicker';
 import imageLoader from '../../components/images/imageLoader';
 import listView from '../../components/listview/listview';
 import cardBuilder from '../../components/cardbuilder/cardBuilder';
@@ -65,6 +66,7 @@ export default function (view, params, tabContent) {
         loading.show();
         isLoading = true;
         const query = getQuery();
+        this.alphaPicker?.updateControls(query);
         ApiClient.getItems(ApiClient.getCurrentUserId(), query).then((result) => {
             function onNextPageClick() {
                 if (isLoading) {
@@ -249,6 +251,32 @@ export default function (view, params, tabContent) {
                 });
             });
         });
+
+        const alphaPickerElement = tabElement.querySelector('.alphaPicker');
+
+        if (alphaPickerElement) {
+            alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
+                const newValue = e.detail.value;
+                const query = getQuery();
+                if (newValue === '#') {
+                    query.NameLessThan = 'A';
+                    delete query.NameStartsWith;
+                } else {
+                    query.NameStartsWith = newValue;
+                    delete query.NameLessThan;
+                }
+                query.StartIndex = 0;
+                reloadItems(tabElement);
+            });
+            this.alphaPicker = new AlphaPicker({
+                element: alphaPickerElement,
+                valueChangeEvent: 'click'
+            });
+
+            tabElement.querySelector('.alphaPicker').classList.add('alphabetPicker-right');
+            alphaPickerElement.classList.add('alphaPicker-fixed-right');
+            tabElement.querySelector('.itemsContainer').classList.add('padded-right-withalphapicker');
+        }
     };
 
     initPage(tabContent);
@@ -256,6 +284,7 @@ export default function (view, params, tabContent) {
 
     this.renderTab = function () {
         reloadItems(tabContent);
+        this.alphaPicker?.updateControls(getQuery());
     };
 }
 
diff --git a/src/controllers/movies/movies.html b/src/controllers/movies/movies.html
index 5791ddf8d8..7c9fd7f4d6 100644
--- a/src/controllers/movies/movies.html
+++ b/src/controllers/movies/movies.html
@@ -66,6 +66,9 @@
             <button type="button" is="paper-icon-button-light" class="btnNewCollection autoSize" title="${NewCollection}"><span class="material-icons add" aria-hidden="true"></span></button>
         </div>
 
+        <div class="alphaPicker alphaPicker-fixed alphaPicker-vertical">
+        </div>
+
         <div is="emby-itemscontainer" class="itemsContainer vertical-wrap centered padded-left padded-right" style="text-align:center;">
         </div>
         <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom focuscontainer-x">