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>
   );