diff --git a/services/web/frontend/js/features/project-list/components/dropdown/projects-dropdown.tsx b/services/web/frontend/js/features/project-list/components/dropdown/projects-dropdown.tsx index f5e3c602e2..176676aad7 100644 --- a/services/web/frontend/js/features/project-list/components/dropdown/projects-dropdown.tsx +++ b/services/web/frontend/js/features/project-list/components/dropdown/projects-dropdown.tsx @@ -54,7 +54,7 @@ export function Item({ filter, text, leadingIcon, onClick }: ItemProps) { function ProjectsDropdown() { const { t } = useTranslation() const [title, setTitle] = useState(() => t('all_projects')) - const [view, setView] = useState<'top' | 'submenu'>('submenu') + const [view, setView] = useState<'top' | 'submenu' | 'tags'>('submenu') const { filter, selectedTagId, tags } = useProjectListContext() const isLibraryEnabled = isSplitTestEnabled('overleaf-library') const filterTranslations = useRef>({ @@ -81,7 +81,7 @@ function ProjectsDropdown() { } }, [filter, tags, selectedTagId, t]) - const submenuItems = ( + const filterItems = ( <>
  • @@ -100,6 +100,12 @@ function ProjectsDropdown() {
  • )} + + ) + + const submenuItems = ( + <> + {filterItems} {t('tags')}: @@ -112,7 +118,9 @@ function ProjectsDropdown() { onToggle={ isLibraryEnabled ? show => { - if (!show) { + if (show) { + setView(selectedTagId !== undefined ? 'tags' : 'submenu') + } else { setView('submenu') } } @@ -129,7 +137,12 @@ function ProjectsDropdown() { {title} - + {!isLibraryEnabled && submenuItems} {isLibraryEnabled && view === 'submenu' && ( <> @@ -147,7 +160,20 @@ function ProjectsDropdown() { {t('projects')} - {submenuItems} + {filterItems} +
  • + { + e.stopPropagation() + setView('tags') + }} + > + {t('tags')} + +
  • )} + {isLibraryEnabled && view === 'tags' && ( + <> +
  • + } + aria-label={t('back')} + onClick={e => { + e.stopPropagation() + setView('submenu') + }} + > + {t('tags')} + +
  • + + + )} {isLibraryEnabled && view === 'top' && (