Mobile: Add sync status icon

[personalizedrefrigerator]

Summary

• Original PR
• Feature discussion
• Adds an icon button that shows whether changes made in the mobile editor haven't been synced to the server.

Testing plan

0. Select a sync target and enable the sync icon in settings > Note > Show sync status.
1. In "configuration", disable syncing
2. Edit a note.
   • The "sync status" icon should be invisible
3. In "configuration", set a cloud service as the sync target
4. Open a note.
   • The sync icon should be a "push" icon before changes are made/have been pushed to the server
5. Push the "sync" button
   • After syncing, the icon should contain a checkmark.
6. Edit the note
   • After making a change, but before syncing, the button should contain a "push icon" again
7. Press the "sync" button
8. In "configuration", enable syncing with the filesystem, but with an empty/invalid output directory
9. Open a note and press the "sync" button.
   • After pressing the button once, the cloud should contain an exclamation point.
   • Attempting to sync again should display an error message.

Notes

• The feature is opt-in and the setting is only visible when a sync target has been selected.]
  • This selection was made as a result of this poll, which, as of September 5th, looked like this:

Screenshots

• When up-to-date

  • 

• While syncing

  • 

• When changes can be pushed

  • 

• After sync errors

  • 

[tomasz1986]

If this is only relevant/visible when sync is enabled, wouldn't it be better to keep the setting next to other synchronisation settings?

[laurent22]

• How about we display only one icon, the "syncing" one when the state is "needs sync" and "syncing"? I feel it's too much information going on otherwise whenever a change is made to a note. Does the icon animate too? Because that's also a bit distracting and most of the time it doesn't matter - things work and data is synced.

• What happens when the sync target is set to "none"?

• I'd rather not have a setting for this. We should be sure about what we implement - is that something that's really needed? Then no need for settings. If many users don't want this then it's feature creep, and perhaps we should reconsider if we should add this (I'm still not entirely convinced, although your implementation is pretty good).

[personalizedrefrigerator]

What happens when the sync target is set to "none"?

The sync icon isn't shown.

I'd rather not have a setting for this. We should be sure about what we implement - is that something that's really needed? Then no need for settings. If many users don't want this then it's feature creep, and perhaps we should reconsider if we should add this (I'm still not entirely convinced, although your implementation is pretty good).

We could alternatively make the sync status easier to view (right now, it requires leaving a note and opening the sidebar). Perhaps adding the note's sync status to the note-specific sidebar could also make sense?

[Daeraxa]

Maybe the icon should only show when there is a background/initial sync going on? - basically just a reflection of what it already does in the sidebar. If we took this route then we should probably mind the tablet project as for sake of continuity then maybe it shouldn't show if the sidebar is always enabled. Basically whilst syncing, if the sidebar is on screen, don't show the icon, if it isn't on screen then show the icon.

If the idea is that the "instant" sync should be instant then the only time to show the icon should be if that sync is delayed in which case I think an animated icon showing the background sync makes sense. It should actively be drawing the eye to make the user aware that this note is 1)possibly not be up to date and 2) will not "save" if they immediately exit.

I definitely agree on no setting. As is the nature of polls, if you present it to have an option then people will always vote for it - the people who want the feature say yes because for them it makes no difference and the people who don't want it also say yes so they can turn it off which leads to it nearly always winning.

[laurent22]

Maybe the icon should only show when there is a background/initial sync going on?

I thought about that too, but it may also be distracting with the icon constantly being hidden/shown as the note is being modified. But merging the states "needs to be saved" and "being saved" would help simplify things up. The user probably doesn't care about the internal state of the app, they just need to know if their note is synced or not, and for that we only need two states (+ the error one, which could be useful).

[Daeraxa]

The main thing I'm really thinking of is trying to have consistency between the applications. If we are going to have an error icon or "not sync'd" icon then shouldn't it also be in the desktop app somewhere nearer the note itself, like somewhere in the noteTitle bar?

[personalizedrefrigerator]

