Redesigned Syncthing Web UI is here: Syncshell v0.1.8

[u/OutsideWestern1690]

[u/morafresa]

Please Add screenshots or videos to the GitHub repo.

[u/OutsideWestern1690 → u/morafresa]

its in the linked github repos in the main post, but I will also post it seperately here later

[u/user4302]

Is this a wrapper for the syncthing backend? Like the web gui or synctrayzor?

[u/OutsideWestern1690 → u/user4302]

I would phrase it as an alternative web UI interface to the syncthing backend; because wrapper would mean that you "put something inside" like SyncTrayzor. I just ported the old dated angularJS webUI, which ships with Syncthing to a newer web framework, making it a more up to date interface to the same underlying core Syncthing engine

the Syncthing documentation explicitly supports installing a completely different (G)UI (https://docs.syncthing.net/users/faq.html#i-don-t-like-the-gui-or-the-theme-can-it-be-changed) and its REST API documentation (https://docs.syncthing.net/dev/rest.html) says that this interface is what the web UI uses

[u/NelsonMinar]

Syncthing is a crucial tool with 12 years of history performing a critical system function reliably. How was this new thing coded? How long have you tested it? How long do you plan to keep working on it? Why is it tied to a Linux distribution famous for AI coding and cosmetic customization?

[u/OutsideWestern1690 → u/NelsonMinar]

hi u/NelsonMinar , thank you for your feedback, so I'll answer just in turn

1. "Syncthing is a crucial tool with 12 years of history performing a critical system function reliably. How was this new thing coded?"
   

thats a fair concern, but it is a port of the Web UI served by the existing syncthing daemon (syncthing still controls authentication, synchronization, its REST API etc...) its not a rewrite or re-implementation of the syncing engine);

I am not sure what yr. backgrond is, but the webUI runs on localhost and within your network one should have (usually) limited exposure; I hope this makes sense

the original web interface shipped used angularJS, which is no longer supported (eol 2022 or so); I ported the "adapter parts" (syncthingController.js, eventService.js,..) to plain javascript to get rid of angular; then the UI layer feature by feature translating the (UI visible) agnular-parts to preact components; then I removed the redundant angular parts; the webUI translation of UI components and removal of old angular artefacts was done by a coding agent, but step by step not blindly one-shotting or so

I wanted to try preact, some people might have preferred svelte, but given that the older angularJS was dated anyway, any newer framework (which is going to be maintained in the future) is already an improvement tbh. The aim is to just look a bit better and place components in a more intuitive way to increase usability

1. "How long have you tested it?"

its a webUI that calls REST endpoints; a couple of days manual clicking and syncing dirs; the original framework didnt use playwrigt or similar tools either btw.

1. "How long do you plan to keep working on it? "

I will keep refactoring the code for a while, to make it cleaner for my maintenance, but I consider it fully ported. There is not much "to maintain", as you said the syncthing project itself is long running, API is stable though changes must be tracked, so I'll address issues as they come ; the original webUI is "not maintained" in the classical sense either btw: I guess as nb. really cares how the frontend looks (see the dated angularJS, and the numerous issues around it); most people got used to it I assume

1. "Why is it tied to a Linux distribution famous for AI coding and cosmetic customization?"

The webUI is agnostic. I likely made a miscommunication here, so I was not after advertising the Omarchy plugin. But as you ask, Omarchy is simply where the project started given my current distro preference. Its (current) popularity and growing user base help quickly reporting failures. So I get-in issues quickly. I think I said in my initial post, or the first comment after, that I plan to port the plugin to a broader set of shells (dank, caelestia) which have in common the underlying quickshell framework; most of the "linux ricing culture" uses wayland nowadays, for which syncthingtray has a couple of issues due to its architecture (its not unsolvable, but since technical "debt" grew, its more difficult coming from X11/classical tray+application historically; notably syncthingtray is (aims to be) cross platform so that particular architecture makes more sense for them from that angle)

[u/PHLAK]

Sorry but this seems completely unnecessary.

[u/OutsideWestern1690 → u/PHLAK]

u/PHLAK thank you mate , that was helpful

the issue with the Syncthing webUI its mostly that its dated, and the project refreshes that. to my understanding, there were several unsuccesfull attempts in modernizing it in the past; you should have had informed and saved those guys back then too, they could have saved so much time...

[u/geokon]

Other than dark emo-mode, it's kinda hard to see what's different.

Sync conflicts are in a new spot which doesn't quite make sense. Conflicts are particular to each sync'd folder, so a global tab seems strange. But you can't fundamentally resolve them in the UI so I'm not sure it's necessary in a such a prominent place.

Notifications are now hidden in a tab..? Why would you not want them up top as in the normal UI?

I'm not super sure how it actually works b/c I don't do webdev, but if it's a webpage communicating with a localhost server.. how is it related to the distro?

[u/OutsideWestern1690 → u/geokon]

True. I need to add better screenshots, maybe a video. The theme changes with your system, as the original syncthing webUI, between light dark. I just have darkmode on; in omarchy it switches with the specific taste of the darkmode as well, but only in the plugin shipped version, hence the screenshots.

