diff --git a/src/pages/CrewsPage.tsx b/src/pages/CrewsPage.tsx index f49f366..1178a1e 100644 --- a/src/pages/CrewsPage.tsx +++ b/src/pages/CrewsPage.tsx @@ -11,13 +11,14 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; import { CrewRepBadge, CrewActivityPulse } from '@/components/CrewBadge'; import { EmptyState as SharedEmptyState } from '@/components/EmptyState'; import { useCrews } from '@/hooks/useCrews'; +import { useLocalStorage } from '@/hooks/useLocalStorage'; import { useCrewsActivity, crewCoordinate } from '@/hooks/useCrewActivity'; import { useGeolocation } from '@/hooks/useGeolocation'; import { crewAccent, crewDistanceKm, formatDistance, type LatLng } from '@/lib/crewHelpers'; import { CREW_VIBE_LABELS, CREW_FOCUS_LABELS, type SkateCrew, type CrewFocus } from '@/lib/types'; import type { CrewActivity } from '@/lib/crewHelpers'; import { cn } from '@/lib/utils'; -import { Users, Plus, Search, MapPin, X, HardHat, Camera, GraduationCap, Sparkles, Navigation, Loader2, Music, Palette, Dumbbell, Film } from 'lucide-react'; +import { Users, Plus, Search, MapPin, X, HardHat, Camera, GraduationCap, Sparkles, Navigation, Loader2, Music, Palette, Dumbbell, Film, ChevronDown } from 'lucide-react'; // `label` is the full name (used for the tooltip + screen readers); `short` is // what the compact toggle shows, to keep the filter bar to a single row. @@ -159,6 +160,8 @@ export default function CrewsPage() { const [query, setQuery] = useState(''); const [focusFilter, setFocusFilter] = useState('all'); const [nearMe, setNearMe] = useState(false); + // Remembered preference: compact short labels vs. the full filter names. + const [filtersExpanded, setFiltersExpanded] = useLocalStorage('crews-filters-expanded', false); const userLoc: LatLng | null = geo.coords; @@ -275,16 +278,19 @@ export default function CrewsPage() { )} - {/* Filters: one compact focus toggle group (scrolls on mobile) */} + {/* Filters: compact focus toggle group; "More" expands to full names */}
-
+
{ if (v) setFocusFilter(v as CrewFocus | 'all'); }} - className="inline-flex w-max items-center gap-0.5 rounded-xl border border-white/10 bg-white/[0.04] p-1" + className={cn( + 'items-center justify-start gap-0.5 rounded-xl border border-white/10 bg-white/[0.04] p-1', + filtersExpanded ? 'flex flex-wrap' : 'inline-flex w-max', + )} > {FOCUS_FILTERS.map(({ key, label, short, icon: Icon }) => ( - {short} + {filtersExpanded ? label : short} ))}
+ {/* Expand/collapse the full filter names (remembered across visits) */} + + {/* Near me — mobile only; on desktop it was just clutter in this bar. */}