# Il menù in basso

Data: 2026-09-25. Chiesto da Paolo il 23 settembre («valutiamo poi una floating
bar in basso, liquid glass Apple»), scelto il 24 fra tre proposte disegnate
(https://claude.ai/artifact/EciV7QN3hVa3r8z5eXMzRQ, la A). La ricerca l'ha
voluta uguale a quella dell'app Foto di iOS 26: «riproporre una UX che gli
utenti conoscono già li fa sentire a casa».

## Dopo la prova tecnica (2026-09-25)

La prova (simulatore iPhone 17 con iOS 27, emulatore Android) ha detto:

- Il menù di sistema funziona su iOS 27: capsula di vetro vera, icone SF
  Symbols, colore della voce scelta. Il campo di ricerca con la X si attiva
  da solo con la tastiera.
- **Ma la lente non si stacca**: con iOS 27 `tabBarSystemItem: 'search'` di
  react-native-screens 4.26 (e 4.28, l'ultima) resta la quarta voce dentro la
  capsula, e il campo di ricerca compare **in alto**, non in basso come in
  Foto. Staccarla vuole l'API `UITab`/`UISearchTab` di UIKit, che la libreria
  non usa ancora. Provato anche a non sovrascrivere il titolo della voce di
  sistema: non cambia niente.
- Su Android le icone vanno date come immagini (la libreria non ha i simboli
  Material): PNG da 24 dp disegnati dai glifi `MaterialIcons` di
  `@expo/vector-icons` (`menu-book`, `folder`, `settings`), in
  `assets/menu/`.
- `@react-navigation/bottom-tabs` 7.19 vuole `@react-navigation/native`
  ≥ 7.4.1: `npx expo install` lo porta da sé.

**Scelta di Paolo: la strada A**, il menù di sistema con la lente dentro la
capsula. Resta tutto di Apple e si aggiornerà da solo. Una capsula nostra
con `expo-glass-effect` (la B) è scartata: ci avrebbe costretti a inseguire
Apple a ogni versione.

**Da tenere d'occhio:** a ogni build nuova si guarda se react-native-screens
ha una versione che stacca la lente su iOS 27; quando c'è, si aggiorna e la
lente va nel suo cerchio senza toccare il resto.

Paolo ha anche chiesto, e si fa:

- **iPhone**: niente più campo di ricerca in cima alle Ricette né dentro una
  categoria; in alto a destra, al posto delle tre icone, **cambia vista e +**.
  Il + tondo in basso sparisce (finiva anche sopra il menù).
- **Android**, secondo le sue regole (Material 3: barra in basso piatta, a
  tutta larghezza, ricerca a pastiglia in cima, + tondo in basso): la barra
  in basso ha **solo Ricette, Categorie e Impostazioni**; la ricerca in cima
  alle Ricette e dentro le categorie **resta com'è oggi**, e resta il **+
  tondo in basso a destra** (alzato sopra la barra). In alto a destra solo
  cambia vista. Niente sezione Cerca su Android: la ricerca c'è già dove
  Android la mette.

## Cosa si vede

### Il menù

- Tre sezioni: **Ricette** (il ricettario di oggi), **Categorie** (la pagina
  «Gestisci categorie» di oggi), **Impostazioni** (la pagina di oggi).
- **iPhone**: la tab bar di sistema, la capsula di vetro di iOS 26 e 27
  (Liquid Glass), con le icone SF Symbols `book`, `folder`, `gearshape` e, come
  quarta voce, la lente (voce di sistema `search`, etichetta «Cerca» data da
  iOS). Scorrendo un elenco verso il basso il menù si rimpicciolisce e torna
  grande risalendo (`tabBarMinimizeBehavior: 'onScrollDown'`).
- **Android**: la barra in basso di sistema (Material 3, piatta, a tutta
  larghezza, pastiglia colorata dietro la voce scelta), **solo le tre
  sezioni**; icone PNG da `assets/menu/`.
- Il colore della voce scelta è l'accento (terracotta, o la sua versione
  chiara nel tema scuro).

### Ricette

**iPhone**
- In alto il marchio «Quanto Basta» e, a destra, **cambia vista e +**. La
  cartella e l'ingranaggio spariscono: sono nel menù.
- Sparisce il campo «Cerca in tutte le ricette» della pagina iniziale e il
  campo «Cerca una ricetta» dentro una categoria: si cerca dalla lente.
- Il + tondo in basso sparisce.
- Dentro una categoria: freccia a sinistra, cambia vista e + a destra.

**Android**
- In alto il marchio e, a destra, cambia vista. La cartella e l'ingranaggio
  spariscono.
- La ricerca in cima (pagina iniziale e dentro una categoria) resta com'è.
- Il + resta tondo in basso a destra, sopra la barra.

Il + fa quello che fa oggi, in tutti e due i posti: una ricetta nuova.
Stessa regola per il + di «Nuova categoria» nella sezione Categorie: in alto
a destra su iPhone, tondo in basso su Android.
Dentro una categoria il menù resta; si torna indietro con la freccia.

### Cerca (solo iPhone)

- Toccando la lente si apre la pagina **«Cerca»** col titolo grande; il campo
  di ricerca di sistema si attiva da sé, con la tastiera aperta e la **X** per
  chiudere (su iOS 27 sta in alto: vedi la prova tecnica).
- Campo vuoto: la sezione **«Recenti»**, le ultime ricette **aperte dalla
  ricerca**, con la foto, in una fila che si scorre di lato. Al massimo 10, la
  più recente per prima. Nessuna recente: sotto il campo non c'è niente.
- Mentre si scrive: al posto dei Recenti le ricette trovate, di tutte le
  categorie, a tessere come l'elenco a griglia (foto, titolo, e sotto la
  categoria col numero di ingredienti e porzioni). La
  ricerca è la stessa di oggi (`filtraRicette`: titolo, senza accenti né
  maiuscole). Nessuna trovata: il testo che la pagina iniziale usa oggi
  (`ricerca.nulla`).
