replies working, need to add root post ID

Reviewed-on: #1

README.md

@@ -0,0 +1,2 @@
+# Intro
+Dandelion is an experimental social network designed to let you build online communites that will last for 100 years.

ddln_cli/dev.sh

@@ -0,0 +1,28 @@
+#!/bin/bash
+user_data_dir="${1:-./profile}"
+user_id="${2:-b38b623c-c3fa-4351-9cab-50233c99fa4e}"
+
+"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
+    --disable-setuid-sandbox \
+    --disable-infobars \
+    --no-first-run \
+    --hide-scrollbars \
+    --disable-notifications \
+    --disable-background-timer-throttling \
+    --disable-backgrounding-occluded-windows \
+    --disable-breakpad \
+    --disable-component-extensions-with-background-pages \
+    --disable-extensions \
+    --disable-features=TranslateUI,BlinkGenPropertyTrees \
+    --disable-ipc-flooding-protection \
+    --disable-renderer-backgrounding \
+    --enable-features=NetworkService,NetworkServiceInProcess \
+    --force-color-profile=srgb \
+    --metrics-recording-only \
+    --mute-audio \
+    --disable-gpu \
+    --repl --headless \
+    --user-data-dir="$user_data_dir" \
+    --remote-debugging-port=9332 \
+    --enable-logging=stderr \
+    "https://localhost:8443/connect/$user_id?bootstrap"

deno/ddln_server.ts

