From 6f4dfb90d3861331d2c524c9bfe5a2dea94ae2c9 Mon Sep 17 00:00:00 2001
From: Juliet <salut@juliet.paris>
Date: Tue, 19 May 2026 19:34:25 +0200
Subject: [PATCH] nsfw flag

---
 web/src/pages/Upload.tsx | 51 ++++++++++++++++++++++++++--------------
 web/src/pages/View.tsx   | 51 ++++++++++++++++++++++++++++++++++------
 2 files changed, 78 insertions(+), 24 deletions(-)

diff --git a/web/src/pages/Upload.tsx b/web/src/pages/Upload.tsx
index d561485..2044aa6 100644
--- a/web/src/pages/Upload.tsx
+++ b/web/src/pages/Upload.tsx
@@ -52,6 +52,26 @@ function formatTime(s: number) {
   return `${m}:${r.toString().padStart(2, "0")}`;
 }
 
+function CheckBox(props: { checked: boolean }) {
+  return (
+    <div
+      class={`flex size-4 items-center justify-center rounded border transition-colors ${props.checked ? "bg-accent border-accent" : "bg-surface border-border"}`}
+    >
+      <Show when={props.checked}>
+        <svg class="text-bg h-3 w-3" viewBox="0 0 12 12" fill="none">
+          <path
+            d="M2 6l3 3 5-5"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </Show>
+    </div>
+  );
+}
+
 export default function Upload() {
   const [files, setFiles] = createSignal<File[]>([]);
   const [status, setStatus] = createSignal<Status>("idle");
@@ -60,6 +80,7 @@ export default function Upload() {
   const [result, setResult] = createSignal<UploadResult | null>(null);
   const [dragging, setDragging] = createSignal(false);
   const [burn, setBurn] = createSignal(false);
+  const [sensitive, setSensitive] = createSignal(false);
   const [copied, setCopied] = createSignal(false);
   const [maxFileSize, setMaxFileSize] = createSignal(0);
   const [maxTtl, setMaxTtl] = createSignal("");
@@ -437,7 +458,7 @@ export default function Upload() {
       setResult({
         fileCount: selectedFiles.length,
         totalSize: totalSize(),
-        url: `${location.origin}/${res.id}#${encoded}`,
+        url: `${location.origin}/${res.id}#${encoded}${sensitive() ? "&nsfw=true" : ""}`,
       });
       removeFile();
     } catch (e: any) {
@@ -650,7 +671,7 @@ export default function Upload() {
                       </span>
                     </span>
                   </Show>
-                  <div class="flex items-center gap-4 text-xs sm:text-sm">
+                  <div class="flex flex-wrap items-center justify-center gap-x-4 gap-y-2 text-xs sm:text-sm">
                     <input
                       type="text"
                       value={expiryValue()}
@@ -666,23 +687,19 @@ export default function Upload() {
                         setBurn((b) => !b);
                       }}
                     >
-                      <div
-                        class={`flex size-4 items-center justify-center rounded border transition-colors ${burn() ? "bg-accent border-accent" : "bg-surface border-border"}`}
-                      >
-                        <Show when={burn()}>
-                          <svg class="text-bg h-3 w-3" viewBox="0 0 12 12" fill="none">
-                            <path
-                              d="M2 6l3 3 5-5"
-                              stroke="currentColor"
-                              stroke-width="1.5"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                            />
-                          </svg>
-                        </Show>
-                      </div>
+                      <CheckBox checked={burn()} />
                       burn
                     </button>
+                    <button
+                      class={`flex items-center gap-1.5 transition-colors select-none ${sensitive() ? "text-accent" : "text-muted hover:text-accent-hover"}`}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setSensitive((s) => !s);
+                      }}
+                    >
+                      <CheckBox checked={sensitive()} />
+                      nsfw
+                    </button>
                   </div>
                 </div>
                 <button
diff --git a/web/src/pages/View.tsx b/web/src/pages/View.tsx
index 95d1f22..678e133 100644
--- a/web/src/pages/View.tsx
+++ b/web/src/pages/View.tsx
@@ -17,6 +17,8 @@ import {
 
 const ghostClass =
   "text-muted hover:text-accent hover:border-accent border border-border bg-transparent rounded px-2 py-1 text-sm transition-colors";
+const mutedBtnClass =
+  "bg-transparent hover:bg-muted/10 active:scale-95 border-border text-muted rounded-md border px-4 py-1.5 font-medium transition";
 
 const MODAL_ANIMATION_MS = 400;
 
@@ -62,7 +64,18 @@ function isAudioOnlyWebm(url: string): Promise<boolean> {
   });
 }
 
