refactor: smart tags to views (#902)

* refactor: smart tags to views * chore: upgrade snjs
2022-02-27 13:18:21 -06:00
parent 4db8ca8bdd
commit 16fc3eb521
12 changed files with 237 additions and 170 deletions
--- a/app/assets/javascripts/components/Navigation.tsx
+++ b/app/assets/javascripts/components/Navigation.tsx
@@ -1,4 +1,4 @@
-import { SmartTagsSection } from '@/components/Tags/SmartTagsSection';
+import { SmartViewsSection } from '@/components/Tags/SmartViewsSection';
 import { TagsSection } from '@/components/Tags/TagsSection';
 import { WebApplication } from '@/ui_models/application';
 import { PANEL_NAME_NAVIGATION } from '@/constants';
@@ -65,7 +65,7 @@ export const Navigation: FunctionComponent<Props> = observer(
            </div>
          </div>
          <div className="scrollable">
-            <SmartTagsSection appState={appState} />
+            <SmartViewsSection appState={appState} />
            <TagsSection appState={appState} />
          </div>
        </div>
--- a/app/assets/javascripts/components/NotesList.tsx
+++ b/app/assets/javascripts/components/NotesList.tsx
@@ -2,7 +2,7 @@ import { WebApplication } from '@/ui_models/application';
 import { KeyboardKey } from '@/services/ioService';
 import { AppState } from '@/ui_models/app_state';
 import { DisplayOptions } from '@/ui_models/app_state/notes_view_state';
-import { SNNote } from '@standardnotes/snjs';
+import { SNNote, SNTag } from '@standardnotes/snjs';
 import { observer } from 'mobx-react-lite';
 import { FunctionComponent } from 'preact';
 import { NotesListItem } from './NotesListItem';
@@ -42,7 +42,7 @@ export const NotesList: FunctionComponent<Props> = observer(
        return [];
      }
      const tags = appState.getNoteTags(note);
-      if (!selectedTag.isSmartTag && tags.length === 1) {
+      if (selectedTag instanceof SNTag && tags.length === 1) {
        return [];
      }
      return tags.map((tag) => tag.title).sort();
--- a/app/assets/javascripts/components/Tags/SmartViewsList.tsx
+++ b/app/assets/javascripts/components/Tags/SmartViewsList.tsx
@@ -1,23 +1,23 @@
 import { AppState } from '@/ui_models/app_state';
 import { observer } from 'mobx-react-lite';
 import { FunctionComponent } from 'preact';
-import { SmartTagsListItem } from './SmartTagsListItem';
+import { SmartViewsListItem } from './SmartViewsListItem';

 type Props = {
  appState: AppState;
 };

-export const SmartTagsList: FunctionComponent<Props> = observer(
+export const SmartViewsList: FunctionComponent<Props> = observer(
  ({ appState }) => {
-    const allTags = appState.tags.smartTags;
+    const allViews = appState.tags.smartViews;

    return (
      <>
-        {allTags.map((tag) => {
+        {allViews.map((view) => {
          return (
-            <SmartTagsListItem
-              key={tag.uuid}
-              tag={tag}
+            <SmartViewsListItem
+              key={view.uuid}
+              view={view}
              tagsState={appState.tags}
              features={appState.features}
            />
--- a/app/assets/javascripts/components/Tags/SmartViewsListItem.tsx
+++ b/app/assets/javascripts/components/Tags/SmartViewsListItem.tsx
@@ -2,13 +2,18 @@ import { Icon } from '@/components/Icon';
 import { FeaturesState } from '@/ui_models/app_state/features_state';
 import { TagsState } from '@/ui_models/app_state/tags_state';
 import '@reach/tooltip/styles.css';
-import { SNSmartTag, IconType } from '@standardnotes/snjs';
+import {
+  SmartView,
+  SystemViewId,
+  IconType,
+  isSystemView,
+} from '@standardnotes/snjs';
 import { observer } from 'mobx-react-lite';
 import { FunctionComponent } from 'preact';
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';

 type Props = {
-  tag: SNSmartTag;
+  view: SmartView;
  tagsState: TagsState;
  features: FeaturesState;
 };
@@ -16,40 +21,40 @@ type Props = {
 const PADDING_BASE_PX = 14;
 const PADDING_PER_LEVEL_PX = 21;

-const smartTagIconType = (tag: SNSmartTag): IconType => {
-  if (tag.isAllTag) {
+const smartViewIconType = (view: SmartView): IconType => {
+  if (view.uuid === SystemViewId.AllNotes) {
    return 'notes';
  }
-  if (tag.isArchiveTag) {
+  if (view.uuid === SystemViewId.ArchivedNotes) {
    return 'archive';
  }
-  if (tag.isTrashTag) {
+  if (view.uuid === SystemViewId.TrashedNotes) {
    return 'trash';
  }
  return 'hashtag';
 };

-export const SmartTagsListItem: FunctionComponent<Props> = observer(
-  ({ tag, tagsState, features }) => {
-    const [title, setTitle] = useState(tag.title || '');
+export const SmartViewsListItem: FunctionComponent<Props> = observer(
+  ({ view, tagsState }) => {
+    const [title, setTitle] = useState(view.title || '');
    const inputRef = useRef<HTMLInputElement>(null);

    const level = 0;
-    const isSelected = tagsState.selected === tag;
-    const isEditing = tagsState.editingTag === tag;
+    const isSelected = tagsState.selected === view;
+    const isEditing = tagsState.editingTag === view;

    useEffect(() => {
-      setTitle(tag.title || '');
-    }, [setTitle, tag]);
+      setTitle(view.title || '');
+    }, [setTitle, view]);

    const selectCurrentTag = useCallback(() => {
-      tagsState.selected = tag;
-    }, [tagsState, tag]);
+      tagsState.selected = view;
+    }, [tagsState, view]);

    const onBlur = useCallback(() => {
-      tagsState.save(tag, title);
-      setTitle(tag.title);
-    }, [tagsState, tag, title, setTitle]);
+      tagsState.save(view, title);
+      setTitle(view.title);
+    }, [tagsState, view, title, setTitle]);

    const onInput = useCallback(
      (e: Event) => {
@@ -76,19 +81,19 @@ export const SmartTagsListItem: FunctionComponent<Props> = observer(
    }, [inputRef, isEditing]);

    const onClickRename = useCallback(() => {
-      tagsState.editingTag = tag;
-    }, [tagsState, tag]);
+      tagsState.editingTag = view;
+    }, [tagsState, view]);

    const onClickSave = useCallback(() => {
      inputRef.current?.blur();
    }, [inputRef]);

    const onClickDelete = useCallback(() => {
-      tagsState.remove(tag, true);
-    }, [tagsState, tag]);
+      tagsState.remove(view, true);
+    }, [tagsState, view]);

-    const isFaded = !tag.isAllTag;
-    const iconType = smartTagIconType(tag);
+    const isFaded = false;
+    const iconType = smartViewIconType(view);

    return (
      <>
@@ -101,7 +106,7 @@ export const SmartTagsListItem: FunctionComponent<Props> = observer(
            paddingLeft: `${level * PADDING_PER_LEVEL_PX + PADDING_BASE_PX}px`,
          }}
        >
-          {!tag.errorDecrypting ? (
+          {!view.errorDecrypting ? (
            <div className="tag-info">
              <div className={`tag-icon mr-1`}>
                <Icon
@@ -112,7 +117,7 @@ export const SmartTagsListItem: FunctionComponent<Props> = observer(
              <input
                className={`title ${isEditing ? 'editing' : ''}`}
                disabled={!isEditing}
-                id={`react-tag-${tag.uuid}`}
+                id={`react-tag-${view.uuid}`}
                onBlur={onBlur}
                onInput={onInput}
                value={title}
@@ -121,21 +126,21 @@ export const SmartTagsListItem: FunctionComponent<Props> = observer(
                ref={inputRef}
              />
              <div className="count">
-                {tag.isAllTag && tagsState.allNotesCount}
+                {view.uuid === SystemViewId.AllNotes && tagsState.allNotesCount}
              </div>
            </div>
          ) : null}
-          {!tag.isSystemSmartTag && (
+          {!isSystemView(view) && (
            <div className="meta">
-              {tag.conflictOf && (
+              {view.conflictOf && (
                <div className="danger small-text font-bold">
-                  Conflicted Copy {tag.conflictOf}
+                  Conflicted Copy {view.conflictOf}
                </div>
              )}
-              {tag.errorDecrypting && !tag.waitingForKey && (
+              {view.errorDecrypting && !view.waitingForKey && (
                <div className="danger small-text font-bold">Missing Keys</div>
              )}
-              {tag.errorDecrypting && tag.waitingForKey && (
+              {view.errorDecrypting && view.waitingForKey && (
                <div className="info small-text font-bold">
                  Waiting For Keys
                </div>
--- a/app/assets/javascripts/components/Tags/SmartViewsSection.tsx
+++ b/app/assets/javascripts/components/Tags/SmartViewsSection.tsx
@@ -1,17 +1,17 @@
 import { AppState } from '@/ui_models/app_state';
 import { observer } from 'mobx-react-lite';
 import { FunctionComponent } from 'preact';
-import { SmartTagsList } from './SmartTagsList';
+import { SmartViewsList } from './SmartViewsList';

 type Props = {
  appState: AppState;
 };

-export const SmartTagsSection: FunctionComponent<Props> = observer(
+export const SmartViewsSection: FunctionComponent<Props> = observer(
  ({ appState }) => {
    return (
      <section>
-        <SmartTagsList appState={appState} />
+        <SmartViewsList appState={appState} />
      </section>
    );
  }
--- a/app/assets/javascripts/components/Tags/TagContextMenu.tsx
+++ b/app/assets/javascripts/components/Tags/TagContextMenu.tsx
@@ -7,6 +7,7 @@ import { Menu } from '../menu/Menu';
 import { MenuItem, MenuItemType } from '../menu/MenuItem';
 import { usePremiumModal } from '../Premium';
 import { useCloseOnBlur } from '../utils';
+import { SNTag } from '@standardnotes/snjs';

 type Props = {
  appState: AppState;
@@ -17,7 +18,7 @@ export const TagsContextMenu: FunctionComponent<Props> = observer(
    const premiumModal = usePremiumModal();
    const selectedTag = appState.tags.selected;

-    if (!selectedTag) {
+    if (!selectedTag || !(selectedTag instanceof SNTag)) {
      return null;
    }

--- a/app/assets/javascripts/ui_models/app_state/app_state.ts
+++ b/app/assets/javascripts/ui_models/app_state/app_state.ts
@@ -11,8 +11,9 @@ import {
  PayloadSource,
  PrefKey,
  SNNote,
-  SNSmartTag,
+  SmartView,
  SNTag,
+  SystemViewId,
 } from '@standardnotes/snjs';
 import pull from 'lodash/pull';
 import {
@@ -241,7 +242,9 @@ export class AppState {
    const selectedTag = this.selectedTag;

    const activeRegularTagUuid =
-      selectedTag && !selectedTag.isSmartTag ? selectedTag.uuid : undefined;
+      selectedTag && selectedTag instanceof SNTag
+        ? selectedTag.uuid
+        : undefined;

    await this.application.noteControllerGroup.createNoteView(
      undefined,
@@ -313,11 +316,11 @@ export class AppState {
    );
  }

-  public get selectedTag(): SNTag | SNSmartTag | undefined {
+  public get selectedTag(): SNTag | SmartView | undefined {
    return this.tags.selected;
  }

-  public set selectedTag(tag: SNTag | SNSmartTag | undefined) {
+  public set selectedTag(tag: SNTag | SmartView | undefined) {
    this.tags.selected = tag;
  }

@@ -341,13 +344,19 @@ export class AppState {
              this.closeNoteController(noteController);
            } else if (
              note.trashed &&
-              !selectedTag?.isTrashTag &&
+              !(
+                selectedTag instanceof SmartView &&
+                selectedTag.uuid === SystemViewId.TrashedNotes
+              ) &&
              !this.searchOptions.includeTrashed
            ) {
              this.closeNoteController(noteController);
            } else if (
              note.archived &&
-              !selectedTag?.isArchiveTag &&
+              !(
+                selectedTag instanceof SmartView &&
+                selectedTag.uuid === SystemViewId.ArchivedNotes
+              ) &&
              !this.searchOptions.includeArchived &&
              !this.application.getPreference(PrefKey.NotesShowArchived, false)
            ) {
--- a/app/assets/javascripts/ui_models/app_state/features_state.ts
+++ b/app/assets/javascripts/ui_models/app_state/features_state.ts
@@ -28,19 +28,19 @@ export class FeaturesState {
    window?.enabledUnfinishedFeatures;

  _hasFolders = false;
-  _hasSmartTags = false;
+  _hasSmartViews = false;
  _premiumAlertFeatureName: string | undefined;

  private unsub: () => void;

  constructor(private application: WebApplication) {
    this._hasFolders = this.hasNativeFolders();
-    this._hasSmartTags = this.hasNativeSmartTags();
+    this._hasSmartViews = this.hasNativeSmartViews();
    this._premiumAlertFeatureName = undefined;

    makeObservable(this, {
      _hasFolders: observable,
-      _hasSmartTags: observable,
+      _hasSmartViews: observable,
      hasFolders: computed,
      _premiumAlertFeatureName: observable,
      showPremiumAlert: action,
@@ -56,7 +56,7 @@ export class FeaturesState {
        case ApplicationEvent.Launched:
          runInAction(() => {
            this._hasFolders = this.hasNativeFolders();
-            this._hasSmartTags = this.hasNativeSmartTags();
+            this._hasSmartViews = this.hasNativeSmartViews();
          });
          break;
        default:
@@ -73,8 +73,8 @@ export class FeaturesState {
    return this._hasFolders;
  }

-  public get hasSmartTags(): boolean {
-    return this._hasSmartTags;
+  public get hasSmartViews(): boolean {
+    return this._hasSmartViews;
  }

  public async showPremiumAlert(featureName: string): Promise<void> {
@@ -94,7 +94,7 @@ export class FeaturesState {
    return status === FeatureStatus.Entitled;
  }

-  private hasNativeSmartTags(): boolean {
+  private hasNativeSmartViews(): boolean {
    const status = this.application.getFeatureStatus(
      FeatureIdentifier.SmartFilters
    );
--- a/app/assets/javascripts/ui_models/app_state/notes_view_state.ts
+++ b/app/assets/javascripts/ui_models/app_state/notes_view_state.ts
@@ -5,8 +5,10 @@ import {
  findInArray,
  NotesDisplayCriteria,
  PrefKey,
+  SmartView,
  SNNote,
  SNTag,
+  SystemViewId,
  UuidString,
 } from '@standardnotes/snjs';
 import {
@@ -79,7 +81,10 @@ export class NotesViewState {
            const discarded = activeNote.deleted || activeNote.trashed;
            if (
              discarded &&
-              !this.appState?.selectedTag?.isTrashTag &&
+              !(
+                this.appState.selectedTag instanceof SmartView &&
+                this.appState.selectedTag?.uuid === SystemViewId.TrashedNotes
+              ) &&
              !this.appState?.searchOptions.includeTrashed
            ) {
              this.selectNextOrCreateNew();
@@ -116,7 +121,8 @@ export class NotesViewState {
        this.reloadNotes();
        if (
          this.notes.length === 0 &&
-          this.appState.selectedTag?.isAllTag &&
+          this.appState.selectedTag instanceof SmartView &&
+          this.appState.selectedTag.uuid === SystemViewId.AllNotes &&
          this.noteFilterText === '' &&
          !this.appState.notes.activeNoteController
        ) {
@@ -246,7 +252,8 @@ export class NotesViewState {
    const criteria = NotesDisplayCriteria.Create({
      sortProperty: this.displayOptions.sortBy as CollectionSort,
      sortDirection: this.displayOptions.sortReverse ? 'asc' : 'dsc',
-      tags: tag ? [tag] : [],
+      tags: tag instanceof SNTag ? [tag] : [],
+      views: tag instanceof SmartView ? [tag] : [],
      includeArchived,
      includeTrashed,
      includePinned: !this.displayOptions.hidePinned,
@@ -353,7 +360,11 @@ export class NotesViewState {

  createPlaceholderNote = () => {
    const selectedTag = this.appState.selectedTag;
-    if (selectedTag && selectedTag.isSmartTag && !selectedTag.isAllTag) {
+    if (
+      selectedTag &&
+      selectedTag instanceof SmartView &&
+      selectedTag.uuid !== SystemViewId.AllNotes
+    ) {
      return;
    }
    return this.createNewNote();
--- a/app/assets/javascripts/ui_models/app_state/tags_state.ts
+++ b/app/assets/javascripts/ui_models/app_state/tags_state.ts
@@ -9,10 +9,11 @@ import {
  ContentType,
  MessageData,
  SNApplication,
-  SNSmartTag,
+  SmartView,
  SNTag,
  TagMutator,
  UuidString,
+  isSystemView,
 } from '@standardnotes/snjs';
 import {
  action,
@@ -25,7 +26,7 @@ import {
 import { WebApplication } from '../application';
 import { FeaturesState, SMART_TAGS_FEATURE_NAME } from './features_state';

-type AnyTag = SNTag | SNSmartTag;
+type AnyTag = SNTag | SmartView;

 const rootTags = (application: SNApplication): SNTag[] => {
  const hasNoParent = (tag: SNTag) => !application.getTagParent(tag);
@@ -71,11 +72,11 @@ const isValidFutureSiblings = (

 export class TagsState {
  tags: SNTag[] = [];
-  smartTags: SNSmartTag[] = [];
+  smartViews: SmartView[] = [];
  allNotesCount_ = 0;
  selected_: AnyTag | undefined;
  previouslySelected_: AnyTag | undefined;
-  editing_: SNTag | undefined;
+  editing_: SNTag | SmartView | undefined;
  addingSubtagTo: SNTag | undefined;

  contextMenuOpen = false;
@@ -100,12 +101,12 @@ export class TagsState {
    this.editing_ = undefined;
    this.addingSubtagTo = undefined;

-    this.smartTags = this.application.getSmartTags();
-    this.selected_ = this.smartTags[0];
+    this.smartViews = this.application.getSmartViews();
+    this.selected_ = this.smartViews[0];

    makeObservable(this, {
      tags: observable.ref,
-      smartTags: observable.ref,
+      smartViews: observable.ref,
      hasAtLeastOneFolder: computed,
      allNotesCount_: observable,
      allNotesCount: computed,
@@ -144,28 +145,28 @@ export class TagsState {

    appEventListeners.push(
      this.application.streamItems(
-        [ContentType.Tag, ContentType.SmartTag],
+        [ContentType.Tag, ContentType.SmartView],
        (items) => {
          runInAction(() => {
-            this.tags = this.application.getDisplayableItems(
+            this.tags = this.application.getDisplayableItems<SNTag>(
              ContentType.Tag
-            ) as SNTag[];
-            this.smartTags = this.application.getSmartTags();
+            );
+            this.smartViews = this.application.getSmartViews();

            const selectedTag = this.selected_;
-            if (selectedTag) {
+            if (selectedTag && !isSystemView(selectedTag as SmartView)) {
              const matchingTag = items.find(
                (candidate) => candidate.uuid === selectedTag.uuid
-              );
+              ) as AnyTag;
              if (matchingTag) {
                if (matchingTag.deleted) {
-                  this.selected_ = this.smartTags[0];
+                  this.selected_ = this.smartViews[0];
                } else {
-                  this.selected_ = matchingTag as AnyTag;
+                  this.selected_ = matchingTag;
                }
              }
            } else {
-              this.selected_ = this.smartTags[0];
+              this.selected_ = this.smartViews[0];
            }
          });
        }
@@ -193,7 +194,9 @@ export class TagsState {
      return;
    }

-    const createdTag = await this.application.createTagOrSmartTag(title);
+    const createdTag = (await this.application.createTagOrSmartView(
+      title
+    )) as SNTag;

    const futureSiblings = this.application.getTagChildren(parent);

@@ -294,7 +297,10 @@ export class TagsState {
  }

  public get allLocalRootTags(): SNTag[] {
-    if (this.editing_ && this.application.isTemplateItem(this.editing_)) {
+    if (
+      this.editing_ instanceof SNTag &&
+      this.application.isTemplateItem(this.editing_)
+    ) {
      return [this.editing_, ...this.rootTags];
    }
    return this.rootTags;
@@ -309,9 +315,7 @@ export class TagsState {
      return [];
    }

-    const children = this.application
-      .getTagChildren(tag)
-      .filter((tag) => !tag.isSmartTag);
+    const children = this.application.getTagChildren(tag);

    const childrenUuids = children.map((childTag) => childTag.uuid);
    const childrenTags = this.tags.filter((tag) =>
@@ -414,11 +418,11 @@ export class TagsState {
    return this.selected_?.uuid;
  }

-  public get editingTag(): SNTag | undefined {
+  public get editingTag(): SNTag | SmartView | undefined {
    return this.editing_;
  }

-  public set editingTag(editingTag: SNTag | undefined) {
+  public set editingTag(editingTag: SNTag | SmartView | undefined) {
    this.editing_ = editingTag;
    this.selected = editingTag;
  }
@@ -442,11 +446,11 @@ export class TagsState {

  public undoCreateNewTag() {
    this.editing_ = undefined;
-    const previousTag = this.previouslySelected_ || this.smartTags[0];
+    const previousTag = this.previouslySelected_ || this.smartViews[0];
    this.selected = previousTag;
  }

-  public async remove(tag: SNTag, userTriggered: boolean) {
+  public async remove(tag: SNTag | SmartView, userTriggered: boolean) {
    let shouldDelete = !userTriggered;
    if (userTriggered) {
      shouldDelete = await confirmDialog({
@@ -456,16 +460,17 @@ export class TagsState {
    }
    if (shouldDelete) {
      this.application.deleteItem(tag);
-      this.selected = this.smartTags[0];
+      this.selected = this.smartViews[0];
    }
  }

-  public async save(tag: SNTag, newTitle: string) {
+  public async save(tag: SNTag | SmartView, newTitle: string) {
    const hasEmptyTitle = newTitle.length === 0;
    const hasNotChangedTitle = newTitle === tag.title;
    const isTemplateChange = this.application.isTemplateItem(tag);

-    const siblings = tagSiblings(this.application, tag);
+    const siblings =
+      tag instanceof SNTag ? tagSiblings(this.application, tag) : [];
    const hasDuplicatedTitle = siblings.some(
      (other) => other.title.toLowerCase() === newTitle.toLowerCase()
    );
@@ -492,16 +497,16 @@ export class TagsState {
    }

    if (isTemplateChange) {
-      const isSmartTagTitle = this.application.isSmartTagTitle(newTitle);
+      const isSmartViewTitle = this.application.isSmartViewTitle(newTitle);

-      if (isSmartTagTitle) {
-        if (!this.features.hasSmartTags) {
+      if (isSmartViewTitle) {
+        if (!this.features.hasSmartViews) {
          await this.features.showPremiumAlert(SMART_TAGS_FEATURE_NAME);
          return;
        }
      }

-      const insertedTag = await this.application.createTagOrSmartTag(newTitle);
+      const insertedTag = await this.application.createTagOrSmartView(newTitle);
      this.application.sync();
      runInAction(() => {
        this.selected = insertedTag as SNTag;
@@ -529,7 +534,7 @@ export class TagsState {

      if (
        item.content_type === ContentType.Tag ||
-        item.content_type === ContentType.SmartTag
+        item.content_type === ContentType.SmartView
      ) {
        const matchingTag = this.application.findItem(item.uuid);

@@ -539,7 +544,7 @@ export class TagsState {
        }
      }
    } else if (action === ComponentAction.ClearSelection) {
-      this.selected = this.smartTags[0];
+      this.selected = this.smartViews[0];
    }
  }

--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
    "@reach/visually-hidden": "^0.16.0",
    "@svgr/webpack": "^6.2.1",
    "@types/jest": "^27.4.1",
-    "@types/lodash": "^4.14.178",
+    "@types/lodash": "^4.14.179",
    "@types/react": "^17.0.39",
    "@typescript-eslint/eslint-plugin": "^5.12.1",
    "@typescript-eslint/parser": "^5.12.1",
@@ -40,9 +40,9 @@
    "copy-webpack-plugin": "^10.2.4",
    "css-loader": "^6.6.0",
    "dotenv": "^16.0.0",
-    "eslint": "^8.9.0",
+    "eslint": "^8.10.0",
    "eslint-config-prettier": "^8.4.0",
-    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react": "^7.29.2",
    "eslint-plugin-react-hooks": "^4.3.0",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
@@ -77,11 +77,11 @@
    "@reach/listbox": "^0.16.2",
    "@reach/tooltip": "^0.16.2",
    "@standardnotes/components": "1.7.6",
-    "@standardnotes/features": "1.32.12",
-    "@standardnotes/snjs": "2.63.5",
+    "@standardnotes/features": "1.33.1",
+    "@standardnotes/snjs": "2.65.3",
    "@standardnotes/settings": "^1.11.3",
    "@standardnotes/sncrypto-web": "1.7.1",
-    "mobx": "^6.4.1",
+    "mobx": "^6.4.2",
    "mobx-react-lite": "^3.3.0",
    "preact": "^10.6.6",
    "qrcode.react": "^1.0.1",
--- a/yarn.lock
+++ b/yarn.lock
@@ -1804,10 +1804,10 @@
  resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.5.tgz#9283c9ce5b289a3c4f61c12757469e59377f81f3"
  integrity sha512-6nFkfkmSeV/rqSaS4oWHgmpnYw194f6hmWF5is6b0J1naJZoiD0NTc9AiUwPHvWsowkjuHErCZT1wa0jg+BLIA==

-"@eslint/eslintrc@^1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.1.0.tgz#583d12dbec5d4f22f333f9669f7d0b7c7815b4d3"
-  integrity sha512-C1DfL7XX4nPqGd6jcP01W9pVM1HYCuUkFk1432D7F0v3JSlUIeOYn9oCoi3eoLZ+iwBSb29BMFxxny0YrrEZqg==
+"@eslint/eslintrc@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.2.0.tgz#7ce1547a5c46dfe56e1e45c3c9ed18038c721c6a"
+  integrity sha512-igm9SjJHNEJRiUnecP/1R5T3wKLEJ7pL6e2P+GUSfCd0dGjPYYZve08uzw8L2J8foVHFz+NGu12JxRcU2gGo6w==
  dependencies:
    ajv "^6.12.4"
    debug "^4.3.2"
@@ -2366,47 +2366,65 @@
  dependencies:
    "@sinonjs/commons" "^1.7.0"

-"@standardnotes/auth@^3.16.5":
-  version "3.16.5"
-  resolved "https://registry.yarnpkg.com/@standardnotes/auth/-/auth-3.16.5.tgz#54e0ea92bdc124c22f1d064d7a209504108e28e0"
-  integrity sha512-lEKPs6n3Jor79fOia/88SiEST67FFmCBTLthE1dJtl+Vo8URRjh9VLO5HYfbjEqH3bgffhR6m8EGJGPdzz+NQQ==
+"@standardnotes/applications@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/applications/-/applications-1.1.1.tgz#c57b9e192436d43963b36919ab44d1c626838151"
+  integrity sha512-C3K1dzjLG/kG4BCXMhCaL5xBnLXIaElkxZRxmg3Xrnh2XqtO7IbEsrjii8VxdYvjbhCEriFXLgghcSyHujaTTA==
  dependencies:
-    "@standardnotes/common" "^1.14.1"
+    "@standardnotes/common" "^1.15.1"
+
+"@standardnotes/auth@^3.17.1":
+  version "3.17.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/auth/-/auth-3.17.1.tgz#eda5f3e156c990c59407ce5a17f043a5caefe5f9"
+  integrity sha512-A3y20NeXa5MU5jxTlM1rxD6eMWe6K7WdWsANIiJceuFUx2jisX2esZyJluGZ2Pi3dwhMuOzmoX8iRgk3eUmkgg==
+  dependencies:
+    "@standardnotes/common" "^1.15.1"
    jsonwebtoken "^8.5.1"

-"@standardnotes/common@^1.14.1":
-  version "1.14.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/common/-/common-1.14.1.tgz#4322001eea59a7bb427007902bfdec5b57cfc64d"
-  integrity sha512-nRzLVMBk1L8aft6tVhK/ieDWa/rsRUzZzuclv94Mn1g0AJcqEqM0weziNIAfemdMIWpoZyhseJELD6pkWqQQeg==
+"@standardnotes/common@^1.15.1":
+  version "1.15.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/common/-/common-1.15.1.tgz#e028ca719e9c4c1acbf8867be5f97599275c7490"
+  integrity sha512-OQTDsB+DatNyRplzx6SUasOTWFdwJZXkJkyDUr1rb1HnPz/VQpHYaQh5pRNHt7OHe002373rQZPAweHBlmEoDg==

 "@standardnotes/components@1.7.6":
  version "1.7.6"
  resolved "https://registry.yarnpkg.com/@standardnotes/components/-/components-1.7.6.tgz#6dcce572b32580a6df9091422d96c9c0b6917174"
  integrity sha512-5lSYNKpO1tQRD6PMOs0IVTmPhfUh33+h6HQZdbWyCmjUk99QE86cI6IC8LnPh5rjHKG+jkfwgVzBKrR3QS/eQw==

-"@standardnotes/domain-events@^2.23.15":
-  version "2.23.15"
-  resolved "https://registry.yarnpkg.com/@standardnotes/domain-events/-/domain-events-2.23.15.tgz#ce568fb5d30b220d49a70878efbc9bbee769bdf5"
-  integrity sha512-wJAoad9oXmAz39KZwYowiYny1dnHX/AJXdCdLwKxpJErh0h+VQhEhT2bPnqdIxJ90MTvn9jALhKM9AGlMEl+Aw==
+"@standardnotes/domain-events@^2.23.17":
+  version "2.23.17"
+  resolved "https://registry.yarnpkg.com/@standardnotes/domain-events/-/domain-events-2.23.17.tgz#b2256ad7711003fb1790ac53548e8db37df38b4c"
+  integrity sha512-9qhQFydyi0ZNw2u2tAAp53Gbz1VLRwDX4S7FK4vT3sSoHTmkvkI354ETcgDBlZuIMZSo7AwthKu3wZTCz3jvMA==
  dependencies:
-    "@standardnotes/auth" "^3.16.5"
-    "@standardnotes/features" "^1.32.12"
+    "@standardnotes/auth" "^3.17.1"
+    "@standardnotes/features" "^1.33.1"

-"@standardnotes/features@1.32.12", "@standardnotes/features@^1.32.12":
-  version "1.32.12"
-  resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.32.12.tgz#20b52fa5b0c7c29feea9d9ebb12a10f87cb7ec75"
-  integrity sha512-Xs5Ss8DWNLFWIMibFMO5GKGv/je7SAYr3lR6NvyQgKl4+bBxAVKqLgccWLodAXrNuOFoGAXBbG9R8PsFfYKlYw==
+"@standardnotes/features@1.33.1", "@standardnotes/features@^1.33.1":
+  version "1.33.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.33.1.tgz#0269acf6672396cd7015b8df7f559f600de4dd08"
+  integrity sha512-TeZJ8nfaVMi1RGCNhGoXtzbhLuODf8fmceuMdZGMJYJEE6eEIr/YvqpDp1tYO/xCsvboZgRdwVmC7D5jPPmIwg==
  dependencies:
-    "@standardnotes/auth" "^3.16.5"
-    "@standardnotes/common" "^1.14.1"
+    "@standardnotes/auth" "^3.17.1"
+    "@standardnotes/common" "^1.15.1"

-"@standardnotes/services@^1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.1.1.tgz#96065a8144c6f0d7695d7aedb0e10b8a9341a1b0"
-  integrity sha512-wM15yy3fjzlyVQWi0t9l0CZCSTMzBYQMrZBaBItSnN7P76zDa1MvQ9g7yWyC91nYGCgihI+nmDdArle88/4gWw==
+"@standardnotes/payloads@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@standardnotes/payloads/-/payloads-1.1.2.tgz#6cb7819ab5fedc17d2e90a703015d0a46e350643"
+  integrity sha512-uV7cKkgP7eqfqyzvsd8r3t+DOGFkWIYNT8bGqYvTSrj+gjIGVSPhqL//oN1iUTvFUtcFTJHVLO2eirE2xcn/0A==
  dependencies:
-    "@standardnotes/common" "^1.14.1"
-    "@standardnotes/utils" "^1.1.2"
+    "@standardnotes/applications" "^1.1.1"
+    "@standardnotes/common" "^1.15.1"
+    "@standardnotes/features" "^1.33.1"
+    "@standardnotes/utils" "^1.2.1"
+
+"@standardnotes/services@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.2.1.tgz#7f1ddd3a16cd1c8dc43d3466fbe936a28d6d5eeb"
+  integrity sha512-b8Nw20SSg3Xr34hHoDQPxWNJ6Xgnswrjfg2paYPHXclP1Qwvo7OpiqdcjMntZ88UftvY1bFZJvqF1xrak7TJFA==
+  dependencies:
+    "@standardnotes/applications" "^1.1.1"
+    "@standardnotes/common" "^1.15.1"
+    "@standardnotes/utils" "^1.2.1"

 "@standardnotes/settings@^1.11.3":
  version "1.11.3"
@@ -2427,19 +2445,21 @@
    buffer "^6.0.3"
    libsodium-wrappers "^0.7.9"

-"@standardnotes/snjs@2.63.5":
-  version "2.63.5"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.63.5.tgz#eb5fab274bc576a610033d894a3853f116a5e584"
-  integrity sha512-vhmqsRJn6UXJW1DK6jF0awTXEI/EYt1jzk7t5xpwLSThVM12LgPi/5u2KGPg1Ke7HHq2pejU/3AWNx7cbzXujw==
+"@standardnotes/snjs@2.65.3":
+  version "2.65.3"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.65.3.tgz#a5a769c3aabb80623cd62e3f861a865c1f376bf8"
+  integrity sha512-5kCJ53IKwhdZ9/hWpwmBnJlQ5kVSvAtrqfOf23Y/wHBhBmqSbaME3WtwUcvDS+MNZ1DH2ikv/iGkElAC+aClVw==
  dependencies:
-    "@standardnotes/auth" "^3.16.5"
-    "@standardnotes/common" "^1.14.1"
-    "@standardnotes/domain-events" "^2.23.15"
-    "@standardnotes/features" "^1.32.12"
-    "@standardnotes/services" "^1.1.1"
+    "@standardnotes/applications" "^1.1.1"
+    "@standardnotes/auth" "^3.17.1"
+    "@standardnotes/common" "^1.15.1"
+    "@standardnotes/domain-events" "^2.23.17"
+    "@standardnotes/features" "^1.33.1"
+    "@standardnotes/payloads" "^1.1.2"
+    "@standardnotes/services" "^1.2.1"
    "@standardnotes/settings" "^1.11.3"
    "@standardnotes/sncrypto-common" "^1.7.1"
-    "@standardnotes/utils" "^1.1.2"
+    "@standardnotes/utils" "^1.2.1"

 "@standardnotes/stylekit@5.9.0":
  version "5.9.0"
@@ -2451,12 +2471,12 @@
    "@svgr/webpack" "^6.2.1"
    prop-types "^15.7.2"

-"@standardnotes/utils@^1.1.2":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@standardnotes/utils/-/utils-1.1.2.tgz#5bc1919a3a90c61a34354275d9129f71a23ee34d"
-  integrity sha512-D39U3S1XJIeLCRYnI98sBVWx0VcVYTfBNZTLU2K0ICRg2fvszQvyLRlFA4U7wf9x0QXsqVjORxAVcIiC5UoQPA==
+"@standardnotes/utils@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/utils/-/utils-1.2.1.tgz#226c679f5f91713c58f8ec0e837ea4586b234b3c"
+  integrity sha512-6lCzDsps9jh+CcgAeyPjwVaZG7VYCqKl5+Qp6mLUyFbqBIylg4ZW3VXvjjfw8DYY1LgHZtCTIHTuDdXCDuGm+w==
  dependencies:
-    "@standardnotes/common" "^1.14.1"
+    "@standardnotes/common" "^1.15.1"
    dompurify "^2.3.4"
    lodash "^4.17.19"

@@ -2738,10 +2758,10 @@
  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.6.tgz#f4c7ec43e81b319a9815115031709f26987891f0"
  integrity sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==

-"@types/lodash@^4.14.178":
-  version "4.14.178"
-  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.178.tgz#341f6d2247db528d4a13ddbb374bcdc80406f4f8"
-  integrity sha512-0d5Wd09ItQWH1qFbEyQ7oTQ3GZrMfth5JkbN3EvTKLXcHLRDSXeLnlvlOn0wvxVIwK5o2M8JzP/OWz7T3NRsbw==
+"@types/lodash@^4.14.179":
+  version "4.14.179"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.179.tgz#490ec3288088c91295780237d2497a3aa9dfb5c5"
+  integrity sha512-uwc1x90yCKqGcIOAT6DwOSuxnrAbpkdPsUOZtwrXb4D/6wZs+6qG7QnIawDuZWg0sWpxl+ltIKCaLoMlna678w==

 "@types/mime@^1":
  version "1.3.2"
@@ -4765,22 +4785,22 @@ eslint-plugin-react-hooks@^4.3.0:
  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.3.0.tgz#318dbf312e06fab1c835a4abef00121751ac1172"
  integrity sha512-XslZy0LnMn+84NEG9jSGR6eGqaZB3133L8xewQo3fQagbQuGt7a63gf+P1NGKZavEYEC3UXaWEAA/AqDkuN6xA==

-eslint-plugin-react@^7.28.0:
-  version "7.28.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.28.0.tgz#8f3ff450677571a659ce76efc6d80b6a525adbdf"
-  integrity sha512-IOlFIRHzWfEQQKcAD4iyYDndHwTQiCMcJVJjxempf203jnNLUnW34AXLrV33+nEXoifJE2ZEGmcjKPL8957eSw==
+eslint-plugin-react@^7.29.2:
+  version "7.29.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.29.2.tgz#2d4da69d30d0a736efd30890dc6826f3e91f3f7c"
+  integrity sha512-ypEBTKOy5liFQXZWMchJ3LN0JX1uPI6n7MN7OPHKacqXAxq5gYC30TdO7wqGYQyxD1OrzpobdHC3hDmlRWDg9w==
  dependencies:
    array-includes "^3.1.4"
    array.prototype.flatmap "^1.2.5"
    doctrine "^2.1.0"
    estraverse "^5.3.0"
    jsx-ast-utils "^2.4.1 || ^3.0.0"
-    minimatch "^3.0.4"
+    minimatch "^3.1.2"
    object.entries "^1.1.5"
    object.fromentries "^2.0.5"
    object.hasown "^1.1.0"
    object.values "^1.1.5"
-    prop-types "^15.7.2"
+    prop-types "^15.8.1"
    resolve "^2.0.0-next.3"
    semver "^6.3.0"
    string.prototype.matchall "^4.0.6"
@@ -4828,12 +4848,12 @@ eslint-visitor-keys@^3.3.0:
  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz#f6480fa6b1f30efe2d1968aa8ac745b862469826"
  integrity sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==

-eslint@^8.9.0:
-  version "8.9.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.9.0.tgz#a2a8227a99599adc4342fd9b854cb8d8d6412fdb"
-  integrity sha512-PB09IGwv4F4b0/atrbcMFboF/giawbBLVC7fyDamk5Wtey4Jh2K+rYaBhCAbUyEI4QzB1ly09Uglc9iCtFaG2Q==
+eslint@^8.10.0:
+  version "8.10.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.10.0.tgz#931be395eb60f900c01658b278e05b6dae47199d"
+  integrity sha512-tcI1D9lfVec+R4LE1mNDnzoJ/f71Kl/9Cv4nG47jOueCMBrCCKYXr4AUVS7go6mWYGFD4+EoN6+eXSrEbRzXVw==
  dependencies:
-    "@eslint/eslintrc" "^1.1.0"
+    "@eslint/eslintrc" "^1.2.0"
    "@humanwhocodes/config-array" "^0.9.2"
    ajv "^6.10.0"
    chalk "^4.0.0"
@@ -7195,6 +7215,13 @@ minimatch@^3.0.4, minimatch@~3.0.2:
  dependencies:
    brace-expansion "^1.1.7"

+minimatch@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
+  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
+  dependencies:
+    brace-expansion "^1.1.7"
+
 minimist-options@4.1.0:
  version "4.1.0"
  resolved "https://registry.yarnpkg.com/minimist-options/-/minimist-options-4.1.0.tgz#c0655713c53a8a2ebd77ffa247d342c40f010619"
@@ -7287,10 +7314,10 @@ mobx-react-lite@^3.3.0:
  resolved "https://registry.yarnpkg.com/mobx-react-lite/-/mobx-react-lite-3.3.0.tgz#7174e807201943beff6f9d3701492314c9fc0db3"
  integrity sha512-U/kMSFtV/bNVgY01FuiGWpRkaQVHozBq5CEBZltFvPt4FcV111hEWkgwqVg9GPPZSEuEdV438PEz8mk8mKpYlA==

-mobx@^6.4.1:
-  version "6.4.1"
-  resolved "https://registry.yarnpkg.com/mobx/-/mobx-6.4.1.tgz#c1d0eeb37ceb31bb2020a85f6bf856782d47fe60"
-  integrity sha512-NFXx0uMbGBgsa0uxhH099L8cMuoRQWh01q6Sf0ZX/3hFU7svJ7yfTD+1LnLMa5wzY/b7gImAeMsR1p0wordDnA==
+mobx@^6.4.2:
+  version "6.4.2"
+  resolved "https://registry.yarnpkg.com/mobx/-/mobx-6.4.2.tgz#d25cd358a46b7a8fe2d8299259bc71008a2aa5b3"
+  integrity sha512-b4xQJYiH8sb0sEbfq/Ws3N77DEJtSihUFD1moeiz2jNoJ5B+mqJutt54ouO9iEfkp7Wk4jQDsVUOh7DPEW3wEw==

 mri@^1.1.5:
  version "1.2.0"
@@ -7968,6 +7995,15 @@ prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
    object-assign "^4.1.1"
    react-is "^16.8.1"

+prop-types@^15.8.1:
+  version "15.8.1"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
 proxy-addr@~2.0.5:
  version "2.0.6"
  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.6.tgz#fdc2336505447d3f2f2c638ed272caf614bbb2bf"
@@ -8090,7 +8126,7 @@ react-focus-lock@^2.5.2:
    use-callback-ref "^1.2.5"
    use-sidecar "^1.0.5"

-react-is@^16.7.0, react-is@^16.8.1:
+react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1:
  version "16.13.1"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==