From 7372882905f0a39470211a22edd55adada7a69e4 Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Sat, 7 Dec 2024 15:16:45 +0100
Subject: [PATCH] feat: :sparkles: Add CW rendering

---
 components/composer/composer.vue |  1 +
 components/notes/content.vue     | 78 ++++++++++++++++++++------------
 components/notes/note.vue        |  2 +-
 components/ui/alert/index.ts     |  2 +
 styles/index.css                 |  6 +++
 tailwind.config.ts               |  4 ++
 6 files changed, 64 insertions(+), 29 deletions(-)

diff --git a/components/composer/composer.vue b/components/composer/composer.vue
index d38747c..4eb9806 100644
--- 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,
diff --git a/components/notes/content.vue b/components/notes/content.vue
index d266a63..75efbe4 100644
--- 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>
\ No newline at end of file
+</style>
diff --git a/components/notes/note.vue b/components/notes/note.vue
index 4888ec5..3f818f4 100644
--- 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"
diff --git a/components/ui/alert/index.ts b/components/ui/alert/index.ts
index bb93a0a..e8b55f0 100644
--- 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: {
diff --git a/styles/index.css b/styles/index.css
index 30f61c5..eee3cec 100644
--- 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%;
diff --git a/tailwind.config.ts b/tailwind.config.ts
index a5f6ce5..7a4e2aa 100644
--- 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))",