Show any custom tags on words that have anki cards created (#1628)

* Proof-of-concept for showing card tags (#1626)

* Resolved most PR comments:
- Added a snackbar notification when clicking tag button
- Replaced magnifying glass icon with new tag icon
- Button now contains a span w/icon, to use text color
- Removed unnecessary attributes from button
- Backend now returns full noteInfos object
- Frontend now handles filtering tags

* Add options to show/hide tag button & filter tags

* Do not show tags button if, after filtering, we have zero tags.

* Change tags option to enums, optimize tags intersection check & fix code style.

* Update options-util.js to include new tag options.

* Fix wording on new tag setting.

* Add CSS to remove hidden buttons from the display layout.

* getAnkiNoteInfo extra parameter for additional info.

* Add new tag option to tests.

* Remove unnecessary changes related to anki tags option.

* Code style fixes.

1 files changed, 10 insertions, 1 deletions

diff --git a/ext/css/display.css b/ext/css/display.css
index c7827710..6fffc5ab 100644
--- a/ext/css/display.css
+++ b/ext/css/display.css
@@ -644,6 +644,9 @@ button.action-button[hidden] {
         -webkit-filter var(--animation-duration) linear,
         background-color var(--animation-duration) linear;
 }
+button.collapsible-action-button[hidden] {
+    display: none;
+}
 button.action-button:disabled {
     pointer-events: none;
     cursor: default;
@@ -667,7 +670,7 @@ button.action-button:active {
     background-color: var(--action-button-active-color);
     box-shadow: none;
 }
-button.action-button::before {
+button.action-button[data-icon]::before {
     content: '';
     width: var(--action-button-size);
     height: var(--action-button-size);
@@ -691,6 +694,12 @@ button.action-button[data-icon=play-audio]::before {
 button.action-button[data-icon=source-term]::before {
     background-image: url('/images/source-term.svg');
 }
+.action-view-tags>.icon {
+    display: block;
+    width: var(--action-button-size);
+    height: var(--action-button-size);
+    background-color: var(--text-color);
+}
 :root[data-result-output-mode=merge] .entry[data-type=term] .actions>button.action-button.action-play-audio {
     display: none;
 }