eyecandy and delete

frontend/static/feed.js

@@ -117,13 +117,21 @@ function renderFeed(items, showIdentity = true) {
     meta.className = 'meta';
     meta.textContent = formatDate(item.created_at);
 
-    if (item.is_owner) {
+    if (item.is_owner && !showIdentity) {
+      const actions = document.createElement('div');
+      actions.className = 'entry-actions';
       const editButton = document.createElement('button');
       editButton.type = 'button';
       editButton.className = 'edit-button';
       editButton.textContent = 'Edit';
       editButton.addEventListener('click', () => showEditForm(article, item));
-      article.appendChild(editButton);
+      const deleteButton = document.createElement('button');
+      deleteButton.type = 'button';
+      deleteButton.className = 'delete-button';
+      deleteButton.textContent = 'Delete';
+      deleteButton.addEventListener('click', () => deleteEntry(item, deleteButton));
+      actions.append(editButton, deleteButton);
+      article.appendChild(actions);
     }
 
     if (showIdentity) {
@@ -144,6 +152,20 @@ function renderFeed(items, showIdentity = true) {
   });
 }
 
+async function deleteEntry(item, button) {
+  if (!window.confirm(`Delete this link?`)) return;
+  button.disabled = true;
+  const response = await fetch(`/api/links/${encodeURIComponent(item.id)}`, {
+    method: 'DELETE',
+    headers: {Authorization: `Bearer ${accessToken}`},
+  });
+  if (response.ok) {
+    await loadFeed();
+  } else {
+    button.disabled = false;
+  }
+}
+
 function showEditForm(article, item) {
   if (article.querySelector('.edit-form')) return;
   const form = document.createElement('form');

frontend/static/style.css

@@ -420,11 +420,29 @@ button:disabled {
 
 .edit-button {
   min-width: 0;
-  margin-top: 14px;
-  padding: 8px 12px;
+  padding: 5px 9px;
+  border-radius: 6px;
   background: var(--surface-1);
   border-color: var(--surface-2);
   color: var(--text);
+  font-size: 0.82rem;
+}
+
+.entry-actions {
+  display: flex;
+  float: right;
+  gap: 8px;
+  margin: 0 0 8px 16px;
+}
+
+.delete-button {
+  min-width: 0;
+  padding: 5px 9px;
+  border-radius: 6px;
+  border-color: rgba(243, 139, 168, 0.45);
+  background: transparent;
+  color: var(--red);
+  font-size: 0.82rem;
 }
 
 .edit-form {

frontend/templates/feed.html

@@ -79,6 +79,6 @@
 
     <script src="/static/auth-header.js?v=3"></script>
     <script src="/static/logout.js?v=3"></script>
-    <script src="/static/feed.js?v=7"></script>
+    <script src="/static/feed.js?v=8"></script>
   </body>
 </html>