Feature: Implement sharing ui

Author: PreciousOritsedere

app/components/FileItem.tsx

@@ -27,6 +27,7 @@ interface FileItemProps {
   onMove?: (file: FileItemData) => void;
   onDownload?: (file: FileItemData) => void;
   onDelete?: (file: FileItemData) => void;
+  onShare?: (file: FileItemData) => void;
   isSelected?: boolean;
   onContextMenu?: (file: FileItemData, event: React.MouseEvent) => void;
 }
@@ -42,6 +43,7 @@ export default function FileItem({
   onMove,
   onDownload,
   onDelete,
+  onShare,
   isSelected = false,
   onContextMenu,
 }: FileItemProps) {
@@ -146,6 +148,7 @@ export default function FileItem({
             onCopy={onCopy}
             onMove={onMove}
             onDelete={onDelete}
+            onShare={onShare}
           />
         )}
         <div className="mb-1 flex h-12 w-12 items-center justify-center sm:mb-2 sm:h-16 sm:w-16">
@@ -199,6 +202,7 @@ export default function FileItem({
           onCopy={onCopy}
           onMove={onMove}
           onDelete={onDelete}
+          onShare={onShare}
         />
       )}
     </section>

app/components/FileItemMenu.tsx

@@ -10,6 +10,7 @@ import {
   ArrowRightCircleIcon,
   TrashIcon,
   EyeIcon,
+  ShareIcon,
 } from "@heroicons/react/24/outline";
 import { useClickOutside } from "../lib/hooks";
 import { FileItemData } from "./FileItem";
@@ -22,6 +23,7 @@ interface FileItemMenuProps {
   onMove?: (file: FileItemData) => void;
   onDelete?: (file: FileItemData) => void;
   onPreview?: (file: FileItemData) => void;
+  onShare?: (file: FileItemData) => void;
   position?: "top-right" | "right";
 }
 
@@ -33,6 +35,7 @@ export default function FileItemMenu({
   onMove,
   onDelete,
   onPreview,
+  onShare,
   position = "right",
 }: FileItemMenuProps) {
   const [showMenu, setShowMenu] = useState(false);
@@ -104,6 +107,13 @@ export default function FileItemMenu({
       className: "text-gray-700 hover:bg-gray-100 border-b border-gray-100",
       iconClassName: "text-gray-500",
     },
+    {
+      label: "Share",
+      icon: ShareIcon,
+      action: onShare,
+      className: "text-gray-700 hover:bg-gray-100 border-b border-gray-100",
+      iconClassName: "text-gray-500",
+    },
     // Only show Move for files, not folders
     ...(file.type === "file"
       ? [

app/components/FileList.tsx

@@ -16,6 +16,7 @@ interface FileListProps {
   onFileMove?: (file: FileItemData) => void;
   onFileDownload?: (file: FileItemData) => void;
   onFileDelete?: (file: FileItemData) => void;
+  onFileShare?: (file: FileItemData) => void;
   selectedFileIds: string[];
   onFileContextMenu?: (file: FileItemData, event: React.MouseEvent) => void;
 }
@@ -33,6 +34,7 @@ export default function FileList({
   onFileMove,
   onFileDownload,
   onFileDelete,
+  onFileShare,
   selectedFileIds,
   onFileContextMenu,
 }: FileListProps) {
@@ -73,6 +75,7 @@ export default function FileList({
                 onMove={onFileMove}
                 onDownload={onFileDownload}
                 onDelete={onFileDelete}
+                onShare={onFileShare}
                 isSelected={selectedFileIds.includes(file.id)}
                 onContextMenu={onFileContextMenu}
               />
@@ -93,6 +96,7 @@ export default function FileList({
                 onMove={onFileMove}
                 onDownload={onFileDownload}
                 onDelete={onFileDelete}
+                onShare={onFileShare}
                 isSelected={selectedFileIds.includes(file.id)}
                 onContextMenu={onFileContextMenu}
               />

app/components/FileManager.tsx

@@ -12,6 +12,7 @@ import {
   ArrowRightCircleIcon,
   TrashIcon,
   EyeIcon,
+  ShareIcon,
 } from "@heroicons/react/24/outline";
 import AuthWrapper from "./AuthWrapper";
 import Header from "./Header";
@@ -24,6 +25,7 @@ import RenameDialog from "./RenameDialog";
 import PreviewModal from "./PreviewModal";
 import MoveDialog from "./MoveDialog";
 import DeleteConfirmDialog from "./DeleteConfirmDialog";
+import ShareDialog, { AccessLevel } from "./ShareDialog";
 import FileUploadHandler from "./FileUploadHandler";
 import ContextMenu, { ContextMenuAction } from "./ContextMenu";
 import { FileItemData } from "./FileItem";
@@ -94,6 +96,8 @@ export default function FileManager() {
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
   const [fileToDelete, setFileToDelete] = useState<FileItemData | null>(null);
   const [isDeleting, setIsDeleting] = useState(false);
+  const [showShareDialog, setShowShareDialog] = useState(false);
+  const [fileToShare, setFileToShare] = useState<FileItemData | null>(null);
   const [contextMenuState, setContextMenuState] = useState<ContextMenuState | null>(null);
 
   const closeContextMenu = () => setContextMenuState(null);
@@ -392,6 +396,17 @@ export default function FileManager() {
     }
   };
 
+  const handleShare = (file: FileItemData) => {
+    setFileToShare(file);
+    setShowShareDialog(true);
+  };
+
+  const handleShareConfirm = async (webId: string, accessLevel: AccessLevel) => {
+    // TODO: Implement actual sharing logic
+    console.log(`Sharing ${fileToShare?.name} with ${webId} as ${accessLevel}`);
+    toast.success(`Shared with ${webId} as ${accessLevel}`);
+  };
+
   const handleDragEnter = (event: React.DragEvent<HTMLElement>) => {
     if (!hasFilesInDrag(event)) return;
     event.preventDefault();
@@ -633,6 +648,14 @@ export default function FileManager() {
           closeContextMenu();
           handleCopy(file);
         },
+      },
+      {
+        label: "Share",
+        icon: ShareIcon,
+        onClick: () => {
+          closeContextMenu();
+          handleShare(file);
+        },
       }
     );
 
@@ -823,6 +846,7 @@ export default function FileManager() {
                   onFileMove={handleMove}
                   onFileDownload={handleDownload}
                   onFileDelete={handleDelete}
+                  onFileShare={handleShare}
                   selectedFileIds={selectedFileIds}
                   onFileContextMenu={handleFileContextMenu}
                 />
@@ -888,6 +912,15 @@ export default function FileManager() {
           onConfirm={handleDeleteConfirm}
           isDeleting={isDeleting}
         />
+        <ShareDialog
+          isOpen={showShareDialog}
+          onClose={() => {
+            setShowShareDialog(false);
+            setFileToShare(null);
+          }}
+          file={fileToShare}
+          onShare={handleShareConfirm}
+        />
         {isDragActive && (
           <div className="pointer-events-none fixed inset-0 z-40 flex flex-col items-center justify-center bg-purple-500/10">
             <div className="rounded-2xl border border-purple-400 bg-white/90 px-8 py-6 text-center shadow-lg">