Mac and browser

At the Mac you sit down. Density is allowed here: the whole week at once, tables, columns, keyboard. The Mac is the only place where safe, vault and finances open fully.

Mac app and web app

There are two ways onto a large screen, and both share the same layout:

• The Mac app from apps/apple (SwiftUI, one target next to iPhone and iPad). Only it can do what needs native code: Face ID for the vault, Secure Enclave, notifications, shortcuts.
• The web app at app.hey-albert.app (Next.js, apps/web) for any browser, including computers without the App Store. The web app is the surface for planning and paperwork. The vault is not here, because the browser has no Secure Enclave.

Sidebar, header, greeting, grid and cards are the same components. Whoever designs a surface for the Mac designs it for both.

Window and measurements

The reference screens are drawn for a 1440 × 900 pt window. docs/12-roadmap.md also names 1600 × 1000 pt. The window is freely resizable. Below 1200 pt width the sidebar collapses (proposal).

Week in the hour grid

The hero view. Seven columns, an hour grid, the now line. This is where the week is shared out.

Sidebar collapsed

Collapsed, the sidebar stays 72 pt wide. All the width gained goes to the columns.

<LeisteMac aktiverOrt="Woche" onWahl={setOrt} style={{ height: "100%" }} />
<LeisteMac eingeklappt fassung="pille" aktiverOrt="Woche" />

/**
 * Die schwarze Leiste auf dem Mac - voll (220 px) oder eingeklappt (72 px) als Block oder als Pille.
 */
export interface LeisteOrt { name: string; zeichen: string; zaehler?: number }
export interface LeisteGruppe { gruppe: string; eintraege: LeisteOrt[] }
export interface LeisteMacProps {
  /** Der Ort, auf dem man steht: "Heute" | "Woche" | "Eingang" | "Essen" | ... */
  aktiverOrt?: string;
  /** Gruppen der Navigation. Standard: Flächen, Bereiche, Persönlich. */
  orte?: LeisteGruppe[];
  eingeklappt?: boolean;
  /** Eingeklappt gibt es zwei Fassungen: schmaler "block" oder rundum abgerundete "pille",
   *  bei der der aktive Ort als rosa Kreis seitlich heraustritt. */
  fassung?: "block" | "pille";
  /** Der Mensch unten in der Leiste. */
  ich?: string;
  onWahl?: (ort: string) => void;
  onKlappen?: () => void;
  onProfil?: () => void;
  style?: React.CSSProperties;
}
export function LeisteMac(props: LeisteMacProps): JSX.Element;
export const ORTE: LeisteGruppe[];

Areas with list and side column

Tasks, Important, Joy and Household follow one pattern: title with a count line, open items at the top, a table, a side column on the right.

The Sunday round

The Sunday round is a surface of its own without a sidebar. Eight guided steps, large type for the family circle, one person’s turn at a time. The round runs from the Mac or iPad to the TV via AirPlay. The screen is drawn for 1920 × 1080 pt.

Keyboard

On the Mac everything works with the keyboard. Focus is always visible: a 2 pt ring in open-pink with a 2 pt offset, only on :focus-visible.

The shortcuts only appear in the quick menu on the Mac. Not on iPhone and iPad.

Roles on the Mac

Every surface on the Mac

What the Mac does not have

• Ticking off the take-along list, leaving and arriving, the shopping list in the store. That happens on the way, on the iPhone and the watch.
• Scanning letters and photographing a textbook page. That is what the iPhone camera is for.
• HealthKit, so movement and health. It does not exist on the Mac.
• Child spaces for children under 13.