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

@@ -0,0 +1,124 @@
+'use client'
+
+import { useState } from 'react'
+import { Check, X, Clock } from 'lucide-react'
+import PermissionBadge from './PermissionBadge'
+import { acceptInvitation, declineInvitation } from '@/lib/sharing-actions'
+import { useRouter } from 'next/navigation'
+
+interface InvitationCardProps {
+  invitation: {
+    id: string
+    permission: 'editor' | 'viewer'
+    createdAt: Date
+    list: {
+      id: string
+      title: string
+      color: string
+    }
+    inviter: {
+      name: string | null
+      email: string
+    }
+  }
+  onUpdate?: () => void
+}
+
+export default function InvitationCard({ invitation, onUpdate }: InvitationCardProps) {
+  const [isAccepting, setIsAccepting] = useState(false)
+  const [isDeclining, setIsDeclining] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const router = useRouter()
+
+  const handleAccept = async () => {
+    setIsAccepting(true)
+    setError(null)
+    
+    try {
+      await acceptInvitation(invitation.id)
+      onUpdate?.()
+      router.refresh()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to accept invitation')
+      setIsAccepting(false)
+    }
+  }
+
+  const handleDecline = async () => {
+    setIsDeclining(true)
+    setError(null)
+    
+    try {
+      await declineInvitation(invitation.id)
+      onUpdate?.()
+      router.refresh()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to decline invitation')
+      setIsDeclining(false)
+    }
+  }
+
+  const formatDate = (date: Date) => {
+    const now = new Date()
+    const diffMs = now.getTime() - new Date(date).getTime()
+    const diffMins = Math.floor(diffMs / 60000)
+    const diffHours = Math.floor(diffMs / 3600000)
+    const diffDays = Math.floor(diffMs / 86400000)
+
+    if (diffMins < 1) return 'Just now'
+    if (diffMins < 60) return `${diffMins}m ago`
+    if (diffHours < 24) return `${diffHours}h ago`
+    if (diffDays < 7) return `${diffDays}d ago`
+    return new Date(date).toLocaleDateString()
+  }
+
+  return (
+    <div className="bg-white rounded-lg border border-gray-200 p-4 sm:p-5 shadow-sm hover:shadow-md transition-shadow">
+      <div className="flex items-start gap-3 mb-3">
+        <div
+          className="w-3 h-3 rounded-full flex-shrink-0 mt-1"
+          style={{ backgroundColor: invitation.list.color }}
+        />
+        <div className="flex-1 min-w-0">
+          <h3 className="font-semibold text-gray-900 text-base sm:text-lg truncate">
+            {invitation.list.title}
+          </h3>
+          <p className="text-sm text-gray-600 mt-1">
+            Invited by {invitation.inviter.name || invitation.inviter.email}
+          </p>
+        </div>
+        <PermissionBadge permission={invitation.permission} size="sm" />
+      </div>
+
+      <div className="flex items-center gap-2 text-xs text-gray-500 mb-4">
+        <Clock size={12} />
+        <span>{formatDate(invitation.createdAt)}</span>
+      </div>
+
+      {error && (
+        <div className="mb-3 p-2 bg-red-50 border border-red-200 rounded text-sm text-red-700">
+          {error}
+        </div>
+      )}
+
+      <div className="flex gap-2">
+        <button
+          onClick={handleAccept}
+          disabled={isAccepting || isDeclining}
+          className="flex-1 flex items-center justify-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 active:bg-blue-800 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors text-sm font-medium"
+        >
+          <Check size={16} />
+          {isAccepting ? 'Accepting...' : 'Accept'}
+        </button>
+        <button
+          onClick={handleDecline}
+          disabled={isAccepting || isDeclining}
+          className="flex-1 flex items-center justify-center gap-2 px-4 py-2 bg-white text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-50 active:bg-gray-100 disabled:bg-gray-100 disabled:cursor-not-allowed transition-colors text-sm font-medium"
+        >
+          <X size={16} />
+          {isDeclining ? 'Declining...' : 'Decline'}
+        </button>
+      </div>
+    </div>
+  )
+}