diff --git a/frontend/src/components/Dialog/DeleteFolderDialog.tsx b/frontend/src/components/Dialog/DeleteFolderDialog.tsx new file mode 100644 index 000000000..d5acfe1ae --- /dev/null +++ b/frontend/src/components/Dialog/DeleteFolderDialog.tsx @@ -0,0 +1,91 @@ +import { FC } from 'react'; +import { AlertTriangle } from 'lucide-react'; +import { Button } from '@/components/ui/button'; + +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, +} from '@/components/ui/dialog'; + +interface DeleteFolderDialogProps { + isOpen: boolean; + setIsOpen: (open: boolean) => void; + onConfirm: () => void; + folderPath: string; +} + +const DeleteFolderDialog: FC = ({ + isOpen, + setIsOpen, + onConfirm, + folderPath, +}) => { + const handleConfirm = () => { + onConfirm(); + setIsOpen(false); + }; + + return ( + + + +
+
+ +
+ Delete Folder? +
+ +
+

+ You are about to remove this folder from your library: +

+
+ {folderPath} +
+
+

+ ⚠️ This action will: +

+
    +
  • Remove the folder from your PictoPy library
  • +
  • Delete all photos in this folder from the library
  • +
  • Remove all face recognition data for these photos
  • +
  • Delete all AI-generated tags and clusters
  • +
+
+
+

+ ✓ Your actual files on disk will NOT be deleted +

+
+
+
+
+ + + + + +
+
+ ); +}; + +export default DeleteFolderDialog; diff --git a/frontend/src/pages/SettingsPage/components/FolderManagementCard.tsx b/frontend/src/pages/SettingsPage/components/FolderManagementCard.tsx index db4b029fa..b4062628b 100644 --- a/frontend/src/pages/SettingsPage/components/FolderManagementCard.tsx +++ b/frontend/src/pages/SettingsPage/components/FolderManagementCard.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import { Folder, Trash2, Check } from 'lucide-react'; import { Switch } from '@/components/ui/switch'; @@ -11,6 +11,7 @@ import FolderPicker from '@/components/FolderPicker/FolderPicker'; import { useFolderOperations } from '@/hooks/useFolderOperations'; import { FolderDetails } from '@/types/Folder'; import SettingsCard from './SettingsCard'; +import DeleteFolderDialog from '@/components/Dialog/DeleteFolderDialog'; /** * Component for managing folder operations in settings @@ -29,6 +30,24 @@ const FolderManagementCard: React.FC = () => { (state: RootState) => state.folders.taggingStatus, ); + // Dialog state for folder deletion confirmation + const [deleteDialogOpen, setDeleteDialogOpen] = useState(false); + const [folderToDelete, setFolderToDelete] = useState( + null, + ); + + const handleDeleteClick = (folder: FolderDetails) => { + setFolderToDelete(folder); + setDeleteDialogOpen(true); + }; + + const handleConfirmDelete = () => { + if (folderToDelete) { + deleteFolder(folderToDelete.folder_id); + setFolderToDelete(null); + } + }; + return ( {