@@ -293,11 +293,12 @@ function connectWebsocket(request: Request) {
 }
 
 async function devServerWatchFiles() {
+    const parentDir = Deno.cwd().replace(/\/[^/]+$/, '');
     const watcher = Deno.watchFs(["../static/", "../src/"]);
     for await (const event of watcher) {
         if (event.kind === "modify") {
             for (const path of event.paths) {
-                const cachedPath = path.replace(Deno.cwd() + '/..', '')
+                const cachedPath = path.replace(parentDir, '');
                 filepathResponseCache.delete(cachedPath);
                 console.log('Purging updated file:', cachedPath)
             }
@@ -360,11 +361,15 @@ async function main() {
     messageDispatch.set('hello2', hello2Handler);
     messageDispatch.set('peer_message', peerMessageHandler);
 
+    const port = parseInt(Deno.env.get("PORT") ?? "443");
+    const certFile = Deno.env.get("TLS_CERT") ?? "/etc/letsencrypt/live/ddln.app/fullchain.pem";
+    const keyFile  = Deno.env.get("TLS_KEY")  ?? "/etc/letsencrypt/live/ddln.app/privkey.pem";
+
     Deno.serve({
         hostname: "[::]",
-	port: 443,
+        port,
-        cert: Deno.readTextFileSync("/etc/letsencrypt/live/ddln.app/fullchain.pem"),
+        cert: Deno.readTextFileSync(certFile),
-        key: Deno.readTextFileSync("/etc/letsencrypt/live/ddln.app/privkey.pem"),
+        key:  Deno.readTextFileSync(keyFile),
     }, handler);
 
     await devServerWatchFiles();

deno/dev.sh

@@ -0,0 +1,5 @@
+#!/bin/bash
+TLS_CERT=../certs/localhost.pem \
+TLS_KEY=../certs/localhost-key.pem \
+PORT=8443 \
+deno run --inspect --allow-all --unstable-temporal --watch ddln_server.ts

setup.sh

@@ -0,0 +1,17 @@
+#!/bin/bash
+set -e
+
+# Install mkcert if needed
+if ! command -v mkcert &>/dev/null; then
+    echo "Installing mkcert..."
+    brew install mkcert
+fi
+
+# Install the local CA into the system/browser trust stores
+mkcert -install
+
+# Generate certs for localhost
+mkdir -p certs
+mkcert -cert-file certs/localhost.pem -key-file certs/localhost-key.pem localhost 127.0.0.1
+
+echo "Setup complete. Run deno/dev.sh and ddln_cli/dev.sh to start."

src/App.ts

@@ -1,8 +1,8 @@
 import { generateID } from "IDUtils";
 import { PeerManager, PeerEventTypes } from "PeerManager";
 import { Sync } from "Sync";
-import { openDatabase, getData, addData, addDataArray, clearData, deleteData, mergeDataArray, getAllData, checkPostIds, getAllIds, getPostsByIds, getPostForUser } from "db";
+import { openDatabase, getData, addData, addDataArray, clearData, deleteData, mergeDataArray, getAllData, checkPostIds, getAllIds, getPostsByIds, getPostForUser, getRepliesForPost, buildReplyCountMap } from "db";
-import { arrayBufferToBase64, compressString } from "dataUtils";
+import { arrayBufferToBase64, compressString, decompressBuffer, base64ToArrayBuffer } from "dataUtils";
 import { log, logID, renderLog, setLogVisibility } from "log"
 
 declare let marked: any;
@@ -13,12 +13,11 @@ type PeerID = string;
 class Post {
   post_timestamp: Date;
   post_id: string;
+  reply_to_id: string|null;
   author: string;
   author_id: string;
   text: string;
   image_data: ArrayBuffer | null;
-
-
   importedFrom: "twitter" | null;
   importSource: any;
 
@@ -29,7 +28,8 @@ class Post {
     post_timestamp: Date,
     imageData: ArrayBuffer | null = null,
     importedFrom: "twitter" | null = null,
-    importSource: any = null) {
+    importSource: any = null,
+    reply_to_id:string|null = null) {
 
     this.post_timestamp = post_timestamp;
     this.post_id = generateID();
@@ -41,6 +41,7 @@ class Post {
 
     this.importedFrom = importedFrom;
     this.importSource = importSource;
+    this.reply_to_id = reply_to_id;
   }
 }
 
@@ -118,6 +119,7 @@ export class App {
   peername: string = '';
   userID: string = '';
   peerID: string = '';
+  replyToID: string|null = null;
   following: Set<string> = new Set();
   posts: StoragePost[] = [];
   isHeadless: boolean = false;
@@ -342,23 +344,16 @@ export class App {
       }
 
       return true;
-      // return posts;
-
-      // return postIDs;
     });
 
     this.peerManager.registerRPC('sendPostForUser', async (sendingPeerID: string, userID: string, post: Post) => {
       console.log.apply(null, log(`[app] sendPostForUser got post[${logID(post.post_id)}] from peer[${logID(sendingPeerID)}] for user[${logID(userID)}] author[${post.author}] text[${post.text}]`));
-      // if (post.text === "image...") {
-      //   debugger;
-      // }
 
       let peerData = this.statusBar.getPeerData(sendingPeerID);
       if (peerData) {
         this.statusBar.updatePeerMessage(sendingPeerID, `⬇️${logID(userID)} ${peerData.havePostCount}/${peerData.neededPostCount}}`);
       }
       await this.sync.writePostForUser(userID, post);
-      // if (userID === this.userID) {
 
       if (peerData) {
         peerData.havePostCount++
@@ -372,14 +367,13 @@ export class App {
       this.renderTimer = setTimeout(() => { this.render() }, 1000);
 
       return true;
-      // }
     });
 
 
-    this.statusBar.setMessageHTML("Connecting to ddln network...")
+    this.statusBar.setMessageHTML("Connecting to ddln...")
     await this.peerManager.connect();
     console.log.apply(null, log("*************** after peerManager.connect"));;
-    this.statusBar.setMessageHTML("Connected to ddln network...")
+    this.statusBar.setMessageHTML("Connected to ddln.")
 
 
 
@@ -530,8 +524,22 @@ export class App {
     globalThis.URL.revokeObjectURL(url);
   }
 
-  async importPostsForUser(userID: string, posts: string) {
+  async importPostsForUser(userID: string, buffer: ArrayBuffer) {
+    console.log.apply(null, log("Importing posts"));
+    const json = await decompressBuffer(buffer);
+    const posts = JSON.parse(json);
 
+    for (let post of posts) {
+      if (post.image_data && typeof post.image_data === 'string') {
+        post.image_data = await base64ToArrayBuffer(post.image_data);
+      }
+      if (post.post_timestamp && typeof post.post_timestamp === 'string') {
+        post.post_timestamp = new Date(post.post_timestamp);
+      }
+    }
+
+    await mergeDataArray(userID, posts);
+    console.log.apply(null, log(`Imported ${posts.length} posts`));
   }
 
   async exportPostsForUser(userID: string) {
@@ -729,7 +737,7 @@ export class App {
     }
   }
 
-  async createNewPost(userID: string, postText: string, mediaData?: ArrayBuffer, mimeType?: "image/png" | "image/gif" | "image/jpg" | "image/jpeg" | "video/mp4") {
+  async createPost(userID: string, postText: string, mediaData?: ArrayBuffer, mimeType?: "image/svg+xml" | "image/png" | "image/gif" | "image/jpg" | "image/jpeg" | "video/mp4", replyToID:string|null = null) {
     if ((typeof postText !== "string") || postText.length === 0) {
       console.log.apply(null, log("Not posting an empty string..."));
       return;
@@ -737,14 +745,14 @@ export class App {
 
     if (mediaData &&
       (mimeType === 'image/jpg' || mimeType === 'image/jpeg' || mimeType === 'image/png') &&
-      (mediaData as ArrayBuffer).byteLength > 500 * 1024) {
+      (mediaData as ArrayBuffer).byteLength > 256 * 1024) {
       let compressedImage = await this.compressImage(mediaData as ArrayBuffer, mimeType, 0.9);
       if (compressedImage) {
         mediaData = compressedImage as ArrayBuffer;
       }
     }
 
-    let post = new Post(this.username, userID, postText, new Date(), mediaData);
+    let post = new Post(this.username, userID, postText, new Date(), mediaData, null, null, replyToID);
     // this.posts.push(post);
     // localStorage.setItem(key, JSON.stringify(posts));
     addData(userID, post);
@@ -982,6 +990,16 @@ export class App {
     let burgerMenuButton = this.div('burger-menu-button');
     burgerMenuButton.addEventListener('click', e => navContainer.classList.toggle('active'));
 
+    let importFilePicker = document.getElementById('import-file-input') as HTMLInputElement;
+    importFilePicker?.addEventListener('change', async () => {
+      const file = importFilePicker.files?.[0];
+      if (!file) return;
+      const buffer = await file.arrayBuffer();
+      await this.importPostsForUser(this.userID, buffer);
+      importFilePicker.value = '';
+      this.render();
+    });
+
     let exportButton = this.button("export-button");
     exportButton.addEventListener('click', async e => {
 
@@ -990,8 +1008,7 @@ export class App {
 
     let composeButton = this.div('compose-button');
     composeButton.addEventListener('click', e => {
-      document.getElementById('compose')!.style.display = 'block';
+      this.enterCompose();
-      document.getElementById('textarea_post')?.focus();
     });
 
 
@@ -999,11 +1016,13 @@ export class App {
     filePicker?.addEventListener('change', async (event: any) => {
       for (let file of filePicker.files as any) {
         let buffer = await file.arrayBuffer();
-        await this.createNewPost(this.userID, 'image...', buffer, file.type);
+        await this.createPost(this.userID, 'image...', buffer, file.type, this.replyToID);
       }
 
       // Reset so that if they pick the same image again, we still get the change event.
       filePicker.value = '';
+
+      this.exitCompose();
     });
 
     let filePickerLabel = document.getElementById('file-input-label');
@@ -1040,25 +1059,37 @@ export class App {
 
     // clearPostsButton.addEventListener('click', () => { clearData(userID); posts = []; this.render() });
 
-
+    let cancelPostButton = document.getElementById("button_cancel_post") as HTMLElement;
-    let postButton = document.getElementById("button_post") as HTMLButtonElement;
     let postText = document.getElementById("textarea_post") as HTMLTextAreaElement;
-
+    let postButton = document.getElementById("button_post") as HTMLButtonElement;
-    if (!(postButton && postText)) {
+    
+    if (!(cancelPostButton && postButton && postText)) {
       throw new Error();
     }
 
+    cancelPostButton.addEventListener('click', (e) => {
+      this.exitCompose();
+    });
+
     postText.addEventListener('paste', async (e) => {
       const dataTransfer = e.clipboardData
       const file = dataTransfer!.files[0];
       let buffer = await file.arrayBuffer();
-      await this.createNewPost(this.userID, 'image...', buffer, file.type as any);
+      await this.createPost(this.userID, 'image...', buffer, file.type as any, this.replyToID);
     });
 
-    postButton.addEventListener("click", () => {
+    const submitPost = () => {
-      this.createNewPost(userID, postText.value);
+      this.createPost(userID, postText.value, undefined, undefined, this.replyToID);
-      postText.value = "";
+      this.exitCompose();
-      document.getElementById('compose')!.style.display = 'none';
+    };
+
+    postButton.addEventListener("click", submitPost);
+
+    postText.addEventListener("keydown", (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+        e.preventDefault();
+        submitPost();
+      }
     });
 
     // updateApp.addEventListener("click", () => {
@@ -1072,6 +1103,32 @@ export class App {
 
   }
 
+
+  // Change this all to a template so we're not toggling state in this crazy way!
+  enterCompose(replyToID:string|null=null) {
+    this.replyToID = replyToID;
+
+    if (replyToID) {
+      this.renderComposeReplyArea(replyToID);
+       document.getElementById("compose-reply-area")!.style.display = "block";
+    }
+
+    document.getElementById('compose')!.style.display = 'block';
+    document.getElementById('textarea_post')?.focus();
+    document.getElementById('compose-dimmer')?.classList.add("compose-dimmer-dimmed");
+    document.body.classList.add("no-scroll");
+  }
+
+  exitCompose() {
+    this.replyToID = null;
+    let postText = document.getElementById("textarea_post") as HTMLTextAreaElement;
+    postText.value = "";
+    document.getElementById('compose')!.style.display = 'none';
+    document.getElementById('compose-dimmer')?.classList.remove("compose-dimmer-dimmed");
+    document.getElementById("compose-reply-area")!.style.display = "none";
+    document.body.classList.remove("no-scroll");
+  }
+
   async getPostsForFeed() {
 
     // get N posts from each user and sort them by date.
@@ -1257,6 +1314,8 @@ export class App {
 
     await this.initDB();
 
+    window.addEventListener('popstate', () => { this.getRoute(); this.render(); });
+
     this.connectURL = `${document.location.origin}/connect/${this.userID}`;
     document.getElementById('connectURL')!.innerHTML = `<a href="${this.connectURL}">connect</a>`;
 
@@ -1441,13 +1500,19 @@ export class App {
     contentDiv.innerHTML = "";
     let count = 0;
 
+    const isPostView = this.router.route === App.Route.POST;
+    contentDiv.classList.toggle('post-view', isPostView);
+
+    const replyCountMap = await buildReplyCountMap();
+
     this.renderedPosts.clear();
     let first = true;
     for (let i = this.posts.length - 1; i >= 0; i--) {
       let postData = this.posts[i];
+      if (!isPostView && postData.data.reply_to_id) continue;
       // this.postsSet.add(postData);
       // TODO return promises for all image loads and await those.
-      let post = this.renderPost(postData.data, first);
+      let post = this.renderPost(postData.data, first, replyCountMap.recursive.get(postData.data.post_id) ?? 0);
       first = false;
       // this.renderedPosts.set(postData.post_id, post);
       if (post) {
@@ -1466,6 +1531,30 @@ export class App {
 
     contentDiv.appendChild(fragment);
 
+    if (isPostView && this.posts.length > 0) {
+      const renderReplies = async (postID: string, depth: number) => {
+        if (depth > 2) return;
+        const replies = await getRepliesForPost(postID);
+        // Top-level replies: newest first. Nested replies: oldest first (readable order).
+        if (depth === 0) {
+          replies.sort((a, b) =>
+            new Date(b.data.post_timestamp).getTime() - new Date(a.data.post_timestamp).getTime()
+          );
+        } else {
+          replies.sort((a, b) =>
+            new Date(a.data.post_timestamp).getTime() - new Date(b.data.post_timestamp).getTime()
+          );
+        }
+        for (const reply of replies) {
+          const el = this.renderPost(reply.data, false, replyCountMap.direct.get(reply.data.post_id) ?? 0);
+          if (depth > 0) el.style.marginLeft = `${depth * 20}px`;
+          contentDiv.appendChild(el);
+          await renderReplies(reply.data.post_id, depth + 1);
+        }
+      };
+      await renderReplies(this.posts[0].data.post_id, 0);
+    }
+
     let renderTime = this.timerDelta();
 
     console.log.apply(null, log(`render took: ${renderTime.toFixed(2)}ms`));;
@@ -1486,7 +1575,13 @@ export class App {
     this.render();
   }
 
-  renderPost(post: Post, first: boolean) {
+   renderComposeReplyArea(replyToID:string) {
+    let composeReplyArea = document.getElementById('compose-reply-area') as HTMLElement;
+    composeReplyArea.innerText = replyToID;
+    composeReplyArea.classList.add("show");
+  }
+
+  renderPost(post: Post, first: boolean, replyCount: number = 0) {
     if (!(post.hasOwnProperty("text"))) {
       throw new Error("Post is malformed!");
     }
@@ -1505,6 +1600,16 @@ export class App {
       await navigator.clipboard.writeText(shareUrl)
     };
 
+    let replyButton = document.createElement('button'); replyButton.innerText = replyCount > 0 ? `reply (${replyCount})` : 'reply';
+    replyButton.onclick = async () => {
+      console.log(`replying to post ${post.post_id}`);
+      this.enterCompose(post.post_id);
+      // let shareUrl = `${document.location.origin}/user/${post.author_id}/post/${post.post_id}`;
+
+      // await navigator.clipboard.writeText(shareUrl)
+    };
+
+
     let ownPost = post.author_id === this.userID;
 
     let markdown = post.text;
@@ -1525,53 +1630,66 @@ export class App {
     let userURL = `${document.location.origin}/user/${post.author_id}/`
 
     let postTemplate =
-      `<div>${first ? '' : '<hr>'}
+      `<div class="post-container">${first ? '' : '<hr>'}
-        <div>
+        <div class="post-body">
-          <span class='header' title='${timestamp}'><img class="logo" src="/static/favicon.ico"><a class="username" href="${userURL}">@${post.author}</a> -
+          <div>
-            <span style="color:rgb(128,128,128)">${post.post_timestamp.toLocaleDateString()}</span>
+            <span class='header' title='${timestamp}'><img class="logo" src="/static/favicon.ico"><a class="username" href="${userURL}">@${post.author}</a> -
-          </span>
+              <span style="color:rgb(128,128,128)">${post.post_timestamp.toLocaleDateString()}</span>
-          ${ownPost ? `<span id="deleteButton"></span>` : ''}
+            </span>
+          </div>
+          <div>${markdown}</div>
+
+          <div id="image"></div>
+
+          <span id="replyButton"></span>
           ${ownPost ? `<span id="editButton"></span>` : ''}
           <span id="shareButton"></span>
+          ${ownPost ? `<span id="deleteButton"></span>` : ''}
         </div>
-        <div>${markdown}</div>
       </div>`
 
     containerDiv.innerHTML = postTemplate;
 
+    const postBody = containerDiv.querySelector('.post-body') as HTMLElement;
+    postBody.addEventListener('click', (e) => {
+      if ((e.target as HTMLElement).closest('button, a')) return;
+      history.pushState({}, '', `/user/${post.author_id}/post/${post.post_id}`);
+      this.getRoute();
+      this.render();
+    });
 
     if (ownPost) {
       containerDiv.querySelector('#deleteButton')?.appendChild(deleteButton);
       // containerDiv.querySelector('#editButton')?.appendChild(editButton);
     }
 
-
     containerDiv.querySelector('#shareButton')?.appendChild(shareButton);
+    containerDiv.querySelector('#replyButton')?.appendChild(replyButton);
 
 
-    if (!("image_data" in post && post.image_data)) {
+    let hasImage = ("image_data" in post && post.image_data);
-      // containerDiv.appendChild(timestampDiv);
+    if (hasImage) {
-      return containerDiv;
+      let image =  document.createElement("img");
-      // return null;
+    
+      image.title = `${(post.image_data!.byteLength / 1024 / 1024).toFixed(2)}MBytes`;
+      // const blob = new Blob([post.image_data as ArrayBuffer], { type: 'image/png' });
+      const blob = new Blob([post.image_data as ArrayBuffer]);
+      const url = URL.createObjectURL(blob);
+      image.onload = () => {
+        // URL.revokeObjectURL(url);
+      };
+
+      image.src = url;
+      // image.src = image.src = "data:image/png;base64," + post.image;
+      image.className = "postImage";
+      // image.onclick = () => { App.maximizeElement(image) };
+
+      containerDiv.querySelector('#image')?.appendChild(image);
     }
 
-    let image = document.createElement("img");
-    image.title = `${(post.image_data.byteLength / 1024 / 1024).toFixed(2)}MBytes`;
-    // const blob = new Blob([post.image_data as ArrayBuffer], { type: 'image/png' });
-    const blob = new Blob([post.image_data as ArrayBuffer]);
-    const url = URL.createObjectURL(blob);
-    image.onload = () => {
-      // URL.revokeObjectURL(url);
-    };
-
-    image.src = url;
-    // image.src = image.src = "data:image/png;base64," + post.image;
-    image.className = "postImage";
-    // image.onclick = () => { App.maximizeElement(image) };
-
-    containerDiv.appendChild(image);
     // containerDiv.appendChild(timestampDiv);
 
+
     return containerDiv;
   }
 
@@ -1612,6 +1730,11 @@ export class App {
           this.router.route = App.Route.USER;
         }
       }
+    } else {
+      this.router.route = App.Route.HOME;
+      this.router.userID = '';
+      this.router.postID = '';
+      this.router.mediaID = '';
     }
 
     console.log.apply(null, log("router: ", this.router.userID, this.router.postID, this.router.mediaID, App.Route[this.router.route]));

src/PeerManager.ts

@@ -6,7 +6,6 @@
 
 import { generateID } from "IDUtils";
 import { log, logID } from "log";
-// import { App } from "./App";
 
 // Use a broadcast channel to only have one peer manager for multiple tabs,
 // then we won't need to have a session ID as all queries for a peerID will be coming from the same peer manager
@@ -22,7 +21,6 @@ export class PeerManager {
   routingTable: Map<string, string>;
 
   peers: Map<string, PeerConnection>;
-  // private signaler: Signaler;
   searchQueryFunctions: Map<string, Function> = new Map();
   RPC_remote: Map<string, Function> = new Map();
   rpc: { [key: string]: Function } = {};
@@ -46,14 +44,6 @@ export class PeerManager {
   reconnectTimer: number | null = null;
   peerStateSuperlog: boolean = true;
 
-  // async watchdog() {
-  //   // Check that we're connected to at least N peers. If not, reconnect to the bootstrap server.
-
-  //   if (this.peers.size === 0) {
-  //     await this.sendHello2();
-  //   }
-  // }
-
   animals = ['shrew', 'jerboa', 'lemur', 'weasel', 'possum', 'possum', 'marmoset', 'planigale', 'mole', 'narwhal'];
   adjectives = ['snazzy', 'whimsical', 'jazzy', 'bonkers', 'wobbly', 'spiffy', 'chirpy', 'zesty', 'bubbly', 'perky', 'sassy'];
   snakes = ['mamba', 'cobra', 'python', 'viper', 'krait', 'sidewinder', 'constrictor', 'boa', 'asp', 'anaconda', 'krait']
@@ -108,6 +98,18 @@ export class PeerManager {
   }
 
 
+  onPeerMessageFromPeer(remotePeerID: string, messageJSON: any) {
+    let targetPeer = this.peers.get(messageJSON.to);
+
+    if (!targetPeer) {
+      console.log.apply(null, log("[PeerManager] Coulnd't find peer for onPeerMessageFromPeer:", messageJSON.to));
+      return;
+    }
+
+    targetPeer.send(messageJSON);
+  }
+
+
   onWebsocketMessage(event: MessageEvent) {
     let messageJSON = event.data;
     let message: any = null;
@@ -149,10 +151,11 @@ export class PeerManager {
         if (!peerConnection) {
           let remotePeerID = message.from;
           let newPeer = new PeerConnection(this, remotePeerID, this.websocketSendPeerMessage.bind(this));
-          if (this._isBootstrapPeer) {
+          
-            newPeer.setPolite(false);
+          newPeer.setPoliteFromID(remotePeerID, true);
-          }
+
           peerConnection = newPeer;
+
           this.peers.set(newPeer.remotePeerID, newPeer);
 
           this.onConnectRequest(newPeer);
@@ -580,6 +583,12 @@ class PeerConnection {
     this.polite = polite;
   }
 
+  setPoliteFromID(peerID: PeerID, remote = false) {
+    let polite = (parseInt(peerID.charAt(peerID.length-1), 16) % 2 == 0) && !remote;
+
+    this.setPolite(polite);
+  }
+
   setupDataChannel() {
     if (!this.dataChannel) {
       throw new Error();
@@ -713,6 +722,7 @@ class PeerConnection {
 
       try {
         this.makingOffer = true;
+        this.setPoliteFromID(this.peerManager.peerID);
         await this.rtcPeer.setLocalDescription();
 
         if (!this.rtcPeer.localDescription) {
@@ -801,12 +811,6 @@ class PeerConnection {
     } catch (err) {
       console.error(err);
     }
-    // };
-    //     */
-
-
-
-
   }
 
   disconnect() {
@@ -884,15 +888,12 @@ class PeerConnection {
     }
   }
 
-
-
-
   call(functionName: string, args: any) {
     let transactionID = generateID(); // make this faster as we will only ever have a small number of in-flight queries on a peer
-    // Think about a timeout here to auto reject it after a while.
     let promise = new Promise((resolve, reject) => {
       this.pendingRPCs.set(transactionID, { resolve, reject, functionName });
-      setTimeout(() => reject(`function:${functionName}[${transactionID}] failed to resolve after 10 seconds.`), 10_000);
+      let timeoutSeconds = 10;
+      setTimeout(() => reject(`function:${functionName}[${transactionID}] failed to resolve after ${timeoutSeconds} seconds.`), timeoutSeconds * 1000);
     });
 
     let message = {

src/Sync.ts

@@ -123,7 +123,8 @@ export class Sync {
         '194696a2-d850-4bb0-98f7-47416b3d1662',
         'f6b21eb1-a0ff-435b-8efc-6a3dd70c0dca',
         'dd1d92aa-aa24-4166-a925-94ba072a9048',
-        '290dbb4f-6ce1-491a-b90d-51d8efcd3d60'
+        '290dbb4f-6ce1-491a-b90d-51d8efcd3d60',
+        '3b32d0eb-94d5-49c4-a43b-0959a9fbb015'
     ]);
 
     getFollowing(userID: string): string[] {

src/dataUtils.ts

@@ -39,6 +39,20 @@ export async function compressString(input: string) {
   return compressedArray;
 }
 
+export async function decompressBuffer(input: ArrayBuffer): Promise<string> {
+  const decompressionStream = new DecompressionStream('gzip');
+  const writer = decompressionStream.writable.getWriter();
+  writer.write(new Uint8Array(input));
+  writer.close();
+  const decompressedBuffer = await new Response(decompressionStream.readable).arrayBuffer();
+  return new TextDecoder().decode(decompressedBuffer);
+}
+
+export async function base64ToArrayBuffer(base64: string): Promise<ArrayBuffer> {
+  const response = await fetch("data:application/octet-stream;base64," + base64);
+  return response.arrayBuffer();
+}
+
 // Base58 character set
 // const BASE58_ALPHABET = '123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz';
 // Base58 encoding

src/db.ts

@@ -15,7 +15,7 @@ const followingStoreName: string = "following"
 const profileStoreName: string = "profiles"
 let keyBase = "dandelion_posts_v1_"
 let key = "";
-let version = 1;
+let version = 3;
 
 
 interface IDBRequestEvent<T = any> extends Event {
@@ -28,13 +28,22 @@ type DBError = Event & {
 };
 
 
-async function upgrade_0to1(db: IDBDatabase) {
+async function upgrade_0to1(db: IDBDatabase, _transaction: IDBTransaction) {
     let postsStore = db.createObjectStore(postStoreName, { keyPath: "id", autoIncrement: true });
     postsStore.createIndex("datetimeIndex", "post_timestamp", { unique: false });
     postsStore.createIndex("postIDIndex", "data.post_id", { unique: true });
 }
 
+async function upgrade_1to2(_db: IDBDatabase, _transaction: IDBTransaction) {
+    // Was broken for some clients — index creation moved to upgrade_2to3
+}
 
+async function upgrade_2to3(_db: IDBDatabase, transaction: IDBTransaction) {
+    const postsStore = transaction.objectStore(postStoreName);
+    if (!postsStore.indexNames.contains("postReplyIndex")) {
+        postsStore.createIndex("postReplyIndex", "data.reply_to_id", { unique: false });
+    }
+}
 
 // let following = ['b38b623c-c3fa-4351-9cab-50233c99fa4e'];
 
@@ -51,13 +60,13 @@ async function upgrade_0to1(db: IDBDatabase) {
 
 // let tombstones = ['b38b623c-c3fa-4351-9cab-50233c99fa4e'];
 
-async function upgrade_1to2(db: IDBDatabase) {
+// async function upgrade_1to2(db: IDBDatabase) {
-    let followingStore = db.createObjectStore(followingStoreName, { keyPath: "id", autoIncrement: true });
+//     let followingStore = db.createObjectStore(followingStoreName, { keyPath: "id", autoIncrement: true });
-    let profileStore = db.createObjectStore(profileStoreName, { keyPath: "id", autoIncrement: true });
+//     let profileStore = db.createObjectStore(profileStoreName, { keyPath: "id", autoIncrement: true });
-    let tombstoneStore = db.createObjectStore(tombstoneStoreName, { keyPath: "id", autoIncrement: true });
+//     let tombstoneStore = db.createObjectStore(tombstoneStoreName, { keyPath: "id", autoIncrement: true });
-    tombstoneStore.createIndex("postIDIndex", "data.post_id", { unique: true });
+//     tombstoneStore.createIndex("postIDIndex", "data.post_id", { unique: true });
 
-}
+// }
 
 // async function upgrade_1to2(db: IDBDatabase) {
 //     console.log("Upgrading database from 1 to 2");
@@ -86,15 +95,15 @@ async function upgrade_1to2(db: IDBDatabase) {
 //     }
 // }
 
-async function upgrade_2to3(db: IDBDatabase) {
+// async function upgrade_2to3(db: IDBDatabase) {
-    let followingStore = db.createObjectStore(followingStoreName, { keyPath: "id", autoIncrement: true });
+//     let followingStore = db.createObjectStore(followingStoreName, { keyPath: "id", autoIncrement: true });
-}
+// }
 
 
 let upgrades = new Map([
     [0, upgrade_0to1],
     [1, upgrade_1to2],
-    [2, upgrade_2to3]
+    [2, upgrade_2to3],
 ]);
 
 export function openDatabase(userID: string): Promise<IDBDatabase> {
@@ -110,13 +119,15 @@ export function openDatabase(userID: string): Promise<IDBDatabase> {
 
         request.onupgradeneeded = async (event: IDBVersionChangeEvent) => {
             const db: IDBDatabase = (event.target as IDBOpenDBRequest).result;
+            const transaction: IDBTransaction = (event.target as IDBOpenDBRequest).transaction!;
 
-            let upgradeFunction = upgrades.get(event.oldVersion);
+            for (let v = event.oldVersion; v < (event.newVersion ?? version); v++) {
-            if (!upgradeFunction) {
+                const upgradeFunction = upgrades.get(v);
-                throw new Error(`db: Don't have an upgrade function to go from version ${event.oldVersion} to version ${event.newVersion}`);
+                if (!upgradeFunction) {
+                    throw new Error(`db: Don't have an upgrade function to go from version ${v} to version ${v + 1}`);
+                }
+                await upgradeFunction(db, transaction);
             }
-            // debugger;
-            await upgradeFunction(db);
         };
 
         request.onsuccess = (event: Event) => {
@@ -452,6 +463,67 @@ export async function getAllIds(userID: string): Promise<any | undefined> {
     });
 }
 
+export async function buildReplyCountMap(): Promise<{ direct: Map<string, number>, recursive: Map<string, number> }> {
+    const children = new Map<string, string[]>();
+    const knownUsers = [...(await indexedDB.databases())]
+        .map(db => db.name?.replace('user_', '')).filter(Boolean) as string[];
+    for (const userID of knownUsers) {
+        try {
+            const { store } = await getDBTransactionStore(userID);
+            const index = store.index("postReplyIndex");
+            const replies: any[] = await new Promise((resolve, reject) => {
+                const req = index.getAll();
+                req.onsuccess = () => resolve(req.result);
+                req.onerror = () => reject(req.error);
+            });
+            for (const r of replies) {
+                const parentID = r.data.reply_to_id;
+                const replyID = r.data.post_id;
+                if (parentID && replyID) {
+                    if (!children.has(parentID)) children.set(parentID, []);
+                    children.get(parentID)!.push(replyID);
+                }
+            }
+        } catch (_) {}
+    }
+
+    const direct = new Map<string, number>();
+    for (const [parentID, kids] of children) {
+        direct.set(parentID, kids.length);
+    }
+
+    const countDescendants = (postID: string): number => {
+        const kids = children.get(postID) ?? [];
+        return kids.reduce((sum, kid) => sum + 1 + countDescendants(kid), 0);
+    };
+
+    const recursive = new Map<string, number>();
+    for (const postID of children.keys()) {
+        recursive.set(postID, countDescendants(postID));
+    }
+
+    return { direct, recursive };
+}
+
+export async function getRepliesForPost(postID: string): Promise<any[]> {
+    const knownUsers = [...(await indexedDB.databases())]
+        .map(db => db.name?.replace('user_', '')).filter(Boolean) as string[];
+    let replies: any[] = [];
+    for (const userID of knownUsers) {
+        try {
+            const { store } = await getDBTransactionStore(userID);
+            const index = store.index("postReplyIndex");
+            const results: any[] = await new Promise((resolve, reject) => {
+                const req = index.getAll(postID);
+                req.onsuccess = () => resolve(req.result);
+                req.onerror = () => reject(req.error);
+            });
+            replies = replies.concat(results);
+        } catch (_) {}
+    }
+    return replies;
+}
+
 export async function getPostsByIds(userID: string, postIDs: string[]) {
     const { store } = await getDBTransactionStore(userID);
     const index = store.index("postIDIndex");

static/App.js

@@ -1,11 +1,11 @@
 import { generateID } from "IDUtils";
 import { PeerManager, PeerEventTypes } from "PeerManager";
 import { Sync } from "Sync";
-import { openDatabase, getData, addData, deleteData, getAllData, getPostForUser } from "db";
+import { openDatabase, getData, addData, deleteData, mergeDataArray, getAllData, getPostForUser, getRepliesForPost, buildReplyCountMap } from "db";
-import { arrayBufferToBase64, compressString } from "dataUtils";
+import { arrayBufferToBase64, compressString, decompressBuffer, base64ToArrayBuffer } from "dataUtils";
 import { log, logID, renderLog, setLogVisibility } from "log";
 class Post {
-    constructor(author, author_id, text, post_timestamp, imageData = null, importedFrom = null, importSource = null) {
+    constructor(author, author_id, text, post_timestamp, imageData = null, importedFrom = null, importSource = null, reply_to_id = null) {
         this.post_timestamp = post_timestamp;
         this.post_id = generateID();
         this.author = author;
@@ -14,6 +14,7 @@ class Post {
         this.image_data = imageData;
         this.importedFrom = importedFrom;
         this.importSource = importSource;
+        this.reply_to_id = reply_to_id;
     }
 }
 class StatusBar {
@@ -68,6 +69,7 @@ export class App {
         this.peername = '';
         this.userID = '';
         this.peerID = '';
+        this.replyToID = null;
         this.following = new Set();
         this.posts = [];
         this.isHeadless = false;
@@ -252,20 +254,14 @@ export class App {
                 await this.peerManager?.rpc.sendPostForUser(requestingPeerID, this.peerID, userID, post);
             }
             return true;
-            // return posts;
-            // return postIDs;
         });
         this.peerManager.registerRPC('sendPostForUser', async (sendingPeerID, userID, post) => {
             console.log.apply(null, log(`[app] sendPostForUser got post[${logID(post.post_id)}] from peer[${logID(sendingPeerID)}] for user[${logID(userID)}] author[${post.author}] text[${post.text}]`));
-            // if (post.text === "image...") {
-            //   debugger;
-            // }
             let peerData = this.statusBar.getPeerData(sendingPeerID);
             if (peerData) {
                 this.statusBar.updatePeerMessage(sendingPeerID, `⬇️${logID(userID)} ${peerData.havePostCount}/${peerData.neededPostCount}}`);
             }
             await this.sync.writePostForUser(userID, post);
-            // if (userID === this.userID) {
             if (peerData) {
                 peerData.havePostCount++;
                 this.statusBar.updatePeerMessage(sendingPeerID, `⬇️${logID(userID)} ${peerData.havePostCount}/${peerData.neededPostCount}}`);
@@ -275,13 +271,12 @@ export class App {
             }
             this.renderTimer = setTimeout(() => { this.render(); }, 1000);
             return true;
-            // }
         });
-        this.statusBar.setMessageHTML("Connecting to ddln network...");
+        this.statusBar.setMessageHTML("Connecting to ddln...");
         await this.peerManager.connect();
         console.log.apply(null, log("*************** after peerManager.connect"));
         ;
-        this.statusBar.setMessageHTML("Connected to ddln network...");
+        this.statusBar.setMessageHTML("Connected to ddln.");
         if (this.isBootstrapPeer) {
             return;
         }
@@ -387,7 +382,20 @@ export class App {
         document.body.removeChild(link);
         globalThis.URL.revokeObjectURL(url);
     }
-    async importPostsForUser(userID, posts) {
+    async importPostsForUser(userID, buffer) {
+        console.log.apply(null, log("Importing posts"));
+        const json = await decompressBuffer(buffer);
+        const posts = JSON.parse(json);
+        for (let post of posts) {
+            if (post.image_data && typeof post.image_data === 'string') {
+                post.image_data = await base64ToArrayBuffer(post.image_data);
+            }
+            if (post.post_timestamp && typeof post.post_timestamp === 'string') {
+                post.post_timestamp = new Date(post.post_timestamp);
+            }
+        }
+        await mergeDataArray(userID, posts);
+        console.log.apply(null, log(`Imported ${posts.length} posts`));
     }
     async exportPostsForUser(userID) {
         let posts = await getAllData(userID);
@@ -530,20 +538,20 @@ export class App {
             return null;
         }
     }
-    async createNewPost(userID, postText, mediaData, mimeType) {
+    async createPost(userID, postText, mediaData, mimeType, replyToID = null) {
         if ((typeof postText !== "string") || postText.length === 0) {
             console.log.apply(null, log("Not posting an empty string..."));
             return;
         }
         if (mediaData &&
             (mimeType === 'image/jpg' || mimeType === 'image/jpeg' || mimeType === 'image/png') &&
-            mediaData.byteLength > 500 * 1024) {
+            mediaData.byteLength > 256 * 1024) {
             let compressedImage = await this.compressImage(mediaData, mimeType, 0.9);
             if (compressedImage) {
                 mediaData = compressedImage;
             }
         }
-        let post = new Post(this.username, userID, postText, new Date(), mediaData);
+        let post = new Post(this.username, userID, postText, new Date(), mediaData, null, null, replyToID);
         // this.posts.push(post);
         // localStorage.setItem(key, JSON.stringify(posts));
         addData(userID, post);
@@ -730,23 +738,33 @@ export class App {
         let navContainer = this.div('nav-container');
         let burgerMenuButton = this.div('burger-menu-button');
         burgerMenuButton.addEventListener('click', e => navContainer.classList.toggle('active'));
+        let importFilePicker = document.getElementById('import-file-input');
+        importFilePicker?.addEventListener('change', async () => {
+            const file = importFilePicker.files?.[0];
+            if (!file)
+                return;
+            const buffer = await file.arrayBuffer();
+            await this.importPostsForUser(this.userID, buffer);
+            importFilePicker.value = '';
+            this.render();
+        });
         let exportButton = this.button("export-button");
         exportButton.addEventListener('click', async (e) => {
             await this.exportPostsForUser(this.userID);
         });
         let composeButton = this.div('compose-button');
         composeButton.addEventListener('click', e => {
-            document.getElementById('compose').style.display = 'block';
+            this.enterCompose();
-            document.getElementById('textarea_post')?.focus();
         });
         let filePicker = document.getElementById('file-input');
         filePicker?.addEventListener('change', async (event) => {
             for (let file of filePicker.files) {
                 let buffer = await file.arrayBuffer();
-                await this.createNewPost(this.userID, 'image...', buffer, file.type);
+                await this.createPost(this.userID, 'image...', buffer, file.type, this.replyToID);
             }
             // Reset so that if they pick the same image again, we still get the change event.
             filePicker.value = '';
+            this.exitCompose();
         });
         let filePickerLabel = document.getElementById('file-input-label');
         filePickerLabel?.addEventListener('click', () => {
@@ -773,21 +791,31 @@ export class App {
         //   this.render();
         // });
         // clearPostsButton.addEventListener('click', () => { clearData(userID); posts = []; this.render() });
-        let postButton = document.getElementById("button_post");
+        let cancelPostButton = document.getElementById("button_cancel_post");
         let postText = document.getElementById("textarea_post");
-        if (!(postButton && postText)) {
+        let postButton = document.getElementById("button_post");
+        if (!(cancelPostButton && postButton && postText)) {
             throw new Error();
         }
+        cancelPostButton.addEventListener('click', (e) => {
+            this.exitCompose();
+        });
         postText.addEventListener('paste', async (e) => {
             const dataTransfer = e.clipboardData;
             const file = dataTransfer.files[0];
             let buffer = await file.arrayBuffer();
-            await this.createNewPost(this.userID, 'image...', buffer, file.type);
+            await this.createPost(this.userID, 'image...', buffer, file.type, this.replyToID);
         });
-        postButton.addEventListener("click", () => {
+        const submitPost = () => {
-            this.createNewPost(userID, postText.value);
+            this.createPost(userID, postText.value, undefined, undefined, this.replyToID);
-            postText.value = "";
+            this.exitCompose();
-            document.getElementById('compose').style.display = 'none';
+        };
+        postButton.addEventListener("click", submitPost);
+        postText.addEventListener("keydown", (e) => {
+            if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+                e.preventDefault();
+                submitPost();
+            }
         });
         // updateApp.addEventListener("click", () => {
         //   registration?.active?.postMessage({ type: "update_app" });
@@ -796,6 +824,27 @@ export class App {
         //   this.showInfo()
         // });
     }
+    // Change this all to a template so we're not toggling state in this crazy way!
+    enterCompose(replyToID = null) {
+        this.replyToID = replyToID;
+        if (replyToID) {
+            this.renderComposeReplyArea(replyToID);
+            document.getElementById("compose-reply-area").style.display = "block";
+        }
+        document.getElementById('compose').style.display = 'block';
+        document.getElementById('textarea_post')?.focus();
+        document.getElementById('compose-dimmer')?.classList.add("compose-dimmer-dimmed");
+        document.body.classList.add("no-scroll");
+    }
+    exitCompose() {
+        this.replyToID = null;
+        let postText = document.getElementById("textarea_post");
+        postText.value = "";
+        document.getElementById('compose').style.display = 'none';
+        document.getElementById('compose-dimmer')?.classList.remove("compose-dimmer-dimmed");
+        document.getElementById("compose-reply-area").style.display = "none";
+        document.body.classList.remove("no-scroll");
+    }
     async getPostsForFeed() {
         // get N posts from each user and sort them by date.
         // This isn't really going to work very well.
@@ -924,6 +973,7 @@ export class App {
         this.sync.setArchive(this.isArchivePeer);
         this.connect();
         await this.initDB();
+        window.addEventListener('popstate', () => { this.getRoute(); this.render(); });
         this.connectURL = `${document.location.origin}/connect/${this.userID}`;
         document.getElementById('connectURL').innerHTML = `<a href="${this.connectURL}">connect</a>`;
         let time = 0;
@@ -1056,13 +1106,18 @@ export class App {
         const fragment = document.createDocumentFragment();
         contentDiv.innerHTML = "";
         let count = 0;
+        const isPostView = this.router.route === App.Route.POST;
+        contentDiv.classList.toggle('post-view', isPostView);
+        const replyCountMap = await buildReplyCountMap();
         this.renderedPosts.clear();
         let first = true;
         for (let i = this.posts.length - 1; i >= 0; i--) {
             let postData = this.posts[i];
+            if (!isPostView && postData.data.reply_to_id)
+                continue;
             // this.postsSet.add(postData);
             // TODO return promises for all image loads and await those.
-            let post = this.renderPost(postData.data, first);
+            let post = this.renderPost(postData.data, first, replyCountMap.recursive.get(postData.data.post_id) ?? 0);
             first = false;
             // this.renderedPosts.set(postData.post_id, post);
             if (post) {
@@ -1077,6 +1132,28 @@ export class App {
             throw new Error("Couldn't get content div!");
         }
         contentDiv.appendChild(fragment);
+        if (isPostView && this.posts.length > 0) {
+            const renderReplies = async (postID, depth) => {
+                if (depth > 2)
+                    return;
+                const replies = await getRepliesForPost(postID);
+                // Top-level replies: newest first. Nested replies: oldest first (readable order).
+                if (depth === 0) {
+                    replies.sort((a, b) => new Date(b.data.post_timestamp).getTime() - new Date(a.data.post_timestamp).getTime());
+                }
+                else {
+                    replies.sort((a, b) => new Date(a.data.post_timestamp).getTime() - new Date(b.data.post_timestamp).getTime());
+                }
+                for (const reply of replies) {
+                    const el = this.renderPost(reply.data, false, replyCountMap.direct.get(reply.data.post_id) ?? 0);
+                    if (depth > 0)
+                        el.style.marginLeft = `${depth * 20}px`;
+                    contentDiv.appendChild(el);
+                    await renderReplies(reply.data.post_id, depth + 1);
+                }
+            };
+            await renderReplies(this.posts[0].data.post_id, 0);
+        }
         let renderTime = this.timerDelta();
         console.log.apply(null, log(`render took: ${renderTime.toFixed(2)}ms`));
         ;
@@ -1090,7 +1167,12 @@ export class App {
         deleteData(userID, postID);
         this.render();
     }
-    renderPost(post, first) {
+    renderComposeReplyArea(replyToID) {
+        let composeReplyArea = document.getElementById('compose-reply-area');
+        composeReplyArea.innerText = replyToID;
+        composeReplyArea.classList.add("show");
+    }
+    renderPost(post, first, replyCount = 0) {
         if (!(post.hasOwnProperty("text"))) {
             throw new Error("Post is malformed!");
         }
@@ -1106,6 +1188,14 @@ export class App {
             let shareUrl = `${document.location.origin}/user/${post.author_id}/post/${post.post_id}`;
             await navigator.clipboard.writeText(shareUrl);
         };
+        let replyButton = document.createElement('button');
+        replyButton.innerText = replyCount > 0 ? `reply (${replyCount})` : 'reply';
+        replyButton.onclick = async () => {
+            console.log(`replying to post ${post.post_id}`);
+            this.enterCompose(post.post_id);
+            // let shareUrl = `${document.location.origin}/user/${post.author_id}/post/${post.post_id}`;
+            // await navigator.clipboard.writeText(shareUrl)
+        };
         let ownPost = post.author_id === this.userID;
         let markdown = post.text;
         if (this.markedAvailable) {
@@ -1119,41 +1209,54 @@ export class App {
             markdown = markdown.replace("<iframe", `<iframe style="width:100%;height:50px;display:none" onblur="this.style.display = 'inline';"`);
         }
         let userURL = `${document.location.origin}/user/${post.author_id}/`;
-        let postTemplate = `<div>${first ? '' : '<hr>'}
+        let postTemplate = `<div class="post-container">${first ? '' : '<hr>'}
-        <div>
+        <div class="post-body">
-          <span class='header' title='${timestamp}'><img class="logo" src="/static/favicon.ico"><a class="username" href="${userURL}">@${post.author}</a> -
+          <div>
-            <span style="color:rgb(128,128,128)">${post.post_timestamp.toLocaleDateString()}</span>
+            <span class='header' title='${timestamp}'><img class="logo" src="/static/favicon.ico"><a class="username" href="${userURL}">@${post.author}</a> -
-          </span>
+              <span style="color:rgb(128,128,128)">${post.post_timestamp.toLocaleDateString()}</span>
-          ${ownPost ? `<span id="deleteButton"></span>` : ''}
+            </span>
+          </div>
+          <div>${markdown}</div>
+
+          <div id="image"></div>
+
+          <span id="replyButton"></span>
           ${ownPost ? `<span id="editButton"></span>` : ''}
           <span id="shareButton"></span>
+          ${ownPost ? `<span id="deleteButton"></span>` : ''}
         </div>
-        <div>${markdown}</div>
       </div>`;
         containerDiv.innerHTML = postTemplate;
+        const postBody = containerDiv.querySelector('.post-body');
+        postBody.addEventListener('click', (e) => {
+            if (e.target.closest('button, a'))
+                return;
+            history.pushState({}, '', `/user/${post.author_id}/post/${post.post_id}`);
+            this.getRoute();
+            this.render();
+        });
         if (ownPost) {
             containerDiv.querySelector('#deleteButton')?.appendChild(deleteButton);
             // containerDiv.querySelector('#editButton')?.appendChild(editButton);
         }
         containerDiv.querySelector('#shareButton')?.appendChild(shareButton);
-        if (!("image_data" in post && post.image_data)) {
+        containerDiv.querySelector('#replyButton')?.appendChild(replyButton);
-            // containerDiv.appendChild(timestampDiv);
+        let hasImage = ("image_data" in post && post.image_data);
-            return containerDiv;
+        if (hasImage) {
-            // return null;
+            let image = document.createElement("img");
+            image.title = `${(post.image_data.byteLength / 1024 / 1024).toFixed(2)}MBytes`;
+            // const blob = new Blob([post.image_data as ArrayBuffer], { type: 'image/png' });
+            const blob = new Blob([post.image_data]);
+            const url = URL.createObjectURL(blob);
+            image.onload = () => {
+                // URL.revokeObjectURL(url);
+            };
+            image.src = url;
+            // image.src = image.src = "data:image/png;base64," + post.image;
+            image.className = "postImage";
+            // image.onclick = () => { App.maximizeElement(image) };
+            containerDiv.querySelector('#image')?.appendChild(image);
         }
-        let image = document.createElement("img");
-        image.title = `${(post.image_data.byteLength / 1024 / 1024).toFixed(2)}MBytes`;
-        // const blob = new Blob([post.image_data as ArrayBuffer], { type: 'image/png' });
-        const blob = new Blob([post.image_data]);
-        const url = URL.createObjectURL(blob);
-        image.onload = () => {
-            // URL.revokeObjectURL(url);
-        };
-        image.src = url;
-        // image.src = image.src = "data:image/png;base64," + post.image;
-        image.className = "postImage";
-        // image.onclick = () => { App.maximizeElement(image) };
-        containerDiv.appendChild(image);
         // containerDiv.appendChild(timestampDiv);
         return containerDiv;
     }
@@ -1185,6 +1288,12 @@ export class App {
                 }
             }
         }
+        else {
+            this.router.route = App.Route.HOME;
+            this.router.userID = '';
+            this.router.postID = '';
+            this.router.mediaID = '';
+        }
         console.log.apply(null, log("router: ", this.router.userID, this.router.postID, this.router.mediaID, App.Route[this.router.route]));
         // user = /user/<ID>
         // post = /user/<ID>/post/<ID>

static/PeerManager.js

@@ -51,6 +51,14 @@ export class PeerManager {
         this.messageSuperlog && console.log.apply(null, log("<-signaler:", message));
         this.websocket.send(messageJSON);
     }
+    onPeerMessageFromPeer(remotePeerID, messageJSON) {
+        let targetPeer = this.peers.get(messageJSON.to);
+        if (!targetPeer) {
+            console.log.apply(null, log("[PeerManager] Coulnd't find peer for onPeerMessageFromPeer:", messageJSON.to));
+            return;
+        }
+        targetPeer.send(messageJSON);
+    }
     onWebsocketMessage(event) {
         let messageJSON = event.data;
         let message = null;
@@ -82,9 +90,7 @@ export class PeerManager {
                 if (!peerConnection) {
                     let remotePeerID = message.from;
                     let newPeer = new PeerConnection(this, remotePeerID, this.websocketSendPeerMessage.bind(this));
-                    if (this._isBootstrapPeer) {
+                    newPeer.setPoliteFromID(remotePeerID, true);
-                        newPeer.setPolite(false);
-                    }
                     peerConnection = newPeer;
                     this.peers.set(newPeer.remotePeerID, newPeer);
                     this.onConnectRequest(newPeer);
@@ -163,7 +169,6 @@ export class PeerManager {
         //     message: { type: "get_posts_for_user", post_ids: postIds, user_id: message.user_id } }
     }
     constructor(userID, peerID, isBootstrapPeer) {
-        // private signaler: Signaler;
         this.searchQueryFunctions = new Map();
         this.RPC_remote = new Map();
         this.rpc = {};
@@ -182,12 +187,6 @@ export class PeerManager {
         this.watchdogInterval = null;
         this.reconnectTimer = null;
         this.peerStateSuperlog = true;
-        // async watchdog() {
-        //   // Check that we're connected to at least N peers. If not, reconnect to the bootstrap server.
-        //   if (this.peers.size === 0) {
-        //     await this.sendHello2();
-        //   }
-        // }
         this.animals = ['shrew', 'jerboa', 'lemur', 'weasel', 'possum', 'possum', 'marmoset', 'planigale', 'mole', 'narwhal'];
         this.adjectives = ['snazzy', 'whimsical', 'jazzy', 'bonkers', 'wobbly', 'spiffy', 'chirpy', 'zesty', 'bubbly', 'perky', 'sassy'];
         this.snakes = ['mamba', 'cobra', 'python', 'viper', 'krait', 'sidewinder', 'constrictor', 'boa', 'asp', 'anaconda', 'krait'];
@@ -417,6 +416,10 @@ class PeerConnection {
     setPolite(polite) {
         this.polite = polite;
     }
+    setPoliteFromID(peerID, remote = false) {
+        let polite = (parseInt(peerID.charAt(peerID.length - 1), 16) % 2 == 0) && !remote;
+        this.setPolite(polite);
+    }
     setupDataChannel() {
         if (!this.dataChannel) {
             throw new Error();
@@ -513,6 +516,7 @@ class PeerConnection {
             }
             try {
                 this.makingOffer = true;
+                this.setPoliteFromID(this.peerManager.peerID);
                 await this.rtcPeer.setLocalDescription();
                 if (!this.rtcPeer.localDescription) {
                     return;
@@ -590,8 +594,6 @@ class PeerConnection {
         catch (err) {
             console.error(err);
         }
-        // };
-        //     */
     }
     disconnect() {
         this.rtcPeer?.close();
@@ -651,10 +653,10 @@ class PeerConnection {
     }
     call(functionName, args) {
         let transactionID = generateID(); // make this faster as we will only ever have a small number of in-flight queries on a peer
-        // Think about a timeout here to auto reject it after a while.
         let promise = new Promise((resolve, reject) => {
             this.pendingRPCs.set(transactionID, { resolve, reject, functionName });
-            setTimeout(() => reject(`function:${functionName}[${transactionID}] failed to resolve after 10 seconds.`), 10000);
+            let timeoutSeconds = 10;
+            setTimeout(() => reject(`function:${functionName}[${transactionID}] failed to resolve after ${timeoutSeconds} seconds.`), timeoutSeconds * 1000);
         });
         let message = {
             type: "rpc_call",

static/Sync.js

@@ -45,7 +45,8 @@ export class Sync {
             '194696a2-d850-4bb0-98f7-47416b3d1662',
             'f6b21eb1-a0ff-435b-8efc-6a3dd70c0dca',
             'dd1d92aa-aa24-4166-a925-94ba072a9048',
-            '290dbb4f-6ce1-491a-b90d-51d8efcd3d60'
+            '290dbb4f-6ce1-491a-b90d-51d8efcd3d60',
+            '3b32d0eb-94d5-49c4-a43b-0959a9fbb015'
         ]);
         // async getPostIdsForUserHandler(data: any) {
         //     let message = data.message;

static/dataUtils.js

@@ -31,6 +31,18 @@ export async function compressString(input) {
     // Convert the compressed data to a Uint8Array
     return compressedArray;
 }
+export async function decompressBuffer(input) {
+    const decompressionStream = new DecompressionStream('gzip');
+    const writer = decompressionStream.writable.getWriter();
+    writer.write(new Uint8Array(input));
+    writer.close();
+    const decompressedBuffer = await new Response(decompressionStream.readable).arrayBuffer();
+    return new TextDecoder().decode(decompressedBuffer);
+}
+export async function base64ToArrayBuffer(base64) {
+    const response = await fetch("data:application/octet-stream;base64," + base64);
+    return response.arrayBuffer();
+}
 // Base58 character set
 // const BASE58_ALPHABET = '123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz';
 // Base58 encoding

static/dataUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"dataUtils.js","sourceRoot":"","sources":["../src/dataUtils.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,KAAK,UAAU,oBAAoB,CAAC,KAAiB,EAAE,IAAI,GAAG,0BAA0B;IAC7F,OAAO,MAAM,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;QAC3C,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,UAAU,EAAE,EAAE;YAC7C,MAAM,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC;YACpC,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC;SACpC,CAAC,CAAC;QACH,MAAM,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IACxD,CAAC,CAAC,CAAC;AACL,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,mBAAmB,CAAC,MAAmB;IAC3D,IAAI,KAAK,GAAG,IAAI,UAAU,CAAC,MAAM,CAAC,CAAC;IACnC,OAAO,CAAC,MAAM,oBAAoB,CAAC,KAAK,CAAY,CAAA,CAAC,OAAO,CAAC,uCAAuC,EAAE,EAAE,CAAC,CAAC;AAC5G,CAAC;AAED,6DAA6D;AAC7D,wFAAwF;AACxF,oDAAoD;AACpD,wBAAwB;AACxB,IAAI;AAEJ,MAAM,CAAC,KAAK,UAAU,cAAc,CAAC,KAAa;IAChD,qCAAqC;IACrC,MAAM,WAAW,GAAG,IAAI,WAAW,EAAE,CAAC;IACtC,MAAM,UAAU,GAAG,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAE7C,6BAA6B;IAC7B,MAAM,iBAAiB,GAAG,IAAI,iBAAiB,CAAC,MAAM,CAAC,CAAC;IACxD,MAAM,MAAM,GAAG,iBAAiB,CAAC,QAAQ,CAAC,SAAS,EAAE,CAAC;IAEtD,sCAAsC;IACtC,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;IACzB,MAAM,CAAC,KAAK,EAAE,CAAC;IAEf,2CAA2C;IAC3C,MAAM,eAAe,GAAG,MAAM,IAAI,QAAQ,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC,WAAW,EAAE,CAAC;IAErF,8CAA8C;IAC9C,OAAO,eAAe,CAAC;AACzB,CAAC;AAED,uBAAuB;AACvB,wFAAwF;AACxF,kBAAkB;AAClB,kBAAkB;AAClB,sDAAsD;AACtD,eAAe;AACf,wBAAwB;AAExB,iCAAiC;AACjC,oBAAoB;AACpB,gDAAgD;AAChD,iCAAiC;AACjC,gCAAgC;AAChC,wCAAwC;AACxC,QAAQ;AACR,0BAA0B;AAC1B,iCAAiC;AACjC,wCAAwC;AACxC,QAAQ;AACR,MAAM;AAEN,qBAAqB;AACrB,4CAA4C;AAC5C,wCAAwC;AACxC,MAAM;AAEN,iCAAiC;AACjC,iCAAiC;AACjC,2BAA2B;AAC3B,8CAA8C;AAC9C,eAAe;AACf,eAAe;AACf,QAAQ;AACR,MAAM;AAEN,mBAAmB;AACnB,IAAI;AAEJ,4BAA4B;AAC5B,gDAAgD;AAChD,qCAAqC;AACrC,gCAAgC;AAChC,IAAI"}
+{"version":3,"file":"dataUtils.js","sourceRoot":"","sources":["../src/dataUtils.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,KAAK,UAAU,oBAAoB,CAAC,KAAiB,EAAE,IAAI,GAAG,0BAA0B;IAC7F,OAAO,MAAM,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;QAC3C,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,UAAU,EAAE,EAAE;YAC7C,MAAM,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC;YACpC,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC;SACpC,CAAC,CAAC;QACH,MAAM,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IACxD,CAAC,CAAC,CAAC;AACL,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,mBAAmB,CAAC,MAAmB;IAC3D,IAAI,KAAK,GAAG,IAAI,UAAU,CAAC,MAAM,CAAC,CAAC;IACnC,OAAO,CAAC,MAAM,oBAAoB,CAAC,KAAK,CAAY,CAAA,CAAC,OAAO,CAAC,uCAAuC,EAAE,EAAE,CAAC,CAAC;AAC5G,CAAC;AAED,6DAA6D;AAC7D,wFAAwF;AACxF,oDAAoD;AACpD,wBAAwB;AACxB,IAAI;AAEJ,MAAM,CAAC,KAAK,UAAU,cAAc,CAAC,KAAa;IAChD,qCAAqC;IACrC,MAAM,WAAW,GAAG,IAAI,WAAW,EAAE,CAAC;IACtC,MAAM,UAAU,GAAG,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAE7C,6BAA6B;IAC7B,MAAM,iBAAiB,GAAG,IAAI,iBAAiB,CAAC,MAAM,CAAC,CAAC;IACxD,MAAM,MAAM,GAAG,iBAAiB,CAAC,QAAQ,CAAC,SAAS,EAAE,CAAC;IAEtD,sCAAsC;IACtC,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;IACzB,MAAM,CAAC,KAAK,EAAE,CAAC;IAEf,2CAA2C;IAC3C,MAAM,eAAe,GAAG,MAAM,IAAI,QAAQ,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC,WAAW,EAAE,CAAC;IAErF,8CAA8C;IAC9C,OAAO,eAAe,CAAC;AACzB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,gBAAgB,CAAC,KAAkB;IACvD,MAAM,mBAAmB,GAAG,IAAI,mBAAmB,CAAC,MAAM,CAAC,CAAC;IAC5D,MAAM,MAAM,GAAG,mBAAmB,CAAC,QAAQ,CAAC,SAAS,EAAE,CAAC;IACxD,MAAM,CAAC,KAAK,CAAC,IAAI,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC;IACpC,MAAM,CAAC,KAAK,EAAE,CAAC;IACf,MAAM,kBAAkB,GAAG,MAAM,IAAI,QAAQ,CAAC,mBAAmB,CAAC,QAAQ,CAAC,CAAC,WAAW,EAAE,CAAC;IAC1F,OAAO,IAAI,WAAW,EAAE,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;AACtD,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,mBAAmB,CAAC,MAAc;IACtD,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,uCAAuC,GAAG,MAAM,CAAC,CAAC;IAC/E,OAAO,QAAQ,CAAC,WAAW,EAAE,CAAC;AAChC,CAAC;AAED,uBAAuB;AACvB,wFAAwF;AACxF,kBAAkB;AAClB,kBAAkB;AAClB,sDAAsD;AACtD,eAAe;AACf,wBAAwB;AAExB,iCAAiC;AACjC,oBAAoB;AACpB,gDAAgD;AAChD,iCAAiC;AACjC,gCAAgC;AAChC,wCAAwC;AACxC,QAAQ;AACR,0BAA0B;AAC1B,iCAAiC;AACjC,wCAAwC;AACxC,QAAQ;AACR,MAAM;AAEN,qBAAqB;AACrB,4CAA4C;AAC5C,wCAAwC;AACxC,MAAM;AAEN,iCAAiC;AACjC,iCAAiC;AACjC,2BAA2B;AAC3B,8CAA8C;AAC9C,eAAe;AACf,eAAe;AACf,QAAQ;AACR,MAAM;AAEN,mBAAmB;AACnB,IAAI;AAEJ,4BAA4B;AAC5B,gDAAgD;AAChD,qCAAqC;AACrC,gCAAgC;AAChC,IAAI"}

static/db.js

@@ -10,12 +10,21 @@ const followingStoreName = "following";
 const profileStoreName = "profiles";
 let keyBase = "dandelion_posts_v1_";
 let key = "";
-let version = 1;
+let version = 3;
-async function upgrade_0to1(db) {
+async function upgrade_0to1(db, _transaction) {
     let postsStore = db.createObjectStore(postStoreName, { keyPath: "id", autoIncrement: true });
     postsStore.createIndex("datetimeIndex", "post_timestamp", { unique: false });
     postsStore.createIndex("postIDIndex", "data.post_id", { unique: true });
 }
+async function upgrade_1to2(_db, _transaction) {
+    // Was broken for some clients — index creation moved to upgrade_2to3
+}
+async function upgrade_2to3(_db, transaction) {
+    const postsStore = transaction.objectStore(postStoreName);
+    if (!postsStore.indexNames.contains("postReplyIndex")) {
+        postsStore.createIndex("postReplyIndex", "data.reply_to_id", { unique: false });
+    }
+}
 // let following = ['b38b623c-c3fa-4351-9cab-50233c99fa4e'];
 // let profiles = [
 //     {
@@ -27,12 +36,12 @@ async function upgrade_0to1(db) {
 //         description: "A very nice person who never does anything wrong.",
 //     }];
 // let tombstones = ['b38b623c-c3fa-4351-9cab-50233c99fa4e'];
-async function upgrade_1to2(db) {
+// async function upgrade_1to2(db: IDBDatabase) {
-    let followingStore = db.createObjectStore(followingStoreName, { keyPath: "id", autoIncrement: true });
+//     let followingStore = db.createObjectStore(followingStoreName, { keyPath: "id", autoIncrement: true });
-    let profileStore = db.createObjectStore(profileStoreName, { keyPath: "id", autoIncrement: true });
+//     let profileStore = db.createObjectStore(profileStoreName, { keyPath: "id", autoIncrement: true });
-    let tombstoneStore = db.createObjectStore(tombstoneStoreName, { keyPath: "id", autoIncrement: true });
+//     let tombstoneStore = db.createObjectStore(tombstoneStoreName, { keyPath: "id", autoIncrement: true });
-    tombstoneStore.createIndex("postIDIndex", "data.post_id", { unique: true });
+//     tombstoneStore.createIndex("postIDIndex", "data.post_id", { unique: true });
-}
+// }
 // async function upgrade_1to2(db: IDBDatabase) {
 //     console.log("Upgrading database from 1 to 2");
 //     console.log("Converting all image arraybuffers to Blobs")
@@ -55,13 +64,13 @@ async function upgrade_1to2(db) {
 //         }
 //     }
 // }
-async function upgrade_2to3(db) {
+// async function upgrade_2to3(db: IDBDatabase) {
-    let followingStore = db.createObjectStore(followingStoreName, { keyPath: "id", autoIncrement: true });
+//     let followingStore = db.createObjectStore(followingStoreName, { keyPath: "id", autoIncrement: true });
-}
+// }
 let upgrades = new Map([
     [0, upgrade_0to1],
     [1, upgrade_1to2],
-    [2, upgrade_2to3]
+    [2, upgrade_2to3],
 ]);
 export function openDatabase(userID) {
     const dbName = `user_${userID}`;
@@ -73,12 +82,14 @@ export function openDatabase(userID) {
         };
         request.onupgradeneeded = async (event) => {
             const db = event.target.result;
-            let upgradeFunction = upgrades.get(event.oldVersion);
+            const transaction = event.target.transaction;
-            if (!upgradeFunction) {
+            for (let v = event.oldVersion; v < (event.newVersion ?? version); v++) {
-                throw new Error(`db: Don't have an upgrade function to go from version ${event.oldVersion} to version ${event.newVersion}`);
+                const upgradeFunction = upgrades.get(v);
+                if (!upgradeFunction) {
+                    throw new Error(`db: Don't have an upgrade function to go from version ${v} to version ${v + 1}`);
+                }
+                await upgradeFunction(db, transaction);
             }
-            // debugger;
-            await upgradeFunction(db);
         };
         request.onsuccess = (event) => {
             const db = event.target.result;
@@ -345,6 +356,64 @@ export async function getAllIds(userID) {
         };
     });
 }
+export async function buildReplyCountMap() {
+    const children = new Map();
+    const knownUsers = [...(await indexedDB.databases())]
+        .map(db => db.name?.replace('user_', '')).filter(Boolean);
+    for (const userID of knownUsers) {
+        try {
+            const { store } = await getDBTransactionStore(userID);
+            const index = store.index("postReplyIndex");
+            const replies = await new Promise((resolve, reject) => {
+                const req = index.getAll();
+                req.onsuccess = () => resolve(req.result);
+                req.onerror = () => reject(req.error);
+            });
+            for (const r of replies) {
+                const parentID = r.data.reply_to_id;
+                const replyID = r.data.post_id;
+                if (parentID && replyID) {
+                    if (!children.has(parentID))
+                        children.set(parentID, []);
+                    children.get(parentID).push(replyID);
+                }
+            }
+        }
+        catch (_) { }
+    }
+    const direct = new Map();
+    for (const [parentID, kids] of children) {
+        direct.set(parentID, kids.length);
+    }
+    const countDescendants = (postID) => {
+        const kids = children.get(postID) ?? [];
+        return kids.reduce((sum, kid) => sum + 1 + countDescendants(kid), 0);
+    };
+    const recursive = new Map();
+    for (const postID of children.keys()) {
+        recursive.set(postID, countDescendants(postID));
+    }
+    return { direct, recursive };
+}
+export async function getRepliesForPost(postID) {
+    const knownUsers = [...(await indexedDB.databases())]
+        .map(db => db.name?.replace('user_', '')).filter(Boolean);
+    let replies = [];
+    for (const userID of knownUsers) {
+        try {
+            const { store } = await getDBTransactionStore(userID);
+            const index = store.index("postReplyIndex");
+            const results = await new Promise((resolve, reject) => {
+                const req = index.getAll(postID);
+                req.onsuccess = () => resolve(req.result);
+                req.onerror = () => reject(req.error);
+            });
+            replies = replies.concat(results);
+        }
+        catch (_) { }
+    }
+    return replies;
+}
 export async function getPostsByIds(userID, postIDs) {
     const { store } = await getDBTransactionStore(userID);
     const index = store.index("postIDIndex");

static/index.html

@@ -87,6 +87,8 @@
 
       <div id="info" style="display:none">
         <button id="export-button">export</button>
+        <label for="import-file-input" id="import-button" class="button">import</label>
+        <input type="file" id="import-file-input" accept=".gz" style="display:none">
 
         <div id="profile">
           <span class="form_label">username:</span><span class="form_field" id="username"
@@ -111,32 +113,41 @@
 
       </div>
 
-      <div id="compose">
-        <div id="buttons">
-          <!-- <button id="button_font1" >font1</button>
-        <button id="button_font2" >font2 </button> -->
-          <!-- <button id="import_tweets">import</button> -->
-          <!-- <button id="clear_posts">clear </button> -->
-          <!-- <button id="update_app">check for updates</button> -->
-          <!-- <button id="toggle_dark">light/dark</button> -->
-        </div>
 
-        <textarea cols="60" rows="6" id="textarea_post"></textarea>
-        <div class="right">
-          <label for="file-input" id="file-input-label" class="button button-big">photo</label>
-          <input type="file" id="file-input" accept="image/*" multiple style="display:none">
 
-          <!-- <button  id="button_add_pic" >🏞️</button> -->
+
-          <button id="button_post" class="button button-big">post</button>
-        </div>
-      </div>
       <!-- <div id="torrent-content"></div> -->
+
+
       <div id="content"></div>
 
       <div id="compose-button" class="compose-button emoji-fill">✏️</div>
 
     </div>
+
+
   </div>
+  <div id="compose-dimmer" class="compose-dimmer-normal"></div>
+
+
+  <div id="compose">
+  <div id="button_cancel_post" class="link">Cancel</div>
+
+    <div id="compose-reply-area"></div>
+    <textarea cols="60" rows="6" id="textarea_post"></textarea>
+    <div class="compose-footer">
+      <div class="compose-left-buttons">
+        <label for="file-input" id="file-input-label" class="button button-big">photo</label>
+        <input type="file" id="file-input" accept="image/*" multiple style="display:none">
+      </div>
+
+      <div class="compose-right-buttons">
+        <!-- <button  id="button_add_pic" >🏞️</button> -->
+        <button id="button_post" class="button button-big">post</button>
+      </div>
+    </div>
+  </div>
+
 </body>
 
 </html>

static/main.css

@@ -4,6 +4,7 @@
 
 :root {
     --main-bg-color: white;
+    --main-hover-color: rgb(64, 64, 64);
     --border-color: rgb(132, 136, 138);
     --edge-color: rgb(60, 60, 60);
     --main-fg-color: black;
@@ -14,6 +15,7 @@
 @media (prefers-color-scheme: dark) {
     :root {
         --main-bg-color: black;
+        --main-hover-color: rgb(64, 64, 64);
         --border-color: rgb(132, 136, 138);
         --edge-color: rgb(60, 60, 60);
         --main-fg-color: rgb(202, 208, 211);
@@ -22,6 +24,10 @@
     }
 }
 
+/* html, body {
+    overscroll-behavior-y: none; 
+} */
+
 body {
     font-family: sans-serif;
     color: var(--main-fg-color);
@@ -52,14 +58,21 @@ hr {
     font-family: sans-serif;
     background-color: var(--main-bg-color);
     color: var(--main-fg-color);
-    width: 100%;
     box-sizing: border-box;
-    padding-left: 30px;
+    padding-left: 20px;
-    padding-right: 30px;
+    padding-right: 20px;
     padding-top: 10px;
     border: 1px solid var(--border-color);
     resize: vertical;
     border-radius: 40px;
+
+    width: 98%;
+    margin: 1%;
+    height: 270px;
+
+    resize: vertical; 
+
+    max-height: 60vh;
 }
 
 .flex-container {
@@ -72,17 +85,35 @@ hr {
 
 .content {
     max-width: 600px;
-    /* Your preferred max width for the content */
     flex: 1;
-    /* Shorthand for flex-grow, flex-shrink and flex-basis */
+    box-sizing: border-box;
     min-width: 300px;
-    /* Minimum width the content can shrink to */
     padding: 20px;
     box-shadow: 0 0 5px var(--edge-color);
     text-align: left;
     overflow-x: hidden;
-    /* Hide horizontal overflow inside the flex container */
     line-height: 1.3;
+    z-index: 0;
+}
+
+.compose-dimmer-normal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 30;
+    background-color: black;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s ease, visibility 0.3s ease;
+
+}
+
+.compose-dimmer-dimmed {
+    background-color: black;
+    opacity: 0.7;
+    visibility: visible;
 }
 
 .embed {
@@ -94,6 +125,24 @@ hr {
 
 .postImage {
     width: 100%;
+    max-height: 500px;
+    object-fit: contain;
+    object-position: left;
+}
+
+.post-view .postImage {
+    max-height: none;
+}
+
+.post-body {
+    border-radius: 4px;
+    padding: 4px;
+    transition: background-color 0.1s;
+    cursor: pointer;
+}
+
+.post-body:hover {
+    background-color: var(--main-hover-color);
 }
 
 #log {
@@ -104,16 +153,43 @@ hr {
     width: 100%;
 }
 
-.right {
+/* .compose-footer {
-    text-align: right;
+    display: flex;
+    justify-content: space-between; 
+    align-items: center; 
+    width: 100%;
+    margin-top: 5px;
+    padding-left: 10px;
+    padding-right: 10px;
+    box-sizing: border-box; 
+} */
+
+.compose-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    flex-shrink: 0;
+    margin-top: 5px;
+    padding-left: 10px;
+    padding-right: 10px;
+    box-sizing: border-box; 
 }
 
-#buttons {
+.compose-left-buttons,
-    margin-left: 40px;
+.compose-right-buttons {
+    display: flex;
+    gap: 10px; /* Puts exactly 10px of space between buttons in the same group */
+    align-items: center;
 }
 
-#button_post {
+.link {
-    margin-right: 40px;
+    user-select: none;
+    display:inline-block;
+}
+.link:hover {
+    cursor: pointer;
+    color: var(--border-color);
 }
 
 a {
@@ -160,6 +236,7 @@ a {
 
 button,
 .button {
+    user-select: none;
     font-size: 12px;
     background-color: var(--main-bg-color);
     border-radius: 10px;
@@ -175,6 +252,15 @@ button,
     cursor: pointer;
 }
 
+button:hover,
+.button:hover {
+    background-color: var(--main-hover-color);
+}
+
+#deleteButton {
+    float: right;
+}
+
 .button-big {
     font-size: large;
 }
@@ -202,8 +288,39 @@ iframe {
     height: 300px;
 }
 
+/* #compose {
+    display: none;
+    position: fixed;
+    z-index: 100;
+} */
+
 #compose {
     display: none;
+    position: fixed;
+    top: 5%;
+    left: 50%;
+    width: 88%;
+    transform: translateX(-50%);
+
+    max-height: 85vh;
+    max-width: 600px;
+    overflow-y: auto; 
+
+    background-color: var(--main-bg-color);
+    z-index: 100;
+
+    padding: 5px;
+    border: 1px solid var(--border-color);
+    border-radius: 10px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
+}
+
+#compose-reply-area {
+    display:none;
+}
+
+.show {
+    display:block;
 }
 
 .username {
@@ -260,6 +377,7 @@ iframe {
 }
 
 .burger-menu {
+    user-select: none;
     text-align: center;
     width: 46px;
     border-radius: 10px;
@@ -269,7 +387,7 @@ iframe {
     top: 0px;
     font-size: 24px;
     cursor: pointer;
-    z-index: 1000;
+    z-index: 20;
     background: none;
     border: none;
     color: var(--main-fg-color);
@@ -280,14 +398,14 @@ iframe {
     position: fixed;
     inset: 0;
     background-color: rgba(0, 0, 0, 0.5);
-    z-index: 900;
 }
 
 @media (max-width: 700px) {
     .nav-container {
         display: none;
         /* transform: translateX(-100%); */
-        /* z-index: 1000; */
+        z-index:10;
+        user-select: none;
     }
 
     .nav-container.active {
@@ -328,7 +446,7 @@ iframe {
 
 .small {
     width: 24px;
-    height: 24px; 
+    height: 24px;
 }
 
 .profile-pic-container img {
@@ -343,6 +461,7 @@ iframe {
 }
 
 .compose-button {
+    user-select: none;
     font-size: 42px;
     position: fixed;
     bottom: 24px;
@@ -366,11 +485,11 @@ iframe {
     align-content: center;
     padding-left: 55px;
     font-size: 12px;
-    height:12px;
+    height: 12px;
 }
 
 .spinner {
-    display: inline-block; 
+    display: inline-block;
     animation-name: spin;
     animation-duration: 2000ms;
     animation-iteration-count: infinite;
@@ -378,6 +497,10 @@ iframe {
     /* font-size: 64px; */
 }
 
+.no-scroll {
+    overflow: hidden;
+}
+
 @keyframes spin {
     from {
         transform: rotate(0deg);
@@ -391,6 +514,6 @@ iframe {
 @media (prefers-reduced-motion: reduce) {
     .spinner {
         animation: none;
-        transform: none; 
+        transform: none;
     }
 }