Post Overhaul Part 2

[EricBAndrews]

Checklist

• [x] I have described what this PR contains

Choose one of the following two options:

• • [ ] This PR does not introduce major changes
• • [x] This PR introduces major changes, and I have consulted @buresdv, @jboi or @mormaer in the Mlem Development Matrix room

Choose one of the following two options:

• • [ ] This PR does not change the UI in any way
• • [x] This PR adds new UI elements / changes the UI, and I have attached pictures or videos of the new / changed UI elements

Pull Request Information

About this Pull Request

This PR introduces a host of refinements to the look and feel of the post display:

• Swipe-to-vote. Posts can now be swiped right to upvote/downvote and left to save/reply (#59).
• Replying to a post directly from the feed is now supported.
• NSFW posts are now blurred by default and an option has been added to settings to disable it (#61).
• Websites now display thumbnail previews in compact mode.
• Post saving has been hooked up to the new backend and is fully functional (#60).
• The context menu on posts has been replaced with a menu triggered by the ellipsis in the post interaction bar.
• Blur/unblur NSFW and Large/Compact post toggles have been added to the toolbar ellipsis menu.
• Text post and placeholder icons have been made larger and their background is now a darker gray

This PR also contains a few minor tweaks:

• Variable names have been refactored to increase readability.
• Comments no longer use dynamic type (#103), and now scale properly with system font.
• An option has been added to settings to allow the user to choose between light, dark, and system theme.

Screenshots and Videos

Swipe Features

https://github.com/buresdv/Mlem/assets/44140166/c0a9952d-b5b9-429e-a702-11676f49c67a

NSFW Blur and Toolbar Options

https://github.com/buresdv/Mlem/assets/44140166/a84bf2b0-138a-4a93-9c7c-f21788f56835

Post Thumbnails and Placeholder

[JakeShirley]

Some small design tweaks that I think make the NSFW view look a little sleeker. I thought the eye looked a little big-brother-y 😆

CachedAsyncImage(url: url) { image in
                image
                    .resizable()
                    .frame(maxWidth: .infinity)
                    .scaledToFill()
                    .blur(radius: showNsfwFilter ? 30 : 0)
                    .colorMultiply(showNsfwFilter ? .gray : .white)
                    .clipShape(RoundedRectangle(cornerRadius: 8))
                    .overlay(RoundedRectangle(cornerRadius: 8)
                        .stroke(.secondary, lineWidth: 1))
            } placeholder: {
                ProgressView()
            }
            
            if showNsfwFilter {
                VStack {
                    Image(systemName: "exclamationmark.triangle")
                        .font(.largeTitle).foregroundColor(.white)
                    Text("NSFW")
                        .fontWeight(.black).foregroundColor(.white)
                    Text("Tap to view").font(.subheadline).foregroundColor(.white)
                }
                .onTapGesture {
                    showNsfwFilterToggle.toggle()
                }
            }

[JakeShirley]

Also this probably isn't a blocker at all but I found it pretty easy to swipe and scroll at the same time. Perhaps there is a tolerance that can be tweaked?

https://www.youtube.com/watch?v=_8T4_0sPJ6A

[mormaer]

Also this probably isn't a blocker at all but I found it pretty easy to swipe and scroll at the same time. Perhaps there is a tolerance that can be tweaked?

https://www.youtube.com/watch?v=_8T4_0sPJ6A

I'm seeing this issue too on device, but in addition to that it is triggered when swiping back for navigation:

https://github.com/buresdv/Mlem/assets/5231793/e5aa8f69-81cd-4257-9d2b-ae37fa105a6f

it looks like it thinks I've swiped all the way from the trailing edge, when in reality my swipe is beginning over on the leading edge to navigate back, perhaps we need to look at the starting location of the gesture before triggering the trailing expansion?

[buresdv]

This is a great contribution, thank you.

I was looking at the "reply" feature and I think we should hold off on it for now. It doesn't fit the established design.

Please don't kill me for bringing this up again since I already approved this design the last time, but could be change the outline around avatars and images? I gave it some thought and I think the current color is a bit too contrast-y and it jumps out a little too much. Could you try changing it to .secondarySystemBackground to see if that would look nicer?

[EricBAndrews]

Also this probably isn't a blocker at all but I found it pretty easy to swipe and scroll at the same time. Perhaps there is a tolerance that can be tweaked? https://www.youtube.com/watch?v=_8T4_0sPJ6A

I'm seeing this issue too on device, but in addition to that it is triggered when swiping back for navigation: swipe_issue.mov

it looks like it thinks I've swiped all the way from the trailing edge, when in reality my swipe is beginning over on the leading edge to navigate back, perhaps we need to look at the starting location of the gesture before triggering the trailing expansion?

As with the icon changes, let's tackle it in the next PR

[EricBAndrews]

This is a great contribution, thank you.

I was looking at the "reply" feature and I think we should hold off on it for now. It doesn't fit the established design.

Please don't kill me for bringing this up again since I already approved this design the last time, but could be change the outline around avatars and images? I gave it some thought and I think the current color is a bit too contrast-y and it jumps out a little too much. Could you try changing it to .secondarySystemBackground to see if that would look nicer?

Done. It might be a little light this time--we can take it up in the Matrix chat

[EricBAndrews]

This is a great contribution, thank you.

I was looking at the "reply" feature and I think we should hold off on it for now. It doesn't fit the established design.

Please don't kill me for bringing this up again since I already approved this design the last time, but could be change the outline around avatars and images? I gave it some thought and I think the current color is a bit too contrast-y and it jumps out a little too much. Could you try changing it to .secondarySystemBackground to see if that would look nicer?

Re: replying, I've replaced the sheet with a "not ready yet" message. Pulling out the swipe action altogether would cause some major headaches down the line.