From 7e9ccbc932cea284fc9c47340f1917325dd3c8ac Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Sun, 9 Feb 2025 19:50:57 +0100
Subject: [PATCH] refactor: :lipstick: Improve appearance of dropdown menus and
 settings pages

---
 components/composer/file-preview.vue          |  6 +--
 components/notes/menu.vue                     | 20 ++++-----
 components/preferences/code.vue               |  4 +-
 components/preferences/emojis/emoji.vue       |  6 +--
 components/preferences/select.vue             |  4 +-
 components/preferences/string.vue             |  4 +-
 components/preferences/switch.vue             |  4 +-
 components/profiles/profile-actions.vue       | 20 ++++-----
 components/sidebars/theme-switcher.vue        | 44 -------------------
 .../DropdownMenuCheckboxItem.vue              | 25 +++++------
 .../ui/dropdown-menu/DropdownMenuItem.vue     | 17 +++----
 .../dropdown-menu/DropdownMenuRadioItem.vue   | 25 +++++------
 pages/preferences/[page].vue                  |  9 ++--
 13 files changed, 68 insertions(+), 120 deletions(-)
 delete mode 100644 components/sidebars/theme-switcher.vue

diff --git a/components/composer/file-preview.vue b/components/composer/file-preview.vue
index a4cbad8..501b322 100644
--- a/components/composer/file-preview.vue
+++ b/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>
diff --git a/components/notes/menu.vue b/components/notes/menu.vue
index 25a8d80..306ec95 100644
--- a/components/notes/menu.vue
+++ b/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>
diff --git a/components/preferences/code.vue b/components/preferences/code.vue
index e10c67e..287b617 100644
--- a/components/preferences/code.vue
+++ b/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">
@@ -46,4 +46,4 @@ import type { CodeSetting } from "~/settings.ts";
 defineModel<CodeSetting>("setting", {
     required: true,
 });
-</script>
\ No newline at end of file
+</script>
diff --git a/components/preferences/emojis/emoji.vue b/components/preferences/emojis/emoji.vue
index facd37e..d301f00 100644
--- a/components/preferences/emojis/emoji.vue
+++ b/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>
diff --git a/components/preferences/select.vue b/components/preferences/select.vue
index f327bd0..5a5e611 100644
--- a/components/preferences/select.vue
+++ b/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() }}
@@ -43,4 +43,4 @@ import {
 defineModel<EnumSetting>("setting", {
     required: true,
 });
-</script>
\ No newline at end of file
+</script>
diff --git a/components/preferences/string.vue b/components/preferences/string.vue
index 8ed5528..3f3a116 100644
--- a/components/preferences/string.vue
+++ b/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() }}
@@ -28,4 +28,4 @@ import type { StringSetting } from "~/settings.ts";
 defineModel<StringSetting>("setting", {
     required: true,
 });
-</script>
\ No newline at end of file
+</script>
diff --git a/components/preferences/switch.vue b/components/preferences/switch.vue
index 42aa73b..f26cc7a 100644
--- a/components/preferences/switch.vue
+++ b/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() }}
@@ -28,4 +28,4 @@ import type { BooleanSetting } from "~/settings.ts";
 defineModel<BooleanSetting>("setting", {
     required: true,
 });
-</script>
\ No newline at end of file
+</script>
diff --git a/components/profiles/profile-actions.vue b/components/profiles/profile-actions.vue
index f673e7a..d809357 100644
--- a/components/profiles/profile-actions.vue
+++ b/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>
diff --git a/components/sidebars/theme-switcher.vue b/components/sidebars/theme-switcher.vue
deleted file mode 100644
index 3840cd4..0000000
--- a/components/sidebars/theme-switcher.vue
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
index 58a7df0..ddd63ac 100644
--- a/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ b/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -25,18 +25,15 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <DropdownMenuCheckboxItem
-    v-bind="forwarded"
-    :class=" cn(
-      '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="size-4" />
-      </DropdownMenuItemIndicator>
-    </span>
-    <slot />
-  </DropdownMenuCheckboxItem>
+    <DropdownMenuCheckboxItem v-bind="forwarded" :class="cn(
+        '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" />
+            </DropdownMenuItemIndicator>
+        </span>
+        <slot />
+    </DropdownMenuCheckboxItem>
 </template>
diff --git a/components/ui/dropdown-menu/DropdownMenuItem.vue b/components/ui/dropdown-menu/DropdownMenuItem.vue
index 294ff09..a2554b4 100644
--- a/components/ui/dropdown-menu/DropdownMenuItem.vue
+++ b/components/ui/dropdown-menu/DropdownMenuItem.vue
@@ -21,14 +21,11 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <DropdownMenuItem
-    v-bind="forwardedProps"
-    :class="cn(
-      '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',
-      inset && 'pl-8',
-      props.class,
-    )"
-  >
-    <slot />
-  </DropdownMenuItem>
+    <DropdownMenuItem v-bind="forwardedProps" :class="cn(
+        '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',
+        inset && 'pl-8',
+        props.class,
+    )">
+        <slot />
+    </DropdownMenuItem>
 </template>
diff --git a/components/ui/dropdown-menu/DropdownMenuRadioItem.vue b/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
index 38f2106..24fbd5f 100644
--- a/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
+++ b/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -26,18 +26,15 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <DropdownMenuRadioItem
-    v-bind="forwarded"
-    :class="cn(
-      '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="h-2 w-2 fill-current" />
-      </DropdownMenuItemIndicator>
-    </span>
-    <slot />
-  </DropdownMenuRadioItem>
+    <DropdownMenuRadioItem v-bind="forwarded" :class="cn(
+        '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" />
+            </DropdownMenuItemIndicator>
+        </span>
+        <slot />
+    </DropdownMenuRadioItem>
 </template>
diff --git a/pages/preferences/[page].vue b/pages/preferences/[page].vue
index aa07ba1..836f23b 100644
--- a/pages/preferences/[page].vue
+++ b/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">
+        </h1>
+        <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)" />
@@ -60,4 +61,4 @@ const updateSetting = (id: SettingIds, setting: Setting) => {
         [id]: setting,
     };
 };
-</script>
\ No newline at end of file
+</script>