giseldo/neodataset huggingface dataset:
Limit modals to display images or videos only.

### Background

Currently modals display any kind of post entity, be it a video, image, pure text, embedded URL etc. Clicking anywhere on any activity in a feed will launch a modal.

The value for the user is afforded when using a modal is the increased screen real estate. This suits images and videos, but not necessarily text.

The reason we currently allow text posts to be displayed in a modal is because of the grid view, as text posts in the grid are so limited, a modal is required to view them in their entirety.


### Proposal

* When viewing content in a feed, only clicking on an image, or expanding a video will launch a modal.
* When viewing content within a grid, clicking on a post, no matter its type, will launch a modal.

### Benefits

* More predictable user experience for the user. I can not see any comparable social network that display text content in a modal in this fashion.
* The unpredictability as mentioned above is a context shift for the user, as they are unknowingly going from a feed to a modal. This could be hurting retention.

Happy to hear thoughts on this one.

cc: @markeharding @markryansallee @ottman @jotto141

Story points: 1.0
Remove Minds Chat announcement widget from sidebar on web

## Summary

The Minds Chat announcement has been on the sidebar for a really long time and is no longer news. It should be removed from the sidebar everywhere.

![Onboarding_-_Newsfeed_Landing_Page](/uploads/a321a5cdd32c4fb71350168ad3a3c76d/Onboarding_-_Newsfeed_Landing_Page.png)

Story points: 1.0
`comment-permissions` feature flag leaking

<!---
Please read this!

Before opening a new issue, make sure to search for keywords in the issues
filtered by the "T - Bug" label and verify the issue you're about to submit isn't a duplicate.
--->

### Summary

`comment-permissions` feature flag leak exposing option to users to disable comments that has no function

https://www.minds.com/newsfeed/1344714915725709315

### Steps to reproduce

1. In canary go to a post
2. See disable comments option in the vertical ellipsis dropdown.

On my main account it wasn't immediately visible so I logged in with another user, made a fresh text post and turned canary off and on again - refreshed and I could see the option.

### Platform information 

Web, possibly mobile - if its effecting mobile too consider an engine level fix.

### What is the current *bug* behavior?

Option is visible that shouldn't be.

### What is the expected *correct* behavior?

No option should be visible.

### Relevant logs and/or screenshots

![image](/uploads/f827525baacf0d9f7e1a5936e060f5ef/image.png)

### Possible fixes

(If you can, link to the line of code that might be responsible for the problem)

Story points: 2.0
Refine newsfeed scrolling

When scrolling within feeds on web, only when the user reaches the end of the feed is the next page fetched.

Hitting the wall, then fetching the next pages is hampering the UX somewhat.

Ideally we should fetch the next page in advance of reaching the end of the available posts so the scrolling process is smoother and feels more continuous.

## Acceptance
- [ ] Given the user has a reasonably speedy Internet connection, when scrolling feeds like the Newsfeed, Discovery feed, or Channel pages, then the feed scrolls smoothly without ever reaching "the bottom" before loading more posts.

Story points: 2.0
(bug) Notifications misaligned with new update

Notifications don't align well with new update (the little arrow doesn't point at the notification bell):

![image](/uploads/ec1706e4821888568233716be53abcac/image.png)


![2022-02-25_19-51-08](/uploads/f6bdf47b8f4c4009861e577bcbfbb22f/2022-02-25_19-51-08.mp4)

Browser: Brave on Windows

# Problem

<details><summary>From looking at inspect element, there are three definitions for the notification placement (click to open screenshot):</summary>
![image](/uploads/b28ef766a3e4726710c1e82af8e44481/image.png)
</details>

```
right: 0px;
right: -70px;
right: -160px;
```

The correct one is -70px, but for my Browser, 0px is used.

