feat: create sharing UI components (task 13)

- Add PermissionBadge component to display owner/editor/viewer roles
- Add InvitationCard component for accepting/declining invitations
- Add CollaboratorList component to manage list collaborators
- Add ShareListModal component for inviting users and viewing access
- Add invitations page to view and manage pending invitations

Requirements: 5.1, 5.4, 8.1, 8.2

components/CollaboratorList.tsx

@@ -0,0 +1,155 @@
+'use client'
+
+import { useState } from 'react'
+import { UserMinus, ChevronDown } from 'lucide-react'
+import PermissionBadge from './PermissionBadge'
+import { updateCollaboratorPermission, removeCollaborator } from '@/lib/sharing-actions'
+import { useRouter } from 'next/navigation'
+
+interface Collaborator {
+  id: string
+  permission: 'editor' | 'viewer'
+  user: {
+    id: string
+    name: string | null
+    email: string
+  }
+}
+
+interface CollaboratorListProps {
+  listId: string
+  collaborators: Collaborator[]
+  isOwner: boolean
+  ownerId: string
+  ownerName: string | null
+  ownerEmail: string
+}
+
+export default function CollaboratorList({
+  listId,
+  collaborators,
+  isOwner,
+  ownerId,
+  ownerName,
+  ownerEmail,
+}: CollaboratorListProps) {
+  const [loadingStates, setLoadingStates] = useState<Record<string, boolean>>({})
+  const [error, setError] = useState<string | null>(null)
+  const router = useRouter()
+
+  const handlePermissionChange = async (collaboratorId: string, newPermission: 'editor' | 'viewer') => {
+    setLoadingStates(prev => ({ ...prev, [collaboratorId]: true }))
+    setError(null)
+
+    try {
+      await updateCollaboratorPermission(listId, collaboratorId, newPermission)
+      router.refresh()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to update permission')
+    } finally {
+      setLoadingStates(prev => ({ ...prev, [collaboratorId]: false }))
+    }
+  }
+
+  const handleRemove = async (collaboratorId: string) => {
+    if (!confirm('Are you sure you want to remove this collaborator?')) {
+      return
+    }
+
+    setLoadingStates(prev => ({ ...prev, [collaboratorId]: true }))
+    setError(null)
+
+    try {
+      await removeCollaborator(listId, collaboratorId)
+      router.refresh()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to remove collaborator')
+      setLoadingStates(prev => ({ ...prev, [collaboratorId]: false }))
+    }
+  }
+
+  return (
+    <div className="space-y-3">
+      {error && (
+        <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
+          {error}
+        </div>
+      )}
+
+      {/* Owner */}
+      <div className="flex items-center justify-between p-3 bg-purple-50 border border-purple-100 rounded-lg">
+        <div className="flex-1 min-w-0">
+          <p className="font-medium text-gray-900 truncate">
+            {ownerName || ownerEmail}
+          </p>
+          {ownerName && (
+            <p className="text-sm text-gray-600 truncate">{ownerEmail}</p>
+          )}
+        </div>
+        <PermissionBadge permission="owner" size="sm" />
+      </div>
+
+      {/* Collaborators */}
+      {collaborators.length === 0 ? (
+        <p className="text-sm text-gray-500 text-center py-4">
+          No collaborators yet. Share this list to collaborate!
+        </p>
+      ) : (
+        collaborators.map((collaborator) => (
+          <div
+            key={collaborator.id}
+            className="flex items-center justify-between gap-3 p-3 bg-white border border-gray-200 rounded-lg"
+          >
+            <div className="flex-1 min-w-0">
+              <p className="font-medium text-gray-900 truncate">
+                {collaborator.user.name || collaborator.user.email}
+              </p>
+              {collaborator.user.name && (
+                <p className="text-sm text-gray-600 truncate">
+                  {collaborator.user.email}
+                </p>
+              )}
+            </div>
+
+            <div className="flex items-center gap-2">
+              {isOwner ? (
+                <>
+                  <div className="relative">
+                    <select
+                      value={collaborator.permission}
+                      onChange={(e) =>
+                        handlePermissionChange(
+                          collaborator.id,
+                          e.target.value as 'editor' | 'viewer'
+                        )
+                      }
+                      disabled={loadingStates[collaborator.id]}
+                      className="appearance-none bg-white border border-gray-300 rounded-lg pl-3 pr-8 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed cursor-pointer"
+                    >
+                      <option value="editor">Editor</option>
+                      <option value="viewer">Viewer</option>
+                    </select>
+                    <ChevronDown
+                      size={14}
+                      className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 pointer-events-none"
+                    />
+                  </div>
+                  <button
+                    onClick={() => handleRemove(collaborator.id)}
+                    disabled={loadingStates[collaborator.id]}
+                    className="p-2 text-red-600 hover:bg-red-50 active:bg-red-100 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                    aria-label="Remove collaborator"
+                  >
+                    <UserMinus size={18} />
+                  </button>
+                </>
+              ) : (
+                <PermissionBadge permission={collaborator.permission} size="sm" />
+              )}
+            </div>
+          </div>
+        ))
+      )}
+    </div>
+  )
+}