[Mobile] Make Sync icon always visible

[CawlinTeffid]

Platform

iOS
Android

Obsidian Mobile version: v1.05, v1.1.0, v1.4.2

---

I’d like the Obsidian Sync status icon to be always visible instead of hidden behind the 3-dot invisible swipe-out right menu, so I can know ASAP if there’s a sync error, and to avoid editing files that might be out of sync.

When I move to a different device I’m often editing the same file (my daily note). I appreciate Obsidian Sync’s ability to merge conflicting changes, but sometimes it makes a small mess (like extra blank lines or repeated text), so I wait for Sync to complete before I edit.

Also I often pull out my phone, note something, and put it away quickly. Sometimes I put the phone away before Sync has finished uploaded the new changes. This would happen less if the Sync icon were always visible.

On desktop I can glance at the always-visible status icon, but on mobile I have to open the sidebar. It’s a small action, but it adds friction over the many times times I do it each day. The icon is small, and there’s room for it in the app header — even on my phone, which is one of the smallest currently available.

An interesting alternative proposal is to use a banner/alert:

Show a “Sync completed” banner on mobile when sync completes

Use case or problem The Obsidian Sync service can cause overwrites if I edit a file on one device before sync completes, on desktop it’s easy to wait for the the little sync icon to complete when first launching but AFAIK there’s no equivalent on iOS mobile/iPad. Proposed solution Have an option to enable a “Sync completed” banner on mobile when sync completes. Current workaround (optional) Go to settings and view the sync activity and wait for the fully sync’d message.

Workarounds

There’s a CSS snippet now thanks to sailKite! [Mobile] Make Sync icon always visible - #6 by CawlinTeffid

The discussion after that comment may help you fine-tune it — especially @jijo’s addition which moves other items to make more room for the sync icon. [Mobile] Make Sync icon always visible - #12 by jijo

For convenience, here is my current full version of the snippet, which incorporates changes from the discussion: [Mobile] Make Sync icon always visible - #25 by CawlinTeffid

Changes

• 2023-05-30
  • Linked to updated snippet for convenience.
  • Moved previously-added link to snippet mod to correct place (oops).
• 2023-04-13
  • Linked to snippet mod that makes more room for icon.
• 2023-02-25
  • Added current version number.
• 2023-02-23
  • Added link to CSS workaround.
• 2022-03-21:
  • Added current version number
  • Added more use-case detail.
• 2022-12-19:
  • Updated reference to redesigned menu.
  • Linked to alternative proposal.

[CawlinTeffid]

Relevant:

Obsidian Sync: updates from one device overwritten by another

This happens when using Obsidian Sync on multiple devices (Macs + iOS devices). For a specific file (Daily Note for example), one device (Mac) starts with version 1 and sync across all devices using Sync. Then I add some update to the file, making it version 2. At this time the iOS device hasn’t sync this version 2 due to lack of background sync when the app is not opened. If I now open Obsidian on iOS with daily note at version 1, and immediately add some content, if it works correctly, the fi…

[CawlinTeffid]

It might be possible for a CSS snippet to reposition the sync icon. I don’t have the gumption to explore that now, but I plan to someday if the problem persists.

[chrsle]

+1
I can never exit the app right after typing but always have to wait 1-3 seconds for sync to finish, because every time I exit the app it immediately gets backgrounded and sync activity stops, leading to possible sync conflicts.
Sync resumes normally when I open Obsidian again, though sometimes with 20 seconds delay.

iPhone 11, iOS 15.3.1
This has been happening from the start.

[Sentiment]

Yes, please.

[Feature] Background sync

In the absence of background sync, one potential improvement would be to display the sync indicator at the top of every note. Currently you have to swipe from right to see it: [RPReplay_Final1659735152] However, for example, in another note app I have, the sync status is always visible: [RPReplay_Final1659735068 (1)] This way, you could at least easily see when the sync has completed, before you close the app.

[CawlinTeffid]

Workaround: I finally asked the Obsidian Discord #appearance channel for a snippet to make the Obsidian Sync icon always visible on mobile.

SailKite kindly provided one! Discord

Currently the icon overlaps its neighbors, but I’m able to tap them both so I’m using it. I’ll try to tweak it someday. For now, this is a big improvement!

no warranty for damages, this is gonna be scuffed

/* attempt to display sync icon on mobile while drawer is closed */
:is(.is-mobile, .is-phone) .workspace:not(:has(.workspace-drawer-backdrop)) .workspace-drawer.mod-right {
    display: flex !important;
    overflow: visible;
    left: 100%;
}
:is(.is-mobile, .is-phone) .workspace:not(:has(.workspace-drawer-backdrop)) .workspace-drawer.mod-right .workspace-drawer-inner {
    overflow: visible;
}
:is(.is-mobile, .is-phone) .workspace:not(:has(.workspace-drawer-backdrop)) .sync-status-icon {
    position: absolute;
    left: calc(-1 * var(--size-4-16));
    top: var(--size-2-2);
}

