ad1370ea7e
Some checks are pending
E2E / Playwright e2e (push) Waiting to run
- Introduced turbopack alias for canvas in next.config.mjs. - Updated package.json scripts for development and branding tasks. - Added new dependencies for Tiptap extensions. - Implemented new demo layouts for agenda, contacts, drive, and mail applications. - Enhanced globals.css for improved theming and splash screen animations. - Added OAuth callback handling for drive mounts. - Updated layout components to integrate new demo shells and improve structure.
278 lines
11 KiB
TypeScript
278 lines
11 KiB
TypeScript
import { cn } from "@/lib/utils"
|
|
import { MAIL_SIDEBAR_MENU_SURFACE_CLASS } from "@/lib/mail-chrome-classes"
|
|
import { SUITE_APP_LOGO_TEXT_CLASS } from "@/lib/suite/suite-chrome-classes"
|
|
|
|
/** Menus portés Radix — gris mail en dark (cf. `data-contacts-menu-surface` dans globals.css). */
|
|
export const CONTACTS_MENU_SURFACE_CLASS = cn(
|
|
MAIL_SIDEBAR_MENU_SURFACE_CLASS,
|
|
"bg-mail-surface-elevated text-foreground",
|
|
)
|
|
|
|
/** Fond page contacts : canvas mail (#fafbfc / #202124), pas le noir `background`. */
|
|
export const CONTACTS_SHELL_CLASS = "bg-app-canvas text-foreground"
|
|
|
|
export const CONTACTS_SIDEBAR_CLASS = cn(
|
|
"flex h-full w-60 shrink-0 flex-col border-r border-border bg-mail-surface",
|
|
"transition-transform duration-200 ease-out"
|
|
)
|
|
|
|
export const CONTACTS_CREATE_BTN_CLASS = cn(
|
|
"flex h-14 w-full items-center gap-3 rounded-2xl bg-mail-surface px-4",
|
|
"shadow-md ring-1 ring-border transition-shadow hover:bg-accent hover:shadow-lg"
|
|
)
|
|
|
|
export const CONTACTS_NAV_ACTIVE_CLASS =
|
|
"bg-mail-nav-selected font-medium text-mail-nav-selected"
|
|
|
|
export const CONTACTS_NAV_ITEM_CLASS =
|
|
"text-foreground hover:bg-mail-nav-hover"
|
|
|
|
export const CONTACTS_NAV_ICON_MUTED = "text-muted-foreground"
|
|
|
|
export const CONTACTS_MUTED_TEXT = "text-muted-foreground"
|
|
|
|
export const CONTACTS_HEADING_TEXT = "text-foreground"
|
|
|
|
export const CONTACTS_SEARCH_BAR_CLASS = cn(
|
|
"flex h-10 w-full max-w-[720px] items-center gap-2 rounded-full border border-mail-border-subtle bg-mail-surface-muted px-3",
|
|
"shadow-sm transition-[border-color,box-shadow]",
|
|
"focus-within:border-mail-border focus-within:shadow-md sm:h-12 sm:gap-3 sm:px-4",
|
|
)
|
|
|
|
export const CONTACTS_SEARCH_INPUT_CLASS =
|
|
"flex-1 bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground"
|
|
|
|
export const CONTACTS_ICON_BTN_CLASS =
|
|
"text-muted-foreground hover:bg-accent hover:text-foreground"
|
|
|
|
export const CONTACTS_TABLE_HEADER_CLASS =
|
|
"grid items-center gap-2 border-b border-border py-1.5 text-sm font-medium text-muted-foreground"
|
|
|
|
export const CONTACTS_TABLE_HEADER_CHECKBOX_HIT_CLASS =
|
|
"flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-full hover:bg-muted/60 -m-0.5"
|
|
|
|
export const CONTACTS_TABLE_TOOLBAR_CLASS =
|
|
"mb-2 flex h-10 items-center justify-between gap-2"
|
|
|
|
/** Toolbar + en-têtes colonnes — sticky ensemble au scroll. */
|
|
export const CONTACTS_TABLE_STICKY_HEAD_CLASS = cn(
|
|
"sticky top-0 z-10 -mx-3 bg-app-canvas px-3 sm:-mx-6 sm:px-6",
|
|
)
|
|
|
|
export const CONTACTS_TABLE_ROW_CLASS = cn(
|
|
"grid w-full cursor-pointer items-center gap-2 border-b border-border py-2.5 text-left text-sm",
|
|
"text-foreground transition-colors hover:bg-accent/50"
|
|
)
|
|
|
|
export const CONTACTS_FIELD_CLASS = cn(
|
|
"rounded border border-mail-border bg-mail-surface px-2 py-1 text-sm text-foreground outline-none",
|
|
"focus:border-ring focus:ring-1 focus:ring-ring"
|
|
)
|
|
|
|
export const CONTACTS_PRIMARY_BTN_CLASS = cn(
|
|
"rounded-full bg-primary px-5 text-sm font-medium text-primary-foreground hover:bg-primary/90"
|
|
)
|
|
|
|
export const CONTACTS_OUTLINE_BTN_CLASS = cn(
|
|
"inline-flex h-9 items-center gap-2 rounded-full border border-border bg-mail-surface px-5",
|
|
"text-sm font-medium text-foreground transition-colors hover:bg-accent"
|
|
)
|
|
|
|
/** Volet contacts (Sheet latéral dans la messagerie) */
|
|
export const CONTACTS_PANEL_SHELL_CLASS =
|
|
"flex h-full flex-col bg-mail-surface text-foreground"
|
|
|
|
export const CONTACTS_PANEL_HEADER_CLASS =
|
|
"flex h-12 shrink-0 items-center justify-between border-b border-border px-4"
|
|
|
|
export const CONTACTS_PANEL_HEADER_SEARCH_CLASS =
|
|
"flex h-12 shrink-0 items-center gap-2 border-b border-border px-4"
|
|
|
|
export const CONTACTS_PANEL_TITLE_CLASS = SUITE_APP_LOGO_TEXT_CLASS
|
|
|
|
export const CONTACTS_PANEL_ICON_BTN_CLASS =
|
|
"h-8 w-8 rounded-full text-muted-foreground"
|
|
|
|
export const CONTACTS_PANEL_SECTION_LABEL_CLASS =
|
|
"px-4 py-2 text-xs font-medium text-muted-foreground"
|
|
|
|
export const CONTACTS_PANEL_LETTER_CLASS =
|
|
"px-4 py-1 text-xs font-medium uppercase text-muted-foreground"
|
|
|
|
export const CONTACTS_PANEL_ROW_CLASS =
|
|
"hover:bg-accent cursor-pointer"
|
|
|
|
export const CONTACTS_PANEL_CREATE_ROW_CLASS = cn(
|
|
"flex w-full items-center gap-3 px-4 h-12",
|
|
CONTACTS_PANEL_ROW_CLASS
|
|
)
|
|
|
|
export const CONTACTS_PANEL_LINK_TEXT_CLASS = "text-sm font-medium text-primary"
|
|
|
|
export const CONTACTS_PANEL_SEARCH_INPUT_CLASS = cn(
|
|
"flex-1 bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground"
|
|
)
|
|
|
|
export const CONTACTS_PANEL_SAVE_BTN_CLASS = cn(
|
|
"rounded-full bg-muted px-5 h-9 text-sm font-medium text-foreground",
|
|
"hover:bg-accent disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
|
|
)
|
|
|
|
export const CONTACTS_PANEL_TAG_CLASS = cn(
|
|
"inline-flex items-center gap-1 rounded-full border border-border bg-muted px-2.5 py-0.5 text-xs text-foreground"
|
|
)
|
|
|
|
export const CONTACTS_PANEL_ADD_TAG_BTN_CLASS = cn(
|
|
"inline-flex items-center gap-1 rounded-full border border-border px-2.5 py-0.5 text-xs text-muted-foreground hover:bg-accent"
|
|
)
|
|
|
|
export const CONTACTS_PANEL_AVATAR_PLACEHOLDER_CLASS =
|
|
"flex h-20 w-20 items-center justify-center rounded-full bg-muted text-muted-foreground"
|
|
|
|
export const CONTACTS_PANEL_CARD_CLASS = "space-y-2 rounded-lg border border-mail-border p-3"
|
|
|
|
export const CONTACTS_PANEL_DIVIDER_CLASS = "border-t border-border"
|
|
|
|
export const CONTACTS_PANEL_MUTED_ICON_CLASS = "text-muted-foreground"
|
|
|
|
export const CONTACTS_PANEL_PRIMARY_ACTION_CLASS = cn(
|
|
"inline-flex h-9 items-center gap-2 rounded-full bg-primary/15 px-5 text-sm font-medium text-primary",
|
|
"transition-colors hover:bg-primary/25"
|
|
)
|
|
|
|
export const CONTACTS_PANEL_SECONDARY_ICON_BTN_CLASS = cn(
|
|
"flex h-9 w-9 items-center justify-center rounded-full border border-border text-muted-foreground hover:bg-accent"
|
|
)
|
|
|
|
export const CONTACTS_PANEL_FLOATING_INPUT_CLASS = cn(
|
|
"peer h-[42px] w-full rounded border border-mail-border bg-mail-surface px-3 pt-4 pb-1 text-sm text-foreground outline-none transition-colors",
|
|
"focus:border-ring focus:ring-1 focus:ring-ring"
|
|
)
|
|
|
|
export const CONTACTS_PANEL_FLOATING_TEXTAREA_CLASS = cn(
|
|
"peer w-full rounded border border-mail-border bg-mail-surface px-3 pt-5 pb-2 text-sm text-foreground outline-none transition-colors resize-none",
|
|
"focus:border-ring focus:ring-1 focus:ring-ring"
|
|
)
|
|
|
|
export const CONTACTS_PANEL_FLOATING_LABEL_CLASS =
|
|
"pointer-events-none absolute left-3 bg-mail-surface transition-all duration-150"
|
|
|
|
export const CONTACTS_PANEL_SELECT_TRIGGER_CLASS = cn(
|
|
"!h-[42px] !min-h-[42px] w-full rounded border border-mail-border bg-mail-surface px-3 py-0 text-sm text-foreground shadow-none",
|
|
"data-[size=default]:!h-[42px] focus:border-ring focus:ring-1 focus:ring-ring"
|
|
)
|
|
|
|
export const CONTACTS_PANEL_POPOVER_ITEM_CLASS =
|
|
"flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm hover:bg-accent"
|
|
|
|
/** Page /contacts (plein écran) */
|
|
export const CONTACTS_PAGE_ICON_BTN_CLASS =
|
|
"h-10 w-10 rounded-full text-muted-foreground"
|
|
|
|
export const CONTACTS_PAGE_SAVE_BTN_CLASS = cn(
|
|
CONTACTS_PANEL_SAVE_BTN_CLASS,
|
|
"px-6 py-2.5",
|
|
)
|
|
|
|
export const CONTACTS_PAGE_TITLE_CLASS = "text-2xl font-normal text-foreground"
|
|
|
|
export const CONTACTS_PAGE_SECTION_TITLE_CLASS = "text-lg font-normal text-foreground"
|
|
|
|
export const CONTACTS_PAGE_HEADING_CLASS = cn("font-normal", CONTACTS_HEADING_TEXT)
|
|
|
|
export const CONTACTS_PAGE_CARD_CLASS = cn(
|
|
"min-w-0 rounded-xl border border-mail-border bg-mail-surface p-5 shadow-sm",
|
|
"dark:bg-mail-surface-elevated dark:shadow-[0_1px_4px_rgba(0,0,0,0.35)]",
|
|
)
|
|
|
|
/** Conteneur masonry discovery (2 colonnes flex en lg+) */
|
|
export const CONTACTS_DISCOVERY_CARD_MASONRY_ROOT_CLASS = "flex flex-col gap-5"
|
|
|
|
export const CONTACTS_DISCOVERY_CARD_MASONRY_COLUMN_CLASS =
|
|
"flex min-w-0 flex-1 flex-col gap-5"
|
|
|
|
export const CONTACTS_DISCOVERY_CARD_MASONRY_ITEM_ENTER_CLASS = cn(
|
|
"animate-in fade-in-0 slide-in-from-bottom-4 duration-300 ease-out",
|
|
"motion-reduce:animate-none",
|
|
)
|
|
|
|
/** Sentinel chargement progressif — pleine largeur sous les colonnes */
|
|
export const CONTACTS_DISCOVERY_CARD_MASONRY_SENTINEL_CLASS = cn(
|
|
"flex w-full flex-col items-center justify-center py-6",
|
|
)
|
|
|
|
/** @deprecated */
|
|
export const CONTACTS_DISCOVERY_CARD_MASONRY_CLASS = CONTACTS_DISCOVERY_CARD_MASONRY_ROOT_CLASS
|
|
|
|
/** @deprecated */
|
|
export const CONTACTS_DISCOVERY_CARD_MASONRY_ITEM_CLASS = "min-w-0"
|
|
|
|
/** @deprecated Utiliser DiscoveryCardsMasonry */
|
|
export const CONTACTS_DISCOVERY_CARD_GRID_CLASS = CONTACTS_DISCOVERY_CARD_MASONRY_ROOT_CLASS
|
|
|
|
export const CONTACTS_PAGE_CARD_INNER_DIVIDER_CLASS =
|
|
"mt-3 border-t border-mail-border pt-3"
|
|
|
|
/** Chips discovery (signatures, champs suggérés) — lisibles sur carte en dark mode */
|
|
export const CONTACTS_DISCOVERY_CHIP_CLASS = cn(
|
|
"inline-flex max-w-full items-center gap-0.5 rounded-full border px-2 py-0.5 text-xs",
|
|
"border-mail-list-chip-border bg-mail-list-chip-muted text-mail-list-chip-text",
|
|
)
|
|
|
|
/** Panneau secondaire dans une carte discovery (signature, détail champ) */
|
|
export const CONTACTS_DISCOVERY_INNER_PANEL_CLASS = cn(
|
|
"rounded-md border border-mail-border bg-mail-surface-muted/70 p-2",
|
|
"dark:border-mail-border dark:bg-mail-surface-muted",
|
|
)
|
|
|
|
/** Ligne champ par champ (Ajouter des coordonnées) */
|
|
export const CONTACTS_DISCOVERY_FIELD_ROW_CLASS = cn(
|
|
"flex items-center justify-between gap-2 rounded-md border border-mail-border bg-mail-surface-muted/50 px-2 py-1.5",
|
|
"dark:bg-mail-surface-muted",
|
|
)
|
|
|
|
/** Cellule de groupe dans la grille dense des cartes discovery */
|
|
export const CONTACTS_DISCOVERY_GRID_CELL_CLASS = cn(
|
|
"min-w-0 rounded-lg border border-mail-border-subtle bg-mail-surface-muted/40 p-2",
|
|
"dark:border-mail-border-subtle dark:bg-mail-surface-muted/70",
|
|
)
|
|
|
|
export const CONTACTS_PAGE_LINK_BTN_CLASS =
|
|
"text-sm font-medium text-primary hover:text-primary/80"
|
|
|
|
export const CONTACTS_PAGE_AVATAR_PLACEHOLDER_LARGE_CLASS =
|
|
"flex h-28 w-28 items-center justify-center rounded-full bg-muted text-muted-foreground"
|
|
|
|
export const CONTACTS_PAGE_AVATAR_ADD_BADGE_CLASS =
|
|
"absolute -bottom-1 -right-1 flex h-8 w-8 items-center justify-center rounded-full bg-primary text-primary-foreground shadow"
|
|
|
|
export const CONTACTS_PAGE_TAG_CLASS = cn(
|
|
"inline-flex items-center gap-1 rounded border border-border px-2 py-0.5 text-xs text-foreground",
|
|
)
|
|
|
|
export const CONTACTS_PAGE_BANNER_CLASS =
|
|
"mb-4 flex items-center justify-between rounded-lg bg-muted px-4 py-3"
|
|
|
|
export const CONTACTS_PAGE_INFO_BANNER_CLASS = cn(
|
|
"mb-6 flex items-start gap-4 rounded-xl border border-mail-border bg-mail-surface-muted p-5",
|
|
"dark:bg-mail-surface dark:border-mail-border",
|
|
)
|
|
|
|
export const CONTACTS_PAGE_INFO_BANNER_ICON_CLASS =
|
|
"flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-primary/15"
|
|
|
|
export const CONTACTS_PAGE_TAB_ACTIVE_CLASS =
|
|
"rounded-full bg-primary/20 px-4 py-2 text-sm font-medium text-foreground"
|
|
|
|
export const CONTACTS_PAGE_TAB_INACTIVE_CLASS = cn(
|
|
"rounded-full bg-muted px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-accent",
|
|
)
|
|
|
|
export const CONTACTS_PAGE_TEXTAREA_CLASS = cn(
|
|
CONTACTS_FIELD_CLASS,
|
|
"h-24 w-full rounded-lg px-3 py-2",
|
|
)
|
|
|
|
export const CONTACTS_CREATE_BTN_LABEL_CLASS =
|
|
"flex-1 text-left text-sm font-medium text-foreground"
|