UI library implementation

[elevchyt]

Description

This is the new UI (aka web2).
It uses Mantine as its UI library for basic components, charts, forms & simple transitions.
Usage of route handlers & server actions has been implemented to handle data fetching/sending.

Known issues are:

• Language picker doesn't update its dropdown value (language/locale picking works as expected, though)
• Global (or parent) state must be implemented to communicate insights filtering changes between components like group-filters & order-filters
• Forgot password user feedback improvements (expired tokens etc.)
• Auth forms need improved button interactions (enabled/disabled state can be a little buggy)
• CPM sorting hasn't been tested in the FE because of something broken in the BE when navigating to insights?orderBy=cpm

TODO:

• Tailwind installation for more custom stylings (if needed)
• Optional photoUrl from login.graphql (needs rebase)
• (Maybe) Framer Motion for customized animations
• (Maybe) Migrate from Webpack to Vite
• Add testing library (Jest or Vitest if we migrate to Vite)
• Handle integration errors with user feedback
• Integration cards must use useTransition hooks
• Use server component for all auth forms and every auth-related form should be a child of that.
• Add login providers to sign up page, too
• Remove iframe deprecated attributes when we add Tailwind
• Set insight rank based on CPM
• Update integration card on change without route refresh
• Integration card load async
• Bring iframe per insight on demand w/ adId

[trixobird]

UI look amazing, lots of code lots of suggestions :) happy to talk whenever you want

[trixobird]

this seems excess, i am using a const [cardStatus, setCardStatus] = useState<IntegrationStatus>(status); can't we do the same? unless the router.refresh is super cheap and refreshes only this card. Event then I would go with a state, but you know better

[elevchyt]

Yeah, it was an easy to quickly make this work.
Added to the todo.

[trixobird]

happy to oblige, let me know what do you want :)

[elevchyt]

Oh right, this is because integrations are not dynamic (like insights) so instead of using stuff from the response's array like integrations[0], integrations[1] etc. or creating a map of integrations in the FE's code we should probably get that map from the response.

e.g.

{
 "meta": {
    id: 1,
    .
    .
  },
  "tiktok": {
    id: 2,
    .
    .
  }
}

[trixobird]

one think that I did in web and I liked was that I had a suspence with fallback on the integrations. So if the user is on a slow connection it immediately paints the page with comming soon integrations and then it was repainted when the call was succeeding. You can emulate a very slow connection and see it (or I can artificially add a delay in the call and show it to you)

[elevchyt]

Will look into it.

[elevchyt]

Thanks, I'll check them out later today!

[trixobird]

2nd pass :)

[trixobird]

it is still there I believe :)

[trixobird]

there are still there I believe

[trixobird]

that's a bit dangerous. It couples FE/BE. What will happen if on the backend I add a new provider and I return the new one first?

[trixobird]

3rd pass

[trixobird]

we should be access this though the cookie. Also right now the correct value is en-gb, although I think we need to decouple LOCALE and Lang

[trixobird]

hype!!