From 9e21d94dd99bfdbeefa24d35588aac84e552fb07 Mon Sep 17 00:00:00 2001
From: Jascha <jaschadub@gmail.com>
Date: Sat, 23 May 2026 13:59:38 -0700
Subject: [PATCH] fix(snd): replace legacy blue cloud on expired-link screen
 with Vault hero
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

app/ui/notFound.js (rendered when a share link has expired or 404s)
was still using assets/notFound.svg -- a Mozilla Firefox Send-era
illustration: saturated blue, soft cloud-with-strike-through glyph,
decorative. Same off-brand carryover that downloadCompleted.js had
before PR #18 fixed it.

Replacement uses the existing Vault visual vocabulary, mirroring the
download-complete hero from PR #18 so the encrypt/decrypt/expired
moments visually rhyme:

- Three nested squares (concentric, hairline outer pair).
- Inner square in `--snd-mute` (not danger -- expired is not a
  destructive condition, it's an absent one).
- Diagonal slash from corner to corner of the inner square, in mute.
- EXPIRED tag eyebrow above the headline.
- A `>`-prefixed mono caption -- "share no longer available · file
  removed from server" -- echoing the Vault comment-line motif.

assets/notFound.svg is no longer referenced. Leaving the file in
place for now; webpack still emits it but no template loads it.

The `assets` import is also dropped since it's no longer used.
---
 app/ui/notFound.js | 35 +++++++++++++++++++----------------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/app/ui/notFound.js b/app/ui/notFound.js
index b44bd731..a3108666 100644
--- a/app/ui/notFound.js
+++ b/app/ui/notFound.js
@@ -1,5 +1,4 @@
 const html = require('choo/html');
-const assets = require('../../common/assets');
 const modal = require('./modal');
 
 module.exports = function(state, emit) {
@@ -7,25 +6,29 @@ module.exports = function(state, emit) {
   return html`
     <main class="snd-main snd-main--centered">
       ${state.modal && modal(state, emit)}
-      <section class="snd-recipient">
-        <h1 class="snd-display text-center my-2">
+      <section class="snd-complete">
+        <div class="snd-complete-hero" aria-hidden="true">
+          <svg viewBox="0 0 100 100" width="96" height="96">
+            <rect x="1.5" y="1.5" width="97" height="97" fill="none" stroke="var(--snd-line)" stroke-width="1"/>
+            <rect x="18" y="18" width="64" height="64" fill="none" stroke="var(--snd-line)" stroke-width="1"/>
+            <rect x="35" y="35" width="30" height="30" fill="none" stroke="var(--snd-mute)" stroke-width="1.5"/>
+            <line x1="35" y1="65" x2="65" y2="35" stroke="var(--snd-mute)" stroke-width="2" stroke-linecap="square"/>
+          </svg>
+        </div>
+        <p class="snd-tag snd-text-dim">EXPIRED</p>
+        <h1 class="snd-display text-center">
           ${state.translate('expiredTitle')}
         </h1>
-        <svg class="text-primary my-12">
-          <use xlink:href="${assets.get('notFound.svg')}#svg124" />
-        </svg>
-        <p
-          class="snd-body snd-text-mute max-w-md text-center leading-normal ${state
-            .user.loggedIn
-            ? 'hidden'
-            : ''}"
-        >
+        <p class="snd-caption snd-text-dim">
+          > share no longer available · file removed from server
+        </p>
+        <p class="snd-body snd-text-mute text-center ${state.user.loggedIn ? 'hidden' : ''}">
           ${state.translate('trySendDescription')}
         </p>
-        <p class="my-5">
-          <a href="/" class="snd-btn snd-btn--primary flex items-center" role="button"
-            >${state.translate(btnText)}</a
-          >
+        <p>
+          <a href="/" class="snd-btn snd-btn--primary" role="button">
+            ${state.translate(btnText)}
+          </a>
         </p>
       </section>
     </main>