feat: templates framework

[Schwehn42]

Description

Resolves #4201
Resolves #4253

Adds the framework for the new template page. This includes both the layout and some functionality (like routing).
After logging into scrumlr, users will now be redirected to the templates page.

Important

To see the changes, make sure the env var REACT_APP_LEGACY_CREATE_BOARD is set to false.
Right now, they default to false in dev env, and true in prod env.
This is so the different changes can be merged into main without affecting current use.

The page consists of the header and main section

Header section

• User Pill with avatar and name, which when clicked redirects to settings (blocked by refactor: settings dialog #4265)
• Switch to switch between Templates and Sessions (when they exist in the future)
• Search bar to filter templates or sessions (in the future)
• In mobile view, the search bar can be toggled using a button.

Main section

• Two sections for saved and recommended templates.
• Only non-anonymous users can see the saved section.
• In mobile view, the sections are full width but scrollable horizontally.

Changelog

• Add new child routes templates and sessions to route new
• add new views ´Templates´ and Sessions accordingly
• new components:
  • UserPill
  • Switch
  • SearchBar
• change view NewBoard to a grid including the new components in header, and the views as Outlet
• all components and the Template view have a light and dark theme.
• all components and the Template view are responsive and have a separate mobile view
• components also have states for hover, focus, active, and disabled and are styled respectively.
• states are streamlined in new SCSS helper function in style.scss

TODO

• fix stan sometimes being cut off
• include refactor: settings dialog #4265 when merged and setup settings dialog and fix up with fix: local user setting change #4584
• include refactor: color palette #4283 for color constant names
• dark background

Checklist

• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• The light- and dark-theme are both supported and tested
• The design was implemented and is responsive for all devices and screen sizes
• The application was tested in the most commonly used browsers (e.g. Chrome, Firefox, Safari)

(Optional) Visual Changes

Show media

[brandstetterm]

These should be aligned

[Schwehn42]

@brandstetterm concerning the alignment of the search bar and the switch, it is indeed correct according to the design

[SelinaBuff]

1. I like the animation (maybe a little bit slower 0.5sek)?

2. The alignment in Screenshot 1 looks great! I checked again in Figma, and it is aligned with the "Basic Framework" (at least in the "Usermenu" section, see Screenshot 2). However, that’s my mistake — I should've paid more attention to consistently using the same component in the ongoing designs. Please align it accordingly @Schwehn42 and shorten the search field if needed.

Screenshot 1:

Screenshot 2:

[Schwehn42]

@SelinaBuff alright, no worries, in tablet / desktop view everything perfectly aligned, it was just the mobile search bar below the switch which was slightly off. but i'll get that fixed shortly 😄

[github-actions]

The deployment to the dev cluster was successful. You can find the deployment here: https://4254.development.scrumlr.fra.ics.inovex.io
This deployment is only for testing purposes and will be deleted after 1 week.
To redeploy rerun the workflow.
DO NOT STORE IMPORTANT DATA ON THIS DEPLOYMENT

Deployed Images

• ghcr.io/inovex/scrumlr.io/scrumlr-frontend:sha-29f9140

• ghcr.io/inovex/scrumlr.io/scrumlr-server:sha-29f9140

[octomind-dev]

🐙 Octomind

Test Report: 3/14 successful.

description	status	details
About Section Visibility Test	Passed ✅	click
change avatar	Failed ❌	click
check Privacy Policy	Failed ❌	click
check terms & conditions	Passed ✅	click
close cookie banner - front page	Passed ✅	click
close cookie banner - sign-in	Failed ❌	click
create and delete board columns	Failed ❌	click
create_and_delete_notes_and_actions_v2	Failed ❌	click
create lean coffee board	Failed ❌	click
edit_notes_and_actions_v5	Failed ❌	click
get started	Failed ❌	click
share_session	Failed ❌	click
sign-in	Failed ❌	click
test all ways to open the setup flow	Failed ❌	click

commit sha: 29f9140