added beta version of timeline search

index.html

···
     </table>
   </div>
 
+  <div id="private_search_page">
+    <h2>Archive search *Beta*</h2>
+
+    <form>
+      <p>
+        Fetch timeline posts: <input type="range" min="1" max="60" value="7"> <label>7 days</label>
+      </p>
+
+      <p>
+        <input type="submit" value="Fetch timeline"> <progress></progress>
+      </p>
+    </form>
+
+    <p class="archive-status"></p>
+
+    <hr>
+
+    <p class="search">Search: <input type="text" class="search-query"></p>
+
+    <div class="results">
+    </div>
+  </div>
+
   <script src="lib/purify.min.js"></script>
   <script src="minisky.js"></script>
   <script src="api.js"></script>
···
   <script src="posting_stats_page.js"></script>
   <script src="like_stats_page.js"></script>
   <script src="notifications_page.js"></script>
+  <script src="private_search_page.js"></script>
   <script src="embed_component.js"></script>
   <script src="post_component.js"></script>
   <script src="skythread.js"></script>

models.js

···
     return this.record.text;
   }
 
+  /** @returns {string} */
+  get lowercaseText() {
+    if (!this._lowercaseText) {
+      this._lowercaseText = this.record.text.toLowerCase();
+    }
+
+    return this._lowercaseText;
+  }
+
   /** @returns {json} */
   get facets() {
     return this.record.facets;

private_search_page.js

···
+class PrivateSearchPage {
+
+  /** @type {number | undefined} */
+  fetchStartTime;
+
+  constructor() {
+    this.pageElement = $id('private_search_page');
+
+    this.rangeInput = $(this.pageElement.querySelector('input[type="range"]'), HTMLInputElement);
+    this.submitButton = $(this.pageElement.querySelector('input[type="submit"]'), HTMLInputElement);
+    this.progressBar = $(this.pageElement.querySelector('input[type="submit"] + progress'), HTMLProgressElement);
+    this.archiveStatus = $(this.pageElement.querySelector('.archive-status'));
+
+    this.searchLine = $(this.pageElement.querySelector('.search'));
+    this.searchField = $(this.pageElement.querySelector('.search-query'), HTMLInputElement);
+    this.results = $(this.pageElement.querySelector('.results'));
+
+    this.timelinePosts = [];
+
+    this.setupEvents();
+  }
+
+  setupEvents() {
+    $(this.pageElement.querySelector('form')).addEventListener('submit', (e) => {
+      e.preventDefault();
+
+      if (!this.fetchStartTime) {
+        this.fetchTimeline();      
+      } else {
+        this.stopFetch();
+      }
+    });
+
+    this.rangeInput.addEventListener('input', (e) => {
+      let days = parseInt(this.rangeInput.value, 10);
+      let label = $(this.pageElement.querySelector('input[type=range] + label'));
+      label.innerText = (days == 1) ? '1 day' : `${days} days`;
+    });
+
+    this.searchField.addEventListener('input', (e) => {
+      let query = this.searchField.value.trim().toLowerCase();
+
+      if (this.searchTimer) {
+        clearTimeout(this.searchTimer);
+      }
+
+      this.searchTimer = setTimeout(() => this.searchInTimeline(query), 100);
+    });
+  }
+
+  /** @returns {number} */
+
+  selectedDaysRange() {
+    return parseInt(this.rangeInput.value, 10);
+  }
+
+  show() {
+    this.pageElement.style.display = 'block';
+  }
+
+  /** @returns {Promise<void>} */
+
+  async fetchTimeline() {
+    this.submitButton.value = 'Cancel';
+
+    let requestedDays = this.selectedDaysRange();
+
+    this.progressBar.max = requestedDays;
+    this.progressBar.value = 0;
+    this.progressBar.style.display = 'inline';
+
+    let startTime = new Date().getTime();
+    this.fetchStartTime = startTime;
+
+    let timeline = await accountAPI.loadTimeline(requestedDays, {
+      onPageLoad: (data) => {
+        if (this.fetchStartTime != startTime) {
+          return { cancel: true };
+        }
+
+        this.updateProgress(data, startTime);
+      }
+    });
+
+    if (this.fetchStartTime != startTime) {
+      return;
+    }
+
+    let last = timeline.at(-1);
+    let daysBack;
+
+    if (last) {
+      let lastTimestamp = last.reason ? last.reason.indexedAt : last.post.record.createdAt;
+      let lastDate = Date.parse(lastTimestamp);
+      daysBack = Math.round((startTime - lastDate) / 86400 / 1000);
+    } else {
+      daysBack = 0;
+    }
+
+    this.timelinePosts = timeline.map(x => Post.parseFeedPost(x));
+
+    this.archiveStatus.innerText = "Timeline archive fetched: " + ((daysBack == 1) ? '1 day' : `${daysBack} days`);
+    this.searchLine.style.display = 'block';
+
+    this.submitButton.value = 'Fetch timeline';
+    this.progressBar.style.display = 'none';
+    this.fetchStartTime = undefined;
+  }
+
+  searchInTimeline(query) {
+    this.results.innerHTML = '';
+
+    if (query.length == 0) {
+      return;
+    }
+
+    let matching = this.timelinePosts.filter(x => x.lowercaseText.includes(query));
+
+    for (let post of matching) {
+      let postView = new PostComponent(post, 'feed').buildElement();
+      this.results.appendChild(postView);
+    }
+  }
+
+  /** @param {json[]} dataPage, @param {number} startTime */
+
+  updateProgress(dataPage, startTime) {
+    if (dataPage.length == 0) { return }
+
+    let last = dataPage[dataPage.length - 1];
+    let lastTimestamp = last.reason ? last.reason.indexedAt : last.post.record.createdAt;
+    let lastDate = Date.parse(lastTimestamp);
+
+    let daysBack = (startTime - lastDate) / 86400 / 1000;
+    this.progressBar.value = daysBack;    
+  }
+
+  stopFetch() {
+    this.submitButton.value = 'Fetch timeline';
+    this.progressBar.style.display = 'none';
+    this.fetchStartTime = undefined;
+  }
+}

skythread.js

···
   window.postingStatsPage = new PostingStatsPage();
   window.likeStatsPage = new LikeStatsPage();
   window.notificationsPage = new NotificationsPage();
+  window.privateSearchPage = new PrivateSearchPage();
 
   $(document.querySelector('#search form')).addEventListener('submit', (e) => {
     e.preventDefault();
···
     window.postingStatsPage.show();
   } else if (page == 'like_stats') {
     window.likeStatsPage.show();
+  } else if (page == 'search') {
+    window.privateSearchPage.show();
   }
 }
 

style.css

···
   padding: 2px;  
 }
 
+#private_search_page {
+  display: none;
+}
+
+#private_search_page input[type="range"] {
+  width: 250px;
+  vertical-align: middle;
+}
+
+#private_search_page input[type="submit"] {
+  font-size: 12pt;
+  margin: 5px 0px;
+  padding: 5px 10px;
+}
+
+#private_search_page progress {
+  width: 300px;
+  margin-left: 10px;
+  vertical-align: middle;
+  display: none;
+}
+
+#private_search_page .search {
+  display: none;
+}
+
+#private_search_page .search-query {
+  font-size: 12pt;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  padding: 5px 6px;
+  margin-left: 8px;
+}
+
 @media (prefers-color-scheme: dark) {
   body {
     background-color: rgb(39, 39, 37);
···
 
   #like_stats_page .scan-result th {
     background-color: hsl(207, 90%, 25%);
+  }
+
+  #private_search_page .search-query {
+    border: 1px solid #666;
   }
 }

types.d.ts

···
 declare var postingStatsPage: PostingStatsPage;
 declare var likeStatsPage: LikeStatsPage;
 declare var notificationsPage: NotificationsPage;
+declare var privateSearchPage: PrivateSearchPage;
 
 type json = Record<string, any>;