- Toccandone una si apre la ricetta, che entra (o torna) in cima ai Recenti.

### Aprendo una ricetta

Il menù sparisce, come in WhatsApp dentro una chat: la ricetta è a tutto
schermo con la freccia. Lo stesso per Modifica e per l'Anteprima di un import.
Sono già pagine della pila principale, sopra la pagina che contiene il menù:
coprirlo è quello che fanno da sole (verificato nella prova).

### Categorie e Impostazioni

Le pagine di oggi, senza la freccia indietro (sono sezioni, non pagine aperte
da qualche parte). Il resto non cambia: Impostazioni apre ancora l'Anteprima
di un import sopra a tutto.

### Schermi larghi (tablet Android, iPhone Duo aperto)

- I due pannelli restano, dentro la sezione Ricette.
- iPhone: una ricetta aperta dalla sezione Cerca va nel pannello di destra e
  il menù passa da solo a Ricette, dove la si vede.
- Aprendo il Duo con una ricetta a tutto schermo, oggi la ricetta passa nel
  pannello: ora il menù passa anche a Ricette (poteva essere su un'altra).
- Sull'iPhone Duo aperto dove sta il menù lo decide iOS (sull'iPad la tab bar
  sta in alto): si accetta quello che fa il sistema e si guarda nel collaudo.

## Come è fatto

### Le decisioni per sistema, in un modulo puro

`src/ui/logica-menu.ts` (provato con `node --test`, come le altre `logica-*`):
riceve il sistema (`'ios' | 'android'`) e dice

- `conSezioneCerca(os)`: la quarta voce del menù (solo iOS);
- `ricercaNellaPagina(os)`: il campo di ricerca in cima a Ricette ed Elenco
  (solo Android);
- `piuNellaBarra(os)`: il + in alto a destra (iOS) invece che tondo in basso
  (Android).

Le schermate chiamano queste funzioni con `Platform.OS`, senza `if` sul
sistema scritti nei `.tsx`.

### La navigazione

- La pila principale resta: Principale, Dosatore, Modifica, Anteprima.
  Escono GestioneCategorie e Impostazioni, che diventano sezioni.
