Feat(frontend): improve the soft delete empty state (#6877)

# This PR

- Fix #6834 

## Demo


https://www.loom.com/share/235c4425f3264f429e2064a9d1604a90?sid=02a815c9-3b1a-45e6-b5ce-d5eb3b40e10e

## Notes

- There is a missing icon in Figma corresponding to the
`noDeletedRecordFound` in the dark mode, thus I used the same icon
(different background because we have the correct background image) for
both dark / light modes
<img width="625" alt="Screenshot 2024-09-03 at 15 04 57"
src="https://github.com/user-attachments/assets/cbc0c3dd-a1ee-49a5-be9a-36450e78a992">
cc: @Bonapara

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-front/src/modules/views/components/VariantFilterChip.tsx

@@ -1,20 +1,44 @@
 import { useIcons } from 'twenty-ui';
 
+import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural';
 import { Filter } from '@/object-record/object-filter-dropdown/types/Filter';
+import { useHandleToggleTrashColumnFilter } from '@/object-record/record-index/hooks/useHandleToggleTrashColumnFilter';
 import { SortOrFilterChip } from '@/views/components/SortOrFilterChip';
 import { useCombinedViewFilters } from '@/views/hooks/useCombinedViewFilters';
+import { useParams } from 'react-router-dom';
 
 type VariantFilterChipProps = {
   viewFilter: Filter;
+  viewBarId: string;
 };
 
-export const VariantFilterChip = ({ viewFilter }: VariantFilterChipProps) => {
+export const VariantFilterChip = ({
+  viewFilter,
+  viewBarId,
+}: VariantFilterChipProps) => {
   const { removeCombinedViewFilter } = useCombinedViewFilters();
 
+  const { objectNamePlural } = useParams();
+
+  const { objectNameSingular } = useObjectNameSingularFromPlural({
+    objectNamePlural: objectNamePlural ?? '',
+  });
+
+  const { toggleSoftDeleteFilterState } = useHandleToggleTrashColumnFilter({
+    objectNameSingular,
+    viewBarId,
+  });
+
   const { getIcon } = useIcons();
 
   const handleRemoveClick = () => {
     removeCombinedViewFilter(viewFilter.id);
+    if (
+      viewFilter.definition.label === 'Deleted' &&
+      viewFilter.operand === 'isNotEmpty'
+    ) {
+      toggleSoftDeleteFilterState(false);
+    }
   };
 
   return (

packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx

@@ -97,6 +97,7 @@ export const ViewBarDetails = ({
   hasFilterButton = false,
   rightComponent,
   filterDropdownId,
+  viewBarId,
 }: ViewBarDetailsProps) => {
   const {
     canPersistViewSelector,
@@ -169,6 +170,7 @@ export const ViewBarDetails = ({
               // Also as filter is spread into viewFilter, definition is present
               // FixMe: Ugly hack to make it work
               viewFilter={viewFilter as unknown as Filter}
+              viewBarId={viewBarId}
             />
           ))}
           {!!otherViewFilters.length &&