feat: allows duplicate names in tags folder & smart tags (#792)

* feat: tag rendering & validation uses hierarchy

* feat: add prefix to autocomplete

app/assets/javascripts/components/AutocompleteTagResult.tsx

@@ -21,6 +21,9 @@ export const AutocompleteTagResult = observer(
 
     const tagResultRef = useRef<HTMLButtonElement>(null);
 
+    const title = tagResult.title;
+    const prefixTitle = appState.noteTags.getPrefixTitle(tagResult);
+
     const onTagOptionClick = async (tag: SNTag) => {
       await appState.noteTags.addTagToActiveNote(tag);
       appState.noteTags.clearAutocompleteSearch();
@@ -86,9 +89,10 @@ export const AutocompleteTagResult = observer(
       >
         <Icon type="hashtag" className="color-neutral mr-2 min-h-5 min-w-5" />
         <span className="whitespace-nowrap overflow-hidden overflow-ellipsis">
+          {prefixTitle && <span className="grey-2">{prefixTitle}</span>}
           {autocompleteSearchQuery === ''
-            ? tagResult.title
-            : tagResult.title
+            ? title
+            : title
                 .split(new RegExp(`(${autocompleteSearchQuery})`, 'gi'))
                 .map((substring, index) => (
                   <span

app/assets/javascripts/components/NoteTag.tsx

@@ -10,7 +10,9 @@ type Props = {
 };
 
 export const NoteTag = observer(({ appState, tag }: Props) => {
-  const { autocompleteInputFocused, focusedTagUuid, tags } = appState.noteTags;
+  const noteTags = appState.noteTags;
+
+  const { autocompleteInputFocused, focusedTagUuid, tags } = noteTags;
 
   const [showDeleteButton, setShowDeleteButton] = useState(false);
   const [tagClicked, setTagClicked] = useState(false);
@@ -18,6 +20,10 @@ export const NoteTag = observer(({ appState, tag }: Props) => {
 
   const tagRef = useRef<HTMLButtonElement>(null);
 
+  const title = tag.title;
+  const prefixTitle = noteTags.getPrefixTitle(tag);
+  const longTitle = noteTags.getLongTitle(tag);
+
   const deleteTag = () => {
     appState.noteTags.focusPreviousTag(tag);
     appState.noteTags.removeTagFromActiveNote(tag);
@@ -97,10 +103,12 @@ export const NoteTag = observer(({ appState, tag }: Props) => {
       onFocus={onFocus}
       onBlur={onBlur}
       tabIndex={getTabIndex()}
+      title={longTitle}
     >
       <Icon type="hashtag" className="sn-icon--small color-info mr-1" />
       <span className="whitespace-nowrap overflow-hidden overflow-ellipsis max-w-290px">
-        {tag.title}
+        {prefixTitle && <span className="color-grey-1">{prefixTitle}</span>}
+        {title}
       </span>
       {showDeleteButton && (
         <button