feat(webmail): the new interface - logo, dark and light themes, command menu

A mark (a lambda on an ultramarine tile with the flap of an envelope), the
favicon, home-screen icons and an install manifest. Every colour is a variable
defined once per theme, and the Tailwind scales the screens already use read
them, so dark (the default) and light are a change of values and not of
classes. Geist is served by the app itself. Ctrl+K opens a command menu for
folders, actions, accounts and appearance, and typing something that matches no
command searches the mail; c writes a message and / goes to the search field.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

services/webmail/src/app/(user)/user/layout.tsx

@@ -20,6 +20,7 @@ import {
   ShieldAlert,
   SlidersHorizontal,
   Menu,
+  Search,
   X,
 } from "lucide-react";
 import { useTranslations } from "../../../i18n/provider";
@@ -28,6 +29,8 @@ import { useAccount, isAdminRole } from "../../../lib/useAccount";
 import { useFolders } from "../../../lib/useFolders";
 import { folderBadge, customFolders } from "../../../lib/mailCounts";
 import { AccountSwitcher } from "../../../components/AccountSwitcher";
+import { Logo } from "../../../components/Logo";
+import { CommandPalette } from "../../../components/CommandPalette";
 
 export default function UserWebmailLayout({ children }: { children: React.ReactNode }) {
   const t = useTranslations();
@@ -87,12 +90,10 @@ export default function UserWebmailLayout({ children }: { children: React.ReactN
       {/* The brand mark. One mark for both surfaces - the line underneath is
           the only thing that says which one you are in. */}
       <div className="flex items-center gap-2.5 px-2 py-1">
-        <div className="flex h-8 w-8 flex-none items-center justify-center rounded-[10px] bg-dark-card text-[17px] leading-none text-indigo-500 shadow-[inset_0_0_0_1px_#9184d9]">
-          {"\u03bb"}
-        </div>
+        <Logo size={32} className="flex-none" />
         <div className="min-w-0">
           <div className="text-[15px] font-medium leading-tight">LambdaMail</div>
-          <div className="text-[10.5px] uppercase tracking-[0.08em] text-indigo-500">
+          <div className="text-[11.5px] text-slate-400">
             {t("common.userPortal")}
           </div>
         </div>
@@ -101,12 +102,24 @@ export default function UserWebmailLayout({ children }: { children: React.ReactN
       <Link
         href="/user/compose"
         onClick={() => setMobileOpen(false)}
-        className="flex w-full items-center justify-center gap-2 rounded-[10px] border border-indigo-500 px-3 py-2.5 text-sm font-medium text-indigo-500 transition-colors hover:bg-indigo-500/[0.12] active:bg-indigo-500/[0.22]"
+        className="flex w-full items-center justify-center gap-2 rounded-xl bg-fill px-3 py-2.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-fill-hover active:brightness-95"
       >
         <PenSquare className="h-4 w-4 flex-none" />
         <span className="min-w-0">{t("mail.compose")}</span>
       </Link>
 
+      {/* The way into everything that is not on screen. Quiet on purpose: the
+          sidebar keeps to folders, and this is where the rest lives. */}
+      <button
+        type="button"
+        onClick={() => window.dispatchEvent(new KeyboardEvent("keydown", { key: "k", ctrlKey: true }))}
+        className="-mt-1 flex w-full items-center gap-2 rounded-xl px-3 py-2 text-left text-[13px] text-slate-400 shadow-edge transition-colors hover:bg-ink/[0.05] hover:text-slate-200"
+      >
+        <Search className="h-4 w-4 flex-none" aria-hidden />
+        <span className="min-w-0 flex-1 truncate">{t("palette.open")}</span>
+        <kbd className="rounded-md px-1.5 py-0.5 text-[11px] shadow-edge">Ctrl K</kbd>
+      </button>
+
       {/* Folder navigation. Every row is a mark, an icon, a label that may wrap,
           and its numbers - nothing is sized by the length of the label, which
           is what clipped the Portuguese and Spanish names before. */}
@@ -192,7 +205,7 @@ export default function UserWebmailLayout({ children }: { children: React.ReactN
                   if (!window.confirm(t("folders.deleteConfirm", { name: folder.name }))) return;
                   void manageFolder({ action: "delete", name: folder.name });
                 }}
-                className="absolute right-1.5 top-1/2 hidden h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md text-slate-500 transition-colors hover:bg-white/[0.09] hover:text-slate-200 focus:flex group-hover/folder:flex"
+                className="absolute right-1.5 top-1/2 hidden h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md text-slate-500 transition-colors hover:bg-ink/[0.09] hover:text-slate-200 focus:flex group-hover/folder:flex"
               >
                 <Trash2 className="h-3 w-3" />
               </button>
@@ -223,7 +236,7 @@ export default function UserWebmailLayout({ children }: { children: React.ReactN
             type="submit"
             aria-label={t("folders.new")}
             title={t("folders.new")}
-            className="flex h-7 w-7 flex-none items-center justify-center rounded-lg text-slate-400 transition-colors hover:bg-white/[0.09] hover:text-slate-100"
+            className="flex h-7 w-7 flex-none items-center justify-center rounded-lg text-slate-400 transition-colors hover:bg-ink/[0.09] hover:text-slate-100"
           >
             <Plus className="h-4 w-4" />
           </button>
@@ -266,7 +279,7 @@ export default function UserWebmailLayout({ children }: { children: React.ReactN
               href="/admin/step-up"
               title={t("admin.openAdmin")}
               aria-label={t("admin.openAdmin")}
-              className="flex flex-1 items-center justify-center gap-1.5 rounded-[8px] px-2 py-1.5 text-[12px] leading-snug text-slate-400 transition-colors hover:bg-white/[0.05] hover:text-slate-100"
+              className="flex flex-1 items-center justify-center gap-1.5 rounded-[8px] px-2 py-1.5 text-[12px] leading-snug text-slate-400 transition-colors hover:bg-ink/[0.05] hover:text-slate-100"
             >
               <ShieldCheck className="h-3.5 w-3.5 flex-none" />
               <span className="min-w-0 truncate">{t("admin.openAdminShort")}</span>
@@ -283,7 +296,7 @@ export default function UserWebmailLayout({ children }: { children: React.ReactN
             onClick={handleLogout}
             title={t("settings.signOut")}
             aria-label={t("settings.signOut")}
-            className="flex h-8 w-8 flex-none items-center justify-center rounded-[9px] border border-white/[0.14] text-slate-300 transition-colors hover:bg-white/[0.07] hover:text-rose-400"
+            className="flex h-8 w-8 flex-none items-center justify-center rounded-[9px] border border-ink/[0.14] text-slate-300 transition-colors hover:bg-ink/[0.07] hover:text-rose-400"
           >
             <LogOut className="h-[15px] w-[15px]" />
           </button>
@@ -294,26 +307,25 @@ export default function UserWebmailLayout({ children }: { children: React.ReactN
 
   return (
     <div className="flex h-screen overflow-hidden bg-dark-bg text-slate-100">
+      <CommandPalette isAdmin={isAdminRole(account?.role)} />
       {/* Mobile Top Header */}
-      <div className="fixed left-0 top-0 z-20 flex w-full items-center justify-between bg-dark-rail px-4 py-3 shadow-[inset_0_-1px_0_0_rgba(233,233,237,0.09)] md:hidden">
+      <div className="fixed left-0 top-0 z-20 flex w-full items-center justify-between bg-dark-rail px-4 py-3 shadow-[inset_0_-1px_0_0_rgb(var(--ink)/0.09)] md:hidden">
         <div className="flex items-center gap-2.5">
-          <div className="flex h-8 w-8 items-center justify-center rounded-[10px] bg-dark-card text-[17px] leading-none text-indigo-500 shadow-[inset_0_0_0_1px_#9184d9]">
-            {"\u03bb"}
-          </div>
+          <Logo size={32} className="flex-none" />
           <span className="font-medium text-slate-100">LambdaMail</span>
         </div>
         <button
           onClick={() => setMobileOpen(!mobileOpen)}
           aria-label={t("ui.toggleMenu")}
           aria-expanded={mobileOpen}
-          className="flex h-9 w-9 items-center justify-center rounded-[10px] text-slate-300 transition-colors hover:bg-white/[0.07] hover:text-slate-100"
+          className="flex h-9 w-9 items-center justify-center rounded-[10px] text-slate-300 transition-colors hover:bg-ink/[0.07] hover:text-slate-100"
         >
           {mobileOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
         </button>
       </div>
 
       {/* Desktop rail */}
-      <aside className="hidden w-[244px] flex-none flex-col bg-dark-rail xl:w-[268px] shadow-[inset_-1px_0_0_0_rgba(233,233,237,0.09)] md:flex">
+      <aside className="hidden w-[244px] flex-none flex-col bg-dark-rail xl:w-[268px] shadow-[inset_-1px_0_0_0_rgb(var(--ink)/0.09)] md:flex">
         {SidebarContent}
       </aside>
 
@@ -325,7 +337,7 @@ export default function UserWebmailLayout({ children }: { children: React.ReactN
             animate={{ x: 0 }}
             exit={{ x: "-100%" }}
             transition={{ type: "spring", damping: 25, stiffness: 200 }}
-            className="fixed inset-y-0 left-0 z-30 w-[280px] overflow-y-auto bg-dark-rail pt-14 shadow-[inset_-1px_0_0_0_rgba(233,233,237,0.09)] md:hidden"
+            className="fixed inset-y-0 left-0 z-30 w-[280px] overflow-y-auto bg-dark-rail pt-14 shadow-[inset_-1px_0_0_0_rgb(var(--ink)/0.09)] md:hidden"
           >
             {SidebarContent}
           </motion.aside>

services/webmail/src/app/(user)/user/mail/[folder]/page.tsx

@@ -48,6 +48,7 @@ import {
 import { useAccount } from "../../../../../lib/useAccount";
 import { MessageReader } from "../../../../../components/MessageReader";
 import { ThreadReader } from "../../../../../components/ThreadReader";
+import { SEARCH_EVENT } from "../../../../../components/CommandPalette";
 import { Avatar } from "../../../../../components/Avatar";
 
 interface MessageSummary {
@@ -259,6 +260,13 @@ export default function MailFolderPage({ params }: { params: Promise<{ folder: s
     return () => clearTimeout(handle);
   }, [searchQuery, loadMessages, conversations.ready]);
 
+  // The command menu can ask this list to search.
+  useEffect(() => {
+    const onSearch = (event: Event) => setSearchQuery(String((event as CustomEvent).detail ?? ""));
+    window.addEventListener(SEARCH_EVENT, onSearch);
+    return () => window.removeEventListener(SEARCH_EVENT, onSearch);
+  }, []);
+
   // Changing between the two lists closes whatever was open in the other.
   useEffect(() => {
     setSelected(null);
@@ -542,6 +550,7 @@ export default function MailFolderPage({ params }: { params: Promise<{ folder: s
               type="search"
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
+              id="mail-search"
               placeholder={t("mail.searchPlaceholder")}
               aria-label={t("common.search")}
               className="min-h-[38px] w-full rounded-xl bg-dark-panel py-2 pl-[34px] pr-3 text-[13px] text-slate-100 placeholder-slate-500 shadow-edge transition-shadow focus:outline-none focus-visible:shadow-edge-accent"
@@ -605,7 +614,7 @@ export default function MailFolderPage({ params }: { params: Promise<{ folder: s
                     className={
                       msg.seen
                         ? "bg-dark-card text-slate-400"
-                        : "bg-indigo-900 text-indigo-300 shadow-[inset_0_0_0_1px_#5d5294]"
+                        : "bg-indigo-900 text-indigo-300 shadow-[inset_0_0_0_1px_rgb(var(--a-700))]"
                     }
                   />
 
@@ -689,7 +698,7 @@ export default function MailFolderPage({ params }: { params: Promise<{ folder: s
                   onClick={() => void (msg.thread_id ? deleteConversationRow(msg) : deleteMessage(msg.uid))}
                   title={t("common.delete")}
                   aria-label={t("common.delete")}
-                  className="absolute right-2 top-2 hidden h-7 w-7 items-center justify-center rounded-md text-slate-400 transition-colors hover:bg-white/[0.09] hover:text-slate-100 focus:flex focus-visible:flex group-hover:flex"
+                  className="absolute right-2 top-2 hidden h-7 w-7 items-center justify-center rounded-md text-slate-400 transition-colors hover:bg-ink/[0.09] hover:text-slate-100 focus:flex focus-visible:flex group-hover:flex"
                 >
                   <Trash2 className="h-3.5 w-3.5" />
                 </button>
@@ -733,7 +742,7 @@ export default function MailFolderPage({ params }: { params: Promise<{ folder: s
           e.preventDefault();
         }}
         className={`group relative hidden w-1.5 flex-none cursor-col-resize touch-none select-none md:block ${
-          dragging ? "bg-indigo-500/40" : "bg-white/[0.07] hover:bg-indigo-500/30"
+          dragging ? "bg-indigo-500/40" : "bg-ink/[0.07] hover:bg-indigo-500/30"
         } focus-visible:bg-indigo-500/50 focus-visible:outline-none`}
       >
         {/* A wider invisible target, so the thin line is easy to grab. */}

services/webmail/src/app/(user)/user/settings/page.tsx

@@ -510,7 +510,7 @@ export default function UserSettingsPage() {
                         type="button"
                         onClick={() => void revokeAppPassword(ap.id)}
                         aria-label={t("common.delete")}
-                        className="flex h-[30px] w-[30px] flex-none items-center justify-center rounded-lg text-slate-400 transition-colors hover:bg-white/[0.07] hover:text-rose-400"
+                        className="flex h-[30px] w-[30px] flex-none items-center justify-center rounded-lg text-slate-400 transition-colors hover:bg-ink/[0.07] hover:text-rose-400"
                       >
                         <Trash2 className="h-[15px] w-[15px]" />
                       </button>
@@ -551,7 +551,7 @@ export default function UserSettingsPage() {
                         type="button"
                         onClick={() => void revokeSession(session.id)}
                         aria-label={t("common.delete")}
-                        className="flex h-[30px] w-[30px] flex-none items-center justify-center rounded-lg text-slate-400 transition-colors hover:bg-white/[0.07] hover:text-rose-400"
+                        className="flex h-[30px] w-[30px] flex-none items-center justify-center rounded-lg text-slate-400 transition-colors hover:bg-ink/[0.07] hover:text-rose-400"
                       >
                         <Trash2 className="h-[15px] w-[15px]" />
                       </button>
@@ -769,7 +769,7 @@ export default function UserSettingsPage() {
                         disabled={index === 0}
                         aria-label={t("settings.ruleMoveUp")}
                         title={t("settings.ruleMoveUp")}
-                        className="flex h-[30px] w-[30px] flex-none items-center justify-center rounded-lg text-slate-400 transition-colors hover:bg-white/[0.07] hover:text-slate-100 disabled:opacity-30"
+                        className="flex h-[30px] w-[30px] flex-none items-center justify-center rounded-lg text-slate-400 transition-colors hover:bg-ink/[0.07] hover:text-slate-100 disabled:opacity-30"
                       >
                         <ChevronUp className="h-[15px] w-[15px]" />
                       </button>
@@ -779,7 +779,7 @@ export default function UserSettingsPage() {
                         disabled={index === rules.length - 1}
                         aria-label={t("settings.ruleMoveDown")}
                         title={t("settings.ruleMoveDown")}
-                        className="flex h-[30px] w-[30px] flex-none items-center justify-center rounded-lg text-slate-400 transition-colors hover:bg-white/[0.07] hover:text-slate-100 disabled:opacity-30"
+                        className="flex h-[30px] w-[30px] flex-none items-center justify-center rounded-lg text-slate-400 transition-colors hover:bg-ink/[0.07] hover:text-slate-100 disabled:opacity-30"
                       >
                         <ChevronDown className="h-[15px] w-[15px]" />
                       </button>
@@ -787,7 +787,7 @@ export default function UserSettingsPage() {
                         type="button"
                         onClick={() => removeSieveRule(r.id)}
                         aria-label={t("common.delete")}
-                        className="flex h-[30px] w-[30px] flex-none items-center justify-center rounded-lg text-slate-400 transition-colors hover:bg-white/[0.07] hover:text-rose-400"
+                        className="flex h-[30px] w-[30px] flex-none items-center justify-center rounded-lg text-slate-400 transition-colors hover:bg-ink/[0.07] hover:text-rose-400"
                       >
                         <Trash2 className="h-[15px] w-[15px]" />
                       </button>
@@ -914,12 +914,12 @@ export default function UserSettingsPage() {
                       aria-label={b.title}
                       onMouseDown={(e) => e.preventDefault()}
                       onClick={() => applySignatureCommand(b.cmd)}
-                      className={`h-7 w-7 rounded-md text-[13px] text-slate-300 transition-colors hover:bg-white/[0.09] hover:text-slate-100 ${b.cls}`}
+                      className={`h-7 w-7 rounded-md text-[13px] text-slate-300 transition-colors hover:bg-ink/[0.09] hover:text-slate-100 ${b.cls}`}
                     >
                       {b.label}
                     </button>
                   ))}
-                  <span className="mx-1 h-4 w-px bg-white/10" />
+                  <span className="mx-1 h-4 w-px bg-ink/10" />
                   <button
                     type="button"
                     title={t("ui.insertLink")}
@@ -929,7 +929,7 @@ export default function UserSettingsPage() {
                       const url = window.prompt(t("ui.insertLink"), "https://");
                       if (url) applySignatureCommand("createLink", url);
                     }}
-                    className="h-7 rounded-md px-2 text-[12px] text-slate-300 transition-colors hover:bg-white/[0.09] hover:text-slate-100"
+                    className="h-7 rounded-md px-2 text-[12px] text-slate-300 transition-colors hover:bg-ink/[0.09] hover:text-slate-100"
                   >
                     {t("ui.insertLink")}
                   </button>
@@ -942,7 +942,7 @@ export default function UserSettingsPage() {
                       const url = window.prompt(t("ui.insertImage"), "https://");
                       if (url) applySignatureCommand("insertImage", url);
                     }}
-                    className="h-7 rounded-md px-2 text-[12px] text-slate-300 transition-colors hover:bg-white/[0.09] hover:text-slate-100"
+                    className="h-7 rounded-md px-2 text-[12px] text-slate-300 transition-colors hover:bg-ink/[0.09] hover:text-slate-100"
                   >
                     {t("ui.insertImage")}
                   </button>