feat: ✨ Implement Code preference type

components/preferences/code.vue

@@ -0,0 +1,49 @@
+<template>
+    <Collapsible :as="Card" class="grid items-center p-6 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">
+                    {{ setting.title() }}
+                </CardTitle>
+                <CardDescription>
+                    {{ setting.description() }}
+                </CardDescription>
+            </CardHeader>
+            <CollapsibleTrigger :as-child="true">
+                <Button variant="outline" size="icon" class="ml-auto [&_svg]:data-[state=open]:-rotate-180"
+                    :title="open ? 'Collapse' : 'Expand'">
+                    <ChevronDown class="duration-200" />
+                </Button>
+            </CollapsibleTrigger>
+        </div>
+        <CollapsibleContent :as-child="true">
+            <CardFooter class="p-1">
+                <Textarea :rows="10" :model-value="setting.value"
+                    @update:model-value="v => { setting.value = String(v) }" />
+            </CardFooter>
+        </CollapsibleContent>
+    </Collapsible>
+</template>
+
+<script lang="ts" setup>
+import { ChevronDown } from "lucide-vue-next";
+import { Button } from "~/components/ui/button";
+import {
+    Card,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+} from "~/components/ui/card";
+import {
+    Collapsible,
+    CollapsibleContent,
+    CollapsibleTrigger,
+} from "~/components/ui/collapsible";
+import { Textarea } from "~/components/ui/textarea";
+import type { CodeSetting } from "~/settings.ts";
+
+defineModel<CodeSetting>("setting", {
+    required: true,
+});
+</script>

pages/preferences/[page].vue

@@ -3,21 +3,24 @@
         <h1 class="scroll-m-20 text-3xl font-extrabold tracking-tight lg:text-4xl capitalize">
             {{ page }}
         </h1>   
-        <div class="grid grid-cols-1 2xl:grid-cols-2 gap-4 mt-6">
+        <div class="grid grid-cols-1 gap-4 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)" />
+                <CodePreference v-else-if="setting.type === SettingType.Code" :setting="(setting as CodeSetting)" @update:setting="updateSetting(id, setting)" />
             </template>
         </div>
     </div>
 </template>
 
 <script lang="ts" setup>
+import CodePreference from "~/components/preferences/code.vue";
 import SelectPreference from "~/components/preferences/select.vue";
 import SwitchPreference from "~/components/preferences/switch.vue";
 import * as m from "~/paraglide/messages.js";
 import {
     type BooleanSetting,
+    type CodeSetting,
     type EnumSetting,
     type Setting,
     type SettingIds,