feat: adapt settings for mobile (UI)

[begonaalvarezd]

Summary

⚠️ This PR depends on #2251, when merged we should change the base to feat/kickoff-mobile

Changelog

Adapt settings UI to mobile

Relevant Issues

Please list any related issues (e.g. bug, task).

Type of Change

Please select any type below that is applicable to your changes, and delete those that are not.

• Breaking - any change that would cause existing functionality to not work as expected
• Chore - refactoring, build scripts or anything else that isn't user-facing
• Docs - changes to the documentation
• Fix - a change which fixes an issue
• New - a change which implements a new feature
• Update - a change which updates existing functionality

Testing

Platforms

Please select any platforms where your changes have been tested.

• Desktop
  • MacOS
  • Linux
  • Windows
• Mobile
  • iOS
  • Android

Instructions

You can test the changes from packages/mobile with the usual requirements for Android or iOS.

Additionally, 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

Checklist

Please tick all of the following boxes that are relevant to your changes, and delete those 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 added or modified tests that prove my changes work as intended
• I have verified that new and existing unit tests pass locally with my changes
• I have verified that my latest changes pass CI workflows for testing and linting
• I have made corresponding changes to the documentation

[amadeu2]

replaced by #2590