Character count in firefox plugin

webextension/popup.js

@@ -14,10 +14,14 @@ const authWarning = document.getElementById('auth-warning');
 const warningSettingsButton = document.getElementById('warning-settings');
 const authSession = document.getElementById('auth-session');
 const refetchTitleButton = document.getElementById('refetch-title');
+const characterCountEl = document.getElementById('character-count');
 const sessionStore = browser.storage.session;
 
 const t = window.linklogI18n;
 
+let maxPostCharacters = 500;
+let mastodonPostPrefix = 'From my #LinkLog: ';
+
 function normalizeBackendOrigin(backendUrl) {
   try {
     const url = new URL(backendUrl);
@@ -192,9 +196,11 @@ async function loadExistingTags() {
     const checkbox = document.createElement('input');
     checkbox.type = 'checkbox';
     checkbox.value = tag;
+    checkbox.addEventListener('change', updateCharacterCount);
     label.append(checkbox, document.createTextNode(` ${tag}`));
     return label;
   }));
+  updateCharacterCount();
 }
 
 function getTags() {
@@ -203,6 +209,79 @@ function getTags() {
   return [...new Set([...selected, ...newTags])].slice(0, 10);
 }
 
+// Load public app settings (e.g. the Mastodon post length limit) once a backend is configured.
+async function loadConfig() {
+  const settings = await getSettings();
+  if (!settings.backendUrl || !(await hasBackendPermission(settings.backendUrl))) return;
+  try {
+    const response = await fetch(`${settings.backendUrl}/api/public/config`);
+    if (!response.ok) return;
+    const config = await response.json();
+    if (config.max_post_characters) maxPostCharacters = config.max_post_characters;
+  } catch (error) {
+    // Character-count warning is advisory; ignore config load failures.
+  }
+  updateCharacterCount();
+}
+
+// Load the user's configured Mastodon post prefix, so the estimated post length matches the server.
+async function loadMastodonPrefix() {
+  const settings = await getSettings();
+  if (!settings.backendUrl || !settings.accessToken || !(await hasBackendPermission(settings.backendUrl))) return;
+  try {
+    const response = await fetch(`${settings.backendUrl}/api/user/plugins/mastodon`, {
+      headers: {'Authorization': `Bearer ${settings.accessToken}`},
+    });
+    if (!response.ok) return;
+    const config = await response.json();
+    if (config.post_prefix) {
+      mastodonPostPrefix = config.post_prefix;
+    } else if (config.hashtag) {
+      mastodonPostPrefix = `#${String(config.hashtag).trim().replace(/^#/, '')} `;
+    }
+  } catch (error) {
+    // Character-count warning is advisory; ignore config load failures.
+  }
+  updateCharacterCount();
+}
+
+// Format a UTC timestamp the same way the Mastodon plugin does, so the estimated post length matches the server.
+function formatMastodonTimestamp(date) {
+  const months = [
+    'January', 'February', 'March', 'April', 'May', 'June',
+    'July', 'August', 'September', 'October', 'November', 'December',
+  ];
+  const pad = (value) => String(value).padStart(2, '0');
+  return `${date.getUTCFullYear()} ${months[date.getUTCMonth()]} ${pad(date.getUTCDate())} - ${pad(date.getUTCHours())}:${pad(date.getUTCMinutes())}`;
+}
+
+// Estimate the assembled Mastodon post length, mirroring backend/app/services/plugin_manager.py.
+function estimatePostLength() {
+  const title = titleInput.value.trim();
+  const comment = commentInput.value.trim();
+  const url = removeKnownTrackingParams(urlInput.value.trim());
+  const parts = [mastodonPostPrefix.trim()];
+  if (title) parts.push(title);
+  if (comment) parts.push(comment);
+  if (title) parts.push(`Logged on ${formatMastodonTimestamp(new Date())} UTC from: ${url}`);
+  const tags = getTags();
+  if (tags.length) parts.push(tags.join(' '));
+  return parts.join('\n\n').length;
+}
+
+function updateCharacterCount() {
+  const length = estimatePostLength();
+  const overLimit = length > maxPostCharacters;
+  characterCountEl.textContent = overLimit
+    ? t('characterCountOverLimit', [String(length), String(maxPostCharacters), String(length - maxPostCharacters)])
+    : t('characterCount', [String(length), String(maxPostCharacters)]);
+  characterCountEl.classList.toggle('over-limit', overLimit);
+}
+
+[titleInput, urlInput, commentInput, newTagsInput].forEach((input) => {
+  input.addEventListener('input', updateCharacterCount);
+});
+
 function removeKnownTrackingParams(urlString) {
   try {
     const url = new URL(urlString);
@@ -361,6 +440,8 @@ refetchTitleButton.addEventListener('click', (e) => {
   titleInput.value = '';
   fetchTitle(url, { force: true });
 });
-populateCurrentTab().then(checkExistingLink);
+populateCurrentTab().then(checkExistingLink).then(updateCharacterCount);
 loadExistingTags();
 updateFeedLink();
+loadConfig();
+loadMastodonPrefix();