chore: upgrade deps (#906)

* chore: upgrade deps

* fix: MenuArrowRight import

* fix: type naming

app/assets/javascripts/components/AccountMenu/User.tsx

@@ -1,19 +1,16 @@
 import { observer } from 'mobx-react-lite';
 import { AppState } from '@/ui_models/app_state';
 import { WebApplication } from '@/ui_models/application';
-import { User } from '@standardnotes/snjs/dist/@types/services/api/responses';
+import { User as UserType } from '@standardnotes/responses';
 
 type Props = {
   appState: AppState;
   application: WebApplication;
-}
+};
 
-const User = observer(({
-  appState,
-  application,
-}: Props) => {
+const User = observer(({ appState, application }: Props) => {
   const { server } = appState.accountMenu;
-  const user = application.getUser();
+  const user = application.getUser() as UserType;
 
   return (
     <div className="sk-panel-section">
@@ -21,8 +18,8 @@ const User = observer(({
         <div className="sk-notification danger">
           <div className="sk-notification-title">Sync Unreachable</div>
           <div className="sk-notification-text">
-            Hmm...we can't seem to sync your account.
-            The reason: {appState.sync.errorMessage}
+            Hmm...we can't seem to sync your account. The reason:{' '}
+            {appState.sync.errorMessage}
           </div>
           <a
             className="sk-a info-contrast sk-bold sk-panel-row"
@@ -36,12 +33,8 @@ const User = observer(({
       )}
       <div className="sk-panel-row">
         <div className="sk-panel-column">
-          <div className="sk-h1 sk-bold wrap">
-            {(user as User).email}
-          </div>
-          <div className="sk-subtitle neutral">
-            {server}
-          </div>
+          <div className="sk-h1 sk-bold wrap">{user.email}</div>
+          <div className="sk-subtitle neutral">{server}</div>
         </div>
       </div>
       <div className="sk-panel-row" />

app/assets/javascripts/components/Icon.tsx

@@ -39,7 +39,7 @@ import {
   MarkdownIcon,
   MenuArrowDownAlt,
   MenuArrowDownIcon,
-  MenuArrowRight,
+  MenuArrowRightIcon,
   MenuCloseIcon,
   MoreIcon,
   NotesIcon,
@@ -92,7 +92,7 @@ const ICONS = {
   'lock-filled': LockFilledIcon,
   'menu-arrow-down-alt': MenuArrowDownAlt,
   'menu-arrow-down': MenuArrowDownIcon,
-  'menu-arrow-right': MenuArrowRight,
+  'menu-arrow-right': MenuArrowRightIcon,
   'menu-close': MenuCloseIcon,
   'pencil-filled': PencilFilledIcon,
   'pencil-off': PencilOffIcon,

app/assets/javascripts/components/NotesOptions/changeEditor/createEditorMenuGroups.ts

@@ -76,7 +76,7 @@ export const createEditorMenuGroups = (
       name: editor.name,
       component: editor,
       isEntitled:
-        application.getFeatureStatus(editor.identifier) ===
+        application.features.getFeatureStatus(editor.identifier) ===
         FeatureStatus.Entitled,
     };
 

app/assets/javascripts/components/QuickSettingsMenu/FocusModeSwitch.tsx

@@ -22,7 +22,7 @@ export const FocusModeSwitch: FunctionComponent<Props> = ({
 }) => {
   const premiumModal = usePremiumModal();
   const isEntitled =
-    application.getFeatureStatus(FeatureIdentifier.FocusMode) ===
+    application.features.getFeatureStatus(FeatureIdentifier.FocusMode) ===
     FeatureStatus.Entitled;
 
   const toggle = useCallback(

app/assets/javascripts/components/QuickSettingsMenu/ThemesMenuButton.tsx

@@ -22,12 +22,13 @@ export const ThemesMenuButton: FunctionComponent<Props> = ({
   const premiumModal = usePremiumModal();
 
   const isThirdPartyTheme = useMemo(
-    () => application.isThirdPartyFeature(item.identifier),
+    () => application.features.isThirdPartyFeature(item.identifier),
     [application, item.identifier]
   );
   const isEntitledToTheme = useMemo(
     () =>
-      application.getFeatureStatus(item.identifier) === FeatureStatus.Entitled,
+      application.features.getFeatureStatus(item.identifier) ===
+      FeatureStatus.Entitled,
     [application, item.identifier]
   );
   const canActivateTheme = useMemo(

app/assets/javascripts/components/RevisionHistoryModal/HistoryListContainer.tsx

@@ -155,7 +155,9 @@ export const HistoryListContainer: FunctionComponent<Props> = observer(
       async (revisionListEntry: RevisionListEntry) => {
         setShowContentLockedScreen(false);
 
-        if (application.hasMinimumRole(revisionListEntry.required_role)) {
+        if (
+          application.features.hasMinimumRole(revisionListEntry.required_role)
+        ) {
           setIsFetchingSelectedRevision(true);
           setSelectedRevision(undefined);
           setSelectedRemoteEntry(undefined);

app/assets/javascripts/components/RevisionHistoryModal/RemoteHistoryList.tsx

@@ -95,9 +95,9 @@ export const RemoteHistoryList: FunctionComponent<RemoteHistoryListProps> =
                   >
                     <div className="flex flex-grow items-center justify-between">
                       <div>{previewHistoryEntryTitle(entry)}</div>
-                      {!application.hasMinimumRole(entry.required_role) && (
-                        <Icon type="premium-feature" />
-                      )}
+                      {!application.features.hasMinimumRole(
+                        entry.required_role
+                      ) && <Icon type="premium-feature" />}
                     </div>
                   </HistoryListItem>
                 ))}