feat(Sidebar): new design & workflow

[GeopJr]

Goal

Per #228, The "Home" tabbed base should become sidebar items on desktop and be kept as tabs on mobile.

Problem

Sidebar items are NavigationPages and switching from StackPages to them based on breakpoints would cause reconstruction of the widgets at best which is not ideal since the breakpoints can be triggered multiple times.

Solution

Instead, let's create fake NavigationPage-like headerbars for the tabs and sync the sidebar items (that are only visible on desktop). There's a few bindings involved:

(is_mobile: mobile breakpoint triggered)
(is_home: the current view is Views.Main)

• is_mobile -> PLACE_NOTIFICATIONS.visible // sidebar notifications

• is_mobile -> PLACE_CONVERSATIONS.visible // sidebar conversations

• is_mobile -> PLACE_SEARCH.visible // sidebar search

• is_mobile -> search_button.visible // search headerbar button

• is_mobile -> switcher_bar.visible // stack switcher bar

• is_mobile -> switcher.visible // title switcher

• is_mobile -> title_header.visible // headerbar title (matches active stack page)

when the fake back button is clicked:

• sidebar selected item changes to "Home"
• stack changed to "Home"

when the stack view changes:

• check if the back button should be visible (not mobile + not "Home")

when the is-mobile notify signal gets emitted:

• check if the back button should be visible (not mobile + not "Home")
• if is-mobile, set selected sidebar item to "Home"
• else, set it to the one matching the visible stack page

---

TODO:

• leak check
• badges
• more sidebar syncing

[bertob]

The notification counters need some styling adjustments:

• Smaller font size
• Bold
• Less padding
• Circular when there's just a single digit

I'd basically follow what Fractal does here: