Add content warnings

CHANGELOG.md

@@ -10,6 +10,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 - Detect preferred color scheme.
 - Show loading indicator while attachment is being uploaded.
+- Content warnings.
 
 ### Fixed
 

src/api/posts.ts

@@ -60,6 +60,7 @@ export interface Post {
   in_reply_to_id: string | null;
   reblog: Post | null;
   visibility: Visibility;
+  sensitive: boolean;
   replies_count: number;
   favourites_count: number;
   reblogs_count: number;
@@ -176,6 +177,7 @@ export async function previewPost(
     in_reply_to_id: null,
     reblog: null,
     visibility: Visibility.Public,
+    sensitive: false,
     replies_count: 0,
     favourites_count: 0,
     reblogs_count: 0,
@@ -194,8 +196,9 @@ export async function previewPost(
 
 export interface PostData {
   content: string;
-  in_reply_to_id: string | null;
+  inReplyToId: string | null;
   visibility: string;
+  isSensitive: boolean;
   mentions: string[];
   attachments: Attachment[];
 }
@@ -210,8 +213,9 @@ export async function createPost(
     status: postData.content,
     content_type: "text/markdown",
     "media_ids[]": postData.attachments.map((attachment) => attachment.id),
-    in_reply_to_id: postData.in_reply_to_id,
+    in_reply_to_id: postData.inReplyToId,
     visibility: postData.visibility,
+    sensitive: postData.isSensitive,
     mentions: postData.mentions,
   }
   const response = await http(url, {

src/assets/tabler/alert-triangle.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg class="icon icon-tabler icon-tabler-alert-triangle" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none" stroke="none"/><path d="m12.012 9.6967v2.3019m0 4.6037v0.01151" stroke-width="2.3019"/><path d="m3.9557 21.206h16.113a2.3019 2.3019 0 0 0 2.1177-3.1651l-8.1716-14.099a2.3019 2.3019 0 0 0-4.0283 0l-8.1716 14.099a2.3019 2.3019 0 0 0 2.0141 3.1651" stroke-width="2.3019"/></svg>

src/components/Post.vue

@@ -68,6 +68,7 @@
       <post-attachment
         v-for="attachment in post.media_attachments"
         :attachment="attachment"
+        :is-sensitive="post.sensitive"
         :key="attachment.id"
       ></post-attachment>
     </div>
@@ -91,6 +92,7 @@
         <post-attachment
           v-for="attachment in linkedPost.media_attachments"
           :attachment="attachment"
+          :is-sensitive="linkedPost.sensitive"
           :key="attachment.id"
         ></post-attachment>
       </div>

src/components/PostAttachment.vue

@@ -1,5 +1,15 @@
 <template>
-  <img v-if="attachment.type === 'image'" :src="attachment.url">
+  <div
+    v-if="attachment.type === 'image'"
+    class="image"
+    :class="{ sensitive: isSensitive }"
+    @click="toggleFilter()"
+  >
+    <button v-if="isSensitive" class="content-warning">
+      Sensitive content
+    </button>
+    <img :src="attachment.url">
+  </div>
   <video v-else-if="attachment.type === 'video'" :src="attachment.url" controls></video>
   <audio v-else-if="attachment.type === 'audio'" :src="attachment.url" controls></audio>
   <div v-else>
@@ -8,15 +18,28 @@
 </template>
 
 <script setup lang="ts">
+import { ref } from "vue"
+
 import { Attachment } from "@/api/posts"
 
 /* eslint-disable-next-line no-undef */
-defineProps<{
+const props = defineProps<{
   attachment: Attachment,
+  isSensitive: boolean,
 }>()
+
+const isSensitive = ref(props.isSensitive)
+
+function toggleFilter() {
+  if (props.isSensitive) {
+    // Toggle works only if post is marked as sensitive
+    isSensitive.value = !isSensitive.value
+  }
+}
 </script>
 
 <style scoped lang="scss">
+@import "../styles/layout";
 @import "../styles/mixins";
 
 a {
@@ -25,9 +48,29 @@ a {
   word-wrap: break-word;
 }
 
-img {
+.image {
+  overflow: hidden;
+  position: relative;
+
+  .content-warning {
+    background-color: var(--block-background-color);
+    border-radius: $btn-border-radius;
+    left: 50%;
+    padding: $input-padding;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1;
+  }
+
+  > img {
     display: block;
     width: 100%;
+  }
+
+  &.sensitive > img {
+    filter: blur(50px);
+  }
 }
 
 audio,

src/components/PostEditor.vue

@@ -88,6 +88,15 @@
             </li>
           </menu>
         </div>
+        <button
+          type="button"
+          class="icon"
+          :class="{ highlighted: isSensitive }"
+          title="Toggle content warning"
+          @click="isSensitive = !isSensitive"
+        >
+          <img src="@/assets/tabler/alert-triangle.svg">
+        </button>
         <div class="toolbar-space"></div>
         <button
           v-if="canPreview()"
@@ -171,6 +180,7 @@ const attachmentUploadInputRef = $ref<HTMLInputElement | null>(null)
 let content = $ref(loadLocalDraft())
 let attachments = $ref<Attachment[]>([])
 let visibility = $ref(Visibility.Public)
+let isSensitive = $ref(false)
 
 let visibilityMenuVisible = $ref(false)
 let preview = $ref<Post | null>(null)
@@ -328,8 +338,9 @@ function canPublish(): boolean {
 async function publish() {
   const postData = {
     content: content,
-    in_reply_to_id: props.inReplyTo ? props.inReplyTo.id : null,
+    inReplyToId: props.inReplyTo ? props.inReplyTo.id : null,
     visibility: visibility,
+    isSensitive: isSensitive,
     mentions: [],
     attachments: attachments,
   }
@@ -354,6 +365,7 @@ async function publish() {
   isLoading = false
   removeLocalDraft()
   content = ""
+  isSensitive = false
   attachments = []
   preview = null
   if (postFormContentRef) {