From 6b925a4fc0c0d02e902e6f2ad432b4519c288c7c Mon Sep 17 00:00:00 2001
From: SkateSpots <skatespots>
Date: Sun, 27 Sep 2026 09:56:14 +0700
Subject: [PATCH] feat(crews): compact focus toggle group + mobile-only Near me
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace the eight wrapping filter chips with a single-row ToggleGroup
  (short labels; full names in tooltip/aria-label). Scrolls horizontally on
  mobile instead of wrapping to two rows.
- Near me is now mobile-only on the Crews page — it was clutter on desktop.
---
 src/pages/CrewsPage.tsx | 74 ++++++++++++++++++++++++-----------------
 1 file changed, 43 insertions(+), 31 deletions(-)

diff --git a/src/pages/CrewsPage.tsx b/src/pages/CrewsPage.tsx
index 92850bb..f49f366 100644
--- a/src/pages/CrewsPage.tsx
+++ b/src/pages/CrewsPage.tsx
@@ -5,6 +5,7 @@ import { Layout } from '@/components/Layout';
 import { LazyMount } from '@/components/LazyMount';
 import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { CrewRepBadge, CrewActivityPulse } from '@/components/CrewBadge';
@@ -18,15 +19,17 @@ 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';
 
-const FOCUS_FILTERS: { key: CrewFocus | 'all'; label: string; icon: typeof Users }[] = [
-  { key: 'all', label: 'All', icon: Users },
-  { key: 'builder', label: CREW_FOCUS_LABELS.builder, icon: HardHat },
-  { key: 'photo', label: CREW_FOCUS_LABELS.photo, icon: Camera },
-  { key: 'coaching', label: CREW_FOCUS_LABELS.coaching, icon: GraduationCap },
-  { key: 'art', label: CREW_FOCUS_LABELS.art, icon: Palette },
-  { key: 'music', label: CREW_FOCUS_LABELS.music, icon: Music },
-  { key: 'wellness', label: CREW_FOCUS_LABELS.wellness, icon: Dumbbell },
-  { key: 'mixed', label: CREW_FOCUS_LABELS.mixed, icon: Sparkles },
+// `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.
+const FOCUS_FILTERS: { key: CrewFocus | 'all'; label: string; short: string; icon: typeof Users }[] = [
+  { key: 'all', label: 'All', short: 'All', icon: Users },
+  { key: 'builder', label: CREW_FOCUS_LABELS.builder, short: 'DIY', icon: HardHat },
+  { key: 'photo', label: CREW_FOCUS_LABELS.photo, short: 'Photo', icon: Camera },
+  { key: 'coaching', label: CREW_FOCUS_LABELS.coaching, short: 'Coaching', icon: GraduationCap },
+  { key: 'art', label: CREW_FOCUS_LABELS.art, short: 'Art', icon: Palette },
+  { key: 'music', label: CREW_FOCUS_LABELS.music, short: 'Music', icon: Music },
+  { key: 'wellness', label: CREW_FOCUS_LABELS.wellness, short: 'Physio', icon: Dumbbell },
+  { key: 'mixed', label: CREW_FOCUS_LABELS.mixed, short: 'Mixed', icon: Sparkles },
 ];
 
 const FOCUS_BADGE_ICONS: Record<CrewFocus, typeof Users> = {
@@ -272,33 +275,42 @@ export default function CrewsPage() {
           )}
         </div>
 
-        {/* Filters row: focus chips + Near me */}
-        <div className="mb-5 flex flex-wrap items-center gap-2">
-          {FOCUS_FILTERS.map(({ key, label, icon: Icon }) => {
-            const active = focusFilter === key;
-            return (
-              <button
-                key={key}
-                type="button"
-                onClick={() => setFocusFilter(key)}
-                className={cn(
-                  'inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-bold transition-all active:scale-95',
-                  active
-                    ? 'border-teal-500 bg-teal-500 text-black'
-                    : 'border-white/10 bg-white/5 text-gray-300 hover:border-teal-500/40 hover:text-teal-300',
-                )}
-              >
-                <Icon className="h-3.5 w-3.5" />
-                {label}
-              </button>
-            );
-          })}
+        {/* Filters: one compact focus toggle group (scrolls on mobile) */}
+        <div className="mb-5 flex items-center gap-2">
+          <div className="scroll-container min-w-0 flex-1 overflow-x-auto">
+            <ToggleGroup
+              type="single"
+              value={focusFilter}
+              onValueChange={(v) => {
+                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"
+            >
+              {FOCUS_FILTERS.map(({ key, label, short, icon: Icon }) => (
+                <ToggleGroupItem
+                  key={key}
+                  value={key}
+                  title={label}
+                  aria-label={label}
+                  className={cn(
+                    'h-7 shrink-0 gap-1 rounded-lg px-2 text-xs font-bold text-gray-300 transition-colors',
+                    'hover:bg-white/5 hover:text-teal-300',
+                    'data-[state=on]:bg-teal-500 data-[state=on]:text-black data-[state=on]:hover:bg-teal-500 data-[state=on]:hover:text-black',
+                  )}
+                >
+                  <Icon className="h-3.5 w-3.5" />
+                  {short}
+                </ToggleGroupItem>
+              ))}
+            </ToggleGroup>
+          </div>
 
+          {/* Near me — mobile only; on desktop it was just clutter in this bar. */}
           <button
             type="button"
             onClick={handleNearMe}
             className={cn(
-              'ml-auto inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-bold transition-all active:scale-95',
+              'inline-flex shrink-0 items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-bold transition-all active:scale-95 sm:hidden',
               nearMe
                 ? 'border-orange-500 bg-orange-500 text-black'
                 : 'border-white/10 bg-white/5 text-gray-300 hover:border-orange-500/40 hover:text-orange-300',