chore: ⬆️ Upgrade to the latest Shadcn-Vue version

components/composer/composer.vue

@@ -44,8 +44,8 @@
                 <Toggle
                     variant="default"
                     size="sm"
-                    :pressed="state.contentType === 'text/html'"
-                    @update:pressed="
+                    :model-value="state.contentType === 'text/html'"
+                    @update:model-value="
                         (i) =>
                             (state.contentType = i ? 'text/html' : 'text/plain')
                     "
@@ -61,6 +61,8 @@
             <SelectTrigger
                 :as-child="true"
                 :disabled="relation?.type === 'edit'"
+                :disable-default-classes="true"
+                :disable-select-icon="true"
             >
                 <Button variant="ghost" size="icon">
                     <component
@@ -110,11 +112,7 @@
         </Tooltip>
         <Tooltip>
             <TooltipTrigger as="div">
-                <Toggle
-                    variant="default"
-                    size="sm"
-                    v-model:pressed="state.sensitive"
-                >
+                <Toggle variant="default" size="sm" v-model="state.sensitive">
                     <TriangleAlert class="!size-5" />
                 </Toggle>
             </TooltipTrigger>
@@ -153,19 +151,23 @@ import {
     Smile,
     TriangleAlert,
 } from "lucide-vue-next";
-import { SelectTrigger } from "radix-vue";
 import { toast } from "vue-sonner";
 import Note from "~/components/notes/note.vue";
-import { Select, SelectContent, SelectItem } from "~/components/ui/select";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+} from "~/components/ui/select";
 import * as m from "~/paraglide/messages.js";
 import { SettingIds } from "~/settings";
 import EditorContent from "../editor/content.vue";
 import { Button } from "../ui/button";
+import { DialogFooter } from "../ui/dialog";
 import { Input } from "../ui/input";
 import { Toggle } from "../ui/toggle";
-import { DialogFooter } from "../ui/dialog";
-import Files from "./files.vue";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+import Files from "./files.vue";
 
 const { Control_Enter, Command_Enter } = useMagicKeys();
 const ctrlEnterSend = useSetting(SettingIds.CtrlEnterToSend);
@@ -221,7 +223,7 @@ const state = reactive({
     contentType: "text/html" as "text/html" | "text/plain",
     visibility: (relation?.type === "edit"
         ? relation.note.visibility
-        : defaultVisibility.value.value ?? "public") as Status["visibility"],
+        : (defaultVisibility.value.value ?? "public")) as Status["visibility"],
     files: (relation?.type === "edit"
         ? relation.note.media_attachments.map((a) => ({
               apiId: a.id,

components/composer/dialog.vue

@@ -60,7 +60,7 @@ const relation = ref(
         type: "reply" | "quote" | "edit";
         note: Status;
         source?: StatusSource;
-    } | null
+    } | null,
 );
 </script>
 

components/composer/file-preview.vue

@@ -1,13 +1,23 @@
 <template>
     <DropdownMenu>
-        <DropdownMenuTrigger as="button"
+        <DropdownMenuTrigger
+            as="button"
             :disabled="file.uploading || file.updating"
-            class="block bg-card text-card-foreground shadow-sm h-28 overflow-hidden rounded relative min-w-28 *:disabled:opacity-50">
+            class="block bg-card text-card-foreground shadow-sm h-28 overflow-hidden rounded relative min-w-28 *:disabled:opacity-50"
+        >
             <Avatar class="h-28 w-full" shape="square">
-                <AvatarImage class="!object-contain" :src="createObjectURL(file.file)" />
+                <AvatarImage
+                    class="!object-contain"
+                    :src="createObjectURL(file.file)"
+                />
             </Avatar>
-            <Badge v-if="!file.uploading && !file.updating" class="absolute bottom-1 right-1" variant="default">{{ formatBytes(file.file.size) }}</Badge>
-            <Badge v-else class="absolute bottom-1 right-1 rounded px-1 !opacity-100" variant="default"><Loader class="animate-spin size-4" /></Badge>
+            <Badge
+                v-if="file.uploading && !file.updating"
+                class="absolute bottom-1 right-1"
+                variant="default"
+                >{{ formatBytes(file.file.size) }}</Badge
+            >
+            <Spinner v-else class="absolute bottom-1 right-1 size-8 p-1.5" />
         </DropdownMenuTrigger>
         <DropdownMenuContent class="min-w-48">
             <DropdownMenuLabel>{{ file.file.name }}</DropdownMenuLabel>
@@ -32,6 +42,7 @@
 
 <script lang="ts" setup>
 import { Captions, Delete, Loader, TextCursorInput } from "lucide-vue-next";
+import Spinner from "~/components/graphics/spinner.vue";
 import { confirmModalService } from "~/components/modals/composable.ts";
 import { Avatar, AvatarImage } from "~/components/ui/avatar";
 import { Badge } from "~/components/ui/badge";
@@ -121,6 +132,8 @@ const formatBytes = (bytes: number) => {
     const digitsAfterPoint = 2;
     const sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
     const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return `${Number.parseFloat((bytes / k ** i).toFixed(digitsAfterPoint))} ${sizes[i]}`;
+    return `${Number.parseFloat((bytes / k ** i).toFixed(digitsAfterPoint))} ${
+        sizes[i]
+    }`;
 };
 </script>