From 7c995edcc290ccb7c46332d6ec63127eee2334cb Mon Sep 17 00:00:00 2001 From: Dorian Date: Thu, 12 Feb 2026 12:35:46 +0000 Subject: [PATCH] Collapse algorithm filters into Algos dropdown - Replace inline filter buttons in desktop header with a single "Algos" dropdown that shows all discovery algorithms in a glass menu with checkmark for the active selection and a clear option - Button label dynamically shows the active algorithm name or defaults to "Algos" when no filter is active - Rename mobile tab bar "Filters" to "Algos" with a gear icon - Rename bottom sheet title to "Algos" to match Co-authored-by: Cursor --- src/components/AppHeader.vue | 86 +++++++++++++++++++++++++++++------- src/components/MobileNav.vue | 9 ++-- 2 files changed, 75 insertions(+), 20 deletions(-) diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue index 5f8b752..2af6566 100644 --- a/src/components/AppHeader.vue +++ b/src/components/AppHeader.vue @@ -13,15 +13,49 @@ My List - - + +
+ +
+
+
Discovery Algorithms
+ + +
+
+
@@ -205,23 +239,37 @@ const { const { activeAlgorithm, + activeAlgorithmLabel, algorithms, setAlgorithm: _setAlgorithm, } = useContentDiscovery() -/** - * When a filter is clicked, navigate to Films page if not already there, - * then apply the filter. - */ -function setAlgorithm(id: string) { +const dropdownOpen = ref(false) +const personaMenuOpen = ref(false) +const algosMenuOpen = ref(false) + +function toggleAlgosMenu() { + algosMenuOpen.value = !algosMenuOpen.value + dropdownOpen.value = false + personaMenuOpen.value = false +} + +/** Select an algorithm from the dropdown, navigate to Films if needed */ +function handleAlgoSelect(id: string) { _setAlgorithm(id as any) + algosMenuOpen.value = false if (route.path !== '/') { router.push('/') } } -const dropdownOpen = ref(false) -const personaMenuOpen = ref(false) +/** Clear the active filter from the dropdown */ +function handleAlgoClear() { + if (activeAlgorithm.value) { + _setAlgorithm(activeAlgorithm.value as any) // toggle off + } + algosMenuOpen.value = false +} const userInitials = computed(() => { if (nostrActiveName.value) return nostrActiveName.value[0].toUpperCase() @@ -261,11 +309,13 @@ function clearFilter() { function toggleDropdown() { dropdownOpen.value = !dropdownOpen.value personaMenuOpen.value = false + algosMenuOpen.value = false } function togglePersonaMenu() { personaMenuOpen.value = !personaMenuOpen.value dropdownOpen.value = false + algosMenuOpen.value = false } function navigateTo(path: string) { @@ -292,12 +342,16 @@ async function handleLogout() { const handleClickOutside = (event: MouseEvent) => { const dropdown = document.querySelector('.profile-dropdown') const personaDropdown = document.querySelector('.persona-dropdown') + const algosDropdown = document.querySelector('.algos-dropdown') if (dropdown && !dropdown.contains(event.target as Node)) { dropdownOpen.value = false } if (personaDropdown && !personaDropdown.contains(event.target as Node)) { personaMenuOpen.value = false } + if (algosDropdown && !algosDropdown.contains(event.target as Node)) { + algosMenuOpen.value = false + } } onMounted(() => { diff --git a/src/components/MobileNav.vue b/src/components/MobileNav.vue index bd160c3..0852cd2 100644 --- a/src/components/MobileNav.vue +++ b/src/components/MobileNav.vue @@ -5,7 +5,7 @@
-

Sort By

+

Algos

- +