feat: Improves Add Tag dropdown UI (#2936)

* feat: Improves Add Tag dropdown UI

* chore: change string color

* chore: render title prefix conditionally

* chore: cast to boolean

packages/web/src/javascripts/Components/NotesOptions/AddTagOption.tsx

@@ -78,30 +78,38 @@ const AddTagOption: FunctionComponent<Props> = ({
         overrideZIndex="z-modal"
       >
         <Menu a11yLabel="Tag selection menu" className="!px-0">
-          {navigationController.tags.map((tag) => (
+          {navigationController.tags.map((tag) => {
-            <MenuItem
+            const tagTitlePrefix = getTitleForLinkedTag(tag, application)?.titlePrefix
-              key={tag.uuid}
+            return (
-              onClick={() => {
+              <MenuItem
-                isTagLinkedToSelectedItems(tag) ? unlinkTagFromSelectedItems(tag) : linkTagToSelectedItems(tag)
+                key={tag.uuid}
-              }}
+                onClick={() => {
-            >
+                  isTagLinkedToSelectedItems(tag) ? unlinkTagFromSelectedItems(tag) : linkTagToSelectedItems(tag)
-              {tag.iconString && (
+                }}
-                <Icon
-                  type={tag.iconString as IconType}
-                  size={'custom'}
-                  className={'ml-0.5 mr-1.5 h-7 w-7 text-2xl text-neutral lg:h-6 lg:w-6 lg:text-lg'}
-                />
-              )}
-              <span
-                className={classNames(
-                  'overflow-hidden overflow-ellipsis whitespace-nowrap',
-                  isTagLinkedToSelectedItems(tag) ? 'font-bold' : '',
-                )}
               >
-                {getTitleForLinkedTag(tag, application)?.longTitle}
+                {tag.iconString && (
-              </span>
+                  <Icon
-            </MenuItem>
+                    type={tag.iconString as IconType}
-          ))}
+                    size={'custom'}
+                    className={'ml-0.5 mr-1.5 h-7 w-7 text-2xl text-neutral lg:h-6 lg:w-6 lg:text-lg'}
+                  />
+                )}
+                <div>
+                  {!!tagTitlePrefix && (
+                    <p className="overflow-hidden overflow-ellipsis whitespace-nowrap text-neutral">{tagTitlePrefix}</p>
+                  )}
+                  <p
+                    className={classNames(
+                      'overflow-hidden overflow-ellipsis whitespace-nowrap',
+                      isTagLinkedToSelectedItems(tag) ? 'font-bold' : '',
+                    )}
+                  >
+                    {tag.title}
+                  </p>
+                </div>
+              </MenuItem>
+            )
+          })}
         </Menu>
       </Popover>
     </div>