singleton and embed records

front/js/svelte/records/previews/PreviewReference.svelte

@@ -10,21 +10,32 @@
     const channel = getContext("channel");
     export let graph;
     export let record;
+    export let edge;
     export let hasDelete = false;
 
     let schema = channel.schemas.find((aschema) => aschema.name === record.schema);
     let cardTitle = previewTitle(channel.schemas, record, graph);
-    const cardImageEdge = graph.edges.find(e => e.source === record.id  && e.field === schema.cardImage);
+    const cardImageEdge = graph.edges.find(e => e.source === record.id && e.field === schema.cardImage);
     let cardImageRecord = graph.records.find(r => r.id === cardImageEdge?.target);
 
     function remove(e) {
         e.preventDefault();
         dispatch("remove", record.id);
     }
+
+    function restore(e) {
+        e.preventDefault();
+        dispatch("restore", record.id);
+    }
+
+    function fullDelete(e) {
+        e.preventDefault();
+        dispatch("fulldelete", record.id);
+    }
 </script>
 
 
-<div class="preview-reference">
+<div class="preview-reference" class:is-trashed={edge._isTrashed}>
     <div style="display: flex;align-items: center;gap: 10px;">
 
         {#if cardImageRecord}
@@ -38,7 +49,12 @@
                         class="record-title"
                         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}
@@ -53,12 +69,30 @@
     </div>
     {#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>