feat(frontend): add noscript fallback message

Amolith created

Users without JavaScript enabled now see a helpful message explaining
that Sift requires JavaScript to function, with an explanation about
WebSocket requirements.

Implements: 6a9a677
Assisted-by: Claude Sonnet 4.5 via Crush

Change summary

static/index.html |  7 +++++++
static/style.css  | 27 +++++++++++++++++++++++++++
2 files changed, 34 insertions(+)

Detailed changes

static/index.html 🔗

@@ -14,6 +14,13 @@ SPDX-License-Identifier: AGPL-3.0-or-later
   <link rel="stylesheet" href="/style.css">
 </head>
 <body>
+  <noscript>
+    <div class="noscript-message">
+      <h1>JavaScript Required</h1>
+      <p>Sift requires JavaScript to function. Please enable JavaScript in your browser settings and reload this page.</p>
+      <p>Sift is a collaborative list application that uses WebSockets for real-time updates, which requires JavaScript to work.</p>
+    </div>
+  </noscript>
   <div id="app">
     <div id="start-screen">
       <h1>Sift</h1>

static/style.css 🔗

@@ -33,6 +33,33 @@ body {
   display: none !important;
 }
 
+/* Noscript message */
+.noscript-message {
+  max-width: 600px;
+  margin: 4rem auto;
+  padding: 2rem;
+  text-align: center;
+  background: var(--surface-2);
+  border: 2px solid var(--brand-color);
+  border-radius: 8px;
+}
+
+.noscript-message h1 {
+  color: var(--avocado-11);
+  margin-bottom: 1.5rem;
+}
+
+.noscript-message p {
+  margin-bottom: 1rem;
+  line-height: 1.7;
+}
+
+.noscript-message p:last-child {
+  margin-bottom: 0;
+  color: var(--text-2);
+  font-size: 0.9rem;
+}
+
 /* Start screen */
 #start-screen {
   text-align: center;