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

app/invitations/page.tsx

@@ -0,0 +1,100 @@
+import { auth } from '@/auth'
+import { redirect } from 'next/navigation'
+import { getInvitations } from '@/lib/sharing-actions'
+import InvitationCard from '@/components/InvitationCard'
+import { Mail } from 'lucide-react'
+import Link from 'next/link'
+
+type Invitation = {
+  id: string
+  email: string
+  permission: 'editor' | 'viewer'
+  status: string
+  createdAt: Date
+  expiresAt: Date
+  listId: string
+  inviterId: string
+  list: {
+    id: string
+    title: string
+    color: string
+  }
+  inviter: {
+    id: string
+    name: string | null
+    email: string
+  }
+}
+
+export default async function InvitationsPage() {
+  const session = await auth()
+  
+  if (!session?.user) {
+    redirect('/auth/login')
+  }
+
+  const invitations = await getInvitations() as Invitation[]
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="max-w-4xl mx-auto px-4 sm:px-6 py-6 sm:py-8">
+        {/* Header */}
+        <div className="mb-6 sm:mb-8">
+          <Link
+            href="/"
+            className="inline-flex items-center text-sm text-gray-600 hover:text-gray-900 mb-4"
+          >
+            ← Back to Lists
+          </Link>
+          <div className="flex items-center gap-3">
+            <div className="p-2 bg-blue-100 rounded-lg">
+              <Mail size={24} className="text-blue-600" />
+            </div>
+            <div>
+              <h1 className="text-2xl sm:text-3xl font-bold text-gray-900">
+                Invitations
+              </h1>
+              <p className="text-gray-600 mt-1">
+                {invitations.length === 0
+                  ? 'No pending invitations'
+                  : `${invitations.length} pending ${invitations.length === 1 ? 'invitation' : 'invitations'}`}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Invitations List */}
+        {invitations.length === 0 ? (
+          <div className="bg-white rounded-lg border border-gray-200 p-8 sm:p-12 text-center">
+            <div className="max-w-sm mx-auto">
+              <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                <Mail size={32} className="text-gray-400" />
+              </div>
+              <h2 className="text-xl font-semibold text-gray-900 mb-2">
+                No Invitations
+              </h2>
+              <p className="text-gray-600 mb-6">
+                When someone shares a list with you, you'll see the invitation here.
+              </p>
+              <Link
+                href="/"
+                className="inline-block px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 active:bg-blue-800 transition-colors font-medium"
+              >
+                Go to My Lists
+              </Link>
+            </div>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            {invitations.map((invitation) => (
+              <InvitationCard
+                key={invitation.id}
+                invitation={invitation}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}