Improve user and community headers

[micahmo]

Pull Request Description

This PR aims to improve the appearance of user and community page headers. Right now there are a few things about our headers that I don't think look great. In the following example, we can see very little of the banner image. The overlay text becomes harder to read the further to the right it goes. The info button, despite having a bit of a light shadow behind it, can also have a tendency to blend into the background. It's also not completely obvious that the info button opens the about page. Finally, the banner is zoomed in to the extent that, in this case, some of the text is cut off.

I checked out several other Lemmy apps for inspiration, but I wasn't too impressed with what I found.

• Sync: Doesn't show banner image

  Expand for image

  

• Boost: Shows the header nicely, but the avatar is hard to distinguish.

  Expand for image

  

• Eternity: Consumes a ton of vertical real estate, and the text/buttons at the top are impossible to see on top of the banner.

  Expand for image

  

• Summit: doesn't really have a header

• Voyager: doesn't really have a header

• Jerboa: Shares a lot of problems with other apps, like the avatar blending into the banner, and the header taking up quite a bit of vertical space despite showing relatively little info.

  Expand for image

  

I decided to take a slightly different approach with the following changes to both user and community headers.

• Add a border and background to the avatar. This will ensure that it always stands out.
• Offset the avatar from the banner. Do not cover the banner with any gradient. Show more of the banner than we were previously. (Unfortunately since banners can be different heights, we can't always show the whole thing while maintaining a reasonable size of the header. However, I did ensure that narrower banners are much more visible than previously.) Ensure the banner fades in when it loads.
• Show the metadata information about the community below the banner in chips that wrap. Show the about button in a separate, right-aligned chip.
• Always show the community name in the app bar always (even when not scrolled up). Otherwise, this is wasted space! When the header is visible, show the community full name in the app bar. Once the user scrolls, replace the community full name with the current sort type.
• Show the avatar in the app bar once the user scrolls up (if there is any).

Notes:

• The new arrangement of avatar and banner resembles the web UI to an extent which can be nice for familiarity's sake.
• The header widgets are so similar that they could probably be combined at some point.
• I tested the updated app bar with the hamburger, the back button, and the user avatar. I had to adjust the spacing slightly differently in each case, but I think it looks good.
• I tested in light and dark mode.
• In cases where there is a banner, the new header is slightly taller than before. In cases where there is no banner, the new header is smaller.

I am no UI/UX expert, so any feedback on these changes or alternate proposals would be considered!!

Issue Being Fixed

Issue Number: N/A

Screenshots / Recordings

This video demonstrates the fade in and the scroll up animations.

qemu-system-x86_64_kFYB886CtX.mp4

	Before	After
Community with Banner
User with Banner
Community without Banner
User without Banner
Long sort mode
User profile page

Checklist

• If a new package was added, did you ensure it uses an appropriate license and is actively maintained?
• Did you use localized strings (and added appropriate descriptions) where applicable?
• Did you add semanticLabels where applicable for accessibility?

[micahmo]

Just a quick update here. I am going to change this to a draft for now because, after daily driving this, I would like to make a couple more changes. Namely, I don't like how headers look when there is no banner, so I'm considering the possibility of adding a placeholder or something similar so all headers are laid out roughly the same.