feat: native smart tags (#782)

* feat: introduce native smart tags

* feat: introduce react navigation

* feat: render smart tag special cases

* feat: add create tag & all count

* feat: move components to react + mobx

* fix: workaround issue with snjs

* feat: nice smart tag icons in experimental

* feat: add back components

* fix: typo on all tags

* feat: add panel resizer + simplif code

* fix: panel resize size & refresh

* fix: auto select all notes

* style: remove legacy tag view

* style: remove legacy directives

* fix: select tag from note view

* feat: WIP smart tag rename

* fix: template checks

* fix: user can create new notes

* panel: init width

* fix: panel resizer ref

* fix: update with new component viewer

* fix: use fixed isTemplateItem & fixed findItems

* refactor: rename tags panel into navigation

* style: remove TODOs that are ok

* feat: smart tag premium check with premium service

* refactor: multi-select variables for debuggability

* fix: clean deinit code

* fix: prevent trigger tag changes event for the same uuid

* fix: typings

* fix: use minimal state

* style: remove dead code

* style: long variable names

* refactor: move magic string to module

* fix: use smart filter feature

* refactor: add task id in todo

app/assets/javascripts/views/application/application-view.pug

@@ -5,7 +5,7 @@
     ng-class='self.state.appClass',
     ng-if='!self.state.needsUnlock && self.state.launched'
     )
