fix: hide add tag options if no tags available

app/assets/javascripts/components/NotesOptions.tsx

@@ -68,66 +68,68 @@ export const NotesOptions = observer(
           </span>
         </Switch>
         <div className="h-1px my-2 bg-secondary-contrast"></div>
-        <Disclosure
+        {appState.tags.tagsCount > 0 && (
-          open={tagsMenuOpen}
+          <Disclosure
-          onChange={() => {
+            open={tagsMenuOpen}
-            const buttonRect = tagsButtonRef.current.getBoundingClientRect();
+            onChange={() => {
-            const { offsetTop, offsetWidth } = tagsButtonRef.current;
+              const buttonRect = tagsButtonRef.current.getBoundingClientRect();
-            setTagsMenuPosition({
+              const { offsetTop, offsetWidth } = tagsButtonRef.current;
-              top: offsetTop,
+              setTagsMenuPosition({
-              right:
+                top: offsetTop,
-                buttonRect.right + 265 > document.body.clientWidth
+                right:
-                  ? offsetWidth
+                  buttonRect.right + 265 > document.body.clientWidth
-                  : -offsetWidth,
+                    ? offsetWidth
-            });
+                    : -offsetWidth,
-            setTagsMenuOpen(!tagsMenuOpen);
+              });
-          }}
+              setTagsMenuOpen(!tagsMenuOpen);
-        >
-          <DisclosureButton
-            onKeyUp={(event) => {
-              if (event.key === 'Escape') {
-                setTagsMenuOpen(false);
-              }
             }}
-            onBlur={closeOnBlur}
-            ref={tagsButtonRef}
-            className={`${buttonClass} justify-between`}
           >
-            <div className="flex items-center">
+            <DisclosureButton
-              <Icon type={IconType.Hashtag} className={iconClass} />
+              onKeyUp={(event) => {
-              {'Add tag'}
+                if (event.key === 'Escape') {
-            </div>
+                  setTagsMenuOpen(false);
-            <Icon
+                }
-              type={IconType.ChevronRight}
+              }}
-              className="fill-current color-neutral"
+              onBlur={closeOnBlur}
-            />
+              ref={tagsButtonRef}
-          </DisclosureButton>
+              className={`${buttonClass} justify-between`}
-          <DisclosurePanel
+            >
-            onKeyUp={(event) => {
+              <div className="flex items-center">
-              if (event.key === 'Escape') {
+                <Icon type={IconType.Hashtag} className={iconClass} />
-                setTagsMenuOpen(false);
+                {'Add tag'}
-                tagsButtonRef.current.focus();
+              </div>
-              }
+              <Icon
-            }}
+                type={IconType.ChevronRight}
-            style={{
+                className="fill-current color-neutral"
-              ...tagsMenuPosition,
+              />
-            }}
+            </DisclosureButton>
-            className="sn-dropdown sn-dropdown-anchor-right flex flex-col py-2 max-w-265px max-h-80 overflow-y-scroll"
+            <DisclosurePanel
-          >
+              onKeyUp={(event) => {
-            {appState.tags.tags.map((tag) => (
+                if (event.key === 'Escape') {
-              <button
+                  setTagsMenuOpen(false);
-                key={tag.title}
+                  tagsButtonRef.current.focus();
-                className={buttonClass}
+                }
-                onBlur={closeOnBlur}
+              }}
-                onClick={() => {
+              style={{
-                  appState.tags.addTagToSelectedNotes(tag);
+                ...tagsMenuPosition,
-                }}
+              }}
-              >
+              className="sn-dropdown sn-dropdown-anchor-right flex flex-col py-2 max-w-265px max-h-80 overflow-y-scroll"
-                {tag.title}
+            >
-              </button>
+              {appState.tags.tags.map((tag) => (
-            ))}
+                <button
-          </DisclosurePanel>
+                  key={tag.title}
-        </Disclosure>
+                  className={buttonClass}
+                  onBlur={closeOnBlur}
+                  onClick={() => {
+                    appState.tags.addTagToSelectedNotes(tag);
+                  }}
+                >
+                  {tag.title}
+                </button>
+              ))}
+            </DisclosurePanel>
+          </Disclosure>
+        )}
         <button
           onBlur={closeOnBlur}
           className={buttonClass}

app/assets/javascripts/ui_models/app_state/tags_state.ts

@@ -1,5 +1,5 @@
 import { ContentType, SNSmartTag, SNTag } from '@standardnotes/snjs';
-import { action, makeObservable, observable } from 'mobx';
+import { action, computed, makeObservable, observable } from 'mobx';
 import { WebApplication } from '../application';
 
 export class TagsState {
@@ -13,6 +13,9 @@ export class TagsState {
     makeObservable(this, {
       tags: observable,
       smartTags: observable,
+
+      tagsCount: computed,
+
       addTagToSelectedNotes: action,
     });
 
@@ -43,4 +46,8 @@ export class TagsState {
     );
     this.application.sync();
   }
+
+  get tagsCount(): number {
+    return this.tags.length;
+  }
 }