@rapidmx/web-client 0.9.0 → 0.10.0

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

@@ -1,115 +1,125 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-import React, { ChangeEvent, useRef } from "react";
-import type { IconType } from "react-icons";
-import {
-    HiOutlineArrowDownTray,
-    HiOutlineArrowUpTray,
-    HiOutlineEnvelope,
-    HiOutlinePencil,
-    HiOutlineStar,
-    HiOutlineTag,
-    HiOutlineTrash,
-    HiOutlineUserPlus,
-    HiStar,
-} from "react-icons/hi2";
-
-export interface ContactsToolbarProps {
-    selectedCount: number;
-    /** `true` only when every currently-selected contact is already favorited — flips the "favorite" button
-     * to act (and read) as a removal instead of an addition. */
-    allSelectedFavorited: boolean;
-    onNewContact: () => void;
-    onEdit: () => void;
-    onDelete: () => void;
-    onEmail: () => void;
-    onToggleFavorite: () => void;
-    onAddCategory: () => void;
-    onExportVCard: () => 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;
-}
-
-function ToolbarButton({
-    label,
-    icon: Icon,
-    disabled,
-    onClick,
-}: {
-    label: string;
-    icon: IconType;
-    disabled?: boolean;
-    onClick: () => void;
-}) {
-    return (
-        <button
-            type="button"
-            onClick={onClick}
-            disabled={disabled}
-            className="flex flex-col items-center gap-1 text-xs text-text-muted hover:text-text disabled:opacity-40 disabled:cursor-not-allowed px-2.5 py-1.5 rounded-sm hover:not-disabled:bg-surface-alt"
-        >
-            <Icon size={18} aria-hidden="true" />
-            <span>{label}</span>
-        </button>
-    );
-}
-
-function Divider() {
-    return <div className="w-px self-stretch my-1 bg-border" aria-hidden="true" />;
-}
-
-/**
- * Contacts' Outlook-style ribbon toolbar. Deliberately presentational — every action is a callback the
- * page (`apps/www/contacts/index.tsx`) implements, since it owns the actual contact data, the current
- * selection, and the mailbox/folder context every real action (create/delete/email/favorite/category)
- * needs. "New contact list" isn't duplicated here — `ContactsSidebar` already has its own inline
- * "+ New list" affordance next to the "Your contact lists" heading.
- */
-export default function ContactsToolbar({
-    selectedCount,
-    allSelectedFavorited,
-    onNewContact,
-    onEdit,
-    onDelete,
-    onEmail,
-    onToggleFavorite,
-    onAddCategory,
-    onExportVCard,
-    onImportFile,
-}: ContactsToolbarProps) {
-    const importInputRef = useRef<HTMLInputElement | null>(null);
-    const hasSelection = selectedCount > 0;
-
-    function handleImportFileChosen(e: ChangeEvent<HTMLInputElement>) {
-        const file = e.target.files?.[0];
-        e.target.value = "";
-        if (file) {
-            onImportFile(file);
-        }
-    }
-
-    return (
-        <div role="toolbar" aria-label="Contacts actions" className="border-b border-border bg-surface-alt flex items-center gap-0.5 px-2 py-1">
-            <ToolbarButton label="New contact" icon={HiOutlineUserPlus} onClick={onNewContact} />
-            <Divider />
-            <ToolbarButton label="Edit" icon={HiOutlinePencil} disabled={selectedCount !== 1} onClick={onEdit} />
-            <ToolbarButton label="Delete" icon={HiOutlineTrash} disabled={!hasSelection} onClick={onDelete} />
-            <Divider />
-            <ToolbarButton label="Email" icon={HiOutlineEnvelope} disabled={!hasSelection} onClick={onEmail} />
-            <ToolbarButton
-                label={allSelectedFavorited ? "Unfavorite" : "Favorite"}
-                icon={allSelectedFavorited ? HiStar : HiOutlineStar}
-                disabled={!hasSelection}
-                onClick={onToggleFavorite}
-            />
-            <ToolbarButton label="Add category" icon={HiOutlineTag} disabled={!hasSelection} onClick={onAddCategory} />
-            <Divider />
-            <ToolbarButton label="Export" icon={HiOutlineArrowUpTray} disabled={!hasSelection} onClick={onExportVCard} />
-            <ToolbarButton label="Import" icon={HiOutlineArrowDownTray} onClick={() => importInputRef.current?.click()} />
-            <input ref={importInputRef} type="file" accept=".vcf" className="sr-only" aria-label="Import contacts file" onChange={handleImportFileChosen} />
-        </div>
-    );
-}
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { ChangeEvent, useRef } from "react";
+import type { IconType } from "react-icons";
+import {
+    HiOutlineArrowDownTray,
+    HiOutlineArrowUpTray,
+    HiOutlineEnvelope,
+    HiOutlinePencil,
+    HiOutlineStar,
+    HiOutlineTag,
+    HiOutlineTrash,
+    HiOutlineUserPlus,
+    HiStar,
+} from "react-icons/hi2";
+import { SHORTCUTS } from "../../keyboard/keymap.js";
+import { useShortcutProps } from "../../keyboard/useShortcutProps.js";
+
+export interface ContactsToolbarProps {
+    selectedCount: number;
+    /** `true` only when every currently-selected contact is already favorited — flips the "favorite" button
+     * to act (and read) as a removal instead of an addition. */
+    allSelectedFavorited: boolean;
+    onNewContact: () => void;
+    onEdit: () => void;
+    onDelete: () => void;
+    onEmail: () => void;
+    onToggleFavorite: () => void;
+    onAddCategory: () => void;
+    onExportVCard: () => 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;
+    /** The keyboard's "New contact" is registered by the page: the button names its shortcut in its tooltip and `aria-keyshortcuts`. */
+    shortcuts?: boolean;
+}
+
+function ToolbarButton({
+    label,
+    icon: Icon,
+    disabled,
+    onClick,
+    hint,
+}: {
+    label: string;
+    icon: IconType;
+    disabled?: boolean;
+    onClick: () => void;
+    /** `title` and `aria-keyshortcuts` for a button with a shortcut. */
+    hint?: { title: string; "aria-keyshortcuts"?: string };
+}) {
+    return (
+        <button
+            type="button"
+            onClick={onClick}
+            disabled={disabled}
+            {...hint}
+            className="flex flex-col items-center gap-1 text-xs text-text-muted hover:text-text disabled:opacity-40 disabled:cursor-not-allowed px-2.5 py-1.5 rounded-sm hover:not-disabled:bg-surface-alt"
+        >
+            <Icon size={18} aria-hidden="true" />
+            <span>{label}</span>
+        </button>
+    );
+}
+
+function Divider() {
+    return <div className="w-px self-stretch my-1 bg-border" aria-hidden="true" />;
+}
+
+/**
+ * Contacts' Outlook-style ribbon toolbar. Deliberately presentational — every action is a callback the
+ * page (`apps/www/contacts/index.tsx`) implements, since it owns the actual contact data, the current
+ * selection, and the mailbox/folder context every real action (create/delete/email/favorite/category)
+ * needs. "New contact list" isn't duplicated here — `ContactsSidebar` already has its own inline
+ * "+ New list" affordance next to the "Your contact lists" heading.
+ */
+export default function ContactsToolbar({
+    selectedCount,
+    allSelectedFavorited,
+    onNewContact,
+    onEdit,
+    onDelete,
+    onEmail,
+    onToggleFavorite,
+    onAddCategory,
+    onExportVCard,
+    onImportFile,
+    shortcuts,
+}: ContactsToolbarProps) {
+    const newContactHint = useShortcutProps("New contact", SHORTCUTS.contacts.create, !!shortcuts);
+    const importInputRef = useRef<HTMLInputElement | null>(null);
+    const hasSelection = selectedCount > 0;
+
+    function handleImportFileChosen(e: ChangeEvent<HTMLInputElement>) {
+        const file = e.target.files?.[0];
+        e.target.value = "";
+        if (file) {
+            onImportFile(file);
+        }
+    }
+
+    return (
+        <div role="toolbar" aria-label="Contacts actions" className="border-b border-border bg-surface-alt flex items-center gap-0.5 px-2 py-1">
+            <ToolbarButton label="New contact" icon={HiOutlineUserPlus} onClick={onNewContact} hint={shortcuts ? newContactHint : undefined} />
+            <Divider />
+            <ToolbarButton label="Edit" icon={HiOutlinePencil} disabled={selectedCount !== 1} onClick={onEdit} />
+            <ToolbarButton label="Delete" icon={HiOutlineTrash} disabled={!hasSelection} onClick={onDelete} />
+            <Divider />
+            <ToolbarButton label="Email" icon={HiOutlineEnvelope} disabled={!hasSelection} onClick={onEmail} />
+            <ToolbarButton
+                label={allSelectedFavorited ? "Unfavorite" : "Favorite"}
+                icon={allSelectedFavorited ? HiStar : HiOutlineStar}
+                disabled={!hasSelection}
+                onClick={onToggleFavorite}
+            />
+            <ToolbarButton label="Add category" icon={HiOutlineTag} disabled={!hasSelection} onClick={onAddCategory} />
+            <Divider />
+            <ToolbarButton label="Export" icon={HiOutlineArrowUpTray} disabled={!hasSelection} onClick={onExportVCard} />
+            <ToolbarButton label="Import" icon={HiOutlineArrowDownTray} onClick={() => importInputRef.current?.click()} />
+            <input ref={importInputRef} type="file" accept=".vcf" className="sr-only" aria-label="Import contacts file" onChange={handleImportFileChosen} />
+        </div>
+    );
+}

