Multiuser support (#60)

components/WishlistItem.tsx

@@ -1,4 +1,8 @@
-import { WishlistItemType } from '@/lib/types'
+import { WishlistItemType, User, Permission } from '@/lib/types'
+import { useAtom } from 'jotai'
+import { usersAtom } from '@/lib/atoms'
+import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar'
+import { useHelpers } from '@/lib/client-helpers'
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
 import ReactMarkdown from 'react-markdown'
 import { Button } from '@/components/ui/button'
@@ -24,6 +28,25 @@ interface WishlistItemProps {
   isArchived?: boolean
 }
 
+const renderUserAvatars = (item: WishlistItemType, currentUser: User | null, usersData: { users: User[] }) => {
+  if (!item.userIds || item.userIds.length <= 1) return null;
+  
+  return (
+    <div className="flex -space-x-2 ml-2 flex-shrink-0">
+      {item.userIds?.filter((u) => u !== currentUser?.id).map(userId => {
+        const user = usersData.users.find(u => u.id === userId)
+        if (!user) return null
+        return (
+          <Avatar key={user.id} className="h-6 w-6">
+            <AvatarImage src={user?.avatarPath && `/api/avatars/${user.avatarPath.split('/').pop()}` || ""} />
+            <AvatarFallback>{user.username[0]}</AvatarFallback>
+          </Avatar>
+        )
+      })}
+    </div>
+  );
+};
+
 export default function WishlistItem({
   item,
   onEdit,
@@ -35,6 +58,11 @@ export default function WishlistItem({
   isHighlighted,
   isRecentlyRedeemed
 }: WishlistItemProps) {
+  const { currentUser, hasPermission } = useHelpers()
+  const canWrite = hasPermission('wishlist', 'write')
+  const canInteract = hasPermission('wishlist', 'interact')
+  const [usersData] = useAtom(usersAtom)
+  
   return (
     <Card
       id={`wishlist-${item.id}`}
@@ -53,11 +81,16 @@ export default function WishlistItem({
             </span>
           )}
         </div>
-        {item.description && (
-          <CardDescription className={`whitespace-pre-line ${item.archived ? 'text-gray-400 dark:text-gray-500' : ''}`}>
-            {item.description}
-          </CardDescription>
-        )}
+        <div className="flex items-center justify-between">
+          <div className="flex-1">
+            {item.description && (
+              <CardDescription className={`whitespace-pre-line ${item.archived ? 'text-gray-400 dark:text-gray-500' : ''}`}>
+                {item.description}
+              </CardDescription>
+            )}
+          </div>
+          {renderUserAvatars(item, currentUser as User, usersData)}
+        </div>
       </CardHeader>
       <CardContent className="flex-1">
         <div className="flex items-center gap-2">
@@ -73,7 +106,7 @@ export default function WishlistItem({
             variant={canRedeem ? "default" : "secondary"}
             size="sm"
             onClick={onRedeem}
-            disabled={!canRedeem || item.archived}
+            disabled={!canRedeem || !canInteract || item.archived}
             className={`transition-all duration-300 w-24 sm:w-auto ${isRecentlyRedeemed ? 'bg-green-500 hover:bg-green-600' : ''} ${item.archived ? 'cursor-not-allowed' : ''}`}
           >
             <Gift className={`h-4 w-4 sm:mr-2 ${isRecentlyRedeemed ? 'animate-spin' : ''}`} />
@@ -98,6 +131,7 @@ export default function WishlistItem({
               variant="edit"
               size="sm"
               onClick={onEdit}
+              disabled={!canWrite}
               className="hidden sm:flex"
             >
               <Edit className="h-4 w-4" />
@@ -112,13 +146,13 @@ export default function WishlistItem({
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
               {!item.archived && (
-                <DropdownMenuItem onClick={onArchive}>
+                <DropdownMenuItem disabled={!canWrite} onClick={onArchive}>
                   <Archive className="mr-2 h-4 w-4" />
                   <span>Archive</span>
                 </DropdownMenuItem>
               )}
               {item.archived && (
-                <DropdownMenuItem onClick={onUnarchive}>
+                <DropdownMenuItem disabled={!canWrite} onClick={onUnarchive}>
                   <ArchiveRestore className="mr-2 h-4 w-4" />
                   <span>Unarchive</span>
                 </DropdownMenuItem>
@@ -131,6 +165,7 @@ export default function WishlistItem({
               <DropdownMenuItem
                 className="text-red-600 focus:text-red-600 dark:text-red-400 dark:focus:text-red-400 cursor-pointer"
                 onClick={onDelete}
+                disabled={!canWrite}
               >
                 <Trash2 className="mr-2 h-4 w-4" />
                 Delete