- Principale diventa il menù: `createNativeBottomTabNavigator` di
  `@react-navigation/bottom-tabs/unstable` (7.19, dipendenza nuova; porta
  `@react-navigation/native` a 7.4), sulle tab native di
  `react-native-screens` 4.26. Voci:
  - **Ricette**: quello che oggi è Principale (la pila Sfoglia con Categorie
    ed Elenco, e sugli schermi larghi il pannello della ricetta), spostato in
    `SezioneRicette`;
  - **Categorie**: GestioneCategorie;
  - **Impostazioni**: Impostazioni;
  - **Cerca** (se `conSezioneCerca`): una pila con la schermata `Cerca`,
    intestazione di sistema con titolo grande e `headerSearchBarOptions`
    (fuoco con `ref.focus()` quando la sezione prende il fuoco: su iOS
    `autoFocus` non esiste), voce `tabBarSystemItem: 'search'`.
- `ParametriNav` perde GestioneCategorie e Impostazioni; nasce
  `ParametriMenu` (Ricette, Categorie, Impostazioni, Cerca). I tipi composti
  seguono lo schema di `PropsSfoglia`.
- `apriRicetta` (contesto dei pannelli) non cambia sul telefono. Sugli schermi
  larghi, oltre a scegliere la ricetta, porta il menù su Ricette.

### I Recenti

- In `src/ui/logica-ricerca.ts`, modulo puro:
  - `RECENTI_MASSIMO = 10`, `CHIAVE_RECENTI = 'ricerca.recenti'`;
  - `conRecente(ids, id)`: l'id in testa, senza doppioni, al massimo 10;
  - `leggiRecenti(salvato)`: dal testo salvato alla lista, `[]` se manca o
    non è una lista di stringhe (mai un errore);
  - `recentiVisibili(ids, ricette)`: le ricette nell'ordine dei Recenti,
    saltando quelle che non ci sono più (cancellate).
- Si salvano come JSON nella tabella `impostazioni`, chiave `ricerca.recenti`,
  come `ricetta.ultima`. Una scrittura fallita va nel log e non ferma niente.

### Cosa si toglie

- Da Categorie: la cartella e l'ingranaggio (tutti e due i sistemi). Su iOS
  anche la ricerca e i suoi risultati, che su Android restano.
- Da Elenco, su iOS: il campo di ricerca.
- Il + tondo, su iOS.
- Da GestioneCategorie e Impostazioni: la freccia indietro.

### Il + su Android

Resta il tasto tondo di oggi, alzato per stare sopra la barra (nella prova
finiva in parte sotto): il margine si prende dall'area sicura della sezione,
che su Android comprende la barra, e si guarda a schermo.

## La prova tecnica (fatta)

Ramo di prova buttato, codice messo da parte (`git stash`, «prova menu»).
Risultati nella prima sezione.

## Cosa non si fa adesso

- Ricerche testuali recenti (le pastiglie sopra il campo in Foto): solo le
  ricette recenti.
- Cercare anche negli ingredienti o nel procedimento: la ricerca resta sul
  titolo, come oggi.
- iPad (`supportsTablet` resta false).

## Collaudo

- Test del modulo `logica-ricerca.ts`: in testa, doppioni, tetto a 10, testo
  salvato rotto o vuoto, ricette cancellate saltate.
- Test di `logica-menu.ts`: le tre decisioni sui due sistemi.
- A schermo, sul simulatore iPhone (iOS 27) e sull'emulatore Android, telefono
  e tablet:
  - iPhone: le quattro voci, il vetro, il rimpicciolirsi, vista e + in alto;
    Cerca: tastiera subito, X, Recenti vuoti e pieni, risultati, apertura, la
    ricetta che sale in testa ai Recenti;
  - Android: le tre voci, la ricerca in cima com'era, il + tondo sopra la
    barra;
  - la ricetta, la modifica e l'anteprima a tutto schermo senza menù;
  - Categorie e Impostazioni senza freccia, l'import dalle Impostazioni;
  - tablet Android: i due pannelli nella sezione Ricette, la ricerca in cima
    al pannello di sinistra;
  - tema scuro e inglese.
- Sul simulatore dell'iPhone Duo, quando esce Xcode 27.1: dove mette il menù,
  e piegare e aprire mentre si è in un'altra sezione.