Edit of links and database versioning

frontend/static/feed.js

@@ -3,6 +3,7 @@ const sortSelect = document.getElementById('sort-select');
 const userFilter = document.getElementById('user-filter');
 
 const cookieName = 'linklog-feed-preferences';
+const accessToken = localStorage.getItem('linklogAccessToken');
 
 function createAvatar(user) {
   const avatar = document.createElement('div');
@@ -82,6 +83,15 @@ function renderFeed(items, showIdentity = true) {
     meta.className = 'meta';
     meta.textContent = item.created_at || 'updated recently';
 
+    if (item.is_owner) {
+      const editButton = document.createElement('button');
+      editButton.type = 'button';
+      editButton.className = 'edit-button';
+      editButton.textContent = 'Edit';
+      editButton.addEventListener('click', () => showEditForm(article, item));
+      article.appendChild(editButton);
+    }
+
     if (showIdentity) {
       const header = document.createElement('div');
       header.className = 'link-header';
@@ -100,12 +110,39 @@ function renderFeed(items, showIdentity = true) {
   });
 }
 
+function showEditForm(article, item) {
+  if (article.querySelector('.edit-form')) return;
+  const form = document.createElement('form');
+  form.className = 'edit-form';
+  form.innerHTML = `
+    <label>Title <input name="title" value=""></label>
+    <label>URL <input name="url" type="url" value=""></label>
+    <label>Comment <textarea name="comment"></textarea></label>
+    <button type="submit">Save changes</button>
+  `;
+  form.elements.title.value = item.title || '';
+  form.elements.url.value = item.url || '';
+  form.elements.comment.value = item.comment || '';
+  form.addEventListener('submit', async (event) => {
+    event.preventDefault();
+    const response = await fetch(`/api/links/${encodeURIComponent(item.id)}`, {
+      method: 'PUT',
+      headers: {'Content-Type': 'application/json', Authorization: `Bearer ${accessToken}`},
+      body: JSON.stringify(Object.fromEntries(new FormData(form))),
+    });
+    if (response.ok) loadFeed();
+  });
+  article.appendChild(form);
+}
+
 async function loadFeed() {
   const routeUser = document.body.dataset.userFilter;
   const endpoint = routeUser
     ? `/api/public/feed/${encodeURIComponent(routeUser)}`
     : '/api/public/feed';
-  const response = await fetch(endpoint);
+  const response = await fetch(endpoint, {
+    headers: accessToken ? {Authorization: `Bearer ${accessToken}`} : {},
+  });
   const data = await response.json();
 
   let items = data || [];

frontend/static/style.css

@@ -331,6 +331,23 @@ button:disabled {
   color: var(--red) !important;
 }
 
+.edit-button {
+  min-width: 0;
+  margin-top: 14px;
+  padding: 8px 12px;
+  background: var(--surface-1);
+  border-color: var(--surface-2);
+  color: var(--text);
+}
+
+.edit-form {
+  display: grid;
+  gap: 12px;
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid var(--border);
+}
+
 .feed {
   padding-bottom: 40px;
 }