feat: ✨ Add CW rendering

2025-12-06 08:28:20 +01:00 · 2024-12-07 15:16:45 +01:00 · 2024-12-07 15:16:45 +01:00 · 7372882905
parent 80ad22c395
commit 7372882905
6 changed files with 64 additions and 29 deletions
--- a/components/composer/composer.vue
+++ b/components/composer/composer.vue
@ -203,6 +203,7 @@ const submit = async () => {
            });

            useEvent("composer:send-edit", data);
+            useEvent("composer:close");
        } else {
            const { data } = await client.value.postStatus(state.content, {
                content_type: state.contentType,
--- a/components/notes/content.vue
+++ b/components/notes/content.vue
@ -1,22 +1,35 @@
 <template>
-    <div ref="container" :class="['overflow-y-hidden relative duration-200']" :style="{
-        maxHeight: collapsed ? '18rem' : `${container?.scrollHeight}px`
+    <Alert variant="warning" v-if="sensitive || contentWarning"
+        class="mb-4 py-2 px-4 grid grid-cols-[auto,1fr,auto] gap-2 items-center [&>svg~*]:pl-0 [&>svg+div]:translate-y-0 [&>svg]:static">
+        <AlertTitle class="sr-only">Sensitive content</AlertTitle>
+        <div>
+            <TriangleAlert class="size-4" />
+        </div>
+        <AlertDescription>
+            {{ contentWarning || "This content is sensitive" }}
+        </AlertDescription>
+        <Button @click="blurred = !blurred" variant="outline" size="sm">{{ blurred ? "Show" : "Hide" }}</Button>
+    </Alert>
+
+    <div ref="container" :class="cn('overflow-y-hidden relative duration-200', blurred && 'blur-md')" :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" v-render-emojis="emojis">
-        </div>
+        <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" v-render-emojis="emojis"></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>
+            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"
+                collapsed
+                    ? `Show more${plainContent ? ` • ${formattedCharacterCount} characters` : ""
+                    }`
+                    : "Show less"
            }}</Button>
    </div>

-    <Attachments v-if="attachments.length > 0" :attachments="attachments" />
+    <Attachments v-if="attachments.length > 0" :attachments="attachments" :class="blurred && 'blur-xl'" />

    <div v-if="quote" class="mt-4 rounded border overflow-hidden">
        <Note :note="quote" :hide-actions="true" :small-layout="true" />
@ -24,20 +37,27 @@
 </template>

 <script lang="ts" setup>
+import { cn } from "@/lib/utils";
 import type { Attachment, Emoji, Status } from "@versia/client/types";
-import { Button } from "~/components/ui/button";
+import { TriangleAlert } from "lucide-vue-next";
+import { Button, buttonVariants } from "~/components/ui/button";
+import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
+import { Card, CardHeader } from "../ui/card";
 import Attachments from "./attachments.vue";
 import Note from "./note.vue";

-const { content, plainContent } = defineProps<{
+const { content, plainContent, sensitive, contentWarning } = defineProps<{
    plainContent?: string;
    content: string;
    quote?: NonNullable<Status["quote"]>;
    emojis: Emoji[];
    attachments: Attachment[];
+    sensitive: boolean;
+    contentWarning?: string;
 }>();
 const container = ref<HTMLDivElement | null>(null);
 const collapsed = ref(true);
+const blurred = ref(sensitive || !!contentWarning);

 // max-h-72 is 18rem
 const remToPx = (rem: number) =>
@ -63,11 +83,11 @@ const formattedCharacterCount = characterCount
    word-wrap: normal;
    background: transparent;
    background-color: #ffffff0d;
-    border-radius: .25rem;
+    border-radius: 0.25rem;
    hyphens: none;
    margin-top: 1rem;
    overflow-x: auto;
-    padding: .75rem 1rem;
+    padding: 0.75rem 1rem;
    tab-size: 4;
    white-space: pre;
    word-break: normal;
@ -75,25 +95,26 @@ const formattedCharacterCount = characterCount
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
-    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-    --tw-ring-color: hsla(0, 0%, 100%, .1)
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+        var(--tw-shadow, 0 0 #0000);
+    --tw-ring-color: hsla(0, 0%, 100%, 0.1);
 }

 .content pre code {
    display: block;
-    padding: 0
+    padding: 0;
 }

 .content code:not(pre code)::after,
 .content code:not(pre code)::before {
-    content: ""
+    content: "";
 }

-.content ol li input[type=checkbox],
-.content ul li input[type=checkbox] {
-    border-radius: .25rem;
+.content ol li input[type="checkbox"],
+.content ul li input[type="checkbox"] {
+    border-radius: 0.25rem;
    margin-bottom: 0.2rem;
-    margin-right: .5rem;
+    margin-right: 0.5rem;
    margin-top: 0;
    vertical-align: middle;
    --tw-text-opacity: 1;
@ -101,8 +122,8 @@ const formattedCharacterCount = characterCount
 }

 .content code:not(pre code) {
-    border-radius: .25rem;
-    padding: .25rem .5rem;
+    border-radius: 0.25rem;
+    padding: 0.25rem 0.5rem;
    word-wrap: break-word;
    background: transparent;
    background-color: #ffffff0d;
@ -112,7 +133,8 @@ const formattedCharacterCount = characterCount
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
-    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-    --tw-ring-color: hsla(0, 0%, 100%, .1)
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+        var(--tw-shadow, 0 0 #0000);
+    --tw-ring-color: hsla(0, 0%, 100%, 0.1);
 }
-</style>
+</style>
--- a/components/notes/note.vue
+++ b/components/notes/note.vue
@ -11,7 +11,7 @@
        <CardContent>
            <Content :content="noteToUse.content" :quote="note.quote ?? undefined"
                :attachments="noteToUse.media_attachments" :plain-content="noteToUse.plain_content ?? undefined"
-                :emojis="noteToUse.emojis" />
+                :emojis="noteToUse.emojis" :sensitive="noteToUse.sensitive" :content-warning="noteToUse.spoiler_text" />
        </CardContent>
        <CardFooter v-if="!hideActions" class="p-4 pt-0">
            <Actions :reply-count="noteToUse.replies_count" :like-count="noteToUse.favourites_count" :url="url"
--- a/components/ui/alert/index.ts
+++ b/components/ui/alert/index.ts
@ -12,6 +12,8 @@ export const alertVariants = cva(
                default: "bg-background text-foreground",
                destructive:
                    "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+                warning:
+                    "border-warning/50 text-warning dark:border-warning [&>svg]:text-warning",
            },
        },
        defaultVariants: {
--- a/styles/index.css
+++ b/styles/index.css
@ -33,6 +33,9 @@
        --destructive: 0 84.2% 60.2%;
        --destructive-foreground: 0 0% 98%;

+        --warning: 40, 100%, 50%;
+        --warning-foreground: 0 0% 98%;
+
        --ring: 240 10% 3.9%;

        --radius: 0.5rem;
@ -75,6 +78,9 @@
        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 0 0% 98%;

+        --warning: 40 100% 50%;
+        --warning-foreground: 0 0% 98%;
+
        --ring: 240 4.9% 83.9%;

        --sidebar-background: 240 5.9% 10%;
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@ -49,6 +49,10 @@ export default (<Config>{
                    DEFAULT: "hsl(var(--destructive))",
                    foreground: "hsl(var(--destructive-foreground))",
                },
+                warning: {
+                    DEFAULT: "hsl(var(--warning))",
+                    foreground: "hsl(var(--warning-foreground))",
+                },
                muted: {
                    DEFAULT: "hsl(var(--muted))",
                    foreground: "hsl(var(--muted-foreground))",