Here is the line with the 0px definition (I don't know, is this 0px used for something else?): https://gitlab.com/minds/front/-/blob/16bbb406cdfabe8475a9640a1a83216683e72c26/src/app/common/layout/v3-topbar/v3-topbar.component.scss#L229

Story points: 1.0
Transak modal is inaccessible and stuck behind the Buy Tokens modal

### Summary

Transak modal is inaccessible and stuck behind the Buy Tokens modal, resulting in a large drop off on conversions to buy crypto.

### Steps to reproduce

1 - click buy tokens
2 - click card/bank option
3 - notice modal

### Platform information 

Web browser

### What is the current *bug* behavior?

See summary

### What is the expected *correct* behavior?

Transak modal should show in front of buy tokens modal

### Relevant logs and/or screenshots

![IMAGE_2022-02-25_08_26_08](/uploads/461bee38afbb4677f523be20ad6f8602/IMAGE_2022-02-25_08_26_08.jpg)

![IMAGE_2022-02-25_08_26_17](/uploads/60411eac4babb98f1c1b900c365190ad/IMAGE_2022-02-25_08_26_17.jpg)

### Possible fixes

Story points: 1.0
(bug) Comment Video & Image Notification | Pressing around middle results in being redirected to broken link

### Summary

![image](/uploads/f648b34daf6da9a2a78dff01b9c2bf6c/image.png)

Happens in this area:

![image](/uploads/da6d5591f5f10ca303dc48e0bfaf5c95/image.png)

### Steps to reproduce

1. Make a post with user A
1. Comment a video on it with user B
1. In a's notifications, click the video as in the video above
1. URL is not found - not properly escaped.

### Platform information 

Win10, Brave

### What is the current *bug* behavior?

Link breaks on image press

### What is the expected *correct* behavior?

Link should not break

### Relevant logs and/or screenshots

(Paste any relevant logs - please use code blocks (```) to format console output,
logs, and code as it's very hard to read otherwise.)

### Possible fixes

(If you can, link to the line of code that might be responsible for the problem)

Story points: 3.0
Unable to connect with Coinbase Wallet mobile app

<!---
Please read this!

Before opening a new issue, make sure to search for keywords in the issues
filtered by the "T - Bug" label and verify the issue you're about to submit isn't a duplicate.
--->

### Summary

Unable to connect to the site via Coinbase Wallet mobile app. - an error is thrown as seen in the below picture with a connection failed message.

### Steps to reproduce

Try to connect with Coinbase Wallet mobile app.

### Platform information 

Web / Mobile

### What is the current *bug* behavior?

Unable to connect due to error.

### What is the expected *correct* behavior?

Should be able to connect.

### Relevant logs and/or screenshots

![image](/uploads/90e721a9189f6804b22f3c525490b1e4/image.png)

### Possible fixes

* Could be a breaking change in Coinbase wallet
* Could be a bug in our Web3Modal
* Could be an issue with our signer

Story points: 1.0
Help in dropdown innaccessible when logged out

<!---
Please read this!

Before opening a new issue, make sure to search for keywords in the issues
filtered by the "T - Bug" label and verify the issue you're about to submit isn't a duplicate.
--->

### Summary

Help in dropdown innaccessible when logged out - it prompts you to login

### Steps to reproduce

From logged out state, open topbar dropdown and click help

### Platform information 

Web

### What is the current *bug* behavior?

On clicking help user is routed to login.

### What is the expected *correct* behavior?

If logged out, we should just link to https://support.minds.com/ rather than going through the JWT sign-in flow.

### Relevant logs and/or screenshots

![image](/uploads/99182b504438307406671c99db549f2c/image.png)

### Possible fixes

See expected correct behavior

Story points: 1.0
Feed: Persistent Scroll Position

<!---
Please read this!

The Definition of Ready (DoR) can be found at https://developers.minds.com/docs/handbook/how-we-work/#definition-of-ready-dor

Before opening a new issue, make sure to search for keywords in the issues
filtered by the "Type::Feature" label and verify the feature you're about to submit isn't a duplicate.
--->

## Goal

<!---
Clearly outline the goal of the issue and why we are doing it
--->

Persist the scroll position in the feed after jumping in and out of a post.

## What needs to be done

<!---
Clearly detail what needs to be done to achieve the goal set out above
--->

This requires using [virtualized lists](https://web.dev/virtualize-lists-with-angular-cdk/) to boost the performance of feeds. using these lists, we won't be rendering all components of the list, but only those that are near the viewpoint. This is crucial for features such as #5327 

a demonstration of virtualized lists on twitter:

![virtualized-list](/uploads/79a28f42096ad157b971d73c96b217b3/virtualized-list.mov)

and gitlab:

![Screen_Recording_2022-02-23_at_10.52.10](/uploads/1555846e5c7f67971d0c5e2340aa1b0f/Screen_Recording_2022-02-23_at_10.52.10.mov)

This also requires us to keep the state of the feed in memory or in localStorage (if we want to cache it). It's best to start with in-memory and at a later date think about caching it

\* if possible, look into how we can simplify the pagination and other logic of all feeds with a new Feed component (like mobile's FeedList)


## QA

<!---
Consideration is given to how the issue will be demoed and tested prior to being deployed
--->

Please look at the acceptance criteria and make sure they're met

## UX/Design

<!---
Sufficient wireframes have been presented and understood by the development team. Full mockups are not required and re-usable components are encouraged.
--->

None required

## Personas

<!---
Who does this user impact and why (optional)
--->

All users

## Experiments

<!---
Experiments are not required, but they should be made clear if one is expected. If experiments are required, the hypothesis should be outlined.
--->

?

## Acceptance Criteria

<!--
Everyone should be able to understand what is expected to be delivered
--->

- [ ] Given I'm on the newsfeed, and I click on a post and get navigated to that post when I press the back button (of the browser or on the page) I want to see the same newsfeed as before in the same position.

## Definition of Ready Checklist

- [ ] Definition Of Done (DoD)
- [ ] Acceptance criteria
- [ ] Weighted
- [ ] QA
- [ ] UX/Design
- [ ] Personas
- [ ] Experiments

Story points: 5.0
Standard discovery accessible from guest-mode homepage

<!---
Please read this!

Before opening a new issue, make sure to search for keywords in the issues
filtered by the "T - Bug" label and verify the issue you're about to submit isn't a duplicate.
--->

### Summary

It seems like the standard discovery view can be accessed from the guest-mode homepage.

### Steps to reproduce

1. Load homepage in guest mode
2. Click plus
3. Click back to discovery - navigation SHOULD link you to `/` which should contain the discovery homepage, but instead it goes to `/discovery/top`

### Platform information 

Front / Web

### What is the current *bug* behavior?

Discovery button links to `/discovery/top`

### What is the expected *correct* behavior?

It should link to `/` showing discovery homepage.

### Relevant logs and/or screenshots

![image](/uploads/3d1e8907689855af0cd644d63dd1d3ef/image.png)

### Possible fixes

(If you can, link to the line of code that might be responsible for the problem)

Story points: 2.0
Comment ordering goes both directions when navigating to level 0 comment from notifications (Staging)

## Summary

When you click on a L0 comment notification on a post with more than one comment, you will see the rest of the comments ordered going both ways on the post. see video. 

## Replication Video

![Screen_Recording_2022-02-16_at_12.01.13_PM](/uploads/6ee94a95cb9f93dc81632dd1cbbe7c7f/Screen_Recording_2022-02-16_at_12.01.13_PM.mov)

Story points: 2.0
Password Risk logic is too messy. Refactor to async validator

Our password risk logic in registration is overly complicated and caused the following regression: https://gitlab.com/minds/front/-/issues/5311.

## Issues

- It's not using an async validator like the username field does
- There is no throttling on the input so the endpoint gets overloaded
- The register form is relying on logic from the popover-validation component, but this should be a visual only tool and not have core functionality. 
- The popover-validation component should be refactored to consume the form component. **DRY**.

Story points: 3.0
(bug) Jury Duty | Non-Plus user can't see Plus posts through Jury Duty

User who doesn't have minds+ was selected as a juror of minds+ content, and wasn't able to see it.

We should either unlock the content for the juror, or we should only choose minds+ users for minds+ content.

Post: https://www.minds.com/newsfeed/1340243963549847567

Story points: 3.0
Safari support with Coinbase Wallet / Metamask

<!---
Please read this!

Before opening a new issue, make sure to search for keywords in the issues
filtered by the "T - Bug" label and verify the issue you're about to submit isn't a duplicate.
--->

### Summary

There are reports that different wallets are not working correctly on Safari - if we cannot support these we should warn users that their browser is not fully supported for wallets rather than leaving them confused.

### Steps to reproduce

Presumably Use Safari and try to link a Coinbase or Metamask wallet.

### Platform information 

Safari Web

### What is the current *bug* behavior?

Users get stuck on an infinite loading screen.

### What is the expected *correct* behavior?

Should either work, or if not possible users should be alerted that their browser is not supported for wallet connection.

### Relevant logs and/or screenshots

![image](/uploads/1a68f7e1c1e83dee894e9700dc80c9c3/image.png)

### Possible fixes

(If you can, link to the line of code that might be responsible for the problem)

Story points: 3.0
activity modal: reminded post sizing broken

reported by @benhayward.ben 

![image](/uploads/96ade4fda09a430c507483b1317090a4/image.png)

![image](/uploads/178482eadc932e4fdfcbda7aa7c7f699/image.png)

https://www.minds.com/newsfeed/1168209637137641472

https://www.minds.com/newsfeed/1336553771219554307

Story points: 2.0
emoji picker: empty popup for a few seconds

click on emoji picker -> for some moments the popup is empty and an empty triangle is shown then the picker appears

what should happen: if we're lazy loading the picker, nothing should be shown (or idealistically some kind of loading indication) until the picker gets downloaded

![image](/uploads/d9e433e0c330916eda7316a9cd2af73b/image.png)

Story points: 1.0
client-side caching policy

<!---
Please read this!

The Definition of Ready (DoR) can be found at https://developers.minds.com/docs/handbook/how-we-work/#definition-of-ready-dor

Before opening a new issue, make sure to search for keywords in the issues
filtered by the "Type::Feature" label and verify the feature you're about to submit isn't a duplicate.
--->

## Goal

<!---
Clearly outline the goal of the issue and why we are doing it
--->

we want to add caching functionality to the web app. this allows us to do so many things, such as improving UX, supporting optimistic loading, and [keeping feed scroll position](https://gitlab.com/minds/front/-/issues/5210), etc.

we should figure out the best way to achieve this:

- For the network resources necessary to load the app and file-based content we should consider [service workers](https://gitlab.com/minds/front/-/issues/5033) which requires [pwa](https://gitlab.com/groups/minds/-/epics/156)
- For other data, we should consider [IndexedDb](https://gitlab.com/minds/front/-/issues/5027) and localStorage as a fallback

essential read: 
https://web.dev/storage-for-the-web/

## What needs to be done

<!---
Clearly detail what needs to be done to achieve the goal set out above
--->

Create a stateful layer on top of ApiService that holds state and data about its endpoint and has utility functions such as loadMore, refresh, and fetch. This state can then be persisted and rehydrated which allows us to have endpoint-specific local caching. This cache can be stored in localStorage, IndexedDb, SessionStorage, or in memory depending on the use case.

## QA

<!---
Consideration is given to how the issue will be demoed and tested prior to being deployed
--->

TBD

## UX/Design

<!---
Sufficient wireframes have been presented and understood by the development team. Full mockups are not required and re-usable components are encouraged.
--->

No design or UX change apart from having caches from some endpoints which makes them load instantly and update according to their cache policy.

## Personas

<!---
Who does this user impact and why (optional)
--->

All users.

## Experiments

<!---
Experiments are not required, but they should be made clear if one is expected. If experiments are required, the hypothesis should be outlined.
--->

No experiments are needed.

## Acceptance Criteria

<!--
Everyone should be able to understand what is expected to be delivered
--->

- [ ] ApiResource class is implemented
- [ ] Support persisting to 
  - [ ] memory storage
  - [ ] session storage
  - [ ] indexedDb storage
  - [ ] localStorage
- [ ] add indexedDb support using Dexie
  - [ ] create a User database that holds user-specific information. This enables us to have multi-user support

## Definition of Ready Checklist

- [ ] Definition Of Done (DoD)
- [ ] Acceptance criteria
- [ ] Weighted
- [ ] QA
- [ ] UX/Design
- [ ] Personas
- [ ] Experiments

Story points: 3.0
Images cropped incorrectly when viewed in media modal

### Summary

Images in Firefox are not cropped correctly when clicked on for focused viewing,

![2022-01-31_10-17-38](/uploads/651fecd18c7e3c28b71d16c4aa99605c/2022-01-31_10-17-38.mp4)

### Steps to reproduce

In Firefox, click on an image

### Platform information 

Windows 10, Firefox

### What is the current *bug* behavior?

Image is cropped smaller than it should be. When the image is shown to the user, the top and bottom are cut off incorrectly.

### What is the expected *correct* behavior?

Image should retain its original dimensions when viewing in focused window

### Relevant logs and/or screenshots

(Paste any relevant logs - please use code blocks (```) to format console output,
logs, and code as it's very hard to read otherwise.)

### Possible fixes

(If you can, link to the line of code that might be responsible for the problem)

Story points: 3.0
Roboto Medium (500) doesn't appear to render correctly.

There may be an issue here. Anywhere Roboto 500, doesn't appear to be rendering correctly. See below. Highlighted in green are two examples that use roboto 500, however, look how light the font face is.

![Screenshot_2022-01-31_at_15.04.54](/uploads/5626292c13b133afffef761fbfa46e77/Screenshot_2022-01-31_at_15.04.54.png)

MacOS Monterey / Chrome 97

Story points: 2.0
Topbar badge for staging mode

<!---
Please read this!

Before opening a new issue, make sure to search for keywords in the issues
filtered by the "T - Bug" label and verify the issue you're about to submit isn't a duplicate.
--->

### Summary

Like our current canary mode we should add a badge for staging that indicates when staging mode is active

![image](/uploads/e3c9ddff195ea720935da9be97edbdc1/image.png)

Story points: 1.0
NSFW warning misaligned in modals

<!---
Please read this!

Before opening a new issue, make sure to search for keywords in the issues
filtered by the "T - Bug" label and verify the issue you're about to submit isn't a duplicate.
--->

### Summary

NSFW warning is misaligned in modals

### Steps to reproduce

View https://www.minds.com/newsfeed/1333525991150063631 with autoplay videos turned off

Or post an NSFW video and open it in a modal

### Platform information 

Web

### What is the current *bug* behavior?

Misaligned contents

### What is the expected *correct* behavior?

Aligns contents

### Relevant logs and/or screenshots

![image](/uploads/3791e6eba1d23396703b6c9e46cca9b9/image.png)

### Possible fixes

(If you can, link to the line of code that might be responsible for the problem)

Story points: 1.0
Video's are not working without autoplay on

<!---
Please read this!

Before opening a new issue, make sure to search for keywords in the issues
filtered by the "T - Bug" label and verify the issue you're about to submit isn't a duplicate.
--->

### Summary

(Summarize the bug encountered concisely)

### Steps to reproduce

Make sure autoplay videos is turned off in settings
Go to https://www.minds.com/newsfeed/1172885875113349120

### Platform information 

Web Chrome and Firefox, replicated Ubuntu

### What is the current *bug* behavior?

Video isn't visible in modal

### What is the expected *correct* behavior?

Video should be visible

### Relevant logs and/or screenshots

![image](/uploads/d00300b87143be7d972c96a601db1cc0/image.png)

### Possible fixes

m-videoplayer--scrollaware has

```
height: 0px;
overflow: hidden;
```

Story points: 3.0
emoji picker build problem

the emoji picker branch is not getting built because of incompatibility/conflict with some change in the master that has happened between b876b7d6fcae90e682d0bdebee4946ee23ff3a9b and 222b7fb3262cb15b8684c159145386ce4a33d3f7

referenced failed job: https://gitlab.com/minds/front/-/jobs/2023148473

Story points: 5.0
Modals: first element gets focused when the modal is opened

### Summary

when Modal is opened, the first element in the modal content gets a keyboard focus. some of these elements also show a blue outline around them such as the activity modal

### Steps to reproduce

open a modal (i still haven't figured out which modals have this issue but i'm sure some of them do) such as the actvity modal. notice that the channel avatar gets a blue outline.

### Platform information 

browser

### What is the current *bug* behavior?

open a modal (i still haven't figured out which modals have this issue but i'm sure some of them do) such as the actvity modal. notice that the channel avatar gets a blue outline.

### What is the expected *correct* behavior?

nothing should get focused. or if something's gonna get the focus, it should be handled and intentional.

### Relevant logs and/or screenshots

(Paste any relevant logs - please use code blocks (```) to format console output,
logs, and code as it's very hard to read otherwise.)

### Possible fixes

(If you can, link to the line of code that might be responsible for the problem)

Story points: 3.0