refactor: 💄 Improve appearance of dropdown menus and settings pages

components/composer/file-preview.vue

@@ -14,16 +14,16 @@
             <DropdownMenuSeparator />
 
             <DropdownMenuItem @click="editName">
-                <TextCursorInput class="mr-2 size-4" />
+                <TextCursorInput />
                 <span>Rename</span>
             </DropdownMenuItem>
             <DropdownMenuItem @click="editCaption">
-                <Captions class="mr-2 size-4" />
+                <Captions />
                 <span>Add caption</span>
             </DropdownMenuItem>
             <DropdownMenuSeparator />
             <DropdownMenuItem @click="emit('remove')">
-                <Delete class="mr-2 size-4" />
+                <Delete />
                 <span>Remove</span>
             </DropdownMenuItem>
         </DropdownMenuContent>

components/notes/menu.vue

@@ -87,52 +87,52 @@ const _delete = async () => {
         <DropdownMenuContent class="min-w-56">
             <DropdownMenuGroup>
                 <DropdownMenuItem v-if="authorIsMe" as="button" @click="emit('edit')">
-                    <Pencil class="mr-2 size-4" />
+                    <Pencil />
                     {{ m.front_lime_grizzly_persist() }}
                 </DropdownMenuItem>
                 <DropdownMenuItem as="button" @click="copyText(apiNoteString)">
-                    <Code class="mr-2 size-4" />
+                    <Code />
                     {{ m.yummy_moving_scallop_sail() }}
                 </DropdownMenuItem>
                 <DropdownMenuItem as="button" @click="copyText(noteId)">
-                    <Hash class="mr-2 size-4" />
+                    <Hash />
                     {{ m.sunny_zany_jellyfish_pop() }}
                 </DropdownMenuItem>
             </DropdownMenuGroup>
             <DropdownMenuSeparator />
             <DropdownMenuGroup>
                 <DropdownMenuItem as="button" @click="copyText(url)">
-                    <Link class="mr-2 size-4" />
+                    <Link />
                     {{ m.ago_new_pelican_drip() }}
                 </DropdownMenuItem>
                 <DropdownMenuItem as="button" v-if="isRemote" @click="copyText(remoteUrl)">
-                    <Link class="mr-2 size-4" />
+                    <Link />
                     {{ m.solid_witty_zebra_walk() }}
                 </DropdownMenuItem>
                 <DropdownMenuItem as="a" v-if="isRemote" target="_blank" rel="noopener noreferrer" :href="remoteUrl">
-                    <ExternalLink class="mr-2 size-4" />
+                    <ExternalLink />
                     {{ m.active_trite_lark_inspire() }}
                 </DropdownMenuItem>
             </DropdownMenuGroup>
             <DropdownMenuSeparator v-if="authorIsMe" />
             <DropdownMenuGroup v-if="authorIsMe">
                 <DropdownMenuItem as="button" :disabled="true">
-                    <Delete class="mr-2 size-4" />
+                    <Delete />
                     {{ m.real_green_clownfish_pet() }}
                 </DropdownMenuItem>
                 <DropdownMenuItem as="button" @click="_delete">
-                    <Trash class="mr-2 size-4" />
+                    <Trash />
                     {{ m.tense_quick_cod_favor() }}
                 </DropdownMenuItem>
             </DropdownMenuGroup>
             <DropdownMenuSeparator v-if="loggedIn && !authorIsMe" />
             <DropdownMenuGroup v-if="loggedIn && !authorIsMe">
                 <DropdownMenuItem as="button" :disabled="true">
-                    <Flag class="mr-2 size-4" />
+                    <Flag />
                     {{ m.great_few_jaguar_rise() }}
                 </DropdownMenuItem>
                 <DropdownMenuItem as="button" @click="blockUser(authorId)">
-                    <Ban class="mr-2 size-4" />
+                    <Ban />
                     {{ m.misty_soft_sparrow_vent() }}
                 </DropdownMenuItem>
             </DropdownMenuGroup>

components/preferences/code.vue

@@ -1,5 +1,5 @@
 <template>
-    <Collapsible :as="Card" class="grid items-center p-6 gap-4" v-slot="{ open }">
+    <Collapsible :as="Card" class="grid items-center px-6 py-4 gap-4" v-slot="{ open }">
         <div class="grid grid-cols-[1fr,auto] items-center gap-4">
             <CardHeader class="space-y-0.5 p-0">
                 <CardTitle class="text-base">

components/preferences/emojis/emoji.vue

@@ -23,16 +23,16 @@
         </Card>
         <DropdownMenuContent class="min-w-48">
             <DropdownMenuItem @click="editName">
-                <TextCursorInput class="mr-2 size-4" />
+                <TextCursorInput />
                 {{ m.cuddly_such_swallow_hush() }}
             </DropdownMenuItem>
             <!-- <DropdownMenuItem @click="editCaption">
-                <Captions class="mr-2 size-4" />
+                <Captions />
                 <span>Add caption</span>
             </DropdownMenuItem>
             <DropdownMenuSeparator /> -->
             <DropdownMenuItem @click="_delete">
-                <Delete class="mr-2 size-4" />
+                <Delete />
                 {{ m.tense_quick_cod_favor() }}
             </DropdownMenuItem>
         </DropdownMenuContent>

components/preferences/select.vue

@@ -1,5 +1,5 @@
 <template>
-    <Card class="grid grid-cols-[1fr,auto] items-center p-6 gap-2">
+    <Card class="grid grid-cols-[1fr,auto] items-center px-6 py-4 gap-2">
         <CardHeader class="space-y-0.5 p-0">
             <CardTitle class="text-base">
                 {{ setting.title() }}

components/preferences/string.vue

@@ -1,5 +1,5 @@
 <template>
-    <Card class="grid grid-rows-[1fr,auto] xl:grid-rows-none xl:grid-cols-[1fr,auto] items-center p-6 gap-4">
+    <Card class="grid grid-rows-[1fr,auto] xl:grid-rows-none xl:grid-cols-[1fr,auto] items-center px-6 py-4 gap-4">
         <CardHeader class="space-y-0.5 p-0">
             <CardTitle class="text-base">
                 {{ setting.title() }}

components/preferences/switch.vue

@@ -1,5 +1,5 @@
 <template>
-    <Card class="grid grid-cols-[1fr,auto] items-center p-6 gap-2">
+    <Card class="grid grid-cols-[1fr,auto] items-center px-6 py-4 gap-2">
         <CardHeader class="space-y-0.5 p-0">
             <CardTitle class="text-base">
                 {{ setting.title() }}

components/profiles/profile-actions.vue

@@ -6,55 +6,55 @@
         <DropdownMenuContent class="min-w-56">
             <DropdownMenuGroup>
                 <DropdownMenuItem as="button" @click="copyText(account.username)">
-                    <AtSign class="mr-2 size-4" />
+                    <AtSign />
                     {{ m.cool_dark_tapir_belong() }}
                 </DropdownMenuItem>
                 <DropdownMenuItem as="button" @click="copyText(JSON.stringify(account, null, 4))">
-                    <Code class="mr-2 size-4" />
+                    <Code />
                     {{ m.yummy_moving_scallop_sail() }}
                 </DropdownMenuItem>
                 <DropdownMenuItem as="button" @click="copyText(account.id)">
-                    <Hash class="mr-2 size-4" />
+                    <Hash />
                     {{ m.sunny_zany_jellyfish_pop() }}
                 </DropdownMenuItem>
             </DropdownMenuGroup>
             <DropdownMenuSeparator />
             <DropdownMenuGroup>
                 <DropdownMenuItem as="button" @click="copyText(url)">
-                    <Link class="mr-2 size-4" />
+                    <Link />
                     {{ m.ago_new_pelican_drip() }}
                 </DropdownMenuItem>
                 <DropdownMenuItem as="button" @click="copyText(account.url)">
-                    <Link class="mr-2 size-4" />
+                    <Link />
                     {{ m.solid_witty_zebra_walk() }}
                 </DropdownMenuItem>
                 <DropdownMenuItem as="a" v-if="isRemote" target="_blank" rel="noopener noreferrer" :href="account.url">
-                    <ExternalLink class="mr-2 size-4" />
+                    <ExternalLink />
                     {{ m.active_trite_lark_inspire() }}
                 </DropdownMenuItem>
             </DropdownMenuGroup>
             <DropdownMenuSeparator v-if="isLoggedIn && !isMe" />
             <DropdownMenuGroup v-if="isLoggedIn && !isMe">
                 <DropdownMenuItem as="button" @click="muteUser(account.id)">
-                    <VolumeX class="mr-2 size-4" />
+                    <VolumeX />
                     {{ m.spare_wild_mole_intend() }}
                 </DropdownMenuItem>
                 <DropdownMenuItem as="button" @click="blockUser(account.id)">
-                    <Ban class="mr-2 size-4" />
+                    <Ban />
                     {{ m.misty_soft_sparrow_vent() }}
                 </DropdownMenuItem>
             </DropdownMenuGroup>
             <DropdownMenuSeparator v-if="isRemote" />
             <DropdownMenuGroup v-if="isRemote">
                 <DropdownMenuItem as="button" @click="refresh">
-                    <RefreshCw class="mr-2 size-4" />
+                    <RefreshCw />
                     {{ m.slow_chunky_chipmunk_hush() }}
                 </DropdownMenuItem>
             </DropdownMenuGroup>
             <DropdownMenuSeparator v-if="isLoggedIn && !isMe" />
             <DropdownMenuGroup v-if="isLoggedIn && !isMe">
                 <DropdownMenuItem as="button" :disabled="true">
-                    <Flag class="mr-2 size-4" />
+                    <Flag />
                     {{ m.great_few_jaguar_rise() }}
                 </DropdownMenuItem>
             </DropdownMenuGroup>

components/sidebars/theme-switcher.vue

@@ -1,44 +0,0 @@
-<script setup lang="ts">
-import { Moon, Sun, Wrench } from "lucide-vue-next";
-import { Button } from "../ui/button";
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-} from "../ui/dropdown-menu";
-
-const colorMode = useColorMode();
-
-const themeNames = {
-    light: "Light",
-    dark: "Dark",
-    system: "System",
-} as Record<string, string>;
-</script>
-
-<template>
-    <DropdownMenu>
-        <DropdownMenuTrigger as-child>
-            <Button variant="outline" class="w-full justify-start">
-                <Sun class="size-[1.2rem] scale-100 transition-all dark:scale-0 dark:hidden inline" />
-                <Moon class="size-[1.2rem] scale-0 transition-all dark:scale-100 hidden dark:inline" />
-                {{ themeNames[colorMode.preference] }}
-            </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start" >
-            <DropdownMenuItem @click="colorMode.preference = 'light'">
-                <Sun class="size-4 mr-2" />
-                Light
-            </DropdownMenuItem>
-            <DropdownMenuItem @click="colorMode.preference = 'dark'">
-                <Moon class="size-4 mr-2" />
-                Dark
-            </DropdownMenuItem>
-            <DropdownMenuItem @click="colorMode.preference = 'system'">
-                <Wrench class="size-4 mr-2" />
-                System
-            </DropdownMenuItem>
-        </DropdownMenuContent>
-    </DropdownMenu>
-</template>

