# Due pannelli sugli schermi larghi

Data: 2026-09-24. Deciso con Paolo il giorno dopo le prime schermate sul
tablet, dove l'app, pensata per il telefono, si allargava a tutto lo schermo
con righe lunghissime. Serve anche all'iPhone Duo (pieghevole, esce il 23
ottobre 2026), per cui Apple chiede layout che si adattano, stato conservato
quando si piega o si apre, e il funzionamento in Split View.

## Cosa si vede

Da **700 punti di larghezza** in su lo schermo si divide in due:

- **a sinistra la parte "sfoglia"**: le categorie, e toccandone una le sue
  ricette, con la freccia indietro. Sono le schermate di oggi (Categorie ed
  Elenco), con tutto quello che fanno: ricerca, righe o griglia, pulsante +;
- **a destra la ricetta aperta**, la stessa di oggi: porzioni, dosi da
  toccare, procedimento, condividi e modifica. Senza freccia indietro, perché
  non c'è un indietro: è un pannello, non una pagina.

Il pannello di sinistra è largo quanto un telefono: il 40% dello schermo,
tenuto fra 320 e 420 punti. Il resto va alla ricetta. Il confine è fisso,
non si trascina.

Sotto i 700 punti (i telefoni, l'iPhone Duo chiuso) non cambia niente.

Si attiva sui tablet Android in verticale e sull'iPhone Duo aperto. L'app
resta solo verticale (il blocco di `with-android-solo-verticale`); l'iPad non
si attiva in questa versione (`supportsTablet: false`), si farà dopo, quando
i due pannelli saranno collaudati.

### Scelte fatte con Paolo

- **Struttura**: sfoglia a sinistra, ricetta a destra (come Mail o Note su
  iPad). Scartate le tre colonne (strette in verticale) e l'elenco unico con
  filtro (le categorie perderebbero la loro pagina).
- **All'apertura** il pannello di destra mostra **l'ultima ricetta aperta**,
  ricordata anche dopo aver chiuso l'app. Se non ce n'è (prima volta, o
  cancellata) mostra un **invito**: il segno «q.b.» grande e tenue, e sotto
  «Scegli una ricetta».
- **Modifica e nuova ricetta** si aprono **a schermo intero** sopra i due
  pannelli, come oggi sul telefono: il modulo ha molti campi, e così non si
  tocca per sbaglio un'altra ricetta a sinistra perdendo le modifiche.
  Salvando si torna ai due pannelli. Lo stesso vale per Impostazioni,
  Gestisci categorie e l'anteprima di un import.
- **iPad**: in una versione successiva.

### Dettagli decisi da me

- La ricetta aperta resta **evidenziata** nell'elenco di sinistra (fondo
  tenue, come una riga selezionata). Nella griglia, un bordo nell'accento.
- Cambiando categoria a sinistra, la ricetta a destra **resta** finché non se
  ne tocca un'altra.
