feat: ✨ Make long notes automatically collapse their content until expanded

components/notes/content.vue

@@ -1,5 +1,18 @@
 <template>
-    <div :class="['prose prose-sm block relative dark:prose-invert duration-200 !max-w-full break-words prose-a:no-underline prose-a:hover:underline', $style.content]" v-html="content">
+    <div ref="container" :class="['overflow-y-hidden relative duration-200']" :style="{
+        maxHeight: collapsed ? '18rem' : `${container?.scrollHeight}px` }">
+        <div :class="['prose prose-sm block relative dark:prose-invert duration-200 !max-w-full break-words prose-a:no-underline prose-a:hover:underline', $style.content]"
+            v-html="content">
+        </div>
+        <div v-if="isOverflowing && collapsed"
+            class="absolute inset-x-0 bottom-0 h-36 bg-gradient-to-t from-black/5 to-transparent rounded-b">
+        </div>
+        <Button v-if="isOverflowing" @click="collapsed = !collapsed"
+            class="absolute bottom-2 right-1/2 translate-x-1/2">{{
+                collapsed ? `Show more${plainContent ? ` • ${formattedCharacterCount
+                    } characters` : ""
+                    }` : "Show less"
+            }}</Button>
     </div>
 
     <Attachments v-if="attachments.length > 0" :attachments="attachments" />
@@ -11,14 +24,36 @@
 
 <script lang="ts" setup>
 import type { Attachment, Status } from "@versia/client/types";
+import { Button } from "~/components/ui/button";
 import Attachments from "./attachments.vue";
 import Note from "./note.vue";
 
-const { content } = defineProps<{
+const { content, plainContent } = defineProps<{
+    plainContent?: string;
     content: string;
     quote?: NonNullable<Status["quote"]>;
     attachments: Attachment[];
 }>();
+const container = ref<HTMLDivElement | null>(null);
+const collapsed = ref(true);
+
+// max-h-72 is 18rem
+const remToPx = (rem: number) =>
+    rem *
+    Number.parseFloat(
+        getComputedStyle(document.documentElement).fontSize || "16px",
+    );
+const isOverflowing = computed(() => {
+    if (!container.value) {
+        return false;
+    }
+    return container.value.scrollHeight > remToPx(18);
+});
+
+const characterCount = plainContent?.length;
+const formattedCharacterCount = characterCount
+    ? new Intl.NumberFormat("en-us").format(characterCount)
+    : undefined;
 </script>
 
 <style module>
@@ -54,13 +89,13 @@ const { content } = defineProps<{
 
 .content ol li input[type=checkbox],
 .content ul li input[type=checkbox] {
-  border-radius:.25rem;
+    border-radius: .25rem;
-  margin-bottom:0.2rem;
+    margin-bottom: 0.2rem;
-  margin-right:.5rem;
+    margin-right: .5rem;
-  margin-top:0;
+    margin-top: 0;
-  vertical-align: middle;
+    vertical-align: middle;
-  --tw-text-opacity:1;
+    --tw-text-opacity: 1;
-  color: var(--theme-primary-400);
+    color: var(--theme-primary-400);
 }
 
 .content code:not(pre code) {

components/notes/note.vue

@@ -9,7 +9,7 @@
                 :small-layout="smallLayout" />
         </CardHeader>
         <CardContent>
-            <Content :content="noteToUse.content" :quote="note.quote ?? undefined" :attachments="noteToUse.media_attachments"/>
+            <Content :content="noteToUse.content" :quote="note.quote ?? undefined" :attachments="noteToUse.media_attachments" :plain-content="noteToUse.plain_content ?? undefined"/>
         </CardContent>
         <CardFooter v-if="!hideActions" class="p-4 pt-0">
             <Actions :reply-count="noteToUse.replies_count" :like-count="noteToUse.favourites_count" :url="url"