feat: implemented dropdown-menu

Author: AlexVOiceover

package-lock.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-dropdown-menu": "^2.1.6",
     "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-popover": "^1.1.6",
     "@radix-ui/react-slot": "^1.1.2",

package.json

@@ -3,8 +3,14 @@ import { Input } from '../ui/input';
 import { Button } from '../ui/button';
 import SubjectSelector from '../ui/subject-selector';
 import VerbSelector from '../ui/VerbSelector';
-import { Trash2, Edit2, Save, Eye, EyeOff } from 'lucide-react';
+import { Trash2, Edit2, Save, Eye, EyeOff, MoreVertical } from 'lucide-react';
 import type { Statement } from '../../../types/types';
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from '../ui/dropdown-menu';
 
 export interface StatementItemProps {
   statement: Statement;
@@ -47,6 +53,19 @@ const StatementItem: React.FC<StatementItemProps> = ({
   if (isEditing) {
     return (
       <div className='flex items-center space-x-2 bg-gray-100 p-2 rounded'>
+        {/* Privacy toggle button */}
+        <Button
+          variant='ghost'
+          size='sm'
+          onClick={() => onTogglePublic(statement.id)}
+          className={`${
+            statement.isPublic
+              ? 'bg-green-50 text-green-500'
+              : 'bg-gray-50 text-gray-500'
+          } hover:bg-opacity-75 rounded-md px-3 py-2`}
+        >
+          {statement.isPublic ? <Eye size={16} /> : <EyeOff size={16} />}
+        </Button>
         <div className='flex flex-1 items-center space-x-2'>
           {/* Subject */}
           <div
@@ -60,7 +79,7 @@ const StatementItem: React.FC<StatementItemProps> = ({
                   onPartUpdate(statement.id, 'subject', value)
                 }
                 onAddDescriptor={() => {}}
-                // Here we assume the username is derived from the subject string.
+                // Assume the username is derived from the subject string.
                 username={statement.subject.split("'s")[0] || statement.subject}
               />
             ) : (
@@ -103,18 +122,6 @@ const StatementItem: React.FC<StatementItemProps> = ({
           </div>
         </div>
         <div className='flex items-center space-x-2 ml-auto'>
-          <Button
-            variant='ghost'
-            size='sm'
-            onClick={() => onTogglePublic(statement.id)}
-            className={`${
-              statement.isPublic
-                ? 'bg-green-50 text-green-500'
-                : 'bg-gray-50 text-gray-500'
-            } hover:bg-opacity-75 rounded-md px-3 py-2`}
-          >
-            {statement.isPublic ? <Eye size={16} /> : <EyeOff size={16} />}
-          </Button>
           <Button
             variant='ghost'
             size='sm'
@@ -136,34 +143,38 @@ const StatementItem: React.FC<StatementItemProps> = ({
     );
   }
 
-  // Static view when not in editing mode
+  // Static view when not in editing mode with grouped Edit and Delete
   return (
     <div className='flex justify-between items-center bg-gray-100 p-2 rounded'>
+      <span
+        className={`inline-flex items-center justify-center px-3 py-2 ${
+          statement.isPublic ? 'text-green-500' : 'text-gray-400'
+        }`}
+      >
+        {statement.isPublic ? <Eye size={16} /> : <EyeOff size={16} />}
+      </span>
       <span className='flex-1'>{`${statement.subject} ${statement.verb} ${statement.object}`}</span>
       <div className='flex items-center space-x-2 ml-auto'>
-        <span
-          className={`inline-flex items-center justify-center px-3 py-2 ${
-            statement.isPublic ? 'text-green-500' : 'text-gray-400'
-          }`}
-        >
-          {statement.isPublic ? <Eye size={16} /> : <EyeOff size={16} />}
-        </span>
-        <Button
-          variant='ghost'
-          size='sm'
-          onClick={() => onEditClick(statement.id)}
-          className='text-blue-500 hover:text-blue-700'
-        >
-          <Edit2 size={16} />
-        </Button>
-        <Button
-          variant='ghost'
-          size='sm'
-          onClick={() => onDelete(statement.id)}
-          className='text-red-500 hover:text-red-700'
-        >
-          <Trash2 size={16} />
-        </Button>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button onClick={(e) => e.stopPropagation()}>
+              <MoreVertical size={18} className='text-gray-500' />
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align='end'>
+            <DropdownMenuItem onClick={() => onEditClick(statement.id)}>
+              <Edit2 className='mr-2 h-4 w-4' />
+              Edit
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() => onDelete(statement.id)}
+              className='text-red-600'
+            >
+              <Trash2 className='mr-2 h-4 w-4' />
+              Delete
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
       </div>
     </div>
   );