feat: ✨ Add more preferences

components/composer/composer.vue

@@ -110,6 +110,7 @@ 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 { SettingIds } from "~/settings";
 import { Button } from "../ui/button";
 import { Input } from "../ui/input";
 import { Textarea } from "../ui/textarea";
@@ -117,10 +118,11 @@ import { Toggle } from "../ui/toggle";
 import Files from "./files.vue";
 
 const { Control_Enter, Command_Enter } = useMagicKeys();
+const ctrlEnterSend = useSetting(SettingIds.CtrlEnterToSend);
 const fileInput = ref<HTMLInputElement | null>(null);
 
 watch([Control_Enter, Command_Enter], () => {
-    if (sending.value) {
+    if (sending.value || !ctrlEnterSend.value.value) {
         return;
     }
 

components/composer/dialog.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Dialog, DialogContent } from "@/components/ui/dialog";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
 import type { Status, StatusSource } from "@versia/client/types";
 import { toast } from "vue-sonner";
 import Composer from "./composer.vue";
@@ -58,6 +58,12 @@ const relation = ref(
 <template>
     <Dialog v-model:open="open" @update:open="o => {if (!o) { relation = null}}">
         <DialogContent :hide-close="true" class="sm:max-w-xl max-w-full w-full grid-rows-[minmax(0,1fr)_auto] max-h-[90dvh] p-5 pt-6 top-0 sm:top-1/2 translate-y-0 sm:-translate-y-1/2">
+            <DialogTitle class="sr-only">
+                {{ relation?.type === "reply" ? "Reply" : relation?.type === "quote" ? "Quote" : "Compose" }}
+            </DialogTitle>
+            <DialogDescription class="sr-only">
+                {{ relation?.type === "reply" ? "Reply to this status" : relation?.type === "quote" ? "Quote this status" : "Compose a new status" }}
+            </DialogDescription>
             <Composer :relation="relation ?? undefined" />
         </DialogContent>
     </Dialog>

components/notes/actions.vue

@@ -27,6 +27,8 @@
 import { Ellipsis, Heart, Quote, Repeat, Reply } from "lucide-vue-next";
 import { toast } from "vue-sonner";
 import { Button } from "~/components/ui/button";
+import { SettingIds } from "~/settings";
+import { confirmModalService } from "../modals/composable";
 import Menu from "./menu.vue";
 
 const { noteId } = defineProps<{
@@ -50,7 +52,23 @@ const emit = defineEmits<{
     delete: [];
 }>();
 
+const confirmLikes = useSetting(SettingIds.ConfirmLike);
+const confirmReblogs = useSetting(SettingIds.ConfirmReblog);
+
 const like = async () => {
+    if (confirmLikes.value.value) {
+        const confirmation = await confirmModalService.confirm({
+            title: "Like status",
+            message: "Are you sure you want to like this status?",
+            confirmText: "Like",
+            inputType: "none",
+        });
+
+        if (!confirmation.confirmed) {
+            return;
+        }
+    }
+
     const id = toast.loading("Liking status...");
     const { data } = await client.value.favouriteStatus(noteId);
     toast.dismiss(id);
@@ -59,6 +77,19 @@ const like = async () => {
 };
 
 const unlike = async () => {
+    if (confirmLikes.value.value) {
+        const confirmation = await confirmModalService.confirm({
+            title: "Unlike status",
+            message: "Are you sure you want to unlike this status?",
+            confirmText: "Unlike",
+            inputType: "none",
+        });
+
+        if (!confirmation.confirmed) {
+            return;
+        }
+    }
+
     const id = toast.loading("Unliking status...");
     const { data } = await client.value.unfavouriteStatus(noteId);
     toast.dismiss(id);
@@ -67,6 +98,19 @@ const unlike = async () => {
 };
 
 const reblog = async () => {
+    if (confirmReblogs.value.value) {
+        const confirmation = await confirmModalService.confirm({
+            title: "Reblog status",
+            message: "Are you sure you want to reblog this status?",
+            confirmText: "Reblog",
+            inputType: "none",
+        });
+
+        if (!confirmation.confirmed) {
+            return;
+        }
+    }
+
     const id = toast.loading("Reblogging status...");
     const { data } = await client.value.reblogStatus(noteId);
     toast.dismiss(id);
@@ -75,6 +119,19 @@ const reblog = async () => {
 };
 
 const unreblog = async () => {
+    if (confirmReblogs.value.value) {
+        const confirmation = await confirmModalService.confirm({
+            title: "Unreblog status",
+            message: "Are you sure you want to unreblog this status?",
+            confirmText: "Unreblog",
+            inputType: "none",
+        });
+
+        if (!confirmation.confirmed) {
+            return;
+        }
+    }
+
     const id = toast.loading("Unreblogging status...");
     const { data } = await client.value.unreblogStatus(noteId);
     toast.dismiss(id);

components/notes/menu.vue

@@ -21,6 +21,7 @@ import {
 } from "lucide-vue-next";
 import { toast } from "vue-sonner";
 import { confirmModalService } from "~/components/modals/composable.ts";
+import { SettingIds } from "~/settings";
 
 const { authorId, noteId } = defineProps<{
     apiNoteString: string;
@@ -40,6 +41,8 @@ const { copy } = useClipboard();
 const loggedIn = !!identity.value;
 const authorIsMe = loggedIn && authorId === identity.value?.account.id;
 
+const confirmDeletes = useSetting(SettingIds.ConfirmDelete);
+
 const copyText = (text: string) => {
     copy(text);
     toast.success("Copied to clipboard");
@@ -54,6 +57,7 @@ const blockUser = async (userId: string) => {
 };
 
 const _delete = async () => {
+    if (confirmDeletes.value.value) {
         const confirmation = await confirmModalService.confirm({
             title: "Delete status",
             message: "Are you sure you want to delete this status?",
@@ -64,6 +68,7 @@ const _delete = async () => {
         if (!confirmation.confirmed) {
             return;
         }
+    }
 
     const id = toast.loading("Deleting status...");
     await client.value.deleteStatus(noteId);

components/profiles/profile.vue

@@ -55,6 +55,8 @@ import CopyableText from "~/components/notes/copyable-text.vue";
 import { Button } from "~/components/ui/button";
 import { Card, CardContent, CardFooter, CardTitle } from "~/components/ui/card";
 import { Separator } from "~/components/ui/separator";
+import { SettingIds } from "~/settings";
+import { confirmModalService } from "../modals/composable";
 import ProfileActions from "./profile-actions.vue";
 import ProfileBadge from "./profile-badge.vue";
 import ProfileContent from "./profile-content.vue";
@@ -77,7 +79,22 @@ const handle = account.acct.includes("@")
     : `${account.acct}@${identity.value?.instance.domain ?? window.location.host}`;
 const isDeveloper = config.DEVELOPER_HANDLES.includes(handle);
 
+const confirmFollows = useSetting(SettingIds.ConfirmFollow);
+
 const follow = async () => {
+    if (confirmFollows.value.value) {
+        const confirmation = await confirmModalService.confirm({
+            title: "Follow user",
+            message: `Are you sure you want to follow @${account.acct}?`,
+            confirmText: "Follow",
+            cancelText: "Cancel",
+        });
+
+        if (!confirmation) {
+            return;
+        }
+    }
+
     const id = toast.loading("Following user...");
     const { data } = await client.value.followAccount(account.id);
     toast.dismiss(id);
@@ -87,6 +104,19 @@ const follow = async () => {
 };
 
 const unfollow = async () => {
+    if (confirmFollows.value.value) {
+        const confirmation = await confirmModalService.confirm({
+            title: "Unfollow user",
+            message: `Are you sure you want to unfollow @${account.acct}?`,
+            confirmText: "Unfollow",
+            cancelText: "Cancel",
+        });
+
+        if (!confirmation) {
+            return;
+        }
+    }
+
     const id = toast.loading("Unfollowing user...");
     const { data } = await client.value.unfollowAccount(account.id);
     toast.dismiss(id);

settings.ts

@@ -76,7 +76,8 @@ export enum SettingIds {
     ConfirmDelete = "confirm-delete",
     ConfirmFollow = "confirm-follow",
     ConfirmReblog = "confirm-reblog",
-    ConfirmFavourite = "confirm-favourite",
+    ConfirmLike = "confirm-favourite",
+    CtrlEnterToSend = "ctrl-enter-to-send",
     EmojiTheme = "emoji-theme",
     BackgroundURL = "background-url",
 }
@@ -153,9 +154,8 @@ export const settings: Record<SettingIds, Setting> = {
         title: "Confirm Delete",
         description: "Confirm before deleting a note.",
         type: SettingType.Boolean,
-        value: false,
+        value: true,
         page: SettingPages.Behaviour,
-        notImplemented: true,
     } as BooleanSetting,
     [SettingIds.ConfirmFollow]: {
         title: "Confirm Follow",
@@ -163,7 +163,6 @@ export const settings: Record<SettingIds, Setting> = {
         type: SettingType.Boolean,
         value: false,
         page: SettingPages.Behaviour,
-        notImplemented: true,
     } as BooleanSetting,
     [SettingIds.ConfirmReblog]: {
         title: "Confirm Reblog",
@@ -171,15 +170,20 @@ export const settings: Record<SettingIds, Setting> = {
         type: SettingType.Boolean,
         value: false,
         page: SettingPages.Behaviour,
-        notImplemented: true,
     } as BooleanSetting,
-    [SettingIds.ConfirmFavourite]: {
-        title: "Confirm Favourite",
-        description: "Confirm before favouriting a note.",
+    [SettingIds.ConfirmLike]: {
+        title: "Confirm Like",
+        description: "Confirm before liking a note.",
         type: SettingType.Boolean,
         value: false,
         page: SettingPages.Behaviour,
-        notImplemented: true,
+    } as BooleanSetting,
+    [SettingIds.CtrlEnterToSend]: {
+        title: "Ctrl+Enter to Send",
+        description: "Send a note by pressing ⌘+Enter or Ctrl+Enter.",
+        type: SettingType.Boolean,
+        value: true,
+        page: SettingPages.Behaviour,
     } as BooleanSetting,
     [SettingIds.EmojiTheme]: {
         title: "Emoji Theme",