chore: upgrade deps

app/assets/javascripts/components/Abstract/PureComponent.tsx

@@ -78,7 +78,7 @@ export abstract class PureComponent<
     );
   }
 
-  onAppStateEvent(eventName: any, data: any) {
+  onAppStateEvent(_eventName: any, _data: any) {
     /** Optional override */
   }
 

app/assets/javascripts/components/AttachedFilesPopover/AttachedFilesPopover.tsx

@@ -68,7 +68,7 @@ export const AttachedFilesPopover: FunctionComponent<Props> = observer(
           );
 
           setAllFiles(
-            application
+            application.items
               .getItems(ContentType.File)
               .sort((a, b) =>
                 a.created_at < b.created_at ? 1 : -1

app/assets/javascripts/components/CircleProgress.tsx

@@ -1,38 +0,0 @@
-import { FunctionComponent } from 'preact';
-
-export const CircleProgress: FunctionComponent<{
-  percent: number;
-  className?: string;
-}> = ({ percent, className = '' }) => {
-  const size = 16;
-  const ratioStrokeRadius = 0.25;
-  const outerRadius = size / 2;
-
-  const radius = outerRadius * (1 - ratioStrokeRadius);
-  const stroke = outerRadius - radius;
-
-  const circumference = radius * 2 * Math.PI;
-  const offset = circumference - (percent / 100) * circumference;
-
-  const transition = `transition: 0.35s stroke-dashoffset;`;
-  const transform = `transform: rotate(-90deg);`;
-  const transformOrigin = `transform-origin: 50% 50%;`;
-  const dasharray = `stroke-dasharray: ${circumference} ${circumference};`;
-  const dashoffset = `stroke-dashoffset: ${offset};`;
-  const style = `${transition} ${transform} ${transformOrigin} ${dasharray} ${dashoffset}`;
-  return (
-    <div className="h-5 w-5 min-w-5 min-h-5">
-      <svg viewBox={`0 0 ${size} ${size}`}>
-        <circle
-          stroke="#086DD6"
-          stroke-width={stroke}
-          fill="transparent"
-          r={radius}
-          cx="50%"
-          cy="50%"
-          style={style}
-        />
-      </svg>
-    </div>
-  );
-};

app/assets/javascripts/components/CircleProgressTime.tsx

@@ -1,27 +0,0 @@
-import { FunctionalComponent } from 'preact';
-import { useEffect, useState } from 'preact/hooks';
-import { CircleProgress } from './CircleProgress';
-
-/**
- * Circular progress bar which runs in a specified time interval
- * @param time - time interval in ms
- */
-export const CircleProgressTime: FunctionalComponent<{ time: number }> = ({
-  time,
-}) => {
-  const [percent, setPercent] = useState(0);
-  const interval = time / 100;
-  useEffect(() => {
-    const tick = setInterval(() => {
-      if (percent === 100) {
-        setPercent(0);
-      } else {
-        setPercent(percent + 1);
-      }
-    }, interval);
-    return () => {
-      clearInterval(tick);
-    };
-  });
-  return <CircleProgress percent={percent} />;
-};

app/assets/javascripts/components/Footer.tsx

@@ -212,7 +212,10 @@ export class Footer extends PureComponent<Props, State> {
         }
         if (!this.didCheckForOffline) {
           this.didCheckForOffline = true;
-          if (this.state.offline && this.application.getNoteCount() === 0) {
+          if (
+            this.state.offline &&
+            this.application.items.getNoteCount() === 0
+          ) {
             this.appState.accountMenu.setShow(true);
           }
         }
@@ -244,7 +247,7 @@ export class Footer extends PureComponent<Props, State> {
   }
 
   streamItems() {
-    this.application.setDisplayOptions(
+    this.application.items.setDisplayOptions(
       ContentType.Theme,
       CollectionSort.Title,
       'asc',

app/assets/javascripts/components/NotesListOptionsMenu.tsx

@@ -2,7 +2,7 @@ import { WebApplication } from '@/ui_models/application';
 import { CollectionSort, PrefKey } from '@standardnotes/snjs';
 import { observer } from 'mobx-react-lite';
 import { FunctionComponent } from 'preact';
-import { useRef, useState } from 'preact/hooks';
+import { useState } from 'preact/hooks';
 import { Icon } from './Icon';
 import { Menu } from './Menu/Menu';
 import { MenuItem, MenuItemSeparator, MenuItemType } from './Menu/MenuItem';

app/assets/javascripts/components/OtherSessionsSignOut.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'preact/hooks';
+import { useRef } from 'preact/hooks';
 import {
   AlertDialog,
   AlertDialogDescription,
@@ -7,7 +7,6 @@ import {
 import { WebApplication } from '@/ui_models/application';
 import { AppState } from '@/ui_models/app_state';
 import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
 
 type Props = {
   application: WebApplication;

app/assets/javascripts/components/Preferences/PreferencesMenu.ts

@@ -113,7 +113,7 @@ export class PreferencesMenu {
       FeatureIdentifier.CloudLink,
     ];
     this._extensionPanes = (
-      this.application.getItems([
+      this.application.items.getItems([
         ContentType.ActionsExtension,
         ContentType.Component,
         ContentType.Theme,

app/assets/javascripts/components/Preferences/panes/Appearance.tsx

@@ -62,7 +62,7 @@ export const Appearance: FunctionComponent<Props> = observer(
 
     useEffect(() => {
       const themesAsItems: DropdownItem[] = (
-        application.getDisplayableItems(ContentType.Theme) as SNTheme[]
+        application.items.getDisplayableItems(ContentType.Theme) as SNTheme[]
       )
         .filter((theme) => !theme.isLayerable())
         .sort(sortThemes)

app/assets/javascripts/components/Preferences/panes/Extensions.tsx

@@ -13,7 +13,7 @@ import { useEffect, useRef, useState } from 'preact/hooks';
 import { observer } from 'mobx-react-lite';
 
 const loadExtensions = (application: WebApplication) =>
-  application.getItems(
+  application.items.getItems(
     [ContentType.ActionsExtension, ContentType.Component, ContentType.Theme],
     true
   ) as SNComponent[];

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

@@ -104,7 +104,7 @@ export const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
 
     const reloadThemes = useCallback(() => {
       const themes = (
-        application.getDisplayableItems(ContentType.Theme) as SNTheme[]
+        application.items.getDisplayableItems(ContentType.Theme) as SNTheme[]
       ).map((item) => {
         return {
           name: item.name,
@@ -141,7 +141,9 @@ export const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
 
     const reloadToggleableComponents = useCallback(() => {
       const toggleableComponents = (
-        application.getDisplayableItems(ContentType.Component) as SNComponent[]
+        application.items.getDisplayableItems(
+          ContentType.Component
+        ) as SNComponent[]
       ).filter(
         (component) =>
           [ComponentArea.EditorStack, ComponentArea.TagsList].includes(

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

@@ -139,7 +139,7 @@ export const RevisionHistoryModal: FunctionComponent<RevisionHistoryModalProps>
 
     const restore = () => {
       if (selectedRevision) {
-        const originalNote = application.findItem(
+        const originalNote = application.items.findItem(
           selectedRevision.payload.uuid
         ) as SNNote;
 
@@ -171,7 +171,7 @@ export const RevisionHistoryModal: FunctionComponent<RevisionHistoryModalProps>
 
     const restoreAsCopy = async () => {
       if (selectedRevision) {
-        const originalNote = application.findItem(
+        const originalNote = application.items.findItem(
           selectedRevision.payload.uuid
         ) as SNNote;
 

app/assets/javascripts/components/RevisionPreviewModal.tsx

@@ -37,7 +37,9 @@ export class RevisionPreviewModal extends PureComponent<Props, State> {
       this.props.content
     )) as SNNote;
 
-    this.originalNote = this.application.findItem(this.props.uuid) as SNNote;
+    this.originalNote = this.application.items.findItem(
+      this.props.uuid
+    ) as SNNote;
 
     const component = this.application.componentManager.editorForNote(
       this.originalNote

app/assets/javascripts/components/Tags/TagsSection.tsx

@@ -16,7 +16,9 @@ export const TagsSection: FunctionComponent<Props> = observer(
     const [hasMigration, setHasMigration] = useState<boolean>(false);
 
     const checkIfMigrationNeeded = useCallback(() => {
-      setHasMigration(appState.application.hasTagsNeedingFoldersMigration());
+      setHasMigration(
+        appState.application.items.hasTagsNeedingFoldersMigration()
+      );
     }, [appState.application]);
 
     useEffect(() => {