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/TreeListView.tsx

@@ -0,0 +1,102 @@
+import { Link } from 'react-router-dom'
+import { Pencil, Globe, Lock } from 'lucide-react'
+import type { TreeListItem } from '@/types'
+import { TagBadges } from '@/components/common/TagBadges'
+import { AddToFolderMenu } from './AddToFolderMenu'
+import { cn } from '@/lib/utils'
+import { usePermissions } from '@/hooks/usePermissions'
+
+interface TreeListViewProps {
+  trees: TreeListItem[]
+  onStartSession: (treeId: string) => void
+  onTagClick: (tag: string) => void
+  onFolderCreated: (parentId?: string | null) => void
+  onDeleteTree: (tree: TreeListItem) => void
+}
+
+export function TreeListView({
+  trees,
+  onStartSession,
+  onTagClick,
+  onFolderCreated,
+}: TreeListViewProps) {
+  const { canEditTree } = usePermissions()
+
+  return (
+    <div className="space-y-2">
+      {trees.map((tree) => (
+        <div
+          key={tree.id}
+          className="flex items-center gap-4 rounded-lg border border-border bg-card p-4 transition-all hover:border-primary/30 hover:shadow-sm"
+        >
+          {/* Left: Name and Description */}
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2 mb-1">
+              <h3 className="font-semibold text-card-foreground truncate">{tree.name}</h3>
+              {tree.is_public ? (
+                <span title="Public tree">
+                  <Globe className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
+                </span>
+              ) : (
+                <span title="Private tree">
+                  <Lock className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
+                </span>
+              )}
+            </div>
+            <p className="text-sm text-muted-foreground truncate">
+              {tree.description || 'No description available'}
+            </p>
+          </div>
+
+          {/* Center: Category and Tags */}
+          <div className="hidden lg:flex items-center gap-2 min-w-0" style={{ maxWidth: '300px' }}>
+            {tree.category_info && (
+              <span className="rounded-full bg-secondary px-2 py-0.5 text-xs text-secondary-foreground whitespace-nowrap">
+                {tree.category_info.name}
+              </span>
+            )}
+            {tree.tags && tree.tags.length > 0 && (
+              <div className="min-w-0">
+                <TagBadges tags={tree.tags} maxVisible={2} onTagClick={onTagClick} />
+              </div>
+            )}
+          </div>
+
+          {/* Right: Metadata and Actions */}
+          <div className="flex items-center gap-3 flex-shrink-0">
+            <div className="hidden sm:flex flex-col items-end text-xs text-muted-foreground">
+              <span>v{tree.version}</span>
+              <span>{tree.usage_count} uses</span>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <AddToFolderMenu treeId={tree.id} onFolderCreated={onFolderCreated} />
+              {canEditTree({ author_id: tree.author_id, account_id: tree.account_id }) && (
+                <Link
+                  to={`/trees/${tree.id}/edit`}
+                  className={cn(
+                    'rounded-md border border-input p-1.5 text-muted-foreground',
+                    'hover:bg-accent hover:text-accent-foreground'
+                  )}
+                  title="Edit tree"
+                >
+                  <Pencil className="h-4 w-4" />
+                </Link>
+              )}
+              <button
+                type="button"
+                onClick={() => onStartSession(tree.id)}
+                className={cn(
+                  'rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground',
+                  'hover:bg-primary/90 whitespace-nowrap'
+                )}
+              >
+                Start
+              </button>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}