adding confirmation dialog if to remove listing entirely from db or just hide it

ui/src/components/ListingDeletionModal.jsx

@@ -0,0 +1,70 @@
+/*
+ * Copyright (c) 2026 by Christian Kellner.
+ * Licensed under Apache-2.0 with Commons Clause and Attribution/Naming Clause
+ */
+
+import React, { useState } from 'react';
+import { Modal, Radio, RadioGroup, Typography } from '@douyinfe/semi-ui-19';
+
+const { Text } = Typography;
+
+const ListingDeletionModal = ({
+  visible,
+  onConfirm,
+  onCancel,
+  title = 'Delete Listings',
+  showOptions = true,
+  message = 'How would you like to delete the selected listing(s)?',
+}) => {
+  const [deleteType, setDeleteType] = useState('soft');
+
+  const handleOk = () => {
+    onConfirm(!showOptions || deleteType === 'hard');
+  };
+
+  return (
+    <Modal
+      title={title}
+      visible={visible}
+      onOk={handleOk}
+      onCancel={onCancel}
+      okText="Confirm"
+      cancelText="Cancel"
+      style={{ maxWidth: '500px' }}
+    >
+      <div style={{ marginBottom: 16 }}>
+        <Text>{message}</Text>
+      </div>
+      {showOptions && (
+        <RadioGroup value={deleteType} onChange={(e) => setDeleteType(e.target.value)} style={{ width: '100%' }}>
+          <Radio value="soft" style={{ alignItems: 'flex-start', width: '100%' }}>
+            <div style={{ marginLeft: 8 }}>
+              <Text strong>Mark as deleted (Soft Delete)</Text>
+              <br />
+              <Text type="secondary">
+                Listings are kept in the database but marked as hidden. They will <b>not</b> re-appear during the next
+                scraping session.
+              </Text>
+            </div>
+          </Radio>
+          <Radio value="hard" style={{ marginTop: 16, alignItems: 'flex-start', width: '100%' }}>
+            <div style={{ marginLeft: 8 }}>
+              <Text strong>Remove from database (Hard Delete)</Text>
+              <br />
+              <Text type="secondary">
+                Listings are completely removed from the database.
+                <br />
+                <Text type="warning">
+                  Consequence: They might re-appear when scraping the next time because Fredy won't know they were
+                  previously found.
+                </Text>
+              </Text>
+            </div>
+          </Radio>
+        </RadioGroup>
+      )}
+    </Modal>
+  );
+};
+
+export default ListingDeletionModal;

ui/src/components/grid/jobs/JobGrid.jsx

@@ -35,6 +35,7 @@ import {
   IconPlusCircle,
 } from '@douyinfe/semi-icons';
 import { useNavigate } from 'react-router-dom';
+import ListingDeletionModal from '../../ListingDeletionModal.jsx';
 import { useActions, useSelector } from '../../../services/state/store.js';
 import { xhrDelete, xhrPut, xhrPost } from '../../../services/xhr.js';
 import debounce from 'lodash/debounce';
@@ -60,6 +61,9 @@ const JobGrid = () => {
   const [activityFilter, setActivityFilter] = useState(null);
   const [showFilterBar, setShowFilterBar] = useState(false);
 
+  const [deleteModalVisible, setDeleteModalVisible] = useState(false);
+  const [pendingDeletion, setPendingDeletion] = useState(null); // { type: 'job'|'listings', jobId }
+
   const pendingJobIdRef = useRef(null);
   const evtSourceRef = useRef(null);
 
@@ -125,24 +129,35 @@ const JobGrid = () => {
     };
   }, [handleFilterChange]);
 
