fix: unable to add children to favorited tag; remove expand-on-click; render arrow before title (#1931)

packages/web/src/javascripts/Components/Tags/SmartViewsListItem.tsx

@@ -50,7 +50,7 @@ const SmartViewsListItem: FunctionComponent<Props> = ({ view, tagsState }) => {
   }, [setTitle, view])
 
   const selectCurrentTag = useCallback(async () => {
-    await tagsState.setSelectedTag(view, {
+    await tagsState.setSelectedTag(view, 'views', {
       userTriggered: true,
     })
     toggleAppPane(AppPaneId.Items)
@@ -86,7 +86,7 @@ const SmartViewsListItem: FunctionComponent<Props> = ({ view, tagsState }) => {
   }, [inputRef, isEditing])
 
   const onClickRename = useCallback(() => {
-    tagsState.editingTag = view
+    tagsState.setEditingTag(view)
   }, [tagsState, view])
 
   const onClickSave = useCallback(() => {

packages/web/src/javascripts/Components/Tags/TagContextMenu.tsx

@@ -40,8 +40,7 @@ const TagContextMenu = ({ navigationController, isEntitledToFolders, selectedTag
 
   const onClickRename = useCallback(() => {
     navigationController.setContextMenuOpen(false)
-    navigationController.editingFrom = navigationController.contextMenuOpenFrom
+    navigationController.setEditingTag(selectedTag)
-    navigationController.editingTag = selectedTag
   }, [navigationController, selectedTag])
 
   const onClickDelete = useCallback(() => {

packages/web/src/javascripts/Components/Tags/TagListSection.ts

@@ -1 +1 @@
-export type TagListSectionType = 'all' | 'favorites'
+export type TagListSectionType = 'views' | 'all' | 'favorites'

packages/web/src/javascripts/Components/Tags/TagsList.tsx

@@ -25,19 +25,18 @@ const TagsList: FunctionComponent<Props> = ({ viewControllerManager, type }: Pro
         x: posX,
         y: posY,
       })
-      viewControllerManager.navigationController.setContextMenuOpenFrom(type)
       viewControllerManager.navigationController.reloadContextMenuLayout()
       viewControllerManager.navigationController.setContextMenuOpen(true)
     },
-    [viewControllerManager, type],
+    [viewControllerManager],
   )
 
   const onContextMenu = useCallback(
     (tag: SNTag, posX: number, posY: number) => {
-      void viewControllerManager.navigationController.setSelectedTag(tag)
+      void viewControllerManager.navigationController.setSelectedTag(tag, type)
       openTagContextMenu(posX, posY)
     },
-    [viewControllerManager, openTagContextMenu],
+    [viewControllerManager, openTagContextMenu, type],
   )
 
   return (

packages/web/src/javascripts/Components/Tags/TagsListItem.tsx

@@ -47,24 +47,21 @@ export const TagsListItem: FunctionComponent<Props> = observer(
   ({ tag, type, features, navigationController: navigationController, level, onContextMenu, linkingController }) => {
     const { toggleAppPane } = useResponsiveAppPane()
 
-    const isFavorite = type === 'favorites'
-
     const [title, setTitle] = useState(tag.title || '')
     const [subtagTitle, setSubtagTitle] = useState('')
     const inputRef = useRef<HTMLInputElement>(null)
     const subtagInputRef = useRef<HTMLInputElement>(null)
     const menuButtonRef = useRef<HTMLAnchorElement>(null)
 
-    const isSelected = navigationController.selected === tag
+    const isSelected = navigationController.selected === tag && navigationController.selectedLocation === type
-    const isEditing = navigationController.editingTag === tag && navigationController.editingFrom === type
+    const isEditing = navigationController.editingTag === tag && navigationController.selectedLocation === type
-    const isAddingSubtag = navigationController.addingSubtagTo === tag
+    const isAddingSubtag = navigationController.addingSubtagTo === tag && navigationController.selectedLocation === type
     const noteCounts = computed(() => navigationController.getNotesCount(tag))
 
     const childrenTags = computed(() => navigationController.getChildren(tag)).get()
     const hasChildren = childrenTags.length > 0
 
     const hasFolders = features.hasFolders
-    const hasAtLeastOneFolder = navigationController.hasAtLeastOneFolder
 
     const premiumModal = usePremiumModal()
 
@@ -93,12 +90,11 @@ export const TagsListItem: FunctionComponent<Props> = observer(
     )
 
     const selectCurrentTag = useCallback(async () => {
-      await navigationController.setSelectedTag(tag, {
+      await navigationController.setSelectedTag(tag, type, {
         userTriggered: true,
       })
-      toggleChildren()
       toggleAppPane(AppPaneId.Items)
-    }, [navigationController, tag, toggleAppPane, toggleChildren])
+    }, [navigationController, tag, type, toggleAppPane])
 
     const onBlur = useCallback(() => {
       navigationController.save(tag, title).catch(console.error)
@@ -257,23 +253,14 @@ export const TagsListItem: FunctionComponent<Props> = observer(
           }}
         >
           <div className="tag-info" title={title} ref={dropRef}>
-            {hasAtLeastOneFolder && !isFavorite && (
+            <div onClick={selectCurrentTag} className={'tag-icon draggable mr-2'} ref={dragRef}>
-              <div className="tag-fold-container">
+              <Icon
-                <a
+                type={tag.iconString as IconType}
-                  role="button"
+                className={`cursor-pointer ${isSelected ? 'text-info' : 'text-neutral'}`}
-                  className={`tag-fold focus:shadow-inner ${showChildren ? 'opened' : 'closed'} ${
+              />
-                    !hasChildren ? 'invisible' : ''
-                  }`}
-                  onClick={hasChildren ? toggleChildren : undefined}
-                >
-                  <Icon className={'text-neutral'} type={showChildren ? 'menu-arrow-down-alt' : 'menu-arrow-right'} />
-                </a>
-              </div>
-            )}
-            <div className={'tag-icon draggable mr-2'} ref={dragRef}>
-              <Icon type={tag.iconString as IconType} className={`${isSelected ? 'text-info' : 'text-neutral'}`} />
             </div>
-            {isEditing ? (
+
+            {isEditing && (
               <input
                 className={
                   'title editing text-mobile-navigation-list-item focus:shadow-none focus:outline-none lg:text-navigation-list-item'
@@ -286,34 +273,60 @@ export const TagsListItem: FunctionComponent<Props> = observer(
                 spellCheck={false}
                 ref={inputRef}
               />
-            ) : (
-              <div
-                className={
-                  'title overflow-hidden text-left text-mobile-navigation-list-item focus:shadow-none focus:outline-none lg:text-navigation-list-item'
-                }
-                id={`react-tag-${tag.uuid}-${type}`}
-              >
-                {title}
-              </div>
             )}
+
+            {!isEditing && (
+              <>
+                <div
+                  className={
+                    'title overflow-hidden text-left text-mobile-navigation-list-item focus:shadow-none focus:outline-none lg:text-navigation-list-item'
+                  }
+                  id={`react-tag-${tag.uuid}-${type}`}
+                >
+                  {title}
+                </div>
+              </>
+            )}
+
             <div className="flex items-center">
-              <a
+              {isSelected && (
-                role="button"
+                <a
-                className={`mr-2 cursor-pointer border-0 bg-transparent hover:bg-contrast focus:shadow-inner ${
+                  role="button"
-                  isSelected ? 'visible' : 'invisible'
+                  className={'mr-2 cursor-pointer border-0 bg-transparent hover:bg-contrast focus:shadow-inner'}
+                  onClick={toggleContextMenu}
+                  ref={menuButtonRef}
+                >
+                  <Icon type="more" className="text-neutral" />
+                </a>
+              )}
+
+              {hasChildren && (
+                <a
+                  role="button"
+                  className={`focus:shadow-inner ${showChildren ? 'cursor-n-resize' : 'cursor-s-resize'} ${
+                    showChildren ? 'opened' : 'closed'
+                  } `}
+                  onClick={toggleChildren}
+                >
+                  <Icon
+                    className={'text-neutral'}
+                    size="large"
+                    type={showChildren ? 'menu-arrow-down-alt' : 'menu-arrow-right'}
+                  />
+                </a>
+              )}
+              <div
+                onClick={hasChildren ? toggleChildren : undefined}
+                className={`count text-base lg:text-sm ${
+                  hasChildren ? (showChildren ? 'cursor-n-resize' : 'cursor-s-resize') : ''
                 }`}
-                onClick={toggleContextMenu}
-                ref={menuButtonRef}
               >
-                <Icon type="more" className="text-neutral" />
+                {noteCounts.get()}
-              </a>
+              </div>
-              <div className="count text-base lg:text-sm">{noteCounts.get()}</div>
             </div>
           </div>
 
-          <div className={`meta ${hasAtLeastOneFolder ? 'with-folders' : ''}`}>
+          {tag.conflictOf && <div className="-mt-1 text-[0.625rem] font-bold text-danger">Conflicted Copy</div>}
-            {tag.conflictOf && <div className="-mt-1 text-[0.625rem] font-bold text-danger">Conflicted Copy</div>}
-          </div>
         </div>
         {isAddingSubtag && (
           <div

packages/web/src/javascripts/Controllers/LinkingController.tsx

@@ -247,7 +247,7 @@ export class LinkingController extends AbstractViewController {
     this.setIsLinkingPanelOpen(false)
 
     if (item instanceof SNTag) {
-      await this.navigationController.setSelectedTag(item)
+      await this.navigationController.setSelectedTag(item, 'all')
       return AppPaneId.Items
     } else if (item instanceof SNNote) {
       await this.navigationController.selectHomeNavigationView()

packages/web/src/javascripts/Controllers/Navigation/NavigationController.ts

@@ -2,9 +2,7 @@ import { confirmDialog, NavigationControllerPersistableValue } from '@standardno
 import { STRING_DELETE_TAG } from '@/Constants/Strings'
 import { MAX_MENU_SIZE_MULTIPLIER, MENU_MARGIN_FROM_APP_BORDER, SMART_TAGS_FEATURE_NAME } from '@/Constants/Constants'
 import {
-  ComponentAction,
   ContentType,
-  MessageData,
   SmartView,
   SNTag,
   TagMutator,
@@ -37,14 +35,13 @@ export class NavigationController
   starredTags: SNTag[] = []
   allNotesCount_ = 0
   selectedUuid: AnyTag['uuid'] | undefined = undefined
-  selected_: AnyTag | undefined
+  selected_: AnyTag | undefined = undefined
-  previouslySelected_: AnyTag | undefined
+  selectedLocation: TagListSectionType | undefined = undefined
-  editing_: SNTag | SmartView | undefined
+  previouslySelected_: AnyTag | undefined = undefined
-  editingFrom?: TagListSectionType
+  editing_: SNTag | SmartView | undefined = undefined
-  addingSubtagTo: SNTag | undefined
+  addingSubtagTo: SNTag | undefined = undefined
 
   contextMenuOpen = false
-  contextMenuOpenFrom?: TagListSectionType
   contextMenuPosition: { top?: number; left: number; bottom?: number } = {
     top: 0,
     left: 0,
@@ -58,24 +55,18 @@ export class NavigationController
     super(application, eventBus)
 
     this.tagsCountsState = new TagsCountsState(this.application)
-
-    this.selected_ = undefined
-    this.previouslySelected_ = undefined
-    this.editing_ = undefined
-    this.addingSubtagTo = undefined
-
     this.smartViews = this.application.items.getSmartViews()
 
     makeObservable(this, {
       tags: observable,
       starredTags: observable,
       smartViews: observable.ref,
-      hasAtLeastOneFolder: computed,
       allNotesCount_: observable,
       allNotesCount: computed,
       setAllNotesCount: action,
 
       selected_: observable,
+      selectedLocation: observable,
       previouslySelected_: observable.ref,
       previouslySelected: computed,
       editing_: observable.ref,
@@ -166,14 +157,14 @@ export class NavigationController
     )
   }
 
-  findAndSetTag = (uuid: UuidString) => {
+  private findAndSetTag = (uuid: UuidString) => {
     const tagToSelect = [...this.tags, ...this.smartViews].find((tag) => tag.uuid === uuid)
     if (tagToSelect) {
-      void this.setSelectedTag(tagToSelect)
+      void this.setSelectedTag(tagToSelect, isTag(tagToSelect) ? (tagToSelect.starred ? 'favorites' : 'all') : 'views')
     }
   }
 
-  selectHydratedTagOrDefault = () => {
+  private selectHydratedTagOrDefault = () => {
     if (this.selectedUuid && !this.selected_) {
       this.findAndSetTag(this.selectedUuid)
     }
@@ -237,7 +228,7 @@ export class NavigationController
     this.application.sync.sync().catch(console.error)
 
     runInAction(() => {
-      void this.setSelectedTag(createdTag as SNTag)
+      void this.setSelectedTag(createdTag as SNTag, 'all')
     })
 
     this.setAddingSubtagTo(undefined)
@@ -276,10 +267,6 @@ export class NavigationController
     this.addingSubtagTo = tag
   }
 
-  setContextMenuOpenFrom(section: TagListSectionType): void {
-    this.contextMenuOpenFrom = section
-  }
-
   setContextMenuOpen(open: boolean): void {
     this.contextMenuOpen = open
   }
@@ -436,7 +423,11 @@ export class NavigationController
     })
   }
 
-  public async setSelectedTag(tag: AnyTag | undefined, { userTriggered } = { userTriggered: false }) {
+  public async setSelectedTag(
+    tag: AnyTag | undefined,
+    location: TagListSectionType,
+    { userTriggered } = { userTriggered: false },
+  ) {
     if (tag && tag.conflictOf) {
       this.application.mutator
         .changeAndSaveItem(tag, (mutator) => {
@@ -445,7 +436,7 @@ export class NavigationController
         .catch(console.error)
     }
 
-    const selectionHasNotChanged = this.selected_?.uuid === tag?.uuid
+    const selectionHasNotChanged = this.selected_?.uuid === tag?.uuid && location === this.selectedLocation
 
     if (selectionHasNotChanged) {
       return
@@ -455,6 +446,7 @@ export class NavigationController
 
     await runInAction(async () => {
       this.setSelectedTagInstance(tag)
+      this.selectedLocation = location
 
       if (tag && this.application.items.isTemplateItem(tag)) {
         return
@@ -471,11 +463,11 @@ export class NavigationController
   }
 
   public async selectHomeNavigationView(): Promise<void> {
-    await this.setSelectedTag(this.homeNavigationView)
+    await this.setSelectedTag(this.homeNavigationView, 'views')
   }
 
   public async selectFilesView() {
-    await this.setSelectedTag(this.filesNavigationView)
+    await this.setSelectedTag(this.filesNavigationView, 'views')
   }
 
   get homeNavigationView(): SmartView {
@@ -525,9 +517,11 @@ export class NavigationController
     return this.editing_
   }
 
-  public set editingTag(editingTag: SNTag | SmartView | undefined) {
+  public setEditingTag(editingTag: SNTag | SmartView | undefined) {
-    this.editing_ = editingTag
+    runInAction(() => {
-    void this.setSelectedTag(editingTag)
+      this.editing_ = editingTag
+      void this.setSelectedTag(editingTag, this.selectedLocation || 'all')
+    })
   }
 
   public createNewTemplate() {
@@ -540,16 +534,15 @@ export class NavigationController
     const newTag = this.application.mutator.createTemplateItem(ContentType.Tag) as SNTag
 
     runInAction(() => {
+      this.selectedLocation = 'all'
       this.editing_ = newTag
-      this.editingFrom = 'all'
     })
   }
 
   public undoCreateNewTag() {
-    this.editingFrom = undefined
     this.editing_ = undefined
     const previousTag = this.previouslySelected_ || this.smartViews[0]
-    void this.setSelectedTag(previousTag)
+    void this.setSelectedTag(previousTag, this.selectedLocation || 'views')
   }
 
   public async remove(tag: SNTag | SmartView, userTriggered: boolean) {
@@ -562,7 +555,7 @@ export class NavigationController
     }
     if (shouldDelete) {
       this.application.mutator.deleteItem(tag).catch(console.error)
-      await this.setSelectedTag(this.smartViews[0])
+      await this.setSelectedTag(this.smartViews[0], 'views')
     }
   }
 
@@ -575,7 +568,6 @@ export class NavigationController
     const hasDuplicatedTitle = siblings.some((other) => other.title.toLowerCase() === newTitle.toLowerCase())
 
     runInAction(() => {
-      this.editingFrom = undefined
       this.editing_ = undefined
     })
 
@@ -607,7 +599,7 @@ export class NavigationController
       const insertedTag = await this.application.mutator.createTagOrSmartView(newTitle)
       this.application.sync.sync().catch(console.error)
       runInAction(() => {
-        void this.setSelectedTag(insertedTag as SNTag)
+        void this.setSelectedTag(insertedTag as SNTag, this.selectedLocation || 'views')
       })
     } else {
       await this.application.mutator.changeAndSaveItem<TagMutator>(tag, (mutator) => {
@@ -615,31 +607,6 @@ export class NavigationController
       })
     }
   }
-
-  public onFoldersComponentMessage(action: ComponentAction, data: MessageData): void {
-    if (action === ComponentAction.SelectItem) {
-      const item = data.item
-
-      if (!item) {
-        return
-      }
-
-      if (item.content_type === ContentType.Tag || item.content_type === ContentType.SmartView) {
-        const matchingTag = this.application.items.findItem(item.uuid)
-
-        if (matchingTag) {
-          void this.setSelectedTag(matchingTag as AnyTag)
-          return
-        }
-      }
-    } else if (action === ComponentAction.ClearSelection) {
-      void this.setSelectedTag(this.smartViews[0])
-    }
-  }
-
-  public get hasAtLeastOneFolder(): boolean {
-    return this.tags.some((tag) => !!this.application.items.getTagParent(tag))
-  }
 }
 
 class TagsCountsState {

packages/web/src/stylesheets/_navigation.scss

@@ -88,18 +88,9 @@ $content-horizontal-padding: 16px;
         display: flex;
         align-items: center;
         height: 100%;
-
-        &.draggable {
-          cursor: move;
-        }
-
-        &.propose-folders {
-          cursor: help;
-        }
       }
 
       > .title {
-        width: 80%;
         background-color: transparent;
         font-weight: 600;
         color: var(--navigation-item-text-color);
@@ -107,7 +98,6 @@ $content-horizontal-padding: 16px;
         border: none;
         cursor: pointer;
         text-overflow: ellipsis;
-        width: 75%;
         flex-grow: 1;
 
         // Required for Safari to avoid highlighting when dragging panel resizers
@@ -144,12 +134,6 @@ $content-horizontal-padding: 16px;
     }
 
     .meta {
-      padding-left: 3px;
-
-      &.with-folders {
-        padding-left: 25px;
-      }
-
       > .menu {
         font-size: 11px;
 
@@ -160,8 +144,8 @@ $content-horizontal-padding: 16px;
         opacity: 0.5;
         font-weight: bold;
         clear: both;
-        margin-top: 2px;
         margin-bottom: 2px;
+        padding-bottom: 5px;
 
         &:hover {
           opacity: 1;