you can fiddle with the positioning by changing the left declaration in the last ruleset
i did this all with mobile emulation so it’s not surprising that the real value that works comfortably in the layout is different
also, this does technically make it so that the drawer itself is always present, just offscreen instead of not displayed
whether that produces side effects, i can’t say, so just be aware of that
…
--size-4-16 corresponds to 64px, just for comparison
higher values make it go farther left, lower goes closer to the edge

EDIT: Christian_S notes that using --size-4-8 moves the icon to the right edge of the screen. Discord

[chrsle]

Jopp from discord gave me an improvement idea which makes it easier to experiment with the sync icon location.

The changes are highlighted in bold:
:is(.is-mobile, .is-phone) .workspace:not(:has(.workspace-drawer-backdrop)) .sync-status-icon {
position: absolute;
left: calc(-1 * 64px);
top: 4px;
}

This is the original code from sailKite, with adjustments that work well for my screen size (iPhone 11) as well as iPad:

/* attempt to display sync icon on mobile while drawer is closed */
:is(.is-mobile, .is-phone) .workspace:not(:has(.workspace-drawer-backdrop)) .workspace-drawer.mod-right {
    display: flex !important;
    overflow: visible;
    left: 100%;
}
:is(.is-mobile, .is-phone) .workspace:not(:has(.workspace-drawer-backdrop)) .workspace-drawer.mod-right .workspace-drawer-inner {
    overflow: visible;
}
:is(.is-mobile, .is-phone) .workspace:not(:has(.workspace-drawer-backdrop)) .sync-status-icon {
    position: absolute;
    left: calc(-1 * 37px);
    top: -5px;
}

[CawlinTeffid]

For now I’m going with -1 * 36px (I tried putting it between the 3-dot and the reading mode icon which it looks like is what you did, but it felt too cramped to me). For top I did 49px on iPad Air 4 (to move it down next to the the 3-dot instead of the sidebar button) and 9px on iPhone 13.

I tried moving it down to the lower right corner. It looked pretty good, but the keyboard covers it and it’s more glanceable up top anyway.

Now I want to learn how to move the 3-dot menu left or right so I can space things more evenly, and then I think I’ll be done.

[chrsle]

The -1*37px and -5 move it all the way to the top right corner on my iPhone 11.
One could also consider moving it left next to the left sidebar button , but I’m very happy now with the implementation.
Btw I haven’t discovered any other issues or things breaking so far
Edit: hail to the sailkite

[CawlinTeffid]

Oh, maybe I’ll try that on my phone.

Current phone:

& iPad:

And yes, hail to sailKite!

EDIT: Going with -5px on phone, -13px (and moved another 2px to the right) on iPad.

[Zarconoris]

• 1 for this feature request

[jijo]

This is brilliant! Thank you to everyone in this thread for the good ideas.

I’ve added some CSS to nudge the “three dots” icon to the left so there’s some breathing room between it and the checkmark. For me, this makes it easier to press the icon I intend.

Please see the attached screenshot from my Android phone and the CSS code below. (You may need to play with the 23px in the code to suit your screen.)

:is(.is-mobile, .is-phone) .workspace:not(:has(.workspace-drawer-backdrop)) .view-actions {
  padding-right: 23px;
}

[chrsle]

This works perfectly on my iPhone, thank you so much! Tagging @CawlinTeffid

[CawlinTeffid]

Beautiful!

The change ceases to apply when I open the left sidebar, which looks awkward but doesn’t cause any practical problems. It’s more noticeable on my tablet; on the phone the sidebar covers it so I only see it during the transition. EDIT: Actually it’s not that awkward. At some point in my number adjustments it caused an overlap, but now it only causes some movement.

[Dinomite07]

Use case or problem

i cannot tell when obsidian is not synced/hasn’t synced on android

Proposed solution

add a syncing indicator
similar to the one on the desktop app.

Current workaround (optional)

Related feature requests (optional)

[Dinomite07]

is there a reason why this feature hasn’t been added? it would seem like an easy feature to implement.

[CawlinTeffid]

There are infinite possible features and only a handful of developers. Not all users use Sync and it’s already possible to check the sync status by swiping open the right sidebar (which has no visible control on phones — argh! ). And the small screen space of phones forces tough decisions.

[Dinomite07]

did you mean swiping to the right which opens the drawer. the drawer opens from the left. i don’t see the syncing indicator in the drawer.

[CawlinTeffid]

No, swipe open from the right side — there’s another sidebar.

Swiping is the only way to open it (other than the “Toggle right sidebar” command). There’s no button for it. Which, yes, is annoying.

[Dinomite07]

thanks, solved my issue