feat(ui): add rusted appearance easter egg

ui/src/App.tsx

@@ -19,6 +19,7 @@ import {
 import * as api from "./lib/api";
 import { settingsOpen } from "./stores/settings";
 import "./stores/theme";
+import "./stores/rusted";
 
 export default function App() {
   function handleKeydown(e: KeyboardEvent) {

ui/src/components/Settings.tsx

@@ -1,5 +1,6 @@
 import { Show, For } from "solid-js";
 import { theme, setTheme } from "../stores/theme";
+import { rusted, setRusted } from "../stores/rusted";
 import {
   settingsOpen,
   setSettingsOpen,
@@ -158,6 +159,26 @@ function AppearanceTab() {
           System
         </button>
       </div>
+
+      <label class="text-sm font-medium text-zinc-700 dark:text-zinc-300 mt-6 mb-2 block">
+        Easter egg
+      </label>
+      <button
+        onClick={() => setRusted(!rusted())}
+        class={`w-full rounded-lg border px-3 py-2.5 text-xs font-medium transition cursor-pointer flex items-center justify-between gap-2 ${
+          rusted()
+            ? "border-orange-500 bg-orange-500/10 text-orange-500"
+            : "border-zinc-200 dark:border-zinc-700 text-zinc-500 dark:text-zinc-400 hover:border-zinc-300 dark:hover:border-zinc-600"
+        }`}
+      >
+        <span>Rusted</span>
+        <span class="text-[10px] uppercase tracking-wide opacity-70">
+          {rusted() ? "On" : "Off"}
+        </span>
+      </button>
+      <p class="mt-2 text-xs text-zinc-400 dark:text-zinc-500">
+        Let the app oxidize.
+      </p>
     </div>
   );
 }

ui/src/index.css

@@ -83,3 +83,74 @@
 :is(.dark) .btn-destructive:hover {
   background-color: color-mix(in srgb, var(--color-red-950) 60%, transparent);
 }
+
+.rusted {
+  --color-orange-50: #faf2ec;
+  --color-orange-100: #f1ded0;
+  --color-orange-200: #e2bca0;
+  --color-orange-300: #cd9268;
+  --color-orange-400: #bd7647;
+  --color-orange-500: #b35a23;
+  --color-orange-600: #97481b;
+  --color-orange-700: #793816;
+  --color-orange-800: #5e2c14;
+  --color-orange-900: #4a2311;
+  --color-orange-950: #2c1308;
+
+  --color-zinc-50: #faf6f2;
+  --color-zinc-100: #f3ede6;
+  --color-zinc-200: #e6dccf;
+  --color-zinc-300: #d2c5b4;
+  --color-zinc-400: #a89784;
+  --color-zinc-500: #7a6c5b;
+  --color-zinc-600: #5a4d40;
+  --color-zinc-700: #443931;
+  --color-zinc-800: #2b241d;
+  --color-zinc-900: #1a1510;
+  --color-zinc-950: #0d0a07;
+}
+
+.rusted .mesh-glow {
+  background:
+    radial-gradient(
+      ellipse 50% 100% at 0% 0%,
+      rgba(151, 72, 27, 0.22) 0%,
+      transparent 100%
+    ),
+    radial-gradient(
+      ellipse 60% 90% at 100% 100%,
+      rgba(121, 56, 22, 0.16) 0%,
+      transparent 100%
+    );
+  height: 100%;
+}
+
+.rusted::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: 40;
+  pointer-events: none;
+  opacity: 0.35;
+  background-image:
+    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='220'%20height='220'%3E%3Cfilter%20id='r'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.6'%20numOctaves='2'%20seed='11'%20result='n'/%3E%3CfeColorMatrix%20in='n'%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%208%20-4.2'%20result='m'/%3E%3CfeFlood%20flood-color='%239c4a1c'%20result='c'/%3E%3CfeComposite%20in='c'%20in2='m'%20operator='in'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23r)'/%3E%3C/svg%3E"),
+    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%3E%3Cfilter%20id='r'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.95'%20numOctaves='2'%20seed='4'%20result='n'/%3E%3CfeColorMatrix%20in='n'%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%209%20-5'%20result='m'/%3E%3CfeFlood%20flood-color='%235a2a10'%20result='c'/%3E%3CfeComposite%20in='c'%20in2='m'%20operator='in'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23r)'/%3E%3C/svg%3E");
+  background-size:
+    220px 220px,
+    160px 160px;
+  -webkit-mask-image: radial-gradient(
+    ellipse 80% 80% at 50% 45%,
+    transparent 40%,
+    black 100%
+  );
+  mask-image: radial-gradient(
+    ellipse 80% 80% at 50% 45%,
+    transparent 40%,
+    black 100%
+  );
+}
+
+.rusted iframe {
+  position: relative;
+  z-index: 45;
+}

ui/src/stores/rusted.ts

@@ -0,0 +1,27 @@
+import { createSignal } from "solid-js";
+
+const STORAGE_KEY = "rustmail-rusted";
+
+function getInitialRusted(): boolean {
+  return localStorage.getItem(STORAGE_KEY) === "true";
+}
+
+const [rusted, setRustedSignal] = createSignal<boolean>(getInitialRusted());
+
+function applyRusted(on: boolean) {
+  const root = document.documentElement;
+  root.classList.add("theme-switching");
+  root.classList.toggle("rusted", on);
+  void root.offsetHeight;
+  root.classList.remove("theme-switching");
+}
+
+applyRusted(rusted());
+
+function setRusted(on: boolean) {
+  setRustedSignal(on);
+  localStorage.setItem(STORAGE_KEY, String(on));
+  applyRusted(on);
+}
+
+export { rusted, setRusted };