Settings experience optimization

[ACTCD]

This PR contains the changes from #339 and adds a new fix:

• Fixed incorrect close action caused by clicking and releasing areas for the following reasons.

If the button is pressed on one element and the pointer is moved outside the element before the button is released, the event is fired on the most specific ancestor element that contained both elements.

click-to-close.mp4

click-to-close-fix.mp4

[quoid]

@ACTCD wouldn't changing click to mousedown or mouseup correct this issue without the need for more html?

<div
     class="settings"
     on:mousedown|self={() => state.remove("settings")}
     in:fade={{duration: 150}}
     out:fade={{duration: 150, delay: 75}}
 >

on:mousedown|self={() => state.remove("settings")}

[ACTCD]

@quoid Yes, you are right, we can simply use mousedown to fix it, I re-pushed the commit.