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/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;