feat: refactor FieldSwitch and Advanced components to use FieldDescription for better semantics, and update ImageUploader to utilize AspectRatio for improved layout

Author: miantiao-me

layers/dashboard/app/components/dashboard/links/editor/Advanced.vue

@@ -138,9 +138,9 @@ async function aiOg() {
               <FieldLabel :for="field.name">
                 {{ $t('links.form.expiration') }}
               </FieldLabel>
-              <p class="text-xs text-muted-foreground">
+              <FieldDescription class="text-xs">
                 {{ $t('links.form.expiration_description') }}
-              </p>
+              </FieldDescription>
               <Popover v-model:open="datePickerOpen">
                 <PopoverTrigger as-child>
                   <Button
@@ -184,9 +184,9 @@ async function aiOg() {
               <FieldLabel :for="field.name">
                 {{ $t('links.form.password_label') }}
               </FieldLabel>
-              <p class="text-xs text-muted-foreground">
+              <FieldDescription class="text-xs">
                 {{ $t('links.form.password_description') }}
-              </p>
+              </FieldDescription>
               <Input
                 :id="field.name"
                 :name="field.name"

layers/dashboard/app/components/dashboard/links/editor/FieldSwitch.vue

@@ -12,21 +12,19 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <Field>
-    <div class="flex items-center justify-between">
-      <div class="space-y-0.5">
-        <FieldLabel :for="id">
-          {{ label }}
-        </FieldLabel>
-        <p v-if="description" class="text-xs text-muted-foreground">
-          {{ description }}
-        </p>
-      </div>
-      <Switch
-        :id="id"
-        :model-value="modelValue"
-        @update:model-value="emit('update:modelValue', $event)"
-      />
-    </div>
+  <Field orientation="horizontal">
+    <FieldContent>
+      <FieldLabel :for="id">
+        {{ label }}
+      </FieldLabel>
+      <FieldDescription v-if="description" class="text-xs">
+        {{ description }}
+      </FieldDescription>
+    </FieldContent>
+    <Switch
+      :id="id"
+      :model-value="modelValue"
+      @update:model-value="emit('update:modelValue', $event)"
+    />
   </Field>
 </template>

layers/dashboard/app/components/dashboard/links/editor/ImageUploader.vue

@@ -90,11 +90,12 @@ function openFilePicker() {
 
 <template>
   <div class="space-y-2">
-    <div
+    <AspectRatio
       v-if="!imageUrl"
+      :ratio="1200 / 630"
       class="
-        relative flex aspect-[1200/630] cursor-pointer items-center
-        justify-center rounded-md border-2 border-dashed transition-colors
+        relative flex cursor-pointer items-center justify-center rounded-md
+        border-2 border-dashed transition-colors
       "
       :class="[
         !canUpload ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',
@@ -121,13 +122,13 @@ function openFilePicker() {
         class="hidden"
         @change="onFileChange"
       >
-    </div>
+    </AspectRatio>
 
-    <div v-else class="relative aspect-[1200/630]">
+    <AspectRatio v-else :ratio="1200 / 630" class="relative">
       <img
         :src="imageUrl"
         :alt="$t('links.form.image_preview')"
-        class="aspect-[1200/630] w-full rounded-md object-cover"
+        class="h-full w-full rounded-md object-cover"
       >
       <Button
         type="button"
@@ -138,6 +139,6 @@ function openFilePicker() {
       >
         <X class="h-4 w-4" />
       </Button>
-    </div>
+    </AspectRatio>
   </div>
 </template>