mirror of
https://github.com/bulwarkmail/webmail.git
synced 2026-11-05 16:16:49 +00:00
Linus Rath
044647ff34
A window snapped to half the screen (640-800 px) or a 1366x768 laptop at 150 % (911 px) got the phone and tablet layout: bottom tab bar, folders in a drawer, Settings as a phone list with a Back arrow. The layout switched at the 64rem (1024 px) breakpoint. Now the phone layout starts below 600 px. From 600 to 1024 px the app is a compact desktop: app rail at the side, folder sidebar folded to its icons (the existing collapsed state, opened per session with its toggle), Settings with its two panes and a narrower page list. Below 840 px the split layout opens a message in the list's place, as the focused layout does. This holds in the browser and the desktop app, in the Pro shell (which now runs from 600 px) and under Mountain View. - `hooks/use-media-query.ts`: classifyWidth, PHONE_BELOW 600, FULL_DESKTOP 1024; the tablet class (`isTablet`) is gone, the store has `isCompact` instead. Plugins still see "tablet" for it. - `app/globals.css`: a `desk:` breakpoint at 37.5rem for the layout classes, and a `tap:` variant for 44px rows on phones and touch screens below 1024 px (was every window below 1024 px). - Touch screens below 1024 px keep swiping list rows (was phones only). - The boot skeletons, boot script, mail app, sidebar, reader, admin shell and calendar, contacts and files follow the new widths. Tests changed with the behaviour: the tablet cases in pro-gate, mail-app-mv-composer-move, mail-app-compose-handoff, mail-app-thread-expand-mark-read, mobile-tour-end and thread-list-item-columns now run on a phone or a compact desktop, as those widths no longer exist as a tablet. mail-app-short-window-tab-bar is replaced by mail-app-compact-layout: a phone on its side is a compact desktop with the rail at the side, so the short-window tab bar rule is gone. Class and media-query assertions follow desk:/tap: and 37.5rem; the 32px-text test uses 1100 px, since 1440 px at 32px is now a compact desktop.
51 lines
1.8 KiB
TypeScript
51 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import type { ReactNode } from 'react';
|
|
import { ArrowLeft } from '@/components/icons';
|
|
import { cn } from '@/lib/utils';
|
|
import { AdminLink } from './admin-link';
|
|
|
|
interface AdminPageHeaderProps {
|
|
title: ReactNode;
|
|
description?: ReactNode;
|
|
/** Buttons on the end side of the header. */
|
|
actions?: ReactNode;
|
|
/** A link back to the parent page, for detail pages. */
|
|
back?: { href: string; label: string };
|
|
/** Something between the back link and the title, such as an icon. */
|
|
leading?: ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
/**
|
|
* The header of an admin page. The mobile shell already shows the page name
|
|
* in its top bar, so the title itself is desktop-only there; the
|
|
* description and the actions stay.
|
|
*/
|
|
export function AdminPageHeader({ title, description, actions, back, leading, className }: AdminPageHeaderProps) {
|
|
return (
|
|
<div className={cn('mb-6 space-y-3', className)}>
|
|
{back && (
|
|
<AdminLink
|
|
href={back.href}
|
|
// The phone shell's top bar already has the back arrow.
|
|
className="hidden desk:inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
|
|
>
|
|
<ArrowLeft className="w-4 h-4" />
|
|
{back.label}
|
|
</AdminLink>
|
|
)}
|
|
<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
|
<div className="flex items-start gap-3 min-w-0">
|
|
{leading}
|
|
<div className="min-w-0">
|
|
<h1 className={cn('text-xl font-semibold text-foreground leading-tight', !back && 'hidden desk:block')}>{title}</h1>
|
|
{description && <p className="text-sm text-muted-foreground mt-1">{description}</p>}
|
|
</div>
|
|
</div>
|
|
{actions && <div className="flex flex-wrap items-center gap-2 shrink-0">{actions}</div>}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|