singleton and embed records

front/js/svelte/records/previews/PreviewFile.svelte

@@ -11,6 +11,7 @@
     const dispatch = createEventDispatcher();
     const channel = getContext("channel");
     export let record;
+    export let edge;
     export let hasDelete = false;
     export let hasInsert = false;
 
@@ -23,6 +24,16 @@
         dispatch("remove", record.id);
     }
 
+    function restore(e) {
+        e.preventDefault();
+        dispatch("restore", record.id);
+    }
+
+    function fullDelete(e) {
+        e.preventDefault();
+        dispatch("fulldelete", record.id);
+    }
+
     function insert(e, preset) {
         e.preventDefault();
         let html = htmlurl(channel, record, preset)
@@ -37,7 +48,7 @@
 
 </script>
 
-<div class="preview-file">
+<div class="preview-file" class:is-trashed={edge._isTrashed}>
     <div style="display: flex;align-items: center;gap: 10px;">
         <div class="image">
             <Preview {record} size="small"/>
@@ -49,6 +60,9 @@
                         href="{channel.lucentUrl}/records/{record.id}"
                 >
                     {cardTitle}
+                    {#if edge._isTrashed}
+                        <span class="trashed-text">Trashed</span>
+                    {/if}
                 </a>
                 <small class="d-block">
                     from {schema.label}
@@ -78,12 +92,30 @@
         {/if}
         {#if hasDelete}
             <div class="reference-action">
-                <button
-                        class="button"
-                        on:click={remove}
-                >
-                    <Icon icon="trash-can"/>
-                </button>
+                {#if edge._isTrashed}
+                    <button
+                            title="Restore"
+                            class="button"
+                            on:click={restore}
+                    >
+                        <Icon icon="undo"/>
+                    </button>
+                    <button
+                            title="Delete from everywhere"
+                            class="button"
+                            on:click={fullDelete}
+                    >
+                        <Icon icon="destroy"/>
+                    </button>
+                {:else}
+                    <button
+                            title="Remove"
+                            class="button"
+                            on:click={remove}
+                    >
+                        <Icon icon="trash-can"/>
+                    </button>
+                {/if}
             </div>
         {/if}
     </div>