Overhaul of the UI of links, lists and tags

[Kovah]

The current UI is good, but not really consistent. Especially links are displayed in many different ways across the application.

Please add your ideas and design inspiration.

---

LinkAce should have buttons to change the view directly on the page, with more options being available in the settings to configure it. completionist.me has a really nice UI to change how games are displayed, notice the toggles in the top right. Something similar could be adapted for LinkAce.

One minimal view that only shows the most important infos, like the current "list with less details" option.

One view that shows more infos, but does not visually overload the UI.

A card view that shows a lot of information but also is more heavy.

The same should be done with lists and tags.

---

The following issues should be taken into consideration while working on the UI:

• Public descriptions and notes? #479
• Display archived link if original link is dead or moved #444
• Link to archived page on all links view #443
• Displaying "No Tags" seems superfluous  #442
• URL to be truncated in CSS rather than at page render time #441
• Option to display absolute/real dates rather than friendly #438
• Semantic classes on elements to allow easier custom styling #437
• Option to disable thumbnails #435
• Option to disable icons #434
• New display type to be closer to Pinboard #433

[Creling]

IMHO, the list view and the card view are both classic and are adopted by plenty of apps. And the next thing is to decide which attributions of a link should be display in each view.

For me, the title, the tags, the lists and the time added are important for both views and the description are needed in the card view.

[Creling]

To be honest, I think hierarchy tags (i,e. #a/b) are better than the current used organization system (i.e. tags + lists).

[jacobgkau]

To be honest, I think hierarchy tags (i,e. #a/b) are better than the current used organization system (i.e. tags + lists).

I think that allowing tags to act more like tags (being able to search by tag with "and" and "not", effectively) would address a lot of additional use cases: #545

I used to prefer folder structures, but after writing my own bookmark manager with folders, I'm starting to wish that I had tags so I could find things easier. I realized that combinations of tags can easily make up the functionality of a folder. E.g. instead of having a "2022/News" folder, I can have a "2022" tag and a "News" tag, and I can search for "2022 News" if I want to see what would be in that "folder."

Similarly, in the case of a tag hierarchy, if tags functioned properly and allowed you to at least search with "and", there's nothing stopping you from using a tag naming convention that makes clear to you which tags "go inside" of which other tags (basically, which tags are more general and which are more specific.) I'm not sure that hierarchy needs to be explicitly supported in the code to meet your desired use case, if searching is properly/fully supported.

I do agree that lists seem a little superfluous in addition to tags, especially since lists can't have hierarchy either (so they're essentially just single-use tags.)

[amadeusp]

For me personally a UI that offers options for 1. minimal, 2. minimal + thumbnails and 3. one that displays the links as cards with large preview images is sufficient.

[Creling]

@jacobgkau

I used to prefer folder structures, but after writing my own bookmark manager with folders, I'm starting to wish that I had tags so I could find things easier. I realized that combinations of tags can easily make up the functionality of a folder. E.g. instead of having a "2022/News" folder, I can have a "2022" tag and a "News" tag, and I can search for "2022 News" if I want to see what would be in that "folder."

Using tags with logical conjunctions is a nice workflow when searching somthing. However, it will be a bit painful when saving pages.

Suppose that I am doing some research in filed A and find something useful. I will tag the page with '#Field/Field-A/Concept-B' in a hierarchy-tag system or with '#Field #Field-A #Concept-B' in a multi-tag system.

The difference is, the hierarchy structure itself is a kind of hint when tagging things, no to mention that I could benefit from autocomplete. But in the latter situation, I might not remember what the parent tag of a certain tag is, and must type in three individual tags manually.

The hierarchy-tag structure is a more flexible folder structure, which means you do not need to create folder manually and you could put a page in multiply folders.

[habitats-tech]

I believe a combination of lists and tags is welcome. Lists are similar to folders and can be used for searching, while tags are useful for filtering, as well as for searching. The concept of lists/tags is very similar to how relational databases work with tables/entities and fields/attributes.

For example I might have multiple links under a list (e.g. maths), while I can filter the maths list based on tags (e.g. #algebra, #geometry, #algebra and geometry, #algebra or #geometry, etc.). Sometimes a tag name is applicable to multiple lists so searching for the specific tag name might not be useful in all situations; although a hierarchical tag system can solve this issue.

However I believe lists are valuable, even with a hierarchical tag system in place.

[chrissawyerfan4]

Not precisely the links, lists and tags themselves, but I have made changes to their menu entries in my local version of LinkAce. Instead of the, pardon, inconsistent default version where links have dedicated menu entries for adding and viewing, but then lists and tags use a submenu for both adding and viewing, and then lots of unused space to the right of that, I have... well, showing is easier than telling :)

Original:

Consistified:

Clicking the word goes to the overview of links, lists, or tags, and clicking the + behind it goes to the adding page.

What I don't yet like is that there is no obvious link between the + and the item it belongs with, but for me it's an improvement.

An advantage of the submenus variant is that it could show (some of) the lists and tags, e.g. favorited lists/tags or the most recently added/updated/viewed or so. Could also still have both: click on the word to go to the respective page; click on a fold-out to get options like Add and the 5 most recently added ones, for example.

[Kovah]

So, I've come up with those three ways how links are displayed:

Simple

Basically like the current one, but with additional option to open share buttons.

Detailed

Extended list more similar to apps like Pinboard. Shows more details but doesn't overload the UI.

Cards

Large cards similar to apps like Raindrop, including thumbnails and more details.

---

All three options are available where links are displayed: link lists, tags and lists. The table view was removed.

The option can be toggled from the top of the list:

[amadeusp]

I like it! Maybe the Detailed view could show thumbnails as well?

[jacobgkau]

The way I wrote my alternative app basically looks like Simple except it also shows the favicon. Since the favicon is only as large as a single line of text anyway, I don't see why it should be omitted from Simple. (I agree with @amadeusp that a smaller thumbnail could go nicely on the left or right of the Detailed view, to maybe balance out how much text there is in that one.)

Proper tag searching functionality would be more important to me than any UI aspects, though.