2 files changed, 47 insertions, 9 deletions

diff --git a/src/webapp/src/components/entry-card.svelte b/src/webapp/src/components/entry-card.svelte
index 30408fb..e264589 100644
--- a/src/webapp/src/components/entry-card.svelte
+++ b/src/webapp/src/components/entry-card.svelte
@@ -1,13 +1,38 @@
 <script lang="ts">
     import type {IEntryDto} from "@/lib/models/IEntryDto";
-    import {Tag, Tile} from "carbon-components-svelte";
+    import {Link, Tag, OverflowMenu, OverflowMenuItem} from "carbon-components-svelte";
+    import {del_entry_async} from "@/lib/stores/entries";
 
     export let entry = {} as IEntryDto;
-    export let editing = false;
+
+    async function delete_entry(id) {
+        await del_entry_async(id);
+    }
 </script>
+<style>
+    .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
 
-<Tile>
-    <p>{entry.url}</p>
+    .card {
+        margin: 10px 0;
+        padding-bottom: 5px;
+        border-bottom: 2px solid var(--cds-active-secondary);
+    }
+</style>
+<div class="card">
+    <div class="header">
+        <Link href="{entry.url}">{entry.url}</Link>
+        <OverflowMenu flipped>
+            <OverflowMenuItem text="Edit"
+                              on:click={() => alert("Not implemented")}/>
+            <OverflowMenuItem danger
+                              on:click={() => delete_entry(entry.id)}
+                              text="Delete"/>
+        </OverflowMenu>
+    </div>
     {#if entry.tags.length > 0}
         {#each entry.tags.split(" ") as tag}
             <Tag size="sm">{tag}</Tag>
@@ -16,4 +41,4 @@
     {#if entry.description}
         <p>{@html entry.description.replace("\n", "<br>")}</p>
     {/if}
-</Tile>
+</div>
diff --git a/src/webapp/src/lib/stores/entries.ts b/src/webapp/src/lib/stores/entries.ts
index 66be0cf..d5f7bb8 100644
--- a/src/webapp/src/lib/stores/entries.ts
+++ b/src/webapp/src/lib/stores/entries.ts
@@ -1,6 +1,6 @@
 import {StoreType, writable_persistent} from "@/lib/stores/persistent-store";
 import {storage_keys} from "@/lib/configuration";
-import {create_new_entry_async, get_all_entries_async} from "@/lib/api/entries";
+import {create_new_entry_async, get_all_entries_async, delete_entry_async} from "@/lib/api/entries";
 import {get} from "svelte/store";
 import type {IEntryDto} from "@/lib/models/IEntryDto";
 import {merge_obj_arr} from "@/lib/helpers";
@@ -25,7 +25,11 @@ export async function hydrate_entry_cache_async() {
     if (get_entries_request.ok) {
         const all_entries = await get_entries_request.json();
         const stored_entries = get(entries);
-        entries.set(merge_obj_arr<IEntryDto>(all_entries, stored_entries, "id"));
+        if (stored_entries.length > all_entries.length) {
+            entries.set(all_entries);
+        } else {
+            entries.set(merge_obj_arr<IEntryDto>(all_entries, stored_entries, "id"));
+        }
     }
 }
 
@@ -51,8 +55,17 @@ export async function edit_entry_async(entry: IEntryDto) {
     if (!entry.id) return;
 }
 
-export async function delete_entry_async(entry: IEntryDto) {
-    if (!entry.id) return;
+export async function del_entry_async(entry_id: string) {
+    if (!entry_id) return;
+    const http_request = await delete_entry_async(entry_id);
+    if (http_request.ok) {
+        const stored_entries = get(entries);
+        const new_entries = [];
+        for (const entry of stored_entries) {
+            if (entry.id !== entry_id) new_entries.push(entry);
+        }
+        entries.set(new_entries);
+    }
 }
 
 export default entries;