feat(ui): home stile Apple Wallet + restyle Pocket#32
Open
juni93 wants to merge 1 commit into
Open
Conversation
- Home: griglia -> carte impilate stile Apple Wallet; tap espande il barcode inline - Ricerca: apre automaticamente l'unico risultato (zero tap per il codice) - Contrasto tessere: pick WCAG reale, leggibile su brand verdi/arancioni (Leroy Merlin) - FAB circolare incastonato + bottom-bar a 3 slot + safe-area iOS - Spazio in fondo per non coprire l'ultima carta - Pill versione, app-bar, fullscreen e icon-picker resi theme-aware (dark/light) - theme-color PWA indigo; header e spaziature coerenti tra le viste - Rimosso CardTile (sostituito da WalletCard); fix gap-* -> ga-*
Owner
|
@juni93 carino! ti segnalo un mini bug. Registrazione.schermo.2026-06-27.alle.22.17.12.mov |
savez
reviewed
Jun 27, 2026
Comment on lines
+10
to
+22
| const openId = ref(null) | ||
|
|
||
| // Quando i filtri lasciano un solo risultato (es. ricerca con un match), | ||
| // la apriamo automaticamente: il codice è pronto senza un tap in più. | ||
| // Legato all'id dell'unico match — non si riapre a ogni tasto se lo chiudi. | ||
| const soleMatchId = computed(() => (cards.filtered.length === 1 ? cards.filtered[0].id : null)) | ||
| watch(soleMatchId, (id) => { | ||
| if (id) openId.value = id | ||
| }) | ||
|
|
||
| function onToggle(id) { | ||
| openId.value = openId.value === id ? null : id | ||
| } |
Owner
There was a problem hiding this comment.
Bug: con la ricerca che lascia un solo risultato la card si auto-apre, ma cancellando la ricerca non si richiude. Causa: il watch(soleMatchId) apre soltanto (if (id) openId.value = id) e non chiude mai quando il match unico finisce.
Suggerimento: tracciare l'id aperto automaticamente e richiuderlo quando il match unico finisce, senza toccare le aperture manuali.
Suggested change
| const openId = ref(null) | |
| // Quando i filtri lasciano un solo risultato (es. ricerca con un match), | |
| // la apriamo automaticamente: il codice è pronto senza un tap in più. | |
| // Legato all'id dell'unico match — non si riapre a ogni tasto se lo chiudi. | |
| const soleMatchId = computed(() => (cards.filtered.length === 1 ? cards.filtered[0].id : null)) | |
| watch(soleMatchId, (id) => { | |
| if (id) openId.value = id | |
| }) | |
| function onToggle(id) { | |
| openId.value = openId.value === id ? null : id | |
| } | |
| const openId = ref(null) | |
| // Traccia la carta aperta automaticamente dal match unico, così possiamo | |
| // richiuderla quando la ricerca viene cancellata/allargata. | |
| const autoOpenedId = ref(null) | |
| // Quando i filtri lasciano un solo risultato (es. ricerca con un match), | |
| // la apriamo automaticamente: il codice è pronto senza un tap in più. | |
| const soleMatchId = computed(() => (cards.filtered.length === 1 ? cards.filtered[0].id : null)) | |
| watch(soleMatchId, (id) => { | |
| if (id) { | |
| openId.value = id | |
| autoOpenedId.value = id | |
| } else if (autoOpenedId.value) { | |
| // Match unico finito (ricerca cancellata/allargata): richiudi solo ciò | |
| // che avevamo aperto noi, lasciando stare un'apertura manuale. | |
| if (openId.value === autoOpenedId.value) openId.value = null | |
| autoOpenedId.value = null | |
| } | |
| }) | |
| function onToggle(id) { | |
| openId.value = openId.value === id ? null : id | |
| autoOpenedId.value = null // interazione manuale: non più "automatica" | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Cosa cambia
Restyle della UI con due livelli:
Nuovo look "Apple Wallet" per la home
Ingrandisci/Dettaglio. Una sola aperta alla volta, animazione fluida.Fix e polish (direzione "Pocket" indigo mantenuta)
contrast.js: pick WCAG reale (max-contrast) → nomi leggibili su brand verdi/arancioni (es. Leroy Merlin passava da 2.29:1 a 7.92:1).theme-colorPWA allineato alla palette indigo; header/spaziature coerenti tra le viste.gap-*→ga-*(Vuetify 3).CardTile.vue(sostituito daWalletCard.vue).Perché
Miglioria UX: la home aveva una griglia poco distintiva, alcuni difetti di leggibilità (pill invisibile in light, nomi tessera a basso contrasto su certi brand, fullscreen accecante in dark) e il FAB copriva il contenuto. Il Wallet rende il gesto "mostra il codice alla cassa" immediato.
Test plan
npm testverde (68/68)npm run buildverdenpm run lintverde (0 errori)npm run devnpm run previewTipo di cambiamento
Note per il review
#0082C3(dark 4.30 vs white 4.22), WCAG-max-correct, AA-large ok.CardTileeliminato perché interamente sostituito daWalletCard(unico utilizzo era la home).npm ciinstalla una Prettier più recente di quella con cui erano committati alcuni file →format:checksegnala file non toccati da questa PR (drift pre-esistente). La CI non esegueformat:check, quindi non blocca; eventuale cleanup in unchore/separato.