feat: ✨ Add multi-account support, more options for posts, UI improvements

components/composer/composer.vue

@@ -71,7 +71,7 @@ const { input: content } = useTextareaAutosize({
 const { Control_Enter, Command_Enter, Control_Alt } = useMagicKeys();
 const respondingTo = ref<Status | null>(null);
 const respondingType = ref<"reply" | "quote" | "edit" | null>(null);
-const me = useMe();
+const identity = useCurrentIdentity();
 const cw = ref(false);
 const cwContent = ref("");
 const markdown = ref(true);
@@ -151,7 +151,7 @@ onMounted(() => {
     useListen("composer:reply", (note: Status) => {
         respondingTo.value = note;
         respondingType.value = "reply";
-        if (note.account.id !== me.value?.id)
+        if (note.account.id !== identity.value?.account.id)
             content.value = `@${note.account.acct} `;
         textarea.value?.focus();
     });
@@ -159,7 +159,7 @@ onMounted(() => {
     useListen("composer:quote", (note: Status) => {
         respondingTo.value = note;
         respondingType.value = "quote";
-        if (note.account.id !== me.value?.id)
+        if (note.account.id !== identity.value?.account.id)
             content.value = `@${note.account.acct} `;
         textarea.value?.focus();
     });
@@ -175,7 +175,7 @@ onMounted(() => {
         }));
 
         // Fetch source
-        const source = await client.value?.getStatusSource(note.id);
+        const source = await client.value.getStatusSource(note.id);
 
         if (source?.data) {
             respondingTo.value = note;
@@ -205,12 +205,11 @@ const canSubmit = computed(
         (content.value?.trim().length > 0 || files.value.length > 0) &&
         content.value?.trim().length <= characterLimit.value,
 );
-const tokenData = useTokenData();
-const client = useClient(tokenData);
+const client = useClient();
 
 const send = async () => {
     loading.value = true;
-    if (!tokenData.value || !client.value) {
+    if (!identity.value || !client.value) {
         throw new Error("Not authenticated");
     }
 

components/composer/emoji-suggestbox.vue

@@ -10,14 +10,14 @@
 </template>
 
 <script lang="ts" setup>
+import type { LysandClient } from "@lysand-org/client";
 import { distance } from "fastest-levenshtein";
-import type { UnwrapRef } from "vue";
+import type { CustomEmoji } from "~/composables/Identities";
 const props = defineProps<{
     currentlyTypingEmoji: string | null;
 }>();
 
 const emojiRefs = ref<Element[]>([]);
-const customEmojis = useCustomEmojis();
 const { Tab, ArrowRight, ArrowLeft, Enter } = useMagicKeys({
     passive: false,
     onEventFired(e) {
@@ -28,12 +28,15 @@ const { Tab, ArrowRight, ArrowLeft, Enter } = useMagicKeys({
             e.preventDefault();
     },
 });
-const topEmojis = ref<UnwrapRef<typeof customEmojis> | null>(null);
+const identity = useCurrentIdentity();
+const topEmojis = ref<CustomEmoji[] | null>(null);
 const selectedEmojiIndex = ref<number | null>(null);
 
 watchEffect(() => {
+    if (!identity.value) return;
+
     if (props.currentlyTypingEmoji !== null)
-        topEmojis.value = customEmojis.value
+        topEmojis.value = identity.value.emojis
             .map((emoji) => ({
                 ...emoji,
                 distance: distance(

components/composer/file-uploader.vue

@@ -2,7 +2,7 @@
     <div>
         <input type="file" ref="fileInput" @change="handleFileInput" style="display: none" multiple />
         <div class="flex flex-row gap-2 overflow-x-auto *:shrink-0 p-1 mb-4" v-if="files.length > 0">
-            <div v-for="(data) in files.toReversed()" :key="data.id" role="button" tabindex="0"
+            <div v-for="(data) in files" :key="data.id" role="button" tabindex="0"
                 :class="['size-28 bg-dark-800 rounded flex items-center relative justify-center ring-1 ring-white/20 overflow-hidden', data.progress !== 1.0 && 'animate-pulse']"
                 @keydown.enter="removeFile(data.id)">
                 <template v-if="data.file.type.startsWith('image/')">
@@ -73,8 +73,7 @@ const files = defineModel<
     required: true,
 });
 
-const tokenData = useTokenData();
-const client = useClient(tokenData);
+const client = useClient();
 const fileInput = ref<HTMLInputElement | null>(null);
 
 const openFilePicker = () => {
@@ -165,7 +164,7 @@ const uploadFile = async (file: File) => {
         return data;
     });
 
-    client.value?.uploadMedia(file).then((response) => {
+    client.value.uploadMedia(file).then((response) => {
         const attachment = response.data;
 
         files.value = files.value.map((data) => {

components/composer/modal.client.vue

@@ -19,7 +19,7 @@
                         <Dialog.Content class="overflow-y-auto w-full max-h-full md:py-16">
                             <div
                                 class="relative overflow-hidden max-w-xl mx-auto rounded-lg bg-dark-700 ring-1 ring-dark-800 text-left shadow-xl transition-all w-full">
-                                <Composer v-if="instance" :instance="instance" />
+                                <Composer v-if="instance" :instance="instance as any" />
                             </div>
                         </Dialog.Content>
                     </HeadlessTransitionChild>
@@ -32,6 +32,8 @@
 <script lang="ts" setup>
 import { Dialog } from "@ark-ui/vue";
 const open = ref(false);
+
+const identity = useCurrentIdentity();
 useListen("note:reply", async (note) => {
     open.value = true;
     await nextTick();
@@ -48,11 +50,10 @@ useListen("note:edit", async (note) => {
     useEvent("composer:edit", note);
 });
 useListen("composer:open", () => {
-    if (tokenData.value) open.value = true;
+    if (identity.value) open.value = true;
 });
 useListen("composer:close", () => {
     open.value = false;
 });
-const tokenData = useTokenData();
 const instance = useInstance();
 </script>