feat: option to toggle adding note to all parent folders (#937)

app/assets/javascripts/components/AutocompleteTagInput.tsx

@@ -22,22 +22,25 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
   } = appState.noteTags;
 
   const [dropdownVisible, setDropdownVisible] = useState(false);
-  const [dropdownMaxHeight, setDropdownMaxHeight] =
-    useState<number | 'auto'>('auto');
+  const [dropdownMaxHeight, setDropdownMaxHeight] = useState<number | 'auto'>(
+    'auto'
+  );
 
   const containerRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
 
-  const [closeOnBlur] = useCloseOnBlur(containerRef as any, (visible: boolean) => {
+  const [closeOnBlur] = useCloseOnBlur(containerRef, (visible: boolean) => {
     setDropdownVisible(visible);
     appState.noteTags.clearAutocompleteSearch();
   });
 
   const showDropdown = () => {
     const { clientHeight } = document.documentElement;
-    const inputRect = inputRef.current!.getBoundingClientRect();
-    setDropdownMaxHeight(clientHeight - inputRect.bottom - 32 * 2);
-    setDropdownVisible(true);
+    const inputRect = inputRef.current?.getBoundingClientRect();
+    if (inputRect) {
+      setDropdownMaxHeight(clientHeight - inputRect.bottom - 32 * 2);
+      setDropdownVisible(true);
+    }
   };
 
   const onSearchQueryChange = (event: Event) => {
@@ -93,7 +96,7 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
 
   useEffect(() => {
     if (autocompleteInputFocused) {
-      inputRef.current!.focus();
+      inputRef.current?.focus();
     }
   }, [appState.noteTags, autocompleteInputFocused]);
 

app/assets/javascripts/components/Preferences/panes/general-segments/Defaults.tsx

@@ -67,6 +67,10 @@ export const Defaults: FunctionComponent<Props> = ({ application }) => {
     application.getPreference(PrefKey.EditorSpellcheck, true)
   );
 
+  const [addNoteToParentFolders, setAddNoteToParentFolders] = useState(() =>
+    application.getPreference(PrefKey.NoteAddToParentFolders, true)
+  );
+
   const toggleSpellcheck = () => {
     setSpellcheck(!spellcheck);
     application.getAppState().toggleGlobalSpellcheck();
@@ -148,6 +152,28 @@ export const Defaults: FunctionComponent<Props> = ({ application }) => {
           </div>
           <Switch onChange={toggleSpellcheck} checked={spellcheck} />
         </div>
+        <HorizontalSeparator classes="mt-5 mb-3" />
+        <div className="flex items-center justify-between">
+          <div className="flex flex-col">
+            <Subtitle>
+              Add all parent tags when adding a nested tag to a note
+            </Subtitle>
+            <Text>
+              When enabled, adding a nested tag to a note will automatically add
+              all associated parent tags.
+            </Text>
+          </div>
+          <Switch
+            onChange={() => {
+              application.setPreference(
+                PrefKey.NoteAddToParentFolders,
+                !addNoteToParentFolders
+              );
+              setAddNoteToParentFolders(!addNoteToParentFolders);
+            }}
+            checked={addNoteToParentFolders}
+          />
+        </div>
       </PreferencesSegment>
     </PreferencesGroup>
   );

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

@@ -1,5 +1,12 @@
 import { ElementIds } from '@/element_ids';
-import { ContentType, SNNote, SNTag, UuidString } from '@standardnotes/snjs';
+import { ApplicationEvent } from '@standardnotes/snjs';
+import {
+  ContentType,
+  PrefKey,
+  SNNote,
+  SNTag,
+  UuidString,
+} from '@standardnotes/snjs';
 import { action, computed, makeObservable, observable } from 'mobx';
 import { WebApplication } from '../application';
 import { AppState } from './app_state';
@@ -13,6 +20,7 @@ export class NoteTagsState {
   focusedTagUuid: UuidString | undefined = undefined;
   tags: SNTag[] = [];
   tagsContainerMaxWidth: number | 'auto' = 0;
+  addNoteToParentFolders: boolean;
 
   constructor(
     private application: WebApplication,
@@ -41,10 +49,24 @@ export class NoteTagsState {
       setTagsContainerMaxWidth: action,
     });
 
+    this.addNoteToParentFolders = application.getPreference(
+      PrefKey.NoteAddToParentFolders,
+      true
+    );
+
     appEventListeners.push(
       application.streamItems(ContentType.Tag, () => {
         this.reloadTags();
-      })
+      }),
+      application.addSingleEventObserver(
+        ApplicationEvent.PreferencesChanged,
+        async () => {
+          this.addNoteToParentFolders = application.getPreference(
+            PrefKey.NoteAddToParentFolders,
+            true
+          );
+        }
+      )
     );
   }
 
@@ -180,7 +202,11 @@ export class NoteTagsState {
     const { activeNote } = this;
 
     if (activeNote) {
-      await this.application.addTagHierarchyToNote(activeNote, tag);
+      await this.application.items.addTagToNote(
+        activeNote,
+        tag,
+        this.addNoteToParentFolders
+      );
       this.application.sync.sync();
       this.reloadTags();
     }