fix: 🐛 Layout fixes, make CW composing work

components/avatars/Centered.vue

@@ -1,7 +1,7 @@
 <template>
     <div v-bind="$props" class="bg-dark-700 overflow-hidden flex items-center justify-center">
-        <Skeleton :enabled="!url" class="!h-full !w-full">
+        <Skeleton :enabled="!src" class="!h-full !w-full">
-            <img class="cursor-pointer bg-dark-700 ring-1 w-full h-full object-cover" :src="url" :alt="alt"
+            <img class="cursor-pointer bg-dark-700 ring-1 w-full h-full object-cover" :src="src" :alt="alt"
                 :title="alt" />
         </Skeleton>
     </div>
@@ -11,7 +11,7 @@
 import type { HTMLAttributes } from "vue";
 
 interface Props extends /* @vue-ignore */ HTMLAttributes {
-    url?: string;
+    src?: string;
     alt?: string;
 }
 

components/composer/composer.vue

@@ -25,7 +25,7 @@
         </div>
         <!-- Content warning textbox -->
         <div v-if="cw !== null" class="mb-4">
-            <input type="text" placeholder="Add a content warning"
+            <input type="text" v-model="cwContent" placeholder="Add a content warning"
                 class="w-full p-2 mt-1 text-sm prose prose-invert bg-dark-900 rounded focus:!ring-0 !ring-none !border-none !outline-none placeholder:text-zinc-500 appearance-none focus:!border-none focus:!outline-none" />
         </div>
         <div class="flex flex-row gap-1 border-white/20">
@@ -69,6 +69,7 @@ const respondingTo = ref<Status | null>(null);
 const respondingType = ref<"reply" | "quote" | null>(null);
 const me = useMe();
 const cw = ref(null as string | null);
+const cwContent = ref("");
 const markdown = ref(true);
 
 const splashes = useConfig().COMPOSER_SPLASHES;
@@ -129,6 +130,8 @@ const send = async () => {
                 respondingType.value === "quote"
                     ? respondingTo.value?.id
                     : null,
+            spoiler_text: cw ? cwContent.value.trim() : undefined,
+            sensitive: !!cw,
         }),
     })
         .then(async (res) => {

components/headers/greeting.vue

@@ -3,7 +3,7 @@
         <div v-if="me" class="bg-dark-800 p-6 my-5 rounded ring-1 ring-white/5">
             <div class="sm:flex sm:items-center sm:justify-between">
                 <div class="sm:flex sm:space-x-5">
-                    <AvatarsCentered :url="me.avatar"
+                    <AvatarsCentered :src="me.avatar"
                         class="mx-auto shrink-0 size-20 rounded overflow-hidden ring-1 ring-white/10" />
                     <div class="mt-4 text-center sm:mt-0 sm:pt-1 sm:text-left">
                         <p class="text-sm font-medium text-gray-300">Welcome back,</p>

components/social-elements/notes/header.vue

@@ -1,7 +1,7 @@
 <template>
     <div v-if="small" class="flex flex-row">
         <NuxtLink :href="accountUrl" class="shrink-0">
-            <AvatarsCentered :url="note?.account.avatar" :alt="`${note?.account.acct}'s avatar`"
+            <AvatarsCentered :src="note?.account.avatar" :alt="`${note?.account.acct}'s avatar`"
                 class="size-6 rounded ring-1 ring-white/5" />
         </NuxtLink>
         <div class="flex flex-col items-start justify-around ml-4 grow overflow-hidden">
@@ -22,7 +22,7 @@
     </div>
     <div v-else class="flex flex-row">
         <NuxtLink :href="accountUrl" class="shrink-0">
-            <AvatarsCentered :url="note?.account.avatar" :alt="`${note?.account.acct}'s avatar`"
+            <AvatarsCentered :src="note?.account.avatar" :alt="`${note?.account.acct}'s avatar`"
                 class="h-12 w-12 rounded ring-1 ring-white/5" />
         </NuxtLink>
         <div class="flex flex-col items-start justify-around ml-4 grow overflow-hidden">

components/social-elements/notes/reply-header.vue

@@ -1,14 +1,11 @@
 <template>
-    <NuxtLink :href="`/@${account?.acct}`"
+    <NuxtLink :href="`/@${account?.acct}`" class="mb-4 flex flex-row gap-2 items-center text-gray-300 opacity-70">
-        class="mb-4 flex flex-row gap-2 items-center text-gray-300 opacity-70 line-clamp-1">
         <Skeleton :enabled="!account" shape="rect" class="!h-6" :min-width="40" :max-width="100" width-unit="%">
             <iconify-icon icon="tabler:arrow-back-up" width="1.5rem" height="1.5rem" aria-hidden="true" />
-            <span class="flex flex-row items-center gap-2 overflow-hidden flex-wrap break-all">
+            <span class="shrink-0">Replying to</span>
-                Replying to
+            <AvatarsCentered v-if="account?.avatar" :src="account?.avatar" :alt="`${account?.acct}'s avatar'`"
-                <AvatarsCentered v-if="account?.avatar" :url="account?.avatar" :alt="`${account?.acct}'s avatar'`"
+                class="size-5 shrink-0 rounded ring-1 ring-white/10" />
-                    class="size-5 rounded inline-flex shrink-0 ring-1 ring-white/10" />
             <strong class="line-clamp-1">{{ account?.display_name || account?.acct }}</strong>
-            </span>
         </Skeleton>
     </NuxtLink>
 </template>

components/social-elements/users/Account.vue

@@ -1,11 +1,11 @@
 <template>
     <ClientOnly>
         <div class="w-full ring-1 ring-inset ring-white/5 pb-10">
-            <AvatarsCentered :url="account?.header" :alt="`${account?.acct}'s header image'`"
+            <AvatarsCentered :src="account?.header" :alt="`${account?.acct}'s header image'`"
                 class="w-full aspect-[8/3] border-b border-white/10 bg-dark-700" />
 
             <div class="flex items-start justify-between px-4 py-3">
-                <AvatarsCentered :url="account?.avatar" :alt="`${account?.acct}'s avatar'`"
+                <AvatarsCentered :src="account?.avatar" :alt="`${account?.acct}'s avatar'`"
                     class="h-32 w-32 -mt-[4.5rem] z-10 shrink-0 rounded ring-2 ring-dark-800" />
 
                 <ClientOnly>