feat: remove overflowed tags feature

app/assets/javascripts/components/AutocompleteTagInput.tsx

@@ -1,7 +1,7 @@
 import { WebApplication } from '@/ui_models/application';
 import { SNTag } from '@standardnotes/snjs';
 import { FunctionalComponent } from 'preact';
-import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { useEffect, useRef, useState } from 'preact/hooks';
 import { Icon } from './Icon';
 import { Disclosure, DisclosurePanel } from '@reach/disclosure';
 import { useCloseOnBlur } from './utils';
@@ -16,7 +16,7 @@ export const AutocompleteTagInput: FunctionalComponent<Props> = ({
   application,
   appState,
 }) => {
-  const { tagElements, tags, tagsContainerMaxWidth, tagsOverflowed } = appState.activeNote;
+  const { tagElements } = appState.activeNote;
 
   const [searchQuery, setSearchQuery] = useState('');
   const [dropdownVisible, setDropdownVisible] = useState(false);
@@ -82,19 +82,6 @@ export const AutocompleteTagInput: FunctionalComponent<Props> = ({
     await createAndAddNewTag();
   };
 
-  const reloadInputOverflowed = useCallback(() => {
-    const overflowed = !tagsOverflowed && appState.activeNote.isElementOverflowed(inputRef.current);
-    appState.activeNote.setInputOverflowed(overflowed);
-  }, [appState.activeNote, tagsOverflowed]);
-
-  useEffect(() => {
-    reloadInputOverflowed();
-  }, [
-    reloadInputOverflowed,
-    tagsContainerMaxWidth,
-    tags,
-  ]);
-
   useEffect(() => {
     setHintVisible(
       searchQuery !== '' && !tagResults.some((tag) => tag.title === searchQuery)
@@ -111,7 +98,6 @@ export const AutocompleteTagInput: FunctionalComponent<Props> = ({
           onChange={onSearchQueryChange}
           type="text"
           placeholder="Add tag"
-          tabIndex={tagsOverflowed ? -1 : 0}
           onBlur={closeOnBlur}
           onFocus={showDropdown}
           onKeyUp={(event) => {
@@ -139,7 +125,6 @@ export const AutocompleteTagInput: FunctionalComponent<Props> = ({
                     className="sn-dropdown-item"
                     onClick={() => onTagOptionClick(tag)}
                     onBlur={closeOnBlur}
-                    tabIndex={tagsOverflowed ? -1 : 0}
                   >
                     <Icon type="hashtag" className="color-neutral mr-2 min-h-5 min-w-5" />
                     <span className="whitespace-nowrap overflow-hidden overflow-ellipsis">
@@ -177,7 +162,6 @@ export const AutocompleteTagInput: FunctionalComponent<Props> = ({
                   className="sn-dropdown-item"
                   onClick={onTagHintClick}
                   onBlur={closeOnBlur}
-                  tabIndex={tagsOverflowed ? -1 : 0}
                 >
                   <span>Create new tag:</span>
                   <span className="bg-contrast rounded text-xs color-text py-1 pl-1 pr-2 flex items-center ml-2">

app/assets/javascripts/components/NoteTag.tsx

@@ -1,6 +1,6 @@
 import { Icon } from './Icon';
 import { FunctionalComponent } from 'preact';
-import { useCallback, useRef, useState } from 'preact/hooks';
+import { useRef, useState } from 'preact/hooks';
 import { AppState } from '@/ui_models/app_state';
 import { SNTag } from '@standardnotes/snjs/dist/@types';
 import { useEffect } from 'react';
@@ -13,12 +13,9 @@ type Props = {
 
 export const NoteTag: FunctionalComponent<Props> = ({ appState, tag }) => {
   const {
-    tags,
-    tagsContainerExpanded,
     tagsContainerMaxWidth,
   } = appState.activeNote;
 
-  const [overflowed, setOverflowed] = useState(false);
   const [contextMenuOpen, setContextMenuOpen] = useState(false);
   const [contextMenuPosition, setContextMenuPosition] = useState({ top: 0, left: 0 });
 
@@ -36,15 +33,6 @@ export const NoteTag: FunctionalComponent<Props> = ({ appState, tag }) => {
     appState.setSelectedTag(tag);
   };
 
-  const reloadOverflowed = useCallback(() => {
-    const overflowed = appState.activeNote.isTagOverflowed(tag);
-    setOverflowed(overflowed);
-  }, [appState.activeNote, tag]);
-
-  useEffect(() => {
-    reloadOverflowed();
-  }, [reloadOverflowed, tags, tagsContainerExpanded, tagsContainerMaxWidth]);
-
   const contextMenuListener = (event: MouseEvent) => {
     event.preventDefault();
     setContextMenuPosition({
@@ -78,7 +66,6 @@ export const NoteTag: FunctionalComponent<Props> = ({ appState, tag }) => {
             deleteTag();
           }
         }}
-        tabIndex={overflowed ? -1 : 0}
         onBlur={closeOnBlur}
       >
         <Icon type="hashtag" className="sn-icon--small color-neutral mr-1" />

app/assets/javascripts/components/NoteTagsContainer.tsx

@@ -1,10 +1,10 @@
 import { AppState } from '@/ui_models/app_state';
 import { observer } from 'mobx-react-lite';
-import { toDirective, useCloseOnClickOutside } from './utils';
+import { toDirective } from './utils';
 import { AutocompleteTagInput } from './AutocompleteTagInput';
 import { WebApplication } from '@/ui_models/application';
-import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { NoteTag } from './NoteTag';
+import { useEffect } from 'preact/hooks';
 
 type Props = {
   application: WebApplication;
@@ -13,72 +13,17 @@ type Props = {
 
 const NoteTagsContainer = observer(({ application, appState }: Props) => {
   const {
-    inputOverflowed,
-    overflowCountPosition,
-    overflowedTagsCount,
-    tagElements,
     tags,
     tagsContainerMaxWidth,
-    tagsContainerExpanded,
-    tagsOverflowed,
   } = appState.activeNote;
 
-  const [expandedContainerHeight, setExpandedContainerHeight] = useState(0);
-
-  const tagsContainerRef = useRef<HTMLDivElement>();
-  const overflowButtonRef = useRef<HTMLButtonElement>();
-
-  useCloseOnClickOutside(tagsContainerRef, (expanded: boolean) => {
-    if (tagsContainerExpanded) {
-      appState.activeNote.setTagsContainerExpanded(expanded);
-    }
-  });
-
-  const reloadExpandedContainerHeight = useCallback(() => {
-    setExpandedContainerHeight(tagsContainerRef.current.scrollHeight);
-  }, []);
-
   useEffect(() => {
-    appState.activeNote.reloadTagsContainerLayout();
-    reloadExpandedContainerHeight();
-  }, [
-    appState.activeNote,
-    reloadExpandedContainerHeight,
-    tags,
-    tagsContainerMaxWidth,
-  ]);
-
-  useEffect(() => {
-    let tagResizeObserver: ResizeObserver;
-    if (ResizeObserver) {
-      tagResizeObserver = new ResizeObserver(() => {
-        appState.activeNote.reloadTagsContainerLayout();
-        reloadExpandedContainerHeight();
-      });
-      tagElements.forEach(
-        (tagElement) => tagElement && tagResizeObserver.observe(tagElement)
-      );
-    }
-
-    return () => {
-      if (tagResizeObserver) {
-        tagResizeObserver.disconnect();
-      }
-    };
-  }, [appState.activeNote, reloadExpandedContainerHeight, tagElements]);
+    appState.activeNote.reloadTagsContainerMaxWidth();
+  }, [appState.activeNote]);
 
   return (
-    <div
-      className={`flex transition-height duration-150 relative ${
-        inputOverflowed ? 'h-18' : 'h-9'
-      }`}
-      style={tagsContainerExpanded ? { height: expandedContainerHeight } : {}}
-    >
       <div
-        ref={tagsContainerRef}
-        className={`absolute bg-default flex flex-wrap pl-1 -ml-1 ${
-          inputOverflowed ? 'h-18' : 'h-9'
-        } ${tagsContainerExpanded || !tagsOverflowed ? '' : 'overflow-hidden'}`}
+        className="bg-default flex flex-wrap pl-1 -ml-1"
         style={{
           maxWidth: tagsContainerMaxWidth,
         }}
@@ -92,18 +37,6 @@ const NoteTagsContainer = observer(({ application, appState }: Props) => {
         ))}
         <AutocompleteTagInput application={application} appState={appState} />
       </div>
-      {tagsOverflowed && (
-        <button
-          ref={overflowButtonRef}
-          type="button"
-          className="sn-tag ml-1 absolute"
-          onClick={() => appState.activeNote.setTagsContainerExpanded(true)}
-          style={{ left: overflowCountPosition }}
-        >
-          +{overflowedTagsCount}
-        </button>
-      )}
-    </div>
   );
 });