Feat: adapt settings for mobile (UI)

[begonaalvarezd]

Description of change

⚠️ Depends on #2155, this PR will be reopen when that one gets merged to develop

Make UI relevant changes to adapt the settings to mobile.

Things to note:

• Drawer component has been refactored to appear only onMount and disappear onDestroy
• Drawer component has been adapted to fit the features of the popup component, the drawer component replaces the popup component in mobile, except for fullScreen popups
• Settings has been refactored in general so the code of each section is in an standalone file

TODOs:

• Password multistep view ([Task]: Update UI for password settings to be multi-step on mobile #2113)
• Pin multistep vioew ([Task]: Update UI for pin settings to be multi-step on mobile #2114)

Links to any relevant issues

N/A

Type of change

• Update (a change which updates existing functionality)

How the change has been tested

You can test from packages/desktop changing:

• In packages/desktop/App.svelte

import { mobile } from 'shared/lib/app'
mobile.set(true)

• In packages/desktop/App.svelte move the popup component to be placed right before the Toast Container

...

{#if settings}
    <Settings locale={$_} handleClose={() => (settings = false)} />
{/if}

{#if $popupState.active}
    <Popup
        type={$popupState.type}
        props={$popupState.props}
        hideClose={$popupState.hideClose}
        fullScreen={$popupState.fullScreen}
        transition={$popupState.transition}
        locale={$_}
    />
{/if}

<ToastContainer />

...

• In packages/shared/lib/router.ts force to login using the following script:

const profileId = 'XXXXXXXXXXXXXXXXXXXXXXXX';
const profileName = 'XXXXXX'
const profilePin = 'XXXXXX'
setActiveProfile(profileId)
Platform.PincodeManager.verify(profileId, profilePin)
    .then((verified) => {
        if (verified === true) {
            return Electron.getUserDataPath().then((path) => {
                initialise(profileId, getStoragePath(path, profileName))
                api.setStoragePassword(profilePin, {
                    onSuccess() {
                        login()
                        setRoute(AppRoute.Welcome)
                    },
                    onError(err) {
                        console.error(err)
                    },
                })
            })
        }
    })
    .catch((error) => {
        console.error(error)
    })

⚠️ Please beware in desktop the scrollbars are not the same as in mobile, in desktop they take space they dont in mobile

Change checklist

Add an x to the boxes that are relevant to your changes, and delete any items that are not.

• I have followed the contribution guidelines for this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• I have added tests that prove my fix is effective or that my feature works
• I have checked that my latest changes pass CI tests
• New and existing unit tests pass locally with my changes

[begonaalvarezd]

Closing PR because it has been divided in 3: #2250, #2251 & #2271