Refine modals

[staab]

The bottom drawer is over-used, and sort of ugly when the screen is wide. First, refine it so that it is offset from the left, leaving the sidebar accessible. Next, add a regular modal dialog version of the component and use it everywhere except:

• HUD
• Profile
• Feed Edit

Don't create a new component, just add a parameter to modals that opts-in to drawer, and do an if/else in the modal component. There's too much delicate history-related stuff there we don't want to mess up.

[ticruz38]

For mobile it would make sense to keep the bottom up slide rather than from the left?

Also make it dismissible with a swap, something like the vaul-svelte library

[staab]

Yeah, mobile could probably keep the drawer as-is. vaul-svelte is nice, but I'm reluctant to add a dependency like that. Let me think about it.

[ticruz38]

No need to use vaul-svelte, if just for the swap to dismiss. Vaul-svelte is applying some more 3D transformation that can be heavy on mobile

[staab]

Hmm it seems I wasn't specific enough. The current bottom drawer is what should be offset to keep the nav visible. The new modal shouldn't be a drawer coming in from the left, but a more traditional modal (like exists in flotilla).

[ticruz38]

The new modal:

For posts with no replies yet, the modal will adjust to its own height.

Screen.Recording.2024-12-03.at.17.17.06.mov

For posts with more content, it will almost take up the full screen height

Screen.Recording.2024-12-03.at.17.16.21.mov

The drawer refined:

Takes just the width to display a feed, leave the desktop menu visible

Screen.Recording.2024-12-03.at.17.22.51.mov

[staab]

Cool, some small tweaks:

• Make the margins on the top/bottom/sides of the modal equal
• Make the drawer span the full content width (the light border you had before seemed good)

@dtonon any other input?

[ticruz38]

Padding on drawer and modal are the same thin border now

[dtonon]

@dtonon any other input?

Centering the bottom sheet is definitely a big step forward, good work @ticruz38!

But I would keep the background's width of the lighbox wide as much as the available space (minus the left sidebar).
It's better to keep the background dark(er) like the main view, so we can avoid this backgrounds' chromatic flipping, that it's quite disturbing (at least for me) and overcomplicate the design without any real benefit.

Form reference, my proposed design:
(don't mind the double sidebar, the concept is the same)

[ticruz38]

@dtonon
I have 2 questions:

• In your design, there is no real lightbox around the modal content, the modal content is immediately superposed to the modal backdrop?
• Should the backdrop fade in to the colour of the sidebar? What is the overall open animation for this modal?

As a side note - the dark mode atm has a lighter sidebar background than the app content background, this modal design requires me to flip the 2 colours

[dtonon]

@ticruz38 the lightbox fills only the content of the right panel, leaving the left sidebar(s) accessible. I'm not sure to understand what you mean by

the modal content is immediately superposed to the modal backdrop?

but I think yes, is what I envisioned.

For the foreground we have two options: darken the modal background a bit , like in the mockup; or keep the same color of the main view's background, and use a darker semi-transparent backdrop, so the top will result a little darker.
I prefer my proposal since this way the top content is more contrasted.
Keep in mind that in my general idea we should only have one bottom-sheet modal, so there is not the problem of stacked modals.

The animation should be like the current one, a bottom-up movement.

As a side note - the dark mode atm has a lighter sidebar background than the app content background, this modal design requires me to flip the 2 colours

Why? You can just use the same colors of the main view, darkening a little the background as explained before.

Let me know if you need a review of the design's visual to have a better feel of the overall proposal.

[ticruz38]

@dtonon except for the close button that is still outside the modal, is the following recording aligned with you idea (colour & animation)?

Screen.Recording.2024-12-13.at.15.24.05.mov

Once the buttons are inside the modal, the idea would be to leave enough space for the top nav to be visible under the backdrop.

[dtonon]

@ticruz38 sorry for the delay, the overall effect is fine; the only difference are the colors: my proposal keep the main background dark with a slight lighter background for the notes. I would keep this combination, without flipping the colors, even with the current multi-modal structure. @staab is color flipping necessary for anything else?

[staab]

No, the color flipping is a very old thing, probably pre-dating the dark backdrop. I think we could use the same color palette as page content and it would be fine. (color alternation is still needed for nested quotes)

[dtonon]

color alternation is still needed for nested quotes

I would switch to a simple border keeping the main background color.
It's visually cleaner, more readable and could also allow nested mentions without much troubles.

[staab]

Like this? I dunno...