Ensure mobile & desktop live together nice and clean

[begonaalvarezd]

Preface

Now that we are working on mobile, we should think about how we make mobile & desktop live together nice and clean (aka doesn't become a spaghetti mess).

Here is a list of what I see are possibly problematic areas of the code (please add more if you think we should also discuss around something else):

• .svelte files: components, routes, views
• Interface lib

.svelte files

Svelte files can be almost identical in both desktop and mobile, or absolutely different, so in order to keep things clean we could start by:

• Use Tailwind breakpoints to style different screens as much as we can. Remember tailwind is mobile first so in order to add mobile only styles we have to add the existing ones to the breakpoints. For now i have been using md: (768px) to distinguish between mobile and desktop. If things get complicated, read next
• If the component layout or logic differs we could create a wrapper component holding all the shared logic and UI and then split the rest into 2 components

Interface lib

This topic is already being addressed. We are going to remove all explicit references to Electron in shared and expose a "Device/Interface" object that holds the API for Electron or Capacitor, so we can share the code for both

[begonaalvarezd]

Referenced discussion:

• merge: mobile develop into develop #1592 (comment)
• merge: mobile develop into develop #1592 (comment)
• merge: mobile develop into develop #1592 (comment)