feat: ✨ Add new Enum settings type

components/settings/renderer.vue

@@ -4,6 +4,7 @@
             <SettingBoolean v-if="setting.type === SettingType.Boolean" :id="id" />
 
             <SettingCode v-else-if="setting.type === SettingType.Code" :id="id" />
+            <SettingEnum v-else-if="setting.type === SettingType.Enum" :id="id" />
             <SettingOther v-else :id="id" />
         </div>
     </div>
@@ -13,6 +14,7 @@
 import { type SettingIds, SettingType } from "~/settings";
 import SettingBoolean from "./types/Boolean.vue";
 import SettingCode from "./types/Code.vue";
+import SettingEnum from "./types/Enum.vue";
 import SettingOther from "./types/Other.vue";
 
 const props = defineProps<{

components/settings/types/Enum.vue

@@ -0,0 +1,63 @@
+<template>
+    <Select.Root :collection="collection" v-model:model-value="selectedValues">
+        <Select.Label class="select-none text-base/6 data-[disabled]:opacity-50 sm:text-sm/6 text-white font-semibold">{{ setting.title }}</Select.Label>
+        <Select.Control class="mt-1">
+            <Select.Trigger :disabled="setting.notImplemented" class="disabled:opacity-70 disabled:hover:cursor-not-allowed bg-dark-500 rounded-md border-0 py-1.5 text-gray-50 shadow-sm ring-1 ring-inset ring-white/10 sm:text-sm sm:leading-6 w-full md:w-auto min-w-72 text-left px-4 flex flew-row justify-between items-center">
+                <Select.ValueText placeholder="Select an option" />
+                <Select.Indicator class="size-4">
+                    <iconify-icon icon="tabler:chevron-down" class="size-4" width="unset" aria-hidden="true" />
+                </Select.Indicator>
+            </Select.Trigger>
+        </Select.Control>
+        <p v-if="setting.notImplemented" class="text-xs mt-1 row-start-3 text-red-300 font-semibold">Not
+            implemented
+        </p>
+        <Teleport to="body">
+            <Select.Positioner>
+                <Select.Content
+                    class="z-10 mt-1 max-h-56 w-full overflow-auto rounded-md bg-dark-700 py-1 text-base shadow-lg ring-1 ring-white/10 focus:outline-none sm:text-sm min-w-72">
+                    <Select.ItemGroup>
+                        <Select.Item v-for="item in collection.items" :key="item.value" :item="item"
+                            :class="['text-gray-100 hover:bg-dark-900 flex flex-row gap-4 justify-between items-center duration-100 relative cursor-default select-none py-2 px-4 group']">
+                            <Select.ItemText
+                                :class="['group-data-[state=checked]:font-semibold font-normal block truncate']">{{
+                                item.label }}</Select.ItemText>
+                            <Select.ItemIndicator
+                                :class="['text-primary-600 hidden group-data-[state=checked]:flex items-center justify-center']">
+                                <iconify-icon icon="tabler:check" class="size-4" width="unset" aria-hidden="true" />
+                            </Select.ItemIndicator>
+                        </Select.Item>
+                    </Select.ItemGroup>
+                </Select.Content>
+            </Select.Positioner>
+        </Teleport>
+        <Select.HiddenSelect />
+    </Select.Root>
+</template>
+
+<script lang="ts" setup>
+import { Select, createListCollection } from "@ark-ui/vue/select";
+import type { EnumSetting, SettingIds } from "~/settings";
+
+const props = defineProps<{
+    id: SettingIds;
+}>();
+
+const setting = useSetting(props.id) as Ref<EnumSetting>;
+const selectedValues = ref([setting.value.value]);
+
+const collection = createListCollection({
+    items: setting.value.options.map((option) => ({
+        value: option.value,
+        label: option.label,
+    })),
+});
+
+watch(selectedValues, (value) => {
+    if (!value[0]) {
+        return;
+    }
+
+    setting.value.value = value[0];
+});
+</script>

settings.ts

@@ -29,7 +29,11 @@ export type BooleanSetting = Setting & {
 export type EnumSetting = Setting & {
     type: SettingType.Enum;
     value: string;
-    options: string[];
+    options: {
+        value: string;
+        label: string;
+        icon?: string;
+    }[];
 };
 
 export type FloatSetting = Setting & {
@@ -73,6 +77,7 @@ export enum SettingIds {
     ConfirmFollow = "confirm-follow",
     ConfirmReblog = "confirm-reblog",
     ConfirmFavourite = "confirm-favourite",
+    EmojiTheme = "emoji-theme",
 }
 
 export const settings: Record<SettingIds, Setting> = {
@@ -97,8 +102,22 @@ export const settings: Record<SettingIds, Setting> = {
         description: "UI theme",
         type: SettingType.Enum,
         value: "dark",
-        options: ["light", "dark"],
+        options: [
+            {
+                value: "dark",
+                label: "Dark",
+            },
+            {
+                value: "light",
+                label: "Light",
+            },
+            {
+                value: "system",
+                label: "System",
+            },
+        ],
         page: SettingPages.Appearance,
+        notImplemented: true,
     } as EnumSetting,
     [SettingIds.CustomEmojis]: {
         title: "Render Custom Emojis",
@@ -161,6 +180,28 @@ export const settings: Record<SettingIds, Setting> = {
         page: SettingPages.Behaviour,
         notImplemented: true,
     } as BooleanSetting,
+    [SettingIds.EmojiTheme]: {
+        title: "Emoji Theme",
+        description: "Theme used for rendering emojis",
+        type: SettingType.Enum,
+        value: "native",
+        options: [
+            {
+                value: "native",
+                label: "Operating System",
+            },
+            {
+                value: "twemoji",
+                label: "Twitter emoji set",
+            },
+            {
+                value: "noto",
+                label: "Noto Emoji",
+            },
+        ],
+        page: SettingPages.Appearance,
+        notImplemented: true,
+    } as EnumSetting,
 };
 
 export const getSettingsForPage = (page: SettingPages): Partial<Settings> => {