Base Model Contribution Flow

[jeafreezy]

Description

We need to update the UI with the new base model contribution flow:

Figma Design: https://www.figma.com/design/1WXme5jfWV4tCaY9Rcaekk/fAIr-Project---UIUX-Team?node-id=4850-16490&t=mvyWlocEvwNL3kZU-0.

For now, no API to retrieve the base models and also the model details. But you can use the static data on the design, keeping in mind that this will be dynamic in the future when the API is ready.

Technical Details

1. Accessibility will only be from the Contribute button below on the landing page.

2. Which will bring them to this page which lists all the models: https://www.figma.com/design/1WXme5jfWV4tCaY9Rcaekk/fAIr-Project---UIUX-Team?node-id=4499-17393&t=mvyWlocEvwNL3kZU-0

The page should be on this route => /base-models

3. When they click on 'Contribute Model' button, they'll see this modal with the instructions: https://www.figma.com/design/1WXme5jfWV4tCaY9Rcaekk/fAIr-Project---UIUX-Team?node-id=4546-18676&t=mvyWlocEvwNL3kZU-0

• Note that this page has some search and filters utils which also existed in the current models page. Although, this time we're going to improve the approach by using this library https://nuqs.dev/.
  I already explored it here for the start mapping page and it's great: 386daff, expand the frontend/src/app/routes/start-mapping.tsx file to see how I used it. It's performant and we'll be using it forward to manage url based state.

  • As a side task, add an 'adr' in the docs to document why we're using the library. Here are previous ones with template to guide you. https://github.com/Spatialnode/fAIr/tree/develop/docs/decisions/frontend/architecture

4. When one of the model is clicked, they'll see this page, which is collapsed by default as designed here: https://www.figma.com/design/1WXme5jfWV4tCaY9Rcaekk/fAIr-Project---UIUX-Team?node-id=4754-3538&t=mvyWlocEvwNL3kZU-0

The details page or model card should be on this route => /base-models/id

5. When they expand they'll see this: https://www.figma.com/design/1WXme5jfWV4tCaY9Rcaekk/fAIr-Project---UIUX-Team?node-id=4728-24581&t=mvyWlocEvwNL3kZU-0

Getting Help

If you need any clarifications, you can reach out to Bright or myself and will provide clarifications.

Notes

As you can see the page looks like the current Explore Models page, so you should reuse some components where possible.

Acceptance Criteria

• Clean and typed components.
• Unit tests and integration tests where necessary.
• No AI slop.
• PR is well described with videos where necessary.
• Nuqs is now used for slug/url updates.
• A single branch and PR for this feature. In the future when the API is ready we'll keep updating the PR and not a new one.
• Branch name suggestion - feat/base-model-contribution