feat: implement tags folder as experimental feature

app/assets/javascripts/app.ts

@@ -10,6 +10,13 @@ declare global {
     _plans_url?: string;
     // eslint-disable-next-line camelcase
     _dashboard_url?: string;
+    // eslint-disable-next-line camelcase
+    _default_sync_server: string;
+    // eslint-disable-next-line camelcase
+    _enable_unfinished_features: boolean;
+    // eslint-disable-next-line camelcase
+    _websocket_url: string;
+    startApplication?: StartApplication;
   }
 }
 
@@ -82,6 +89,7 @@ import { ComponentViewDirective } from '@/components/ComponentView';
 import { TagsListDirective } from '@/components/TagsList';
 import { NotesViewDirective } from './components/NotesView';
 import { PinNoteButtonDirective } from '@/components/PinNoteButton';
+import { TagsSectionDirective } from './components/Tags/TagsSection';
 
 function reloadHiddenFirefoxTab(): boolean {
   /**
@@ -182,7 +190,8 @@ const startApplication: StartApplication = async function startApplication(
     .directive('notesListOptionsMenu', NotesListOptionsDirective)
     .directive('icon', IconDirective)
     .directive('noteTagsContainer', NoteTagsContainerDirective)
-    .directive('tags', TagsListDirective)
+    .directive('tagsList', TagsListDirective)
+    .directive('tagsSection', TagsSectionDirective)
     .directive('preferences', PreferencesDirective)
     .directive('purchaseFlow', PurchaseFlowDirective)
     .directive('notesView', NotesViewDirective)
@@ -216,11 +225,11 @@ const startApplication: StartApplication = async function startApplication(
 
 if (IsWebPlatform) {
   startApplication(
-    (window as any)._default_sync_server as string,
+    window._default_sync_server,
     new BrowserBridge(AppVersion),
-    (window as any)._enable_unfinished_features as boolean,
-    (window as any)._websocket_url as string
+    window._enable_unfinished_features,
+    window._websocket_url
   );
 } else {
-  (window as any).startApplication = startApplication;
+  window.startApplication = startApplication;
 }

app/assets/javascripts/components/Icon.tsx

@@ -24,8 +24,10 @@ import MarkdownIcon from '../../icons/ic-markdown.svg';
 import CodeIcon from '../../icons/ic-code.svg';
 
 import AccessibilityIcon from '../../icons/ic-accessibility.svg';
+import AddIcon from '../../icons/ic-add.svg';
 import HelpIcon from '../../icons/ic-help.svg';
 import KeyboardIcon from '../../icons/ic-keyboard.svg';
+import ListBulleted from '../../icons/ic-list-bulleted.svg';
 import ListedIcon from '../../icons/ic-listed.svg';
 import SecurityIcon from '../../icons/ic-security.svg';
 import SettingsIcon from '../../icons/ic-settings.svg';
@@ -53,11 +55,17 @@ import LockIcon from '../../icons/ic-lock.svg';
 import ArrowsSortUpIcon from '../../icons/ic-arrows-sort-up.svg';
 import ArrowsSortDownIcon from '../../icons/ic-arrows-sort-down.svg';
 import WindowIcon from '../../icons/ic-window.svg';
+import LinkOffIcon from '../../icons/ic-link-off.svg';
+
+import MenuArrowDownAlt from '../../icons/ic-menu-arrow-down-alt.svg';
+import MenuArrowRight from '../../icons/ic-menu-arrow-right.svg';
 
 import { toDirective } from './utils';
 import { FunctionalComponent } from 'preact';
 
 const ICONS = {
+  'menu-arrow-down-alt': MenuArrowDownAlt,
+  'menu-arrow-right': MenuArrowRight,
   'arrows-sort-up': ArrowsSortUpIcon,
   'arrows-sort-down': ArrowsSortDownIcon,
   lock: LockIcon,
@@ -94,8 +102,11 @@ const ICONS = {
   more: MoreIcon,
   tune: TuneIcon,
   accessibility: AccessibilityIcon,
+  add: AddIcon,
   help: HelpIcon,
   keyboard: KeyboardIcon,
+  'list-bulleted': ListBulleted,
+  'link-off': LinkOffIcon,
   listed: ListedIcon,
   security: SecurityIcon,
   settings: SettingsIcon,
@@ -111,7 +122,7 @@ const ICONS = {
   'menu-arrow-down': MenuArrowDownIcon,
   'menu-close': MenuCloseIcon,
   window: WindowIcon,
-  'premium-feature': PremiumFeatureIcon
+  'premium-feature': PremiumFeatureIcon,
 };
 
 export type IconType = keyof typeof ICONS;

app/assets/javascripts/components/Premium/index.ts

@@ -0,0 +1 @@
+export { usePremiumModal, PremiumModalProvider } from './usePremiumModal';

app/assets/javascripts/components/Premium/usePremiumModal.tsx

@@ -0,0 +1,49 @@
+import { FunctionalComponent } from 'preact';
+import { useCallback, useContext, useState } from 'preact/hooks';
+import { createContext } from 'react';
+import { PremiumFeaturesModal } from '../PremiumFeaturesModal';
+
+type PremiumModalContextData = {
+  activate: (featureName: string) => void;
+};
+
+const PremiumModalContext = createContext<PremiumModalContextData | null>(null);
+
+const PremiumModalProvider_ = PremiumModalContext.Provider;
+
+export const usePremiumModal = (): PremiumModalContextData => {
+  const value = useContext(PremiumModalContext);
+
+  if (!value) {
+    throw new Error('invalid PremiumModal context');
+  }
+
+  return value;
+};
+
+export const PremiumModalProvider: FunctionalComponent = ({ children }) => {
+  const [featureName, setFeatureName] = useState<null | string>(null);
+
+  const activate = setFeatureName;
+
+  const closeModal = useCallback(() => {
+    setFeatureName(null);
+  }, [setFeatureName]);
+
+  const showModal = !!featureName;
+
+  return (
+    <>
+      {showModal && (
+        <PremiumFeaturesModal
+          showModal={!!featureName}
+          featureName={featureName}
+          onClose={closeModal}
+        />
+      )}
+      <PremiumModalProvider_ value={{ activate }}>
+        {children}
+      </PremiumModalProvider_>
+    </>
+  );
+};

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

@@ -2,54 +2,56 @@ import { WebApplication } from '@/ui_models/application';
 import { FeatureIdentifier } from '@standardnotes/features';
 import { FeatureStatus } from '@standardnotes/snjs';
 import { FunctionComponent } from 'preact';
-import { useState } from 'preact/hooks';
+import { useCallback, useState } from 'preact/hooks';
 import { JSXInternal } from 'preact/src/jsx';
 import { Icon } from '../Icon';
 import { PremiumFeaturesModal } from '../PremiumFeaturesModal';
 import { Switch } from '../Switch';
 
 type Props = {
   application: WebApplication;
-  closeQuickSettingsMenu: () => void;
-  focusModeEnabled: boolean;
-  setFocusModeEnabled: (enabled: boolean) => void;
+  onToggle: (value: boolean) => void;
+  onClose: () => void;
+  isEnabled: boolean;
 };
 
 export const FocusModeSwitch: FunctionComponent<Props> = ({
   application,
-  closeQuickSettingsMenu,
-  focusModeEnabled,
-  setFocusModeEnabled,
+  onToggle,
+  onClose,
+  isEnabled,
 }) => {
   const [showUpgradeModal, setShowUpgradeModal] = useState(false);
-  const isEntitledToFocusMode =
+  const isEntitled =
     application.getFeatureStatus(FeatureIdentifier.FocusMode) ===
     FeatureStatus.Entitled;
 
-  const toggleFocusMode = (
-    e: JSXInternal.TargetedMouseEvent<HTMLButtonElement>
-  ) => {
-    e.preventDefault();
-    if (isEntitledToFocusMode) {
-      setFocusModeEnabled(!focusModeEnabled);
-      closeQuickSettingsMenu();
-    } else {
-      setShowUpgradeModal(true);
-    }
-  };
+  const toggle = useCallback(
+    (e: JSXInternal.TargetedMouseEvent<HTMLButtonElement>) => {
+      e.preventDefault();
+
+      if (isEntitled) {
+        onToggle(!isEnabled);
+        onClose();
+      } else {
+        setShowUpgradeModal(true);
+      }
+    },
+    [isEntitled, isEnabled, onToggle, setShowUpgradeModal, onClose]
+  );
 
   return (
     <>
       <button
         className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none justify-between"
-        onClick={toggleFocusMode}
+        onClick={toggle}
       >
         <div className="flex items-center">
           <Icon type="menu-close" className="color-neutral mr-2" />
           Focused Writing
         </div>
-        {isEntitledToFocusMode ? (
-          <Switch className="px-0" checked={focusModeEnabled} />
+        {isEntitled ? (
+          <Switch className="px-0" checked={isEnabled} />
         ) : (
           <div title="Premium feature">
             <Icon type="premium-feature" />

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

@@ -6,10 +6,10 @@ import {
   DisclosurePanel,
 } from '@reach/disclosure';
 import {
-  ContentType,
-  SNTheme,
   ComponentArea,
+  ContentType,
   SNComponent,
+  SNTheme,
 } from '@standardnotes/snjs';
 import { observer } from 'mobx-react-lite';
 import { FunctionComponent } from 'preact';
@@ -301,9 +301,9 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
           ))}
           <FocusModeSwitch
             application={application}
-            closeQuickSettingsMenu={closeQuickSettingsMenu}
-            focusModeEnabled={focusModeEnabled}
-            setFocusModeEnabled={setFocusModeEnabled}
+            onToggle={setFocusModeEnabled}
+            onClose={closeQuickSettingsMenu}
+            isEnabled={focusModeEnabled}
           />
           <div className="h-1px my-2 bg-border"></div>
           <button

app/assets/javascripts/components/RootTagDropZone.tsx

@@ -0,0 +1,64 @@
+import {
+  FeaturesState,
+  TAG_FOLDERS_FEATURE_NAME,
+} from '@/ui_models/app_state/features_state';
+import { TagsState } from '@/ui_models/app_state/tags_state';
+import { observer } from 'mobx-react-lite';
+import { useDrop } from 'react-dnd';
+import { Icon } from './Icon';
+import { usePremiumModal } from './Premium';
+import { DropItem, DropProps, ItemTypes } from './TagsListItem';
+
+type Props = {
+  tagsState: TagsState;
+  featuresState: FeaturesState;
+};
+
+export const RootTagDropZone: React.FC<Props> = observer(
+  ({ tagsState, featuresState }) => {
+    const premiumModal = usePremiumModal();
+    const isNativeFoldersEnabled = featuresState.enableNativeFoldersFeature;
+    const hasFolders = tagsState.hasFolders;
+
+    const [{ isOver, canDrop }, dropRef] = useDrop<DropItem, void, DropProps>(
+      () => ({
+        accept: ItemTypes.TAG,
+        canDrop: () => {
+          return true;
+        },
+        drop: (item) => {
+          if (!hasFolders) {
+            premiumModal.activate(TAG_FOLDERS_FEATURE_NAME);
+            return;
+          }
+
+          tagsState.assignParent(item.uuid, undefined);
+        },
+        collect: (monitor) => ({
+          isOver: !!monitor.isOver(),
+          canDrop: !!monitor.canDrop(),
+        }),
+      }),
+      [tagsState, hasFolders, premiumModal]
+    );
+
+    if (!isNativeFoldersEnabled || !hasFolders) {
+      return null;
+    }
+
+    return (
+      <div
+        ref={dropRef}
+        className={`root-drop ${canDrop ? 'active' : ''} ${
+          isOver ? 'is-over' : ''
+        }`}
+      >
+        <Icon className="color-neutral" type="link-off" />
+        <p className="content">
+          Move the tag here to <br />
+          remove it from its folder.
+        </p>
+      </div>
+    );
+  }
+);

app/assets/javascripts/components/Switch.tsx

@@ -1,12 +1,12 @@
-import { ComponentChildren, FunctionalComponent } from 'preact';
-import { useState } from 'preact/hooks';
-import { HTMLProps } from 'react';
 import {
   CustomCheckboxContainer,
   CustomCheckboxInput,
   CustomCheckboxInputProps,
 } from '@reach/checkbox';
 import '@reach/checkbox/styles.css';
+import { ComponentChildren, FunctionalComponent } from 'preact';
+import { useState } from 'preact/hooks';
+import { HTMLProps } from 'react';
 
 export type SwitchProps = HTMLProps<HTMLInputElement> & {
   checked?: boolean;
@@ -23,6 +23,10 @@ export const Switch: FunctionalComponent<SwitchProps> = (
   const [checkedState, setChecked] = useState(props.checked || false);
   const checked = props.checked ?? checkedState;
   const className = props.className ?? '';
+
+  const isDisabled = !!props.disabled;
+  const isActive = checked && !isDisabled;
+
   return (
     <label
       className={`sn-component flex justify-between items-center cursor-pointer px-3 ${className}`}
@@ -35,7 +39,8 @@ export const Switch: FunctionalComponent<SwitchProps> = (
           setChecked(event.target.checked);
           props.onChange?.(event.target.checked);
         }}
-        className={`sn-switch ${checked ? 'bg-info' : 'bg-neutral'}`}
+        className={`sn-switch ${isActive ? 'bg-info' : 'bg-neutral'}`}
+        disabled={props.disabled}
       >
         <CustomCheckboxInput
           {...({