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>