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 ( -
+
+ {blurred ? ( +
+
+

+ The content is hidden because the author +
+ marked it with a warning for a reason: +

+

{warning}

+ +
+
+ ) : null}
{content}
- {settings.display_media && event.meta?.images.length ? ( - - ) : null} - {settings.display_media && event.meta?.videos.length ? ( - + {settings.display_media ? ( + <> + {event.meta?.images.length ? ( + + ) : null} + {event.meta?.videos.length ? ( + + ) : null} + ) : null}
); 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);