Logo Cyca

v0.9: The UI update

Libraries updates

Three major moves for the UI update: tailwind 2, Vue 3 and Vuex 4. I’ve revamped nearly everything related to the UI, so there’s a lot to say about this upgrade again !

Dark mode, light mode, and auto mode

I decided to remove themes support for now, in its current form. Too complicated and poorly implemented, too slow and unreliable. I was trying something there, and in the end, I’m not satisfied.

Moving to tailwind 2, I wanted to give a try to the variants system, and the fact that this new version introduces a dark variant, I figured it would make my job easier. And it did ! The dark and light themes are now merged into one stylesheet, making the old themes repositories obsolete, and they will be removed soon.

The theme is now selected from your account page, and offers you three options:

  • Dark mode
  • Light mode
  • Auto

The “Auto” option will automatically adapt the color scheme to your operating system preference. I wanted to implement that a long time ago, but tailwind 2 made it so easy it made sense to do it now.

Of course, the UI Update is not just about that, let’s dig deeper into it.

Improvements

Unified lists

Lists are unified in the CSS. Before, I created a class for each kind of list (feed items, groups, folders, etc.), which became a burden over time and really not necessary.

However, to make the UI more readable, some lists have small specificities, like the folders list which is not striped like the documents list. I’ve also switched from definition lists to regular lists to display object properties.

Unified lists are also used in the groups and highlights management interfaces.

All in all, these changes make Cyca’s UI more consistent and, to me at least, a bit more beautiful 😊.

Details/summary use

I wanted to leverage the use of the <details> HTML tag, and it turns out very well in Cyca’s interface, mainly to present a document’s feeds list or object properties such as real URL, or folders permissions. Once themed, it provides a nice look’n’feel, and also serve its purpose to hide interesting but non-crucial informations. Basically, they are used as collapsible panels.

I wanted to implement them now, for the UI upgrade, but they will really prove their value in future updates, as I have plans for Cyca to collect more data about your bookmarks and feeds.

Prose

Pre v0.9 feed reading was sub-optimal, mainly because I didn’t have a proper style definition for it. Well, now I do, and it looks good to me ! I think I still need to address some formatting issues during feeds analysis, and I will do it using more advanced parsers in a future update, but at least feeds now look readable.

Other noteworthy changes

  • Thanks to the unified lists, feed items are now listed in a compact form, and their title will be truncated when needed.

  • Reading feed items is more pleasant: when you are reading a feed item while Cyca updates the feeds, the feed items list won’t de-select your item anymore. Also, marking a feed item as read won’t automatically select the first unread item available but rather the next after the one you were reading.

  • Highlights management was improved. It is now possible to reorder them. Say you want to highlight “Hack” in your feeds, but also “Hacker” in a different highlight color. “Hacker” would just have the “Hack” sub-string highlighted using the color chosen for “Hack”. Now, thanks to the possibility to change the order in which highlights are applied, both “Hacker” and “Hack” would be properly highlighted.

  • The history-related features are temporarily removed. I figured it was flawed, mis-used, uninteresting in its actual form. I plan to re-introduce it later, but with a lot of improvements.

How to upgrade

The same rules applies as when you upgraded from the v0.7 to the v0.8. Long story short:

  • Export your data
  • Wipe the database
  • Migrate
  • Register
  • Import your data

What’s next

I maintain my plans. Now the v0.9 is out, this branch will only get bug fixes and small improvements, but no new feature will be added. Once I’m satisfied, I will publish the v1.0, first official stable version of Cyca, under the codename Revoluta.

I expect to release Cyca Revoluta next week, but delays may occur. You know how it is…

I am going to update Cyca’s documentation and website this week, remove obsolete docker images and GitHub repositories (the ones related to the themes), and fix a few things I know I need to fix.

Known issues

  • The Docker image doesn’t work anymore

I’ve removed dependency to laravel/horizon but forgot to update the container accordingly. I’ve removed this dependency so redis is no longer a requirement, but as horizon was in charge of running queue processes, another process manager is required. In a “bare-bone” installation of Cyca, you could use supevisord and provided example files found in Cyca’s directory, but the Docker image won’t work without modifying the docker-compose.yaml file. I’m working on fixing this issue but I may need some time.