[Feature Request][UX]: Embed "Add Tag" and "Add Field" Modals in Preview Panel

[CyanVoxel]

Checklist

• I am using an up-to-date version.
• I have read the documentation.
• I have searched existing issues.

Description

This is a proposed UX improvement for adding tags and fields quicker to entries. Currently, to add a tag to an entry from the UI, the user must perform the following clicks and key presses:

1. Click "Add Tag" button or use Ctrl + T
2. Start typing to search for tag
3. Hit Enter if tag exists
   3a. If tag does not exist, hit Enter to open tag creation modal
   3b. The user could either fill out detailed info now, or hit Enter again to create and close the "edit tag" modal
4. Hit Enter/Esc to close the "add tag" modal

For users who are frequently creating new tags (especially in new libraries), every mouse click and keystroke matters. That's why I'm proposing to ditch the modal approach and prioritize moving the user quickly between searching/creating tags to getting those tags added to searching/creating again.

Solution

What I have in mind would work something like this (using tags as an example):

When adding a tag, the entry data section of the preview panel is now turned into a search preview, similar to how the modal search currently works. The search/input bar for tags is now at the bottom, and the "Add Tag" and "Add Field" buttons are replaced with a single "Cancel" button that reverts the preview panel back to normal (Esc will also revert the box).

1. Click "Add Tag" button or use Ctrl + T
2. Start typing to search for tag (same as modal).
3. Hit Enter if tag exists to add it and revert to the preview panel view. Optionally, tags that are already added to the entry can display greyed out.
   3a. If tag does not exist, hit Enter to "Create & Add", which will now skip the edit modal and simply make a blank tag with text the user had input and add it to the entry. The preview panel is now reverted back to its normal state, perhaps with the "Add Tag" button highlighted in order to allow for an Enter press to enter them back into the search. Otherwise, if the user wishes to still edit the tag further at the time of creation, there is a new option before "Create & Add" called "Create & Edit" which opens up the "edit tag" modal, just like the current behavior.

This should allow users to still add existing tags quickly while being able to more quickly create tags that don't already exist without having to have the "edit tags" modal fly up in their face if they don't want it. This method should also work for adding fields, building off the work of #1374.

Alternatives

One aspect of this proposal that could be a hindrance is that previously when adding multiple tags that exist in a row, after hitting Enter you were then put back into the search bar to start typing for another tag right away. Now, after adding a tag that exists you'll have to hit Enter again in order to bring the search bar back up.

It's possible that a better behavior would be to keep the search/input bar up after successfully adding or creating a tag, and then requiring the user to hit Esc or "Cancel" in order to restore the preview panel. It's also possible that this is very subjective and should be an option for the user to set themselves.

In any case, we should know more about this once the feature is developed and we can test run it.

[Computerdores]

I like the idea of only creating the tag with a name and skipping the edit modal, as long as both buttons are keyboard accessible (perhaps Shift+Return for "Create & Edit"?).

However, closing the tag add dialog after the first added tag would mean a significant number extra button/key presses in new libraries, so this should be configurable.

Nit: "Create & Edit" could be understood to not add the tag. Perhaps it could be "Create, Edit & Add"?

[CyanVoxel]

I like the idea of only creating the tag with a name and skipping the edit modal, as long as both buttons are keyboard accessible (perhaps Shift+Return for "Create & Edit"?).

I was thinking of just using the down arrow to move to it like how you move through the other tags, but that also sounds like a good shortcut!

However, closing the tag add dialog after the first added tag would mean a significant number extra button/key presses in new libraries, so this should be configurable.

The same potential setting mentioned in the Alternatives section?

Nit: "Create & Edit" could be understood to not add the tag. Perhaps it could be "Create, Edit & Add"?

I wasn't too clear about this, but I was leaning towards not having the "Create & Edit" button add the tag to the entry. I think part of me considered having different "Save" and "Save & Add" buttons in the edit tag modal itself, though upon coming back to this with a fresh head yeah it would make sense to just add the tag after the user has created + edited it, otherwise why are they even creating it though the preview panel...

[Computerdores]

However, closing the tag add dialog after the first added tag would mean a significant number extra button/key presses in new libraries, so this should be configurable.

The same potential setting mentioned in the Alternatives section?

ugh yeah, started typing mid read, mb

Nit: "Create & Edit" could be understood to not add the tag. Perhaps it could be "Create, Edit & Add"?

I wasn't too clear about this, but I was leaning towards not having the "Create & Edit" button add the tag to the entry. I think part of me considered having different "Save" and "Save & Add" buttons in the edit tag modal itself, though upon coming back to this with a fresh head yeah it would make sense to just add the tag after the user has created + edited it, otherwise why are they even creating it though the preview panel...

my thoughts exactly :)