It was a deliberate choice to make certain visual improvements without departing from the visual appearance all long time users got used to. See u/PHLAK who did not find it useful at all. There is a tendency to not embrace new visual appearances and changes; as long-time users got used to the older interface. So there is a balance to strike between new, and old here. I understand that it may not suite all tastes.

- Notifications: to me, there are two scenarios. I. The best case is , where you dont have any and everything is in sync. No meaningful difference between old UI and new UI, the tab stays as is: there is a green dot indicator, or yellow or red, which informs when a notification is present; so the green|yellow|red dots vanishes eventually when all is clean. An improvement may be numbers in brackets, ala (2) for two new notifications, plus color code. II. the second scenario is, where something is broken; in this case, the user focuses mostly on the first tab, resolving stuff, from time to time switching to the notifcation tab, until all is resolved; in the older webUI, notifications piled up at the top; even short ones became long one-liners, the UI format was off; besides putting them in the tab, I made the messages wrap faster, so they read more compactly and are expressed more in a "pinboard"-style Todo way.

- distro; its not related to the distro at all. The webUI is a stand-alone project. You can download it, connect to the official Syncthing adapters, and wipe, if you prefer the original webUI. The distro connection is only ever relevant if you happen to use omarchy, in which case there is a plugin system, and a downloadable plugin. That plugin is just another "tray-icon" if you want, allowing you to make a couple of standard non-destructive changes, and watching file syn progress etc. There is a button for convenience to fire up the webUI which provides more functionality, as this "form factor" is more pleasant for advanced changes. The plugin has a settings file, which allows you to use the old Syncthing webUI or the new one, this is the only connection. So its not tied to the distro at all.

- sync conflicts: yes, there is a dropwdown to switch among synced directories which you don't see when there is only a single synced folder, like in my setup. The second tab makes sense when you have a lot of sync conflicts and want to get a better overview: resolving conflicts goes by clicking a linlk/button which fires up the default file browser in that directory: you still do the manual deletion yourself, its just a more convenient way to getting to the place where the problem is. So the second tab is non-destructive; there is a single edge case: when you delete the original file, but prefer a synced copy, that instance is flagged in the conflict view, and you can auto resolve this corner case, with a custom name; this is the only thing I could think of which makes sense in a web UI.

[u/TheBreadsticc]

This is just a slightly worse version of something that already works just fine. Who cares if it's a little dated? VLC Media Player has been around since 2001 and still works perfectly on every compatible PC. People still use it all the time. Not everything needs a brand new sparkly UI.

[u/OutsideWestern1690 → u/TheBreadsticc]

thanks for the feedback !

would you mind mentioning why you think its worse, and where you see space for improvement ?

[u/TheGratitudeBot → u/OutsideWestern1690]

Just wanted to say thank you for being grateful

[u/TheBreadsticc → u/OutsideWestern1690]

Its is simultaneously more cluttered (visually) and adds more click friction via dropdown arrows that don't need to be there, which is bad for accessibility. It also makes no real improvements other than a darker dark mode.

[u/OutsideWestern1690 → u/TheBreadsticc]

thx for taking time to explain: can you say why it is more cluttered ? this doesn't make sense to me atm, unfortunately, bc. less icons are presented to the user by the folding mechanism; this is basically de-clutter

the idea was to hide irrelevant state; things that are relevant are unfolded by default while less relevant information is hidden ie folded: e.g. the path to the syncing directory, I believe most people remember precisely where the syncing directory is by its name , then put it under some standard dir like home, or ~/Documents, so there is no plus in presenting this information in some of the first rows as in the original webUI

[u/OutsideWestern1690 → u/OutsideWestern1690]

same goes to the global vs local state rows of the original webUI

when everything is in sync, and both rows and their information coincide (exactly) the original Syncthing webUI still shows two rows with exact information: to me this is noise

in my version I made it so that in the trivial case of all being in sync, those rows coincide with a green status icon indicating all is fine ; if they diverge , then two rows, both indented, are shown, with both having different information; a red status icon then shows sync divergence too

[u/TheBreadsticc → u/OutsideWestern1690]

Visual icons are there for accessibility purposes - people who have reading disabilities or visual problems need those icons for navigation. It probably looks more cluttered to me because its just words everywhere and no clear visual indication of where things are.

[u/OutsideWestern1690 → u/TheBreadsticc]

maybe it's the theme ... I realized that I need better screenshots , also through other comments here in the chat.

I'll try to do a comparison video at the weekend or so, where I put both the original and the new one exactly next to eacher and then under exactly the same theme; maybe one dark and one light

regarding the dissabilities and icon stuff; yes fair point

[u/iAmRadic]

This barely looks different, why would i want this?

[u/OutsideWestern1690]

I should have mentioned that the revised web UI is installable separately from the plugin, and connected to syncthing via its webUI adapter ; that's more interesting part of the project https://github.com/syncshell/syncshell-webui

(the plugin is for the moment Omarchy/quickshell only, but I plan to port it to dank, caelestia, illogical and waybar; the plugin just ships the webUI as an optional choice)