feat: Implement sidebar layout for filters

src/components/profile/RideCreditFilters.tsx

@@ -18,6 +18,7 @@ interface RideCreditFiltersProps {
   activeFilterCount: number;
   resultCount: number;
   totalCount: number;
+  compact?: boolean;
 }
 
 export function RideCreditFilters({
@@ -28,7 +29,11 @@ export function RideCreditFilters({
   activeFilterCount,
   resultCount,
   totalCount,
+  compact = false,
 }: RideCreditFiltersProps) {
+  const spacingClass = compact ? 'space-y-3' : 'space-y-4';
+  const sectionSpacing = compact ? 'space-y-2' : 'space-y-3';
+  const paddingClass = compact ? 'p-4' : 'pt-6';
   // Extract unique values from credits for filter options
   const filterOptions = useMemo(() => {
     const countries = new Set<string>();
@@ -99,7 +104,8 @@ export function RideCreditFilters({
   };
 
   return (
-    <div className="space-y-4">
+    <div className={compact ? 'p-4' : ''}>
+      <div className={spacingClass}>
         {/* Search Bar - Always Visible */}
         <div className="relative">
         <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
@@ -136,7 +142,7 @@ export function RideCreditFilters({
         </div>
 
         {/* Collapsible Filter Sections */}
-      <div className="space-y-2">
+        <div className={sectionSpacing}>
         {/* Geographic Filters */}
         <Collapsible>
           <CollapsibleTrigger className="flex items-center justify-between w-full p-3 rounded-lg bg-muted/50 hover:bg-muted transition-colors">
@@ -360,7 +366,7 @@ export function RideCreditFilters({
 
         {/* Active Filters Display */}
         {activeFilterCount > 0 && (
-        <div className="space-y-2">
+          <div className={sectionSpacing}>
           <div className="flex items-center justify-between">
             <span className="text-sm text-muted-foreground">
               Showing <strong>{resultCount}</strong> of <strong>{totalCount}</strong> credits
@@ -415,5 +421,6 @@ export function RideCreditFilters({
           </div>
         )}
       </div>
+    </div>
   );
 }

src/components/profile/RideCreditsManager.tsx

@@ -12,6 +12,7 @@ import { SortableRideCreditCard } from './SortableRideCreditCard';
 import { RideCreditFilters } from './RideCreditFilters';
 import { UserRideCredit } from '@/types/database';
 import { useRideCreditFilters } from '@/hooks/useRideCreditFilters';
+import { useIsMobile } from '@/hooks/use-mobile';
 import {
   DndContext,
   DragEndEvent,
@@ -37,6 +38,7 @@ export function RideCreditsManager({ userId }: RideCreditsManagerProps) {
   const [sortBy, setSortBy] = useState<'date' | 'count' | 'name' | 'custom'>('custom');
   const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
   const [isEditMode, setIsEditMode] = useState(false);
+  const isMobile = useIsMobile();
 
   // Use the filter hook
   const {
@@ -328,7 +330,32 @@ export function RideCreditsManager({ userId }: RideCreditsManagerProps) {
         </Card>
       </div>
 
-      {/* Filters */}
+      {/* Main Content Area with Sidebar */}
+      <div className="flex gap-6 items-start">
+        {/* Left Sidebar - Desktop Only */}
+        {!isMobile && (
+          <aside className="w-80 flex-shrink-0">
+            <div className="sticky top-4">
+              <div className="rounded-lg border bg-card">
+                <RideCreditFilters
+                  filters={filters}
+                  onFilterChange={updateFilter}
+                  onClearFilters={clearFilters}
+                  credits={credits}
+                  activeFilterCount={activeFilterCount}
+                  resultCount={displayCredits.length}
+                  totalCount={credits.length}
+                  compact={true}
+                />
+              </div>
+            </div>
+          </aside>
+        )}
+
+        {/* Right Content Area */}
+        <div className="flex-1 min-w-0 space-y-4">
+          {/* Mobile Filters - Collapsible Card */}
+          {isMobile && (
             <Card>
               <CardContent className="pt-6">
                 <RideCreditFilters
@@ -339,9 +366,11 @@ export function RideCreditsManager({ userId }: RideCreditsManagerProps) {
                   activeFilterCount={activeFilterCount}
                   resultCount={displayCredits.length}
                   totalCount={credits.length}
+                  compact={false}
                 />
               </CardContent>
             </Card>
+          )}
 
           {/* Controls */}
           <div className="flex flex-wrap gap-4 items-center justify-between">
@@ -468,6 +497,8 @@ export function RideCreditsManager({ userId }: RideCreditsManagerProps) {
               ))}
             </div>
           )}
+        </div>
+      </div>
 
       {/* Add Credit Dialog */}
       <AddRideCreditDialog