Merge branch 'biohazard'

api.js

···
     return this.handleCache.findHandleByDid(did);
   }
 
+  /** @param {string} did, @returns {Promise<string>} */
+
+  async fetchHandleForDid(did) {
+    let cachedHandle = this.handleCache.findHandleByDid(did);
+
+    if (cachedHandle) {
+      return cachedHandle;
+    } else {
+      let author = await this.loadUserProfile(did);
+      return author.handle;
+    }
+  }
+
   /** @param {string} string, @returns {[string, string]} */
 
   static parsePostURL(string) {
···
   async loadThreadById(author, postId) {
     let did = author.startsWith('did:') ? author : await this.resolveHandle(author);
     let postURI = `at://${did}/app.bsky.feed.post/${postId}`;
-    let threadJSON = await this.getRequest('app.bsky.feed.getPostThread', { uri: postURI, depth: 10 });
-    return threadJSON;
+    return await this.loadThreadByAtURI(postURI);
+  }
+
+  /** @param {string} uri, @returns {Promise<json>} */
+
+  async loadThreadByAtURI(uri) {
+    return await this.getRequest('app.bsky.feed.getPostThread', { uri: uri, depth: 10 });
   }
 
   /** @param {string} handle, @returns {Promise<json>} */
···
     }
   }
 
+  /** @param {string} uri, @returns {Promise<json[]>} */
+
+  async getReplies(uri) {
+    let json = await this.getRequest('blue.feeds.post.getReplies', { uri });
+    return json.replies;
+  }
+  
   /** @param {string} uri, @returns {Promise<number>} */
 
   async getQuoteCount(uri) {
-    let json = await this.getRequest('eu.mackuba.private.getQuoteCount', { uri });
+    let json = await this.getRequest('blue.feeds.post.getQuoteCount', { uri });
     return json.quoteCount;
   }
 
···
       params['cursor'] = cursor;
     }
 
-    return await this.getRequest('eu.mackuba.private.getPostQuotes', params);
+    return await this.getRequest('blue.feeds.post.getQuotes', params);
   }
 
   /** @param {string} hashtag, @param {string | undefined} cursor, @returns {Promise<json>} */
···
   /** @param {string} postURI, @returns {Promise<json>} */
 
   async loadPost(postURI) {
+    let posts = await this.loadPosts([postURI]);
+
+    if (posts.length == 1) {
+      return posts[0];
+    } else {
+      throw new ResponseDataError('Post not found');
+    }
+  }
+
+  /** @param {string} postURI, @returns {Promise<json | undefined>} */
+
+  async loadPostIfExists(postURI) {
     let posts = await this.loadPosts([postURI]);
     return posts[0];
   }

embed_component.js

···
     let div = $tag('div.quote-embed');
 
     if (embed.post instanceof Post || embed.post instanceof BlockedPost) {
-      let postView = new PostComponent(embed.post).buildElement('quote');
+      let postView = new PostComponent(embed.post, 'quote').buildElement();
       div.appendChild(postView);
 
     } else if (embed.post instanceof MissingPost) {
-      let postView = new PostComponent(embed.post).buildElement('quote');
+      let postView = new PostComponent(embed.post, 'quote').buildElement();
       div.appendChild(postView);
 
     } else if (embed.post instanceof FeedGeneratorRecord) {
···
   /** @param {string} uri, @param {AnyElement} div, @returns Promise<void> */
 
   async loadQuotedPost(uri, div) {
-    let result = await api.loadPost(uri);
-    let post = new Post(result);
+    let record = await api.loadPostIfExists(uri);
 
-    let postView = new PostComponent(post).buildElement('quote');
-    div.replaceChildren(postView);
+    if (record) {
+      let post = new Post(record);
+      let postView = new PostComponent(post, 'quote').buildElement();
+      div.replaceChildren(postView);
+    } else {
+      let post = new MissingPost(this.embed.record);
+      let postView = new PostComponent(post, 'quote').buildElement();
+      div.replaceChildren(postView);
+    }
   }
 }

index.html

···
 
   <div id="account_menu">
     <ul>
-      <li><a href="#" data-action="incognito" title="Temporarily load threads as a logged-out user">Incognito mode</a></li>
+      <li><a href="#" data-action="incognito"
+        title="Temporarily load threads as a logged-out user"><span class="check">✓ </span>Incognito mode</a></li>
+
+      <li><a href="#" data-action="biohazard"
+        title="Show links to blocked and hidden comments"><span class="check">✓ </span>Show infohazards</a></li>
+
+      <li><a href="#" data-action="login">Log in</a></li>
       <li><a href="#" data-action="logout">Log out</a></li>
     </ul>
   </div>
 
-  <div id="login">
+  <div id="thread">
+  </div>
+
+  <div id="login" class="dialog">
     <form method="get">
       <i class="close fa-circle-xmark fa-regular"></i>
       <h2>🌤 Skythread</h2>
···
     </form>
   </div>
 