- Una **ricetta nuova**, salvata, si ritrova aperta a destra: è quella a cui
  si stava pensando. Sul telefono resta come oggi (si torna all'elenco).
- Se la ricetta aperta viene cancellata, a destra torna l'invito e l'ultima
  ricetta ricordata si dimentica.
- **Piegare e aprire** (iPhone Duo, e ogni cambio di larghezza):
  - da due pannelli a uno, con una ricetta aperta: ci si ritrova sulla
    ricetta, a tutto schermo, e la freccia indietro riporta all'elenco da cui
    si veniva;
  - da uno a due, con una ricetta in primo piano: si torna ai due pannelli
    con quella ricetta a destra.

  Le porzioni o la dose scelte in quel momento si perdono (sono stato di
  sessione, si ricalcolano dall'originale): accettabile per la prima
  versione, da rivedere se nel collaudo sul Duo dà fastidio.
- **Colonne delle griglie** decise dalla larghezza vera di chi le disegna:
  una card ogni 180 punti circa, almeno 2 e al massimo 4. Nel pannello di
  sinistra restano 2; dove l'elenco ha più spazio diventano di più da sole.

## Come è fatto

### La logica, in un modulo puro (`src/ui/logica-pannelli.ts`)

Come per le altre `logica-*`, le decisioni stanno fuori dai `.tsx`, perché
`node --test` non carica i componenti:

- `duePannelli(larghezza)`: vero da 700 in su;
- `larghezzaSfoglia(larghezza)`: il 40%, fra 320 e 420;
- `colonneGriglia(larghezza)`: fra 2 e 4, una ogni 180; `colonne(vista,
  larghezza)` in `logica-viste.ts` la usa al posto del 2 fisso;
- `ricettaIniziale(salvata, esiste)`: l'id salvato se la ricetta c'è ancora,
  altrimenti nessuna (e allora l'invito);
- `dopoCambioLarghezza(prima, dopo, stato)`: cosa fare quando si passa da uno
  a due pannelli o viceversa: aprire la ricetta a tutto schermo, oppure
  chiuderla e metterla a destra, oppure niente.

La chiave `ricetta.ultima` nella tabella `impostazioni` ricorda l'ultima
ricetta aperta, su tutti e due i layout.

### La navigazione

Oggi c'è una pila sola: Categorie → Elenco → Dosatore, più Modifica,
Impostazioni, Gestisci categorie e Anteprima.

Diventa così:

- la pila principale ha una prima pagina, **Principale**, e sopra le pagine a
  schermo intero di oggi (Dosatore, Modifica, Gestisci categorie,
  Impostazioni, Anteprima);
- Principale contiene una **pila "sfoglia"** con Categorie ed Elenco. Sul
  telefono occupa tutto; sugli schermi larghi sta a sinistra, e a destra c'è
  il pannello della ricetta.

La pila sfoglia esiste in tutti e due i layout: piegare o aprire non la
smonta, e l'elenco resta dov'era.

Aprire una ricetta passa da una funzione sola, `apriRicetta(id)`, data da un
contesto: sugli schermi larghi sceglie la ricetta del pannello, sul telefono
mette il Dosatore in cima alla pila come oggi. Categorie ed Elenco chiamano
lei e non sanno in che layout sono. Oggi le chiamate sono due: in
`Categorie.tsx` (i risultati della ricerca) e in `Elenco.tsx`.

### Il Dosatore in due pezzi

`Dosatore.tsx` diventa:

- **`SchedaRicetta`**: tutto il contenuto di oggi, che riceve l'id della
  ricetta e due funzioni (indietro, che nel pannello non c'è, e «cancellata»);
- **`Dosatore`**: la pagina del telefono, che mette la scheda a tutto schermo
  con la freccia indietro.

Il pannello di destra usa la stessa `SchedaRicetta`. Una sola copia del
codice che fa le dosi. Lo schermo resta acceso finché una scheda è
visibile, in tutti e due i casi.

### L'invito

Un componente piccolo: il segno «q.b.» (quello dell'icona) in tinta tenue,
centrato, e sotto «Scegli una ricetta» / «Pick a recipe».

## Cosa non si fa adesso

- iPad (`supportsTablet` resta false).
- La rotazione in orizzontale: l'app resta verticale anche sui tablet.
  Quando si toglierà il blocco (con l'SDK Android 37 Google non lo rispetterà
  più), i due pannelli saranno già pronti: in orizzontale un tablet è largo
  più di 700.
- Il confine trascinabile fra i pannelli.
- Tenere le porzioni scelte quando si piega o si apre.

## Collaudo

- Test del modulo `logica-pannelli.ts`: le soglie (699 e 700, i limiti di 320
  e 420, le colonne a 359, 360, 540, 720, 2000), la ricetta iniziale (salvata
  e ancora presente, salvata e cancellata, mai salvata) e i passaggi di
  larghezza in tutte e due le direzioni, con e senza ricetta aperta.
- A schermo, prima di chiedere a Paolo:
  - emulatore Pixel Tablet in verticale: i due pannelli, l'invito, l'ultima
    ricetta alla riapertura, modifica a tutto schermo e ritorno, cancellazione
    della ricetta aperta;
  - emulatore del telefono e simulatore dell'iPhone: niente di diverso da
    oggi;
  - simulatore dell'iPhone Duo, appena esce Xcode 27.1: aperto, chiuso,
    riaperto con una ricetta in mezzo, e in Split View a metà schermo (sotto
    i 700 punti deve tornare al layout del telefono).