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

@@ -0,0 +1,110 @@
+import { Link } from 'react-router-dom'
+import { Pencil, Globe, Lock, Trash2 } 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 TreeGridViewProps {
+  trees: TreeListItem[]
+  onStartSession: (treeId: string) => void
+  onTagClick: (tag: string) => void
+  onFolderCreated: (parentId?: string | null) => void
+  onDeleteTree: (tree: TreeListItem) => void
+}
+
+export function TreeGridView({
+  trees,
+  onStartSession,
+  onTagClick,
+  onFolderCreated,
+  onDeleteTree,
+}: TreeGridViewProps) {
+  const { canEditTree, canDeleteTree } = usePermissions()
+
+  return (
+    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      {trees.map((tree) => (
+        <div
+          key={tree.id}
+          className="rounded-lg border border-border bg-card p-4 shadow-sm transition-all hover:-translate-y-0.5 hover:border-primary/30 hover:shadow-md sm:p-6"
+        >
+          <div className="mb-2 flex items-start justify-between gap-2">
+            <h3 className="font-semibold text-card-foreground">{tree.name}</h3>
+            <div className="flex items-center gap-2">
+              {tree.is_public ? (
+                <span title="Public tree">
+                  <Globe className="h-4 w-4 text-muted-foreground" />
+                </span>
+              ) : (
+                <span title="Private tree">
+                  <Lock className="h-4 w-4 text-muted-foreground" />
+                </span>
+              )}
+              {tree.category_info && (
+                <span className="rounded-full bg-secondary px-2 py-0.5 text-xs text-secondary-foreground">
+                  {tree.category_info.name}
+                </span>
+              )}
+            </div>
+          </div>
+          <p className="mb-3 text-sm text-muted-foreground line-clamp-2">
+            {tree.description || 'No description available'}
+          </p>
+
+          {/* Tags */}
+          {tree.tags && tree.tags.length > 0 && (
+            <div className="mb-3">
+              <TagBadges tags={tree.tags} maxVisible={3} onTagClick={onTagClick} />
+            </div>
+          )}
+
+          <div className="flex items-center justify-between">
+            <span className="text-xs text-muted-foreground">
+              v{tree.version} · {tree.usage_count} uses
+            </span>
+            <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-2 text-muted-foreground',
+                    'hover:bg-accent hover:text-accent-foreground'
+                  )}
+                  title="Edit tree"
+                >
+                  <Pencil className="h-4 w-4" />
+                </Link>
+              )}
+              {canDeleteTree() && (
+                <button
+                  type="button"
+                  onClick={() => onDeleteTree(tree)}
+                  className={cn(
+                    'rounded-md border border-input p-1.5 text-muted-foreground',
+                    'hover:bg-destructive/10 hover:text-destructive'
+                  )}
+                  title="Delete tree"
+                >
+                  <Trash2 className="h-4 w-4" />
+                </button>
+              )}
+              <button
+                type="button"
+                onClick={() => onStartSession(tree.id)}
+                className={cn(
+                  'rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground',
+                  'hover:bg-primary/90'
+                )}
+              >
+                Start Session
+              </button>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}