@rmdes/indiekit-endpoint-microsub 1.0.56 → 1.0.58

package/views/timeline.njk

@@ -8,7 +8,7 @@
         {% if channels.length > 0 %}
         <details class="ms-timeline-view__filter">
           <summary class="button button--secondary button--small">
-            Filter channels
+            {{ __("microsub.reader.filterChannels") }}
           </summary>
           <form action="{{ baseUrl }}/timeline" method="GET" class="ms-timeline-view__filter-form">
             {% for ch in channels %}
@@ -21,7 +21,7 @@
             </label>
             {% endif %}
             {% endfor %}
-            <button type="submit" class="button button--primary button--small">Apply</button>
+            <button type="submit" class="button button--primary button--small">{{ __("microsub.reader.apply") }}</button>
           </form>
         </details>
         {% endif %}
@@ -65,276 +65,5 @@
     {% endif %}
   </div>
 
-  <script type="module">
-    // CSRF token for AJAX requests
-    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || '';
-
-    const timeline = document.getElementById('timeline');
-    if (timeline) {
-      const items = Array.from(timeline.querySelectorAll('.ms-item-card'));
-      let currentIndex = -1;
-
-      function focusItem(index) {
-        if (items[currentIndex]) items[currentIndex].classList.remove('ms-item-card--focused');
-        currentIndex = Math.max(0, Math.min(index, items.length - 1));
-        if (items[currentIndex]) {
-          items[currentIndex].classList.add('ms-item-card--focused');
-          items[currentIndex].scrollIntoView({ behavior: 'smooth', block: 'center' });
-        }
-      }
-
-      document.addEventListener('keydown', (e) => {
-        if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
-        switch(e.key) {
-          case 'j': e.preventDefault(); focusItem(currentIndex + 1); break;
-          case 'k': e.preventDefault(); focusItem(currentIndex - 1); break;
-          case 'o': case 'Enter':
-            e.preventDefault();
-            if (items[currentIndex]) {
-              const link = items[currentIndex].querySelector('.ms-item-card__link');
-              if (link) link.click();
-            }
-            break;
-        }
-      });
-
-      // Handle individual mark-read buttons
-      const microsubApiUrl = '{{ baseUrl }}'.replace(/\/reader$/, '');
-
-      timeline.addEventListener('click', async (e) => {
-        const button = e.target.closest('.ms-item-actions__mark-read');
-        if (!button) return;
-
-        e.preventDefault();
-        e.stopPropagation();
-
-        const itemId = button.dataset.itemId;
-        const channelUid = button.dataset.channelUid;
-        const channelId = button.dataset.channelId;
-        if (!itemId || (!channelUid && !channelId)) return;
-
-        button.disabled = true;
-
-        try {
-          const formData = new URLSearchParams();
-          formData.append('action', 'timeline');
-          formData.append('method', 'mark_read');
-          formData.append('channel', channelUid || channelId);
-          formData.append('entry', itemId);
-
-          const response = await fetch(microsubApiUrl, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'X-CSRF-Token': csrfToken },
-            body: formData.toString(),
-            credentials: 'same-origin'
-          });
-
-          if (response.ok) {
-            const card = button.closest('.ms-item-card');
-            if (card) {
-              card.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
-              card.style.opacity = '0';
-              card.style.transform = 'translateX(-20px)';
-              setTimeout(() => {
-                const wrapper = card.closest('.ms-timeline-view__item');
-                if (wrapper) wrapper.remove();
-                else card.remove();
-                if (timeline.querySelectorAll('.ms-item-card').length === 0) {
-                  location.reload();
-                }
-              }, 300);
-            }
-          } else {
-            console.error('Failed to mark item as read');
-            button.disabled = false;
-          }
-        } catch (error) {
-          console.error('Error marking item as read:', error);
-          button.disabled = false;
-        }
-      });
-
-      // Handle caret toggle for mark-source-read popover
-      timeline.addEventListener('click', (e) => {
-        const caret = e.target.closest('.ms-item-actions__mark-read-caret');
-        if (!caret) return;
-
-        e.preventDefault();
-        e.stopPropagation();
-
-        // Close other open popovers
-        for (const p of timeline.querySelectorAll('.ms-item-actions__mark-read-popover:not([hidden])')) {
-          if (p !== caret.nextElementSibling) p.hidden = true;
-        }
-
-        const popover = caret.nextElementSibling;
-        if (popover) popover.hidden = !popover.hidden;
-      });
-
-      // Handle mark-source-read button
-      timeline.addEventListener('click', async (e) => {
-        const button = e.target.closest('.ms-item-actions__mark-source-read');
-        if (!button) return;
-
-        e.preventDefault();
-        e.stopPropagation();
-
-        const feedId = button.dataset.feedId;
-        const channelUid = button.dataset.channelUid;
-        const channelId = button.dataset.channelId;
-        if (!feedId || (!channelUid && !channelId)) return;
-
-        button.disabled = true;
-
-        try {
-          const formData = new URLSearchParams();
-          formData.append('action', 'timeline');
-          formData.append('method', 'mark_read_source');
-          formData.append('channel', channelUid || channelId);
-          formData.append('feed', feedId);
-
-          const response = await fetch(microsubApiUrl, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'X-CSRF-Token': csrfToken },
-            body: formData.toString(),
-            credentials: 'same-origin'
-          });
-
-          if (response.ok) {
-            // Animate out all cards from this feed
-            const cards = timeline.querySelectorAll(`.ms-item-card[data-feed-id="${feedId}"]`);
-            for (const card of cards) {
-              card.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
-              card.style.opacity = '0';
-              card.style.transform = 'translateX(-20px)';
-            }
-            setTimeout(() => {
-              for (const card of [...cards]) {
-                const wrapper = card.closest('.ms-timeline-view__item');
-                if (wrapper) wrapper.remove();
-                else card.remove();
-              }
-              if (timeline.querySelectorAll('.ms-item-card').length === 0) {
-                location.reload();
-              }
-            }, 300);
-          } else {
-            button.disabled = false;
-          }
-        } catch (error) {
-          console.error('Error marking source as read:', error);
-          button.disabled = false;
-        }
-      });
-
-      // Close popovers on outside click
-      document.addEventListener('click', (e) => {
-        if (!e.target.closest('.ms-item-actions__mark-read-group')) {
-          for (const p of timeline.querySelectorAll('.ms-item-actions__mark-read-popover:not([hidden])')) {
-            p.hidden = true;
-          }
-        }
-      });
-
-      // Handle save-for-later buttons
-      timeline.addEventListener('click', async (e) => {
-        const button = e.target.closest('.ms-item-actions__save-later');
-        if (!button) return;
-
-        e.preventDefault();
-        e.stopPropagation();
-
-        const url = button.dataset.url;
-        const title = button.dataset.title;
-        if (!url) return;
-
-        button.disabled = true;
-
-        try {
-          const response = await fetch('/readlater/save', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrfToken },
-            body: JSON.stringify({ url, title: title || url, source: 'microsub' }),
-            credentials: 'same-origin'
-          });
-
-          if (response.ok) {
-            button.classList.add('ms-item-actions__save-later--saved');
-            button.title = 'Saved';
-          } else {
-            button.disabled = false;
-          }
-        } catch {
-          button.disabled = false;
-        }
-      });
-
-      // === Infinite scroll ===
-      const loader = document.getElementById('timeline-loader');
-      if (loader && timeline) {
-        const spinner = loader.querySelector('.ms-timeline__spinner');
-        const loadMoreLink = loader.querySelector('.ms-timeline__load-more');
-        const endMessage = loader.querySelector('.ms-timeline__end');
-        let cursor = loader.dataset.cursor;
-        let loading = false;
-        let hasMore = true;
-        const apiUrl = loader.dataset.apiUrl;
-
-        async function loadMore() {
-          if (loading || !hasMore) return;
-          loading = true;
-          if (spinner) spinner.style.display = '';
-          if (loadMoreLink) loadMoreLink.style.display = 'none';
-
-          try {
-            const sep = apiUrl.includes('?') ? '&' : '?';
-            const response = await fetch(`${apiUrl}${sep}after=${encodeURIComponent(cursor)}`, {
-              credentials: 'same-origin'
-            });
-
-            if (!response.ok) throw new Error('Failed to load');
-
-            const data = await response.json();
-
-            if (data.html && data.count > 0) {
-              timeline.insertAdjacentHTML('beforeend', data.html);
-            }
-
-            if (data.paging?.after) {
-              cursor = data.paging.after;
-              if (loadMoreLink) {
-                loadMoreLink.href = `?after=${cursor}`;
-                loadMoreLink.style.display = '';
-              }
-            } else {
-              hasMore = false;
-              if (loadMoreLink) loadMoreLink.style.display = 'none';
-              if (endMessage) endMessage.style.display = '';
-            }
-          } catch (error) {
-            console.error('Infinite scroll error:', error);
-            hasMore = false;
-            if (loadMoreLink) loadMoreLink.style.display = '';
-          } finally {
-            loading = false;
-            if (spinner) spinner.style.display = 'none';
-          }
-        }
-
-        const observer = new IntersectionObserver((entries) => {
-          if (entries[0].isIntersecting && hasMore && !loading) {
-            loadMore();
-          }
-        }, { rootMargin: '200px' });
-        observer.observe(loader);
-
-        if (loadMoreLink) {
-          loadMoreLink.addEventListener('click', (e) => {
-            e.preventDefault();
-            loadMore();
-          });
-        }
-      }
-    }
-  </script>
+  <script type="module" src="/assets/@rmdes-indiekit-endpoint-microsub/reader.js"></script>
 {% endblock %}