feat(website): home page, user page and player

[lennartkloock]

Proposed changes

Frontend

• New home page design
• New user page design
  • Player
  • Chat

Backend

• Adds display_color to user
  • will be randomly generated when registering
• activeStreamsByUserId GQL endpoint to fetch all active streams by user id (this may become obsolete with the new data structure soon)

Types of changes

What types of changes does your code introduce to Scuffle?
Put an x in the boxes that apply

• Bugfix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation Update (if none of the other choices apply)

Checklist

Put an x in the boxes that apply. You can also fill these out after creating the PR. If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code.

• I have read the CONTRIBUTING doc
• Lint and unit tests pass locally with my changes
• I have added tests that prove my fix is effective or that my feature works
• I have added necessary documentation (if appropriate)
• Any dependent changes have been merged and published in downstream modules

Further comments

[codecov]

Codecov Report

Merging #116 (fa5418c) into feature/website (ea2387a) will decrease coverage by 0.15%.
Report is 22 commits behind head on feature/website.
The diff coverage is 40.00%.

@@                 Coverage Diff                 @@
##           feature/website     #116      +/-   ##
===================================================
- Coverage            73.97%   73.83%   -0.15%     
===================================================
  Files                  220      221       +1     
  Lines                17538    17608      +70     
===================================================
+ Hits                 12973    13000      +27     
- Misses                4565     4608      +43     

Files Changed	Coverage Δ
backend/api/src/api/v1/gql/mod.rs	81.42% <0.00%> (-18.58%)	⬇️
backend/api/src/api/v1/gql/models/stream.rs	6.66% <6.66%> (ø)
backend/api/src/dataloader/stream.rs	52.94% <17.64%> (-35.30%)	⬇️
backend/api/src/database/user.rs	89.84% <95.45%> (+1.16%)	⬆️
backend/api/src/api/v1/gql/models/user.rs	75.65% <100.00%> (+0.43%)	⬆️
backend/api/src/global/mod.rs	69.91% <100.00%> (+0.24%)	⬆️

... and 1 file with indirect coverage changes

[TroyKomodo]

Is this correct? I believe svelte recommends to have a div wrap around the generated code?

[lennartkloock]

I know it was in the template like this but I couldn't find any reason for the div. Do you know why it's there?

[TroyKomodo]

Can we use $ path syntax?

[lennartkloock]

I can't find any documentation for that syntax. I know it works in svelte script tags but I don't think it works in scss style tags.

[TroyKomodo]

previously i did this with rem and fontsize, curious what your thoughts are about that approach? Is this better todo?

[lennartkloock]

The problem is, as far as I know, I can't apply any styles to the icon from outside of the icon component itself. Which means I would need a wrapper element to apply the styles to which seems unnecessary.

[TroyKomodo]

Lgtm just fix up those few things

[TroyKomodo]

We can ignore the audit failure the CVE was dropped today, also LAPIN (the library which is affected, isnt used in my branch anymore since we stopped using RMQ)

[TroyKomodo]