From b47f2897259d1fd7c9cde5b5255bf84b99305d3d Mon Sep 17 00:00:00 2001
From: Hung Do Quoc <hung.do.quoc@student.tuke.sk>
Date: Sat, 3 Oct 2026 17:20:20 +0200
Subject: [PATCH 1/2] feat(discover): add select all and clear all buttons to
 watch provider selector

adding the functionality to select/deselect all watch providers for the given country in the filter

fix #3524
---
 src/components/Selector/index.tsx | 23 +++++++++++++++++++++++
 src/i18n/locale/en.json           |  2 ++
 2 files changed, 25 insertions(+)

diff --git a/src/components/Selector/index.tsx b/src/components/Selector/index.tsx
index b83009d95b..bb7c9fd64a 100644
--- a/src/components/Selector/index.tsx
+++ b/src/components/Selector/index.tsx
@@ -1,3 +1,4 @@
+import Button from '@app/components/Common/Button';
 import CachedImage from '@app/components/Common/CachedImage';
 import { SmallLoadingSpinner } from '@app/components/Common/LoadingSpinner';
 import Tooltip from '@app/components/Common/Tooltip';
@@ -42,6 +43,8 @@ const messages = defineMessages('components.Selector', {
   ended: 'Ended',
   canceled: 'Canceled',
   pilot: 'Pilot',
+  selectAll: 'Select All',
+  clearAll: 'Clear All',
 });
 
 type SingleVal = {
@@ -425,6 +428,8 @@ export const WatchProviderSelector = ({
 
   const initialProviders = orderedData.slice(0, 24);
   const otherProviders = orderedData.slice(24);
+  const allSelected =
+    orderedData.length > 0 && activeProvider.length === orderedData.length;
 
   return (
     <>
@@ -444,6 +449,24 @@ export const WatchProviderSelector = ({
         <SmallLoadingSpinner />
       ) : (
         <div className="grid">
+          <div className="mb-4 flex justify-start gap-2 py-2">
+            <Button
+              type="button"
+              buttonSize="sm"
+              disabled={allSelected}
+              onClick={() => setActiveProvider(orderedData.map((p) => p.id))}
+            >
+              {intl.formatMessage(messages.selectAll)}
+            </Button>
+            <Button
+              type="button"
+              buttonSize="sm"
+              disabled={activeProvider.length === 0}
+              onClick={() => setActiveProvider([])}
+            >
+              {intl.formatMessage(messages.clearAll)}
+            </Button>
+          </div>
           <div className="provider-icons grid gap-2">
             {initialProviders.map((provider) => {
               const isActive = activeProvider.includes(provider.id);
diff --git a/src/i18n/locale/en.json b/src/i18n/locale/en.json
index 4a1a0eec9d..a1bac94bbc 100644
--- a/src/i18n/locale/en.json
+++ b/src/i18n/locale/en.json
@@ -628,6 +628,7 @@
   "components.Selector.CertificationSelector.selectCountry": "Select a country",
   "components.Selector.CertificationSelector.starttyping": "Starting typing to search.",
   "components.Selector.canceled": "Canceled",
+  "components.Selector.clearAll": "Clear All",
   "components.Selector.ended": "Ended",
   "components.Selector.inProduction": "In Production",
   "components.Selector.nooptions": "No results.",
@@ -639,6 +640,7 @@
   "components.Selector.searchStatus": "Select status...",
   "components.Selector.searchStudios": "Search studios…",
   "components.Selector.searchUsers": "Select users…",
+  "components.Selector.selectAll": "Select All",
   "components.Selector.showless": "Show Less",
   "components.Selector.showmore": "Show More",
   "components.Selector.starttyping": "Starting typing to search.",

From ac7a7e069ac6b08be5ba0f04a79597ad8e1f8209 Mon Sep 17 00:00:00 2001
From: Hung Do Quoc <hung.do.quoc@student.tuke.sk>
Date: Fri, 9 Oct 2026 18:56:43 +0200
Subject: [PATCH 2/2] fix(discover): check provider ids instead of count for
 select all state

compare each current provider id against the selection instead of comparing lengths, so stale ids
from the url or saved slider data no longer disable select all while a provider is still unselected
---
 src/components/Selector/index.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Selector/index.tsx b/src/components/Selector/index.tsx
index bb7c9fd64a..dd01617a5c 100644
--- a/src/components/Selector/index.tsx
+++ b/src/components/Selector/index.tsx
@@ -429,7 +429,8 @@ export const WatchProviderSelector = ({
   const initialProviders = orderedData.slice(0, 24);
   const otherProviders = orderedData.slice(24);
   const allSelected =
-    orderedData.length > 0 && activeProvider.length === orderedData.length;
+    orderedData.length > 0 &&
+    orderedData.every((provider) => activeProvider.includes(provider.id));
 
   return (
     <>
@@ -453,7 +454,7 @@ export const WatchProviderSelector = ({
             <Button
               type="button"
               buttonSize="sm"
-              disabled={allSelected}
+              disabled={orderedData.length === 0 || allSelected}
               onClick={() => setActiveProvider(orderedData.map((p) => p.id))}
             >
               {intl.formatMessage(messages.selectAll)}