Feature/cu 8678ugunq - Add UI components for the new `GlobalSearch` page

[cosimonegri]

La funzionalità di ricerca effettiva verrà implementata in una PR successiva. Scrivere qualcosa nella barra di ricerca per visualizzare dei risultati.

Consiglio di revisionarie questa PR un commit alla volta.

Un paio di note:

1. Non sono molto convinto del bottone search nella homepage. Magari potrebbe diventare una semplice icona in alto a sinistra nel tray, al posto della scritta polifemo che alla fine non credo sia essenziale (a patto che poi riusciamo a riempire lo spazio vuoto nella homepage in qualche modo)
2. Il componente SearchTagFilter è un po' una copia di OutlinedButton, avevo pensato di unificarli in un solo componente (magari buttare addirittura tutto dentro al componente Button generale), però lo farò in un'altra PR

[PoliNetwork-ClickUp]

Task linked: CU-8678ugunq Componenti grafici e interazioni di base

[github-actions[bot]]

Updated task status CU-8678ugunq to: in review

[angeousta]

ma perché la barra è così piccola? @cosimonegri

[cosimonegri]

@angeousta Perchè quella non deve essere più una barra di ricerca, ma un semplice bottone che porta alla pagina di ricerca. Non avevo un design da seguire e quindi sono andato un po' a sentimento, mantenendo colori simili ma rimpicciolendolo

Poi se un designer vuole metterci la mano lo possiamo cambiare, però per me potremmo anche farla diventare un'icona nella barra in alto (come impostazioni, notifiche e downloads)

[angeousta]

Sentiamo cbg, l'idea dell'icona in alto a DX è carina

[DiegoZaff]

La UI della pagina mi piace molto. Però la barra di ricerca la terrei espansa come era prima e magari metterei una hero animation della barra di ricerca (e forse anche del bottomsheet bianca) che si alza e va al suo posto quando l'utente clicca sulla barra di ricerca? Cosa ne pensi?

Simile a quello che avevo fatto per le notifiche.

Basta aggiungere un metodo di questo tipo nello stackNavigator alla pagina in cui arriva l'animazione (o anche da cui parte invertendo la route di arrivo con quella di partenza).

sharedElements={(route, otherRoute, showing) => {

          if (otherRoute.name === "Home") {
            return ["search-bar-key"]
          }
        }}

e poi basta passare come prop a entrambi gli elementi che costituisco la hero animation la key "search-bar-key"

[toto04]

allora super carina, sono felice che abbiamo tutti un'idea leggermente diversa su come questa cosa dovrebbe apparire ahah io personalmente mi sarei immaginato una cosa un po' organica, tipo, la View contenete la barra di ricerca e il menu si alza quando la barra è selezionata fino a coprire la scritta POLIFEMO in grande, il bottom sheet delle news si abbassa e scompare dallo schermo e in alto a sinistra viene mostrata la scritta polifemo piccola tramite lo stesso event che la fa apparire con l'alzarsi del bottom sheet, il menu principale può fare fade out e i bottoni per i filtri fade in, troppo complicato?

[cosimonegri]

allora super carina, sono felice che abbiamo tutti un'idea leggermente diversa su come questa cosa dovrebbe apparire ahah io personalmente mi sarei immaginato una cosa un po' organica, tipo, la View contenete la barra di ricerca e il menu si alza quando la barra è selezionata fino a coprire la scritta POLIFEMO in grande, il bottom sheet delle news si abbassa e scompare dallo schermo e in alto a sinistra viene mostrata la scritta polifemo piccola tramite lo stesso event che la fa apparire con l'alzarsi del bottom sheet, il menu principale può fare fade out e i bottoni per i filtri fade in, troppo complicato?

@toto04 Anche io all'inizio l'avevo pensata in questo modo, poi ho desistito pensando fosse una roba troppo autistica da fare ahahha, ma sono contento che sia un'idea condivisa. Mi metto un po' a studiare le animazioni in react native e vedo cosa esce