[FEAT] For improved UX, split the long list of plug-in options across categories within a tab control

[ronzulu]

Is your feature request related to a problem? Please describe.

The list of options supported by the plug-in is quite extensive. This list likely will grow when various feature enhancements are implemented, and will become somewhat daunting especially for new users.

Describe the solution you'd like
Split the current list by category by using a tab control, such as used by the "shell commands" plug-in

[Steindvart]

A good idea. It looks amazing! I didn't even know that there is such an opportunity in the organization of the settings interface. I will try to implement it in the near future.

[ronzulu]

Sorry @Steindvart I've started without you!

[Steindvart]

Sorry @Steindvart I've started without you!

Thanks! Then we will wait for such a wonderful update :)

In connection with this situation, such an idea arose – it is necessary to mark in the Issue (comment or in description) that you started working on it. This will be a good practice to avoid isolated cross-work on a particular problem.

[ronzulu]

Hi @st3v3nmw @Steindvart and everyone

I've completed implementation, and definitely happy to receive feedback.

I've tried to keep the order and grouping of settings consistent with the current UI, only changing when I thought there was a reason.

I haven't changed any existing wording, but have added new wording for the tab names and some new group headings.

Sorry this is a long post!

Flashcards

Notes:

• Moved UI settings to a "UI Preferences" tab
• Kept existing order of settings, except for Save scheduling comment on the same line as the flashcard's last line?. With a heading of Storage of Scheduling Data it seemed out of place in its existing order.

Notes

Existing order retained

Algorithm

Existing order retained

Advanced

This is the one that I'm least happy with.

The issue is that the setting applies to both flashcards and notes, and therefore needs to be in a separate tab. But I couldn't place it in any of the other tabs. Hence why it currently is in a tab all by itself.

I'm not keen on the term "Advanced", but thought it's probably better than "Miscellaneous".

UI Preferences

Flashcards & Notes - As of #670 these settings apply to both the flashcard modal and note related menu items.

Developer

Help

Cheers
Ronny

[Steindvart]

Hi @ronzulu! Looks awesome! Thank you for your work!

The compromise with the Advanced tab, I think, is justified and looks the best at the moment.

[st3v3nmw]

Hi @ronzulu,

I agree with @Steindvart, the UI improvement is amazing! I'm also not too keen on the name "Advanced", I can't think of a better alternative at the moment

How does it look like on mobile?

[ronzulu]

Thanks @Steindvart and @st3v3nmw

I've had an idea instead of the "Advanced" tab.

Simply include the setting in both the Flashcard and Notes tabs.

This means that we don't have to struggle to come up with some alternative word to "Advanced", and has the benefit that it's directly visible to users where it is most relevant.

I've added some words "Note that this setting is common to both Flashcards and Notes.

I know it's quite unconventional to duplicate a setting, but I think it's probably the best solution.

Let me know what you think.

And Stephen, good question regarding mobile. So far I haven't used obsidian on my mobile, so this is a good reason to install!

Cheers
Ronny

[ronzulu]

Hi @annappropriate, I'm wondering if you think this is a good idea? Perhaps even more important on a mobile device?

I did try the code on mobile as suggested by @st3v3nmw but it didn't work. I only have basic css skills, if you like this idea would you have a chance to fix on mobile?

Cheers
Ronny

[annappropriate]

Hi @ronzulu! Looks neat, would love to have this on desktop!

Regarding mobile, I think that the device size might be a challenge. On desktop, you can be pretty liberal with your tab names. Unfortunately, they won't fit on mobile.
An interesting example of mobile-friendly settings screen is the Linter plugin. It offers tabs with icon titles that reveal their full name when selected, and also search for filtering the options quickly:

This is quite a bit of work, but it's the nicest way to navigate lots of settings on mobile that I've seen so far.

[ronzulu]

@annappropriate

Thanks for that, I hadn't seen it before. It does seem very well designed. I love how it starts off with just the icons to minimise space, but the active tab has the textual name shown for confirmation. And the search facility is also great – probably a good idea for our plug-in as well given that there are a fair few configuration items already, and I'm sure that will only grow.

I have tried the updated code on my mobile, and the tab names are split over 2 lines which I think is probably okay. The main issue is that content of the tab doesn't change – the tab highlight does change, but not the content.

Would it be okay if I posted a link to my repository? The issue might be something simple that you can spot and fix quite quickly.

Cheers
Ronny

[annappropriate]

I can give it a try

[ronzulu]

Actually, I was just trying it again on the desktop before sending you my repository details, and it isn't working now.

So I must have broken it at some point. Hopefully I'll be able to sort this out myself

Cheers

[ronzulu]

@st3v3nmw @annappropriate works on mobile now as well.