The main thing I'm really thinking of is trying to have consistency between the applications. If we are going to have an error icon or "not sync'd" icon then shouldn't it also be in the desktop app somewhere nearer the note itself, like somewhere in the noteTitle bar?

If we only show the sync status icon when the sidebar can't be shown at the same time as the note (i.e. we're on a small screen device, like a phone), we may not need to add such an icon to the desktop app for consistency — the desktop app has no "small screen" layout like the mobile app.

[Daeraxa]

No but especially on higher resolution and ultrawide monitors it is a long way out of where somebody would be focusing, the bottom left of the screen is probably the place on my monitor I look the least so I mean more in terms of being able to catch attention. I've definitely had sync failures before where the sync message area has filled up with failure text and I've not noticed for a very long time.

Also we do absolutely feature the ability to close the sidebar and note panel using F10 and F11 which many people use.

So in this sense I mean that there would be one type of sync status that always belongs in the sidebar (collapsible or not) and one that would remain closer to the actual note.

[narFnarF]

Those of you who think this feature is unnecessary, could you elaborate on why you think so?

If you think this icon is distracting, I'd like to know how it's more distracting than the existing sync animated icon in the Desktop app. Ou why you think it would be more distracting than Google Doc's icon+text in the top bar that show the sync status of the current document. I agree though that an animated sync icon would be too much. An immobile icon would suffice.

On the subject of making this feature opt-in or opt-out: Based on my experience in UX design, this feature seems important enough to justify making it ON by default. The consequence in the user's experience of having to deal with conflicts is critical enough to justify it. Remember that 95 to 99% of users don't change the default values of their apps. And those users who might be less technically inclined are the target audience for this feature (since power users already know how to deal with conflicts)

Finally, we cannot trust a survey with a sample of only 17 people. It doesn't represent at all the tens of thousands of Joplin users. We simply cannot trust its results other than the opinion of the 17 individuals who answered.

[personalizedrefrigerator]

The icon is now only visible when a sync is needed/while syncing. It's also no longer opt-in (I've removed the setting).

[personalizedrefrigerator]

Let's also consider background sync (as discussed here) as a potential solution to this problem.

[laurent22]

Another concern I have with this change is the lack of consistency and duplicate functionality. Currently we have the sync status in the sidebar, and now we would be adding it in the top right corner (and with a different icon style). So of course the sidebar is hidden when editing a note, but that doesn't mean we should add another icon somewhere else - maybe we should somehow collapse the sidebar so that the sync status is visible? Or we should move the sync button from the sidebar to the top right corner where it would be always visible?

What I mean is that we should have a coherent view of the whole UX instead of adding small bits here and there. It was the same problem with the recently added (and reverted) note bar - it was adding a duplicate way to search and create notes. And we keep duplicating functionalities in that way the UI gets more and more confusing and cluttered.

[personalizedrefrigerator]

Another concern I have with this change is the lack of consistency and duplicate functionality.

At the least, we should use the same Component for the sync status in the sidebar as in the toolbar.

Currently we have the sync status in the sidebar, and now we would be adding it in the top right corner (and with a different icon style). So of course the sidebar is hidden when editing a note, but that doesn't mean we should add another icon somewhere else - maybe we should somehow collapse the sidebar so that the sync status is visible? Or we should move the sync button from the sidebar to the top right corner where it would be always visible?

I'm inclined to keep the sync status in the sidebar for consistency with the desktop application and proximity to the "settings" button — I often don't want to open a note to force a sync if I'm trying to download notes created on another device.

[narFnarF]

I understand your concerns @laurent22 but the problem remains that the phone version needs to have sync status visible when you write. Do you at least agree with that?

For the desktop or tablet app, you're right that the sidebar stays visible and the sync status can be seen there. But on a phone, the need to see sync status is too important. Yes, consistency is important. Yes, we should avoid duplicating information. But we also need to know when it's ok to break a UI rule when needed.

If you're really against the idea and have no better solution to propose, they I would suggest that @personalizedrefrigerator transform his work into a Joplin plugin.... except that plugins are not available on iOS so it wouldn't solve the problem