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.noteTags.setAutocompleteSearchQuery(query);
-    appState.activeNote.searchActiveNoteAutocompleteTags();
+    appState.noteTags.searchActiveNoteAutocompleteTags();
   };
 
   const onFormSubmit = async (event: Event) => {
     event.preventDefault();
-    await appState.activeNote.createAndAddNewTag();
+    await appState.noteTags.createAndAddNewTag();
   };
 
   useEffect(() => {
-    appState.activeNote.searchActiveNoteAutocompleteTags();
+    appState.noteTags.searchActiveNoteAutocompleteTags();
-  }, [appState.activeNote]);
+  }, [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);
+      await appState.noteTags.addTagToActiveNote(tag);
-      appState.activeNote.clearAutocompleteSearch();
+      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.noteTags.reloadTagsContainerMaxWidth();
-  }, [appState.activeNote]);
+  }, [appState.noteTags]);
 
   return (
       <div

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

@@ -16,7 +16,7 @@ import { Bridge } from '@/services/bridge';
 import { storage, StorageKey } from '@/services/localStorage';
 import { AccountMenuState } from './account_menu_state';
 import { ActionsMenuState } from './actions_menu_state';
-import { ActiveNoteState } from './active_note_state';
+import { NoteTagsState } from './note_tags_state';
 import { NoAccountWarningState } from './no_account_warning_state';
 import { SyncState } from './sync_state';
 import { SearchOptionsState } from './search_options_state';
@@ -63,8 +63,8 @@ export class AppState {
   showBetaWarning: boolean;
   readonly accountMenu = new AccountMenuState();
   readonly actionsMenu = new ActionsMenuState();
-  readonly activeNote: ActiveNoteState;
   readonly noAccountWarning: NoAccountWarningState;
+  readonly noteTags: NoteTagsState;
   readonly sync = new SyncState();
   readonly searchOptions: SearchOptionsState;
   readonly notes: NotesState;
@@ -83,11 +83,6 @@ export class AppState {
     this.$timeout = $timeout;
     this.$rootScope = $rootScope;
     this.application = application;
-    this.activeNote = new ActiveNoteState(
-      application,
-      this,
-      this.appEventObserverRemovers
-    );
     this.notes = new NotesState(
       application,
       this,
@@ -96,6 +91,11 @@ export class AppState {
       },
       this.appEventObserverRemovers,
     );
+    this.noteTags = new NoteTagsState(
+      application,
+      this,
+      this.appEventObserverRemovers
+    );
     this.tags = new TagsState(
       application,
       this.appEventObserverRemovers,

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

@@ -3,7 +3,7 @@ import { action, computed, makeObservable, observable } from 'mobx';
 import { WebApplication } from '../application';
 import { AppState } from './app_state';
 
-export class ActiveNoteState {
+export class NoteTagsState {
   autocompleteSearchQuery = '';
   autocompleteTagResultElements: (HTMLButtonElement | undefined)[] = [];
   autocompleteTagResults: SNTag[] = [];

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

@@ -171,7 +171,7 @@ export class NotesState {
       this.activeEditor.setNote(note);
     }
     
-    this.appState.activeNote.reloadTags();
+    this.appState.noteTags.reloadTags();
     await this.onActiveEditorChanged();
 
     if (note.waitingForKey) {

app/assets/javascripts/views/notes/notes_view.ts

@@ -410,7 +410,7 @@ class NotesViewCtrl extends PureViewCtrl<unknown, NotesCtrlState> {
     await this.appState.createEditor(title);
     await this.flushUI();
     await this.reloadNotes();
-    await this.appState.activeNote.reloadTags();
+    await this.appState.noteTags.reloadTags();
   }
 
   async handleTagChange(tag: SNTag) {
@@ -649,7 +649,7 @@ class NotesViewCtrl extends PureViewCtrl<unknown, NotesCtrlState> {
     __: boolean,
     isCollapsed: boolean
   ) {
-    this.appState.activeNote.reloadTagsContainerMaxWidth();
+    this.appState.noteTags.reloadTagsContainerMaxWidth();
     this.application.setPreference(
       PrefKey.NotesPanelWidth,
       newWidth
@@ -661,7 +661,7 @@ class NotesViewCtrl extends PureViewCtrl<unknown, NotesCtrlState> {
   }
 
   onPanelWidthEvent(): void {
-    this.appState.activeNote.reloadTagsContainerMaxWidth();
+    this.appState.noteTags.reloadTagsContainerMaxWidth();
   }
 
   paginate() {