feat(delete): improve layout of the note path

apps/client/src/widgets/dialogs/delete_notes.css

@@ -8,11 +8,23 @@
 
 .delete-notes-dialog .preview-list {
     margin: 0;
-    padding-left: 20px;
+    padding: 0;
+    list-style: none;
     max-height: 200px;
     overflow: auto;
 }
 
 .delete-notes-dialog .preview-list li {
-    margin-bottom: 4px;
+    padding: 6px 16px;
+    border-bottom: 1px solid var(--main-border-color);
+}
+
+.delete-notes-dialog .preview-list li:last-child {
+    border-bottom: none;
+}
+
+.delete-notes-dialog .preview-list small {
+    margin-inline-start: 8px;
+    font-size: 0.8em;
+    color: var(--muted-text-color);
 }

apps/client/src/widgets/dialogs/delete_notes.tsx

@@ -124,8 +124,6 @@ export default function DeleteNotesDialog() {
                         deleteAllClones={deleteAllClones}
                         setDeleteAllClones={setDeleteAllClones}
                     />
-                </CardSection>
-                <CardSection>
                     <OptionsRow
                         name="erase-notes"
                         label={t("delete_notes.erase_notes_label")}
@@ -184,7 +182,7 @@ function DeleteAllClonesOption({ cloneInfo, deleteAllClones, setDeleteAllClones
 function DeletedNotes({ noteIdsToBeDeleted }: { noteIdsToBeDeleted: DeleteNotesPreview["noteIdsToBeDeleted"] }) {
     return (
         <Card heading={t("delete_notes.notes_to_be_deleted", { notesCount: noteIdsToBeDeleted.length })}>
-            <CardSection>
+            <CardSection noPadding={noteIdsToBeDeleted.length > 0}>
                 {noteIdsToBeDeleted.length ? (
                     <ul className="preview-list">
                         {noteIdsToBeDeleted.map((noteId) => (