feat(toggle): include description

Author: MatteoGabriele

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>

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>

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>