components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -25,18 +25,15 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <DropdownMenuCheckboxItem
+    <DropdownMenuCheckboxItem v-bind="forwarded" :class="cn(
-    v-bind="forwarded"
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-    :class=" cn(
+        props.class,
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+    )">
-      props.class,
+        <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-    )"
+            <DropdownMenuItemIndicator>
-  >
+                <Check class="!mr-0" />
-    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+            </DropdownMenuItemIndicator>
-      <DropdownMenuItemIndicator>
+        </span>
-        <Check class="size-4" />
+        <slot />
-      </DropdownMenuItemIndicator>
+    </DropdownMenuCheckboxItem>
-    </span>
-    <slot />
-  </DropdownMenuCheckboxItem>
 </template>

components/ui/dropdown-menu/DropdownMenuItem.vue

@@ -21,14 +21,11 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <DropdownMenuItem
+    <DropdownMenuItem v-bind="forwardedProps" :class="cn(
-    v-bind="forwardedProps"
+        'relative flex cursor-default select-none items-center rounded-sm gap-2 px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:mr-0.5 w-full',
-    :class="cn(
+        inset && 'pl-8',
-      'relative flex cursor-default select-none items-center rounded-sm gap-2 px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50  [&>svg]:size-4 [&>svg]:shrink-0 w-full',
+        props.class,
-      inset && 'pl-8',
+    )">
-      props.class,
+        <slot />
-    )"
+    </DropdownMenuItem>
-  >
-    <slot />
-  </DropdownMenuItem>
 </template>

