web: move dialogs out to top-most level

apps/web/src/app-effects.jsx

@@ -43,7 +43,7 @@ import useSystemTheme from "./hooks/use-system-theme";
 import { isTesting } from "./utils/platform";
 import { updateStatus, removeStatus, getStatus } from "./hooks/use-status";
 import { showToast } from "./utils/toast";
-import { interruptedOnboarding } from "./components/dialogs/onboarding-dialog";
+import { interruptedOnboarding } from "./components/dialog/onboarding-dialog";
 import { hashNavigate } from "./navigation";
 import { desktop } from "./common/desktop-bridge";
 

apps/web/src/common/dialog-controller.tsx

@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import ReactDOM from "react-dom";
-import { Dialogs } from "../components/dialogs";
+import { Dialogs } from "../dialogs";
 import ThemeProvider from "../components/theme-provider";
 import qclone from "qclone";
 import { store as notebookStore } from "../stores/notebook-store";
@@ -32,12 +32,12 @@ import { Text } from "@theme-ui/components";
 import * as Icon from "../components/icons";
 import Config from "../utils/config";
 import { AppVersion, getChangelog } from "../utils/version";
-import { Period } from "../components/dialogs/buy-dialog/types";
-import { FeatureKeys } from "../components/dialogs/feature-dialog";
-import { AuthenticatorType } from "../components/dialogs/mfa/types";
+import { Period } from "../dialogs/buy-dialog/types";
+import { FeatureKeys } from "../dialogs/feature-dialog";
+import { AuthenticatorType } from "../dialogs/mfa/types";
 import { Suspense } from "react";
 import { Reminder } from "@notesnook/core/collections/reminders";
-import { ConfirmDialogProps } from "../components/dialogs/confirm";
+import { ConfirmDialogProps } from "../dialogs/confirm";
 import { getFormattedDate } from "@notesnook/common";
 import { downloadUpdate, installUpdate } from "../utils/updater";
 

apps/web/src/dialogs/add-notebook-dialog.jsx

@@ -19,11 +19,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
 import { Flex, Text } from "@theme-ui/components";
-import * as Icon from "../icons";
-import Dialog from "./dialog";
+import * as Icon from "../components/icons";
+import Dialog from "../components/dialog";
 import qclone from "qclone";
