initial support for Lycan like search

index.html

···
     font-src 'self';
     script-src-attr 'none';
     style-src-attr 'none';
-    connect-src https:;
+    connect-src https: http://localhost:3000;
     base-uri 'none';
     form-action 'none';">
 
···
   <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>
+    <div class="timeline-search">
+      <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>
+          <input type="submit" value="Fetch timeline"> <progress></progress>
+        </p>
+      </form>
 
-    <p class="archive-status"></p>
+      <p class="archive-status"></p>
 
-    <hr>
+      <hr>
+    </div>
 
-    <p class="search">Search: <input type="text" class="search-query"></p>
+    <p class="search">Search: <input type="text" class="search-query" autocomplete="off"></p>
 
     <div class="results">
     </div>

private_search_page.js

···
     this.timelinePosts = [];
 
     this.setupEvents();
+
+    let params = new URLSearchParams(location.search);
+    this.mode = params.get('mode');
+    this.lycanMode = params.get('lycan');
+
+    if (this.lycanMode == 'local') {
+      this.lycan = new BlueskyAPI('http://localhost:3000', false);
+    }
   }
 
   setupEvents() {
···
       label.innerText = (days == 1) ? '1 day' : `${days} days`;
     });
 
-    this.searchField.addEventListener('input', (e) => {
-      let query = this.searchField.value.trim().toLowerCase();
+    this.searchField.addEventListener('keydown', (e) => {
+      if (e.key == 'Enter') {
+        e.preventDefault();
 
-      if (this.searchTimer) {
-        clearTimeout(this.searchTimer);
+        let query = this.searchField.value.trim().toLowerCase();
+
+        if (this.mode == 'likes') {
+          this.searchInLycan(query);
+        } else {
+          this.searchInTimeline(query);
+        }
       }
-
-      this.searchTimer = setTimeout(() => this.searchInTimeline(query), 100);
     });
   }
 
···
 
   show() {
     this.pageElement.style.display = 'block';
+
+    if (this.mode == 'likes') {
+      this.pageElement.querySelector('.timeline-search').style.display = 'none';
+      this.searchLine.style.display = 'block';
+    } else {
+      this.pageElement.querySelector('.timeline-search').style.display = 'block';
+    }
   }
 
   /** @returns {Promise<void>} */
···
     for (let post of matching) {
       let postView = new PostComponent(post, 'feed').buildElement();
       this.results.appendChild(postView);
+    }
+  }
+
+  /** @param {string} query */
+
+  async searchInLycan(query) {
+    if (query.length == 0) {
+      this.results.innerHTML = '';
+      return;
+    }
+
+    this.results.innerHTML = '...';
+
+    if (this.lycanMode == 'local') {
+      let response = await this.lycan.getRequest('blue.feeds.lycan.searchPosts', { query: query, user: window.accountAPI.user.did });
+
+      if (response.posts.length == 0) {
+        this.results.innerHTML = "No results.";
+        return;
+      }
+
+      let records = await window.accountAPI.loadPosts(response.posts);
+      let posts = records.map(x => new Post(x));
+
+      this.results.innerHTML = '';
+
+      for (let post of posts) {
+        let postView = new PostComponent(post, 'feed').buildElement();
+        this.results.appendChild(postView);
+      }
     }
   }
 

style.css

···
   margin-left: 8px;
 }
 
+#private_search_page .results > .post {
+  padding-left: 0;
+}
+
 @media (prefers-color-scheme: dark) {
   body {
     background-color: rgb(39, 39, 37);