From 7c8b825150543cae98621eed30f14199ae72e9d8 Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Sat, 31 Jan 2026 22:06:04 +0100
Subject: [PATCH 1/3] feat: add toggle component

---
 app/components/Toggle.client.vue              |  45 +++++++
 .../{ToggleSkeleton.vue => Toggle.server.vue} |   0
 app/pages/settings.vue                        | 112 ++----------------
 3 files changed, 55 insertions(+), 102 deletions(-)
 create mode 100644 app/components/Toggle.client.vue
 rename app/components/{ToggleSkeleton.vue => Toggle.server.vue} (100%)

diff --git a/app/components/Toggle.client.vue b/app/components/Toggle.client.vue
new file mode 100644
index 0000000000..a0c81b3f0a
--- /dev/null
+++ b/app/components/Toggle.client.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+defineProps<{
+  label: string
+}>()
+
+const checked = defineModel<boolean>({
+  default: false,
+})
+</script>
+
+<template>
+  <button
+    type="button"
+    class="w-full flex items-center justify-between gap-4 group"
+    role="switch"
+    :aria-checked="checked"
+    @click="checked = !checked"
+  >
+    <span class="text-sm text-fg font-medium text-start">
+      {{ label }}
+    </span>
+    <span
+      class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out motion-reduce:transition-none shadow-sm cursor-pointer"
+      :class="checked ? 'bg-accent' : 'bg-bg border border-border'"
+      aria-hidden="true"
+    >
+      <span
+        class="pointer-events-none inline-block h-5 w-5 rounded-full shadow-sm ring-0 transition-transform duration-200 ease-in-out motion-reduce:transition-none"
+        :class="checked ? 'bg-bg' : 'bg-fg-muted'"
+      />
+    </span>
+  </button>
+</template>
+
+<style scoped>
+button[aria-checked='false'] > span:last-of-type > span {
+  translate: 0;
+}
+button[aria-checked='true'] > span:last-of-type > span {
+  translate: calc(100%);
+}
+html[dir='rtl'] button[aria-checked='true'] > span:last-of-type > span {
+  translate: calc(-100%);
+}
+</style>
diff --git a/app/components/ToggleSkeleton.vue b/app/components/Toggle.server.vue
similarity index 100%
rename from app/components/ToggleSkeleton.vue
rename to app/components/Toggle.server.vue
diff --git a/app/pages/settings.vue b/app/pages/settings.vue
index 4a5ac3f688..b97c4c614b 100644
--- a/app/pages/settings.vue
+++ b/app/pages/settings.vue
@@ -100,71 +100,17 @@ defineOgImageComponent('Default', {
           </h2>
           <div class="bg-bg-subtle border border-border rounded-lg p-4 sm:p-6 space-y-4">
             <!-- Relative dates toggle -->
-            <div class="space-y-2">
-              <ClientOnly>
-                <button
-                  type="button"
-                  class="w-full flex items-center justify-between gap-4 group"
-                  role="switch"
-                  :aria-checked="settings.relativeDates"
-                  @click="settings.relativeDates = !settings.relativeDates"
-                >
-                  <span class="text-sm text-fg font-medium text-start">
-                    {{ $t('settings.relative_dates') }}
-                  </span>
-                  <span
-                    class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out motion-reduce:transition-none shadow-sm cursor-pointer"
-                    :class="settings.relativeDates ? 'bg-accent' : 'bg-bg border border-border'"
-                    aria-hidden="true"
-                  >
-                    <span
-                      class="pointer-events-none inline-block h-5 w-5 rounded-full shadow-sm ring-0 transition-transform duration-200 ease-in-out motion-reduce:transition-none"
-                      :class="settings.relativeDates ? 'bg-bg' : 'bg-fg-muted'"
-                    />
-                  </span>
-                </button>
-                <template #fallback>
-                  <ToggleSkeleton :label="$t('settings.relative_dates')" />
-                </template>
-              </ClientOnly>
-              <p class="text-sm text-fg-muted">
-                {{ $t('settings.relative_dates_description') }}
-              </p>
-            </div>
+            <Toggle :label="$t('settings.relative_dates')" v-model="settings.relativeDates" />
 
             <!-- Divider -->
             <div class="border-t border-border" />
 
             <!-- Include @types in install toggle -->
             <div class="space-y-2">
-              <ClientOnly>
-                <button
-                  type="button"
-                  class="w-full flex items-center justify-between gap-4 group"
-                  role="switch"
-                  :aria-checked="settings.includeTypesInInstall"
-                  @click="settings.includeTypesInInstall = !settings.includeTypesInInstall"
-                >
-                  <span class="text-sm text-fg font-medium text-start">
-                    {{ $t('settings.include_types') }}
-                  </span>
-                  <span
-                    class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out motion-reduce:transition-none shadow-sm cursor-pointer"
-                    :class="
-                      settings.includeTypesInInstall ? 'bg-accent' : 'bg-bg border border-border'
-                    "
-                    aria-hidden="true"
-                  >
-                    <span
-                      class="pointer-events-none inline-block h-5 w-5 rounded-full shadow-sm ring-0 transition-transform duration-200 ease-in-out motion-reduce:transition-none"
-                      :class="settings.includeTypesInInstall ? 'bg-bg' : 'bg-fg-muted'"
-                    />
-                  </span>
-                </button>
-                <template #fallback>
-                  <ToggleSkeleton :label="$t('settings.include_types')" />
-                </template>
-              </ClientOnly>
+              <Toggle
+                :label="$t('settings.include_types')"
+                v-model="settings.includeTypesInInstall"
+              />
               <p class="text-sm text-fg-muted">
                 {{ $t('settings.include_types_description') }}
               </p>
@@ -175,38 +121,12 @@ defineOgImageComponent('Default', {
 
             <!-- Hide platform-specific packages toggle -->
             <div class="space-y-2">
-              <ClientOnly>
-                <button
-                  type="button"
-                  class="w-full flex items-center justify-between gap-4 group"
-                  role="switch"
-                  :aria-checked="settings.hidePlatformPackages"
-                  @click="settings.hidePlatformPackages = !settings.hidePlatformPackages"
-                >
-                  <span class="text-sm text-fg font-medium text-start">
-                    {{ $t('settings.hide_platform_packages') }}
-                  </span>
-                  <span
-                    class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out motion-reduce:transition-none shadow-sm cursor-pointer"
-                    :class="
-                      settings.hidePlatformPackages ? 'bg-accent' : 'bg-bg border border-border'
-                    "
-                    aria-hidden="true"
-                  >
-                    <span
-                      class="pointer-events-none inline-block h-5 w-5 rounded-full shadow-sm ring-0 transition-transform duration-200 ease-in-out motion-reduce:transition-none"
-                      :class="settings.hidePlatformPackages ? 'bg-bg' : 'bg-fg-muted'"
-                    />
-                  </span>
-                </button>
-                <template #fallback>
-                  <p class="text-sm text-fg-muted">
-                    {{ $t('settings.hide_platform_packages') }}
-                  </p>
-                </template>
-              </ClientOnly>
+              <Toggle
+                :label="$t('settings.hide_platform_packages')"
+                v-model="settings.hidePlatformPackages"
+              />
               <p class="text-sm text-fg-muted">
-                {{ $t('settings.hide_platform_packages_description') }}
+                {{ $t('settings.hide_platform_packages') }}
               </p>
             </div>
           </div>
@@ -271,15 +191,3 @@ defineOgImageComponent('Default', {
     </article>
   </main>
 </template>
-
-<style scoped>
-button[aria-checked='false'] > span:last-of-type > span {
-  translate: 0;
-}
-button[aria-checked='true'] > span:last-of-type > span {
-  translate: calc(100%);
-}
-html[dir='rtl'] button[aria-checked='true'] > span:last-of-type > span {
-  translate: calc(-100%);
-}
-</style>

From 271fbcfd45bef9264b71a78d52374c02a9d0dbdd Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Sat, 31 Jan 2026 22:12:57 +0100
Subject: [PATCH 2/3] feat(toggle): include description

---
 app/components/Toggle.client.vue | 4 ++++
 app/components/Toggle.server.vue | 4 ++++
 app/pages/settings.vue           | 8 ++------
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/app/components/Toggle.client.vue b/app/components/Toggle.client.vue
index a0c81b3f0a..dee48d5327 100644
--- a/app/components/Toggle.client.vue
+++ b/app/components/Toggle.client.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 defineProps<{
   label: string
+  description?: string
 }>()
 
 const checked = defineModel<boolean>({
@@ -30,6 +31,9 @@ const checked = defineModel<boolean>({
       />
     </span>
   </button>
+  <p v-if="description" class="text-sm text-fg-muted">
+    {{ description }}
+  </p>
 </template>
 
 <style scoped>
diff --git a/app/components/Toggle.server.vue b/app/components/Toggle.server.vue
index 960464afe0..d686dfbb69 100644
--- a/app/components/Toggle.server.vue
+++ b/app/components/Toggle.server.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 defineProps<{
   label: string
+  description?: string
 }>()
 </script>
 
@@ -11,4 +12,7 @@ defineProps<{
     </span>
     <span class="skeleton block h-6 w-11 shrink-0 rounded-full" />
   </div>
+  <p v-if="description" class="text-sm text-fg-muted">
+    {{ description }}
+  </p>
 </template>
diff --git a/app/pages/settings.vue b/app/pages/settings.vue
index b97c4c614b..200d03306b 100644
--- a/app/pages/settings.vue
+++ b/app/pages/settings.vue
@@ -109,11 +109,9 @@ defineOgImageComponent('Default', {
             <div class="space-y-2">
               <Toggle
                 :label="$t('settings.include_types')"
+                :description="$t('settings.include_types_description')"
                 v-model="settings.includeTypesInInstall"
               />
-              <p class="text-sm text-fg-muted">
-                {{ $t('settings.include_types_description') }}
-              </p>
             </div>
 
             <!-- Divider -->
@@ -123,11 +121,9 @@ defineOgImageComponent('Default', {
             <div class="space-y-2">
               <Toggle
                 :label="$t('settings.hide_platform_packages')"
+                :description="$t('settings.hide_platform_packages')"
                 v-model="settings.hidePlatformPackages"
               />
-              <p class="text-sm text-fg-muted">
-                {{ $t('settings.hide_platform_packages') }}
-              </p>
             </div>
           </div>
         </section>

From 67e2fabde90234e63fc6dcd216404b1d103b9d48 Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Sat, 31 Jan 2026 22:31:50 +0100
Subject: [PATCH 3/3] refactor: remove label as mandatory

---
 app/components/Toggle.client.vue | 4 ++--
 app/components/Toggle.server.vue | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/components/Toggle.client.vue b/app/components/Toggle.client.vue
index dee48d5327..769bd07c4a 100644
--- a/app/components/Toggle.client.vue
+++ b/app/components/Toggle.client.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 defineProps<{
-  label: string
+  label?: string
   description?: string
 }>()
 
@@ -17,7 +17,7 @@ const checked = defineModel<boolean>({
     :aria-checked="checked"
     @click="checked = !checked"
   >
-    <span class="text-sm text-fg font-medium text-start">
+    <span v-if="label" class="text-sm text-fg font-medium text-start">
       {{ label }}
     </span>
     <span
diff --git a/app/components/Toggle.server.vue b/app/components/Toggle.server.vue
index d686dfbb69..71d4e4ee93 100644
--- a/app/components/Toggle.server.vue
+++ b/app/components/Toggle.server.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 defineProps<{
-  label: string
+  label?: string
   description?: string
 }>()
 </script>
 
 <template>
   <div class="w-full flex items-center justify-between gap-4">
-    <span class="text-sm text-fg font-medium text-start">
+    <span v-if="label" class="text-sm text-fg font-medium text-start">
       {{ label }}
     </span>
     <span class="skeleton block h-6 w-11 shrink-0 rounded-full" />