feat: implement tags folder as experimental feature (#788)

* feat: add tag folders support basics

* feat: add draggability to tags

* feat: add drag & drop draft

* feat: fold folders

* fix: do not select on fold / unfold tags

* style: clean the isValidTag call

* feat: add native folder toggle

* feat: add touch mobile support

* ui: add nicer design & icons

* style: render full-width tag items

* feat: nicer looking dropzone

* style: fix arguments

* fix: tag template rendering in list items

* feat: tag can be dragged over the whole item

* fix: cancel / reset title after save

* fix: disable drag completely when needed

* fix: invalid tag parents

* feat: add paying feature

* feat: with paid feature tooltip

* feat: tag has a plus feature

* feat: add premium modal

* style: simplif code

* refactor: extract feature_state & simplif code

* fix: icons and icons svg

* style: remove comment

* feat: tag folders naming

* feat: use the feature notification

* fix: tag folders copy

* style: variable names

* style: remove & clean comments

* refactor: remove is-mobile library

* feat: tags folder experimental (#10)

* feat: hide native folders behind experimental flag

* fix: better tags resizing

* fix: merge global window

* style: rename params

* refactor: remove level of indirection in feature toggle

* feat: recursively add tags to note on create (#9)

* fix: use add tags folder hierarchy & isTemplateItem (#13)

* fix: use new snjs add tag hierarchy

* fix: use new snjs isTemplateItem

* feat: tags folder premium (#774)

* feat: upgrade premium in tags section

refactor: move TagsSection to react

feat: show premium on Tag section

feat: keep drag and drop features always active

fix: drag & drop tweak with premium

feat: premium messages

fix: remove fill in svg icons

fix: change tag list color (temporary)

style: remove dead code

refactor: clarify names and modules

fix: draggable behind feature toggle

feat: add button in TagSection & design

* feat: fix features loading with app state (#775)

* fix: distinguish between app launch and start

* fix: update state for footer too

* fix: wait for application launch event

Co-authored-by: Laurent Senta <laurent@singulargarden.com>

* feat: tags folder with folder text design (#776)

* feat: add folder text

* fix: sn stylekit colors

* fix: root drop zone

* chore: upgrade stylekit

* fix: hide dropzone when feature is disabled

* chore: bump versions now that they are released

Co-authored-by: Mo <me@bitar.io>

* feat: tags folder design review (#785)

* fix: upgrade design after review

* fix: tweak dropzone

* fix: sync after assign parent

* fix: tsc error on build

* fix: vertical center the fold arrows

* fix: define our own hoist for react-dnd

* feat: hide fold when there are no folders

* fix: show children usability + resize UI

* fix: use old colors for now, theme compat

* fix: tweak alignment and add title

* fix: meta offset with folders

* fix: tweak tag size

* fix: observable setup

* fix: use link-off icon on dropzone

* fix: more tweak on text sizes

Co-authored-by: Mo <me@bitar.io>

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

@@ -2,7 +2,7 @@ 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';
@@ -10,46 +10,48 @@ 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