-    tags-view(application='self.application')
+    navigation(application='self.application', appState='self.appState')
     notes-view(
       application='self.application'
       app-state='self.appState'

app/assets/javascripts/views/application/application_view.ts

@@ -8,7 +8,7 @@ import {
   Challenge,
   removeFromArray,
 } from '@standardnotes/snjs';
-import { PANEL_NAME_NOTES, PANEL_NAME_TAGS } from '@/views/constants';
+import { PANEL_NAME_NOTES, PANEL_NAME_NAVIGATION } from '@/views/constants';
 import { STRING_DEFAULT_FILE_ERROR } from '@/strings';
 import { PureViewCtrl } from '@Views/abstract/pure_view_ctrl';
 import { alertDialog } from '@/services/alertService';
@@ -24,7 +24,7 @@ class ApplicationViewCtrl extends PureViewCtrl<
 > {
   public platformString: string;
   private notesCollapsed = false;
-  private tagsCollapsed = false;
+  private navigationCollapsed = false;
 
   /**
    * To prevent stale state reads (setState is async),
@@ -136,15 +136,15 @@ class ApplicationViewCtrl extends PureViewCtrl<
       if (panel === PANEL_NAME_NOTES) {
         this.notesCollapsed = collapsed;
       }
-      if (panel === PANEL_NAME_TAGS) {
-        this.tagsCollapsed = collapsed;
+      if (panel === PANEL_NAME_NAVIGATION) {
+        this.navigationCollapsed = collapsed;
       }
       let appClass = '';
       if (this.notesCollapsed) {
         appClass += 'collapsed-notes';
       }
-      if (this.tagsCollapsed) {
-        appClass += ' collapsed-tags';
+      if (this.navigationCollapsed) {
+        appClass += ' collapsed-navigation';
       }
       this.setState({ appClass });
     } else if (eventName === AppStateEvent.WindowDidFocus) {

app/assets/javascripts/views/constants.ts

@@ -1,4 +1,4 @@
 export const PANEL_NAME_NOTES = 'notes';
-export const PANEL_NAME_TAGS = 'tags';
+export const PANEL_NAME_NAVIGATION = 'navigation';
 export const EMAIL_REGEX =
   /^([a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?)$/;

app/assets/javascripts/views/index.ts

@@ -4,5 +4,4 @@ export { ApplicationView } from './application/application_view';
 export { NoteGroupViewDirective } from './note_group_view/note_group_view';
 export { NoteViewDirective } from './note_view/note_view';
 export { FooterView } from './footer/footer_view';
-export { TagsView } from './tags/tags_view';
 export { ChallengeModal } from './challenge_modal/challenge_modal';

app/assets/javascripts/views/tags/tags-view.pug

@@ -1,43 +0,0 @@
-#tags-column.sn-component.section.tags(aria-label='Tags')
-  .component-view-container(ng-if='self.state.componentViewer')
-    component-view.component-view(
-      component-viewer='self.state.componentViewer',
-      application='self.application'
-      app-state='self.appState'
-      )
-  #tags-content.content(ng-if='!(self.state.componentViewer)')
-    .tags-title-section.section-title-bar
-      .section-title-bar-header
-        .sk-h3.title
-          span.sk-bold Views
-        .sk-button.sk-secondary-contrast.wide(
-          ng-click='self.clickedAddNewTag()',
-          title='Create a new tag'
-          )
-          .sk-label
-            i.icon.ion-plus.add-button
-    .scrollable
-      .infinite-scroll
-        .tag(
-          ng-class="{'selected' : self.state.selectedTag == tag, 'faded' : !tag.isAllTag}",
-          ng-click='self.selectTag(tag)',
-          ng-repeat='tag in self.state.smartTags track by tag.uuid'
-          )
-          .tag-info
-            .title(ng-if="!tag.errorDecrypting") {{tag.title}}
-            .count(ng-show='tag.isAllTag') {{self.state.noteCounts[tag.uuid]}}
-          .danger.small-text.font-bold(ng-show='tag.conflictOf') Conflicted Copy
-          .danger.small-text.font-bold(ng-show='tag.errorDecrypting && !tag.waitingForKey') Missing Keys
-          .info.small-text.font-bold(ng-show='tag.errorDecrypting && tag.waitingForKey') Waiting For Keys
-        tags-section(
-          application='self.application',
-          app-state='self.appState'
-        )
-  panel-resizer(
-    collapsable='true',
-    control='self.panelPuppet',
-    default-width='150',
-    hoverable='true',
-    on-resize-finish='self.onPanelResize',
-    panel-id="'tags-column'"
-    )

app/assets/javascripts/views/tags/tags_view.ts

@@ -1,298 +0,0 @@
-import { PanelPuppet, WebDirective } from '@/types';
-import { WebApplication } from '@/ui_models/application';
-import { AppStateEvent } from '@/ui_models/app_state';
-import { PANEL_NAME_TAGS } from '@/views/constants';
-import {
-  ApplicationEvent,
-  ComponentAction,
-  ComponentArea,
-  ComponentViewer,
-  ContentType,
-  isPayloadSourceInternalChange,
-  MessageData,
-  PayloadSource,
-  PrefKey,
-  SNComponent,
-  SNSmartTag,
-  SNTag,
-  UuidString,
-} from '@standardnotes/snjs';
-import { PureViewCtrl } from '@Views/abstract/pure_view_ctrl';
-import template from './tags-view.pug';
-
-type NoteCounts = Partial<Record<string, number>>;
-
-type TagState = {
-  smartTags: SNSmartTag[];
-  noteCounts: NoteCounts;
-  selectedTag?: SNTag;
-  componentViewer?: ComponentViewer;
-};
-
-class TagsViewCtrl extends PureViewCtrl<unknown, TagState> {
-  /** Passed through template */
-  readonly application!: WebApplication;
-  private readonly panelPuppet: PanelPuppet;
-  private unregisterComponent?: () => void;
-  /** The original name of the edtingTag before it began editing */
-  formData: { tagTitle?: string } = {};
-  titles: Partial<Record<UuidString, string>> = {};
-  private removeTagsObserver!: () => void;
-  private removeFoldersObserver!: () => void;
-
-  /* @ngInject */
-  constructor($timeout: ng.ITimeoutService) {
-    super($timeout);
-    this.panelPuppet = {
-      onReady: () => this.loadPreferences(),
-    };
-  }
-
-  deinit() {
-    this.removeTagsObserver?.();
-    (this.removeTagsObserver as unknown) = undefined;
-    (this.removeFoldersObserver as unknown) = undefined;
-    this.unregisterComponent?.();
-    this.unregisterComponent = undefined;
-    super.deinit();
-  }
-
-  getInitialState(): TagState {
-    return {
-      smartTags: [],
-      noteCounts: {},
-    };
-  }
-
-  getState(): TagState {
-    return this.state;
-  }
-
-  async onAppLaunch() {
-    super.onAppLaunch();
-    this.loadPreferences();
-    this.streamForFoldersComponent();
-
-    const smartTags = this.application.getSmartTags();
-    this.setState({ smartTags });
-    this.selectTag(smartTags[0]);
-  }
-
-  /** @override */
-  onAppIncrementalSync() {
-    super.onAppIncrementalSync();
-    this.reloadNoteCounts();
-  }
-
-  async setFoldersComponent(component?: SNComponent) {
-    if (this.state.componentViewer) {
-      this.application.componentManager.destroyComponentViewer(
-        this.state.componentViewer
-      );
-      await this.setState({ componentViewer: undefined });
-    }
-    if (component) {
-      await this.setState({
-        componentViewer:
-          this.application.componentManager.createComponentViewer(
-            component,
-            undefined,
-            this.handleFoldersComponentMessage.bind(this)
-          ),
-      });
-    }
-  }
-
-  handleFoldersComponentMessage(
-    action: ComponentAction,
-    data: MessageData
-  ): void {
-    if (action === ComponentAction.SelectItem) {
-      const item = data.item;
-      if (!item) {
-        return;
-      }
-
-      if (item.content_type === ContentType.Tag) {
-        const matchingTag = this.application.findItem(item.uuid);
-
-        if (matchingTag) {
-          this.selectTag(matchingTag as SNTag);
-        }
-      } else if (item.content_type === ContentType.SmartTag) {
-        const matchingTag = this.getState().smartTags.find(
-          (t) => t.uuid === item.uuid
-        );
-
-        if (matchingTag) {
-          this.selectTag(matchingTag);
-        }
-      }
-    } else if (action === ComponentAction.ClearSelection) {
-      this.selectTag(this.getState().smartTags[0]);
-    }
-  }
-
-  streamForFoldersComponent() {
-    this.removeFoldersObserver = this.application.streamItems(
-      [ContentType.Component],
-      async (items, source) => {
-        if (
-          isPayloadSourceInternalChange(source) ||
-          source === PayloadSource.InitialObserverRegistrationPush
-        ) {
-          return;
-        }
-        const components = items as SNComponent[];
-        const hasFoldersChange = !!components.find(
-          (component) => component.area === ComponentArea.TagsList
-        );
-        if (hasFoldersChange) {
-          this.setFoldersComponent(
-            this.application.componentManager
-              .componentsForArea(ComponentArea.TagsList)
-              .find((component) => component.active)
-          );
-        }
-      }
-    );
-
-    this.removeTagsObserver = this.application.streamItems(
-      [ContentType.Tag, ContentType.SmartTag],
-      async (items) => {
-        const tags = items as Array<SNTag | SNSmartTag>;
-
-        await this.setState({
-          smartTags: this.application.getSmartTags(),
-        });
-
-        for (const tag of tags) {
-          this.titles[tag.uuid] = tag.title;
-        }
-
-        this.reloadNoteCounts();
-        const selectedTag = this.state.selectedTag;
-
-        if (selectedTag) {
-          /** If the selected tag has been deleted, revert to All view. */
-          const matchingTag = tags.find((tag) => {
-            return tag.uuid === selectedTag.uuid;
-          });
-
-          if (matchingTag) {
-            if (matchingTag.deleted) {
-              this.selectTag(this.getState().smartTags[0]);
-            } else {
-              this.setState({
-                selectedTag: matchingTag,
-              });
-            }
-          }
-        }
-      }
-    );
-  }
-
-  /** @override */
-  onAppStateEvent(eventName: AppStateEvent) {
-    if (eventName === AppStateEvent.TagChanged) {
-      this.setState({
-        selectedTag: this.application.getAppState().getSelectedTag(),
-      });
-    }
-  }
-
-  /** @override */
-  async onAppEvent(eventName: ApplicationEvent) {
-    super.onAppEvent(eventName);
-    switch (eventName) {
-      case ApplicationEvent.LocalDataIncrementalLoad:
-        this.reloadNoteCounts();
-        break;
-      case ApplicationEvent.PreferencesChanged:
-        this.loadPreferences();
-        break;
-    }
-  }
-
-  reloadNoteCounts() {
-    const smartTags = this.state.smartTags;
-    const noteCounts: NoteCounts = {};
-
-    for (const tag of smartTags) {
-      /** Other smart tags do not contain counts */
-      if (tag.isAllTag) {
-        const notes = this.application
-          .notesMatchingSmartTag(tag as SNSmartTag)
-          .filter((note) => {
-            return !note.archived && !note.trashed;
-          });
-        noteCounts[tag.uuid] = notes.length;
-      }
-    }
-
-    this.setState({
-      noteCounts: noteCounts,
-    });
-  }
-
-  loadPreferences() {
-    if (!this.panelPuppet.ready) {
-      return;
-    }
-
-    const width = this.application.getPreference(PrefKey.TagsPanelWidth);
-    if (width) {
-      this.panelPuppet.setWidth!(width);
-      if (this.panelPuppet.isCollapsed!()) {
-        this.application
-          .getAppState()
-          .panelDidResize(PANEL_NAME_TAGS, this.panelPuppet.isCollapsed!());
-      }
-    }
-  }
-
-  onPanelResize = (
-    newWidth: number,
-    _lastLeft: number,
-    _isAtMaxWidth: boolean,
-    isCollapsed: boolean
-  ) => {
-    this.application
-      .setPreference(PrefKey.TagsPanelWidth, newWidth)
-      .then(() => this.application.sync());
-    this.application.getAppState().panelDidResize(PANEL_NAME_TAGS, isCollapsed);
-  };
-
-  async selectTag(tag: SNTag) {
-    if (tag.conflictOf) {
-      this.application.changeAndSaveItem(tag.uuid, (mutator) => {
-        mutator.conflictOf = undefined;
-      });
-    }
-    this.application.getAppState().setSelectedTag(tag);
-  }
-
-  async clickedAddNewTag() {
-    if (this.appState.templateTag) {
-      return;
-    }
-
-    this.appState.createNewTag();
-  }
-}
-
-export class TagsView extends WebDirective {
-  constructor() {
-    super();
-    this.restrict = 'E';
-    this.scope = {
-      application: '=',
-    };
-    this.template = template;
-    this.replace = true;
-    this.controller = TagsViewCtrl;
-    this.controllerAs = 'self';
-    this.bindToController = true;
-  }
-}