feat: Implement emoji uploads

This commit is contained in:
Jesse Wierzbinski 2024-12-09 13:12:46 +01:00
parent 17441bfd47
commit 93a3d233d0
No known key found for this signature in database
9 changed files with 391 additions and 22 deletions

View file

@ -4,7 +4,7 @@
<h1 class="scroll-m-20 text-3xl font-extrabold tracking-tight lg:text-4xl capitalize">
{{ m.tasty_late_termite_sew() }}
</h1>
<Button class="ml-auto" v-if="profileEditor?.dirty" @click="profileEditor.submitForm">Save</Button>
<Button v-if="profileEditor?.dirty" @click="profileEditor.submitForm">Save</Button>
</div>
<div class="grid xl:grid-cols-[1fr,auto] gap-4 *:max-h-[80vh]">
<ProfileEditor ref="profileEditor" />

View file

@ -1,8 +1,15 @@
<template>
<div class="md:px-8 px-4 py-2 max-w-7xl mx-auto w-full space-y-6">
<h1 class="scroll-m-20 text-3xl font-extrabold tracking-tight lg:text-4xl capitalize">
{{ m.suave_smart_mantis_climb() }}
</h1>
<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" />
@ -21,9 +28,11 @@
</template>
<script lang="ts" setup>
import type { Emoji } from "@versia/client/types";
import { Search } from "lucide-vue-next";
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 {
Card,
CardDescription,
@ -47,6 +56,13 @@ definePageMeta({
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) =>