Mail mark-all-read + iframe fixes; Contacts detail/selection/groups + resizable panels

Mail:
- New "More" (⋯) menu in the list sorting bar with "Mark all as read": POST
  /threads/mark-read marks every unread thread in the current view (unified /
  folder:<special> / account:<uuid>) as \Seen, pushes + publishes updates.
- Message iframe: no longer shows a spurious vertical scrollbar (display:block,
  getBoundingClientRect+ceil sizing, overflow-y:hidden on the doc) and has
  rounded corners.
- Deep links from Contacts: /mail?compose=1&to= opens a maximized prefilled
  composer; /mail?q= prefills the search box.

Contacts:
- Detail pane shows all populated fields (work subtitle, phones, address, urls,
  nickname, birthday). Company name is used as the display name when there's no
  personal name (existing rows too). Editable "Add notes".
- Selection: checkbox reveals on avatar hover only; Groups/More bulk menus in
  select mode; "N contacts selected" panel; filled yellow VIP star in list +
  detail; pagination bottom bar; Lato pinned on form controls.
- Groups: "+" on the GROUPS header and "Create new" in the group menus (bulk
  add/remove via POST /groups/{id}/add|remove, ownership-guarded).
- Rounded Mail-style list rows; removed the ⋯ button from the search bar;
  Compose→Mail, Find-all-conversations→Mail search; Message button removed;
  delete confirmation; resizable sidebar + list/detail split.

Calendar: the right panel (agenda / search) is now resizable.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01U72FZiF1W1pb8XxyWBTREA

frontend/src/routes/MailLayout.tsx

@@ -1,6 +1,6 @@
 import { keepPreviousData, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useEffect, useRef, useState } from "react";
-import { Link, useMatch, useNavigate } from "react-router-dom";
+import { Link, useMatch, useNavigate, useSearchParams } from "react-router-dom";
 
 import { AppSwitcher } from "../components/AppSwitcher";
 import { Composer, type ComposerInit, draftToInit } from "../components/compose/Composer";
@@ -400,6 +400,15 @@ export function MailLayout() {
     }, 1500);
   };
 
+  const [moreOpen, setMoreOpen] = useState(false);
+  const markAllRead = useMutation({
+    mutationFn: () => api.markAllRead(view),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["threads"] });
+      queryClient.invalidateQueries({ queryKey: ["folder-counts"] });
+    },
+  });
+
   const openRelative = (delta: number) => {
     const list = threadsRef.current;
     if (list.length === 0) return;
@@ -423,6 +432,33 @@ export function MailLayout() {
 
   const accounts = accountsQuery.data ?? [];
 
+  // Deep link (e.g. Contacts "Compose"): /mail?compose=1&to=<email> opens a new,
+  // maximized composer prefilled with the recipient, then strips the params.
+  const [searchParams, setSearchParams] = useSearchParams();
+  useEffect(() => {
+    if (searchParams.get("compose") !== "1") return;
+    const first = accountsQuery.data?.[0];
+    if (!first) return; // wait until accounts have loaded
+    openComposer({ accountId: first.id, kind: "new", to: searchParams.get("to") ?? "" }, true);
+    const next = new URLSearchParams(searchParams);
+    next.delete("compose");
+    next.delete("to");
+    setSearchParams(next, { replace: true });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchParams, accountsQuery.data]);
+
+  // Deep link (e.g. Contacts "Find all conversations"): /mail?q=<text> prefills the
+  // search box (which drives the search), then strips the param.
+  useEffect(() => {
+    const q = searchParams.get("q");
+    if (q == null) return;
+    setTerm(q);
+    const next = new URLSearchParams(searchParams);
+    next.delete("q");
+    setSearchParams(next, { replace: true });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchParams]);
+
   return (
     <div className="flex h-screen bg-app-bg text-app-fg">
       <BackfillBanner />
@@ -700,6 +736,37 @@ export function MailLayout() {
               >
                 <SortIcon />
               </button>
+              <div className="relative">
+                <button
+                  className="rounded p-1.5 text-app-muted hover:bg-app-hover hover:text-app-fg"
+                  title={t("mail.more")}
+                  aria-label={t("mail.more")}
+                  onClick={() => setMoreOpen((o) => !o)}
+                >
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
+                    <circle cx="5" cy="12" r="1.6" />
+                    <circle cx="12" cy="12" r="1.6" />
+                    <circle cx="19" cy="12" r="1.6" />
+                  </svg>
+                </button>
+                {moreOpen && (
+                  <>
+                    <div className="fixed inset-0 z-10" onClick={() => setMoreOpen(false)} />
+                    <div className="absolute right-0 z-20 mt-1 min-w-[180px] rounded-lg border border-app-border bg-app-surface py-1 shadow-lg">
+                      <button
+                        className="flex w-full items-center px-3 py-2 text-left text-[13px] text-app-fg hover:bg-app-hover disabled:opacity-50"
+                        disabled={markAllRead.isPending}
+                        onClick={() => {
+                          setMoreOpen(false);
+                          markAllRead.mutate();
+                        }}
+                      >
+                        {t("mail.markAllRead")}
+                      </button>
+                    </div>
+                  </>
+                )}
+              </div>
             </div>
           </div>
         )}