-import Field from "../field";
-import { showToast } from "../../utils/toast";
+import Field from "../components/field";
+import { showToast } from "../utils/toast";
 
 class AddNotebookDialog extends React.Component {
   title = "";

apps/web/src/dialogs/add-reminder-dialog.tsx

@@ -17,18 +17,18 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { Perform } from "../../common/dialog-controller";
-import Dialog from "./dialog";
-import Field from "../field";
+import { Perform } from "../common/dialog-controller";
+import Dialog from "../components/dialog";
+import Field from "../components/field";
 import { Box, Button, Flex, Label, Radio, Text } from "@theme-ui/components";
 import dayjs from "dayjs";
 import { useEffect, useState } from "react";
-import { db } from "../../common/db";
-import { useStore } from "../../stores/reminder-store";
-import { showToast } from "../../utils/toast";
-import { useIsUserPremium } from "../../hooks/use-is-user-premium";
-import { Pro } from "../icons";
-import { usePersistentState } from "../../hooks/use-persistent-state";
+import { db } from "../common/db";
+import { useStore } from "../stores/reminder-store";
+import { showToast } from "../utils/toast";
+import { useIsUserPremium } from "../hooks/use-is-user-premium";
+import { Pro } from "../components/icons";
+import { usePersistentState } from "../hooks/use-persistent-state";
 
 export type AddReminderDialogProps = {
   onClose: Perform;
@@ -305,6 +305,7 @@ export default function AddReminderDialog(props: AddReminderDialogProps) {
           {recurringModes.map((mode) =>
             mode.id === recurringMode ? (
               <Box
+                key={mode.id}
                 sx={{
                   display: "grid",
                   gridTemplateColumns:

apps/web/src/dialogs/add-tags-dialog.tsx

@@ -19,13 +19,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { useCallback, useEffect, useState } from "react";
 import { Flex, Text } from "@theme-ui/components";
-import * as Icon from "../icons";
-import { db } from "../../common/db";
-import Dialog from "./dialog";
-import { useStore, store } from "../../stores/tag-store";
-import { store as notestore } from "../../stores/note-store";
-import { Perform } from "../../common/dialog-controller";
-import { FilteredList } from "../filtered-list";
+import {
+  CheckCircleOutline,
+  CheckRemove,
+  CircleEmpty
+} from "../components/icons";
+import { db } from "../common/db";
+import Dialog from "../components/dialog";
+import { useStore, store } from "../stores/tag-store";
+import { store as notestore } from "../stores/note-store";
+import { Perform } from "../common/dialog-controller";
+import { FilteredList } from "../components/filtered-list";
 
 type SelectedReference = {
   id: string;
@@ -207,11 +211,11 @@ function SelectedCheck({
   size?: number;
 }) {
   return selected === "add" ? (
-    <Icon.CheckCircleOutline size={size} sx={{ mr: 1 }} color="primary" />
+    <CheckCircleOutline size={size} sx={{ mr: 1 }} color="primary" />
   ) : selected === "remove" ? (
-    <Icon.CheckRemove size={size} sx={{ mr: 1 }} color="error" />
+    <CheckRemove size={size} sx={{ mr: 1 }} color="error" />
   ) : (
-    <Icon.CircleEmpty size={size} sx={{ mr: 1, opacity: 0.4 }} />
+    <CircleEmpty size={size} sx={{ mr: 1, opacity: 0.4 }} />
   );
 }
 

apps/web/src/dialogs/announcement-dialog.jsx

@@ -21,7 +21,7 @@ import Modal from "react-modal";
 import { useTheme } from "@emotion/react";
 import { Flex } from "@theme-ui/components";
 import AnnouncementBody from "../announcements/body";
-import { store as announcementStore } from "../../stores/announcement-store";
+import { store as announcementStore } from "../stores/announcement-store";
 import { useCallback } from "react";
 
 function AnnouncementDialog(props) {

apps/web/src/dialogs/attachments-dialog.tsx

@@ -28,10 +28,10 @@ import {
   Label,
   Text
 } from "@theme-ui/components";
-import { getTotalSize } from "../../common/attachments";
-import { useStore, store } from "../../stores/attachment-store";
+import { getTotalSize } from "../common/attachments";
+import { useStore, store } from "../stores/attachment-store";
 import { formatBytes } from "@notesnook/common";
-import Dialog from "./dialog";
+import Dialog from "../components/dialog";
 import { TableVirtuoso } from "react-virtuoso";
 import {
   ChevronDown,
@@ -47,14 +47,14 @@ import {
   Trash,
   Unlink,
   Uploading
-} from "../icons";
-import NavigationItem from "../navigation-menu/navigation-item";
+} from "../components/icons";
+import NavigationItem from "../components/navigation-menu/navigation-item";
 import { pluralize } from "@notesnook/common";
-import { db } from "../../common/db";
-import { Perform } from "../../common/dialog-controller";
-import { Multiselect } from "../../common/multi-select";
-import { CustomScrollbarsVirtualList } from "../list-container";
-import { Attachment } from "../attachment";
+import { db } from "../common/db";
+import { Perform } from "../common/dialog-controller";
+import { Multiselect } from "../common/multi-select";
+import { CustomScrollbarsVirtualList } from "../components/list-container";
+import { Attachment } from "../components/attachment";
 import { isDocument, isImage, isVideo } from "@notesnook/core/utils/filename";
 
 type ToolbarAction = {

apps/web/src/dialogs/buy-dialog/buy-dialog.tsx

@@ -19,30 +19,30 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Text, Flex, Button } from "@theme-ui/components";
-import * as Icon from "../../icons";
-import { useStore as useUserStore } from "../../../stores/user-store";
-import { useStore as useThemeStore } from "../../../stores/theme-store";
+import * as Icon from "../../components/icons";
+import { useStore as useUserStore } from "../../stores/user-store";
+import { useStore as useThemeStore } from "../../stores/theme-store";
 import Modal from "react-modal";
 import { useTheme } from "@emotion/react";
-import { ReactComponent as Rocket } from "../../../assets/rocket.svg";
-import { ReactComponent as WorkAnywhere } from "../../../assets/workanywhere.svg";
-import { ReactComponent as WorkLate } from "../../../assets/worklate.svg";
-import Field from "../../field";
-import { hardNavigate } from "../../../navigation";
+import { ReactComponent as Rocket } from "../../assets/rocket.svg";
+import { ReactComponent as WorkAnywhere } from "../../assets/workanywhere.svg";
+import { ReactComponent as WorkLate } from "../../assets/worklate.svg";
+import Field from "../../components/field";
+import { hardNavigate } from "../../navigation";
 import { Features } from "./features";
 import { PaddleCheckout } from "./paddle";
 import { Period, Plan, PricingInfo } from "./types";
 import { PLAN_METADATA, usePlans } from "./plans";
 import { formatPeriod, getFullPeriod, PlansList } from "./plan-list";
-import { showToast } from "../../../utils/toast";
-import { TaskManager } from "../../../common/task-manager";
-import { db } from "../../../common/db";
+import { showToast } from "../../utils/toast";
+import { TaskManager } from "../../common/task-manager";
+import { db } from "../../common/db";
 import { useCheckoutStore } from "./store";
 import { getCurrencySymbol } from "./helpers";
 import { Theme } from "@notesnook/theme";
-import { isMacStoreApp } from "../../../utils/platform";
-import { isUserSubscribed } from "../../../hooks/use-is-user-premium";
-import { SUBSCRIPTION_STATUS } from "../../../common/constants";
+import { isMacStoreApp } from "../../utils/platform";
+import { isUserSubscribed } from "../../hooks/use-is-user-premium";
+import { SUBSCRIPTION_STATUS } from "../../common/constants";
 
 type BuyDialogProps = {
   couponCode?: string;

apps/web/src/dialogs/buy-dialog/features.tsx

@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { Text, Flex, Box } from "@theme-ui/components";
-import { isMacStoreApp } from "../../../utils/platform";
+import { isMacStoreApp } from "../../utils/platform";
 import {
   Accent,
   Android,
@@ -67,7 +67,7 @@ import {
   MfaEmail,
   CustomToolbar,
   SyncOff
-} from "../../icons";
+} from "../../components/icons";
 
 type Feature = {
   id: string;

apps/web/src/dialogs/buy-dialog/paddle.tsx

@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { useEffect, useState, useRef, useCallback } from "react";
 import { Embed, Flex } from "@theme-ui/components";
-import Loader from "../../loader";
+import Loader from "../../components/loader";
 import {
   CheckoutData,
   CheckoutDataResponse,

apps/web/src/dialogs/buy-dialog/plan-list.tsx

@@ -18,8 +18,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { Text, Flex, Button } from "@theme-ui/components";
-import * as Icon from "../../icons";
-import { ReactComponent as Nomad } from "../../../assets/nomad.svg";
+import * as Icon from "../../components/icons";
+import { ReactComponent as Nomad } from "../../assets/nomad.svg";
 import { Period, Plan } from "./types";
 import { PLAN_METADATA, usePlans } from "./plans";
 import { useEffect } from "react";

apps/web/src/dialogs/buy-dialog/plans.ts

@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { useEffect, useState } from "react";
-import { isTesting } from "../../../utils/platform";
+import { isTesting } from "../../utils/platform";
 import { Period, Plan } from "./types";
 
 type PlanMetadata = {

apps/web/src/dialogs/confirm.tsx

@@ -19,9 +19,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { Box, Checkbox, Label, Text } from "@theme-ui/components";
 import { useRef } from "react";
-import { Perform } from "../../common/dialog-controller";
-import { mdToHtml } from "../../utils/md";
-import Dialog from "./dialog";
+import { Perform } from "../common/dialog-controller";
+import { mdToHtml } from "../utils/md";
+import Dialog from "../components/dialog";
 
 type Check = { text: string; default?: boolean };
 export type ConfirmDialogProps<TCheckId extends string> = {

apps/web/src/dialogs/email-change-dialog.tsx

@@ -19,12 +19,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { Flex, Text } from "@theme-ui/components";
 import { useCallback, useRef, useState } from "react";
-import { db } from "../../common/db";
-import { Perform } from "../../common/dialog-controller";
-import { useTimer } from "../../hooks/use-timer";
-import Field from "../field";
-import { Loading } from "../icons";
-import Dialog from "./dialog";
+import { db } from "../common/db";
+import { Perform } from "../common/dialog-controller";
+import { useTimer } from "../hooks/use-timer";
+import Field from "../components/field";
+import { Loading } from "../components/icons";
+import Dialog from "../components/dialog";
 
 type EmailChangeState = {
   newEmail: string;

apps/web/src/dialogs/email-verification-dialog.jsx

@@ -19,12 +19,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { useEffect } from "react";
 import { Flex, Text } from "@theme-ui/components";
-import Dialog from "./dialog";
-import { useStore as useUserStore } from "../../stores/user-store";
-import { db } from "../../common/db";
+import Dialog from "../components/dialog";
+import { useStore as useUserStore } from "../stores/user-store";
+import { db } from "../common/db";
 import { useState } from "react";
-import { useSessionState } from "../../hooks/use-session-state";
-import Accordion from "../accordion";
+import { useSessionState } from "../hooks/use-session-state";
+import Accordion from "../components/accordion";
 
 var interval = 0;
 function EmailVerificationDialog(props) {

apps/web/src/dialogs/feature-dialog.tsx

@@ -18,13 +18,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { Text, Flex } from "@theme-ui/components";
-import Dialog from "./dialog";
-import { getHomeRoute, hardNavigate } from "../../navigation";
-import { appVersion } from "../../utils/version";
-import Config from "../../utils/config";
-import { isTesting } from "../../utils/platform";
+import Dialog from "../components/dialog";
+import { getHomeRoute, hardNavigate } from "../navigation";
+import { appVersion } from "../utils/version";
+import Config from "../utils/config";
+import { isTesting } from "../utils/platform";
 import { useEffect } from "react";
-import { ArrowRight, Checkmark, Icon, Warn } from "../icons";
+import { ArrowRight, Checkmark, Icon, Warn } from "../components/icons";
 
 type CallToAction = {
   title: string;

apps/web/src/dialogs/issue-dialog.tsx

@@ -18,16 +18,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { Flex, Text } from "@theme-ui/components";
-import { appVersion } from "../../utils/version";
-import Field from "../field";
-import Dialog from "./dialog";
+import { appVersion } from "../utils/version";
+import Field from "../components/field";
+import Dialog from "../components/dialog";
 import platform from "platform";
 import { useState } from "react";
-import { confirm, Perform } from "../../common/dialog-controller";
-import { isUserPremium } from "../../hooks/use-is-user-premium";
+import { confirm, Perform } from "../common/dialog-controller";
+import { isUserPremium } from "../hooks/use-is-user-premium";
 import * as clipboard from "clipboard-polyfill/text";
-import { store as userstore } from "../../stores/user-store";
-import { db } from "../../common/db";
+import { store as userstore } from "../stores/user-store";
+import { db } from "../common/db";
 
 const PLACEHOLDERS = {
   title: "Briefly describe what happened",

apps/web/src/dialogs/item-dialog.jsx

@@ -18,8 +18,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { Box } from "@theme-ui/components";
-import Dialog from "./dialog";
-import Field from "../field";
+import Dialog from "../components/dialog";
+import Field from "../components/field";
 
 function ItemDialog(props) {
   return (

apps/web/src/dialogs/loading-dialog.tsx

@@ -19,8 +19,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { useEffect } from "react";
 import { Box, Text } from "@theme-ui/components";
-import Dialog from "./dialog";
-import * as Icon from "../icons";
+import Dialog from "../components/dialog";
+import * as Icon from "../components/icons";
 
 type LoadingDialogProps<T> = {
   onClose: (result: T | boolean) => void;

apps/web/src/dialogs/mfa/multi-factor-dialog.tsx

@@ -19,8 +19,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { useState } from "react";
 import { Text } from "@theme-ui/components";
-import { Perform } from "../../../common/dialog-controller";
-import Dialog from "../dialog";
+import { Perform } from "../../common/dialog-controller";
+import Dialog from "../../components/dialog";
 import {
   AuthenticatorOnNext,
   AuthenticatorTypeOnNext,

apps/web/src/dialogs/mfa/recovery-code-dialog.tsx

@@ -19,8 +19,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { useState } from "react";
 import { Text } from "@theme-ui/components";
-import { Perform } from "../../../common/dialog-controller";
-import Dialog from "../dialog";
+import { Perform } from "../../common/dialog-controller";
+import Dialog from "../../components/dialog";
 import { steps } from "./steps";
 import { AuthenticatorType } from "./types";
 

apps/web/src/dialogs/mfa/steps.tsx

@@ -27,7 +27,7 @@ import React, {
   useState
 } from "react";
 import { Text, Flex, Button, Box } from "@theme-ui/components";
-import { useSessionState } from "../../../hooks/use-session-state";
+import { useSessionState } from "../../hooks/use-session-state";
 import {
   Loading,
   MfaAuthenticator,
@@ -38,16 +38,16 @@ import {
   Copy,
   Refresh,
   Checkmark
-} from "../../icons";
-import Field from "../../field";
-import { exportToPDF } from "../../../common/export";
-import { useTimer } from "../../../hooks/use-timer";
+} from "../../components/icons";
+import Field from "../../components/field";
+import { exportToPDF } from "../../common/export";
+import { useTimer } from "../../hooks/use-timer";
 import { phone } from "phone";
-import { db } from "../../../common/db";
+import { db } from "../../common/db";
 import FileSaver from "file-saver";
 import * as clipboard from "clipboard-polyfill/text";
-import { ReactComponent as MFA } from "../../../assets/mfa.svg";
-import { ReactComponent as Fallback2FA } from "../../../assets/fallback2fa.svg";
+import { ReactComponent as MFA } from "../../assets/mfa.svg";
+import { ReactComponent as Fallback2FA } from "../../assets/fallback2fa.svg";
 import {
   Authenticator,
   AuthenticatorType,
@@ -56,10 +56,8 @@ import {
   StepComponentProps,
   OnNextFunction
 } from "./types";
-import { showMultifactorDialog } from "../../../common/dialog-controller";
-const QRCode = React.lazy(
-  () => import("../../../re-exports/react-qrcode-logo")
-);
+import { showMultifactorDialog } from "../../common/dialog-controller";
+const QRCode = React.lazy(() => import("../../re-exports/react-qrcode-logo"));
 
 export type Steps = typeof steps;
 export type FallbackSteps = typeof fallbackSteps;

apps/web/src/dialogs/mfa/types.ts

@@ -17,8 +17,8 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { Perform } from "../../../common/dialog-controller";
-import { Icon } from "../../icons";
+import { Perform } from "../../common/dialog-controller";
+import { Icon } from "../../components/icons";
 
 export type AuthenticatorType = "app" | "sms" | "email";
 

apps/web/src/dialogs/migration-dialog.tsx

@@ -20,12 +20,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { EVENTS } from "@notesnook/core/common";
 import { Text } from "@theme-ui/components";
 import { useCallback, useEffect, useState } from "react";
-import { createBackup } from "../../common";
-import { db } from "../../common/db";
-import { Perform } from "../../common/dialog-controller";
-import { TaskManager } from "../../common/task-manager";
-import { isDesktop } from "../../utils/platform";
-import Dialog from "./dialog";
+import { createBackup } from "../common";
+import { db } from "../common/db";
+import { Perform } from "../common/dialog-controller";
+import { TaskManager } from "../common/task-manager";
+import { isDesktop } from "../utils/platform";
+import Dialog from "../components/dialog";
 
 type MigrationProgressEvent = {
   collection: string;

apps/web/src/dialogs/move-note-dialog.tsx

@@ -19,17 +19,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { useCallback, useEffect, useState } from "react";
 import { Box, Button, Flex, Input, Text } from "@theme-ui/components";
-import * as Icon from "../icons";
-import { db } from "../../common/db";
-import Dialog from "./dialog";
-import { useStore, store } from "../../stores/notebook-store";
-import { store as notestore } from "../../stores/note-store";
-import { Perform } from "../../common/dialog-controller";
-import { showToast } from "../../utils/toast";
+import * as Icon from "../components/icons";
+import { db } from "../common/db";
+import Dialog from "../components/dialog";
+import { useStore, store } from "../stores/notebook-store";
+import { store as notestore } from "../stores/note-store";
+import { Perform } from "../common/dialog-controller";
+import { showToast } from "../utils/toast";
 import { pluralize } from "@notesnook/common";
-import { isMac } from "../../utils/platform";
+import { isMac } from "../utils/platform";
 import { create } from "zustand";
-import { FilteredList } from "../filtered-list";
+import { FilteredList } from "../components/filtered-list";
 
 type MoveDialogProps = { onClose: Perform; noteIds: string[] };
 type NotebookReference = {

apps/web/src/dialogs/onboarding-dialog.jsx

@@ -18,29 +18,29 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { Text, Flex, Button, Image, Box } from "@theme-ui/components";
-import Dialog from "./dialog";
-import * as Icon from "../icons";
-import { ReactComponent as E2E } from "../../assets/e2e.svg";
-import { ReactComponent as Note } from "../../assets/note2.svg";
-import { ReactComponent as Nomad } from "../../assets/nomad.svg";
-import { ReactComponent as WorkAnywhere } from "../../assets/workanywhere.svg";
-import { ReactComponent as Friends } from "../../assets/cause.svg";
-import LightUI from "../../assets/light1.png";
-import DarkUI from "../../assets/dark1.png";
-import GooglePlay from "../../assets/play.png";
-import AppleStore from "../../assets/apple.png";
-import { useStore as useThemeStore } from "../../stores/theme-store";
+import Dialog from "../components/dialog";
+import * as Icon from "../components/icons";
+import { ReactComponent as E2E } from "../assets/e2e.svg";
+import { ReactComponent as Note } from "../assets/note2.svg";
+import { ReactComponent as Nomad } from "../assets/nomad.svg";
+import { ReactComponent as WorkAnywhere } from "../assets/workanywhere.svg";
+import { ReactComponent as Friends } from "../assets/cause.svg";
+import LightUI from "../assets/light1.png";
+import DarkUI from "../assets/dark1.png";
+import GooglePlay from "../assets/play.png";
+import AppleStore from "../assets/apple.png";
+import { useStore as useThemeStore } from "../stores/theme-store";
 import { Checkbox, Label } from "@theme-ui/components";
 import { Features } from "../announcements/body";
-import { showBuyDialog } from "../../common/dialog-controller";
-import { TaskManager } from "../../common/task-manager";
-import { db } from "../../common/db";
-import { usePersistentState } from "../../hooks/use-persistent-state";
+import { showBuyDialog } from "../common/dialog-controller";
+import { TaskManager } from "../common/task-manager";
+import { db } from "../common/db";
+import { usePersistentState } from "../hooks/use-persistent-state";
 import AccentItem from "../accent-item";
 import { useCallback, useState } from "react";
-import Config from "../../utils/config";
+import Config from "../utils/config";
 import { getAllAccents } from "@notesnook/theme";
-import { isMacStoreApp } from "../../utils/platform";
+import { isMacStoreApp } from "../utils/platform";
 
 const newUserSteps = [
   {

apps/web/src/dialogs/password-dialog.jsx

@@ -19,8 +19,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { useState, useCallback, useMemo } from "react";
 import { Box, Text } from "@theme-ui/components";
-import Dialog from "./dialog";
-import Field from "../field";
+import Dialog from "../components/dialog";
+import Field from "../components/field";
 import { Checkbox, Label } from "@theme-ui/components";
 
 function PasswordDialog(props) {

apps/web/src/dialogs/progress-dialog.jsx

@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { useEffect, useState } from "react";
 import { Box, Flex, Text } from "@theme-ui/components";
-import Dialog from "./dialog";
+import Dialog from "../components/dialog";
 
 function ProgressDialog(props) {
   const [{ current, total, text }, setProgress] = useState({

apps/web/src/dialogs/prompt.tsx

@@ -18,9 +18,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { useRef } from "react";
-import { Perform } from "../../common/dialog-controller";
-import Field from "../field";
-import Dialog from "./dialog";
+import { Perform } from "../common/dialog-controller";
+import Field from "../components/field";
+import Dialog from "../components/dialog";
 
 export type PromptDialogProps = {
   onClose: Perform;

apps/web/src/dialogs/recovery-key-dialog.jsx

@@ -19,15 +19,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useEffect, useState } from "react";
 import { Text, Flex, Button } from "@theme-ui/components";
-import Dialog from "./dialog";
-import { db } from "../../common/db";
-import Logo from "../../assets/notesnook-logo.png";
+import Dialog from "../components/dialog";
+import { db } from "../common/db";
+import Logo from "../assets/notesnook-logo.png";
 import * as clipboard from "clipboard-polyfill/text";
 import { Suspense } from "react";
-import Config from "../../utils/config";
+import Config from "../utils/config";
 import FileSaver from "file-saver";
 
-const QRCode = React.lazy(() => import("../../re-exports/react-qrcode-logo"));
+const QRCode = React.lazy(() => import("../re-exports/react-qrcode-logo"));
 
 function RecoveryKeyDialog(props) {
   const [key, setKey] = useState();

apps/web/src/dialogs/reminder-dialog.jsx

@@ -18,9 +18,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { Text, Flex, Box } from "@theme-ui/components";
-import Dialog from "./dialog";
-import * as Icon from "../icons";
-import { showBuyDialog } from "../../common/dialog-controller";
+import Dialog from "../components/dialog";
+import * as Icon from "../components/icons";
+import { showBuyDialog } from "../common/dialog-controller";
 
 const features = [
   { icon: Icon.Sync, title: "Instant private sync" },

apps/web/src/dialogs/reminder-preview-dialog.tsx

@@ -17,17 +17,17 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { Perform } from "../../common/dialog-controller";
-import Dialog from "./dialog";
+import { Perform } from "../common/dialog-controller";
+import Dialog from "../components/dialog";
 import { Button, Flex, Text } from "@theme-ui/components";
-import { db } from "../../common/db";
+import { db } from "../common/db";
 import {
   formatReminderTime,
   Reminder
 } from "@notesnook/core/collections/reminders";
-import IconTag from "../icon-tag";
-import { Clock, Refresh } from "../icons";
-import Note from "../note";
+import IconTag from "../components/icon-tag";
+import { Clock, Refresh } from "../components/icons";
+import Note from "../components/note";
 
 export type ReminderPreviewDialogProps = {
   onClose: Perform;

apps/web/src/dialogs/settings/appearance-settings.ts

@@ -18,9 +18,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { SettingsGroup } from "./types";
-import { useStore as useSettingStore } from "../../../stores/setting-store";
-import { useStore as useThemeStore } from "../../../stores/theme-store";
-import { isDesktop } from "../../../utils/platform";
+import { useStore as useSettingStore } from "../../stores/setting-store";
+import { useStore as useThemeStore } from "../../stores/theme-store";
+import { isDesktop } from "../../utils/platform";
 import { AccentColors } from "./components/accent-colors";
 
 export const AppearanceSettings: SettingsGroup[] = [

apps/web/src/dialogs/settings/auth-settings.ts

@@ -18,12 +18,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { SettingsGroup } from "./types";
-import { useStore as useUserStore } from "../../../stores/user-store";
-import { verifyAccount } from "../../../common";
+import { useStore as useUserStore } from "../../stores/user-store";
+import { verifyAccount } from "../../common";
 import {
   show2FARecoveryCodesDialog,
   showMultifactorDialog
-} from "../../../common/dialog-controller";
+} from "../../common/dialog-controller";
 
 export const AuthenticationSettings: SettingsGroup[] = [
   {

apps/web/src/dialogs/settings/backup-export-settings.ts

@@ -18,15 +18,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { SettingsGroup } from "./types";
-import { useStore as useSettingStore } from "../../../stores/setting-store";
-import { useStore as useAppStore } from "../../../stores/app-store";
-import { useStore as useUserStore } from "../../../stores/user-store";
-import { isUserPremium } from "../../../hooks/use-is-user-premium";
-import { createBackup, importBackup, verifyAccount } from "../../../common";
-import { db } from "../../../common/db";
-import { exportNotes } from "../../../common/export";
-import { isDesktop, isTesting } from "../../../utils/platform";
-import { desktop } from "../../../common/desktop-bridge";
+import { useStore as useSettingStore } from "../../stores/setting-store";
+import { useStore as useAppStore } from "../../stores/app-store";
+import { useStore as useUserStore } from "../../stores/user-store";
+import { isUserPremium } from "../../hooks/use-is-user-premium";
+import { createBackup, importBackup, verifyAccount } from "../../common";
+import { db } from "../../common/db";
+import { exportNotes } from "../../common/export";
+import { isDesktop, isTesting } from "../../utils/platform";
+import { desktop } from "../../common/desktop-bridge";
 import { PATHS } from "@notesnook/desktop";
 
 export const BackupExportSettings: SettingsGroup[] = [

apps/web/src/dialogs/settings/behaviour-settings.ts

@@ -19,9 +19,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { DATE_FORMATS } from "@notesnook/core/common";
 import { SettingsGroup } from "./types";
-import { useStore as useSettingStore } from "../../../stores/setting-store";
+import { useStore as useSettingStore } from "../../stores/setting-store";
 import dayjs from "dayjs";
-import { isUserPremium } from "../../../hooks/use-is-user-premium";
+import { isUserPremium } from "../../hooks/use-is-user-premium";
 
 export const BehaviourSettings: SettingsGroup[] = [
   {

apps/web/src/dialogs/settings/components/accent-colors.tsx

@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { getAllAccents } from "@notesnook/theme";
 import { Flex } from "@theme-ui/components";
-import AccentItem from "../../../accent-item";
+import AccentItem from "../../../components/accent-item";
 
 export function AccentColors() {
   return (

apps/web/src/dialogs/settings/components/billing-history.tsx

@@ -18,10 +18,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { useEffect, useState } from "react";
-import { Loading } from "../../../icons";
+import { Loading } from "../../../components/icons";
 import { Box, Flex, Link, Text } from "@theme-ui/components";
 import { getFormattedDate } from "@notesnook/common";
-import { db } from "../../../../common/db";
+import { db } from "../../../common/db";
 
 type Transaction = {
   order_id: string;

apps/web/src/dialogs/settings/components/importer.tsx

@@ -17,14 +17,14 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { useStore as useAppStore } from "../../../../stores/app-store";
+import { useStore as useAppStore } from "../../../stores/app-store";
 import { useCallback, useRef, useState } from "react";
 import { useDropzone } from "react-dropzone";
 import { Button, Flex, Input, Link, Text } from "@theme-ui/components";
 import { pluralize } from "@notesnook/common";
-import { db } from "../../../../common/db";
-import { importFiles } from "../../../../utils/importer";
-import { CheckCircleOutline } from "../../../icons";
+import { db } from "../../../common/db";
+import { importFiles } from "../../../utils/importer";
+import { CheckCircleOutline } from "../../../components/icons";
 
 export function Importer() {
   const [isDone, setIsDone] = useState(false);

apps/web/src/dialogs/settings/components/spell-checker-languages.tsx

@@ -17,7 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { Language, useSpellChecker } from "../../../../hooks/use-spell-checker";
+import { Language, useSpellChecker } from "../../../hooks/use-spell-checker";
 import { Checkbox, Input, Label } from "@theme-ui/components";
 import { useCallback, useEffect, useState } from "react";
 import { deleteItem } from "@notesnook/core/utils/array";

apps/web/src/dialogs/settings/components/subscription-status.tsx

@@ -17,16 +17,16 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { useStore as useUserStore } from "../../../../stores/user-store";
+import { useStore as useUserStore } from "../../../stores/user-store";
 import { Button, Flex, Text } from "@theme-ui/components";
 import { useCallback, useMemo, useState } from "react";
 import dayjs from "dayjs";
-import { SUBSCRIPTION_STATUS } from "../../../../common/constants";
-import { db } from "../../../../common/db";
-import { confirm, showBuyDialog } from "../../../../common/dialog-controller";
-import { TaskManager } from "../../../../common/task-manager";
-import { showToast } from "../../../../utils/toast";
-import { Loading } from "../../../icons";
+import { SUBSCRIPTION_STATUS } from "../../../common/constants";
+import { db } from "../../../common/db";
+import { confirm, showBuyDialog } from "../../../common/dialog-controller";
+import { TaskManager } from "../../../common/task-manager";
+import { showToast } from "../../../utils/toast";
+import { Loading } from "../../../components/icons";
 import { Features } from "../../buy-dialog/features";
 
 const PROVIDER_MAP = {
@@ -147,21 +147,20 @@ export function SubscriptionStatus() {
                     positiveButtonText: "Yes"
                   });
                   if (cancelSubscription) {
-                    const result = await TaskManager.startTask({
+                    await TaskManager.startTask({
                       type: "modal",
                       title: "Cancelling your subscription",
                       subtitle: "Please wait...",
                       action: () => db.subscriptions?.cancel()
-                    });
-                    if (result instanceof Error) {
-                      showToast("error", result.message);
-                    } else {
+                    })
+                      .catch((e) => showToast("error", e.message))
+                      .then(() =>
                         showToast(
                           "success",
                           "Your subscription has been canceled."
+                        )
                       );
                   }
-                  }
                 }}
               >
                 Cancel subscription
@@ -177,21 +176,20 @@ export function SubscriptionStatus() {
                     positiveButtonText: "Yes"
                   });
                   if (refundSubscription) {
-                    const error = await TaskManager.startTask({
+                    await TaskManager.startTask({
                       type: "modal",
                       title: "Requesting refund for your subscription",
                       subtitle: "Please wait...",
                       action: () => db.subscriptions?.refund()
-                    });
-                    if (error instanceof Error) {
-                      showToast("error", error.message);
-                    } else {
+                    })
+                      .catch((e) => showToast("error", e.message))
+                      .then(() =>
                         showToast(
                           "success",
                           "Your refund has been issued. Please wait 24 hours before reaching out to us in case you do not receive your funds."
+                        )
                       );
                   }
-                  }
                 }}
               >
                 Request a refund

apps/web/src/dialogs/settings/components/tracking-details.tsx

@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { Box, Text } from "@theme-ui/components";
-import { ANALYTICS_EVENTS } from "../../../../utils/analytics";
+import { ANALYTICS_EVENTS } from "../../../utils/analytics";
 
 const events = Object.values(ANALYTICS_EVENTS);
 export function TrackingDetails() {

apps/web/src/dialogs/settings/components/user-profile.tsx

@@ -18,11 +18,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { Flex, Text } from "@theme-ui/components";
-import { User } from "../../../icons";
-import { useStore as useUserStore } from "../../../../stores/user-store";
+import { User } from "../../../components/icons";
+import { useStore as useUserStore } from "../../../stores/user-store";
 import ObjectID from "@notesnook/core/utils/object-id";
 import { getFormattedDate } from "@notesnook/common";
-import { SUBSCRIPTION_STATUS } from "../../../../common/constants";
+import { SUBSCRIPTION_STATUS } from "../../../common/constants";
 import dayjs from "dayjs";
 import { useMemo } from "react";
 

apps/web/src/dialogs/settings/desktop-integration-settings.ts

@@ -18,8 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { SettingsGroup } from "./types";
-import { useStore as useSettingStore } from "../../../stores/setting-store";
-import { type DesktopIntegrationSettings as DesktopIntegrationSettingsType } from "../../../hooks/use-desktop-integration";
+import { useStore as useSettingStore } from "../../stores/setting-store";
 
 export const DesktopIntegrationSettings: SettingsGroup[] = [
   {
@@ -63,7 +62,7 @@ export const DesktopIntegrationSettings: SettingsGroup[] = [
             listener
           ),
         isHidden: (desktopIntegration) =>
-          !(desktopIntegration as DesktopIntegrationSettingsType)?.autoStart,
+          !(desktopIntegration as any)?.autoStart,
         components: [
           {
             type: "toggle",

apps/web/src/dialogs/settings/editor-settings.ts

@@ -22,12 +22,12 @@ import {
   editorConfig,
   onEditorConfigChange,
   setEditorConfig
-} from "../../editor/context";
-import { useStore as useSettingStore } from "../../../stores/setting-store";
+} from "../../components/editor/context";
+import { useStore as useSettingStore } from "../../stores/setting-store";
 import { getFonts } from "@notesnook/editor";
-import { useSpellChecker } from "../../../hooks/use-spell-checker";
+import { useSpellChecker } from "../../hooks/use-spell-checker";
 import { SpellCheckerLanguages } from "./components/spell-checker-languages";
-import { isDesktop } from "../../../utils/platform";
+import { isDesktop } from "../../utils/platform";
 
 export const EditorSettings: SettingsGroup[] = [
   {

apps/web/src/dialogs/settings/index.tsx

@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { Flex, Text, Button, Input, Switch } from "@theme-ui/components";
-import Dialog from "../dialog";
+import Dialog from "../../components/dialog";
 import {
   About,
   Account,
@@ -37,21 +37,21 @@ import {
   Pro,
   ShieldLock,
   Sync
-} from "../../icons";
-import { Perform } from "../../../common/dialog-controller";
-import NavigationItem from "../../navigation-menu/navigation-item";
-import { FlexScrollContainer } from "../../scroll-container";
+} from "../../components/icons";
+import { Perform } from "../../common/dialog-controller";
+import NavigationItem from "../../components/navigation-menu/navigation-item";
+import { FlexScrollContainer } from "../../components/scroll-container";
 import { useCallback, useEffect, useState } from "react";
 import { SectionGroup, SectionKeys, Setting, SettingsGroup } from "./types";
 import { ProfileSettings } from "./profile-settings";
 import { AuthenticationSettings } from "./auth-settings";
-import { useIsUserPremium } from "../../../hooks/use-is-user-premium";
-import { store as userstore } from "../../../stores/user-store";
+import { useIsUserPremium } from "../../hooks/use-is-user-premium";
+import { store as userstore } from "../../stores/user-store";
 import { SyncSettings } from "./sync-settings";
 import { BehaviourSettings } from "./behaviour-settings";
 import { DesktopIntegrationSettings } from "./desktop-integration-settings";
 import { NotificationsSettings } from "./notifications-settings";
-import { isDesktop } from "../../../utils/platform";
+import { isDesktop } from "../../utils/platform";
 import { BackupExportSettings } from "./backup-export-settings";
 import { ImporterSettings } from "./importer-settings";
 import { VaultSettings } from "./vault-settings";

apps/web/src/dialogs/settings/notifications-settings.ts

@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { SettingsGroup } from "./types";
-import { useStore as useSettingStore } from "../../../stores/setting-store";
+import { useStore as useSettingStore } from "../../stores/setting-store";
 
 export const NotificationsSettings: SettingsGroup[] = [
   {

apps/web/src/dialogs/settings/other-settings.ts

@@ -18,13 +18,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { SettingsGroup } from "./types";
-import { appVersion } from "../../../utils/version";
+import { appVersion } from "../../utils/version";
 import { writeText } from "clipboard-polyfill";
-import { showToast } from "../../../utils/toast";
-import { checkForUpdate } from "../../../utils/updater";
-import { isMacStoreApp } from "../../../utils/platform";
-import { showIssueDialog } from "../../../common/dialog-controller";
-import { clearLogs, downloadLogs } from "../../../utils/logger";
+import { showToast } from "../../utils/toast";
+import { checkForUpdate } from "../../utils/updater";
+import { isMacStoreApp } from "../../utils/platform";
+import { showIssueDialog } from "../../common/dialog-controller";
+import { clearLogs, downloadLogs } from "../../utils/logger";
 
 export const AboutSettings: SettingsGroup[] = [
   {

apps/web/src/dialogs/settings/privacy-settings.ts

@@ -18,13 +18,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { SettingsGroup } from "./types";
-import { useStore as useSettingStore } from "../../../stores/setting-store";
-import { useStore as useUserStore } from "../../../stores/user-store";
-import { getPlatform, isDesktop } from "../../../utils/platform";
-import { db } from "../../../common/db";
-import { showPromptDialog } from "../../../common/dialog-controller";
-import Config from "../../../utils/config";
-import { showToast } from "../../../utils/toast";
+import { useStore as useSettingStore } from "../../stores/setting-store";
+import { useStore as useUserStore } from "../../stores/user-store";
+import { getPlatform, isDesktop } from "../../utils/platform";
+import { db } from "../../common/db";
+import { showPromptDialog } from "../../common/dialog-controller";
+import Config from "../../utils/config";
+import { showToast } from "../../utils/toast";
 import { TrackingDetails } from "./components/tracking-details";
 
 export const PrivacySettings: SettingsGroup[] = [

apps/web/src/dialogs/settings/profile-settings.ts

@@ -20,7 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import {
   useStore as useUserStore,
   store as userstore
-} from "../../../stores/user-store";
+} from "../../stores/user-store";
 import { SettingsGroup } from "./types";
 import {
   showClearSessionsConfirmation,
@@ -29,11 +29,11 @@ import {
   showLogoutConfirmation,
   showPasswordDialog,
   showRecoveryKeyDialog
-} from "../../../common/dialog-controller";
-import { db } from "../../../common/db";
-import { showToast } from "../../../utils/toast";
+} from "../../common/dialog-controller";
+import { db } from "../../common/db";
+import { showToast } from "../../utils/toast";
 import { UserProfile } from "./components/user-profile";
-import { verifyAccount } from "../../../common";
+import { verifyAccount } from "../../common";
 
 export const ProfileSettings: SettingsGroup[] = [
   {

apps/web/src/dialogs/settings/subscription-settings.ts

@@ -19,11 +19,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { SettingsGroup } from "./types";
 import { SubscriptionStatus } from "./components/subscription-status";
-import { showToast } from "../../../utils/toast";
-import { db } from "../../../common/db";
+import { showToast } from "../../utils/toast";
+import { db } from "../../common/db";
 import { BillingHistory } from "./components/billing-history";
-import { useStore as useUserStore } from "../../../stores/user-store";
-import { isUserSubscribed } from "../../../hooks/use-is-user-premium";
+import { useStore as useUserStore } from "../../stores/user-store";
+import { isUserSubscribed } from "../../hooks/use-is-user-premium";
 
 export const SubscriptionSettings: SettingsGroup[] = [
   {

apps/web/src/dialogs/settings/sync-settings.ts

@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { SettingsGroup } from "./types";
-import { useStore as useAppStore } from "../../../stores/app-store";
+import { useStore as useAppStore } from "../../stores/app-store";
 
 export const SyncSettings: SettingsGroup[] = [
   {

apps/web/src/dialogs/settings/types.ts

@@ -17,7 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { Icon } from "../../icons";
+import { Icon } from "../../components/icons";
 
 export type SectionKeys =
   | "profile"

apps/web/src/dialogs/settings/vault-settings.tsx

@@ -18,12 +18,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { SettingsGroup } from "./types";
-import { useStore as useAppStore } from "../../../stores/app-store";
-import { useStore as useNotesStore } from "../../../stores/note-store";
-import { hashNavigate } from "../../../navigation";
-import Vault from "../../../common/vault";
-import { showToast } from "../../../utils/toast";
-import { db } from "../../../common/db";
+import { useStore as useAppStore } from "../../stores/app-store";
+import { useStore as useNotesStore } from "../../stores/note-store";
+import { hashNavigate } from "../../navigation";
+import Vault from "../../common/vault";
+import { showToast } from "../../utils/toast";
+import { db } from "../../common/db";
 
 export const VaultSettings: SettingsGroup[] = [
   {

apps/web/src/dialogs/toolbar-config-dialog.tsx

@@ -18,8 +18,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { Button, Flex, FlexProps, Text } from "@theme-ui/components";
-import { Perform } from "../../common/dialog-controller";
-import Dialog from "./dialog";
+import { Perform } from "../common/dialog-controller";
+import Dialog from "../components/dialog";
 import {
   getAllTools,
   getToolDefinition,
@@ -51,8 +51,8 @@ import { CSS } from "@dnd-kit/utilities";
 import { createPortal } from "react-dom";
 import { getId } from "@notesnook/core/utils/id";
 import { Label, Radio } from "@theme-ui/components";
-import { db } from "../../common/db";
-import { useToolbarConfig } from "../editor/context";
+import { db } from "../common/db";
+import { useToolbarConfig } from "../components/editor/context";
 import {
   getAllPresets,
   getCurrentPreset,
@@ -60,10 +60,10 @@ import {
   getPresetTools,
   Preset,
   PresetId
-} from "../../common/toolbar-config";
-import { showToast } from "../../utils/toast";
-import { isUserPremium } from "../../hooks/use-is-user-premium";
-import { Pro } from "../icons";
+} from "../common/toolbar-config";
+import { showToast } from "../utils/toast";
+import { isUserPremium } from "../hooks/use-is-user-premium";
+import { Pro } from "../components/icons";
 export type ToolbarConfigDialogProps = {
   onClose: Perform;
 };

apps/web/src/views/auth.tsx

@@ -40,7 +40,7 @@ import { showToast } from "../utils/toast";
 import AuthContainer from "../components/auth-container";
 import { isTesting } from "../utils/platform";
 import { useTimer } from "../hooks/use-timer";
-import { AuthenticatorType } from "../components/dialogs/mfa/types";
+import { AuthenticatorType } from "../dialogs/mfa/types";
 import {
   showLoadingDialog,
   showLogoutConfirmation