From c656768016cf8572e6582851582a29907ff388d7 Mon Sep 17 00:00:00 2001
From: Cristi Ciobanu <c-ciobanu@protonmail.com>
Date: Sat, 16 Nov 2024 12:19:24 +0100
Subject: [PATCH] use slider

---
 .../subscription-settings.css                 |  4 +++
 .../subscription-settings.js                  |  4 +--
 .../subscription-settings.scss                | 12 -------
 .../subscription-settings.vue                 | 33 +++++++++----------
 static/locales/en-US.yaml                     |  4 +--
 5 files changed, 24 insertions(+), 33 deletions(-)
 create mode 100644 src/renderer/components/subscription-settings/subscription-settings.css
 delete mode 100644 src/renderer/components/subscription-settings/subscription-settings.scss

diff --git a/src/renderer/components/subscription-settings/subscription-settings.css b/src/renderer/components/subscription-settings/subscription-settings.css
new file mode 100644
index 0000000000000..a4ffb52b032a4
--- /dev/null
+++ b/src/renderer/components/subscription-settings/subscription-settings.css
@@ -0,0 +1,4 @@
+.onlyShowLatestFromChannelNumber {
+  inline-size: calc(100% - 44px);
+  padding-inline-start: 44px;
+}
diff --git a/src/renderer/components/subscription-settings/subscription-settings.js b/src/renderer/components/subscription-settings/subscription-settings.js
index 64d33f546c82b..1bcd535d2440b 100644
--- a/src/renderer/components/subscription-settings/subscription-settings.js
+++ b/src/renderer/components/subscription-settings/subscription-settings.js
@@ -2,14 +2,14 @@ import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
 import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
-import FtInput from '../ft-input/ft-input.vue'
+import FtSlider from '../ft-slider/ft-slider.vue'
 
 export default defineComponent({
   name: 'SubscriptionSettings',
   components: {
     'ft-settings-section': FtSettingsSection,
     'ft-toggle-switch': FtToggleSwitch,
-    'ft-input': FtInput,
+    'ft-slider': FtSlider,
   },
   computed: {
     hideWatchedSubs: function () {
diff --git a/src/renderer/components/subscription-settings/subscription-settings.scss b/src/renderer/components/subscription-settings/subscription-settings.scss
deleted file mode 100644
index 8c152e87517f0..0000000000000
--- a/src/renderer/components/subscription-settings/subscription-settings.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.onlyShowLatestFromChannel {
-  display: inline-flex;
-
-  div:nth-child(2) {
-    margin-inline-start: 1em;
-    inline-size: 68px;
-
-    input {
-      margin-block-end: 0;
-    }
-  }
-}
diff --git a/src/renderer/components/subscription-settings/subscription-settings.vue b/src/renderer/components/subscription-settings/subscription-settings.vue
index 93d5ecbeaf6ff..906fc1aa4b9e9 100644
--- a/src/renderer/components/subscription-settings/subscription-settings.vue
+++ b/src/renderer/components/subscription-settings/subscription-settings.vue
@@ -32,22 +32,21 @@
           :compact="true"
           @change="updateHideWatchedSubs"
         />
-        <div class="onlyShowLatestFromChannel">
-          <ft-toggle-switch
-            :id="'onlyShowLatestFromChannel'"
-            :label="onlyShowLatestFromChannel ? $t('Settings.Subscription Settings.Limit the number of videos displayed for each channel to') : $t('Settings.Subscription Settings.Limit the number of videos displayed for each channel')"
-            :default-value="onlyShowLatestFromChannel"
-            :compact="true"
-            @change="updateOnlyShowLatestFromChannel"
-          />
-          <ft-input
-            v-if="onlyShowLatestFromChannel"
-            :placeholder="'1'"
-            :show-action-button="false"
-            input-type="number"
-            :value="onlyShowLatestFromChannelNumber"
-            :aria-labelledby="'onlyShowLatestFromChannel'"
-            @input="updateOnlyShowLatestFromChannelNumber"
+        <ft-toggle-switch
+          :label="$t('Settings.Subscription Settings.Limit the number of videos displayed for each channel')"
+          :default-value="onlyShowLatestFromChannel"
+          :compact="true"
+          @change="updateOnlyShowLatestFromChannel"
+        />
+        <div class="onlyShowLatestFromChannelNumber">
+          <ft-slider
+            :label="$t('Settings.Subscription Settings.To')"
+            :default-value="onlyShowLatestFromChannelNumber"
+            :disabled="!onlyShowLatestFromChannel"
+            :min-value="1"
+            :max-value="30"
+            :step="1"
+            @change="updateOnlyShowLatestFromChannelNumber"
           />
         </div>
       </div>
@@ -56,4 +55,4 @@
 </template>
 
 <script src="./subscription-settings.js" />
-<style lang="scss" src="./subscription-settings.scss"  />
+<style src="./subscription-settings.css" scoped />
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index 85c0a92e654f1..4c5be86b3c852 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -488,8 +488,8 @@ Settings:
     Hide Videos on Watch: Hide Videos on Watch
     Fetch Feeds from RSS: Fetch Feeds from RSS
     Fetch Automatically: Fetch Feed Automatically
-    Limit the number of videos displayed for each channel: Limit the number of videos displayed for each channel
-    Limit the number of videos displayed for each channel to: Limit the number of videos displayed for each channel to
+    'Limit the number of videos displayed for each channel': 'Limit the number of videos displayed for each channel'
+    To: To
     Confirm Before Unsubscribing: Confirm Before Unsubscribing
   Distraction Free Settings:
     Distraction Free Settings: Distraction Free