mirror of
https://github.com/versia-pub/frontend.git
synced 2026-03-13 03:29:16 +01:00
feat: ✨ Make composer work again
This commit is contained in:
Jesse Wierzbinski
parent
4dfbd845d3
commit
294740c97f
18 changed files with 571 additions and 32 deletions
|
|
@ -1,47 +1,216 @@
|
|||
<template>
|
||||
<Textarea :placeholder="chosenSplash" class="!border-none !ring-0 !outline-none rounded-none p-0 max-h-full min-h-48 !ring-offset-0" />
|
||||
<Input v-model:model-value="state.contentWarning" v-if="state.sensitive"
|
||||
placeholder="Put your content warning here" />
|
||||
|
||||
<DialogFooter class="items-center flex-row">
|
||||
<Button variant="ghost" size="icon">
|
||||
<AtSign class="!size-5" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon">
|
||||
<LetterText class="!size-5" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon">
|
||||
<Smile class="!size-5" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon">
|
||||
<FilePlus2 class="!size-5" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon">
|
||||
<TriangleAlert class="!size-5" />
|
||||
</Button>
|
||||
<Button type="submit" size="lg" class="ml-auto">
|
||||
{{ relation?.type === "edit" ? "Save" : "Send" }}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
<Textarea :placeholder="chosenSplash" v-model:model-value="state.content"
|
||||
class="!border-none !ring-0 !outline-none rounded-none p-0 max-h-full min-h-48 !ring-offset-0"
|
||||
:disabled="sending" />
|
||||
|
||||
<DialogFooter class="items-center flex-row">
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger as="div">
|
||||
<Button variant="ghost" size="icon">
|
||||
<AtSign class="!size-5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Mention someone</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger as="div">
|
||||
<Toggle variant="default" size="sm" :pressed="state.contentType === 'text/markdown'"
|
||||
@update:pressed="i => state.contentType = i ? 'text/plain' : 'text/markdown'">
|
||||
<LetterText class="!size-5" />
|
||||
</Toggle>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Enable Markdown</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
<Select v-model:model-value="state.visibility">
|
||||
<SelectTrigger :as-child="true" :disabled="relation?.type === 'edit'">
|
||||
<Button variant="ghost" size="icon">
|
||||
<component :is="visibilities[state.visibility].icon" class="!size-5" />
|
||||
</Button>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem v-for="(v, k) in visibilities" :key="k" @click="state.visibility = k" :value="k">
|
||||
<div class="flex flex-row gap-4 items-center w-full justify-between">
|
||||
<div class="flex flex-col gap-1">
|
||||
<span class="font-semibold">{{ v.name }}</span>
|
||||
<span>{{ v.text }}</span>
|
||||
</div>
|
||||
<component :is="v.icon" class="!size-5" />
|
||||
</div>
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger as="div">
|
||||
<Button variant="ghost" size="icon">
|
||||
<Smile class="!size-5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Insert emoji</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger as="div">
|
||||
<Button variant="ghost" size="icon">
|
||||
<FilePlus2 class="!size-5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Attach a file</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger as="div">
|
||||
<Toggle variant="default" size="sm" @update:pressed="i => state.sensitive = i">
|
||||
<TriangleAlert class="!size-5" />
|
||||
</Toggle>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Mark as sensitive</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
<Button type="submit" size="lg" class="ml-auto" :disabled="sending" @click="submit">
|
||||
<Loader v-if="sending" class="!size-5 animate-spin" />
|
||||
{{ relation?.type === "edit" ? "Save" : "Send" }}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { ResponseError } from "@versia/client";
|
||||
import type { Status } from "@versia/client/types";
|
||||
import {
|
||||
AtSign,
|
||||
FilePlus2,
|
||||
Globe,
|
||||
LetterText,
|
||||
Loader,
|
||||
Lock,
|
||||
LockOpen,
|
||||
Smile,
|
||||
TriangleAlert,
|
||||
} from "lucide-vue-next";
|
||||
import { SelectTrigger } from "radix-vue";
|
||||
import { toast } from "vue-sonner";
|
||||
import { Select, SelectContent, SelectItem } from "~/components/ui/select";
|
||||
import { Button } from "../ui/button";
|
||||
import { Input } from "../ui/input";
|
||||
import { Textarea } from "../ui/textarea";
|
||||
import { Toggle } from "../ui/toggle";
|
||||
|
||||
defineProps<{
|
||||
const { Control_Enter, Command_Enter } = useMagicKeys();
|
||||
|
||||
watch([Control_Enter, Command_Enter], () => {
|
||||
if (sending.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
submit();
|
||||
});
|
||||
|
||||
const { relation } = defineProps<{
|
||||
relation?: {
|
||||
type: "reply" | "reblog" | "edit";
|
||||
type: "reply" | "quote" | "edit";
|
||||
note: Status;
|
||||
};
|
||||
}>();
|
||||
|
||||
const state = reactive({
|
||||
content: "",
|
||||
sensitive: false,
|
||||
contentWarning: "",
|
||||
contentType: "text/markdown" as "text/markdown" | "text/plain",
|
||||
visibility: "public" as Status["visibility"],
|
||||
files: [] as {
|
||||
apiId?: string;
|
||||
file: File;
|
||||
alt: string;
|
||||
uploading: boolean;
|
||||
updating: boolean;
|
||||
}[],
|
||||
});
|
||||
const sending = ref(false);
|
||||
|
||||
const splashes = useConfig().COMPOSER_SPLASHES;
|
||||
const chosenSplash = splashes[Math.floor(Math.random() * splashes.length)];
|
||||
|
||||
const submit = async () => {
|
||||
sending.value = true;
|
||||
|
||||
try {
|
||||
if (relation?.type === "edit") {
|
||||
await client.value.editStatus(relation.note.id, {
|
||||
status: state.content,
|
||||
content_type: state.contentType,
|
||||
sensitive: state.sensitive,
|
||||
spoiler_text: state.sensitive
|
||||
? state.contentWarning
|
||||
: undefined,
|
||||
media_ids: state.files
|
||||
.map((f) => f.apiId)
|
||||
.filter((f) => f !== undefined),
|
||||
});
|
||||
}
|
||||
|
||||
await client.value.postStatus(state.content, {
|
||||
content_type: state.contentType,
|
||||
sensitive: state.sensitive,
|
||||
spoiler_text: state.sensitive ? state.contentWarning : undefined,
|
||||
media_ids: state.files
|
||||
.map((f) => f.apiId)
|
||||
.filter((f) => f !== undefined),
|
||||
quote_id: relation?.type === "quote" ? relation.note.id : undefined,
|
||||
in_reply_to_id:
|
||||
relation?.type === "reply" ? relation.note.id : undefined,
|
||||
visibility: state.visibility,
|
||||
});
|
||||
|
||||
useEvent("composer:close");
|
||||
} catch (_e) {
|
||||
const e = _e as ResponseError;
|
||||
toast.error(e.message);
|
||||
} finally {
|
||||
sending.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const visibilities = {
|
||||
public: {
|
||||
icon: Globe,
|
||||
name: "Public",
|
||||
text: "Can be seen by anyone.",
|
||||
},
|
||||
unlisted: {
|
||||
icon: LockOpen,
|
||||
name: "Unlisted",
|
||||
text: "Can be seen by anyone with the link.",
|
||||
},
|
||||
private: {
|
||||
icon: Lock,
|
||||
name: "Private",
|
||||
text: "Can only be seen by your followers.",
|
||||
},
|
||||
direct: {
|
||||
icon: AtSign,
|
||||
name: "Direct",
|
||||
text: "Can only be seen by mentioned users.",
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -8,6 +8,10 @@ useListen("composer:open", () => {
|
|||
}
|
||||
});
|
||||
|
||||
useListen("composer:close", () => {
|
||||
open.value = false;
|
||||
});
|
||||
|
||||
const open = ref(false);
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue