docs: update basic usage with tagging bar

docs/fields.md

@@ -10,6 +10,8 @@ icon: material/text-box
 
 Fields are extra pieces of information you can add to [file entries](./entries.md), similar to how [tags](tags.md) are added to entries. Fields are useful for storing information that doesn't nessisarily need to be a tag, such as titles, comments, notes, specific dates or times, etc.
 
+Unlike tags, fields are based on [templates](#templates) that contain pre-filled information such as the field type and title, and that information is _copied_ to fields when adding them to entries. Editing field information on entries **does not** modify the template it was created from.
+
 To add a field to an entry, click the "Add Field" button in the preview panel. From there you can search and/or select a [field template](#field-templates) to choose from, or create a new one from the search bar. Alternatively you can create new field templates from **Edit -> Manage Field Templates**.
 
 <figure markdown="span">

docs/roadmap.md

@@ -98,7 +98,7 @@ A detailed specification written for the TagStudio tag and/or library format. In
 - [x] Translations
 - [ ] Search Bar Rework :material-chevron-triple-up:{ .priority-high title="High Priority" } **[v9.6.x]**
     - [ ] Improved Tag Autocomplete :material-chevron-triple-up:{ .priority-high title="High Priority" }
-    - [ ] Tags appear as widgets in search bar :material-chevron-triple-up:{ .priority-high title="High Priority" }
+    - [ ] Tags appear as widgets in search bar _(similar to new tag search/create bar)_ :material-chevron-triple-up:{ .priority-high title="High Priority" }
 - [x] Unified Media Player
     - [x] Auto-Hiding Player Controls
     - [x] Play/Pause
@@ -116,7 +116,7 @@ A detailed specification written for the TagStudio tag and/or library format. In
     - [x] Basic Support
     - [ ] Full File Preview :material-chevron-triple-up:{ .priority-high title="High Priority" } **[v9.6.x]**
     - [ ] Syntax Highlighting :material-chevron-double-up:{ .priority-med title="Medium Priority" } **[v9.6.x]**
-- [ ] Toggleable Persistent Tagging Panel :material-chevron-triple-up:{ .priority-high title="High Priority" } **[v9.8.x]**
+- [ ] Toggleable Persistent Tagging Panel :material-chevron-triple-up:{ .priority-high title="High Priority" } **[v9.7.x]**
     - [ ] Top Tags
     - [ ] Recent Tags
     - [ ] Tag Search

docs/stylesheets/extra.css

@@ -73,6 +73,10 @@
     border-color: #ffffff33;
 }
 
+img {
+    border-radius: 6px;
+}
+
 th,
 td {
     padding: 0.5em 1em 0.5em 1em !important;

docs/tags.md

@@ -116,12 +116,10 @@ Due to the nature of how tags and Tag Felids operated prior to v9.5, the organiz
 
 #### Is Hidden
 
-<!-- prettier-ignore -->
-!!! warning ""
-    **_Coming in version 9.6.x_**
-
 When the "Is Hidden" property is checked, any file entries tagged with this tag will not show up in searches by default. This property comes by default with the built-in "Archived" tag.
 
+---
+
 ## Tag Search Examples
 
 The following are examples of how a set of given tags will respond to various search queries.

docs/usage.md

@@ -17,47 +17,93 @@ To create or open a [library](libraries.md), go to **File -> Open/Create Library
 TagStudio automatically scans for new or updated files when opening a library by default. Manually refresh by going to **File -> Refresh Directories** in the menu or by using <kbd>Ctrl</kbd>+<kbd>R</kbd> (<kbd>⌘ Command </kbd>+<kbd>R</kbd> on macOS).
 
 <!-- prettier-ignore -->
-!!! tip "TagStudio Libraries"
+!!! abstract "TagStudio Libraries"
     To learn more about how TagStudio libraries work and how to use them, visit the **[Libraries](libraries.md)** page.
 
-## Adding Tags to File Entries
+---
 
-Access the "Add Tag" search box by either clicking on the "Add Tag" button at the bottom of the right sidebar, accessing the "Add Tags to Selected" option from the File menu, or by pressing <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>T</kbd>.
+## :material-tag-text: Tagging
 
-From here you can search for existing tags or create a new one if the one you're looking for doesn't exist. Click the "+" button next to any tags you want to the currently selected file entries. To quickly add the top result, press the <kbd>Enter</kbd>/<kbd>Return</kbd> key to add the topmost tag and reset the tag search. Press <kbd>Enter</kbd>/<kbd>Return</kbd> once more to close the dialog box. By using this method, you can quickly add various tags in quick succession just by using the keyboard!
+With one or more file entries selected, you can **search for** or **create a new tag** by clicking the "Add Tag" button at the bottom of the preview panel or by pressing <kbd>Ctrl</kbd>+<kbd>T</kbd>.
 
-To remove a tag from a file entry, hover over the tag in the preview panel and click on the "-" icon that appears.
+This will open the the **"Tag Bar"**, a combination search/creation bar that is designed to allow you to quickly create and apply tags that don't exist yet, find and apply existing tags in your library, and verify if certain tags already exist and/or are applied to your selection.
 
-## Adding Metadata to File Entries
+Every step is keyboard-friendly, allowing for an efficient tagging "flow state" when it comes to creating and applying tags.
 
-To add a metadata field to a file entry, start by clicking the "Add Field" button at the bottom of the preview panel. From the dropdown menu, select the type of metadata field you’d like to add to the entry
+<figure markdown="span">
+  ![Empty File Entry](assets/tag_field_bars/add_buttons_normal.png){ width=80% }
+  <br>
+  ![Empty File Entry](assets/tag_field_bars/tag_bar_empty.png){ width=80% }
+  <figcaption>Clicking "Add Tag" or pressing <kbd>Ctrl</kbd>+<kbd>T</kbd> replaces the "Add" buttons with a tag search bar. Pressing <kbd>Esc</kbd> (or <kbd>Enter</kbd> with a blank search) will close the bar and return the "Add" buttons.</figcaption>
+</figure>
 
-## Editing Metadata Fields
+<!-- prettier-ignore -->
+!!! note "Classic Tag Search Panel"
+    You can access the classic tag search panel by going to **File -> Add Tag to Selected** in the menu bar, or by pressing <kbd>Shift</kbd>+<kbd>Ctrl</kbd>+<kbd>T</kbd>. Note that this panel will change and move in the future, becoming part of a set of dockable side-panels for tagging that can stay open between making selections. See the [roadmap](./roadmap.md#uiux) for more info.
 
-### Text Line / Text Box
+### :material-tag-plus: Tag Bar: Creating Tags
 
-Hover over the field and click the pencil icon. From there, add or edit text in the dialog box popup.
+Type to search for an existing tag, or use that search term to quickly create and apply a new tag to your selection. Pressing <kbd>Enter</kbd> with **no results** will **create** a tag from your search query and apply it to the selected entries.
 
-## Creating Tags
+After applying a tag, the "Add Tag" button is now focused, allowing you to press <kbd>Enter</kbd> or <kbd>Space</kbd> to quickly reactivate the bar. Alternatively, you may edit your new tag by right-clicking the tag and selecting **"Edit"**.
 
-Create a new tag by accessing the "New Tag" option from the Edit menu or by pressing <kbd>Ctrl</kbd>+<kbd>N</kbd>. In the tag creation panel, enter a tag name, optional shorthand name, optional tag aliases, optional parent tags, and an optional color.
+Tags can be also viewed, created, edited, or deleted from the **Edit -> Manage Tags** window.
 
-- The tag **name** is the base name of the tag. **_This does NOT have to be unique!_**
-- The tag **shorthand** is a special type of alias that displays in situations where screen space is more valuable, notably with name disambiguation.
-- **Aliases** are alternate names for a tag. These let you search for terms other than the exact tag name in order to find the tag again.
-- **Parent Tags** are tags in which this tag can substitute for in searches. In other words, tags under this section are parents of this tag.
-    - Parent tags with the disambiguation check next to them will be used to help disambiguate tag names that may not be unique.
-    - For example: If you had a tag for "Freddy Fazbear", you might add "Five Nights at Freddy's" as one of the parent tags. If the disambiguation box is checked next to "Five Nights at Freddy's" parent tag, then the tag "Freddy Fazbear" will display as "Freddy Fazbear (Five Nights at Freddy's)". Furthermore, if the "Five Nights at Freddy's" tag has a shorthand like "FNAF", then the "Freddy Fazbear" tag will display as "Freddy Fazbear (FNAF)".
-- The **color** option lets you select an optional color palette to use for your tag.
-- The **"Is Category"** property lets you treat this tag as a category under which itself and any child tags inheriting from it will be sorted by inside the preview panel.
+<figure markdown="span">
+  ![Empty File Entry](assets/tag_field_bars/tag_bar_new.png){ width=80% }
+  <figcaption>A tag named "Cube" does not exist yet, and will be created and applied to the selection when <kbd>Enter</kbd> is pressed.</figcaption>
+  ![Empty File Entry](assets/tag_field_bars/tag_button_highlighted.png){ width=80% }
+  <figcaption>The new tag "Cube" has been created and applied to our selection.</figcaption>
+</figure>
 
-### Tag Manager
+<!-- prettier-ignore -->
+!!! tip "Optionally Always Edit New Tags"
+    If you prefer opening an "Edit" window for tags after creating them and before they get applied to your selection, you can toggle this option on by right-clicking the search bar and clicking **"Edit After Creating a New Tag"**, or by visiting the same setting in the **Settings** window. By default, this option is **off.**
 
-You can manage your library of tags by opening the "Tag Manager" panel from Edit -> "Manage Tags". From here you can create, search for, edit, and permanently delete any tags you've created in your library.
+### :material-tag-search: Tag Bar: Searching for Tags
 
-## Editing Tags
+Pressing <kbd>Enter</kbd> with **one or more results** will **apply the first tag** to your selection (assuming it's not already on your selection).
 
-To edit a tag, click on it inside the preview panel or right-click the tag and select "Edit Tag" from the context menu.
+Tags that are already present on your entries will be greyed out and ignored when pressing <kbd>Enter</kbd>. This lets you visually confirm that a tag already exists and has been applied to the selection.
+
+<figure markdown="span">
+  ![Empty File Entry](assets/tag_field_bars/tag_bar_search_match.png){ width=80% }
+  <figcaption>On a new selected entry, typing "Cube" will find our existing tag.</figcaption>
+  ![Empty File Entry](assets/tag_field_bars/tag_bar_search_match_greyed.png){ width=80% }
+  <figcaption>If the matched tag is already applied to the selected entries, it will be greyed out and ignored when pressing <kbd>Enter</kbd>.</figcaption>
+</figure>
+
+#### :material-tag-arrow-up: Force Create Tag
+
+Holding <kbd>Shift</kbd> while pressing <kbd>Enter</kbd> will **force create** a tag from the search bar text, regardless of the results. This is indicated by the first tag in the results becoming greyed out. This is especially useful when you need to create a new tag with a name that partially overlaps with an existing tag's name.
+
+<figure markdown="span">
+  ![Empty File Entry](assets/tag_field_bars/tag_bar_shift_off.png){ width=80% }
+  <figcaption>Pressing <kbd>Enter</kbd> will apply the underlined tag, "Cube".</figcaption>
+  ![Empty File Entry](assets/tag_field_bars/tag_bar_shift_on.png){ width=80% }
+  <figcaption>With <kbd>Shift</kbd> held, pressing <kbd>Enter</kbd> will <b>create a new tag</b> called "Cub".</figcaption>
+</figure>
+
+---
+
+## :material-text-box: Creating and Adding Fields
+
+[Fields](./fields.md) are extra pieces of information you can add to file entries, such as titles, comments, notes, specific dates or times. Unlike tags, fields are based on [templates](./fields.md#field-templates) that contain pre-filled information such as the field type and title, and that information is _copied_ to fields when adding them to entries. Editing field information on entries **does not** modify the template it was created from.
+
+Creating and adding fields to entries is extremely similar to [how it works for tags](#tagging), with a few notable differences:
+
+- Click "Add Field" or press <kbd>Ctrl</kbd>+<kbd>L</kbd> to open the field bar.
+- The same template can by applied to an entry any number of times.
+- New field templates are automatically edited after being created, since they have a type that must be chosen before they can be used.
+    - This is separate from the option to automatically edit a field's _contents_ once a field has been added to an entry
+- Editing a field's contents immediately after it's added to an entry is **enabled** by default, and can be toggled by right-clicking the search bar and clicking **"Edit After Adding a Field"**, or by visiting the same setting in the **Settings** window.
+
+<figure markdown="span">
+  ![Empty File Entry](assets/tag_field_bars/field_bar_search.png){ width=80% }
+  <figcaption>Searching for field templates inside the field bar.</figcaption>
+</figure>
+
+---
 
 ## Relinking Moved Files
 
@@ -71,9 +117,7 @@ Inevitably some of the files inside your library will be renamed, moved, or dele
 !!! warning
     If multiple matches for a moved file are found (matches are currently defined as files with a matching filename as the original), TagStudio will currently ignore the match groups. Adding a GUI for manual selection, as well as smarter automated relinking, are high priorities for future versions.
 
-### Saving the Library
-
-As of version 9.5, libraries are saved automatically as you go. To save a backup of your library, select File -> Save Library Backup from the menu bar.
+---
 
 ## Launch Arguments