@rapidmx/web-client 0.31.0 → 0.33.0

package/apps/shared/components/admin/diagnostics/InformationPanel.tsx

@@ -41,13 +41,13 @@ export default function InformationPanel({ versions, plugins, information }: Inf
                             <SettingsTable
                                 id="diagnostics-environment"
                                 title="Environment variables"
-                                description="The server process's environment. Only variables known to be harmless show their value; the value of a secret, or of anything unrecognized, is withheld by the server and never sent."
+                                description="The server process's environment. Every variable shows its value except those on the server's list of hidden settings, whose value is withheld by the server and never sent."
                                 settings={information.data.environment ?? []}
                             />
                             <SettingsTable
                                 id="diagnostics-configuration"
                                 title="Configuration"
-                                description="The effective settings the server runs with: the environment, saved plugin settings and defaults combined. Passwords, tokens, keys, certificates and the credentials in URLs are withheld by the server and never sent."
+                                description="The effective settings the server runs with: the environment, saved plugin settings and defaults combined. Settings on the server's list of hidden settings, such as passwords, tokens and keys, are withheld by the server and never sent, and so are the credentials in URLs."
                                 settings={information.data.configuration ?? []}
                             />
                         </>

package/apps/shared/components/admin/diagnostics/SettingsTable.tsx

@@ -4,6 +4,7 @@
 ///////////////////////////////////////////////////////////////////////////////
 import React, { useMemo, useState } from "react";
 import Button from "../../../../../lib/components/buttons/Button.js";
+import CopyIconButton from "../../../../../lib/components/buttons/CopyIconButton.js";
 import type { DiagnosticsSetting } from "./diagnosticsApi.js";
 
 /** How many settings are listed at first, and how many more each "Show more" adds: an environment can be a hundred long. */
@@ -83,9 +84,19 @@ export default function SettingsTable({ title, description, id, settings }: Sett
                         <tbody>
                             {shown.map((item) => (
                                 <tr key={item.name}>
-                                    <td className="py-2 px-2.5 border-b border-border font-mono break-all">{item.name}</td>
                                     <td className="py-2 px-2.5 border-b border-border font-mono break-all">
-                                        {item.redacted ? <span className="text-text-muted">{HIDDEN_VALUE}</span> : item.value}
+                                        {item.name}
+                                        <CopyIconButton value={item.name} label={`Copy the name of ${item.name}`} />
+                                    </td>
+                                    <td className="py-2 px-2.5 border-b border-border font-mono break-all">
+                                        {item.redacted ? (
+                                            <span className="text-text-muted">{HIDDEN_VALUE}</span>
+                                        ) : (
+                                            <>
+                                                {item.value}
+                                                <CopyIconButton value={item.value ?? ""} label={`Copy the value of ${item.name}`} />
+                                            </>
+                                        )}
                                     </td>
                                 </tr>
                             ))}

package/apps/shared/components/admin/diagnostics/diagnosticsApi.ts

@@ -76,8 +76,8 @@ export interface DiagnosticsVersions {
 }
 
 /**
- * One environment variable or configuration setting. A `redacted` one has no `value`: the server withholds every secret-like
- * or unrecognized value and never sends it, so there is nothing for the client to hide.
+ * One environment variable or configuration setting. A `redacted` one has no `value`: the server withholds the value of every setting on its
+ * hidden list and never sends it, so there is nothing for the client to hide.
  */
 export interface DiagnosticsSetting {
     name: string;

package/apps/shared/components/admin/mailboxes/MailboxTable.tsx

@@ -4,6 +4,7 @@
 ///////////////////////////////////////////////////////////////////////////////
 import React from "react";
 import { Mailbox } from "../../../../../lib/mail/mailApi.js";
+import CopyIconButton from "../../../../../lib/components/buttons/CopyIconButton.js";
 
 function formatBytes(bytes: number): string {
     if (bytes >= 1_000_000_000) return `${(bytes / 1_000_000_000).toFixed(1)} GB`;
@@ -12,6 +13,16 @@ function formatBytes(bytes: number): string {
     return `${bytes} B`;
 }
 
+/** A cell's value with the icon button that copies it. */
+function Copyable({ value, label }: { value: string; label: string }) {
+    return (
+        <span className="inline-flex items-center gap-1">
+            {value}
+            <CopyIconButton value={value} label={label} />
+        </span>
+    );
+}
+
 export interface MailboxTableProps {
     mailboxes: Mailbox[];
 }
@@ -44,17 +55,26 @@ export default function MailboxTable({ mailboxes }: MailboxTableProps) {
                 <tbody>
                     {mailboxes.map((mailbox) => (
                         <tr key={mailbox.uid}>
-                            <td className="py-2.5 px-2.5 border-b border-border align-middle">{mailbox.primarySmtpAddress}</td>
-                            <td className="py-2.5 px-2.5 border-b border-border align-middle">{mailbox.displayName}</td>
                             <td className="py-2.5 px-2.5 border-b border-border align-middle">
-                                {mailbox.ownerUserUid ?? (
+                                <Copyable value={mailbox.primarySmtpAddress} label={`Copy the address of ${mailbox.primarySmtpAddress}`} />
+                            </td>
+                            <td className="py-2.5 px-2.5 border-b border-border align-middle">
+                                <Copyable value={mailbox.displayName} label={`Copy the display name of ${mailbox.primarySmtpAddress}`} />
+                            </td>
+                            <td className="py-2.5 px-2.5 border-b border-border align-middle">
+                                {mailbox.ownerUserUid ? (
+                                    <Copyable value={mailbox.ownerUserUid} label={`Copy the owner of ${mailbox.primarySmtpAddress}`} />
+                                ) : (
                                     <span className="inline-block text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-surface-alt text-text-muted">
                                         Shared
                                     </span>
                                 )}
                             </td>
                             <td className="py-2.5 px-2.5 border-b border-border align-middle">
-                                {formatBytes(mailbox.usedBytes)} / {formatBytes(mailbox.quotaBytes)}
+                                <Copyable
+                                    value={`${formatBytes(mailbox.usedBytes)} / ${formatBytes(mailbox.quotaBytes)}`}
+                                    label={`Copy the quota used of ${mailbox.primarySmtpAddress}`}
+                                />
                             </td>
                             <td className="py-2.5 px-2.5 border-b border-border align-middle text-right">
                                 <a

package/apps/shared/components/admin/settings/DomainDnsSetup.tsx

@@ -6,7 +6,7 @@ import React, { useEffect, useState } from "react";
 import { DnsRecordCheck, Domain, getDnsSetup, getDomain, verifyDomain } from "../../../../../lib/admin/domainsApi.js";
 import Alert from "../ActionAlert.js";
 import Button from "../../../../../lib/components/buttons/Button.js";
-import CopyButton from "../../../../../lib/components/buttons/CopyButton.js";
+import CopyIconButton from "../../../../../lib/components/buttons/CopyIconButton.js";
 import { actionErrorMessage } from "../elevation.js";
 
 const RECORD_TYPE_LABELS: Record<DnsRecordCheck["type"], string> = {
@@ -51,12 +51,12 @@ function splitSrvValue(value: string): { priority: string; weight: string; port:
     return match ? { priority: match[1], weight: match[2], port: match[3], target: match[4] } : null;
 }
 
-/** A value to type into a DNS provider's form, shown in full (long DKIM keys wrap) with a Copy button beside it. */
+/** A value to type into a DNS provider's form, shown in full (long DKIM keys wrap) with a copy icon button beside it. */
 function CopyableValue({ value, copyLabel }: { value: string; copyLabel: string }) {
     return (
         <div className="flex items-start gap-2">
             <code className="flex-1 min-w-0 text-xs break-all">{value}</code>
-            <CopyButton value={value} label={copyLabel} />
+            <CopyIconButton value={value} label={copyLabel} className="shrink-0" />
         </div>
     );
 }

package/apps/shared/components/admin/settings/PluginsManager.tsx

@@ -33,7 +33,9 @@ import {
     retryPluginPurge,
     searchPlugins,
     updatePlugin,
+    uploadPlugin,
 } from "../../../../../lib/admin/pluginsApi.js";
+import { ApiRequestError } from "../../../../../lib/util/api.js";
 import Alert from "../ActionAlert.js";
 import Button from "../../../../../lib/components/buttons/Button.js";
 import Modal from "../../../../../lib/components/overlays/Modal.js";
@@ -84,6 +86,21 @@ function purgeFailure(purge: PluginPurgeInfo): string {
 /** A day, in the administrator's own format. */
 const formatDate = (iso: string): string => new Date(iso).toLocaleDateString(undefined, { dateStyle: "medium" });
 
+/** The file names an uploaded plugin may have: what `npm pack` produces (`<name>-<version>.tgz`), or the same gzipped. */
+const PLUGIN_PACK_NAME = /\.(tgz|tar\.gz|gz)$/i;
+
+/** What the server answers (409) an upload of a plugin that is already installed, which the administrator may replace. */
+const ALREADY_INSTALLED = /already installed/i;
+
+/** An upload the administrator is being asked to let replace the plugin of the same name. */
+interface PendingReplace {
+    file: File;
+    /** What the replacement would do, as a question. */
+    question: string;
+    /** Why the server refused, in its words. */
+    reason: string;
+}
+
 /** A change waiting for the administrator to confirm the other plugins it also installs or enables. */
 interface PendingChange {
     displayName: string;
@@ -225,6 +242,11 @@ export default function PluginsManager({ embedded = false }: PluginsManagerProps
     const [confirmingBulkUninstall, setConfirmingBulkUninstall] = useState<Plugin[] | null>(null);
     /** How many changes (or the lookups that come before them) are waiting on the server. */
     const [working, setWorking] = useState(0);
+    /** Set while an uploaded plugin is being sent to the server. */
+    const [uploading, setUploading] = useState(false);
+    /** An upload that would replace an installed plugin, waiting for the administrator to confirm it. */
+    const [replacing, setReplacing] = useState<PendingReplace | null>(null);
+    const fileInput = useRef<HTMLInputElement>(null);
     const statusRequest = useRef<Promise<void> | null>(null);
     /** The state each data deletion was last seen in, so a notification is raised when one that was under way ends. */
     const seenPurges = useRef<Map<string, PluginPurgeState>>(new Map());
@@ -517,6 +539,54 @@ export default function PluginsManager({ embedded = false }: PluginsManagerProps
         return onRow(plugin, () => changeVersion(plugin, packageVersion));
     }
 
+    /** Sends `file` to the server as a plugin to install - replacing the installed plugin of that name only when `replace` is set. A plugin that is
+     * already installed isn't an error but a question, asked of the administrator before it is replaced. */
+    async function runUpload(file: File, replace: boolean) {
+        setUploading(true);
+        setError(null);
+        setRetryEnableUid(null);
+        try {
+            const uploaded: Plugin = await track(uploadPlugin(file, { replace }));
+            applied(uploaded);
+            notify({
+                kind: "success",
+                title: `${uploaded.name}@${uploaded.packageVersion} uploaded`,
+                message: "The servers restart one at a time to load it.",
+            });
+        } catch (err) {
+            if (!replace && err instanceof ApiRequestError && err.status === 409 && ALREADY_INSTALLED.test(err.message)) {
+                const installed: Plugin | undefined = plugins.find((plugin) => err.message.includes(plugin.name));
+                setReplacing({
+                    file,
+                    question: installed
+                        ? `Replace ${installed.name} ${installed.packageVersion} with the uploaded pack?`
+                        : "Replace the installed plugin with the uploaded pack?",
+                    reason: err.message,
+                });
+            } else if (err instanceof ApiRequestError && err.status === 413) {
+                setError("That file is too large for the server to accept.");
+            } else {
+                setError(errorMessage(err, "Could not upload the plugin."));
+            }
+        }
+        setUploading(false);
+    }
+
+    /** Takes the file the administrator chose, unless it can't be what `npm pack` produces. */
+    function onFileChosen(e: React.ChangeEvent<HTMLInputElement>) {
+        const file: File | undefined = e.target.files?.[0];
+        // So choosing the same file again (after fixing what was wrong) still counts as a change.
+        e.target.value = "";
+        if (!file) {
+            return;
+        }
+        if (!PLUGIN_PACK_NAME.test(file.name)) {
+            setError(`${file.name} isn't a plugin pack. Choose the .tgz file that npm pack produces.`);
+            return;
+        }
+        void runUpload(file, false);
+    }
+
     /** Installs an uninstalled plugin again, at its latest version - as adding it by name would. */
     function reinstall(purge: PluginPurgeInfo) {
         const displayName: string = purgeName(purge);
@@ -682,12 +752,34 @@ export default function PluginsManager({ embedded = false }: PluginsManagerProps
     const displayNameOf = (name: string): string => plugins.find((plugin) => plugin.name === name)?.manifest.displayName ?? name;
 
     const SectionHeading = embedded ? "h3" : "h2";
+    const bulkBusy: boolean = bulk !== null;
     const addButton = (
-        <Button type="button" variant="secondary" className="!w-auto shrink-0" onClick={() => setAdding(true)}>
-            Add by name
-        </Button>
+        <div className="flex flex-wrap gap-2 shrink-0">
+            <input
+                ref={fileInput}
+                type="file"
+                className="hidden"
+                accept=".tgz,.tar.gz,application/gzip,application/x-gzip"
+                aria-label="Plugin pack file"
+                tabIndex={-1}
+                onChange={onFileChosen}
+            />
+            <Button
+                type="button"
+                variant="secondary"
+                className="!w-auto"
+                title="Install a plugin from the .tgz file that npm pack produces"
+                loading={uploading}
+                disabled={uploading || bulkBusy}
+                onClick={() => fileInput.current?.click()}
+            >
+                {uploading ? "Uploading\u2026" : "Upload"}
+            </Button>
+            <Button type="button" variant="secondary" className="!w-auto" onClick={() => setAdding(true)}>
+                Add by name
+            </Button>
+        </div>
     );
-    const bulkBusy: boolean = bulk !== null;
 
     return (
         <>
@@ -741,24 +833,18 @@ export default function PluginsManager({ embedded = false }: PluginsManagerProps
                     </div>
                 </Alert>
             )}
-            {error && (
-                <Alert>
-                    {error}
-                    {retryEnable && (
-                        <>
-                            {" "}
-                            <Button
-                                type="button"
-                                variant="text"
-                                className="!w-auto !p-0"
-                                onClick={() => void toggle(retryEnable)}
-                            >
-                                Try again
-                            </Button>
-                        </>
-                    )}
-                </Alert>
-            )}
+            {/* A message on its own is a plain string child, which is what lets the alert offer to confirm the identity again. */}
+            {error &&
+                (retryEnable ? (
+                    <Alert>
+                        {error}{" "}
+                        <Button type="button" variant="text" className="!w-auto !p-0" onClick={() => void toggle(retryEnable)}>
+                            Try again
+                        </Button>
+                    </Alert>
+                ) : (
+                    <Alert>{error}</Alert>
+                ))}
             <RolloutBanner status={status} />
             {statusStale && status && (
                 <p className="mb-4 text-xs text-text-muted">Couldn&apos;t refresh server status. Showing the last status reported.</p>
@@ -871,7 +957,9 @@ export default function PluginsManager({ embedded = false }: PluginsManagerProps
                         <tbody role="rowgroup" className="block lg:table-row-group">
                             {plugins.map((plugin) => {
                                 const update: PluginUpdateInfo | undefined = updates.get(plugin.uid);
-                                const latest: string | undefined = update?.updateAvailable ? update.latestVersion : undefined;
+                                const uploaded: boolean = plugin.source === "upload";
+                                // An uploaded pack has no registry version to be newer than.
+                                const latest: string | undefined = !uploaded && update?.updateAvailable ? update.latestVersion : undefined;
                                 const busy: boolean = busyUids.has(plugin.uid) || confirming?.uid === plugin.uid || bulkBusy;
                                 const requires: string[] = Object.keys(plugin.manifest.requires ?? {}).map(displayNameOf);
                                 const requiredBy: string[] = plugins
@@ -895,6 +983,13 @@ export default function PluginsManager({ embedded = false }: PluginsManagerProps
                                                     {plugin.manifest.description && (
                                                         <div className="text-xs text-text-muted mt-1 max-w-md">{plugin.manifest.description}</div>
                                                     )}
+                                                    {uploaded && (
+                                                        <div className="text-xs text-text-muted mt-1 break-words">
+                                                            <span className={`${BADGE_CLASS} bg-surface-alt text-text-muted`}>Uploaded</span>{" "}
+                                                            {plugin.uploadFilename}
+                                                            {plugin.uploadedAt ? `, ${formatDate(plugin.uploadedAt)}` : ""}
+                                                        </div>
+                                                    )}
                                                     {requires.length > 0 && <div className="text-xs text-text-muted mt-1">Requires: {requires.join(", ")}</div>}
                                                     {requiredBy.length > 0 && (
                                                         <div className="text-xs text-text-muted mt-1">Required by: {requiredBy.join(", ")}</div>
@@ -942,7 +1037,7 @@ export default function PluginsManager({ embedded = false }: PluginsManagerProps
                                                 </div>
                                                 <div className="flex flex-wrap gap-x-4 lg:justify-end">
                                                     <Button variant="text" type="button" onClick={() => setUpgrading(plugin)}>
-                                                        Change version
+                                                        {uploaded ? "Install the registry version" : "Change version"}
                                                     </Button>
                                                     <Button variant="text" type="button" onClick={() => setRemoving(plugin)}>
                                                         Uninstall
@@ -1002,6 +1097,28 @@ export default function PluginsManager({ embedded = false }: PluginsManagerProps
                     }}
                 />
             )}
+            {replacing && (
+                <Modal open onClose={() => setReplacing(null)} title="Replace plugin?">
+                    <p className="text-sm mb-2">{replacing.question}</p>
+                    <p className="text-sm text-text-muted mb-4 break-words">{replacing.reason}</p>
+                    <div className="flex gap-2 justify-end">
+                        <Button type="button" variant="secondary" className="!w-auto" onClick={() => setReplacing(null)}>
+                            Cancel
+                        </Button>
+                        <Button
+                            type="button"
+                            className="!w-auto"
+                            onClick={() => {
+                                const { file } = replacing;
+                                setReplacing(null);
+                                void runUpload(file, true);
+                            }}
+                        >
+                            Replace
+                        </Button>
+                    </div>
+                </Modal>
+            )}
             {confirming && (
                 <ConfirmDependenciesModal
                     change={confirming}
@@ -1570,15 +1687,20 @@ function ChangeVersionModal({
     const [selected, setSelected] = useState(plugin.packageVersion);
     const [error, setError] = useState<string | null>(null);
     const [busy, setBusy] = useState(false);
+    // An uploaded pack isn't a registry version, so any registry version is a change from it - the newest is offered first.
+    const uploaded: boolean = plugin.source === "upload";
 
     useEffect(() => {
         lookupPluginPackage(plugin.name, undefined, { prerelease })
             .then((found) => {
                 setVersions(found.package.versions);
                 setLatest(found.package.latest);
+                if (uploaded && found.package.latest) {
+                    setSelected(found.package.latest);
+                }
             })
             .catch((err) => setError(errorMessage(err, "Could not load the available versions.")));
-    }, [plugin.name, prerelease]);
+    }, [plugin.name, prerelease, uploaded]);
 
     async function save() {
         setBusy(true);
@@ -1591,12 +1713,17 @@ function ChangeVersionModal({
     }
 
     return (
-        <Modal open onClose={onClose} title={`${plugin.manifest.displayName} version`}>
+        <Modal open onClose={onClose} title={uploaded ? `Install the registry version of ${plugin.manifest.displayName}` : `${plugin.manifest.displayName} version`}>
             {error && <Alert>{error}</Alert>}
             {versions === null ? (
                 !error && <p className="text-sm text-text-muted">Loading&hellip;</p>
             ) : (
                 <div className="flex flex-col gap-3">
+                    {uploaded && (
+                        <p className="text-sm text-text-muted">
+                            {plugin.manifest.displayName} {plugin.packageVersion} was uploaded as {plugin.uploadFilename}. This replaces it with the version from the registry.
+                        </p>
+                    )}
                     <label className="flex flex-col gap-1.5 text-sm">
                         <span className="font-semibold">Version</span>
                         <select aria-label="Version" className={INPUT_CLASS} value={selected} onChange={(e) => setSelected(e.target.value)}>
@@ -1604,7 +1731,7 @@ function ChangeVersionModal({
                                 <option key={version} value={version}>
                                     {version}
                                     {version === latest ? " (latest)" : ""}
-                                    {version === plugin.packageVersion ? " (installed)" : ""}
+                                    {!uploaded && version === plugin.packageVersion ? " (installed)" : ""}
                                 </option>
                             ))}
                         </select>
@@ -1617,10 +1744,10 @@ function ChangeVersionModal({
                             type="button"
                             className="!w-auto"
                             loading={busy}
-                            disabled={busy || selected === plugin.packageVersion}
+                            disabled={busy || (!uploaded && selected === plugin.packageVersion)}
                             onClick={() => void save()}
                         >
-                            Save
+                            {uploaded ? "Install" : "Save"}
                         </Button>
                     </div>
                 </div>

package/apps/shared/components/calendar/EventDetails.tsx

@@ -25,6 +25,7 @@ import { getVideoMeeting } from "../../../../lib/videoconf/videoMeetingsApi.js";
 import { describeTimeZone, deviceTimeZone } from "../../../../lib/util/timeZone.js";
 import Alert from "../../../../lib/components/feedback/Alert.js";
 import Button from "../../../../lib/components/buttons/Button.js";
+import CopyIconButton from "../../../../lib/components/buttons/CopyIconButton.js";
 import { joinMeetingUrl } from "../../calendar/calendarReminders.js";
 import ParticipantLink from "../contacts/ParticipantLink.js";
 import EventDescriptionView from "./EventDescriptionView.js";
@@ -273,6 +274,15 @@ export default function EventDetails({
                                 </span>
                             )}
                         </div>
+                        {joinUrl && (
+                            // The link itself, for when the button is not enough (a blocked pop-up, a link to open in another browser or share).
+                            <div className="mt-1.5 flex items-center gap-1 min-w-0 text-xs text-text-muted">
+                                <a href={joinUrl} target="_blank" rel="noopener noreferrer" className="break-all underline hover:text-text">
+                                    {joinUrl}
+                                </a>
+                                <CopyIconButton value={joinUrl} label="Copy the video call link" className="shrink-0" />
+                            </div>
+                        )}
                     </DetailRow>
                 )}
 

package/apps/shared/components/calendar/EventFormParts.tsx

@@ -6,6 +6,7 @@ import React, { ReactNode, useRef, useState } from "react";
 import { HiOutlineBars3BottomLeft, HiOutlineBell, HiOutlineMapPin, HiOutlineUserGroup, HiOutlineVideoCamera, HiOutlineXMark } from "react-icons/hi2";
 import { AttendeeRole, EventVisibility, RecurrenceRule, WeekdayCode } from "../../../../lib/calendar/calendarApi.js";
 import Button from "../../../../lib/components/buttons/Button.js";
+import CopyIconButton from "../../../../lib/components/buttons/CopyIconButton.js";
 import GuestInput from "./GuestInput.js";
 import LazyDescriptionEditor from "./LazyDescriptionEditor.js";
 import RecurrenceEditor from "./RecurrenceEditor.js";
@@ -103,6 +104,15 @@ export function VideoConferencingRow({ c }: { c: EventFormController }) {
                     )}
                 </div>
             )}
+            {c.videoMeetingUid && c.joinUrl && (
+                // The link itself, for when the button is not enough (a blocked pop-up, a link to open in another browser or share).
+                <div className="mb-1 flex items-center gap-1 min-w-0 text-xs text-text-muted">
+                    <a href={c.joinUrl} target="_blank" rel="noopener noreferrer" className="break-all underline hover:text-text">
+                        {c.joinUrl}
+                    </a>
+                    <CopyIconButton value={c.joinUrl} label="Copy the video call link" className="shrink-0" />
+                </div>
+            )}
         </IconRow>
     );
 }

package/apps/shared/components/calendar/MonthView.tsx

@@ -27,15 +27,21 @@ export interface MonthViewProps {
     onSelectSlot?: (start: Date, end: Date, anchor: EventAnchor) => void;
 }
 
-/** A real 6-week month grid (Mon-start), matching Outlook/Gmail's month view. Multi-day and all-day
+/** A real 6-week month grid (Sunday-start), matching Outlook/Gmail's month view. Multi-day and all-day
  * events are shown on every day they cover (see `allDay.ts`'s `occursOnDay`). */
 export default function MonthView({ viewDate, occurrences, folderColors, onSelectDay, onSelectEvent, onSelectSlot }: MonthViewProps) {
-    const gridStart = startOfWeek(startOfMonth(viewDate), { weekStartsOn: 1 });
-    const gridEnd = endOfWeek(endOfMonth(viewDate), { weekStartsOn: 1 });
+    const gridStart = startOfWeek(startOfMonth(viewDate), { weekStartsOn: 0 });
+    const gridEnd = endOfWeek(endOfMonth(viewDate), { weekStartsOn: 0 });
     const days = eachDayOfInterval({ start: gridStart, end: gridEnd });
 
     return (
-        <div className="flex-1 grid grid-cols-7 grid-rows-6 min-h-0" role="grid" aria-label="Month">
+        <div className="flex-1 grid grid-cols-7 grid-rows-[auto_repeat(6,minmax(0,1fr))] min-h-0" role="grid" aria-label="Month">
+            {days.slice(0, 7).map((day) => (
+                <div key={day.getDay()} role="columnheader" className="px-2 py-1 text-xs font-semibold text-text-muted border-b border-border">
+                    <span className="sm:hidden">{format(day, "EEEEE")}</span>
+                    <span className="hidden sm:inline">{format(day, "EEEE")}</span>
+                </div>
+            ))}
             {days.map((day) => (
                 <DayCell
                     key={day.toISOString()}

package/apps/shared/components/contacts/ContactCard.tsx

@@ -22,6 +22,7 @@ import { useMailboxUpdateAccess } from "../../mail/useMailboxUpdateAccess.js";
 import { notify } from "../../notifications/store.js";
 import { notifyApiError } from "../../notifications/apiErrors.js";
 import { APP_HREFS } from "../../navigation/appHrefs.js";
+import { closeAllOverlays } from "../../../../lib/components/overlays/overlayStack.js";
 import { useCompose } from "../mail/compose/ComposeContext.js";
 import { formatInviteWhen } from "../mail/invite/inviteFormat.js";
 import {
@@ -234,6 +235,8 @@ export default function ContactCard({ participant, context = {}, onClose, userUi
     }
 
     function handleEmail() {
+        // Every card open, not just this one: it may have been reached from another (a guest of an event), which would stay on screen behind the new window.
+        closeAllOverlays();
         openCompose({ to: formatMailAddress(participant) });
         onClose();
     }
@@ -261,9 +264,8 @@ export default function ContactCard({ participant, context = {}, onClose, userUi
                 {stored && <FavoriteStarButton favorite={!!stored.favorite} disabled={photoBusy} onToggle={() => void handleToggleFavorite(stored)} className="shrink-0 self-start" />}
             </div>
             <div className="mt-4 flex flex-wrap items-center gap-2">
-                <Button type="button" variant="secondary" className={`${ACTION_CLASS} inline-flex items-center gap-1.5`} onClick={handleEmail}>
+                <Button type="button" variant="secondary" aria-label="Email" title="Email" className={`${ACTION_CLASS} inline-flex items-center`} onClick={handleEmail}>
                     <HiOutlineEnvelope aria-hidden="true" className="size-4" />
-                    Email
                 </Button>
                 {stored ? (
                     <a

package/apps/shared/components/contacts/ContactsSidebar.tsx

@@ -13,6 +13,7 @@ import { notifyApiError } from "../../notifications/apiErrors.js";
 export type ContactsView =
     | { type: "all" }
     | { type: "favorites" }
+    | { type: "suggested" }
     | { type: "list"; uid: string; name: string }
     | { type: "deleted" }
     | { type: "category"; name: string };
@@ -49,6 +50,8 @@ export interface ContactsSidebarProps {
     contacts: Contact[];
     active: ContactsView;
     onSelect: (view: ContactsView) => void;
+    /** How many contacts the mailbox's Suggested Contacts folder holds; `undefined` when it has none to show (the folder isn't known), which hides the view. */
+    suggestedCount?: number;
     /** Whether to offer the "Deleted" view - restapi only honors `deleted=true` for a caller with delete and
      * update rights on the mailbox (anyone else silently gets the live contacts), so the parent hides it
      * otherwise. Defaults to `true`. */
@@ -91,13 +94,13 @@ function NavItem({
 }
 
 /**
- * Contacts' Outlook-style left sidebar: "Your contacts" (all, with count), "Favorites", "Your contact
+ * Contacts' Outlook-style left sidebar: "Your contacts" (all, with count), "Favorites", "Suggested contacts" (the people the mailbox has corresponded with, when there are any), "Your contact
  * lists" (real `ContactList` records, fetched here), "Deleted", and "Categories" (derived from the
  * distinct `categories` values across the loaded contacts — no separate category registry exists
  * server-side). Owns its own contact-list data-fetching, per this app's convention of keeping
  * `ContactsShellContext` itself minimal (mailbox/folder resolution only).
  */
-export default function ContactsSidebar({ mailboxUid, contacts, active, onSelect, refreshToken, showDeleted = true }: ContactsSidebarProps) {
+export default function ContactsSidebar({ mailboxUid, contacts, active, onSelect, refreshToken, showDeleted = true, suggestedCount }: ContactsSidebarProps) {
     const client = useApiClient();
     const [lists, setLists] = useState<ContactList[]>([]);
     const [listsError, setListsError] = useState<string | null>(null);
@@ -165,6 +168,9 @@ export default function ContactsSidebar({ mailboxUid, contacts, active, onSelect
             <div className="flex flex-col gap-0.5">
                 <NavItem label="Your contacts" count={contacts.length} active={active.type === "all"} onClick={() => handleSelect({ type: "all" })} />
                 <NavItem label="Favorites" count={favoriteCount} active={active.type === "favorites"} onClick={() => handleSelect({ type: "favorites" })} />
+                {suggestedCount !== undefined && (
+                    <NavItem label="Suggested contacts" count={suggestedCount} active={active.type === "suggested"} onClick={() => handleSelect({ type: "suggested" })} />
+                )}
                 {showDeleted && <NavItem label="Deleted" active={active.type === "deleted"} onClick={() => handleSelect({ type: "deleted" })} />}
             </div>
 

package/apps/shared/components/contacts/ContactsToolbar.tsx

@@ -30,6 +30,8 @@ export interface ContactsToolbarProps {
     onToggleFavorite: () => void;
     onAddCategory: () => void;
     onExportVCard: () => void;
+    /** Turns the selected suggested contacts into contacts of the mailbox. Given only in the Suggested contacts view, which is also the only place the button is offered. */
+    onAddToContacts?: () => void;
     /** A `.vcf` file the user picked via the toolbar's own hidden file input — parsing/import is the
      * page's responsibility (it has the mailbox/folder context and the actual `createContact` calls). */
     onImportFile: (file: File) => void;
@@ -58,6 +60,7 @@ export default function ContactsToolbar({
     onToggleFavorite,
     onAddCategory,
     onExportVCard,
+    onAddToContacts,
     onImportFile,
     shortcuts,
     hideNew,
@@ -91,6 +94,9 @@ export default function ContactsToolbar({
             rank: 3,
         },
         { id: "category", label: "Add category", icon: HiOutlineTag, onClick: onAddCategory, disabled: !hasSelection, group: 2, rank: 2 },
+        ...(onAddToContacts
+            ? [{ id: "addToContacts", label: "Add to contacts", icon: HiOutlineUserPlus, onClick: onAddToContacts, disabled: !hasSelection, group: 1, rank: 7 }]
+            : []),
         { id: "export", label: "Export", icon: HiOutlineArrowUpTray, onClick: onExportVCard, disabled: !hasSelection, group: 3, rank: 1 },
         { id: "import", label: "Import", icon: HiOutlineArrowDownTray, onClick: () => importInputRef.current?.click(), group: 3, rank: 0 },
     ];