mirror of
https://github.com/versia-pub/frontend.git
synced 2026-03-13 03:29:16 +01:00
feat: ✨ Wire up new preferences and remove old settings
Some checks failed
Mirror to Codeberg / Mirror (push) Failing after 0s
Some checks failed
Mirror to Codeberg / Mirror (push) Failing after 0s
This commit is contained in:
Jesse Wierzbinski
parent
412e49dfe2
commit
3ce71dd4df
32 changed files with 213 additions and 340 deletions
|
|
@ -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,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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue