mirror of
https://github.com/versia-pub/frontend.git
synced 2025-12-06 08:28:20 +01:00
Merge pull request #14 from versia-pub/refactor/preferences
Refactor/preferences
This commit is contained in:
Gaspard Wierzbinski
GitHub
commit
128ca0c225
30
app.vue
30
app.vue
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<TooltipProvider>
|
||||
<Component is="style">
|
||||
{{ customCss.value }}
|
||||
{{ preferences.custom_css }}
|
||||
</Component>
|
||||
<NuxtPwaAssets />
|
||||
<NuxtLayout>
|
||||
|
|
@ -19,7 +19,6 @@ import ConfirmationModal from "./components/modals/confirm.vue";
|
|||
import { Toaster } from "./components/ui/sonner";
|
||||
import { TooltipProvider } from "./components/ui/tooltip";
|
||||
import { overwriteGetLocale } from "./paraglide/runtime";
|
||||
import { type EnumSetting, SettingIds } from "./settings";
|
||||
// Sin
|
||||
//import "~/styles/mcdonalds.css";
|
||||
|
||||
|
|
@ -31,17 +30,16 @@ const origin = useRequestURL().searchParams.get("origin");
|
|||
const appData = useAppData();
|
||||
const instance = useInstance();
|
||||
const description = useExtendedDescription(client);
|
||||
const customCss = useSetting(SettingIds.CustomCSS);
|
||||
const route = useRoute();
|
||||
|
||||
// Theme switcher
|
||||
const theme = useSetting(SettingIds.Theme) as Ref<EnumSetting>;
|
||||
const colorMode = useColorMode();
|
||||
const radius = useCssVar("--radius");
|
||||
|
||||
watch(theme.value, () => {
|
||||
watch(preferences.color_theme, (newVal) => {
|
||||
// Add theme-changing class to html to trigger transition
|
||||
document.documentElement.classList.add("theme-changing");
|
||||
colorMode.preference = theme.value.value;
|
||||
colorMode.preference = newVal;
|
||||
|
||||
setTimeout(() => {
|
||||
// Remove theme-changing class after transition
|
||||
|
|
@ -49,6 +47,16 @@ watch(theme.value, () => {
|
|||
}, 1000);
|
||||
});
|
||||
|
||||
watch(
|
||||
preferences.border_radius,
|
||||
(newVal) => {
|
||||
radius.value = `${newVal}rem`;
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
|
||||
useSeoMeta({
|
||||
titleTemplate: (titleChunk) => {
|
||||
return titleChunk ? `${titleChunk} · Versia` : "Versia";
|
||||
|
|
@ -111,13 +119,13 @@ html.theme-changing * {
|
|||
box-shadow 1s ease !important;
|
||||
}
|
||||
|
||||
.slide-down-enter-active,
|
||||
.slide-down-leave-active {
|
||||
.slide-up-enter-active,
|
||||
.slide-up-leave-active {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.slide-down-enter-from,
|
||||
.slide-down-leave-to {
|
||||
transform: translateY(-100%);
|
||||
.slide-up-enter-from,
|
||||
.slide-up-leave-to {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,8 @@
|
|||
"rules": {
|
||||
"all": true,
|
||||
"suspicious": {
|
||||
"noConsole": "off"
|
||||
"noConsole": "off",
|
||||
"noExplicitAny": "off"
|
||||
},
|
||||
"performance": {
|
||||
"noBarrelFile": "off"
|
||||
|
|
@ -20,7 +21,8 @@
|
|||
"noUnusedVariables": "off",
|
||||
"noUnusedImports": "off",
|
||||
"noUndeclaredDependencies": "off",
|
||||
"useImportExtensions": "off"
|
||||
"useImportExtensions": "off",
|
||||
"useJsxKeyInIterable": "off"
|
||||
},
|
||||
"complexity": {
|
||||
"noExcessiveCognitiveComplexity": "off"
|
||||
|
|
|
|||
13
bun.lock
13
bun.lock
|
|
@ -8,6 +8,7 @@
|
|||
"@nuxtjs/color-mode": "3.5.2",
|
||||
"@tailwindcss/typography": "^0.5.16",
|
||||
"@tailwindcss/vite": "^4.1.4",
|
||||
"@tanstack/vue-table": "^8.21.3",
|
||||
"@tiptap/extension-highlight": "^2.11.7",
|
||||
"@tiptap/extension-image": "^2.11.7",
|
||||
"@tiptap/extension-link": "^2.11.7",
|
||||
|
|
@ -47,7 +48,9 @@
|
|||
"tw-animate-css": "^1.2.8",
|
||||
"vaul-vue": "^0.4.1",
|
||||
"vee-validate": "^4.15.0",
|
||||
"virtua": "^0.40.4",
|
||||
"vue": "^3.5.13",
|
||||
"vue-draggable-plus": "^0.6.0",
|
||||
"vue-router": "^4.5.1",
|
||||
"vue-sonner": "^1.3.2",
|
||||
"zod": "^3.24.3",
|
||||
|
|
@ -620,8 +623,12 @@
|
|||
|
||||
"@tailwindcss/vite": ["@tailwindcss/vite@4.1.4", "", { "dependencies": { "@tailwindcss/node": "4.1.4", "@tailwindcss/oxide": "4.1.4", "tailwindcss": "4.1.4" }, "peerDependencies": { "vite": "^5.2.0 || ^6" } }, "sha512-4UQeMrONbvrsXKXXp/uxmdEN5JIJ9RkH7YVzs6AMxC/KC1+Np7WZBaNIco7TEjlkthqxZbt8pU/ipD+hKjm80A=="],
|
||||
|
||||
"@tanstack/table-core": ["@tanstack/table-core@8.21.3", "", {}, "sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg=="],
|
||||
|
||||
"@tanstack/virtual-core": ["@tanstack/virtual-core@3.13.5", "", {}, "sha512-gMLNylxhJdUlfRR1G3U9rtuwUh2IjdrrniJIDcekVJN3/3i+bluvdMi3+eodnxzJq5nKnxnigo9h0lIpaqV6HQ=="],
|
||||
|
||||
"@tanstack/vue-table": ["@tanstack/vue-table@8.21.3", "", { "dependencies": { "@tanstack/table-core": "8.21.3" }, "peerDependencies": { "vue": ">=3.2" } }, "sha512-rusRyd77c5tDPloPskctMyPLFEQUeBzxdQ+2Eow4F7gDPlPOB1UnnhzfpdvqZ8ZyX2rRNGmqNnQWm87OI2OQPw=="],
|
||||
|
||||
"@tanstack/vue-virtual": ["@tanstack/vue-virtual@3.13.5", "", { "dependencies": { "@tanstack/virtual-core": "3.13.5" }, "peerDependencies": { "vue": "^2.7.0 || ^3.0.0" } }, "sha512-1hhUA6CUjmKc5JDyKLcYOV6mI631FaKKxXh77Ja4UtIy6EOofYaLPk8vVgvK6vLMUSfHR2vI3ZpPY9ibyX60SA=="],
|
||||
|
||||
"@tiptap/core": ["@tiptap/core@2.11.7", "", { "peerDependencies": { "@tiptap/pm": "^2.7.0" } }, "sha512-zN+NFFxLsxNEL8Qioc+DL6b8+Tt2bmRbXH22Gk6F6nD30x83eaUSFlSv3wqvgyCq3I1i1NO394So+Agmayx6rQ=="],
|
||||
|
|
@ -714,6 +721,8 @@
|
|||
|
||||
"@types/resolve": ["@types/resolve@1.20.2", "", {}, "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q=="],
|
||||
|
||||
"@types/sortablejs": ["@types/sortablejs@1.15.8", "", {}, "sha512-b79830lW+RZfwaztgs1aVPgbasJ8e7AXtZYHTELNXZPsERt4ymJdjV4OccDbHQAvHrCcFpbF78jkm0R6h/pZVg=="],
|
||||
|
||||
"@types/trusted-types": ["@types/trusted-types@2.0.7", "", {}, "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="],
|
||||
|
||||
"@types/video.js": ["@types/video.js@7.3.58", "", {}, "sha512-1CQjuSrgbv1/dhmcfQ83eVyYbvGyqhTvb2Opxr0QCV+iJ4J6/J+XWQ3Om59WiwCd1MN3rDUHasx5XRrpUtewYQ=="],
|
||||
|
|
@ -2064,6 +2073,8 @@
|
|||
|
||||
"videojs-vtt.js": ["videojs-vtt.js@0.15.5", "", { "dependencies": { "global": "^4.3.1" } }, "sha512-yZbBxvA7QMYn15Lr/ZfhhLPrNpI/RmCSCqgIff57GC2gIrV5YfyzLfLyZMj0NnZSAz8syB4N0nHXpZg9MyrMOQ=="],
|
||||
|
||||
"virtua": ["virtua@0.40.4", "", { "peerDependencies": { "react": ">=16.14.0", "react-dom": ">=16.14.0", "solid-js": ">=1.0", "svelte": ">=5.0", "vue": ">=3.2" }, "optionalPeers": ["react", "react-dom", "solid-js", "svelte", "vue"] }, "sha512-eV55eOm2b5Lzc9upivqIcAFPgfBrfcVrppW9T4vhTH+QAbaxfw5ypq25apkG83T5FuiFEoQYnefix1fQyx/GXQ=="],
|
||||
|
||||
"vite": ["vite@6.2.6", "", { "dependencies": { "esbuild": "^0.25.0", "postcss": "^8.5.3", "rollup": "^4.30.1" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", "jiti": ">=1.21.0", "less": "*", "lightningcss": "^1.21.0", "sass": "*", "sass-embedded": "*", "stylus": "*", "sugarss": "*", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-9xpjNl3kR4rVDZgPNdTL0/c6ao4km69a/2ihNQbcANz8RuCOK3hQBmLSJf3bRKVQjVMda+YvizNE8AwvogcPbw=="],
|
||||
|
||||
"vite-dev-rpc": ["vite-dev-rpc@1.0.7", "", { "dependencies": { "birpc": "^2.0.19", "vite-hot-client": "^2.0.4" }, "peerDependencies": { "vite": "^2.9.0 || ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 || ^6.0.1" } }, "sha512-FxSTEofDbUi2XXujCA+hdzCDkXFG1PXktMjSk1efq9Qb5lOYaaM9zNSvKvPPF7645Bak79kSp1PTooMW2wktcA=="],
|
||||
|
|
@ -2090,6 +2101,8 @@
|
|||
|
||||
"vue-devtools-stub": ["vue-devtools-stub@0.1.0", "", {}, "sha512-RutnB7X8c5hjq39NceArgXg28WZtZpGc3+J16ljMiYnFhKvd8hITxSWQSQ5bvldxMDU6gG5mkxl1MTQLXckVSQ=="],
|
||||
|
||||
"vue-draggable-plus": ["vue-draggable-plus@0.6.0", "", { "dependencies": { "@types/sortablejs": "^1.15.8" } }, "sha512-G5TSfHrt9tX9EjdG49InoFJbt2NYk0h3kgjgKxkFWr3ulIUays0oFObr5KZ8qzD4+QnhtALiRwIqY6qul4egqw=="],
|
||||
|
||||
"vue-router": ["vue-router@4.5.1", "", { "dependencies": { "@vue/devtools-api": "^6.6.4" }, "peerDependencies": { "vue": "^3.2.0" } }, "sha512-ogAF3P97NPm8fJsE4by9dwSYtDwXIY1nFY9T6DyQnGHd1E2Da94w9JIolpe42LJGIl0DwOHBi8TcRPlPGwbTtw=="],
|
||||
|
||||
"vue-sonner": ["vue-sonner@1.3.2", "", {}, "sha512-UbZ48E9VIya3ToiRHAZUbodKute/z/M1iT8/3fU8zEbwBRE11AKuHikssv18LMk2gTTr6eMQT4qf6JoLHWuj/A=="],
|
||||
|
|
|
|||
|
|
@ -159,7 +159,6 @@ import {
|
|||
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";
|
||||
|
|
@ -169,13 +168,11 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
|
|||
import Files from "./files.vue";
|
||||
|
||||
const { Control_Enter, Command_Enter } = useMagicKeys();
|
||||
const ctrlEnterSend = useSetting(SettingIds.CtrlEnterToSend);
|
||||
const defaultVisibility = useSetting(SettingIds.DefaultVisibility);
|
||||
const { play } = useAudio();
|
||||
const fileInput = ref<HTMLInputElement | null>(null);
|
||||
|
||||
watch([Control_Enter, Command_Enter], () => {
|
||||
if (sending.value || !ctrlEnterSend.value.value) {
|
||||
if (sending.value || !preferences.ctrl_enter_send.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -220,9 +217,10 @@ const state = reactive({
|
|||
sensitive: relation?.type === "edit" ? relation.note.sensitive : false,
|
||||
contentWarning: relation?.type === "edit" ? relation.note.spoiler_text : "",
|
||||
contentType: "text/html" as "text/html" | "text/plain",
|
||||
visibility: (relation?.type === "edit"
|
||||
visibility:
|
||||
relation?.type === "edit"
|
||||
? relation.note.visibility
|
||||
: (defaultVisibility.value.value ?? "public")) as Status["visibility"],
|
||||
: preferences.default_visibility.value,
|
||||
files: (relation?.type === "edit"
|
||||
? relation.note.media_attachments.map((a) => ({
|
||||
apiId: a.id,
|
||||
|
|
|
|||
34
components/form/switch.vue
Normal file
34
components/form/switch.vue
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<template>
|
||||
<Card class="p-4">
|
||||
<FormItem class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-2">
|
||||
<CardHeader class="flex flex-col gap-1.5 p-0">
|
||||
<FormLabel class="font-semibold tracking-tight" :as="CardTitle">
|
||||
{{ title }}
|
||||
</FormLabel>
|
||||
<FormDescription class="text-xs leading-none" v-if="description">
|
||||
{{ description }}
|
||||
</FormDescription>
|
||||
</CardHeader>
|
||||
<FormControl>
|
||||
<slot />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { Card, CardDescription, CardHeader, CardTitle } from "../ui/card";
|
||||
import {
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "../ui/form";
|
||||
|
||||
const { title, description } = defineProps<{
|
||||
title: string;
|
||||
description?: string;
|
||||
}>();
|
||||
</script>
|
||||
29
components/form/text.vue
Normal file
29
components/form/text.vue
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<template>
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{{ title }}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<slot />
|
||||
</FormControl>
|
||||
<FormDescription v-if="description">
|
||||
{{ description }}
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "../ui/form";
|
||||
|
||||
const { title, description } = defineProps<{
|
||||
title: string;
|
||||
description?: string;
|
||||
}>();
|
||||
</script>
|
||||
|
|
@ -19,9 +19,9 @@ defineProps<{
|
|||
modalOptions: ConfirmModalOptions;
|
||||
}>();
|
||||
|
||||
defineEmits<{
|
||||
confirm: (result: ConfirmModalResult) => void;
|
||||
cancel: () => void;
|
||||
const emit = defineEmits<{
|
||||
confirm: [result: ConfirmModalResult];
|
||||
cancel: [];
|
||||
}>();
|
||||
|
||||
const inputValue = ref<string>("");
|
||||
|
|
@ -55,10 +55,10 @@ const inputValue = ref<string>("");
|
|||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" @click="() => $emit('cancel')">
|
||||
<Button variant="outline" @click="() => emit('cancel')">
|
||||
{{ modalOptions.cancelText }}
|
||||
</Button>
|
||||
<Button @click="() => $emit('confirm', {
|
||||
<Button @click="() => emit('confirm', {
|
||||
confirmed: true,
|
||||
value: inputValue,
|
||||
})">
|
||||
|
|
|
|||
|
|
@ -21,7 +21,6 @@ import { Ellipsis, Heart, Quote, Repeat, Reply } from "lucide-vue-next";
|
|||
import { toast } from "vue-sonner";
|
||||
import * as m from "~/paraglide/messages.js";
|
||||
import { getLocale } from "~/paraglide/runtime";
|
||||
import { SettingIds } from "~/settings";
|
||||
import { confirmModalService } from "../modals/composable";
|
||||
import ActionButton from "./action-button.vue";
|
||||
import Menu from "./menu.vue";
|
||||
|
|
@ -48,11 +47,8 @@ const emit = defineEmits<{
|
|||
}>();
|
||||
const { play } = useAudio();
|
||||
|
||||
const confirmLikes = useSetting(SettingIds.ConfirmLike);
|
||||
const confirmReblogs = useSetting(SettingIds.ConfirmReblog);
|
||||
|
||||
const like = async () => {
|
||||
if (confirmLikes.value.value) {
|
||||
if (preferences.confirm_actions.value.includes("like")) {
|
||||
const confirmation = await confirmModalService.confirm({
|
||||
title: m.slimy_least_ray_aid(),
|
||||
message: m.stale_new_ray_jolt(),
|
||||
|
|
@ -74,7 +70,7 @@ const like = async () => {
|
|||
};
|
||||
|
||||
const unlike = async () => {
|
||||
if (confirmLikes.value.value) {
|
||||
if (preferences.confirm_actions.value.includes("like")) {
|
||||
const confirmation = await confirmModalService.confirm({
|
||||
title: m.odd_strong_halibut_prosper(),
|
||||
message: m.slow_blue_parrot_savor(),
|
||||
|
|
@ -95,7 +91,7 @@ const unlike = async () => {
|
|||
};
|
||||
|
||||
const reblog = async () => {
|
||||
if (confirmReblogs.value.value) {
|
||||
if (preferences.confirm_actions.value.includes("reblog")) {
|
||||
const confirmation = await confirmModalService.confirm({
|
||||
title: m.best_mellow_llama_surge(),
|
||||
message: m.salty_plain_mallard_gaze(),
|
||||
|
|
@ -116,7 +112,7 @@ const reblog = async () => {
|
|||
};
|
||||
|
||||
const unreblog = async () => {
|
||||
if (confirmReblogs.value.value) {
|
||||
if (preferences.confirm_actions.value.includes("reblog")) {
|
||||
const confirmation = await confirmModalService.confirm({
|
||||
title: m.main_fancy_octopus_loop(),
|
||||
message: m.odd_alive_swan_express(),
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<ContentWarning v-if="(sensitive || contentWarning) && showCw.value" :content-warning="contentWarning" v-model="blurred" />
|
||||
<ContentWarning v-if="(sensitive || contentWarning) && preferences.show_content_warning" :content-warning="contentWarning" v-model="blurred" />
|
||||
|
||||
<OverflowGuard :character-count="characterCount" :class="(blurred && showCw.value) && 'blur-md'">
|
||||
<OverflowGuard :character-count="characterCount" :class="(blurred && preferences.show_content_warning) && 'blur-md'">
|
||||
<Prose v-html="content" v-render-emojis="emojis"></Prose>
|
||||
</OverflowGuard>
|
||||
|
||||
<Attachments v-if="attachments.length > 0" :attachments="attachments" :class="(blurred && showCw.value) && 'blur-xl'" />
|
||||
<Attachments v-if="attachments.length > 0" :attachments="attachments" :class="(blurred && preferences.show_content_warning) && 'blur-xl'" />
|
||||
|
||||
<div v-if="quote" class="mt-4 rounded border overflow-hidden">
|
||||
<Note :note="quote" :hide-actions="true" :small-layout="true" />
|
||||
|
|
@ -14,7 +14,6 @@
|
|||
|
||||
<script lang="ts" setup>
|
||||
import type { Attachment, Emoji, Status } from "@versia/client/types";
|
||||
import { type BooleanSetting, SettingIds } from "~/settings";
|
||||
import Attachments from "./attachments.vue";
|
||||
import ContentWarning from "./content-warning.vue";
|
||||
import Note from "./note.vue";
|
||||
|
|
@ -32,7 +31,6 @@ const { content, plainContent, sensitive, contentWarning } = defineProps<{
|
|||
}>();
|
||||
|
||||
const blurred = ref(sensitive || !!contentWarning);
|
||||
const showCw = useSetting(SettingIds.ShowContentWarning) as Ref<BooleanSetting>;
|
||||
|
||||
const characterCount = plainContent?.length;
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="rounded flex flex-row items-center gap-3">
|
||||
<HoverCard v-model:open="popupOpen" @update:open="() => {
|
||||
if (!enableHoverCard.value) {
|
||||
if (!preferences.popup_avatar_hover) {
|
||||
popupOpen = false;
|
||||
}
|
||||
}" :open-delay="2000">
|
||||
|
|
@ -51,7 +51,6 @@ import type {
|
|||
} from "@vueuse/core";
|
||||
import { AtSign, Globe, Lock, LockOpen } from "lucide-vue-next";
|
||||
import { getLocale } from "~/paraglide/runtime";
|
||||
import { SettingIds } from "~/settings";
|
||||
import Avatar from "../profiles/avatar.vue";
|
||||
import SmallCard from "../profiles/small-card.vue";
|
||||
import {
|
||||
|
|
@ -59,7 +58,6 @@ import {
|
|||
HoverCardContent,
|
||||
HoverCardTrigger,
|
||||
} from "../ui/hover-card";
|
||||
import CopyableText from "./copyable-text.vue";
|
||||
|
||||
const { createdAt, noteUrl, author, authorUrl } = defineProps<{
|
||||
cornerAvatar?: string;
|
||||
|
|
@ -94,7 +92,6 @@ const fullTime = new Intl.DateTimeFormat(getLocale(), {
|
|||
dateStyle: "medium",
|
||||
timeStyle: "short",
|
||||
}).format(createdAt);
|
||||
const enableHoverCard = useSetting(SettingIds.PopupAvatarHover);
|
||||
const popupOpen = ref(false);
|
||||
|
||||
const visibilities = {
|
||||
|
|
|
|||
|
|
@ -21,7 +21,6 @@ import {
|
|||
import { toast } from "vue-sonner";
|
||||
import { confirmModalService } from "~/components/modals/composable.ts";
|
||||
import * as m from "~/paraglide/messages.js";
|
||||
import { SettingIds } from "~/settings";
|
||||
|
||||
const { authorId, noteId } = defineProps<{
|
||||
apiNoteString: string;
|
||||
|
|
@ -41,8 +40,6 @@ 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(m.flat_nice_worm_dream());
|
||||
|
|
@ -57,7 +54,7 @@ const blockUser = async (userId: string) => {
|
|||
};
|
||||
|
||||
const _delete = async () => {
|
||||
if (confirmDeletes.value.value) {
|
||||
if (preferences.confirm_actions.value.includes("delete")) {
|
||||
const confirmation = await confirmModalService.confirm({
|
||||
title: m.calm_icy_weasel_twirl(),
|
||||
message: m.gray_fun_toucan_slide(),
|
||||
|
|
|
|||
45
components/preferences/category.vue
Normal file
45
components/preferences/category.vue
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
<template>
|
||||
<section class="space-y-2">
|
||||
<CardTitle class="text-xs">
|
||||
{{ name }}
|
||||
</CardTitle>
|
||||
<Card class="p-0 gap-0">
|
||||
<div v-for="preference of preferences" :key="preference">
|
||||
<TextPreferenceVue v-if="(prefs[preference] instanceof TextPreference)" :pref="(prefs[preference] as TextPreference)" :name="preference" />
|
||||
<BooleanPreferenceVue v-else-if="(prefs[preference] instanceof BooleanPreference)" :pref="(prefs[preference] as BooleanPreference)" :name="preference" />
|
||||
<SelectPreferenceVue v-else-if="(prefs[preference] instanceof SelectPreference)" :pref="(prefs[preference] as SelectPreference<string>)" :name="preference" />
|
||||
<NumberPreferenceVue v-else-if="(prefs[preference] instanceof NumberPreference)" :pref="(prefs[preference] as NumberPreference)" :name="preference" />
|
||||
<MultiSelectPreferenceVue v-else-if="(prefs[preference] instanceof MultiSelectPreference)" :pref="(prefs[preference] as MultiSelectPreference<string>)" :name="preference" />
|
||||
<CodePreferenceVue v-else-if="(prefs[preference] instanceof CodePreference)" :pref="(prefs[preference] as CodePreference)" :name="preference" />
|
||||
<UrlPreferenceVue v-else-if="(prefs[preference] instanceof UrlPreference)" :pref="(prefs[preference] as UrlPreference)" :name="preference" />
|
||||
</div>
|
||||
</Card>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { Card, CardTitle } from "../ui/card/index.ts";
|
||||
// biome-ignore lint/style/useImportType: <explanation>
|
||||
import { preferences as prefs } from "./preferences.ts";
|
||||
import {
|
||||
BooleanPreference,
|
||||
CodePreference,
|
||||
MultiSelectPreference,
|
||||
NumberPreference,
|
||||
SelectPreference,
|
||||
TextPreference,
|
||||
UrlPreference,
|
||||
} from "./types.ts";
|
||||
import BooleanPreferenceVue from "./types/boolean.vue";
|
||||
import CodePreferenceVue from "./types/code.vue";
|
||||
import MultiSelectPreferenceVue from "./types/multiselect.vue";
|
||||
import NumberPreferenceVue from "./types/number.vue";
|
||||
import SelectPreferenceVue from "./types/select.vue";
|
||||
import TextPreferenceVue from "./types/text.vue";
|
||||
import UrlPreferenceVue from "./types/url.vue";
|
||||
|
||||
const { preferences = [], name } = defineProps<{
|
||||
preferences: (keyof typeof prefs)[];
|
||||
name: string;
|
||||
}>();
|
||||
</script>
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
<template>
|
||||
<Collapsible
|
||||
:as="Card"
|
||||
class="grid justify-normal items-center px-6 py-4 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>
|
||||
60
components/preferences/developer.vue
Normal file
60
components/preferences/developer.vue
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
<template>
|
||||
<Card class="grid gap-3 text-sm p-4">
|
||||
<dl class="grid gap-3">
|
||||
<div v-for="[key, value] of data" :key="key" class="flex flex-row items-baseline justify-between gap-4 truncate">
|
||||
<dt class="text-muted-foreground">
|
||||
{{ key }}
|
||||
</dt>
|
||||
<dd class="font-mono" v-if="typeof value === 'string'">{{ value }}</dd>
|
||||
<dd class="font-mono" v-else>
|
||||
<component :is="value" />
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script lang="tsx" setup>
|
||||
import type { VNode } from "vue";
|
||||
import { toast } from "vue-sonner";
|
||||
import { Button } from "../ui/button";
|
||||
import { Card } from "../ui/card";
|
||||
|
||||
const copy = (data: string) => {
|
||||
navigator.clipboard.writeText(data);
|
||||
toast.success("Copied to clipboard");
|
||||
};
|
||||
|
||||
const appData = useAppData();
|
||||
|
||||
const data: [string, string | VNode][] = [
|
||||
["User ID", identity.value?.account.id ?? ""],
|
||||
["Instance domain", identity.value?.instance.domain ?? ""],
|
||||
["Instance version", identity.value?.instance.versia_version ?? ""],
|
||||
["Client ID", appData.value?.client_id ?? ""],
|
||||
[
|
||||
"Client secret",
|
||||
<Button
|
||||
variant="outline"
|
||||
class="font-sans"
|
||||
size="sm"
|
||||
// @ts-expect-error missing onClick types
|
||||
onClick={() => copy(appData.value?.client_secret ?? "")}
|
||||
>
|
||||
Click to copy
|
||||
</Button>,
|
||||
],
|
||||
[
|
||||
"Access token",
|
||||
<Button
|
||||
variant="outline"
|
||||
class="font-sans"
|
||||
size="sm"
|
||||
// @ts-expect-error missing onClick types
|
||||
onClick={() => copy(identity.value?.tokens.access_token ?? "")}
|
||||
>
|
||||
Click to copy
|
||||
</Button>,
|
||||
],
|
||||
];
|
||||
</script>
|
||||
166
components/preferences/dialog.vue
Normal file
166
components/preferences/dialog.vue
Normal file
|
|
@ -0,0 +1,166 @@
|
|||
<script setup lang="ts">
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
InfoIcon,
|
||||
PaletteIcon,
|
||||
SettingsIcon,
|
||||
ShieldCheckIcon,
|
||||
SmileIcon,
|
||||
TerminalSquareIcon,
|
||||
UserIcon,
|
||||
} from "lucide-vue-next";
|
||||
import pkg from "~/package.json";
|
||||
import Avatar from "../profiles/avatar.vue";
|
||||
import TinyCard from "../profiles/tiny-card.vue";
|
||||
import { Separator } from "../ui/separator";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
|
||||
import Category from "./category.vue";
|
||||
import Developer from "./developer.vue";
|
||||
import Emojis from "./emojis/index.vue";
|
||||
import Page from "./page.vue";
|
||||
import { preferences } from "./preferences";
|
||||
import Profile from "./profile.vue";
|
||||
import Stats from "./stats.vue";
|
||||
|
||||
const pages = Object.values(preferences)
|
||||
.map((p) => p.options.category)
|
||||
.filter((c) => c !== undefined)
|
||||
.map((c) => c.split("/")[0] as string)
|
||||
.concat(["Account", "Emojis", "Developer", "About"])
|
||||
// Remove duplicates
|
||||
.filter((c, i, a) => a.indexOf(c) === i);
|
||||
const extraPages = ["Account", "Emojis", "Developer", "About"];
|
||||
|
||||
const icons: Record<string, Component> = {
|
||||
Account: UserIcon,
|
||||
Appearance: PaletteIcon,
|
||||
Emojis: SmileIcon,
|
||||
Behaviour: SettingsIcon,
|
||||
Roles: ShieldCheckIcon,
|
||||
Developer: TerminalSquareIcon,
|
||||
About: InfoIcon,
|
||||
};
|
||||
|
||||
// For each page, map the associated categories
|
||||
const categories = Object.fromEntries(
|
||||
pages.map((page) => {
|
||||
const categories = Object.values(preferences)
|
||||
.map((p) => p.options.category)
|
||||
.filter((c) => c !== undefined)
|
||||
.filter((c) => c.split("/")[0] === page)
|
||||
.map((c) => c.split("/")[1] as string)
|
||||
// Remove duplicates
|
||||
.filter((c, i, a) => a.indexOf(c) === i);
|
||||
|
||||
return [page, categories];
|
||||
}),
|
||||
);
|
||||
|
||||
const { account: author1 } = useAccountFromAcct(
|
||||
client,
|
||||
"jessew@vs.cpluspatch.com",
|
||||
);
|
||||
|
||||
const { account: author2 } = useAccountFromAcct(
|
||||
client,
|
||||
"aprl@social.lysand.org",
|
||||
);
|
||||
|
||||
const { account: author3 } = useAccountFromAcct(
|
||||
client,
|
||||
"lina@social.lysand.org",
|
||||
);
|
||||
|
||||
const open = ref(false);
|
||||
|
||||
useListen("preferences:open", () => {
|
||||
open.value = true;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog v-model:open="open" v-if="identity">
|
||||
<DialogContent class="md:max-w-5xl w-full h-full p-0 md:max-h-[70dvh] overflow-hidden">
|
||||
<Tabs class="md:grid-cols-[auto_minmax(0,1fr)] !grid gap-2 *:p-4 overflow-hidden *:overflow-y-auto *:h-full" orientation="vertical"
|
||||
:default-value="pages[0]">
|
||||
<DialogHeader class="gap-6 grid grid-rows-[auto_minmax(0,1fr)] border-b md:border-b-0 md:border-r min-w-60 text-left">
|
||||
<div class="grid gap-3 items-center grid-cols-[auto_minmax(0,1fr)]">
|
||||
<Avatar :name="identity.account.display_name || identity.account.username"
|
||||
:src="identity.account.avatar" />
|
||||
<DialogTitle>Preferences</DialogTitle>
|
||||
</div>
|
||||
<DialogDescription class="sr-only">
|
||||
Make changes to your preferences here.
|
||||
</DialogDescription>
|
||||
<TabsList class="md:grid md:grid-cols-1 w-full h-fit *:justify-start !justify-start">
|
||||
<TabsTrigger v-for="page in pages" :key="page" :value="page">
|
||||
<component :is="icons[page]" class="size-4 mr-2" />
|
||||
{{ page }}
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</DialogHeader>
|
||||
<TabsContent v-for="page in pages.filter(p => !extraPages.includes(p))" :key="page" :value="page"
|
||||
as-child>
|
||||
<Page :title="page">
|
||||
<Category v-for="category in categories[page]" :key="category"
|
||||
:preferences="Object.entries(preferences).filter(([, p]) => p.options.category === `${page}/${category}`).map(([k,]) => k as keyof typeof preferences)"
|
||||
:name="category" />
|
||||
</Page>
|
||||
</TabsContent>
|
||||
<TabsContent value="Emojis" as-child>
|
||||
<Page title="Emojis">
|
||||
<Emojis />
|
||||
</Page>
|
||||
</TabsContent>
|
||||
<TabsContent value="Account" as-child>
|
||||
<Page title="Account">
|
||||
<Profile />
|
||||
</Page>
|
||||
</TabsContent>
|
||||
<TabsContent value="Developer" as-child>
|
||||
<Page title="Developer">
|
||||
<Developer />
|
||||
</Page>
|
||||
</TabsContent>
|
||||
<TabsContent value="About" as-child>
|
||||
<Page title="About">
|
||||
<section class="space-y-4">
|
||||
<p class="leading-7 text-sm max-w-xl">
|
||||
{{ pkg.description }}
|
||||
</p>
|
||||
|
||||
<Stats />
|
||||
</section>
|
||||
<Separator />
|
||||
<section class="space-y-2">
|
||||
<h3 class="text-lg font-semibold tracking-tight">Developers</h3>
|
||||
<div class="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-4">
|
||||
<TinyCard v-if="author1" :account="author1" domain="vs.cpluspatch.com" />
|
||||
<TinyCard v-if="author2" :account="author2" domain="social.lysand.org" />
|
||||
<TinyCard v-if="author3" :account="author3" domain="social.lysand.org" />
|
||||
</div>
|
||||
</section>
|
||||
<Separator />
|
||||
<section class="space-y-2">
|
||||
<h3 class="text-lg font-semibold tracking-tight">Dependencies</h3>
|
||||
<ul class="grid lg:grid-cols-2 gap-2 grid-cols-1 items-center justify-center list-disc ml-6">
|
||||
<li v-for="[dep, version] in Object.entries(pkg.dependencies)" :key="dep">
|
||||
<code
|
||||
class="rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-xs font-semibold">
|
||||
{{ dep }}@{{ version }}
|
||||
</code>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</Page>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
72
components/preferences/emojis/batch-dropdown.vue
Normal file
72
components/preferences/emojis/batch-dropdown.vue
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
<template>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child>
|
||||
<slot />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent class="min-w-48">
|
||||
<DropdownMenuItem @click="deleteAll" :disabled="!canEdit">
|
||||
<Delete />
|
||||
{{ m.tense_quick_cod_favor() }}
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { type Emoji, RolePermission } from "@versia/client/types";
|
||||
import { Delete } from "lucide-vue-next";
|
||||
import { toast } from "vue-sonner";
|
||||
import { confirmModalService } from "~/components/modals/composable";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "~/components/ui/dropdown-menu";
|
||||
import * as m from "~/paraglide/messages.js";
|
||||
|
||||
const { emojis } = defineProps<{
|
||||
emojis: Emoji[];
|
||||
}>();
|
||||
|
||||
const permissions = usePermissions();
|
||||
const canEdit =
|
||||
(!emojis.some((e) => e.global) &&
|
||||
permissions.value.includes(RolePermission.ManageOwnEmojis)) ||
|
||||
permissions.value.includes(RolePermission.ManageEmojis);
|
||||
|
||||
const deleteAll = async () => {
|
||||
if (!identity.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { confirmed } = await confirmModalService.confirm({
|
||||
title: m.tense_quick_cod_favor(),
|
||||
message: m.next_hour_jurgen_sprout({
|
||||
amount: emojis.length,
|
||||
}),
|
||||
confirmText: m.tense_quick_cod_favor(),
|
||||
});
|
||||
|
||||
if (confirmed) {
|
||||
const id = toast.loading(
|
||||
m.equal_only_crow_file({
|
||||
amount: emojis.length,
|
||||
}),
|
||||
);
|
||||
try {
|
||||
await Promise.all(
|
||||
emojis.map((emoji) => client.value.deleteEmoji(emoji.id)),
|
||||
);
|
||||
toast.dismiss(id);
|
||||
toast.success("Emojis deleted");
|
||||
|
||||
identity.value.emojis = identity.value.emojis.filter(
|
||||
(e) => !emojis.some((emoji) => e.id === emoji.id),
|
||||
);
|
||||
} catch {
|
||||
toast.dismiss(id);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
<template>
|
||||
<Collapsible :default-open="true">
|
||||
<div class="grid grid-cols-[1fr_auto] gap-4 items-baseline">
|
||||
<h2 class="text-2xl font-semibold tracking-tight">
|
||||
{{ name }}
|
||||
</h2>
|
||||
<CollapsibleTrigger :as-child="true">
|
||||
<Button size="icon" variant="outline" class="[&_svg]:data-[state=open]:-rotate-180">
|
||||
<ChevronDown class="duration-200" />
|
||||
</Button>
|
||||
</CollapsibleTrigger>
|
||||
</div>
|
||||
<CollapsibleContent class="grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-4 gap-3 mt-4">
|
||||
<Emoji v-for="emoji in emojis" :key="emoji.id" :emoji="emoji" />
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { Emoji as EmojiType } from "@versia/client/types";
|
||||
import { ChevronDown } from "lucide-vue-next";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from "~/components/ui/collapsible";
|
||||
import Emoji from "./emoji.vue";
|
||||
|
||||
defineProps<{
|
||||
emojis: EmojiType[];
|
||||
name: string;
|
||||
}>();
|
||||
</script>
|
||||
|
|
@ -1,38 +1,10 @@
|
|||
<template>
|
||||
<DropdownMenu>
|
||||
<Card
|
||||
:class="
|
||||
cn(
|
||||
'grid hover:cursor-pointer gap-4 items-center p-4',
|
||||
canEdit
|
||||
? 'grid-cols-[auto_1fr_auto]'
|
||||
: 'grid-cols-[auto_1fr]'
|
||||
)
|
||||
"
|
||||
>
|
||||
<Avatar shape="square">
|
||||
<AvatarImage :src="emoji.url" />
|
||||
</Avatar>
|
||||
<CardHeader class="p-0 gap-0 overflow-hidden">
|
||||
<CardTitle as="span" class="text-sm font-mono truncate">
|
||||
{{ emoji.shortcode }}
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
{{
|
||||
emoji.global
|
||||
? m.real_tame_moose_greet()
|
||||
: m.witty_heroic_trout_cry()
|
||||
}}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardFooter class="p-0" v-if="canEdit">
|
||||
<DropdownMenuTrigger :as-child="true">
|
||||
<Button variant="ghost" size="icon">
|
||||
<Ellipsis />
|
||||
<DropdownMenuTrigger as-child>
|
||||
<Button variant="ghost" size="icon" title="Open menu" class="size-8 p-0">
|
||||
<MoreHorizontal class="size-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
<DropdownMenuContent class="min-w-48">
|
||||
<DropdownMenuItem @click="editName">
|
||||
<TextCursorInput />
|
||||
|
|
@ -52,20 +24,11 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { cn } from "@/lib/utils";
|
||||
import { type Emoji, RolePermission } from "@versia/client/types";
|
||||
import { Delete, Ellipsis, TextCursorInput } from "lucide-vue-next";
|
||||
import { Delete, MoreHorizontal, TextCursorInput } from "lucide-vue-next";
|
||||
import { toast } from "vue-sonner";
|
||||
import { confirmModalService } from "~/components/modals/composable";
|
||||
import { Avatar, AvatarImage } from "~/components/ui/avatar";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "~/components/ui/card";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
51
components/preferences/emojis/index.vue
Normal file
51
components/preferences/emojis/index.vue
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<template>
|
||||
<div v-if="emojis.length > 0" class="grow">
|
||||
<Table :emojis="emojis" :can-upload="canUpload" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { type Emoji, RolePermission } from "@versia/client/types";
|
||||
import * as m from "~/paraglide/messages.js";
|
||||
import Table from "./table.vue";
|
||||
|
||||
const permissions = usePermissions();
|
||||
const canUpload = computed(
|
||||
() =>
|
||||
permissions.value.includes(RolePermission.ManageOwnEmojis) ||
|
||||
permissions.value.includes(RolePermission.ManageEmojis),
|
||||
);
|
||||
|
||||
const emojis = computed(
|
||||
() =>
|
||||
identity.value?.emojis?.filter((emoji) =>
|
||||
emoji.shortcode.toLowerCase().includes(search.value.toLowerCase()),
|
||||
) ?? [],
|
||||
);
|
||||
|
||||
const search = ref("");
|
||||
|
||||
/**
|
||||
* Sort emojis by category
|
||||
*/
|
||||
const categories = computed(() => {
|
||||
const categories = new Map<string, Emoji[]>();
|
||||
for (const emoji of emojis.value) {
|
||||
if (!emoji.category) {
|
||||
if (!categories.has(m.lucky_ago_rat_pinch())) {
|
||||
categories.set(m.lucky_ago_rat_pinch(), []);
|
||||
}
|
||||
|
||||
categories.get(m.lucky_ago_rat_pinch())?.push(emoji);
|
||||
continue;
|
||||
}
|
||||
|
||||
if (!categories.has(emoji.category)) {
|
||||
categories.set(emoji.category, []);
|
||||
}
|
||||
|
||||
categories.get(emoji.category)?.push(emoji);
|
||||
}
|
||||
return categories;
|
||||
});
|
||||
</script>
|
||||
361
components/preferences/emojis/table.vue
Normal file
361
components/preferences/emojis/table.vue
Normal file
|
|
@ -0,0 +1,361 @@
|
|||
<script setup lang="tsx">
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuCheckboxItem,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import type {
|
||||
ColumnDef,
|
||||
ColumnFiltersState,
|
||||
ExpandedState,
|
||||
SortingState,
|
||||
Updater,
|
||||
VisibilityState,
|
||||
} from "@tanstack/vue-table";
|
||||
import {
|
||||
FlexRender,
|
||||
getCoreRowModel,
|
||||
getExpandedRowModel,
|
||||
getFilteredRowModel,
|
||||
getPaginationRowModel,
|
||||
getSortedRowModel,
|
||||
useVueTable,
|
||||
} from "@tanstack/vue-table";
|
||||
import type { Emoji } from "@versia/client/types";
|
||||
import {
|
||||
ArrowDownAZ,
|
||||
ArrowUpAz,
|
||||
ArrowUpDown,
|
||||
ChevronDown,
|
||||
Ellipsis,
|
||||
Globe,
|
||||
Home,
|
||||
Plus,
|
||||
} from "lucide-vue-next";
|
||||
import { ref } from "vue";
|
||||
import BatchDropdown from "./batch-dropdown.vue";
|
||||
import Dropdown from "./dropdown.vue";
|
||||
import Uploader from "./uploader.vue";
|
||||
|
||||
// No destructuring props to avoid reactivity issues
|
||||
const props = defineProps<{
|
||||
emojis: Emoji[];
|
||||
canUpload: boolean;
|
||||
}>();
|
||||
|
||||
const emojisRef = computed(() => props.emojis);
|
||||
|
||||
const valueUpdater = <T extends Updater<any>>(updaterOrValue: T, ref: Ref) => {
|
||||
ref.value =
|
||||
typeof updaterOrValue === "function"
|
||||
? updaterOrValue(ref.value)
|
||||
: updaterOrValue;
|
||||
};
|
||||
|
||||
const columns: ColumnDef<Emoji>[] = [
|
||||
{
|
||||
id: "select",
|
||||
header: ({ table }) => (
|
||||
<Checkbox
|
||||
modelValue={
|
||||
table.getIsAllPageRowsSelected() ||
|
||||
(table.getIsSomePageRowsSelected() && "indeterminate")
|
||||
}
|
||||
onUpdate:modelValue={(value) =>
|
||||
table.toggleAllPageRowsSelected(!!value)
|
||||
}
|
||||
aria-label="Select all"
|
||||
/>
|
||||
),
|
||||
cell: ({ row }) => (
|
||||
<Checkbox
|
||||
modelValue={row.getIsSelected()}
|
||||
onUpdate:modelValue={(value) => row.toggleSelected(!!value)}
|
||||
aria-label="Select row"
|
||||
/>
|
||||
),
|
||||
enableSorting: false,
|
||||
enableHiding: false,
|
||||
},
|
||||
{
|
||||
accessorKey: "url",
|
||||
header: "Image",
|
||||
cell: ({ row }) => (
|
||||
<img
|
||||
src={row.getValue("url")}
|
||||
alt={`:${row.getValue("shortcode")}:`}
|
||||
title={row.getValue("shortcode")}
|
||||
class="h-[1lh] align-middle inline not-prose hover:scale-110 transition-transform duration-75 ease-in-out"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "shortcode",
|
||||
header: ({ column }) => {
|
||||
return (
|
||||
<Button
|
||||
variant="link"
|
||||
class="!p-0 !h-auto"
|
||||
// @ts-expect-error types don't include onClick
|
||||
onClick={() =>
|
||||
column.toggleSorting(column.getIsSorted() === "asc")
|
||||
}
|
||||
>
|
||||
Shortcode
|
||||
{column.getIsSorted() === false ? (
|
||||
<ArrowUpDown class="ml-2 size-4" />
|
||||
) : column.getIsSorted() === "asc" ? (
|
||||
<ArrowDownAZ class="ml-2 size-4" />
|
||||
) : (
|
||||
<ArrowUpAz class="ml-2 size-4" />
|
||||
)}
|
||||
</Button>
|
||||
);
|
||||
},
|
||||
cell: ({ row }) => (
|
||||
<div class="font-mono">{row.getValue("shortcode")}</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "category",
|
||||
header: ({ column }) => {
|
||||
return (
|
||||
<Button
|
||||
variant="link"
|
||||
class="!p-0 !h-auto"
|
||||
// @ts-expect-error types don't include onClick
|
||||
onClick={() =>
|
||||
column.toggleSorting(column.getIsSorted() === "asc")
|
||||
}
|
||||
>
|
||||
Category
|
||||
{column.getIsSorted() === false ? (
|
||||
<ArrowUpDown class="ml-2 size-4" />
|
||||
) : column.getIsSorted() === "asc" ? (
|
||||
<ArrowDownAZ class="ml-2 size-4" />
|
||||
) : (
|
||||
<ArrowUpAz class="ml-2 size-4" />
|
||||
)}
|
||||
</Button>
|
||||
);
|
||||
},
|
||||
cell: ({ row }) => (
|
||||
<div class="font-mono">
|
||||
{row.getValue("category") ?? "Uncategorized"}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "global",
|
||||
header: ({ column }) => {
|
||||
return (
|
||||
<Button
|
||||
variant="link"
|
||||
class="!p-0 !h-auto"
|
||||
// @ts-expect-error types don't include onClick
|
||||
onClick={() => {
|
||||
const filter = column.getFilterValue();
|
||||
|
||||
if (filter === undefined) {
|
||||
column.setFilterValue(false);
|
||||
} else if (filter === false) {
|
||||
column.setFilterValue(true);
|
||||
} else {
|
||||
column.setFilterValue(undefined);
|
||||
}
|
||||
}}
|
||||
>
|
||||
Uploader
|
||||
{column.getFilterValue() === undefined ? (
|
||||
<Ellipsis class="ml-2 size-4" />
|
||||
) : column.getFilterValue() ? (
|
||||
<Globe class="ml-2 size-4" />
|
||||
) : (
|
||||
<Home class="ml-2 size-4" />
|
||||
)}
|
||||
</Button>
|
||||
);
|
||||
},
|
||||
cell: ({ row }) => (
|
||||
<div class="font-mono">
|
||||
{row.getValue("global") ? "Admin" : "You"}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "actions",
|
||||
enableHiding: false,
|
||||
header: ({ table }) => {
|
||||
const selected = table
|
||||
.getFilteredSelectedRowModel()
|
||||
.rows.map((r) => r.original);
|
||||
|
||||
return (
|
||||
<div class="relative">
|
||||
<BatchDropdown emojis={selected}>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
// @ts-expect-error types don't include title
|
||||
title="Open menu"
|
||||
disabled={selected.length === 0}
|
||||
>
|
||||
<Ellipsis class="size-4" />
|
||||
</Button>
|
||||
</BatchDropdown>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
cell: ({ row }) => {
|
||||
const emoji = row.original;
|
||||
|
||||
return (
|
||||
<div class="relative">
|
||||
<Dropdown emoji={emoji} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const sorting = ref<SortingState>([
|
||||
{
|
||||
id: "shortcode",
|
||||
desc: false,
|
||||
},
|
||||
]);
|
||||
const columnFilters = ref<ColumnFiltersState>([]);
|
||||
const columnVisibility = ref<VisibilityState>({});
|
||||
const rowSelection = ref({});
|
||||
const expanded = ref<ExpandedState>({});
|
||||
|
||||
const table = useVueTable({
|
||||
data: emojisRef,
|
||||
columns,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
getPaginationRowModel: getPaginationRowModel(),
|
||||
getSortedRowModel: getSortedRowModel(),
|
||||
getFilteredRowModel: getFilteredRowModel(),
|
||||
getExpandedRowModel: getExpandedRowModel(),
|
||||
onSortingChange: (updaterOrValue) => valueUpdater(updaterOrValue, sorting),
|
||||
onColumnFiltersChange: (updaterOrValue) =>
|
||||
valueUpdater(updaterOrValue, columnFilters),
|
||||
onColumnVisibilityChange: (updaterOrValue) =>
|
||||
valueUpdater(updaterOrValue, columnVisibility),
|
||||
onRowSelectionChange: (updaterOrValue) =>
|
||||
valueUpdater(updaterOrValue, rowSelection),
|
||||
onExpandedChange: (updaterOrValue) =>
|
||||
valueUpdater(updaterOrValue, expanded),
|
||||
state: {
|
||||
get sorting() {
|
||||
return sorting.value;
|
||||
},
|
||||
get columnFilters() {
|
||||
return columnFilters.value;
|
||||
},
|
||||
get columnVisibility() {
|
||||
return columnVisibility.value;
|
||||
},
|
||||
get rowSelection() {
|
||||
return rowSelection.value;
|
||||
},
|
||||
get expanded() {
|
||||
return expanded.value;
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full">
|
||||
<div class="flex gap-2 items-center py-4">
|
||||
<Input class="max-w-52 mr-auto" placeholder="Filter emojis..."
|
||||
:model-value="(table.getColumn('shortcode')?.getFilterValue() as string)"
|
||||
@update:model-value="table.getColumn('shortcode')?.setFilterValue($event)" />
|
||||
<Uploader v-if="props.canUpload">
|
||||
<Button variant="outline" size="icon" title="Upload emoji">
|
||||
<Plus class="size-4" />
|
||||
</Button>
|
||||
</Uploader>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child>
|
||||
<Button variant="outline">
|
||||
Columns
|
||||
<ChevronDown class="ml-2 size-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuCheckboxItem
|
||||
v-for="column in table.getAllColumns().filter((column) => column.getCanHide())" :key="column.id"
|
||||
class="capitalize" :model-value="column.getIsVisible()" @update:model-value="(value) => {
|
||||
column.toggleVisibility(!!value)
|
||||
}">
|
||||
{{ column.id }}
|
||||
</DropdownMenuCheckboxItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
<div class="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
|
||||
<TableHead v-for="header in headerGroup.headers" :key="header.id" class="">
|
||||
<FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header"
|
||||
:props="header.getContext()" />
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<template v-if="table.getRowModel().rows?.length">
|
||||
<template v-for="row in table.getRowModel().rows" :key="row.id">
|
||||
<TableRow :data-state="row.getIsSelected() && 'selected'">
|
||||
<TableCell v-for="cell in row.getVisibleCells()" :key="cell.id">
|
||||
<FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow v-if="row.getIsExpanded()">
|
||||
<TableCell :colspan="row.getAllCells().length">
|
||||
{{ JSON.stringify(row.original) }}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<TableRow v-else>
|
||||
<TableCell :colspan="columns.length" class="h-24 text-center">
|
||||
No results.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-end space-x-2 py-4">
|
||||
<div class="flex-1 text-sm text-muted-foreground">
|
||||
{{ table.getFilteredSelectedRowModel().rows.length }} of
|
||||
{{ table.getFilteredRowModel().rows.length }} row(s) selected.
|
||||
</div>
|
||||
<div class="space-x-2">
|
||||
<Button variant="outline" size="sm" :disabled="!table.getCanPreviousPage()"
|
||||
@click="table.previousPage()">
|
||||
Previous
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" :disabled="!table.getCanNextPage()" @click="table.nextPage()">
|
||||
Next
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
<DialogDescription class="sr-only">
|
||||
{{ m.frail_great_marten_pet() }}
|
||||
</DialogDescription>
|
||||
<form class="p-4 grid gap-6" @submit="submit">
|
||||
<form class="grid gap-6" @submit="submit">
|
||||
<div
|
||||
v-if="values.image"
|
||||
class="flex items-center justify-around *:size-20 *:p-2 *:rounded *:border *:shadow"
|
||||
|
|
@ -125,32 +125,18 @@
|
|||
</FormField>
|
||||
|
||||
<FormField
|
||||
v-slot="{ componentField, value, handleChange }"
|
||||
v-slot="{ value, handleChange }"
|
||||
v-if="hasEmojiAdmin"
|
||||
name="global"
|
||||
:as="Card"
|
||||
as-child
|
||||
>
|
||||
<FormItem
|
||||
class="grid grid-cols-[1fr_auto] items-center gap-2"
|
||||
>
|
||||
<CardHeader class="space-y-0.5 p-0">
|
||||
<FormLabel :as="CardTitle">
|
||||
{{ m.pink_sharp_carp_work() }}
|
||||
</FormLabel>
|
||||
<CardDescription>
|
||||
{{ m.dark_pretty_hyena_link() }}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<FormControl>
|
||||
<FormSwitch :title="m.pink_sharp_carp_work()" :description="m.dark_pretty_hyena_link()">
|
||||
<Switch
|
||||
:checked="value"
|
||||
@update:checked="handleChange"
|
||||
v-bind="componentField"
|
||||
:model-value="value"
|
||||
@update:model-value="handleChange"
|
||||
:disabled="isSubmitting"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormSwitch>
|
||||
</FormField>
|
||||
|
||||
<DialogFooter>
|
||||
|
|
@ -178,6 +164,7 @@ import { RolePermission } from "@versia/client/types";
|
|||
import { useForm } from "vee-validate";
|
||||
import { toast } from "vue-sonner";
|
||||
import { z } from "zod";
|
||||
import FormSwitch from "~/components/form/switch.vue";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
|
|
|
|||
7
components/preferences/index.vue
Normal file
7
components/preferences/index.vue
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<template>
|
||||
<Dialog />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Dialog from "./dialog.vue";
|
||||
</script>
|
||||
15
components/preferences/page.vue
Normal file
15
components/preferences/page.vue
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<template>
|
||||
<section class="gap-4 flex flex-col">
|
||||
<h2 class="text-xl font-bold tracking-tight">
|
||||
{{ title }}
|
||||
</h2>
|
||||
|
||||
<slot />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const { title } = defineProps<{
|
||||
title: string;
|
||||
}>();
|
||||
</script>
|
||||
150
components/preferences/preferences.ts
Normal file
150
components/preferences/preferences.ts
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
import * as m from "~/paraglide/messages.js";
|
||||
import {
|
||||
BooleanPreference,
|
||||
CodePreference,
|
||||
MultiSelectPreference,
|
||||
NumberPreference,
|
||||
SelectPreference,
|
||||
UrlPreference,
|
||||
} from "./types";
|
||||
|
||||
export const preferences = {
|
||||
render_mfm: new BooleanPreference({
|
||||
name: m.quaint_clear_boar_attend(),
|
||||
description: m.aloof_helpful_larva_spur(),
|
||||
defaultValue: true,
|
||||
category: "Behaviour/Notes",
|
||||
}),
|
||||
default_visibility: new SelectPreference<
|
||||
"public" | "unlisted" | "private" | "direct"
|
||||
>({
|
||||
name: m.loud_tense_kitten_exhale(),
|
||||
description: m.vivid_last_crocodile_offer(),
|
||||
defaultValue: "public",
|
||||
options: {
|
||||
public: m.lost_trick_dog_grace(),
|
||||
unlisted: m.funny_slow_jannes_walk(),
|
||||
private: m.grassy_empty_raven_startle(),
|
||||
direct: m.pretty_bold_baboon_wave(),
|
||||
},
|
||||
category: "Behaviour/Posting",
|
||||
}),
|
||||
language: new SelectPreference<"en" | "fr">({
|
||||
name: m.pretty_born_jackal_dial(),
|
||||
description: m.tired_happy_lobster_pet(),
|
||||
defaultValue: "en",
|
||||
options: {
|
||||
en: m.keen_aware_goldfish_thrive(
|
||||
{},
|
||||
{
|
||||
locale: "en",
|
||||
},
|
||||
),
|
||||
fr: m.vivid_mellow_sawfish_approve(
|
||||
{},
|
||||
{
|
||||
locale: "fr",
|
||||
},
|
||||
),
|
||||
},
|
||||
category: "Behaviour/Globals",
|
||||
}),
|
||||
border_radius: new NumberPreference({
|
||||
name: "Border radius",
|
||||
description:
|
||||
"Global border radius that all elements inheritt from (rem units).",
|
||||
defaultValue: 0.625,
|
||||
step: 0.025,
|
||||
min: 0,
|
||||
max: 2,
|
||||
category: "Appearance/Globals",
|
||||
}),
|
||||
custom_css: new CodePreference({
|
||||
name: m.smart_awake_dachshund_view(),
|
||||
description: m.loved_topical_rat_coax(),
|
||||
defaultValue: "",
|
||||
language: "css",
|
||||
category: "Appearance/Globals",
|
||||
}),
|
||||
color_theme: new SelectPreference<"dark" | "light" | "system">({
|
||||
name: m.hour_elegant_mink_grip(),
|
||||
defaultValue: "system",
|
||||
options: {
|
||||
dark: m.wise_neat_ox_buzz(),
|
||||
light: m.each_strong_snail_aid(),
|
||||
system: m.helpful_raw_seal_nurture(),
|
||||
},
|
||||
category: "Appearance/Globals",
|
||||
}),
|
||||
custom_emojis: new BooleanPreference({
|
||||
name: m.loud_raw_sheep_imagine(),
|
||||
description: m.inclusive_pink_tuna_enjoy(),
|
||||
defaultValue: true,
|
||||
category: "Behaviour/Notes",
|
||||
}),
|
||||
show_content_warning: new BooleanPreference({
|
||||
name: m.fair_swift_elephant_hunt(),
|
||||
description: m.gray_minor_bee_endure(),
|
||||
defaultValue: true,
|
||||
category: "Behaviour/Notes",
|
||||
}),
|
||||
popup_avatar_hover: new BooleanPreference({
|
||||
name: m.north_nimble_turkey_transform(),
|
||||
description: m.bold_moving_fly_savor(),
|
||||
defaultValue: false,
|
||||
category: "Behaviour/Timelines",
|
||||
}),
|
||||
infinite_scroll: new BooleanPreference({
|
||||
name: m.sleek_this_earthworm_hug(),
|
||||
description: m.plane_dark_salmon_pout(),
|
||||
defaultValue: true,
|
||||
category: "Behaviour/Timelines",
|
||||
}),
|
||||
confirm_actions: new MultiSelectPreference<
|
||||
"delete" | "follow" | "like" | "reblog"
|
||||
>({
|
||||
name: "Confirm actions",
|
||||
description: "Confirm actions before performing them.",
|
||||
defaultValue: ["delete"],
|
||||
options: {
|
||||
delete: m.trite_salty_eel_race(),
|
||||
follow: m.jolly_empty_bullock_mend(),
|
||||
like: m.patchy_basic_alligator_inspire(),
|
||||
reblog: m.honest_great_rooster_taste(),
|
||||
},
|
||||
category: "Behaviour/Notes",
|
||||
}),
|
||||
ctrl_enter_send: new BooleanPreference({
|
||||
name: m.equal_blue_zebra_launch(),
|
||||
description: m.heavy_pink_meerkat_affirm(),
|
||||
defaultValue: true,
|
||||
category: "Behaviour/Posting",
|
||||
}),
|
||||
emoji_theme: new SelectPreference<
|
||||
"native" | "twemoji" | "noto" | "fluent" | "fluent-flat"
|
||||
>({
|
||||
name: m.weak_bad_martin_glow(),
|
||||
description: m.warm_round_dove_skip(),
|
||||
defaultValue: "native",
|
||||
options: {
|
||||
native: m.slimy_sound_termite_hug(),
|
||||
twemoji: m.new_brave_maggot_relish(),
|
||||
noto: m.shy_clear_spider_cook(),
|
||||
fluent: m.many_tasty_midge_zoom(),
|
||||
"fluent-flat": m.less_early_lionfish_honor(),
|
||||
},
|
||||
category: "Appearance/Globals",
|
||||
}),
|
||||
background_url: new UrlPreference({
|
||||
name: m.stock_large_marten_comfort(),
|
||||
description: m.mean_weird_donkey_stab(),
|
||||
defaultValue: "",
|
||||
category: "Appearance/Globals",
|
||||
}),
|
||||
display_notifications_sidebar: new BooleanPreference({
|
||||
name: m.tired_jumpy_rook_slurp(),
|
||||
description: m.wide_new_robin_empower(),
|
||||
defaultValue: true,
|
||||
category: "Appearance/Globals",
|
||||
}),
|
||||
} as const;
|
||||
63
components/preferences/profile.ts
Normal file
63
components/preferences/profile.ts
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
import { toTypedSchema } from "@vee-validate/zod";
|
||||
import { z } from "zod";
|
||||
import * as m from "~/paraglide/messages.js";
|
||||
|
||||
const characterRegex = new RegExp(/^[a-z0-9_-]+$/);
|
||||
|
||||
export const formSchema = (identity: Identity) =>
|
||||
toTypedSchema(
|
||||
z.strictObject({
|
||||
banner: z
|
||||
.instanceof(File)
|
||||
.refine(
|
||||
(v) =>
|
||||
v.size <=
|
||||
(identity.instance.configuration.accounts
|
||||
.header_size_limit ?? Number.POSITIVE_INFINITY),
|
||||
m.civil_icy_ant_mend({
|
||||
size: identity.instance.configuration.accounts
|
||||
.header_size_limit,
|
||||
}),
|
||||
)
|
||||
.optional(),
|
||||
avatar: z
|
||||
.instanceof(File)
|
||||
.refine(
|
||||
(v) =>
|
||||
v.size <=
|
||||
(identity.instance.configuration.accounts
|
||||
.avatar_size_limit ?? Number.POSITIVE_INFINITY),
|
||||
m.zippy_caring_raven_edit({
|
||||
size: identity.instance.configuration.accounts
|
||||
.avatar_size_limit,
|
||||
}),
|
||||
)
|
||||
.or(z.string().url())
|
||||
.optional(),
|
||||
name: z
|
||||
.string()
|
||||
.max(
|
||||
identity.instance.configuration.accounts
|
||||
.max_displayname_characters,
|
||||
),
|
||||
username: z
|
||||
.string()
|
||||
.regex(characterRegex, m.still_upper_otter_dine())
|
||||
.max(
|
||||
identity.instance.configuration.accounts
|
||||
.max_username_characters,
|
||||
),
|
||||
bio: z
|
||||
.string()
|
||||
.max(
|
||||
identity.instance.configuration.accounts
|
||||
.max_note_characters,
|
||||
),
|
||||
bot: z.boolean().default(false),
|
||||
locked: z.boolean().default(false),
|
||||
discoverable: z.boolean().default(true),
|
||||
fields: z.array(
|
||||
z.strictObject({ name: z.string(), value: z.string() }),
|
||||
),
|
||||
}),
|
||||
);
|
||||
185
components/preferences/profile.vue
Normal file
185
components/preferences/profile.vue
Normal file
|
|
@ -0,0 +1,185 @@
|
|||
<template>
|
||||
<form v-if="identity" class="grid gap-6" @submit="save">
|
||||
<Transition name="slide-up">
|
||||
<Alert v-if="dirty" layout="button" class="absolute bottom-2 z-10 inset-x-2 w-[calc(100%-1rem)]">
|
||||
<SaveOff class="size-4" />
|
||||
<AlertTitle>Unsaved changes</AlertTitle>
|
||||
<AlertDescription>
|
||||
Click "apply" to save your changes.
|
||||
</AlertDescription>
|
||||
<Button variant="secondary" class="w-full" typ="submit" :disabled="submitting">Apply</Button>
|
||||
</Alert>
|
||||
</Transition>
|
||||
|
||||
<FormField v-slot="{ handleChange, handleBlur }" name="banner">
|
||||
<TextInput :title="m.bright_late_osprey_renew()" :description="m.great_level_lamb_sway()">
|
||||
<Input type="file" accept="image/*" @change="handleChange" @blur="handleBlur" />
|
||||
</TextInput>
|
||||
</FormField>
|
||||
|
||||
<FormField v-slot="{ setValue }" name="avatar">
|
||||
<TextInput :title="m.safe_icy_bulldog_quell()">
|
||||
<ImageUploader v-model:image="identity.account.avatar" @submit-file="(file) => setValue(file)"
|
||||
@submit-url="(url) => setValue(url)" />
|
||||
</TextInput>
|
||||
</FormField>
|
||||
|
||||
<FormField v-slot="{ componentField }" name="name">
|
||||
<TextInput :title="m.mild_known_mallard_jolt()" :description="m.lime_dry_skunk_loop()">
|
||||
<Input v-bind="componentField" />
|
||||
</TextInput>
|
||||
</FormField>
|
||||
|
||||
<FormField v-slot="{ componentField }" name="username">
|
||||
<TextInput :title="m.neat_silly_dog_prosper()" :description="m.petty_plane_tadpole_earn()">
|
||||
<Input v-bind="componentField" />
|
||||
</TextInput>
|
||||
</FormField>
|
||||
|
||||
<FormField v-slot="{ componentField }" name="bio">
|
||||
<TextInput :title="m.next_caring_ladybug_hack()" :description="m.stale_just_anaconda_earn()">
|
||||
<Textarea rows="10" v-bind="componentField" />
|
||||
</TextInput>
|
||||
</FormField>
|
||||
|
||||
<FormField v-slot="{ value, handleChange }" name="fields">
|
||||
<Fields :title="m.aqua_mealy_toucan_pride()" :value="value" @update:value="handleChange" />
|
||||
</FormField>
|
||||
|
||||
<FormField v-slot="{ value, handleChange }" name="bot" as-child>
|
||||
<SwitchInput :title="m.gaudy_each_opossum_play()" :description="m.grassy_acidic_gadfly_cure()">
|
||||
<Switch :model-value="value" @update:model-value="handleChange" />
|
||||
</SwitchInput>
|
||||
</FormField>
|
||||
|
||||
<FormField v-slot="{ value, handleChange }" name="locked" as-child>
|
||||
<SwitchInput :title="m.dirty_moving_shark_emerge()" :description="m.bright_fun_mouse_boil()">
|
||||
<Switch :model-value="value" @update:model-value="handleChange" />
|
||||
</SwitchInput>
|
||||
</FormField>
|
||||
|
||||
<FormField v-slot="{ value, handleChange }" name="discoverable" as-child>
|
||||
<SwitchInput :title="m.red_vivid_cuckoo_spark()" :description="m.plain_zany_donkey_dart()">
|
||||
<Switch :model-value="value" @update:model-value="handleChange" />
|
||||
</SwitchInput>
|
||||
</FormField>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { SaveOff } from "lucide-vue-next";
|
||||
import { useForm } from "vee-validate";
|
||||
import { toast } from "vue-sonner";
|
||||
import SwitchInput from "~/components/form/switch.vue";
|
||||
import TextInput from "~/components/form/text.vue";
|
||||
import * as m from "~/paraglide/messages.js";
|
||||
import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
|
||||
import { Button } from "../ui/button";
|
||||
import { FormField } from "../ui/form";
|
||||
import { Input } from "../ui/input";
|
||||
import { Switch } from "../ui/switch";
|
||||
import { Textarea } from "../ui/textarea";
|
||||
import { formSchema } from "./profile";
|
||||
import Fields from "./profile/fields.vue";
|
||||
import ImageUploader from "./profile/image-uploader.vue";
|
||||
|
||||
const dirty = computed(() => form.meta.value.dirty);
|
||||
const submitting = ref(false);
|
||||
|
||||
if (!identity.value) {
|
||||
throw new Error("Identity not found.");
|
||||
}
|
||||
|
||||
const account = computed(() => identity.value?.account as Identity["account"]);
|
||||
const schema = formSchema(identity.value);
|
||||
|
||||
const form = useForm({
|
||||
validationSchema: schema,
|
||||
initialValues: {
|
||||
bio: account.value.source?.note ?? "",
|
||||
bot: account.value.bot ?? false,
|
||||
locked: account.value.locked ?? false,
|
||||
discoverable: account.value.discoverable ?? true,
|
||||
username: account.value.username,
|
||||
name: account.value.display_name,
|
||||
fields:
|
||||
account.value.source?.fields.map((f) => ({
|
||||
name: f.name,
|
||||
value: f.value,
|
||||
})) ?? [],
|
||||
},
|
||||
});
|
||||
|
||||
const save = form.handleSubmit(async (values) => {
|
||||
if (submitting.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
submitting.value = true;
|
||||
const id = toast.loading(m.jolly_noble_sloth_breathe());
|
||||
|
||||
const changedData = {
|
||||
display_name:
|
||||
values.name === account.value.display_name
|
||||
? undefined
|
||||
: values.name,
|
||||
username:
|
||||
values.username === account.value.username
|
||||
? undefined
|
||||
: values.username,
|
||||
note:
|
||||
values.bio === account.value.source?.note ? undefined : values.bio,
|
||||
bot: values.bot === account.value.bot ? undefined : values.bot,
|
||||
locked:
|
||||
values.locked === account.value.locked ? undefined : values.locked,
|
||||
discoverable:
|
||||
values.discoverable === account.value.discoverable
|
||||
? undefined
|
||||
: values.discoverable,
|
||||
// Can't compare two arrays directly in JS, so we need to check if all fields are the same
|
||||
fields_attributes: values.fields.every((field) =>
|
||||
account.value.source?.fields?.some(
|
||||
(f) => f.name === field.name && f.value === field.value,
|
||||
),
|
||||
)
|
||||
? undefined
|
||||
: values.fields,
|
||||
header: values.banner ? values.banner : undefined,
|
||||
avatar: values.avatar ? values.avatar : undefined,
|
||||
};
|
||||
|
||||
if (
|
||||
Object.values(changedData).filter((v) => v !== undefined).length === 0
|
||||
) {
|
||||
toast.dismiss(id);
|
||||
toast.error(m.tough_alive_niklas_promise());
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const { data } = await client.value.updateCredentials(
|
||||
Object.fromEntries(
|
||||
Object.entries(changedData).filter(([, v]) => v !== undefined),
|
||||
),
|
||||
);
|
||||
|
||||
toast.dismiss(id);
|
||||
toast.success(m.spry_honest_kestrel_arrive());
|
||||
|
||||
if (identity.value) {
|
||||
identity.value.account = data;
|
||||
}
|
||||
|
||||
form.resetForm({
|
||||
values: {
|
||||
...form.values,
|
||||
...values,
|
||||
},
|
||||
});
|
||||
} catch (e) {
|
||||
toast.dismiss(id);
|
||||
}
|
||||
|
||||
submitting.value = false;
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,419 +0,0 @@
|
|||
<template>
|
||||
<Card v-if="identity" class="w-full max-h-full block overflow-y-auto">
|
||||
<form class="p-4 grid gap-6" ref="formRef" @submit="handleSubmit">
|
||||
<FormField v-slot="{ handleChange, handleBlur }" name="banner">
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{{ m.bright_late_osprey_renew() }}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
@change="handleChange"
|
||||
@blur="handleBlur"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
{{ m.great_level_lamb_sway() }}
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<FormField v-slot="{ setValue }" name="avatar">
|
||||
<FormItem class="grid gap-1">
|
||||
<FormLabel>
|
||||
{{ m.safe_icy_bulldog_quell() }}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<ImageUploader
|
||||
v-model:image="identity.account.avatar"
|
||||
@submit-file="(file) => setValue(file)"
|
||||
@submit-url="(url) => setValue(url)"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<FormField v-slot="{ componentField }" name="name">
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{{ m.mild_known_mallard_jolt() }}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input v-bind="componentField" />
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
{{ m.lime_dry_skunk_loop() }}
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<FormField v-slot="{ componentField }" name="username">
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{{ m.neat_silly_dog_prosper() }}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input v-bind="componentField" />
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
{{ m.petty_plane_tadpole_earn() }}
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<FormField v-slot="{ componentField }" name="bio">
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{{ m.next_caring_ladybug_hack() }}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea rows="10" v-bind="componentField" />
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
{{ m.stale_just_anaconda_earn() }}
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<FormField v-slot="{ value, handleChange }" name="fields">
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{{ m.aqua_mealy_toucan_pride() }}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<div class="grid gap-4">
|
||||
<div
|
||||
v-for="(field, index) in value"
|
||||
:key="index"
|
||||
class="grid items-center grid-cols-[auto_repeat(3,minmax(0,1fr))] gap-2"
|
||||
>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="icon"
|
||||
@click="
|
||||
handleChange([
|
||||
...value.slice(0, index),
|
||||
...value.slice(index + 1),
|
||||
])
|
||||
"
|
||||
>
|
||||
<Trash />
|
||||
</Button>
|
||||
<Input
|
||||
v-model="field.name"
|
||||
placeholder="Name"
|
||||
@update:model-value="
|
||||
(e) => {
|
||||
handleChange([
|
||||
...value.slice(0, index),
|
||||
{ name: e, value: field.value },
|
||||
...value.slice(index + 1),
|
||||
]);
|
||||
}
|
||||
"
|
||||
/>
|
||||
<Input
|
||||
v-model="field.value"
|
||||
placeholder="Value"
|
||||
class="col-span-2"
|
||||
@update:model-value="
|
||||
(e) => {
|
||||
handleChange([
|
||||
...value.slice(0, index),
|
||||
{ name: field.name, value: e },
|
||||
...value.slice(index + 1),
|
||||
]);
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
@click="
|
||||
handleChange([
|
||||
...value,
|
||||
{ name: '', value: '' },
|
||||
])
|
||||
"
|
||||
>
|
||||
{{ m.front_north_eel_gulp() }}
|
||||
</Button>
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<FormField
|
||||
v-slot="{ componentField, value, handleChange }"
|
||||
name="bot"
|
||||
:as="Card"
|
||||
class="block"
|
||||
>
|
||||
<FormItem
|
||||
class="grid grid-cols-[1fr_auto] items-center gap-2"
|
||||
>
|
||||
<CardHeader class="space-y-0.5 p-0">
|
||||
<FormLabel :as="CardTitle">
|
||||
{{ m.gaudy_each_opossum_play() }}
|
||||
</FormLabel>
|
||||
<CardDescription>
|
||||
{{ m.grassy_acidic_gadfly_cure() }}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<FormControl>
|
||||
<Switch
|
||||
:checked="value"
|
||||
@update:checked="handleChange"
|
||||
v-bind="componentField"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<FormField
|
||||
v-slot="{ componentField, value, handleChange }"
|
||||
name="locked"
|
||||
:as="Card"
|
||||
class="block"
|
||||
>
|
||||
<FormItem
|
||||
class="grid grid-cols-[1fr_auto] items-center gap-2"
|
||||
>
|
||||
<CardHeader class="space-y-0.5 p-0">
|
||||
<FormLabel :as="CardTitle">
|
||||
{{ m.dirty_moving_shark_emerge() }}
|
||||
</FormLabel>
|
||||
<CardDescription>
|
||||
{{ m.bright_fun_mouse_boil() }}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<FormControl>
|
||||
<Switch
|
||||
:checked="value"
|
||||
@update:checked="handleChange"
|
||||
v-bind="componentField"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<FormField
|
||||
v-slot="{ componentField, value, handleChange }"
|
||||
name="discoverable"
|
||||
:as="Card"
|
||||
class="block"
|
||||
>
|
||||
<FormItem
|
||||
class="grid grid-cols-[1fr_auto] items-center gap-2"
|
||||
>
|
||||
<CardHeader class="space-y-0.5 p-0">
|
||||
<FormLabel :as="CardTitle">
|
||||
{{ m.red_vivid_cuckoo_spark() }}
|
||||
</FormLabel>
|
||||
<CardDescription>
|
||||
{{ m.plain_zany_donkey_dart() }}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<FormControl>
|
||||
<Switch
|
||||
:checked="value"
|
||||
@update:checked="handleChange"
|
||||
v-bind="componentField"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</form>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { toTypedSchema } from "@vee-validate/zod";
|
||||
import type { ResponseError } from "@versia/client";
|
||||
import { Trash } from "lucide-vue-next";
|
||||
import { useForm } from "vee-validate";
|
||||
import { toast } from "vue-sonner";
|
||||
import { z } from "zod";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "~/components/ui/card";
|
||||
import {
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "~/components/ui/form";
|
||||
import { Input } from "~/components/ui/input";
|
||||
import { Switch } from "~/components/ui/switch";
|
||||
import { Textarea } from "~/components/ui/textarea";
|
||||
import * as m from "~/paraglide/messages.js";
|
||||
import ImageUploader from "./image-uploader.vue";
|
||||
|
||||
if (!identity.value) {
|
||||
throw new Error("Identity not found.");
|
||||
}
|
||||
|
||||
const account = ref(identity.value.account);
|
||||
|
||||
const formSchema = toTypedSchema(
|
||||
z.object({
|
||||
banner: z
|
||||
.instanceof(File)
|
||||
.refine(
|
||||
(v) =>
|
||||
v.size <=
|
||||
(identity.value?.instance.configuration.accounts
|
||||
.header_size_limit ?? Number.POSITIVE_INFINITY),
|
||||
m.civil_icy_ant_mend({
|
||||
size: identity.value?.instance.configuration.accounts
|
||||
.header_size_limit,
|
||||
}),
|
||||
)
|
||||
.optional(),
|
||||
avatar: z
|
||||
.instanceof(File)
|
||||
.refine(
|
||||
(v) =>
|
||||
v.size <=
|
||||
(identity.value?.instance.configuration.accounts
|
||||
.avatar_size_limit ?? Number.POSITIVE_INFINITY),
|
||||
m.zippy_caring_raven_edit({
|
||||
size: identity.value?.instance.configuration.accounts
|
||||
.avatar_size_limit,
|
||||
}),
|
||||
)
|
||||
.or(z.string().url())
|
||||
.optional(),
|
||||
name: z
|
||||
.string()
|
||||
.max(
|
||||
identity.value.instance.configuration.accounts
|
||||
.max_displayname_characters,
|
||||
),
|
||||
username: z
|
||||
.string()
|
||||
.regex(/^[a-z0-9_-]+$/, m.still_upper_otter_dine())
|
||||
.max(
|
||||
identity.value.instance.configuration.accounts
|
||||
.max_username_characters,
|
||||
),
|
||||
bio: z
|
||||
.string()
|
||||
.max(
|
||||
identity.value.instance.configuration.accounts
|
||||
.max_note_characters,
|
||||
),
|
||||
bot: z.boolean(),
|
||||
locked: z.boolean(),
|
||||
discoverable: z.boolean(),
|
||||
fields: z.array(z.object({ name: z.string(), value: z.string() })),
|
||||
}),
|
||||
);
|
||||
|
||||
const form = useForm({
|
||||
validationSchema: formSchema,
|
||||
initialValues: {
|
||||
bio: account.value.source?.note ?? "",
|
||||
bot: account.value.bot ?? false,
|
||||
locked: account.value.locked ?? false,
|
||||
discoverable: account.value.discoverable ?? true,
|
||||
username: account.value.username,
|
||||
name: account.value.display_name,
|
||||
fields: account.value.source?.fields ?? [],
|
||||
},
|
||||
});
|
||||
|
||||
const handleSubmit = form.handleSubmit(async (values) => {
|
||||
const id = toast.loading(m.jolly_noble_sloth_breathe());
|
||||
|
||||
const changedData = {
|
||||
display_name:
|
||||
values.name === account.value.display_name
|
||||
? undefined
|
||||
: values.name,
|
||||
username:
|
||||
values.username === account.value.username
|
||||
? undefined
|
||||
: values.username,
|
||||
note:
|
||||
values.bio === account.value.source?.note ? undefined : values.bio,
|
||||
bot: values.bot === account.value.bot ? undefined : values.bot,
|
||||
locked:
|
||||
values.locked === account.value.locked ? undefined : values.locked,
|
||||
discoverable:
|
||||
values.discoverable === account.value.discoverable
|
||||
? undefined
|
||||
: values.discoverable,
|
||||
// Can't compare two arrays directly in JS, so we need to check if all fields are the same
|
||||
fields_attributes: values.fields.every((field) =>
|
||||
account.value.source?.fields?.some(
|
||||
(f) => f.name === field.name && f.value === field.value,
|
||||
),
|
||||
)
|
||||
? undefined
|
||||
: values.fields,
|
||||
header: values.banner ? values.banner : undefined,
|
||||
avatar: values.avatar ? values.avatar : undefined,
|
||||
};
|
||||
|
||||
if (
|
||||
Object.values(changedData).filter((v) => v !== undefined).length === 0
|
||||
) {
|
||||
toast.dismiss(id);
|
||||
toast.error(m.tough_alive_niklas_promise());
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const { data } = await client.value.updateCredentials(
|
||||
Object.fromEntries(
|
||||
Object.entries(changedData).filter(([, v]) => v !== undefined),
|
||||
),
|
||||
);
|
||||
|
||||
toast.dismiss(id);
|
||||
toast.success(m.spry_honest_kestrel_arrive());
|
||||
|
||||
if (identity.value) {
|
||||
identity.value.account = data;
|
||||
}
|
||||
|
||||
account.value = data;
|
||||
form.resetForm({
|
||||
values: {
|
||||
...form.values,
|
||||
...values,
|
||||
},
|
||||
});
|
||||
} catch (e) {
|
||||
const error = e as ResponseError<{ error: string }>;
|
||||
|
||||
toast.dismiss(id);
|
||||
}
|
||||
});
|
||||
|
||||
const formRef = ref<HTMLFormElement | null>(null);
|
||||
|
||||
defineExpose({
|
||||
submitForm: () => handleSubmit(),
|
||||
dirty: computed(() => form.meta.value.dirty),
|
||||
});
|
||||
</script>
|
||||
104
components/preferences/profile/fields.vue
Normal file
104
components/preferences/profile/fields.vue
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
<template>
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{{ title }}
|
||||
<Button type="button" variant="secondary" size="icon" class="ml-auto" @click="addField()" :title="m.front_north_eel_gulp()">
|
||||
<Plus />
|
||||
</Button>
|
||||
</FormLabel>
|
||||
|
||||
<FormControl>
|
||||
<VueDraggable class="grid gap-4" v-model="list" :animation="200" handle=".drag-handle">
|
||||
<div v-for="(field, index) in list" :key="field.id"
|
||||
class="grid items-center grid-cols-[auto_repeat(3,minmax(0,1fr))_auto] gap-2">
|
||||
<Button as="span" variant="ghost" size="icon" class="drag-handle cursor-grab">
|
||||
<GripVertical />
|
||||
</Button>
|
||||
<Input :model-value="field.name" placeholder="Name" @update:model-value="
|
||||
(e) => updateKey(index, String(e))
|
||||
" />
|
||||
<Input :model-value="field.value" placeholder="Value" class="col-span-2" @update:model-value="
|
||||
(e) => updateValue(index, String(e))
|
||||
" />
|
||||
<Button type="button" variant="secondary" size="icon" @click="removeField(index)">
|
||||
<Trash />
|
||||
</Button>
|
||||
</div>
|
||||
</VueDraggable>
|
||||
<FormMessage />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { GripVertical, Plus, Trash } from "lucide-vue-next";
|
||||
import { VueDraggable } from "vue-draggable-plus";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import {
|
||||
FormControl,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "~/components/ui/form";
|
||||
import { Input } from "~/components/ui/input";
|
||||
import * as m from "~/paraglide/messages.js";
|
||||
|
||||
const { title } = defineProps<{
|
||||
title: string;
|
||||
}>();
|
||||
|
||||
const value = defineModel<{ name: string; value: string }[]>("value", {
|
||||
default: [],
|
||||
});
|
||||
|
||||
const list = ref<
|
||||
{
|
||||
id: string;
|
||||
name: string;
|
||||
value: string;
|
||||
}[]
|
||||
>(
|
||||
value.value.map((item, index) => ({
|
||||
id: String(index),
|
||||
name: item.name,
|
||||
value: item.value,
|
||||
})),
|
||||
);
|
||||
|
||||
watch(
|
||||
list,
|
||||
(newList) => {
|
||||
value.value = newList.map((item) => ({
|
||||
name: item.name,
|
||||
value: item.value,
|
||||
}));
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
},
|
||||
);
|
||||
|
||||
const updateKey = (index: number, key: string) => {
|
||||
if (!list.value[index]) {
|
||||
return;
|
||||
}
|
||||
|
||||
list.value[index].name = key;
|
||||
};
|
||||
|
||||
const updateValue = (index: number, val: string) => {
|
||||
if (!list.value[index]) {
|
||||
return;
|
||||
}
|
||||
|
||||
list.value[index].value = val;
|
||||
};
|
||||
|
||||
const removeField = (index: number) => {
|
||||
list.value.splice(index, 1);
|
||||
};
|
||||
|
||||
const addField = () => {
|
||||
list.value.push({ name: "", value: "", id: String(list.value.length) });
|
||||
};
|
||||
</script>
|
||||
|
|
@ -21,10 +21,10 @@
|
|||
<DialogDescription class="sr-only">
|
||||
{{ m.suave_broad_albatross_drop() }}
|
||||
</DialogDescription>
|
||||
<form class="p-4 grid gap-6" @submit="submit">
|
||||
<form class="grid gap-6" @submit="submit">
|
||||
<Tabs
|
||||
default-value="upload"
|
||||
class="mt-2 data-[component=tabpanel]:*:mt-6"
|
||||
class="mt-2 *:data-[slot=tabs-content]:mt-2"
|
||||
>
|
||||
<TabsList class="w-full *:w-full">
|
||||
<TabsTrigger value="upload">
|
||||
|
|
@ -222,7 +222,7 @@ const emailToGravatar = async (email: string) => {
|
|||
const open = ref(false);
|
||||
const gravatarUrl = ref<string | undefined>(undefined);
|
||||
|
||||
const { handleSubmit, isSubmitting, values } = useForm({
|
||||
const { handleSubmit, isSubmitting } = useForm({
|
||||
validationSchema: schema,
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,46 +0,0 @@
|
|||
<template>
|
||||
<Card class="grid grid-cols-[1fr_auto] items-center px-6 py-4 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>
|
||||
37
components/preferences/stats.vue
Normal file
37
components/preferences/stats.vue
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<template>
|
||||
<Card class="grid gap-3 text-sm max-w-sm p-4">
|
||||
<dl class="grid gap-3">
|
||||
<div v-for="[key, value] of data" :key="key" class="flex flex-row items-baseline justify-between gap-4 truncate">
|
||||
<dt class="text-muted-foreground">
|
||||
{{ key }}
|
||||
</dt>
|
||||
<dd class="font-mono" v-if="typeof value === 'string'">{{ value }}</dd>
|
||||
<dd class="font-mono" v-else>
|
||||
<component :is="value" />
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script lang="tsx" setup>
|
||||
import type { VNode } from "vue";
|
||||
import pkg from "~/package.json";
|
||||
import { Card } from "../ui/card";
|
||||
|
||||
const data: [string, string | VNode][] = [
|
||||
["Version", pkg.version],
|
||||
["Licence", pkg.license],
|
||||
["Author", pkg.author.name],
|
||||
[
|
||||
"Repository",
|
||||
<a
|
||||
href={pkg.repository.url.replace("git+", "")}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{pkg.repository.url.replace("git+", "").replace("https://", "")}
|
||||
</a>,
|
||||
],
|
||||
];
|
||||
</script>
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
<template>
|
||||
<Card class="grid grid-rows-[1fr_auto] xl:grid-rows-none xl:grid-cols-[1fr_auto] items-center px-6 py-4 gap-4">
|
||||
<CardHeader class="space-y-0.5 p-0">
|
||||
<CardTitle class="text-base">
|
||||
{{ setting.title() }}
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
{{ setting.description() }}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardFooter class="p-0">
|
||||
<Input :model-value="setting.value" @update:model-value="v => { setting.value = String(v) }" />
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
Card,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "~/components/ui/card";
|
||||
import { Input } from "~/components/ui/input";
|
||||
import type { StringSetting } from "~/settings.ts";
|
||||
|
||||
defineModel<StringSetting>("setting", {
|
||||
required: true,
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
<template>
|
||||
<Card class="grid grid-cols-[1fr_auto] items-center px-6 py-4 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">
|
||||
<Switch :disabled="setting.notImplemented" :checked="setting.value" @update:checked="v => { setting.value = v }" />
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
Card,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "~/components/ui/card";
|
||||
import { Switch } from "~/components/ui/switch";
|
||||
import type { BooleanSetting } from "~/settings.ts";
|
||||
|
||||
defineModel<BooleanSetting>("setting", {
|
||||
required: true,
|
||||
});
|
||||
</script>
|
||||
71
components/preferences/types.ts
Normal file
71
components/preferences/types.ts
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
export interface PreferenceOptions<ValueType> {
|
||||
name: string;
|
||||
description?: string;
|
||||
category?: string;
|
||||
defaultValue: ValueType;
|
||||
}
|
||||
|
||||
export abstract class Preference<ValueType> {
|
||||
public abstract options: PreferenceOptions<ValueType>;
|
||||
}
|
||||
|
||||
export class TextPreference extends Preference<string> {
|
||||
constructor(public options: PreferenceOptions<string>) {
|
||||
super();
|
||||
}
|
||||
}
|
||||
|
||||
export class NumberPreference extends Preference<number> {
|
||||
constructor(
|
||||
public options: PreferenceOptions<number> & {
|
||||
integer?: boolean;
|
||||
step?: number;
|
||||
min?: number;
|
||||
max?: number;
|
||||
},
|
||||
) {
|
||||
super();
|
||||
}
|
||||
}
|
||||
|
||||
export class BooleanPreference extends Preference<boolean> {
|
||||
constructor(public options: PreferenceOptions<boolean>) {
|
||||
super();
|
||||
}
|
||||
}
|
||||
|
||||
export class SelectPreference<T extends string> extends Preference<T> {
|
||||
constructor(
|
||||
public options: PreferenceOptions<T> & {
|
||||
options: Record<T, string>;
|
||||
},
|
||||
) {
|
||||
super();
|
||||
}
|
||||
}
|
||||
|
||||
export class CodePreference extends Preference<string> {
|
||||
constructor(
|
||||
public options: PreferenceOptions<string> & {
|
||||
language?: "css";
|
||||
},
|
||||
) {
|
||||
super();
|
||||
}
|
||||
}
|
||||
|
||||
export class MultiSelectPreference<T extends string> extends Preference<T[]> {
|
||||
constructor(
|
||||
public options: PreferenceOptions<T[]> & {
|
||||
options: Record<T, string>;
|
||||
},
|
||||
) {
|
||||
super();
|
||||
}
|
||||
}
|
||||
|
||||
export class UrlPreference extends Preference<string> {
|
||||
constructor(public options: PreferenceOptions<string>) {
|
||||
super();
|
||||
}
|
||||
}
|
||||
43
components/preferences/types/base.vue
Normal file
43
components/preferences/types/base.vue
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<template>
|
||||
<div class="grid grid-cols-[minmax(0,1fr)_auto] gap-2 hover:bg-muted/40 duration-75 p-4">
|
||||
<div class="flex flex-col gap-1">
|
||||
<h3 class="text-sm font-semibold tracking-tight">{{ pref.options.name }}</h3>
|
||||
<small v-if="pref.options.description" class="text-xs font-medium leading-none text-muted-foreground">{{
|
||||
pref.options.description }}</small>
|
||||
</div>
|
||||
<div class="flex items-center justify-end">
|
||||
<slot :value="value" :set-value="setValue" />
|
||||
</div>
|
||||
<slot name="extra" :value="value" :set-value="setValue" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { preferences as prefs } from "../preferences";
|
||||
import type { Preference } from "../types";
|
||||
|
||||
const { pref, name } = defineProps<{
|
||||
pref: Preference<any>;
|
||||
name: keyof typeof prefs;
|
||||
}>();
|
||||
|
||||
const value = ref<any>(preferences[name].value);
|
||||
const setValue = (newValue: MaybeRef<any>) => {
|
||||
value.value = toValue(newValue);
|
||||
};
|
||||
|
||||
watch(value, (newVal) => {
|
||||
preferences[name].value = newVal;
|
||||
});
|
||||
|
||||
defineSlots<{
|
||||
default(props: {
|
||||
value: any;
|
||||
setValue: (value: MaybeRef<any>) => void;
|
||||
}): any;
|
||||
extra(props: {
|
||||
value: any;
|
||||
setValue: (value: MaybeRef<any>) => void;
|
||||
}): any;
|
||||
}>();
|
||||
</script>
|
||||
17
components/preferences/types/boolean.vue
Normal file
17
components/preferences/types/boolean.vue
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<template>
|
||||
<Base :pref="pref" :name="name" v-slot="{ setValue, value }">
|
||||
<Switch @update:model-value="setValue" :model-value="value" />
|
||||
</Base>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { Switch } from "~/components/ui/switch";
|
||||
import type { preferences as prefs } from "../preferences";
|
||||
import type { BooleanPreference } from "../types";
|
||||
import Base from "./base.vue";
|
||||
|
||||
const { pref, name } = defineProps<{
|
||||
pref: BooleanPreference;
|
||||
name: keyof typeof prefs;
|
||||
}>();
|
||||
</script>
|
||||
36
components/preferences/types/code.vue
Normal file
36
components/preferences/types/code.vue
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<template>
|
||||
<Collapsible as-child>
|
||||
<Base :name="name" :pref="pref">
|
||||
<template #default>
|
||||
<CollapsibleTrigger as-child>
|
||||
<Button variant="outline">
|
||||
Open code
|
||||
</Button>
|
||||
</CollapsibleTrigger>
|
||||
</template>
|
||||
<template #extra="{ setValue, value }">
|
||||
<CollapsibleContent class="col-span-2 mt-2">
|
||||
<Textarea :rows="10" :model-value="value" @update:model-value="setValue" />
|
||||
</CollapsibleContent>
|
||||
</template>
|
||||
</Base>
|
||||
</Collapsible>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { Button } from "~/components/ui/button";
|
||||
import {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from "~/components/ui/collapsible";
|
||||
import { Textarea } from "~/components/ui/textarea";
|
||||
import type { preferences as prefs } from "../preferences";
|
||||
import type { CodePreference } from "../types";
|
||||
import Base from "./base.vue";
|
||||
|
||||
const { pref, name } = defineProps<{
|
||||
pref: CodePreference;
|
||||
name: keyof typeof prefs;
|
||||
}>();
|
||||
</script>
|
||||
41
components/preferences/types/multiselect.vue
Normal file
41
components/preferences/types/multiselect.vue
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<template>
|
||||
<Base :pref="pref" :name="name" v-slot="{ setValue, value }">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child>
|
||||
<Button variant="outline">
|
||||
Pick
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent class="w-56">
|
||||
<DropdownMenuCheckboxItem v-for="[option, title] in Object.entries(pref.options.options)" :key="option"
|
||||
:model-value="value.includes(option)" @update:model-value="checked => {
|
||||
if (checked) {
|
||||
setValue([...value, option]);
|
||||
} else {
|
||||
setValue(value.filter((v: any) => v !== option));
|
||||
}
|
||||
}">
|
||||
{{ title }}
|
||||
</DropdownMenuCheckboxItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</Base>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { Button } from "~/components/ui/button";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuCheckboxItem,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuTrigger,
|
||||
} from "~/components/ui/dropdown-menu";
|
||||
import type { preferences as prefs } from "../preferences";
|
||||
import type { MultiSelectPreference } from "../types";
|
||||
import Base from "./base.vue";
|
||||
|
||||
const { pref, name } = defineProps<{
|
||||
pref: MultiSelectPreference<string>;
|
||||
name: keyof typeof prefs;
|
||||
}>();
|
||||
</script>
|
||||
29
components/preferences/types/number.vue
Normal file
29
components/preferences/types/number.vue
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<template>
|
||||
<Base :pref="pref" :name="name" v-slot="{ setValue, value }">
|
||||
<NumberField :model-value="value" @update:model-value="setValue" :min="pref.options.min" :max="pref.options.max" :step="pref.options.integer ? 1 : pref.options.step">
|
||||
<NumberFieldContent>
|
||||
<NumberFieldDecrement />
|
||||
<NumberFieldInput />
|
||||
<NumberFieldIncrement />
|
||||
</NumberFieldContent>
|
||||
</NumberField>
|
||||
</Base>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
NumberField,
|
||||
NumberFieldContent,
|
||||
NumberFieldDecrement,
|
||||
NumberFieldIncrement,
|
||||
NumberFieldInput,
|
||||
} from "~/components/ui/number-field";
|
||||
import type { preferences as prefs } from "../preferences";
|
||||
import type { NumberPreference } from "../types";
|
||||
import Base from "./base.vue";
|
||||
|
||||
const { pref, name } = defineProps<{
|
||||
pref: NumberPreference;
|
||||
name: keyof typeof prefs;
|
||||
}>();
|
||||
</script>
|
||||
35
components/preferences/types/select.vue
Normal file
35
components/preferences/types/select.vue
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<template>
|
||||
<Base :pref="pref" :name="name" v-slot="{ setValue, value }">
|
||||
<Select :model-value="value" @update:model-value="setValue">
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select an option" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem v-for="[val, title] in Object.entries(pref.options.options)" :value="val">
|
||||
{{ title }}
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Base>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "~/components/ui/select";
|
||||
import type { preferences as prefs } from "../preferences";
|
||||
import type { SelectPreference } from "../types";
|
||||
import Base from "./base.vue";
|
||||
|
||||
const { pref, name } = defineProps<{
|
||||
pref: SelectPreference<string>;
|
||||
name: keyof typeof prefs;
|
||||
}>();
|
||||
</script>
|
||||
17
components/preferences/types/text.vue
Normal file
17
components/preferences/types/text.vue
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<template>
|
||||
<Base :pref="pref" :name="name" v-slot="{ setValue, value }">
|
||||
<Input placeholder="Content here..." :model-value="value" @update:model-value="setValue" />
|
||||
</Base>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { Input } from "~/components/ui/input";
|
||||
import type { preferences as prefs } from "../preferences";
|
||||
import type { TextPreference } from "../types";
|
||||
import Base from "./base.vue";
|
||||
|
||||
const { pref, name } = defineProps<{
|
||||
pref: TextPreference;
|
||||
name: keyof typeof prefs;
|
||||
}>();
|
||||
</script>
|
||||
36
components/preferences/types/url.vue
Normal file
36
components/preferences/types/url.vue
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<template>
|
||||
<Collapsible as-child>
|
||||
<Base :pref="pref" :name="name">
|
||||
<template #default>
|
||||
<CollapsibleTrigger as-child>
|
||||
<Button variant="outline">
|
||||
Edit URL
|
||||
</Button>
|
||||
</CollapsibleTrigger>
|
||||
</template>
|
||||
<template #extra="{ setValue, value }">
|
||||
<CollapsibleContent class="col-span-2 mt-2">
|
||||
<UrlInput placeholder="Type URL or domain here..." :model-value="value" @update:model-value="setValue" />
|
||||
</CollapsibleContent>
|
||||
</template>
|
||||
</Base>
|
||||
</Collapsible>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { Button } from "~/components/ui/button";
|
||||
import {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from "~/components/ui/collapsible";
|
||||
import { Input, UrlInput } from "~/components/ui/input";
|
||||
import type { preferences as prefs } from "../preferences";
|
||||
import type { TextPreference } from "../types";
|
||||
import Base from "./base.vue";
|
||||
|
||||
const { pref, name } = defineProps<{
|
||||
pref: TextPreference;
|
||||
name: keyof typeof prefs;
|
||||
}>();
|
||||
</script>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<Avatar :class="[shape.value === 'square' && 'rounded-md', 'bg-secondary']">
|
||||
<Avatar :class="['rounded-md bg-secondary']">
|
||||
<AvatarFallback v-if="name">
|
||||
{{ getInitials(name) }}
|
||||
</AvatarFallback>
|
||||
|
|
@ -8,7 +8,6 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { SettingIds } from "~/settings";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
|
||||
|
||||
const { name } = defineProps<{
|
||||
|
|
@ -29,6 +28,4 @@ const getInitials = (name: string): string => {
|
|||
|
||||
return `${firstLetter}${secondLetter}`.toUpperCase();
|
||||
};
|
||||
|
||||
const shape = useSetting(SettingIds.AvatarShape);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -74,7 +74,6 @@ import { Button } from "~/components/ui/button";
|
|||
import { Card, CardContent, CardFooter, CardTitle } from "~/components/ui/card";
|
||||
import { Separator } from "~/components/ui/separator";
|
||||
import * as m from "~/paraglide/messages.js";
|
||||
import { SettingIds } from "~/settings";
|
||||
import { confirmModalService } from "../modals/composable";
|
||||
import ProfileActions from "./profile-actions.vue";
|
||||
import ProfileBadges from "./profile-badges.vue";
|
||||
|
|
@ -91,10 +90,8 @@ const { relationship, isLoading } = useRelationship(client, account.id);
|
|||
const isMe = identity.value?.account.id === account.id;
|
||||
const [username, instance] = account.acct.split("@");
|
||||
|
||||
const confirmFollows = useSetting(SettingIds.ConfirmFollow);
|
||||
|
||||
const follow = async () => {
|
||||
if (confirmFollows.value.value) {
|
||||
if (preferences.confirm_actions.value.includes("follow")) {
|
||||
const confirmation = await confirmModalService.confirm({
|
||||
title: m.many_fair_capybara_imagine(),
|
||||
message: m.mellow_yummy_jannes_cuddle({
|
||||
|
|
@ -118,7 +115,7 @@ const follow = async () => {
|
|||
};
|
||||
|
||||
const unfollow = async () => {
|
||||
if (confirmFollows.value.value) {
|
||||
if (preferences.confirm_actions.value.includes("follow")) {
|
||||
const confirmation = await confirmModalService.confirm({
|
||||
title: m.funny_aloof_swan_loop(),
|
||||
message: m.white_best_dolphin_catch({
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<Card
|
||||
class="flex-row gap-2 p-2 truncate items-center"
|
||||
:class="naked ? 'p-0 bg-transparent ring-0 border-none' : ''"
|
||||
:class="naked ? 'p-0 bg-transparent ring-0 border-none shadow-none' : ''"
|
||||
>
|
||||
<Avatar :src="account.avatar" :name="account.display_name" class="size-10" />
|
||||
<CardContent class="leading-tight">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
import { ChevronsUpDown, DownloadCloud, Pen, UserPlus } from "lucide-vue-next";
|
||||
import {
|
||||
ChevronsUpDown,
|
||||
Cog,
|
||||
DownloadCloud,
|
||||
Pen,
|
||||
UserPlus,
|
||||
} from "lucide-vue-next";
|
||||
import TinyCard from "~/components/profiles/tiny-card.vue";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import {
|
||||
|
|
@ -37,6 +43,10 @@ const { $pwa } = useNuxtApp();
|
|||
{{ m.salty_aloof_turkey_nudge() }}
|
||||
</span>
|
||||
</Button>
|
||||
<Button v-if="identity" size="lg" variant="secondary" @click="useEvent('preferences:open')">
|
||||
<Cog />
|
||||
Preferences
|
||||
</Button>
|
||||
<Button v-if="$pwa?.needRefresh" variant="destructive" size="lg"
|
||||
class="w-full group-data-[collapsible=icon]:px-4" @click="$pwa?.updateServiceWorker(true)">
|
||||
<DownloadCloud />
|
||||
|
|
|
|||
|
|
@ -14,12 +14,6 @@
|
|||
"
|
||||
/>
|
||||
</SidebarGroup>
|
||||
<SidebarGroup v-if="identity" class="mt-auto">
|
||||
<SidebarGroupLabel>{{
|
||||
m.close_short_kitten_coax()
|
||||
}}</SidebarGroupLabel>
|
||||
<NavGroup :items="sidebarConfig.navMain" />
|
||||
</SidebarGroup>
|
||||
</SidebarContent>
|
||||
<FooterActions />
|
||||
<SidebarRail />
|
||||
|
|
@ -38,6 +32,5 @@ import {
|
|||
import * as m from "~/paraglide/messages.js";
|
||||
import FooterActions from "./footer/footer-actions.vue";
|
||||
import InstanceHeader from "./instance/instance-header.vue";
|
||||
import NavGroup from "./navigation/nav-group.vue";
|
||||
import NavItems from "./navigation/nav-items.vue";
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,44 +1,9 @@
|
|||
import {
|
||||
BedSingle,
|
||||
Bell,
|
||||
Globe,
|
||||
House,
|
||||
MapIcon,
|
||||
Settings2,
|
||||
} from "lucide-vue-next";
|
||||
import { BedSingle, Bell, Globe, House, MapIcon } from "lucide-vue-next";
|
||||
import * as m from "~/paraglide/messages.js";
|
||||
import type { SidebarConfig } from "~/types/sidebar";
|
||||
|
||||
export const sidebarConfig: SidebarConfig = {
|
||||
navMain: [
|
||||
{
|
||||
title: m.patchy_seemly_hound_grace(),
|
||||
url: "/preferences",
|
||||
icon: Settings2,
|
||||
items: [
|
||||
{
|
||||
title: m.factual_arable_jurgen_endure(),
|
||||
url: "/preferences/account",
|
||||
},
|
||||
{
|
||||
title: m.tough_clean_wolf_gleam(),
|
||||
url: "/preferences/appearance",
|
||||
},
|
||||
{
|
||||
title: m.legal_best_tadpole_rise(),
|
||||
url: "/preferences/behaviour",
|
||||
},
|
||||
{
|
||||
title: m.novel_trite_sloth_adapt(),
|
||||
url: "/preferences/emojis",
|
||||
},
|
||||
{
|
||||
title: m.safe_green_mink_cook(),
|
||||
url: "/preferences/roles",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
navMain: [],
|
||||
other: [
|
||||
{
|
||||
title: m.bland_chunky_sparrow_propel(),
|
||||
|
|
|
|||
|
|
@ -1,13 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import { cn } from "@/lib/utils";
|
||||
import Timelines from "~/components/navigation/timelines.vue";
|
||||
import { SidebarInset } 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);
|
||||
|
||||
const route = useRoute();
|
||||
const isMd = useMediaQuery("(max-width: 768px)");
|
||||
const showTimelines = computed(
|
||||
|
|
@ -28,5 +23,5 @@ const showTimelines = computed(
|
|||
</header>
|
||||
<slot />
|
||||
</main>
|
||||
<RightSidebar v-if="identity" v-show="showRightSidebar.value" />
|
||||
<RightSidebar v-if="identity" v-show="preferences.display_notifications_sidebar" />
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
<!-- If there are no posts at all -->
|
||||
<NoPosts v-else-if="hasReachedEnd && items.length === 0" />
|
||||
|
||||
<div v-else-if="!infiniteScroll.value" class="py-10 px-4">
|
||||
<div v-else-if="!preferences.infinite_scroll" class="py-10 px-4">
|
||||
<Button
|
||||
variant="secondary"
|
||||
@click="loadNext"
|
||||
|
|
@ -43,7 +43,6 @@
|
|||
import type { Notification, Status } from "@versia/client/types";
|
||||
import { useIntersectionObserver } from "@vueuse/core";
|
||||
import * as m from "~/paraglide/messages.js";
|
||||
import { SettingIds } from "~/settings";
|
||||
import NoPosts from "../errors/NoPosts.vue";
|
||||
import ReachedEnd from "../errors/ReachedEnd.vue";
|
||||
import Spinner from "../graphics/spinner.vue";
|
||||
|
|
@ -66,14 +65,13 @@ const emit = defineEmits<(e: "update") => void>();
|
|||
|
||||
const loadMoreTrigger = ref<HTMLElement | null>(null);
|
||||
|
||||
// @ts-expect-error Too complex?
|
||||
useIntersectionObserver(loadMoreTrigger, ([observer]) => {
|
||||
if (observer?.isIntersecting && !props.isLoading && !props.hasReachedEnd) {
|
||||
props.loadNext();
|
||||
}
|
||||
});
|
||||
|
||||
const infiniteScroll = useSetting(SettingIds.InfiniteScroll);
|
||||
|
||||
watch(
|
||||
() => props.items,
|
||||
() => {
|
||||
|
|
|
|||
|
|
@ -35,5 +35,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
|
|||
<Check class="size-3.5" />
|
||||
</slot>
|
||||
</CheckboxIndicator>
|
||||
<!-- Fixes an issue where empty buttons behave weirdly in tanstack table layouts -->
|
||||
<Check class="size-3.5 opacity-0" />
|
||||
</CheckboxRoot>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
|
|||
v-bind="forwarded"
|
||||
:class="
|
||||
cn(
|
||||
'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
|
||||
'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] max-h-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
|
||||
props.class,
|
||||
)"
|
||||
>
|
||||
|
|
|
|||
25
components/ui/number-field/NumberField.vue
Normal file
25
components/ui/number-field/NumberField.vue
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<script setup lang="ts">
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { NumberFieldRootEmits, NumberFieldRootProps } from "reka-ui";
|
||||
import { NumberFieldRoot, useForwardPropsEmits } from "reka-ui";
|
||||
import { type HTMLAttributes, computed } from "vue";
|
||||
|
||||
const props = defineProps<
|
||||
NumberFieldRootProps & { class?: HTMLAttributes["class"] }
|
||||
>();
|
||||
const emits = defineEmits<NumberFieldRootEmits>();
|
||||
|
||||
const delegatedProps = computed(() => {
|
||||
const { class: _, ...delegated } = props;
|
||||
|
||||
return delegated;
|
||||
});
|
||||
|
||||
const forwarded = useForwardPropsEmits(delegatedProps, emits);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NumberFieldRoot v-bind="forwarded" :class="cn('grid gap-1.5', props.class)">
|
||||
<slot />
|
||||
</NumberFieldRoot>
|
||||
</template>
|
||||
14
components/ui/number-field/NumberFieldContent.vue
Normal file
14
components/ui/number-field/NumberFieldContent.vue
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<script setup lang="ts">
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { HTMLAttributes } from "vue";
|
||||
|
||||
const props = defineProps<{
|
||||
class?: HTMLAttributes["class"];
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="cn('relative [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5 [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5', props.class)">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
27
components/ui/number-field/NumberFieldDecrement.vue
Normal file
27
components/ui/number-field/NumberFieldDecrement.vue
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<script setup lang="ts">
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Minus } from "lucide-vue-next";
|
||||
import type { NumberFieldDecrementProps } from "reka-ui";
|
||||
import { NumberFieldDecrement, useForwardProps } from "reka-ui";
|
||||
import { type HTMLAttributes, computed } from "vue";
|
||||
|
||||
const props = defineProps<
|
||||
NumberFieldDecrementProps & { class?: HTMLAttributes["class"] }
|
||||
>();
|
||||
|
||||
const delegatedProps = computed(() => {
|
||||
const { class: _, ...delegated } = props;
|
||||
|
||||
return delegated;
|
||||
});
|
||||
|
||||
const forwarded = useForwardProps(delegatedProps);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NumberFieldDecrement data-slot="decrement" v-bind="forwarded" :class="cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)">
|
||||
<slot>
|
||||
<Minus class="h-4 w-4" />
|
||||
</slot>
|
||||
</NumberFieldDecrement>
|
||||
</template>
|
||||
27
components/ui/number-field/NumberFieldIncrement.vue
Normal file
27
components/ui/number-field/NumberFieldIncrement.vue
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<script setup lang="ts">
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Plus } from "lucide-vue-next";
|
||||
import type { NumberFieldIncrementProps } from "reka-ui";
|
||||
import { NumberFieldIncrement, useForwardProps } from "reka-ui";
|
||||
import { type HTMLAttributes, computed } from "vue";
|
||||
|
||||
const props = defineProps<
|
||||
NumberFieldIncrementProps & { class?: HTMLAttributes["class"] }
|
||||
>();
|
||||
|
||||
const delegatedProps = computed(() => {
|
||||
const { class: _, ...delegated } = props;
|
||||
|
||||
return delegated;
|
||||
});
|
||||
|
||||
const forwarded = useForwardProps(delegatedProps);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NumberFieldIncrement data-slot="increment" v-bind="forwarded" :class="cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)">
|
||||
<slot>
|
||||
<Plus class="h-4 w-4" />
|
||||
</slot>
|
||||
</NumberFieldIncrement>
|
||||
</template>
|
||||
16
components/ui/number-field/NumberFieldInput.vue
Normal file
16
components/ui/number-field/NumberFieldInput.vue
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<script setup lang="ts">
|
||||
import { cn } from "@/lib/utils";
|
||||
import { NumberFieldInput } from "reka-ui";
|
||||
import type { HTMLAttributes } from "vue";
|
||||
|
||||
const props = defineProps<{
|
||||
class?: HTMLAttributes["class"];
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NumberFieldInput
|
||||
data-slot="input"
|
||||
:class="cn('flex h-9 w-full rounded-md border border-input bg-transparent py-1 text-sm text-center shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)"
|
||||
/>
|
||||
</template>
|
||||
5
components/ui/number-field/index.ts
Normal file
5
components/ui/number-field/index.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
export { default as NumberField } from "./NumberField.vue";
|
||||
export { default as NumberFieldContent } from "./NumberFieldContent.vue";
|
||||
export { default as NumberFieldDecrement } from "./NumberFieldDecrement.vue";
|
||||
export { default as NumberFieldIncrement } from "./NumberFieldIncrement.vue";
|
||||
export { default as NumberFieldInput } from "./NumberFieldInput.vue";
|
||||
|
|
@ -29,7 +29,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
|
|||
data-slot="switch"
|
||||
v-bind="forwarded"
|
||||
:class="cn(
|
||||
'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
|
||||
'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] hover:cursor-pointer disabled:cursor-not-allowed disabled:opacity-50',
|
||||
props.class,
|
||||
)"
|
||||
>
|
||||
|
|
|
|||
16
components/ui/table/Table.vue
Normal file
16
components/ui/table/Table.vue
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<script setup lang="ts">
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { HTMLAttributes } from "vue";
|
||||
|
||||
const props = defineProps<{
|
||||
class?: HTMLAttributes["class"];
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div data-slot="table-container" class="relative w-full overflow-auto">
|
||||
<table data-slot="table" :class="cn('w-full caption-bottom text-sm', props.class)">
|
||||
<slot />
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
17
components/ui/table/TableBody.vue
Normal file
17
components/ui/table/TableBody.vue
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<script setup lang="ts">
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { HTMLAttributes } from "vue";
|
||||
|
||||
const props = defineProps<{
|
||||
class?: HTMLAttributes["class"];
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<tbody
|
||||
data-slot="table-body"
|
||||
:class="cn('[&_tr:last-child]:border-0', props.class)"
|
||||
>
|
||||
<slot />
|
||||
</tbody>
|
||||
</template>
|
||||
17
components/ui/table/TableCaption.vue
Normal file
17
components/ui/table/TableCaption.vue
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<script setup lang="ts">
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { HTMLAttributes } from "vue";
|
||||
|
||||
const props = defineProps<{
|
||||
class?: HTMLAttributes["class"];
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<caption
|
||||
data-slot="table-caption"
|
||||
:class="cn('text-muted-foreground mt-4 text-sm', props.class)"
|
||||
>
|
||||
<slot />
|
||||
</caption>
|
||||
</template>
|
||||
22
components/ui/table/TableCell.vue
Normal file
22
components/ui/table/TableCell.vue
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<script setup lang="ts">
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { HTMLAttributes } from "vue";
|
||||
|
||||
const props = defineProps<{
|
||||
class?: HTMLAttributes["class"];
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<td
|
||||
data-slot="table-cell"
|
||||
:class="
|
||||
cn(
|
||||
'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
|
||||
props.class,
|
||||
)
|
||||
"
|
||||
>
|
||||
<slot />
|
||||
</td>
|
||||
</template>
|
||||
40
components/ui/table/TableEmpty.vue
Normal file
40
components/ui/table/TableEmpty.vue
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
<script setup lang="ts">
|
||||
import { cn } from "@/lib/utils";
|
||||
import { type HTMLAttributes, computed } from "vue";
|
||||
import TableCell from "./TableCell.vue";
|
||||
import TableRow from "./TableRow.vue";
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
class?: HTMLAttributes["class"];
|
||||
colspan?: number;
|
||||
}>(),
|
||||
{
|
||||
colspan: 1,
|
||||
},
|
||||
);
|
||||
|
||||
const delegatedProps = computed(() => {
|
||||
const { class: _, ...delegated } = props;
|
||||
|
||||
return delegated;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
:class="
|
||||
cn(
|
||||
'p-4 whitespace-nowrap align-middle text-sm text-foreground',
|
||||
props.class,
|
||||
)
|
||||
"
|
||||
v-bind="delegatedProps"
|
||||
>
|
||||
<div class="flex items-center justify-center py-10">
|
||||
<slot />
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</template>
|
||||
17
components/ui/table/TableFooter.vue
Normal file
17
components/ui/table/TableFooter.vue
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<script setup lang="ts">
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { HTMLAttributes } from "vue";
|
||||
|
||||
const props = defineProps<{
|
||||
class?: HTMLAttributes["class"];
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<tfoot
|
||||
data-slot="table-footer"
|
||||
:class="cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', props.class)"
|
||||
>
|
||||
<slot />
|
||||
</tfoot>
|
||||
</template>
|
||||
17
components/ui/table/TableHead.vue
Normal file
17
components/ui/table/TableHead.vue
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<script setup lang="ts">
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { HTMLAttributes } from "vue";
|
||||
|
||||
const props = defineProps<{
|
||||
class?: HTMLAttributes["class"];
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<th
|
||||
data-slot="table-head"
|
||||
:class="cn('text-muted-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', props.class)"
|
||||
>
|
||||
<slot />
|
||||
</th>
|
||||
</template>
|
||||
17
components/ui/table/TableHeader.vue
Normal file
17
components/ui/table/TableHeader.vue
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<script setup lang="ts">
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { HTMLAttributes } from "vue";
|
||||
|
||||
const props = defineProps<{
|
||||
class?: HTMLAttributes["class"];
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<thead
|
||||
data-slot="table-header"
|
||||
:class="cn('[&_tr]:border-b', props.class)"
|
||||
>
|
||||
<slot />
|
||||
</thead>
|
||||
</template>
|
||||
17
components/ui/table/TableRow.vue
Normal file
17
components/ui/table/TableRow.vue
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<script setup lang="ts">
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { HTMLAttributes } from "vue";
|
||||
|
||||
const props = defineProps<{
|
||||
class?: HTMLAttributes["class"];
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<tr
|
||||
data-slot="table-row"
|
||||
:class="cn('hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors', props.class)"
|
||||
>
|
||||
<slot />
|
||||
</tr>
|
||||
</template>
|
||||
9
components/ui/table/index.ts
Normal file
9
components/ui/table/index.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
export { default as Table } from "./Table.vue";
|
||||
export { default as TableBody } from "./TableBody.vue";
|
||||
export { default as TableCaption } from "./TableCaption.vue";
|
||||
export { default as TableCell } from "./TableCell.vue";
|
||||
export { default as TableEmpty } from "./TableEmpty.vue";
|
||||
export { default as TableFooter } from "./TableFooter.vue";
|
||||
export { default as TableHead } from "./TableHead.vue";
|
||||
export { default as TableHeader } from "./TableHeader.vue";
|
||||
export { default as TableRow } from "./TableRow.vue";
|
||||
12
components/ui/table/utils.ts
Normal file
12
components/ui/table/utils.ts
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
import type { Updater } from "@tanstack/vue-table";
|
||||
import type { Ref } from "vue";
|
||||
|
||||
export function valueUpdater<T extends Updater<any>>(
|
||||
updaterOrValue: T,
|
||||
ref: Ref,
|
||||
) {
|
||||
ref.value =
|
||||
typeof updaterOrValue === "function"
|
||||
? updaterOrValue(ref.value)
|
||||
: updaterOrValue;
|
||||
}
|
||||
|
|
@ -19,7 +19,7 @@ const delegatedProps = computed(() => {
|
|||
data-slot="tabs-list"
|
||||
v-bind="delegatedProps"
|
||||
:class="cn(
|
||||
'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
|
||||
'bg-muted text-muted-foreground inline-flex w-fit items-center justify-center rounded-lg p-1 overflow-x-auto',
|
||||
props.class,
|
||||
)"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ const forwardedProps = useForwardProps(delegatedProps);
|
|||
data-slot="tabs-trigger"
|
||||
v-bind="forwardedProps"
|
||||
:class="cn(
|
||||
`data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
|
||||
`data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
|
||||
props.class,
|
||||
)"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -71,6 +71,7 @@ export const useConfig = () => {
|
|||
"jessew@social.lysand.org",
|
||||
"jessew@beta.versia.social",
|
||||
"jessew@versia.social",
|
||||
"jessew@vs.cpluspatch.com",
|
||||
"aprl@social.lysand.org",
|
||||
"aprl@beta.versia.social",
|
||||
"aprl@versia.social",
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ type ApplicationEvents = {
|
|||
"account:update": Account;
|
||||
"attachment:view": Attachment;
|
||||
"identity:change": Identity;
|
||||
"preferences:open": undefined;
|
||||
error: {
|
||||
code: string;
|
||||
title: string;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,3 @@
|
|||
import { SettingIds } from "~/settings";
|
||||
|
||||
export const useLanguage = () => {
|
||||
const lang = useSetting(SettingIds.Language);
|
||||
|
||||
return computed(() => lang.value.value as "en" | "fr" | "en-pt");
|
||||
return computed(() => preferences.language.value);
|
||||
};
|
||||
|
|
|
|||
56
composables/Preference.ts
Normal file
56
composables/Preference.ts
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
import { StorageSerializers } from "@vueuse/core";
|
||||
import { preferences as prefs } from "~/components/preferences/preferences";
|
||||
|
||||
type SerializedPreferences = {
|
||||
[K in keyof typeof prefs]: (typeof prefs)[K]["options"]["defaultValue"];
|
||||
};
|
||||
|
||||
const usePreferences = (): {
|
||||
[K in keyof typeof prefs]: WritableComputedRef<
|
||||
(typeof prefs)[K]["options"]["defaultValue"]
|
||||
>;
|
||||
} => {
|
||||
const localStorage = useLocalStorage<SerializedPreferences>(
|
||||
"versia:preferences",
|
||||
Object.fromEntries(
|
||||
Object.entries(prefs).map(([key, value]) => [
|
||||
key,
|
||||
value.options.defaultValue,
|
||||
]),
|
||||
) as SerializedPreferences,
|
||||
{
|
||||
serializer: {
|
||||
read(raw) {
|
||||
return StorageSerializers.object.read(raw);
|
||||
},
|
||||
write(value) {
|
||||
return StorageSerializers.object.write(value);
|
||||
},
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
return Object.fromEntries(
|
||||
Object.entries(prefs).map(([key, value]) => [
|
||||
key,
|
||||
computed({
|
||||
get() {
|
||||
return (
|
||||
localStorage.value[key as keyof typeof prefs] ??
|
||||
value.options.defaultValue
|
||||
);
|
||||
},
|
||||
set(newValue) {
|
||||
// @ts-expect-error Key is marked as readonly in the type
|
||||
localStorage.value[key] = newValue;
|
||||
},
|
||||
}),
|
||||
]),
|
||||
) as {
|
||||
[K in keyof typeof prefs]: WritableComputedRef<
|
||||
(typeof prefs)[K]["options"]["defaultValue"]
|
||||
>;
|
||||
};
|
||||
};
|
||||
|
||||
export const preferences = usePreferences();
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
import { StorageSerializers } from "@vueuse/core";
|
||||
import {
|
||||
type SettingIds,
|
||||
type Settings,
|
||||
mergeSettings,
|
||||
settings as settingsJson,
|
||||
} from "~/settings";
|
||||
|
||||
const useSettings = () => {
|
||||
return useLocalStorage<Settings>("versia:settings", settingsJson(), {
|
||||
serializer: {
|
||||
read(raw) {
|
||||
const json = StorageSerializers.object.read(raw);
|
||||
|
||||
return mergeSettings(json);
|
||||
},
|
||||
write(value) {
|
||||
const json = Object.fromEntries(
|
||||
Object.entries(value).map(([key, value]) => [
|
||||
key,
|
||||
value.value,
|
||||
]),
|
||||
);
|
||||
|
||||
// flatMap object values to .value
|
||||
return StorageSerializers.object.write(json);
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export const settings = useSettings();
|
||||
|
||||
export const useSetting = <Id extends SettingIds>(
|
||||
id: Id,
|
||||
): Ref<Settings[Id]> => {
|
||||
const setting = ref(settings.value[id]) as Ref<Settings[Id]>;
|
||||
|
||||
watch(settings, (newSettings) => {
|
||||
setting.value = newSettings[id];
|
||||
});
|
||||
|
||||
watch(setting, (newSetting) => {
|
||||
settings.value = {
|
||||
...settings.value,
|
||||
[id]: newSetting,
|
||||
};
|
||||
});
|
||||
|
||||
return setting;
|
||||
};
|
||||
|
|
@ -8,6 +8,7 @@
|
|||
</AppSidebar>
|
||||
</SidebarProvider>
|
||||
<MobileNavbar v-if="identity" />
|
||||
<Preferences />
|
||||
<ComposerDialog />
|
||||
</template>
|
||||
|
||||
|
|
@ -15,12 +16,11 @@
|
|||
import ComposerDialog from "~/components/composer/dialog.vue";
|
||||
import AuthRequired from "~/components/errors/AuthRequired.vue";
|
||||
import MobileNavbar from "~/components/navigation/mobile-navbar.vue";
|
||||
import Preferences from "~/components/preferences/index.vue";
|
||||
import AppSidebar from "~/components/sidebars/sidebar.vue";
|
||||
import { SidebarProvider } from "~/components/ui/sidebar";
|
||||
import { SettingIds } from "~/settings";
|
||||
|
||||
const colorMode = useColorMode();
|
||||
const themeSetting = useSetting(SettingIds.Theme);
|
||||
const { n, d } = useMagicKeys();
|
||||
const activeElement = useActiveElement();
|
||||
const notUsingInput = computed(
|
||||
|
|
@ -42,10 +42,10 @@ watch([n, notUsingInput, d], async () => {
|
|||
// Swap theme from dark to light or vice versa
|
||||
if (colorMode.value === "dark") {
|
||||
colorMode.preference = "light";
|
||||
themeSetting.value.value = "light";
|
||||
preferences.color_theme.value = "light";
|
||||
} else {
|
||||
colorMode.preference = "dark";
|
||||
themeSetting.value.value = "dark";
|
||||
preferences.color_theme.value = "dark";
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -275,7 +275,6 @@
|
|||
"wise_neat_ox_buzz": "Dark as the depths",
|
||||
"each_strong_snail_aid": "Bright as sail canvas",
|
||||
"helpful_raw_seal_nurture": "As the sea decides",
|
||||
"male_stout_florian_feast": "Ship's appearance.",
|
||||
"hour_elegant_mink_grip": "Ship's look",
|
||||
"loud_raw_sheep_imagine": "Render deck decorations",
|
||||
"inclusive_pink_tuna_enjoy": "Render deck decorations. Requires resetting yer sails to apply.",
|
||||
|
|
|
|||
|
|
@ -275,8 +275,7 @@
|
|||
"wise_neat_ox_buzz": "Dark",
|
||||
"each_strong_snail_aid": "Light",
|
||||
"helpful_raw_seal_nurture": "System",
|
||||
"male_stout_florian_feast": "UI theme.",
|
||||
"hour_elegant_mink_grip": "Theme",
|
||||
"hour_elegant_mink_grip": "Color theme",
|
||||
"loud_raw_sheep_imagine": "Render custom emojis",
|
||||
"inclusive_pink_tuna_enjoy": "Render custom emojis. Requires a page reload to apply.",
|
||||
"fair_swift_elephant_hunt": "Blur sensitive content",
|
||||
|
|
@ -352,5 +351,7 @@
|
|||
"sunny_small_warbler_express": "URL is valid",
|
||||
"teal_late_grebe_blend": "URL is invalid",
|
||||
"sharp_alive_anteater_fade": "Which instance?",
|
||||
"noble_misty_rook_slide": "Put your instance's domain name here."
|
||||
"noble_misty_rook_slide": "Put your instance's domain name here.",
|
||||
"next_hour_jurgen_sprout": "Are you sure you want to delete {amount} emojis?",
|
||||
"equal_only_crow_file": "Deleting {amount} emojis..."
|
||||
}
|
||||
|
|
|
|||
|
|
@ -257,8 +257,7 @@
|
|||
"wise_neat_ox_buzz": "Sombre",
|
||||
"each_strong_snail_aid": "Clair",
|
||||
"helpful_raw_seal_nurture": "Système",
|
||||
"male_stout_florian_feast": "Thème de l'interface.",
|
||||
"hour_elegant_mink_grip": "Thème",
|
||||
"hour_elegant_mink_grip": "Thème de couleurs",
|
||||
"loud_raw_sheep_imagine": "Afficher les émojis personnalisés",
|
||||
"inclusive_pink_tuna_enjoy": "Afficher les émojis personnalisés. Nécessite un rechargement de la page.",
|
||||
"fair_swift_elephant_hunt": "Flouter les contenus sensibles",
|
||||
|
|
@ -333,5 +332,6 @@
|
|||
"sunny_small_warbler_express": "L'URL est valide",
|
||||
"teal_late_grebe_blend": "L'URL n'est pas valide",
|
||||
"sharp_alive_anteater_fade": "Quelle instance ?",
|
||||
"noble_misty_rook_slide": "Mettez le nom de domaine de votre instance ici."
|
||||
"noble_misty_rook_slide": "Mettez le nom de domaine de votre instance ici.",
|
||||
"next_hour_jurgen_sprout": ""
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,14 +10,14 @@
|
|||
packageJson = builtins.fromJSON (builtins.readFile ../package.json);
|
||||
in
|
||||
stdenv.mkDerivation (finalAttrs: {
|
||||
pname = packageJson.name;
|
||||
pname = "versia-fe";
|
||||
version = packageJson.version;
|
||||
|
||||
src = ../.;
|
||||
|
||||
pnpmDeps = pnpm.fetchDeps {
|
||||
inherit (finalAttrs) pname version src;
|
||||
hash = "sha256-Z8eZiCJ3wfk/RyMnqmbk9UhJbnfYHv1k9tusNwoOgB0=";
|
||||
hash = "sha256-WYZDL8ankh/S2DrQMU9PRA0z8uWS7QO/nPp/i61mrVY=";
|
||||
};
|
||||
|
||||
nativeBuildInputs = [
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
{
|
||||
"name": "versia-fe",
|
||||
"version": "0.1.0",
|
||||
"name": "@versia/frontend",
|
||||
"version": "0.8.0-alpha",
|
||||
"private": true,
|
||||
"description": " Versia Server frontend, designed with Nuxt.",
|
||||
"description": "Beautiful, powerful and responsive web client for Versia Server.",
|
||||
"type": "module",
|
||||
"license": "AGPL-3.0",
|
||||
"author": {
|
||||
|
|
@ -36,6 +36,7 @@
|
|||
"@nuxtjs/color-mode": "3.5.2",
|
||||
"@tailwindcss/typography": "^0.5.16",
|
||||
"@tailwindcss/vite": "^4.1.4",
|
||||
"@tanstack/vue-table": "^8.21.3",
|
||||
"@tiptap/extension-highlight": "^2.11.7",
|
||||
"@tiptap/extension-image": "^2.11.7",
|
||||
"@tiptap/extension-link": "^2.11.7",
|
||||
|
|
@ -75,7 +76,9 @@
|
|||
"tw-animate-css": "^1.2.8",
|
||||
"vaul-vue": "^0.4.1",
|
||||
"vee-validate": "^4.15.0",
|
||||
"virtua": "^0.40.4",
|
||||
"vue": "^3.5.13",
|
||||
"vue-draggable-plus": "^0.6.0",
|
||||
"vue-router": "^4.5.1",
|
||||
"vue-sonner": "^1.3.2",
|
||||
"zod": "^3.24.3"
|
||||
|
|
|
|||
|
|
@ -1,64 +0,0 @@
|
|||
<template>
|
||||
<!-- Add padding at bottom to prevent hiding some content by the bottom navbar -->
|
||||
<div class="md:px-8 px-4 py-4 pb-20 max-w-7xl mx-auto w-full">
|
||||
<h1 class="scroll-m-20 text-3xl font-extrabold tracking-tight lg:text-4xl capitalize">
|
||||
{{ page }}
|
||||
</h1>
|
||||
<div class="grid grid-cols-1 gap-2 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)" />
|
||||
<StringPreference v-else-if="setting.type === SettingType.String" :setting="(setting as StringSetting)" @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 StringPreference from "~/components/preferences/string.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,
|
||||
type SettingPages,
|
||||
SettingType,
|
||||
type StringSetting,
|
||||
} from "~/settings.ts";
|
||||
|
||||
useHead({
|
||||
title: m.broad_whole_herring_reside(),
|
||||
});
|
||||
|
||||
definePageMeta({
|
||||
layout: "app",
|
||||
breadcrumbs: () => [
|
||||
{
|
||||
text: m.broad_whole_herring_reside(),
|
||||
},
|
||||
],
|
||||
requiresAuth: true,
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
const page = route.params.page as SettingPages;
|
||||
const settingEntries = computed(() =>
|
||||
(Object.entries(settings.value) as [SettingIds, Setting][]).filter(
|
||||
([, s]) => s.page === page && !s.notImplemented,
|
||||
),
|
||||
);
|
||||
|
||||
const updateSetting = (id: SettingIds, setting: Setting) => {
|
||||
settings.value = {
|
||||
...settings.value,
|
||||
[id]: setting,
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
<template>
|
||||
<div class="md:px-8 px-4 py-2 max-w-7xl mx-auto relative">
|
||||
<ProfileEditor ref="profileEditor" />
|
||||
|
||||
<Transition name="slide-down">
|
||||
<Alert
|
||||
v-if="profileEditor?.dirty"
|
||||
layout="button"
|
||||
class="mb-4 absolute top-4 inset-x-4 w-[calc(100%-2rem)]"
|
||||
>
|
||||
<Check class="size-4" />
|
||||
<AlertTitle>Unsaved changes</AlertTitle>
|
||||
<AlertDescription >
|
||||
Click "apply" to save your changes.
|
||||
</AlertDescription>
|
||||
<!-- Add pl-4 because Alert is adding additional padding, which we don't want -->
|
||||
<Button
|
||||
variant="secondary"
|
||||
@click="profileEditor?.submitForm"
|
||||
class="w-full !pl-4"
|
||||
>Apply</Button
|
||||
>
|
||||
</Alert>
|
||||
</Transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { Check } from "lucide-vue-next";
|
||||
// biome-ignore lint/style/useImportType: <explanation>
|
||||
import ProfileEditor from "~/components/preferences/profile/editor.vue";
|
||||
import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import * as m from "~/paraglide/messages.js";
|
||||
|
||||
useHead({
|
||||
title: m.actual_mean_cow_dare(),
|
||||
});
|
||||
|
||||
definePageMeta({
|
||||
layout: "app",
|
||||
breadcrumbs: () => [
|
||||
{
|
||||
text: m.broad_whole_herring_reside(),
|
||||
},
|
||||
],
|
||||
requiresAuth: true,
|
||||
});
|
||||
|
||||
const profileEditor = ref<InstanceType<typeof ProfileEditor> | null>(null);
|
||||
</script>
|
||||
|
|
@ -1,106 +0,0 @@
|
|||
<template>
|
||||
<div class="md:px-8 px-4 py-2 max-w-7xl mx-auto w-full space-y-6">
|
||||
<div :class="cn('grid gap-2', canUpload && 'grid-cols-[1fr_auto]')">
|
||||
<h1
|
||||
class="scroll-m-20 text-3xl font-extrabold tracking-tight lg:text-4xl capitalize"
|
||||
>
|
||||
{{ m.suave_smart_mantis_climb() }}
|
||||
</h1>
|
||||
<Uploader v-if="canUpload">
|
||||
<Button variant="default"> <Upload /> Upload </Button>
|
||||
</Uploader>
|
||||
</div>
|
||||
<div v-if="emojis.length > 0" class="max-w-sm w-full relative">
|
||||
<Input v-model="search" placeholder="Search" class="pl-8" />
|
||||
<Search
|
||||
class="absolute size-4 top-1/2 left-2.5 transform -translate-y-1/2"
|
||||
/>
|
||||
</div>
|
||||
<Category
|
||||
v-if="emojis.length > 0"
|
||||
v-for="[name, emojis] in categories"
|
||||
:key="name"
|
||||
:emojis="emojis"
|
||||
:name="name"
|
||||
/>
|
||||
<Card v-else class="shadow-none bg-transparent border-none p-4">
|
||||
<CardHeader class="text-center gap-y-4">
|
||||
<CardTitle>{{ m.actual_steep_llama_rest() }}</CardTitle>
|
||||
<CardDescription>
|
||||
{{ m.lucky_suave_myna_adore() }}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { cn } from "@/lib/utils";
|
||||
import { type Emoji, RolePermission } from "@versia/client/types";
|
||||
import { Search, Upload } from "lucide-vue-next";
|
||||
import Category from "~/components/preferences/emojis/category.vue";
|
||||
import Uploader from "~/components/preferences/emojis/uploader.vue";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "~/components/ui/card";
|
||||
import { Input } from "~/components/ui/input";
|
||||
import * as m from "~/paraglide/messages.js";
|
||||
|
||||
useHead({
|
||||
title: m.mild_many_dolphin_mend(),
|
||||
});
|
||||
|
||||
definePageMeta({
|
||||
layout: "app",
|
||||
breadcrumbs: () => [
|
||||
{
|
||||
text: m.broad_whole_herring_reside(),
|
||||
},
|
||||
],
|
||||
requiresAuth: true,
|
||||
});
|
||||
|
||||
const permissions = usePermissions();
|
||||
const canUpload = computed(
|
||||
() =>
|
||||
permissions.value.includes(RolePermission.ManageOwnEmojis) ||
|
||||
permissions.value.includes(RolePermission.ManageEmojis),
|
||||
);
|
||||
|
||||
const emojis = computed(
|
||||
() =>
|
||||
identity.value?.emojis?.filter((emoji) =>
|
||||
emoji.shortcode.toLowerCase().includes(search.value.toLowerCase()),
|
||||
) ?? [],
|
||||
);
|
||||
|
||||
const search = ref("");
|
||||
|
||||
/**
|
||||
* Sort emojis by category
|
||||
*/
|
||||
const categories = computed(() => {
|
||||
const categories = new Map<string, Emoji[]>();
|
||||
for (const emoji of emojis.value) {
|
||||
if (!emoji.category) {
|
||||
if (!categories.has(m.lucky_ago_rat_pinch())) {
|
||||
categories.set(m.lucky_ago_rat_pinch(), []);
|
||||
}
|
||||
|
||||
categories.get(m.lucky_ago_rat_pinch())?.push(emoji);
|
||||
continue;
|
||||
}
|
||||
|
||||
if (!categories.has(emoji.category)) {
|
||||
categories.set(emoji.category, []);
|
||||
}
|
||||
|
||||
categories.get(emoji.category)?.push(emoji);
|
||||
}
|
||||
return categories;
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import * as m from "~/paraglide/messages.js";
|
||||
|
||||
definePageMeta({
|
||||
layout: "app",
|
||||
breadcrumbs: () => [
|
||||
{
|
||||
text: m.broad_whole_herring_reside(),
|
||||
},
|
||||
],
|
||||
requiresAuth: true,
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
import type { Emoji } from "@versia/client/types";
|
||||
import { SettingIds } from "~/settings";
|
||||
|
||||
const emojisRegex =
|
||||
/\p{RI}\p{RI}|\p{Emoji}(\p{EMod}|\uFE0F\u20E3?|[\u{E0020}-\u{E007E}]+\u{E007F})?(\u200D(\p{RI}\p{RI}|\p{Emoji}(\p{EMod}|\uFE0F\u20E3?|[\u{E0020}-\u{E007E}]+\u{E007F})?))*/gu;
|
||||
|
|
@ -8,11 +7,8 @@ const incorrectEmojisRegex = /^[#*0-9©®]$/;
|
|||
export default defineNuxtPlugin((nuxtApp) => {
|
||||
nuxtApp.vueApp.directive<HTMLElement, Emoji[]>("render-emojis", {
|
||||
beforeMount(el, binding) {
|
||||
const shouldRenderEmoji = useSetting(SettingIds.CustomEmojis);
|
||||
const emojiFont = useSetting(SettingIds.EmojiTheme);
|
||||
|
||||
// Replace emoji shortcodes with images
|
||||
if (shouldRenderEmoji.value.value) {
|
||||
if (preferences.custom_emojis.value) {
|
||||
el.innerHTML = el.innerHTML.replace(
|
||||
/:([a-zA-Z0-9_-]+):/g,
|
||||
(match, emoji) => {
|
||||
|
|
@ -35,13 +31,13 @@ export default defineNuxtPlugin((nuxtApp) => {
|
|||
);
|
||||
}
|
||||
|
||||
if (emojiFont.value.value !== "native") {
|
||||
if (preferences.emoji_theme.value !== "native") {
|
||||
el.innerHTML = el.innerHTML.replace(emojisRegex, (match) => {
|
||||
if (incorrectEmojisRegex.test(match)) {
|
||||
return match;
|
||||
}
|
||||
|
||||
return `<img src="/emojis/${emojiFont}/${match}.svg" alt="${match}" class="h-[1em] inline not-prose hover:scale-110 transition-transform duration-75 ease-in-out">`;
|
||||
return `<img src="/emojis/${preferences.emoji_theme.value}/${match}.svg" alt="${match}" class="h-[1em] inline not-prose hover:scale-110 transition-transform duration-75 ease-in-out">`;
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -20,6 +20,9 @@ importers:
|
|||
'@tailwindcss/vite':
|
||||
specifier: ^4.1.4
|
||||
version: 4.1.4(vite@6.2.6(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.1))
|
||||
'@tanstack/vue-table':
|
||||
specifier: ^8.21.3
|
||||
version: 8.21.3(vue@3.5.13(typescript@5.8.3))
|
||||
'@tiptap/extension-highlight':
|
||||
specifier: ^2.11.7
|
||||
version: 2.11.7(@tiptap/core@2.11.7(@tiptap/pm@2.11.7))
|
||||
|
|
@ -137,9 +140,15 @@ importers:
|
|||
vee-validate:
|
||||
specifier: ^4.15.0
|
||||
version: 4.15.0(vue@3.5.13(typescript@5.8.3))
|
||||
virtua:
|
||||
specifier: ^0.40.4
|
||||
version: 0.40.4(vue@3.5.13(typescript@5.8.3))
|
||||
vue:
|
||||
specifier: ^3.5.13
|
||||
version: 3.5.13(typescript@5.8.3)
|
||||
vue-draggable-plus:
|
||||
specifier: ^0.6.0
|
||||
version: 0.6.0(@types/sortablejs@1.15.8)
|
||||
vue-router:
|
||||
specifier: ^4.5.1
|
||||
version: 4.5.1(vue@3.5.13(typescript@5.8.3))
|
||||
|
|
@ -1627,9 +1636,19 @@ packages:
|
|||
peerDependencies:
|
||||
vite: ^5.2.0 || ^6
|
||||
|
||||
'@tanstack/table-core@8.21.3':
|
||||
resolution: {integrity: sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==}
|
||||
engines: {node: '>=12'}
|
||||
|
||||
'@tanstack/virtual-core@3.13.6':
|
||||
resolution: {integrity: sha512-cnQUeWnhNP8tJ4WsGcYiX24Gjkc9ALstLbHcBj1t3E7EimN6n6kHH+DPV4PpDnuw00NApQp+ViojMj1GRdwYQg==}
|
||||
|
||||
'@tanstack/vue-table@8.21.3':
|
||||
resolution: {integrity: sha512-rusRyd77c5tDPloPskctMyPLFEQUeBzxdQ+2Eow4F7gDPlPOB1UnnhzfpdvqZ8ZyX2rRNGmqNnQWm87OI2OQPw==}
|
||||
engines: {node: '>=12'}
|
||||
peerDependencies:
|
||||
vue: '>=3.2'
|
||||
|
||||
'@tanstack/vue-virtual@3.13.6':
|
||||
resolution: {integrity: sha512-GYdZ3SJBQPzgxhuCE2fvpiH46qzHiVx5XzBSdtESgiqh4poj8UgckjGWYEhxaBbcVt1oLzh1m3Ql4TyH32TOzQ==}
|
||||
peerDependencies:
|
||||
|
|
@ -1857,6 +1876,9 @@ packages:
|
|||
'@types/resolve@1.20.2':
|
||||
resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
|
||||
|
||||
'@types/sortablejs@1.15.8':
|
||||
resolution: {integrity: sha512-b79830lW+RZfwaztgs1aVPgbasJ8e7AXtZYHTELNXZPsERt4ymJdjV4OccDbHQAvHrCcFpbF78jkm0R6h/pZVg==}
|
||||
|
||||
'@types/trusted-types@2.0.7':
|
||||
resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
|
||||
|
||||
|
|
@ -4843,6 +4865,26 @@ packages:
|
|||
videojs-vtt.js@0.15.5:
|
||||
resolution: {integrity: sha512-yZbBxvA7QMYn15Lr/ZfhhLPrNpI/RmCSCqgIff57GC2gIrV5YfyzLfLyZMj0NnZSAz8syB4N0nHXpZg9MyrMOQ==}
|
||||
|
||||
virtua@0.40.4:
|
||||
resolution: {integrity: sha512-eV55eOm2b5Lzc9upivqIcAFPgfBrfcVrppW9T4vhTH+QAbaxfw5ypq25apkG83T5FuiFEoQYnefix1fQyx/GXQ==}
|
||||
peerDependencies:
|
||||
react: '>=16.14.0'
|
||||
react-dom: '>=16.14.0'
|
||||
solid-js: '>=1.0'
|
||||
svelte: '>=5.0'
|
||||
vue: '>=3.2'
|
||||
peerDependenciesMeta:
|
||||
react:
|
||||
optional: true
|
||||
react-dom:
|
||||
optional: true
|
||||
solid-js:
|
||||
optional: true
|
||||
svelte:
|
||||
optional: true
|
||||
vue:
|
||||
optional: true
|
||||
|
||||
vite-dev-rpc@1.0.7:
|
||||
resolution: {integrity: sha512-FxSTEofDbUi2XXujCA+hdzCDkXFG1PXktMjSk1efq9Qb5lOYaaM9zNSvKvPPF7645Bak79kSp1PTooMW2wktcA==}
|
||||
peerDependencies:
|
||||
|
|
@ -4985,6 +5027,15 @@ packages:
|
|||
vue-devtools-stub@0.1.0:
|
||||
resolution: {integrity: sha512-RutnB7X8c5hjq39NceArgXg28WZtZpGc3+J16ljMiYnFhKvd8hITxSWQSQ5bvldxMDU6gG5mkxl1MTQLXckVSQ==}
|
||||
|
||||
vue-draggable-plus@0.6.0:
|
||||
resolution: {integrity: sha512-G5TSfHrt9tX9EjdG49InoFJbt2NYk0h3kgjgKxkFWr3ulIUays0oFObr5KZ8qzD4+QnhtALiRwIqY6qul4egqw==}
|
||||
peerDependencies:
|
||||
'@types/sortablejs': ^1.15.0
|
||||
'@vue/composition-api': '*'
|
||||
peerDependenciesMeta:
|
||||
'@vue/composition-api':
|
||||
optional: true
|
||||
|
||||
vue-router@4.5.1:
|
||||
resolution: {integrity: sha512-ogAF3P97NPm8fJsE4by9dwSYtDwXIY1nFY9T6DyQnGHd1E2Da94w9JIolpe42LJGIl0DwOHBi8TcRPlPGwbTtw==}
|
||||
peerDependencies:
|
||||
|
|
@ -6847,8 +6898,15 @@ snapshots:
|
|||
tailwindcss: 4.1.4
|
||||
vite: 6.2.6(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.1)
|
||||
|
||||
'@tanstack/table-core@8.21.3': {}
|
||||
|
||||
'@tanstack/virtual-core@3.13.6': {}
|
||||
|
||||
'@tanstack/vue-table@8.21.3(vue@3.5.13(typescript@5.8.3))':
|
||||
dependencies:
|
||||
'@tanstack/table-core': 8.21.3
|
||||
vue: 3.5.13(typescript@5.8.3)
|
||||
|
||||
'@tanstack/vue-virtual@3.13.6(vue@3.5.13(typescript@5.8.3))':
|
||||
dependencies:
|
||||
'@tanstack/virtual-core': 3.13.6
|
||||
|
|
@ -7081,6 +7139,8 @@ snapshots:
|
|||
|
||||
'@types/resolve@1.20.2': {}
|
||||
|
||||
'@types/sortablejs@1.15.8': {}
|
||||
|
||||
'@types/trusted-types@2.0.7': {}
|
||||
|
||||
'@types/video.js@7.3.58': {}
|
||||
|
|
@ -10583,6 +10643,10 @@ snapshots:
|
|||
dependencies:
|
||||
global: 4.4.0
|
||||
|
||||
virtua@0.40.4(vue@3.5.13(typescript@5.8.3)):
|
||||
optionalDependencies:
|
||||
vue: 3.5.13(typescript@5.8.3)
|
||||
|
||||
vite-dev-rpc@1.0.7(vite@6.2.6(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.1)):
|
||||
dependencies:
|
||||
birpc: 2.3.0
|
||||
|
|
@ -10697,6 +10761,10 @@ snapshots:
|
|||
|
||||
vue-devtools-stub@0.1.0: {}
|
||||
|
||||
vue-draggable-plus@0.6.0(@types/sortablejs@1.15.8):
|
||||
dependencies:
|
||||
'@types/sortablejs': 1.15.8
|
||||
|
||||
vue-router@4.5.1(vue@3.5.13(typescript@5.8.3)):
|
||||
dependencies:
|
||||
'@vue/devtools-api': 6.6.4
|
||||
|
|
|
|||
339
settings.ts
339
settings.ts
|
|
@ -1,339 +0,0 @@
|
|||
import * as m from "~/paraglide/messages.js";
|
||||
|
||||
export enum SettingType {
|
||||
String = "string",
|
||||
Boolean = "boolean",
|
||||
Enum = "enum",
|
||||
Float = "float",
|
||||
Integer = "integer",
|
||||
Code = "code",
|
||||
}
|
||||
|
||||
export type Setting = {
|
||||
title: () => string;
|
||||
description: () => string;
|
||||
notImplemented?: boolean;
|
||||
type: SettingType;
|
||||
value: unknown;
|
||||
page: SettingPages;
|
||||
};
|
||||
|
||||
export type StringSetting = Setting & {
|
||||
type: SettingType.String;
|
||||
value: string;
|
||||
};
|
||||
|
||||
export type BooleanSetting = Setting & {
|
||||
type: SettingType.Boolean;
|
||||
value: boolean;
|
||||
};
|
||||
|
||||
export type EnumSetting = Setting & {
|
||||
type: SettingType.Enum;
|
||||
value: string;
|
||||
options: {
|
||||
value: string;
|
||||
label: () => string;
|
||||
icon?: string;
|
||||
}[];
|
||||
};
|
||||
|
||||
export type FloatSetting = Setting & {
|
||||
type: SettingType.Float;
|
||||
value: number;
|
||||
min: number;
|
||||
max: number;
|
||||
step: number;
|
||||
};
|
||||
|
||||
export type IntegerSetting = Setting & {
|
||||
type: SettingType.Integer;
|
||||
value: number;
|
||||
min: number;
|
||||
max: number;
|
||||
step: number;
|
||||
};
|
||||
|
||||
export type CodeSetting = Setting & {
|
||||
type: SettingType.Code;
|
||||
value: string;
|
||||
language: string;
|
||||
};
|
||||
|
||||
export enum SettingPages {
|
||||
Account = "account",
|
||||
Emojis = "emojis",
|
||||
Behaviour = "behaviour",
|
||||
Appearance = "appearance",
|
||||
}
|
||||
|
||||
export enum SettingIds {
|
||||
Language = "language",
|
||||
Mfm = "mfm",
|
||||
CustomCSS = "custom-css",
|
||||
Theme = "theme",
|
||||
CustomEmojis = "custom-emojis",
|
||||
ShowContentWarning = "show-content-warning",
|
||||
PopupAvatarHover = "popup-avatar-hover",
|
||||
InfiniteScroll = "infinite-scroll",
|
||||
ConfirmDelete = "confirm-delete",
|
||||
ConfirmFollow = "confirm-follow",
|
||||
ConfirmReblog = "confirm-reblog",
|
||||
ConfirmLike = "confirm-favourite",
|
||||
CtrlEnterToSend = "ctrl-enter-to-send",
|
||||
EmojiTheme = "emoji-theme",
|
||||
BackgroundURL = "background-url",
|
||||
NotificationsSidebar = "notifications-sidebar",
|
||||
AvatarShape = "avatar-shape",
|
||||
DefaultVisibility = "default-visibility",
|
||||
}
|
||||
|
||||
export const settings = (): Record<SettingIds, Setting> => {
|
||||
return {
|
||||
[SettingIds.Mfm]: {
|
||||
title: m.quaint_clear_boar_attend,
|
||||
description: m.aloof_helpful_larva_spur,
|
||||
type: SettingType.Boolean,
|
||||
value: false,
|
||||
page: SettingPages.Behaviour,
|
||||
notImplemented: true,
|
||||
} as BooleanSetting,
|
||||
[SettingIds.DefaultVisibility]: {
|
||||
title: m.loud_tense_kitten_exhale,
|
||||
description: m.vivid_last_crocodile_offer,
|
||||
type: SettingType.Enum,
|
||||
value: "public",
|
||||
options: [
|
||||
{
|
||||
value: "public",
|
||||
label: m.lost_trick_dog_grace,
|
||||
},
|
||||
{
|
||||
value: "unlisted",
|
||||
label: m.funny_slow_jannes_walk,
|
||||
},
|
||||
{
|
||||
value: "private",
|
||||
label: m.grassy_empty_raven_startle,
|
||||
},
|
||||
{
|
||||
value: "direct",
|
||||
label: m.pretty_bold_baboon_wave,
|
||||
},
|
||||
],
|
||||
page: SettingPages.Behaviour,
|
||||
} as EnumSetting,
|
||||
[SettingIds.Language]: {
|
||||
title: m.pretty_born_jackal_dial,
|
||||
description: m.tired_happy_lobster_pet,
|
||||
type: SettingType.Enum,
|
||||
value: "en",
|
||||
options: [
|
||||
{
|
||||
value: "en",
|
||||
label: () =>
|
||||
m.keen_aware_goldfish_thrive(
|
||||
{},
|
||||
{
|
||||
locale: "en",
|
||||
},
|
||||
),
|
||||
},
|
||||
{
|
||||
value: "fr",
|
||||
label: () =>
|
||||
m.vivid_mellow_sawfish_approve(
|
||||
{},
|
||||
{
|
||||
locale: "fr",
|
||||
},
|
||||
),
|
||||
},
|
||||
{
|
||||
value: "en-pt",
|
||||
label: () => m.these_awful_ape_reside(),
|
||||
},
|
||||
],
|
||||
page: SettingPages.Behaviour,
|
||||
} as EnumSetting,
|
||||
[SettingIds.AvatarShape]: {
|
||||
title: m.fit_cool_bulldog_dine,
|
||||
description: m.agent_misty_firefox_arise,
|
||||
type: SettingType.Enum,
|
||||
value: "square",
|
||||
options: [
|
||||
{
|
||||
value: "circle",
|
||||
label: m.polite_awful_ladybug_greet,
|
||||
},
|
||||
{
|
||||
value: "square",
|
||||
label: m.sad_each_cowfish_lock,
|
||||
},
|
||||
],
|
||||
page: SettingPages.Appearance,
|
||||
} as EnumSetting,
|
||||
[SettingIds.CustomCSS]: {
|
||||
title: m.smart_awake_dachshund_view,
|
||||
description: m.loved_topical_rat_coax,
|
||||
type: SettingType.Code,
|
||||
value: "",
|
||||
language: "css",
|
||||
page: SettingPages.Appearance,
|
||||
} as CodeSetting,
|
||||
[SettingIds.Theme]: {
|
||||
title: m.hour_elegant_mink_grip,
|
||||
description: m.male_stout_florian_feast,
|
||||
type: SettingType.Enum,
|
||||
value: "dark",
|
||||
options: [
|
||||
{
|
||||
value: "dark",
|
||||
label: m.wise_neat_ox_buzz,
|
||||
},
|
||||
{
|
||||
value: "light",
|
||||
label: m.each_strong_snail_aid,
|
||||
},
|
||||
{
|
||||
value: "system",
|
||||
label: m.helpful_raw_seal_nurture,
|
||||
},
|
||||
],
|
||||
page: SettingPages.Appearance,
|
||||
} as EnumSetting,
|
||||
[SettingIds.CustomEmojis]: {
|
||||
title: m.loud_raw_sheep_imagine,
|
||||
description: m.inclusive_pink_tuna_enjoy,
|
||||
type: SettingType.Boolean,
|
||||
value: true,
|
||||
page: SettingPages.Behaviour,
|
||||
} as BooleanSetting,
|
||||
[SettingIds.ShowContentWarning]: {
|
||||
title: m.fair_swift_elephant_hunt,
|
||||
description: m.gray_minor_bee_endure,
|
||||
type: SettingType.Boolean,
|
||||
value: true,
|
||||
page: SettingPages.Behaviour,
|
||||
} as BooleanSetting,
|
||||
[SettingIds.PopupAvatarHover]: {
|
||||
title: m.north_nimble_turkey_transform,
|
||||
description: m.bold_moving_fly_savor,
|
||||
type: SettingType.Boolean,
|
||||
value: true,
|
||||
page: SettingPages.Behaviour,
|
||||
} as BooleanSetting,
|
||||
[SettingIds.InfiniteScroll]: {
|
||||
title: m.sleek_this_earthworm_hug,
|
||||
description: m.plane_dark_salmon_pout,
|
||||
type: SettingType.Boolean,
|
||||
value: true,
|
||||
page: SettingPages.Behaviour,
|
||||
} as BooleanSetting,
|
||||
[SettingIds.ConfirmDelete]: {
|
||||
title: m.trite_salty_eel_race,
|
||||
description: m.helpful_early_worm_laugh,
|
||||
type: SettingType.Boolean,
|
||||
value: true,
|
||||
page: SettingPages.Behaviour,
|
||||
} as BooleanSetting,
|
||||
[SettingIds.ConfirmFollow]: {
|
||||
title: m.jolly_empty_bullock_mend,
|
||||
description: m.calm_male_wombat_relish,
|
||||
type: SettingType.Boolean,
|
||||
value: false,
|
||||
page: SettingPages.Behaviour,
|
||||
} as BooleanSetting,
|
||||
[SettingIds.ConfirmReblog]: {
|
||||
title: m.honest_great_rooster_taste,
|
||||
description: m.wacky_inner_osprey_intend,
|
||||
type: SettingType.Boolean,
|
||||
value: false,
|
||||
page: SettingPages.Behaviour,
|
||||
} as BooleanSetting,
|
||||
[SettingIds.ConfirmLike]: {
|
||||
title: m.patchy_basic_alligator_inspire,
|
||||
description: m.antsy_weak_raven_treat,
|
||||
type: SettingType.Boolean,
|
||||
value: false,
|
||||
page: SettingPages.Behaviour,
|
||||
} as BooleanSetting,
|
||||
[SettingIds.CtrlEnterToSend]: {
|
||||
title: m.equal_blue_zebra_launch,
|
||||
description: m.heavy_pink_meerkat_affirm,
|
||||
type: SettingType.Boolean,
|
||||
value: true,
|
||||
page: SettingPages.Behaviour,
|
||||
} as BooleanSetting,
|
||||
[SettingIds.EmojiTheme]: {
|
||||
title: m.weak_bad_martin_glow,
|
||||
description: m.warm_round_dove_skip,
|
||||
type: SettingType.Enum,
|
||||
value: "native",
|
||||
options: [
|
||||
{
|
||||
value: "native",
|
||||
label: m.slimy_sound_termite_hug,
|
||||
},
|
||||
{
|
||||
value: "twemoji",
|
||||
label: m.new_brave_maggot_relish,
|
||||
},
|
||||
{
|
||||
value: "noto",
|
||||
label: m.shy_clear_spider_cook,
|
||||
},
|
||||
{
|
||||
value: "fluent",
|
||||
label: m.many_tasty_midge_zoom,
|
||||
},
|
||||
{
|
||||
value: "fluent-flat",
|
||||
label: m.less_early_lionfish_honor,
|
||||
},
|
||||
],
|
||||
page: SettingPages.Appearance,
|
||||
} as EnumSetting,
|
||||
[SettingIds.BackgroundURL]: {
|
||||
title: m.stock_large_marten_comfort,
|
||||
description: m.mean_weird_donkey_stab,
|
||||
type: SettingType.String,
|
||||
value: "",
|
||||
page: SettingPages.Appearance,
|
||||
} as StringSetting,
|
||||
[SettingIds.NotificationsSidebar]: {
|
||||
title: m.tired_jumpy_rook_slurp,
|
||||
description: m.wide_new_robin_empower,
|
||||
type: SettingType.Boolean,
|
||||
value: true,
|
||||
page: SettingPages.Appearance,
|
||||
} as BooleanSetting,
|
||||
};
|
||||
};
|
||||
|
||||
export const getSettingsForPage = (page: SettingPages): Partial<Settings> => {
|
||||
return Object.fromEntries(
|
||||
Object.entries(settings()).filter(
|
||||
([, setting]) => setting.page === page,
|
||||
),
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Merge a partly defined Settings object with the default settings
|
||||
* Useful when there is an update to the settings in the backend
|
||||
*/
|
||||
export const mergeSettings = (
|
||||
settingsToMerge: Record<SettingIds, Setting["value"]>,
|
||||
): Settings => {
|
||||
const finalSettings = settings();
|
||||
|
||||
for (const [key, value] of Object.entries(settingsToMerge)) {
|
||||
if (key in settings()) {
|
||||
finalSettings[key as SettingIds].value = value;
|
||||
}
|
||||
}
|
||||
|
||||
return finalSettings;
|
||||
};
|
||||
export type Settings = ReturnType<typeof settings>;
|
||||
Loading…
Reference in a new issue