package/apps/shared/components/contacts/layout/ContactsShell.tsx

@@ -10,6 +10,7 @@ import { Folder, Mailbox, listFolders, listMailboxes } from "@rapidmx/react-shar
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Skeleton, { SkeletonList } from "@rapidmx/react-shared/components/feedback/Skeleton.js";
 import AppShell, { AppShellProps } from "../../layout/AppShell.js";
+import { useLocationSearch, useNavigate } from "../../../navigation/AppRouter.js";
 import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
 
 export type ContactsShellProps = Omit<AppShellProps, "active">;
@@ -44,6 +45,7 @@ export default function ContactsShell({
     impersonating,
     impersonationBaseUrl,
     trusted,
+    trustedRoles,
     pluginNav,
     children,
 }: PropsWithChildren<ContactsShellProps>) {
@@ -55,9 +57,18 @@ export default function ContactsShell({
     const [requestedMailboxUid, setRequestedMailboxUid] = useState<string | null>(null);
     const [drawerOpen, setDrawerOpen] = useState(false);
 
+    // Read from the router's location, so a mailbox change (a link, or `navigate()`) takes effect without a page load - and in an
+    // effect, not during render, so the server render and the hydrating render agree.
+    const search = useLocationSearch();
+    const navigate = useNavigate();
     useEffect(() => {
-        setRequestedMailboxUid(new URLSearchParams(window.location.search).get("mailboxUid"));
-    }, []);
+        setRequestedMailboxUid(new URLSearchParams(search).get("mailboxUid"));
+    }, [search]);
+    // Choosing a folder (or mailbox) changes the URL without a page load now, so the drawer that held the choice - which used to go
+    // with the page - is closed here.
+    useEffect(() => {
+        setDrawerOpen(false);
+    }, [search]);
 
     useEffect(() => {
         if (!userUid) {
@@ -142,7 +153,7 @@ export default function ContactsShell({
                             className="w-full text-sm border border-border rounded-sm py-1.5 px-2 bg-surface"
                             value={mailboxUid}
                             onChange={(e) => {
-                                window.location.href = `/contacts?mailboxUid=${encodeURIComponent(e.target.value)}`;
+                                navigate(`/contacts?mailboxUid=${encodeURIComponent(e.target.value)}`);
                             }}
                         >
                             {mailboxes.map((mb) => (
@@ -191,6 +202,7 @@ export default function ContactsShell({
             impersonating={impersonating}
             impersonationBaseUrl={impersonationBaseUrl}
             trusted={trusted}
+            trustedRoles={trustedRoles}
             pluginNav={pluginNav}
         >
             {inner}