-type Stage = "loading" | "meta" | "decrypting" | "content" | "error";
+function parseHash(hash: string) {
+  const raw = hash.startsWith("#") ? hash.slice(1) : hash;
+  const params = new URLSearchParams(raw);
+  const keyEncoded = params.get("key") ?? raw.split("&")[0] ?? "";
+
+  return {
+    keyEncoded,
+    sensitive: params.get("nsfw") === "true",
+  };
+}
+
+type Stage = "loading" | "meta" | "decrypting" | "sensitive" | "content" | "error";
 type ContentType = "text" | "image" | "video" | "audio" | "binary";
 type ViewItem = {
   name: string;
@@ -76,6 +89,7 @@ type ViewItem = {
 export default function View() {
   const parts = location.pathname.split("/").filter(Boolean);
   const id = parts[0] === "p" ? parts[1] : parts[0];
+  const link = parseHash(window.location.hash);
 
   const [stage, setStage] = createSignal<Stage>("loading");
   const [error, setError] = createSignal("");
@@ -96,6 +110,9 @@ export default function View() {
     const index = selectedIndex();
     return index === null ? null : (items()[index] ?? null);
   });
+  const sensitiveDetail = createMemo(() => {
+    return `${formatBytes(size())} · ${burnAfterRead() ? "burns after viewing" : "marked sensitive"}`;
+  });
 
   let objectUrls: string[] = [];
   let previewCloseTimer: number | null = null;
@@ -121,16 +138,14 @@ export default function View() {
   });
 
   onMount(async () => {
-    const keyEncoded = window.location.hash.slice(1);
-
-    if (!id || !keyEncoded) {
+    if (!id || !link.keyEncoded) {
       setError("Invalid URL.");
       setStage("error");
       return;
     }
 
     try {
-      await importKey(keyEncoded);
+      await importKey(link.keyEncoded);
     } catch {
       setError("Invalid key.");
       setStage("error");
@@ -149,7 +164,9 @@ export default function View() {
     setExpiresAt(info.expiresAt);
     setBurnAfterRead(info.burnAfterRead);
 
-    if (info.burnAfterRead) {
+    if (link.sensitive) {
+      setStage("sensitive");
+    } else if (info.burnAfterRead) {
       setStage("meta");
     } else {
       handleView();
@@ -196,7 +213,7 @@ export default function View() {
           {
             type: "decrypt",
             ciphertext: buf,
-            keyEncoded: location.hash.slice(1),
+            keyEncoded: link.keyEncoded,
           },
           [buf],
         );
@@ -479,6 +496,26 @@ export default function View() {
         </div>
       </Show>
 
+      <Show when={stage() === "sensitive"}>
+        <div class="flex flex-col items-center gap-3 text-center" style={fadeIn}>
+          <span
+            class="text-danger font-medium"
+            style={{ "font-size": "clamp(1.5rem, 5vw, 2.5rem)" }}
+          >
+            nsfw
+          </span>
+          <span class="text-muted text-xs">{sensitiveDetail()}</span>
+          <div class="flex items-center gap-3">
+            <button class={btnClass} style={btnStyle} onClick={handleView}>
+              view
+            </button>
+            <a href="/" class={mutedBtnClass} style={btnStyle}>
+              leave
+            </a>
+          </div>
+        </div>
+      </Show>
+
       <Show when={stage() === "content"}>
         <div class="mx-auto flex w-full flex-col gap-4" style={fadeIn}>
           <Show when={items().length > 1}>
-- 
2.51.2