-  const onJobRemoval = async (jobId) => {
-    try {
-      await xhrDelete('/api/jobs', { jobId });
-      Toast.success('Job successfully removed');
-      loadData();
-      actions.jobsData.getJobs(); // refresh select list too
-    } catch (error) {
-      Toast.error(error);
-    }
+  const onJobRemoval = (jobId) => {
+    setPendingDeletion({ type: 'job', jobId });
+    setDeleteModalVisible(true);
   };
 
-  const onListingRemoval = async (jobId) => {
+  const onListingRemoval = (jobId) => {
+    setPendingDeletion({ type: 'listings', jobId });
+    setDeleteModalVisible(true);
+  };
+
+  const confirmDeletion = async (hardDelete) => {
+    const { type, jobId } = pendingDeletion;
     try {
-      await xhrDelete('/api/listings/job', { jobId });
-      Toast.success('Listings successfully removed');
+      if (type === 'job') {
+        await xhrDelete('/api/jobs', { jobId });
+        Toast.success('Job and listings successfully removed');
+      } else if (type === 'listings') {
+        await xhrDelete('/api/listings/job', { jobId, hardDelete });
+        Toast.success('Listings successfully removed');
+      }
       loadData();
+      if (type === 'job') {
+        actions.jobsData.getJobs(); // refresh select list too
+      }
     } catch (error) {
-      Toast.error(error);
+      Toast.error(error.message || 'Error performing deletion');
+    } finally {
+      setDeleteModalVisible(false);
+      setPendingDeletion(null);
     }
   };
 
@@ -410,6 +425,21 @@ const JobGrid = () => {
           />
         </div>
       )}
+      <ListingDeletionModal
+        visible={deleteModalVisible}
+        title={pendingDeletion?.type === 'job' ? 'Delete Job' : 'Delete Listings'}
+        showOptions={pendingDeletion?.type !== 'job'}
+        message={
+          pendingDeletion?.type === 'job'
+            ? 'Are you sure you want to delete this job? All associated listings will be removed from the database.'
+            : 'How would you like to delete the selected listing(s)?'
+        }
+        onConfirm={confirmDeletion}
+        onCancel={() => {
+          setDeleteModalVisible(false);
+          setPendingDeletion(null);
+        }}
+      />
     </div>
   );
 };

ui/src/components/grid/listings/ListingsGrid.jsx

@@ -35,6 +35,7 @@ import {
   IconEyeOpened,
 } from '@douyinfe/semi-icons';
 import { useNavigate } from 'react-router-dom';
+import ListingDeletionModal from '../../ListingDeletionModal.jsx';
 import no_image from '../../../assets/no_image.jpg';
 import * as timeService from '../../../services/time/timeService.js';
 import { xhrDelete, xhrPost } from '../../../services/xhr.js';
@@ -65,6 +66,9 @@ const ListingsGrid = () => {
   const [providerFilter, setProviderFilter] = useState(null);
   const [showFilterBar, setShowFilterBar] = useState(false);
 
+  const [deleteModalVisible, setDeleteModalVisible] = useState(false);
+  const [listingToDelete, setListingToDelete] = useState(null);
+
   const loadData = () => {
     actions.listingsData.getListingsData({
       page,
@@ -106,6 +110,19 @@ const ListingsGrid = () => {
     setPage(_page);
   };
 
+  const confirmDeletion = async (hardDelete) => {
+    try {
+      await xhrDelete('/api/listings/', { ids: [listingToDelete], hardDelete });
+      Toast.success('Listing successfully removed');
+      loadData();
+    } catch (error) {
+      Toast.error(error.message || 'Error deleting listing');
+    } finally {
+      setDeleteModalVisible(false);
+      setListingToDelete(null);
+    }
+  };
+
   const cap = (val) => {
     return String(val).charAt(0).toUpperCase() + String(val).slice(1);
   };
@@ -312,15 +329,10 @@ const ListingsGrid = () => {
                     title="Remove"
                     type="danger"
                     size="small"
-                    onClick={async (e) => {
+                    onClick={(e) => {
                       e.stopPropagation();
-                      try {
-                        await xhrDelete('/api/listings/', { ids: [item.id] });
-                        Toast.success('Listing(s) successfully removed');
-                        loadData();
-                      } catch (error) {
-                        Toast.error(error);
-                      }
+                      setListingToDelete(item.id);
+                      setDeleteModalVisible(true);
                     }}
                     icon={<IconDelete />}
                   />
@@ -341,6 +353,14 @@ const ListingsGrid = () => {
           />
         </div>
       )}
+      <ListingDeletionModal
+        visible={deleteModalVisible}
+        onConfirm={confirmDeletion}
+        onCancel={() => {
+          setDeleteModalVisible(false);
+          setListingToDelete(null);
+        }}
+      />
     </div>
   );
 };