From 59eaaec9033b5b0524fd4208688606e35393abf6 Mon Sep 17 00:00:00 2001
From: reya <123083837+reyamir@users.noreply.github.com>
Date: Fri, 21 Jun 2024 08:57:49 +0700
Subject: [PATCH] feat: support content warning

---
 apps/desktop2/src/components/note/content.tsx | 41 +++++++++++++++----
 packages/system/src/event.ts                  | 25 ++++++++---
 2 files changed, 54 insertions(+), 12 deletions(-)

diff --git a/apps/desktop2/src/components/note/content.tsx b/apps/desktop2/src/components/note/content.tsx
index e0095ee0..f2d647b4 100644
--- a/apps/desktop2/src/components/note/content.tsx
+++ b/apps/desktop2/src/components/note/content.tsx
@@ -1,7 +1,7 @@
 import { cn } from "@lume/utils";
 import { useRouteContext } from "@tanstack/react-router";
 import { nanoid } from "nanoid";
-import { type ReactNode, useMemo } from "react";
+import { type ReactNode, useMemo, useState } from "react";
 import reactStringReplace from "react-string-replace";
 import { Hashtag } from "./mentions/hashtag";
 import { MentionNote } from "./mentions/note";
@@ -23,6 +23,8 @@ export function NoteContent({
 }) {
 	const { settings } = useRouteContext({ strict: false });
 	const event = useNoteContext();
+
+	const warning = useMemo(() => event.warning, [event]);
 	const content = useMemo(() => {
 		try {
 			// Get parsed meta
@@ -91,8 +93,29 @@ export function NoteContent({
 		}
 	}, [event.content]);
 
+	const [blurred, setBlurred] = useState(() => warning?.length > 0);
+
 	return (
-		<div className="flex flex-col gap-2">
+		<div className="relative flex flex-col gap-2">
+			{blurred ? (
+				<div className="absolute inset-0 z-10 flex items-center justify-center w-full h-full bg-black/80 backdrop-blur-xl">
+					<div className="flex flex-col items-center justify-center gap-2 text-center">
+						<p className="text-sm text-white/60">
+							The content is hidden because the author
+							<br />
+							marked it with a warning for a reason:
+						</p>
+						<p className="text-sm font-medium text-white">{warning}</p>
+						<button
+							type="button"
+							onClick={() => setBlurred(false)}
+							className="inline-flex items-center justify-center px-2 mt-4 text-sm font-medium border rounded-lg text-white/70 h-9 w-max bg-white/20 hover:bg-white/30 border-white/5"
+						>
+							View anyway
+						</button>
+					</div>
+				</div>
+			) : null}
 			<div
 				className={cn(
 					"select-text text-pretty content-break overflow-hidden",
@@ -104,11 +127,15 @@ export function NoteContent({
 			>
 				{content}
 			</div>
-			{settings.display_media && event.meta?.images.length ? (
-				<Images urls={event.meta.images} />
-			) : null}
-			{settings.display_media && event.meta?.videos.length ? (
-				<Videos urls={event.meta.videos} />
+			{settings.display_media ? (
+				<>
+					{event.meta?.images.length ? (
+						<Images urls={event.meta.images} />
+					) : null}
+					{event.meta?.videos.length ? (
+						<Videos urls={event.meta.videos} />
+					) : null}
+				</>
 			) : null}
 		</div>
 	);
diff --git a/packages/system/src/event.ts b/packages/system/src/event.ts
index 3fee7b67..4f9866ad 100644
--- a/packages/system/src/event.ts
+++ b/packages/system/src/event.ts
@@ -25,11 +25,6 @@ export class LumeEvent {
 		Object.assign(this, event);
 	}
 
-	get isWarning() {
-		const tag = this.tags.find((tag) => tag[0] === "content-warning");
-		return tag?.[1]; // return: reason;
-	}
-
 	get isQuote() {
 		return this.tags.filter((tag) => tag[0] === "q").length > 0;
 	}
@@ -95,6 +90,26 @@ export class LumeEvent {
 		return { id, relayHint };
 	}
 
+	get warning() {
+		const warningTag = this.tags.filter(
+			(tag) => tag[0] === "content-warning",
+		)?.[0];
+
+		if (warningTag) {
+			return warningTag[1];
+		} else {
+			const nsfwTag = this.tags.filter(
+				(tag) => tag[0] === "t" && tag[1] === "NSFW",
+			)?.[0];
+
+			if (nsfwTag) {
+				return "NSFW";
+			} else {
+				return null;
+			}
+		}
+	}
+
 	public async getAllReplies() {
 		const query = await commands.getReplies(this.id);