Post to mastodon from the profile page for logged in users

frontend/static/feed.js

@@ -130,8 +130,17 @@ function renderFeed(items, showIdentity = true) {
       deleteButton.className = 'delete-button';
       deleteButton.textContent = 'Delete';
       deleteButton.addEventListener('click', () => deleteEntry(item, deleteButton));
+      const mastodonButton = document.createElement('button');
+      mastodonButton.type = 'button';
+      mastodonButton.className = `mastodon-button${item.mastodon_posted ? ' posted' : ''}`;
+      const mastodonLogo = document.createElement('img');
+      mastodonLogo.src = '/static/mastodon.svg';
+      mastodonLogo.alt = '';
+      mastodonButton.append(mastodonLogo, document.createTextNode(item.mastodon_posted ? 'Post again' : 'Post to Mastodon'));
+      mastodonButton.addEventListener('click', () => postToMastodon(item, mastodonButton));
       actions.append(editButton, deleteButton);
       article.appendChild(actions);
+      article.appendChild(mastodonButton);
     }
 
     if (showIdentity) {
@@ -152,6 +161,19 @@ function renderFeed(items, showIdentity = true) {
   });
 }
 
+async function postToMastodon(item, button) {
+  button.disabled = true;
+  const response = await fetch(`/api/links/${encodeURIComponent(item.id)}/mastodon`, {
+    method: 'POST',
+    headers: {Authorization: `Bearer ${accessToken}`},
+  });
+  if (response.ok) {
+    await loadFeed();
+  } else {
+    button.disabled = false;
+  }
+}
+
 async function deleteEntry(item, button) {
   if (!window.confirm(`Delete this link?`)) return;
   button.disabled = true;

frontend/static/mastodon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-label="Mastodon">
+  <path fill="currentColor" d="M21.6 8.2c0-4.1-2.7-5.3-2.7-5.3C17.5 2.3 14.8 2 12 2h-.1c-2.8 0-5.5.3-6.9.9 0 0-2.7 1.2-2.7 5.3 0 .9 0 2 0 3.1 0 4.2.3 8.3 1.8 9.4 1.7 1.3 4.1 1.6 6.1 1.7 1.9.1 3.6-.4 3.6-.4l-.1-1.8s-1.6.5-3.5.4c-1.8-.1-3.6-.2-3.9-2.1-.1-.5-.1-1-.1-1.5 0 0 1.7.4 3.9.5 1.3.1 2.6.1 3.9-.1 2.5-.3 4.7-.8 4.7-.8v-1.8c0-1.4 0-2.8 0-3.1 0-4.1-2.7-5.3-2.7-5.3-1.4-.6-3.8-.9-6-.9h-.1c-2.2 0-4.6.3-6 .9 0 0-2.7 1.2-2.7 5.3v.1h3.3v-.1c0-1.7.7-2.1.7-2.1.4-.2 1.1-.3 1.8-.3.7 0 1.4.2 1.8.4.7.4 1.1 1.2 1.1 2.3v.5c-1.1-.3-2.3-.4-3.5-.4-2.2 0-3.3.8-3.3.8v3.2h3.3v-1.5c.4-.2 1.1-.3 1.9-.3.8 0 1.5.1 1.9.3v1.5h3.3V9.5c0-1.1.4-1.9 1.1-2.3.4-.2 1.1-.4 1.8-.4.7 0 1.4.1 1.8.3 0 0 .7.4.7 2.1v.1h3.3V8.2z"/>
+</svg>

frontend/static/style.css

@@ -445,6 +445,33 @@ button:disabled {
   font-size: 0.82rem;
 }
 
+.mastodon-button {
+  clear: right;
+  float: right;
+  margin: 0 0 8px 16px;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  min-width: 0;
+  padding: 5px 9px;
+  border-radius: 6px;
+  background: var(--surface-1);
+  border-color: var(--surface-2);
+  color: var(--text);
+  font-size: 0.82rem;
+}
+
+.mastodon-button.posted {
+  background: var(--teal);
+  border-color: var(--teal);
+  color: var(--crust);
+}
+
+.mastodon-button img {
+  width: 15px;
+  height: 15px;
+}
+
 .edit-form {
   display: grid;
   gap: 12px;
@@ -493,7 +520,7 @@ button:disabled {
 }
 
 .link-item {
-  padding: 22px;
+  padding: 11px;
   background: rgba(49, 50, 68, 0.84);
   border: 1px solid var(--border);
   border-radius: 12px;