components/ui/dropdown-menu/DropdownMenuRadioItem.vue

@@ -26,18 +26,15 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <DropdownMenuRadioItem
+    <DropdownMenuRadioItem v-bind="forwarded" :class="cn(
-    v-bind="forwarded"
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-    :class="cn(
+        props.class,
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+    )">
-      props.class,
+        <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-    )"
+            <DropdownMenuItemIndicator>
-  >
+                <Circle class="size-2 fill-current" />
-    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+            </DropdownMenuItemIndicator>
-      <DropdownMenuItemIndicator>
+        </span>
-        <Circle class="h-2 w-2 fill-current" />
+        <slot />
-      </DropdownMenuItemIndicator>
+    </DropdownMenuRadioItem>
-    </span>
-    <slot />
-  </DropdownMenuRadioItem>
 </template>

pages/preferences/[page].vue

@@ -1,9 +1,10 @@
 <template>
-    <div class="md:px-8 px-4 py-2 max-w-7xl mx-auto w-full">
+    <!-- Add padding at bottom to prevent hiding some content by the bottom navbar -->
+    <div class="md:px-8 px-4 py-4 pb-20 max-w-7xl mx-auto w-full">
         <h1 class="scroll-m-20 text-3xl font-extrabold tracking-tight lg:text-4xl capitalize">
             {{ page }}
         </h1>
-        <div class="grid grid-cols-1 gap-4 mt-6">
+        <div class="grid grid-cols-1 gap-2 mt-6">
             <template v-for="[id, setting] of settingEntries">
                 <SwitchPreference v-if="setting.type === SettingType.Boolean" :setting="(setting as BooleanSetting)" @update:setting="updateSetting(id, setting)" />
                 <SelectPreference v-else-if="setting.type === SettingType.Enum" :setting="(setting as EnumSetting)" @update:setting="updateSetting(id, setting)" />