Tag functionality added

webextension/popup.js

@@ -4,6 +4,8 @@ const titleInput = document.getElementById('title');
 const urlInput = document.getElementById('url');
 const commentInput = document.getElementById('comment');
 const openSettingsButton = document.getElementById('open-settings');
+const existingTags = document.getElementById('existing-tags');
+const newTagsInput = document.getElementById('new-tags');
 
 function setStatus(message, isError = false) {
   statusEl.textContent = message;
@@ -21,6 +23,36 @@ async function getSettings() {
   return result;
 }
 
+async function loadExistingTags() {
+  const settings = await getSettings();
+  if (!settings.backendUrl || !settings.accessToken) {
+    existingTags.textContent = 'Sign in to select existing tags.';
+    return;
+  }
+  const response = await fetch(`${settings.backendUrl}/api/tags`, {
+    headers: {'Authorization': `Bearer ${settings.accessToken}`},
+  });
+  if (!response.ok) {
+    existingTags.textContent = 'Could not load existing tags.';
+    return;
+  }
+  const tags = await response.json();
+  existingTags.replaceChildren(...tags.map((tag) => {
+    const label = document.createElement('label');
+    const checkbox = document.createElement('input');
+    checkbox.type = 'checkbox';
+    checkbox.value = tag;
+    label.append(checkbox, document.createTextNode(` ${tag}`));
+    return label;
+  }));
+}
+
+function getTags() {
+  const selected = [...existingTags.querySelectorAll('input:checked')].map((input) => input.value);
+  const newTags = newTagsInput.value.split(',').map((tag) => tag.trim()).filter((tag) => tag.startsWith('#'));
+  return [...new Set([...selected, ...newTags])].slice(0, 10);
+}
+
 function removeKnownTrackingParams(urlString) {
   try {
     const url = new URL(urlString);
@@ -72,6 +104,7 @@ async function handleSubmit(event) {
         url: removeKnownTrackingParams(urlInput.value),
         comment: commentInput.value,
         timestamp: new Date().toISOString(),
+        tags: getTags(),
       })
     });
 
@@ -94,3 +127,4 @@ async function handleSubmit(event) {
 openSettingsButton.addEventListener('click', () => browser.runtime.openOptionsPage());
 form.addEventListener('submit', handleSubmit);
 populateCurrentTab();
+loadExistingTags();