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

@@ -0,0 +1,43 @@
+'use client'
+
+import { Shield, Eye, Edit3 } from 'lucide-react'
+
+type Permission = 'owner' | 'editor' | 'viewer'
+
+interface PermissionBadgeProps {
+  permission: Permission
+  size?: 'sm' | 'md'
+}
+
+export default function PermissionBadge({ permission, size = 'md' }: PermissionBadgeProps) {
+  const config = {
+    owner: {
+      icon: Shield,
+      label: 'Owner',
+      className: 'bg-purple-100 text-purple-700 border-purple-200',
+    },
+    editor: {
+      icon: Edit3,
+      label: 'Editor',
+      className: 'bg-blue-100 text-blue-700 border-blue-200',
+    },
+    viewer: {
+      icon: Eye,
+      label: 'Viewer',
+      className: 'bg-gray-100 text-gray-700 border-gray-200',
+    },
+  }
+
+  const { icon: Icon, label, className } = config[permission]
+  const sizeClasses = size === 'sm' ? 'text-xs px-2 py-1' : 'text-sm px-3 py-1.5'
+  const iconSize = size === 'sm' ? 12 : 14
+
+  return (
+    <span
+      className={`inline-flex items-center gap-1.5 rounded-full border font-medium ${className} ${sizeClasses}`}
+    >
+      <Icon size={iconSize} />
+      {label}
+    </span>
+  )
+}