feat: implement import/export for followed actors list

followed-accounts.css

@@ -4,12 +4,22 @@ html {
 }
 
 .followed-container {
+  color: var(--rdp-text-color);
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-top: 20px;
 }
 
+.imp-exp-btn {
+  margin-bottom: 20px;
+}
+
+.cache-warning-msg {
+  font-size: 0.775em;
+  margin-top: 10px;
+}
+
 followed-actors-list {
   text-align: left;
   color: var(--rdp-text-color);

followed-accounts.html

@@ -9,10 +9,46 @@
 <div class="followed-container">
   <p>
     You're following
-    <followed-count id="followCount"></followed-count> accounts.<br /><span
-      >Import and export followed list coming soon..</span
+    <b> <followed-count id="followCount"></followed-count> accounts </b>on the
+    fediverse.<br />
+    <span
+      >To sync your list of followed accounts across multiple devices, be sure
+      to ⬆️ export your followed list from one device and 📥 import it on the
+      other.</span
     >
   </p>
+  <div class="imp-exp-btn">
+    <button id="exportFollowedList">Export</button>
+    <button id="importFollowedList">Import</button>
+    <input type="file" id="fileInput" style="display: none" accept=".json" />
+  </div>
   <followed-actors-list></followed-actors-list>
+  <span class="cache-warning-msg"
+    >⚠️ Before clearing your browser's cache, ensure you export your followed
+    list.</span
+  >
 </div>
+<script>
+  document
+    .getElementById("exportFollowedList")
+    .addEventListener("click", () => {
+      window.dispatchEvent(new CustomEvent("exportFollowed"));
+    });
+
+  document
+    .getElementById("importFollowedList")
+    .addEventListener("click", () => {
+      document.getElementById("fileInput").click();
+    });
+
+  document.getElementById("fileInput").addEventListener("change", function () {
+    if (this.files[0]) {
+      const event = new CustomEvent("importFollowed", {
+        detail: { file: this.files[0] },
+      });
+      window.dispatchEvent(event);
+      this.value = "";
+    }
+  });
+</script>
 <script type="module" src="followed-accounts.js"></script>

followed-accounts.js

@@ -7,12 +7,42 @@ class FollowedActorsList extends HTMLElement {
 
   connectedCallback () {
     this.renderFollowedActors()
+
+    window.addEventListener(
+      'exportFollowed',
+      FollowedActorsList.exportFollowedList
+    )
+
+    window.addEventListener('importFollowed', (e) => {
+      FollowedActorsList.importFollowedList(e.detail.file)
+    })
+
+    // Listen for the custom event to refresh the list and count
+    window.addEventListener('followedActorsUpdated', async () => {
+      await this.renderFollowedActors()
+      document.getElementById('followCount').updateCountOnLoad()
+    })
+  }
+
+  disconnectedCallback () {
+    window.removeEventListener(
+      'exportFollowed',
+      FollowedActorsList.exportFollowedList
+    )
+    window.removeEventListener(
+      'importFollowed',
+      FollowedActorsList.importFollowedList
+    )
+    window.removeEventListener(
+      'followedActorsUpdated',
+      this.renderFollowedActors
+    )
   }
 
   async renderFollowedActors () {
     const followedActors = await db.getFollowedActors()
     this.innerHTML = ''
-    followedActors.forEach(actor => {
+    followedActors.forEach((actor) => {
       const actorElement = document.createElement('div')
       const formattedDate = this.formatDate(actor.followedAt)
 
@@ -35,6 +65,36 @@ class FollowedActorsList extends HTMLElement {
     const date = new Date(dateString)
     return date.toLocaleDateString('en-US', options)
   }
+
+  static async exportFollowedList () {
+    const followedActors = await db.getFollowedActors()
+    const blob = new Blob([JSON.stringify(followedActors, null, 2)], {
+      type: 'application/json'
+    })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = 'reader-followed-accounts.json'
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    URL.revokeObjectURL(url)
+  }
+
+  static async importFollowedList (file) {
+    const reader = new FileReader()
+    reader.onload = async (e) => {
+      const followedActors = JSON.parse(e.target.result)
+      for (const actor of followedActors) {
+        if (!(await db.isActorFollowed(actor.url))) {
+          await db.followActor(actor.url)
+        }
+      }
+      // After import, dispatch a custom event to notify the component
+      window.dispatchEvent(new CustomEvent('followedActorsUpdated'))
+    }
+    reader.readAsText(file)
+  }
 }
 
 customElements.define('followed-actors-list', FollowedActorsList)