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

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.editingTag = selectedTag
+    navigationController.setEditingTag(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 isEditing = navigationController.editingTag === tag && navigationController.editingFrom === type
-    const isAddingSubtag = navigationController.addingSubtagTo === tag
+    const isSelected = navigationController.selected === tag && navigationController.selectedLocation === type
+    const isEditing = navigationController.editingTag === tag && navigationController.selectedLocation === type
+    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 className="tag-fold-container">
-                <a
-                  role="button"
-                  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 onClick={selectCurrentTag} className={'tag-icon draggable mr-2'} ref={dragRef}>
+              <Icon
+                type={tag.iconString as IconType}
+                className={`cursor-pointer ${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
-                role="button"
-                className={`mr-2 cursor-pointer border-0 bg-transparent hover:bg-contrast focus:shadow-inner ${
-                  isSelected ? 'visible' : 'invisible'
+              {isSelected && (
+                <a
+                  role="button"
+                  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" />
-              </a>
-              <div className="count text-base lg:text-sm">{noteCounts.get()}</div>
+                {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>}
-          </div>
+          {tag.conflictOf && <div className="-mt-1 text-[0.625rem] font-bold text-danger">Conflicted Copy</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()