feat: ✨ Add Enum preference type support

components/preferences/select.vue

@@ -0,0 +1,46 @@
+<template>
+    <Card class="grid grid-cols-[1fr,auto] items-center p-6 gap-2">
+        <CardHeader class="space-y-0.5 p-0">
+            <CardTitle class="text-base">
+                {{ setting.title }}
+            </CardTitle>
+            <CardDescription>
+                {{ setting.description }}
+            </CardDescription>
+        </CardHeader>
+        <CardFooter class="p-0">
+            <Select :model-value="setting.value" @update:model-value="v => { setting.value = v }">
+                <SelectTrigger>
+                    <SelectValue placeholder="Select an option" />
+                </SelectTrigger>
+                <SelectContent>
+                    <SelectItem v-for="option of setting.options" :value="option.value">
+                        {{ option.label }}
+                    </SelectItem>
+                </SelectContent>
+            </Select>
+        </CardFooter>
+    </Card>
+</template>
+
+<script lang="ts" setup>
+import {
+    Card,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+} from "~/components/ui/card";
+import type { EnumSetting } from "~/settings.ts";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "../ui/select";
+
+defineModel<EnumSetting>("setting", {
+    required: true,
+});
+</script>

components/preferences/switch.vue

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

components/profiles/avatar.vue

@@ -1,5 +1,5 @@
 <template>
-    <Avatar shape="square">
+    <Avatar :shape="(shape.value as 'circle' | 'square')">
         <AvatarFallback v-if="name">
             {{ getInitials(name) }}
         </AvatarFallback>
@@ -8,6 +8,7 @@
 </template>
 
 <script lang="ts" setup>
+import { SettingIds } from "~/settings";
 import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
 
 const { name } = defineProps<{
@@ -28,4 +29,6 @@ const getInitials = (name: string): string => {
 
     return `${firstLetter}${secondLetter}`.toUpperCase();
 };
+
+const shape = useSetting(SettingIds.AvatarShape);
 </script>

components/sidebars/sidebar.vue

@@ -13,8 +13,11 @@ import {
     SidebarProvider,
     SidebarTrigger,
 } from "~/components/ui/sidebar";
+import { SettingIds } from "~/settings";
 import LeftSidebar from "./left-sidebar.vue";
 import RightSidebar from "./right-sidebar.vue";
+
+const showRightSidebar = useSetting(SettingIds.NotificationsSidebar);
 </script>
 
 <template>
@@ -45,6 +48,6 @@ import RightSidebar from "./right-sidebar.vue";
                 <slot />
             </div>
         </SidebarInset>
-        <RightSidebar v-if="identity" />
+        <RightSidebar v-if="identity" v-show="showRightSidebar.value" />
     </SidebarProvider>
 </template>

components/timelines/global.vue

@@ -0,0 +1,34 @@
+<template>
+    <Timeline type="status" :items="(items as Status[])" :is-loading="isLoading" :has-reached-end="hasReachedEnd"
+        :error="error" :load-next="loadNext" :load-prev="loadPrev" :remove-item="removeItem"
+        :update-item="updateItem" />
+</template>
+
+<script lang="ts" setup>
+import type { Status } from "@versia/client/types";
+import { useGlobalTimeline } from "~/composables/GlobalTimeline";
+import Timeline from "./timeline.vue";
+
+const {
+    error,
+    hasReachedEnd,
+    isLoading,
+    items,
+    loadNext,
+    loadPrev,
+    removeItem,
+    updateItem,
+} = useGlobalTimeline(client.value);
+
+useListen("note:delete", ({ id }) => {
+    removeItem(id);
+});
+
+useListen("note:edit", (updatedNote) => {
+    updateItem(updatedNote);
+});
+
+useListen("composer:send", () => {
+    loadPrev();
+});
+</script>

components/timelines/timeline.vue

@@ -2,7 +2,7 @@
 <template>
     <div class="timeline rounded">
         <TransitionGroup name="timeline-item" tag="div"
-            class="timeline-items *:rounded space-y-4 *:border *:border-border/50">
+            class="timeline-items *:rounded space-y-4 *:border">
             <TimelineItem :type="type" v-for="item in items" :key="item.id" :item="item" @update="updateItem"
                 @delete="removeItem" />
         </TransitionGroup>