-  <div id="thread">
+  <div id="biohazard_dialog" class="dialog">
+    <form method="get">
+      <i class="close fa-circle-xmark fa-regular"></i>
+      <h2>☣️ Infohazard Warning</h2>
+      <p>&ldquo;<em>This thread is not a place of honor... no highly esteemed post is commemorated here... nothing valued is here.</em>&rdquo;</p>
+      <p>This feature allows access to comments in a thread which were hidden because one of the commenters has blocked another. Bluesky currently hides such comments to avoid escalating conflicts.</p>
+      <p>Are you sure you want to enter?<br>(You can toggle this in the menu in top-left corner.)</p>
+      <p class="submit">
+        <input type="submit" id="biohazard_show" value="Show me the drama 😈">
+        <input type="submit" id="biohazard_hide" value="Nope, I'd rather not 🙈">
+      </p>
+    </form>
   </div>
 
   <script src="lib/purify.min.js"></script>

models.js

···
  */
 
 class Post extends ATProtoRecord {
-  /** @type {ATProtoRecord | undefined} */
+  /**
+   * Post object which is the direct parent of this post.
+   * @type {ATProtoRecord | undefined}
+   */
   parent;
 
-  /** @type {ATProtoRecord | undefined} */
-  root;
+  /**
+   * Post object which is the root of the whole thread (as specified in the post record).
+   * @type {ATProtoRecord | undefined}
+   */
+  threadRoot;
+
+  /**
+   * Post which is at the top of the (sub)thread currently loaded on the page (might not be the same as threadRoot).
+   * @type {Post | undefined}
+   */
+  pageRoot;
 
-  /** @type {object | undefined} */
+  /**
+   * Depth of the post in the getPostThread response it was loaded from, starting from 0. May be negative.
+   * @type {number | undefined}
+   */
+  level;
+
+  /**
+   * Depth of the post in the whole tree visible on the page (pageRoot's absoluteLevel is 0). May be negative.
+   * @type {number | undefined}
+   */
+  absoluteLevel;
+
+  /**
+   * For posts in feeds and timelines - specifies e.g. that a post was reposted by someone.
+   * @type {object | undefined}
+   */
   reason;
 
-  /** @type {boolean | undefined} */
+  /**
+   * True if the post was extracted from inner embed of a quote, not from a #postView.
+   * @type {boolean | undefined}
+   */
   isEmbed;
 
   /**
    * View of a post as part of a thread, as returned from getPostThread.
    * Expected to be #threadViewPost, but may be blocked or missing.
    *
-   * @param {json} json, @returns {AnyPost}
+   * @param {json} json
+   * @param {Post?} [pageRoot]
+   * @param {number} [level]
+   * @param {number} [absoluteLevel]
+   * @returns {AnyPost}
    */
 
-  static parseThreadPost(json) {
+  static parseThreadPost(json, pageRoot = null, level = 0, absoluteLevel = 0) {
     switch (json.$type) {
     case 'app.bsky.feed.defs#threadViewPost':
-      let post = new Post(json.post);
+      let post = new Post(json.post, { level: level, absoluteLevel: absoluteLevel });
+
+      post.pageRoot = pageRoot ?? post; 
 
       if (json.replies) {
-        post.setReplies(json.replies.map(x => Post.parseThreadPost(x)));
+        let replies = json.replies.map(x => Post.parseThreadPost(x, post.pageRoot, level + 1, absoluteLevel + 1));
+        post.setReplies(replies);
       }
 
-      if (json.parent) {
-        post.parent = Post.parseThreadPost(json.parent);
+      if (absoluteLevel <= 0 && json.parent) {
+        post.parent = Post.parseThreadPost(json.parent, post.pageRoot, level - 1, absoluteLevel - 1);
       }
 
       return post;
···
 
     if (json.reply) {
       post.parent = Post.parsePostView(json.reply.parent);
-      post.root = Post.parsePostView(json.reply.root);
+      post.threadRoot = Post.parsePostView(json.reply.root);
+
+      if (json.reply.grandparentAuthor) {
+        post.grandparentAuthor = json.reply.grandparentAuthor;
+      }
     }
 
     if (json.reason) {
···
     super(data);
     Object.assign(this, extra ?? {});
 
+    if (this.absoluteLevel === 0) {
+      this.pageRoot = this;
+    }
+
     this.record = this.isPostView ? data.record : data.value;
 
     if (this.isPostView && data.embed) {
···
     }
   }
 
+  /** @param {Post} post */
+
+  updateDataFromPost(post) {
+    this.record = post.record;
+    this.embed = post.embed;
+    this.author = post.author;
+    this.replies = post.replies;
+    this.viewerData = post.viewerData;
+    this.viewerLike = post.viewerLike;
+    this.level = post.level;
+    this.absoluteLevel = post.absoluteLevel;
+  }
+
   /** @param {AnyPost[]} replies */
 
   setReplies(replies) {
···
     return this.record.bridgyOriginalText;
   }
 
+  /** @returns {boolean} */
+  get isRoot() {
+    // I AM ROOOT
+    return (this.pageRoot === this);
+  }
+
   /** @returns {string} */
   get authorFediHandle() {
     if (this.isFediPost) {
···
 
   /** @returns {boolean} */
   get hasMoreReplies() {
-    return this.replyCount !== undefined && this.replyCount !== this.replies.length;
+    let shouldHaveMoreReplies = (this.replyCount !== undefined && this.replyCount > this.replies.length);
+
+    return shouldHaveMoreReplies && (this.replies.length === 0) && (this.level !== undefined && this.level > 4);
+  }
+
+  /** @returns {boolean} */
+  get hasHiddenReplies() {
+    let shouldHaveMoreReplies = (this.replyCount !== undefined && this.replyCount > this.replies.length);
+
+    return shouldHaveMoreReplies && (this.replies.length > 0 || (this.level !== undefined && this.level <= 4));
   }
 
   /** @returns {number} */

post_component.js

···
  */
 
 class PostComponent {
-  /** @param {Post} post, @param {Post} [root] */
-  constructor(post, root) {
-    this.post = post;
-    this.root = root ?? post;
-    this.isRoot = (this.post === this.root);
+  /**
+    Contexts:
+    - thread - a post in the thread tree
+    - parent - parent reference above the thread root
+    - quote - a quote embed
+    - quotes - a post on the quotes page
+    - feed - a post on the hashtag feed page
+
+    @typedef {'thread' | 'parent' | 'quote' | 'quotes' | 'feed'} PostContext
+    @param {AnyPost} post, @param {PostContext} context
+  */
+  constructor(post, context) {
+    this.post = /** @type {Post}, TODO */ (post);
+    this.context = context;
+  }
+
+  /** @returns {boolean} */
+  get isRoot() {
+    return this.post.isRoot;
   }
 
   /** @returns {string} */
···
 
   /** @returns {json} */
   get timeFormatForTimestamp() {
-    if (this.isRoot) {
+    if (this.isRoot || this.context != 'thread') {
       return { day: 'numeric', month: 'short', year: 'numeric', hour: 'numeric', minute: 'numeric' };
-    } else if (!sameDay(this.post.createdAt, this.root.createdAt)) {
+    } else if (this.post.pageRoot && !sameDay(this.post.createdAt, this.post.pageRoot.createdAt)) {
       return { day: 'numeric', month: 'short', hour: 'numeric', minute: 'numeric' };
     } else {
       return { hour: 'numeric', minute: 'numeric' };
     }
   }
 
-  /**
-    Contexts:
-    - thread - a post in the thread tree
-    - parent - parent reference above the thread root
-    - quote - a quote embed
-    - quotes - a post on the quotes page
-    - feed - a post on the hashtag feed page
-
-    @typedef {'thread' | 'parent' | 'quote' | 'quotes' | 'feed'} PostContext
-    @param {PostContext} context
-    @returns {AnyElement}
-  */
-
-  buildElement(context) {
+  /** @returns {AnyElement} */
+  buildElement() {
     let div = $tag('div.post');
 
     if (this.post.muted) {
···
       return div;      
     }
 
-    let header = this.buildPostHeader(context);
+    let header = this.buildPostHeader();
     div.appendChild(header);
 
     let content = $tag('div.content');
 
-    if (!this.isRoot) {
+    if (this.context == 'thread' && !this.isRoot) {
       let edge = $tag('div.edge');
       let line = $tag('div.line');
       edge.appendChild(line);
···
     }
 
     if (this.post.replies.length == 1 && this.post.replies[0].author?.did == this.post.author.did) {
-      let component = new PostComponent(this.post.replies[0], this.root);
-      let element = component.buildElement('thread');
+      let component = new PostComponent(this.post.replies[0], 'thread');
+      let element = component.buildElement();
       element.classList.add('flat');
       content.appendChild(element);
     } else {
       for (let reply of this.post.replies) {
         if (reply instanceof MissingPost) { continue }
+        if (reply instanceof BlockedPost && window.biohazardEnabled === false) { continue }
 
-        let component = new PostComponent(reply, this.root);
-        content.appendChild(component.buildElement('thread'));
+        let component = new PostComponent(reply, 'thread');
+        content.appendChild(component.buildElement());
       }
     }
 
-    if (context == 'thread' && this.post.hasMoreReplies) {
-      let loadMore = this.buildLoadMoreLink()
-      content.appendChild(loadMore);
+    if (this.context == 'thread') {
+      if (this.post.hasMoreReplies) {
+        let loadMore = this.buildLoadMoreLink();
+        content.appendChild(loadMore);
+      } else if (this.post.hasHiddenReplies && window.biohazardEnabled !== false) {
+        let loadMore = this.buildHiddenRepliesLink();
+        content.appendChild(loadMore);
+      }
     }
 
     div.appendChild(content);
···
     return div;
   }
 
-  /** @param {PostContext} context, @returns {AnyElement} */
+  /** @returns {AnyElement} */
 
-  buildPostHeader(context) {
+  buildPostHeader() {
     let timeFormat = this.timeFormatForTimestamp;
     let formattedTime = this.post.createdAt.toLocaleString(window.dateLocale, timeFormat);
     let isoTime = this.post.createdAt.toISOString();
···
     h.innerHTML += `<span class="separator">&bull;</span> ` +
       `<a class="time" href="${this.linkToPost}" target="_blank" title="${isoTime}">${formattedTime}</a> `;
 
-    if (this.post.replyCount > 0 && !this.isRoot || ['quote', 'quotes', 'feed'].includes(context)) {
+    if (this.post.replyCount > 0 && !this.isRoot || ['quote', 'quotes', 'feed'].includes(this.context)) {
       h.innerHTML +=
         `<span class="separator">&bull;</span> ` +
         `<a href="${linkToPostThread(this.post)}" class="action" title="Load this subtree">` +
···
 
     link.addEventListener('click', (e) => {
       e.preventDefault();
-      link.innerHTML = `<img class="loader" src="icons/sunny.png">`;
-      loadThread(this.post.author.handle, this.post.rkey, loadMore.parentNode.parentNode);
+      loadMore.innerHTML = `<img class="loader" src="icons/sunny.png">`;
+      loadSubtree(this.post, loadMore.closest('.post'));
     });
 
     loadMore.appendChild(link);
     return loadMore;
   }
 
+  /** @returns {AnyElement} */
+
+  buildHiddenRepliesLink() {
+    let loadMore = $tag('p.hidden-replies');
+
+    let link = $tag('a', {
+      href: linkToPostThread(this.post),
+      text: "Load hidden replies…"
+    });
+
+    link.addEventListener('click', (e) => {
+      e.preventDefault();
+
+      if (window.biohazardEnabled === true) {
+        this.loadHiddenReplies(loadMore);
+      } else {
+        window.loadInfohazard = () => this.loadHiddenReplies(loadMore);
+        showDialog($id('biohazard_dialog'));
+      }
+    });
+
+    loadMore.append("☣️ ", link);
+    return loadMore;
+  }
+
+  /** @param {HTMLLinkElement} loadMoreButton */
+
+  loadHiddenReplies(loadMoreButton) {
+    loadMoreButton.innerHTML = `<img class="loader" src="icons/sunny.png">`;
+    loadHiddenSubtree(this.post, loadMoreButton.closest('.post'));
+  }
+
   /** @param {AnyElement} div, @returns {AnyElement} */
 
   buildBlockedPostElement(div) {
     let p = $tag('p.blocked-header');
-    p.innerHTML = `<i class="fa-solid fa-ban"></i> <span>Blocked post</span> ` +
-      `(<a href="${this.didLinkToAuthor}" target="_blank">see author</a>) `;
+    p.innerHTML = `<i class="fa-solid fa-ban"></i> <span>Blocked post</span>`;
+
+    if (window.biohazardEnabled === false) {
+      div.appendChild(p);
+      div.classList.add('blocked');
+      return p;
+    }
+
+    let blockStatus = this.post.blockedByUser ? 'has blocked you' : this.post.blocksUser ? "you've blocked them" : '';
+    blockStatus = blockStatus ? `, ${blockStatus}` : '';
+
+    let authorLink = $tag('a', { href: this.didLinkToAuthor, target: '_blank', text: 'see author' });
+    p.append(' (', authorLink, blockStatus, ') ');
     div.appendChild(p);
 
-    let authorLink = p.querySelector('a');
     let did = atURI(this.post.uri).repo;
-    let cachedHandle = api.findHandleByDid(did);
-    let blockStatus = this.post.blockedByUser ? 'has blocked you' : this.post.blocksUser ? "you've blocked them" : '';
-
-    if (cachedHandle) {
-      this.post.author.handle = cachedHandle;
+    
+    api.fetchHandleForDid(did).then(handle => {
+      this.post.author.handle = handle;
       authorLink.href = this.linkToAuthor;
-      authorLink.innerText = `@${cachedHandle}`;
-      if (blockStatus) {
-        authorLink.after(`, ${blockStatus}`);
-      }
-    } else {
-      api.loadUserProfile(did).then((author) => {
-        this.post.author = author;
-        authorLink.href = this.linkToAuthor;
-        authorLink.innerText = `@${author.handle}`;
-        if (blockStatus) {
-          authorLink.after(`, ${blockStatus}`);
-        }
-      });
-    }
+      authorLink.innerText = `@${handle}`;
+    });
 
     let loadPost = $tag('p.load-post');
     let a = $tag('a', { href: '#', text: "Load post…" });
···
   buildMissingPostElement(div) {
     let p = $tag('p.blocked-header');
     p.innerHTML = `<i class="fa-solid fa-ban"></i> <span>Deleted post</span>`;
+
+    let authorLink = $tag('a', { href: this.didLinkToAuthor, target: '_blank', text: 'see author' });
+    p.append(' (', authorLink, ') ');
+
+    let did = atURI(this.post.uri).repo;
+    
+    api.fetchHandleForDid(did).then(handle => {
+      this.post.author = { did, handle };
+      authorLink.href = this.linkToAuthor;
+      authorLink.innerText = `@${handle}`;
+    });
+
     div.appendChild(p);
     div.classList.add('blocked');
     return div;
···
   /** @param {string} uri, @param {AnyElement} div, @returns Promise<void> */
 
   async loadBlockedPost(uri, div) {
-    let record = await appView.loadPost(this.post.uri);
+    let record = await appView.loadPostIfExists(this.post.uri);
+
+    if (!record) {
+      let post = new MissingPost({ uri: this.post.uri });
+      let postView = new PostComponent(post, 'quote').buildElement();
+      div.replaceWith(postView);
+      return;
+    }
+
     this.post = new Post(record);
 
+    let userView = await api.getRequest('app.bsky.actor.getProfile', { actor: this.post.author.did });
+
+    if (!userView.viewer || !(userView.viewer.blockedBy || userView.viewer.blocking)) {
+      let { repo, rkey } = atURI(this.post.uri);
+
+      let a = $tag('a', {
+        href: linkToPostById(repo, rkey),
+        className: 'action',
+        title: "Load thread",
+        html: `<i class="fa-solid fa-arrows-split-up-and-left fa-rotate-180"></i>`
+      });
+
+      let header = div.querySelector('p.blocked-header');
+      let separator = $tag('span.separator', { html: '&bull;' });
+      header.append(separator, ' ', a);
+    }
+
     div.querySelector('p.load-post').remove();
 
     if (this.isRoot && this.post.parentReference) {
···
     if (this.post.embed) {
       let embed = new EmbedComponent(this.post, this.post.embed).buildElement();
       div.appendChild(embed);
+
+      // TODO
+      Array.from(div.querySelectorAll('a.link-card')).forEach(x => x.remove());
     }
   }
 
···
           alert("Sorry, this post is blocked.");
         });
       } else {
-        showLogin();        
+        showDialog(loginDialog);        
       }
       return;
     }
···
         this.post.viewerLike = like.uri;
         heart.classList.add('liked');
         count.innerText = String(parseInt(count.innerText, 10) + 1);
-      }).catch((error) => {
-        console.log(error);
-        alert(error);
-      });
+      }).catch(showError);
     } else {
       accountAPI.removeLike(this.post.viewerLike).then(() => {
         this.post.viewerLike = undefined;
         heart.classList.remove('liked');
         count.innerText = String(parseInt(count.innerText, 10) - 1);
-      }).catch((error) => {
-        console.log(error);
-        alert(error);
-      });
+      }).catch(showError);
     }
   }
 }

skythread.js

···
 
   window.dateLocale = localStorage.getItem('locale') || undefined;
   window.isIncognito = !!localStorage.getItem('incognito');
+  window.biohazardEnabled = JSON.parse(localStorage.getItem('biohazard') ?? 'null');
+
+  window.loginDialog = document.querySelector('#login');
 
-  document.addEventListener('click', (e) => {
+  html.addEventListener('click', (e) => {
     $id('account_menu').style.visibility = 'hidden';
   });
 
···
     submitSearch();
   });
 
-  document.querySelector('#login').addEventListener('click', (e) => {
-    if (e.target === e.currentTarget) {
-      hideLogin();
-    } else {
-      e.stopPropagation();
-    }
-  });
+  for (let dialog of document.querySelectorAll('.dialog')) {
+    dialog.addEventListener('click', (e) => {
+      if (e.target === e.currentTarget) {
+        hideDialog(dialog);
+      } else {
+        e.stopPropagation();
+      }
+    });    
+
+    dialog.querySelector('.close')?.addEventListener('click', (e) => {
+      hideDialog(dialog);
+    });
+  }
 
   document.querySelector('#login .info a').addEventListener('click', (e) => {
     e.preventDefault();
···
     submitLogin();
   });
 
-  document.querySelector('#login .close').addEventListener('click', (e) => {
-    hideLogin();
+  document.querySelector('#biohazard_show').addEventListener('click', (e) => {
+    hideDialog(e.target.closest('.dialog'));
+    window.biohazardEnabled = true;
+    localStorage.setItem('biohazard', 'true');
+
+    if (window.loadInfohazard) {
+      window.loadInfohazard();
+      window.loadInfohazard = undefined;
+    }
   });
 
-  document.querySelector('#account').addEventListener('click', (e) => {
-    if (accountAPI.isLoggedIn) {
-      toggleAccount();
-    } else {
-      toggleLogin();
+  document.querySelector('#biohazard_hide').addEventListener('click', (e) => {
+    window.biohazardEnabled = false;
+    localStorage.setItem('biohazard', 'false');
+    toggleMenuButton('biohazard', false);
+
+    for (let p of document.querySelectorAll('p.hidden-replies, .content > .post.blocked, .blocked > .load-post')) {
+      p.style.display = 'none';
     }
+
+    hideDialog(e.target.closest('.dialog'));
+  });
+
+  document.querySelector('#account').addEventListener('click', (e) => {
+    toggleAccountMenu();
     e.stopPropagation();
   });
 
···
     e.stopPropagation();
   });
 
+  document.querySelector('#account_menu a[data-action=biohazard]').addEventListener('click', (e) => {
+    e.preventDefault();
+
+    let hazards = document.querySelectorAll('p.hidden-replies, .content > .post.blocked, .blocked > .load-post');
+
+    if (window.biohazardEnabled === false) {
+      window.biohazardEnabled = true;
+      localStorage.setItem('biohazard', 'true');
+      toggleMenuButton('biohazard', true);
+      Array.from(hazards).forEach(p => { p.style.display = 'block' });
+    } else {
+      window.biohazardEnabled = false;
+      localStorage.setItem('biohazard', 'false');
+      toggleMenuButton('biohazard', false);
+      Array.from(hazards).forEach(p => { p.style.display = 'none' });
+    }
+  });
+
   document.querySelector('#account_menu a[data-action=incognito]').addEventListener('click', (e) => {
     e.preventDefault();
 
     if (isIncognito) {
-      localStorage.removeItem('incognito');      
+      localStorage.removeItem('incognito');
     } else {
       localStorage.setItem('incognito', '1');
     }
···
     location.reload();
   });
 
+  document.querySelector('#account_menu a[data-action=login]').addEventListener('click', (e) => {
+    e.preventDefault();
+    toggleDialog(loginDialog);
+    $id('account_menu').style.visibility = 'hidden';
+  });
+
   document.querySelector('#account_menu a[data-action=logout]').addEventListener('click', (e) => {
     e.preventDefault();
     logOut();
···
   window.blueAPI = new BlueskyAPI('blue.mackuba.eu', false);
   window.accountAPI = new BlueskyAPI(undefined, true);
 
-  if (accountAPI.isLoggedIn && !isIncognito) {
-    window.api = accountAPI;
-    accountAPI.host = accountAPI.user.pdsEndpoint;
-    showLoggedInStatus(true, api.user.avatar);
-  } else if (accountAPI.isLoggedIn && isIncognito) {
-    window.api = appView;
+  if (accountAPI.isLoggedIn) {
     accountAPI.host = accountAPI.user.pdsEndpoint;
-    showLoggedInStatus('incognito');
-    document.querySelector('#account_menu a[data-action=incognito]').innerText = '✓ Incognito mode';
+    hideMenuButton('login');
+
+    if (!isIncognito) {
+      window.api = accountAPI;
+      showLoggedInStatus(true, api.user.avatar);
+    } else {
+      window.api = appView;
+      showLoggedInStatus('incognito');
+      toggleMenuButton('incognito', true);
+    }
   } else {
     window.api = appView;
+    hideMenuButton('logout');
+    hideMenuButton('incognito');
   }
+
+  toggleMenuButton('biohazard', window.biohazardEnabled !== false);
 
   parseQueryParams();
 }
···
     loadHashtagPage(decodeURIComponent(hash));
   } else if (query) {
     showLoader();
-    loadThread(decodeURIComponent(query));
+    loadThreadByURL(decodeURIComponent(query));
   } else if (author && post) {
     showLoader();
-    loadThread(decodeURIComponent(author), decodeURIComponent(post));
+    loadThreadById(decodeURIComponent(author), decodeURIComponent(post));
   } else {
     showSearch();
   }
···
   let p = $tag('p.back');
 
   if (post instanceof BlockedPost) {
-    let element = new PostComponent(post).buildElement('parent');
+    let element = new PostComponent(post, 'parent').buildElement();
     element.className = 'back';
     element.querySelector('p.blocked-header span').innerText = 'Parent post blocked';
     return element;
···
   $id('search').style.visibility = 'hidden';
 }
 
-function showLogin() {
-  $id('login').style.visibility = 'visible';
+function showDialog(dialog) {
+  dialog.style.visibility = 'visible';
   $id('thread').classList.add('overlay');
-  $id('login_handle').focus();
+
+  dialog.querySelector('input[type=text]')?.focus();
 }
 
-function hideLogin() {
-  $id('login').style.visibility = 'hidden';
-  $id('login').classList.remove('expanded');
+function hideDialog(dialog) {
+  dialog.style.visibility = 'hidden';
+  dialog.classList.remove('expanded');
   $id('thread').classList.remove('overlay');
-  $id('login_handle').value = '';
-  $id('login_password').value = '';
+
+  for (let field of dialog.querySelectorAll('input[type=text]')) {
+    field.value = '';
+  }
 }
 
-function toggleLogin() {
-  if ($id('login').style.visibility == 'visible') {
-    hideLogin();
+function toggleDialog(dialog) {
+  if (dialog.style.visibility == 'visible') {
+    hideDialog(dialog);
   } else {
-    showLogin();
+    showDialog(dialog);
   }
 }
 
···
   $id('login').classList.toggle('expanded');
 }
 
-function toggleAccount() {
+function toggleAccountMenu() {
   let menu = $id('account_menu');
   menu.style.visibility = (menu.style.visibility == 'visible') ? 'hidden' : 'visible';
 }
 
+/** @param {string} buttonName */
+
+function showMenuButton(buttonName) {
+  let button = document.querySelector(`#account_menu a[data-action=${buttonName}]`);
+  button.parentNode.style.display = 'list-item';
+}
+
+/** @param {string} buttonName */
+
+function hideMenuButton(buttonName) {
+  let button = document.querySelector(`#account_menu a[data-action=${buttonName}]`);
+  button.parentNode.style.display = 'none';
+}
+
+/** @param {string} buttonName, @param {boolean} state */
+
+function toggleMenuButton(buttonName, state) {
+  let button = document.querySelector(`#account_menu a[data-action=${buttonName}]`);
+  button.querySelector('.check').style.display = (state) ? 'inline' : 'none';
+}
+
 /** @param {boolean | 'incognito'} loggedIn, @param {string | undefined | null} [avatar] */
 
 function showLoggedInStatus(loggedIn, avatar) {
···
     window.api = pds;
     window.accountAPI = pds;
 
-    hideLogin();
+    hideDialog(loginDialog);
     submit.style.display = 'inline';
     cloudy.style.display = 'none';
 
     loadCurrentUserAvatar();
+    showMenuButton('logout');
+    showMenuButton('incognito');
+    hideMenuButton('login');
   })
   .catch((error) => {
     submit.style.display = 'inline';
···
 
 function logOut() {
   accountAPI.resetTokens();
+  localStorage.removeItem('incognito');
   location.reload();
 }
 
···
 
   if (!url) { return }
 
+  if (url.startsWith('at://')) {
+    let target = new URL(getLocation());
+    target.searchParams.set('q', url);
+    location.assign(target.toString());
+    return;
+  }
+
   if (url.match(/^#?((\p{Letter}|\p{Number})+)$/u)) {
     let target = new URL(getLocation());
     target.searchParams.set('hash', encodeURIComponent(url.replace(/^#/, '')));
···
       }
 
       for (let post of posts) {
-        let postView = new PostComponent(post).buildElement('feed');
+        let postView = new PostComponent(post, 'feed').buildElement();
         $id('thread').appendChild(postView);
       }
 
···
         }
 
         for (let post of posts) {
-          let postView = new PostComponent(post).buildElement('quotes');
+          let postView = new PostComponent(post, 'quotes').buildElement();
           $id('thread').appendChild(postView);
         }
 
···
   });
 }
 
-/** @param {string} url, @param {string} [postId], @param {AnyElement} [nodeToUpdate] */
+/** @param {string} url */
 
-function loadThread(url, postId, nodeToUpdate) {
-  let load = postId ? api.loadThreadById(url, postId) : api.loadThreadByURL(url);
+function loadThreadByURL(url) {
+  let loadThread = url.startsWith('at://') ? api.loadThreadByAtURI(url) : api.loadThreadByURL(url);
 
-  load.then(json => {
-    let root = Post.parseThreadPost(json.thread);
-    window.root = root;
+  loadThread.then(json => {
+    displayThread(json);
+  }).catch(error => {
+    hideLoader();
+    showError(error);
+  });
+}
 
-    let loadQuoteCount;
+/** @param {string} author, @param {string} rkey */
 
-    if (!nodeToUpdate && root instanceof Post) {
-      setPageTitle(root);
-      loadQuoteCount = blueAPI.getQuoteCount(root.uri);        
+function loadThreadById(author, rkey) {
+  api.loadThreadById(author, rkey).then(json => {
+    displayThread(json);
+  }).catch(error => {
+    hideLoader();
+    showError(error);
+  });
+}
+
+/** @param {json} json */
+
+function displayThread(json) {
+  let root = Post.parseThreadPost(json.thread);
+  window.root = root;
+  window.subtreeRoot = root;
+
+  let loadQuoteCount;
+
+  if (root instanceof Post) {
+    setPageTitle(root);
+    loadQuoteCount = blueAPI.getQuoteCount(root.uri);        
 
-      if (root.parent) {
-        let p = buildParentLink(root.parent);
-        $id('thread').appendChild(p);
-      }
+    if (root.parent) {
+      let p = buildParentLink(root.parent);
+      $id('thread').appendChild(p);
     }
+  }
 
-    let component = new PostComponent(root);
-    let list = component.buildElement('thread');
-    hideLoader();
+  let component = new PostComponent(root, 'thread');
+  let view = component.buildElement();
+  hideLoader();
+  $id('thread').appendChild(view);
 
-    if (nodeToUpdate) {
-      nodeToUpdate.querySelector('.content').replaceWith(list.querySelector('.content'));
-    } else {
-      $id('thread').appendChild(list);
+  loadQuoteCount?.then(count => {
+    if (count > 0) {
+      let stats = view.querySelector(':scope > .content > p.stats');
+      let q = new URL(getLocation());
+      q.searchParams.set('quotes', component.linkToPost);
+      stats.append($tag('i', { className: count > 1 ? 'fa-regular fa-comments' : 'fa-regular fa-comment' }));
+      stats.append(" ");
+      let quotes = $tag('a', {
+        text: count > 1 ? `${count} quotes` : '1 quote',
+        href: q.toString()
+      });
+      stats.append(quotes);
     }
+  }).catch(error => {
+    console.warn("Couldn't load quote count: " + error);
+  });
+}
 
-    loadQuoteCount?.then(count => {
-      if (count > 0) {
-        let stats = list.querySelector(':scope > .content > p.stats');
-        let q = new URL(getLocation());
-        q.searchParams.set('quotes', component.linkToPost);
-        stats.append($tag('i', { className: count > 1 ? 'fa-regular fa-comments' : 'fa-regular fa-comment' }));
-        stats.append(" ");
-        let quotes = $tag('a', {
-          html: count > 1 ? `${count} quotes` : '1 quote',
-          href: q.toString()
-        });
-        stats.append(quotes);
+/** @param {Post} post, @param {AnyElement} nodeToUpdate */
+
+function loadSubtree(post, nodeToUpdate) {
+  api.loadThreadByAtURI(post.uri).then(json => {
+    let root = Post.parseThreadPost(json.thread, post.pageRoot, 0, post.absoluteLevel);
+    post.updateDataFromPost(root);
+    window.subtreeRoot = post;
+
+    let component = new PostComponent(post, 'thread');
+    let view = component.buildElement();
+
+    nodeToUpdate.querySelector('.content').replaceWith(view.querySelector('.content'));
+  }).catch(showError);
+}
+
+/** @param {Post} post, @param {AnyElement} nodeToUpdate */
+
+function loadHiddenSubtree(post, nodeToUpdate) {
+  blueAPI.getReplies(post.uri).then(replies => {
+    let missingReplies = replies.filter(r => !post.replies.some(x => x.uri === r));
+
+    Promise.allSettled(missingReplies.map(uri => api.loadThreadByAtURI(uri))).then(responses => {
+      let replies = responses
+        .map(r => r.status == 'fulfilled' ? r.value : undefined)
+        .filter(v => v)
+        .map(json => Post.parseThreadPost(json.thread, post.pageRoot, 1, post.absoluteLevel + 1));
+
+      post.setReplies(replies);
+
+      let content = nodeToUpdate.querySelector('.content');
+      content.querySelector(':scope > .hidden-replies').remove();
+
+      for (let reply of post.replies) {
+        let component = new PostComponent(reply, 'thread');
+        let view = component.buildElement();
+        content.append(view);
       }
-    }).catch(error => {
-      console.warn("Couldn't load quote count: " + error);
-    });
-  }).catch(error => {
-    hideLoader();
-    console.log(error);
-    alert(error);
-  });
+    }).catch(showError);
+  }).catch(showError);
 }

style.css

···
   text-decoration: none;
 }
 
-#login {
+#account_menu li .check {
+  display: none;
+}
+
+.dialog {
   visibility: hidden;
   position: fixed;
   top: 0;
···
   background-color: rgba(240, 240, 240, 0.4);
 }
 
-#login.expanded {
+.dialog.expanded {
   padding-bottom: 0;
 }
 
-#login form {
+.dialog form {
   position: relative;
   border: 2px solid hsl(210, 100%, 85%);
   background-color: hsl(210, 100%, 98%);
···
   padding: 15px 25px;
 }
 
-#login .close {
+.dialog .close {
   position: absolute;
   top: 5px;
   right: 5px;
···
   opacity: 0.6;
 }
 
-#login .close:hover {
+.dialog .close:hover {
   color: hsl(210, 100%, 65%);
   opacity: 1.0;
 }
 
-#login p {
+.dialog p {
   text-align: center;
+  line-height: 125%;
 }
 
-#login h2 {
+.dialog h2 {
   font-size: 13pt;
   font-weight: 600;
   text-align: center;
···
   padding-right: 10px;
 }
 
-#login p.submit {
+.dialog p.submit {
   margin-top: 25px;
 }
 
-#login p.info {
+.dialog p.info {
   font-size: 9pt;
 }
 
-#login p.info a {
+.dialog p.info a {
   color: #666;
 }
 
-#login input[type="text"], #login input[type="password"] {
+.dialog input[type="text"], .dialog input[type="password"] {
   width: 200px;
   font-size: 11pt;
   border: 1px solid #d6d6d6;
···
   margin: 0px 15px;
 }
 
-#login input[type="submit"] {
+.dialog input[type="submit"] {
   width: 150px;
   font-size: 11pt;
   border: 1px solid hsl(210, 90%, 85%);
···
   padding: 5px 6px;
 }
 
-#login input[type="submit"]:active {
+.dialog input[type="submit"]:hover {
   background-color: hsl(210, 100%, 90%);
+  border: 1px solid hsl(210, 90%, 82%);
+}
+
+.dialog input[type="submit"]:active {
+  background-color: hsl(210, 100%, 87%);
+  border: 1px solid hsl(210, 90%, 80%);
 }
 
 #login #cloudy {
···
 
 #login .info-box p {
   margin: 15px 15px;
-  line-height: 125%;
   text-align: left;
+}
+
+#biohazard_dialog form {
+  width: 400px;
+}
+
+#biohazard_dialog p.submit {
+  margin-top: 40px;
+  margin-bottom: 20px;
+}
+
+#biohazard_dialog input[type="submit"] {
+  width: 180px;
+  margin-left: 5px;
+  margin-right: 5px;
 }
 
 #loader {
···
   vertical-align: text-top;
 }
 
-.post h2 .separator {
+.post h2 .separator, .post .blocked-header .separator, .blocked-header .separator {
   color: #888;
   font-weight: normal;
   font-size: 11pt;
···
   vertical-align: text-top;
 }
 
-.post h2 .action {
+.post h2 .action, .post .blocked-header .action, .blocked-header .action {
   color: #888;
   font-weight: normal;
   font-size: 10pt;
   vertical-align: text-top;
+}
+
+.post h2 .action:hover, .post .blocked-header .action:hover, .blocked-header .action:hover {
+  color: #444;
 }
 
 .post h2 img.mastodon {
···
   width: 24px;
   animation: rotation 3s infinite linear;
   margin-top: 5px;
+}
+
+.post p.hidden-replies {
+  margin-top: 20px;
+  font-size: 11pt;
+}
+
+.post p.hidden-replies a {
+  font-size: 12pt;
+  color: saddlebrown;
 }
 
 @media (prefers-color-scheme: dark) {

types.d.ts

···
 interface Window {
   dateLocale: string | undefined;
   root: AnyPost;
+  subtreeRoot: AnyPost;
+  loadInfohazard: (() => void) | undefined;
 }
 
 declare var accountAPI: BlueskyAPI;
···
 declare var appView: BlueskyAPI;
 declare var api: BlueskyAPI;
 declare var isIncognito: boolean;
+declare var biohazardEnabled: boolean;
+declare var loginDialog: AnyElement;
 
 type SomeElement = Element | HTMLElement | AnyElement;
 type json = Record<string, any>;

utils.js

···
   return location.origin + location.pathname;
 }
 
+/** @param {object} error */
+
+function showError(error) {
+  console.log(error);
+  alert(error);  
+}
+
 /** @param {Date} date1, @param {Date} date2, @returns {boolean} */
 
 function sameDay(date1, date2) {