feat: add tree library view system with grid/list/table modes and sorting

Implements Issue #34 - Tree Library Full View System

Backend Changes:
- Add sort_by parameter to GET /api/v1/trees endpoint
- Support 6 sorting options: usage_count, updated_at, created_at, name, name_desc, version
- Maintain backward compatibility (defaults to usage_count)
- Add comprehensive test for sorting functionality
- All 104 backend tests passing

Frontend Changes:
- Create ViewToggle component for switching between Grid/List/Table views
- Create SortDropdown component for 6 sort options
- Create TreeGridView component (extracted from TreeLibraryPage)
- Create TreeListView component (compact row-based layout)
- Create TreeTableView component (sortable table with columns)
- Update userPreferencesStore with view and sort preferences
- Update TreeFilters type to include sort_by parameter
- Update TreeLibraryPage to integrate new components
- View and sort preferences persist to localStorage

Features:
- Grid view: Best for discovery (default)
- List view: Best for quick scanning
- Table view: Best for sorting and comparison
- Responsive design: Mobile/tablet/desktop optimized
- Table view hides columns responsively
- Sortable table headers with visual indicators
- Smooth transitions and hover effects
- No layout shift when switching views

Testing:
- Backend: 104/104 tests pass
- Frontend: Build successful, no TypeScript errors
- All existing functionality preserved

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

frontend/src/components/library/SortDropdown.tsx

@@ -0,0 +1,44 @@
+import { ArrowUpDown } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+type SortBy = 'usage_count' | 'updated_at' | 'created_at' | 'name' | 'name_desc' | 'version'
+
+interface SortDropdownProps {
+  value: SortBy
+  onChange: (sortBy: SortBy) => void
+  className?: string
+}
+
+const sortOptions: { value: SortBy; label: string }[] = [
+  { value: 'usage_count', label: 'Most Used' },
+  { value: 'updated_at', label: 'Recently Updated' },
+  { value: 'created_at', label: 'Recently Created' },
+  { value: 'name', label: 'Name (A-Z)' },
+  { value: 'name_desc', label: 'Name (Z-A)' },
+  { value: 'version', label: 'Version Number' },
+]
+
+export function SortDropdown({ value, onChange, className }: SortDropdownProps) {
+  return (
+    <div className={cn('relative inline-flex items-center', className)}>
+      <span className="mr-2 flex items-center gap-1.5 text-sm text-muted-foreground">
+        <ArrowUpDown className="h-4 w-4" />
+        <span className="hidden sm:inline">Sort:</span>
+      </span>
+      <select
+        value={value}
+        onChange={(e) => onChange(e.target.value as SortBy)}
+        className={cn(
+          'rounded-md border border-input bg-background px-3 py-1.5 text-sm',
+          'text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary'
+        )}
+      >
+        {sortOptions.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  )
+}