refactor: rename state

app/assets/javascripts/components/AutocompleteTagHint.tsx

@@ -10,10 +10,10 @@ type Props = {
 export const AutocompleteTagHint = observer(
   ({ appState, closeOnBlur }: Props) => {
     const { autocompleteSearchQuery, autocompleteTagResults } =
-      appState.activeNote;
+      appState.noteTags;
 
     const onTagHintClick = async () => {
-      await appState.activeNote.createAndAddNewTag();
+      await appState.noteTags.createAndAddNewTag();
     };
 
     return (

app/assets/javascripts/components/AutocompleteTagInput.tsx

@@ -17,7 +17,7 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
     autocompleteTagResults,
     tagElements,
     tags,
-  } = appState.activeNote;
+  } = appState.noteTags;
 
   const [dropdownVisible, setDropdownVisible] = useState(false);
   const [dropdownMaxHeight, setDropdownMaxHeight] =
@@ -28,7 +28,7 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
 
   const [closeOnBlur] = useCloseOnBlur(dropdownRef, (visible: boolean) => {
     setDropdownVisible(visible);
-    appState.activeNote.clearAutocompleteSearch();
+    appState.noteTags.clearAutocompleteSearch();
   });
 
   const showDropdown = () => {
@@ -40,18 +40,18 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
 
   const onSearchQueryChange = (event: Event) => {
     const query = (event.target as HTMLInputElement).value;
-    appState.activeNote.setAutocompleteSearchQuery(query);
-    appState.activeNote.searchActiveNoteAutocompleteTags();
+    appState.noteTags.setAutocompleteSearchQuery(query);
+    appState.noteTags.searchActiveNoteAutocompleteTags();
   };
 
   const onFormSubmit = async (event: Event) => {
     event.preventDefault();
-    await appState.activeNote.createAndAddNewTag();
+    await appState.noteTags.createAndAddNewTag();
   };
 
   useEffect(() => {
-    appState.activeNote.searchActiveNoteAutocompleteTags();
-  }, [appState.activeNote]);
+    appState.noteTags.searchActiveNoteAutocompleteTags();
+  }, [appState.noteTags]);
 
   return (
     <form

app/assets/javascripts/components/AutocompleteTagResult.tsx

@@ -11,18 +11,18 @@ type Props = {
 
 export const AutocompleteTagResult = observer(
   ({ appState, tagResult, closeOnBlur }: Props) => {
-    const { autocompleteSearchQuery } = appState.activeNote;
+    const { autocompleteSearchQuery } = appState.noteTags;
 
     const onTagOptionClick = async (tag: SNTag) => {
-      await appState.activeNote.addTagToActiveNote(tag);
-      appState.activeNote.clearAutocompleteSearch();
+      await appState.noteTags.addTagToActiveNote(tag);
+      appState.noteTags.clearAutocompleteSearch();
     };
 
     return (
       <button
         ref={(element) => {
           if (element) {
-            appState.activeNote.setAutocompleteTagResultElement(
+            appState.noteTags.setAutocompleteTagResultElement(
               tagResult,
               element
             );

app/assets/javascripts/components/NoteTag.tsx

@@ -10,13 +10,13 @@ type Props = {
 };
 
 export const NoteTag = observer(({ appState, tag }: Props) => {
-  const { tagsContainerMaxWidth } = appState.activeNote;
+  const { tagsContainerMaxWidth } = appState.noteTags;
 
   const [showDeleteButton, setShowDeleteButton] = useState(false);
   const deleteTagRef = useRef<HTMLButtonElement>();
 
   const deleteTag = () => {
-    appState.activeNote.removeTagFromActiveNote(tag);
+    appState.noteTags.removeTagFromActiveNote(tag);
   };
 
   const onTagClick = () => {
@@ -43,11 +43,11 @@ export const NoteTag = observer(({ appState, tag }: Props) => {
         deleteTag();
         break;
       case 'ArrowLeft':
-        previousTagElement = appState.activeNote.getPreviousTagElement(tag);
+        previousTagElement = appState.noteTags.getPreviousTagElement(tag);
         previousTagElement?.focus();
         break;
       case 'ArrowRight':
-        nextTagElement = appState.activeNote.getNextTagElement(tag);
+        nextTagElement = appState.noteTags.getNextTagElement(tag);
         nextTagElement?.focus();
         break;
       default:
@@ -59,7 +59,7 @@ export const NoteTag = observer(({ appState, tag }: Props) => {
     <button
       ref={(element) => {
         if (element) {
-          appState.activeNote.setTagElement(tag, element);
+          appState.noteTags.setTagElement(tag, element);
         }
       }}
       className="sn-tag pl-1 pr-2 mr-2"

app/assets/javascripts/components/NoteTagsContainer.tsx

@@ -13,11 +13,11 @@ const NoteTagsContainer = observer(({ appState }: Props) => {
   const {
     tags,
     tagsContainerMaxWidth,
-  } = appState.activeNote;
+  } = appState.noteTags;
 
   useEffect(() => {
-    appState.activeNote.reloadTagsContainerMaxWidth();
-  }, [appState.activeNote]);
+    appState.noteTags.reloadTagsContainerMaxWidth();
+  }, [appState.noteTags]);
 
   return (
       <div