Lotsa changes :)

src/main.ts

@@ -2,7 +2,7 @@
 
 
 
-import { getData, addData, addDataArray, clearData, deleteData, mergeDataArray, getAllData, checkPostIds, getAllIds, getPostsByIds} from "./db.js"
+import { getData, addData, addDataArray, clearData, deleteData, mergeDataArray, getAllData, checkPostIds, getAllIds, getPostsByIds } from "./db.js"
 
 declare let WebTorrent: any;
 
@@ -31,6 +31,56 @@ function uuidv4() {
   );
 }
 
+function uuidToBytes(uuid: string): Uint8Array {
+  return new Uint8Array(uuid.match(/[a-fA-F0-9]{2}/g)!.map((hex) => parseInt(hex, 16)));
+}
+
+// Base58 character set
+const BASE58_ALPHABET = '123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz';
+// Base58 encoding
+// Base58 encoding
+function encodeBase58(buffer: Uint8Array): string {
+  let carry;
+  const digits = [0];
+
+  for (const byte of buffer) {
+    carry = byte;
+    for (let i = 0; i < digits.length; i++) {
+      carry += digits[i] << 8;
+      digits[i] = carry % 58;
+      carry = Math.floor(carry / 58);
+    }
+    while (carry > 0) {
+      digits.push(carry % 58);
+      carry = Math.floor(carry / 58);
+    }
+  }
+
+  let result = '';
+  for (const digit of digits.reverse()) {
+    result += BASE58_ALPHABET[digit];
+  }
+
+  // Handle leading zero bytes
+  for (const byte of buffer) {
+    if (byte === 0x00) {
+      result = BASE58_ALPHABET[0] + result;
+    } else {
+      break;
+    }
+  }
+
+  return result;
+}
+
+// Convert UUID v4 to Base58
+function uuidToBase58(uuid: string): string {
+  const bytes = uuidToBytes(uuid);
+  return encodeBase58(bytes);
+}
+
+
+
 
 let logLines: string[] = [];
 let logLength = 10;
@@ -101,7 +151,7 @@ window.addEventListener('scroll', () => {
     console.log('Scrolled to the bottom!');
     console.log(scrollPoint, totalPageHeight);
   }
-  
+
 });
 
 
@@ -123,23 +173,36 @@ window.addEventListener('scroll', () => {
 //   }
 // }
 
-function arrayBufferToBase64( buffer:ArrayBuffer ) {
-  var binary = '';
-  var bytes = new Uint8Array( buffer );
-  var len = bytes.byteLength;
-  for (var i = 0; i < len; i++) {
-      binary += String.fromCharCode( bytes[ i ] );
-  }
-  return window.btoa( binary );
+async function bytesToBase64DataUrl(bytes: Uint8Array, type = "application/octet-stream") {
+  return await new Promise((resolve, reject) => {
+    const reader = Object.assign(new FileReader(), {
+      onload: () => resolve(reader.result),
+      onerror: () => reject(reader.error),
+    });
+    reader.readAsDataURL(new File([bytes], "", { type }));
+  });
 }
 
-function base64ToArrayBuffer(base64:string) {
-  var binaryString = atob(base64);
-  var bytes = new Uint8Array(binaryString.length);
-  for (var i = 0; i < binaryString.length; i++) {
-      bytes[i] = binaryString.charCodeAt(i);
-  }
-  return bytes.buffer;
+async function arrayBufferToBase64(buffer: ArrayBuffer) {
+  var bytes = new Uint8Array(buffer);
+  return (await bytesToBase64DataUrl(bytes) as string).replace("data:application/octet-stream;base64,", "");
+}
+
+// function base64ToArrayBuffer(base64: string) {
+//   var binaryString = atob(base64);
+//   var bytes = new Uint8Array(binaryString.length);
+//   for (var i = 0; i < binaryString.length; i++) {
+//     bytes[i] = binaryString.charCodeAt(i);
+//   }
+//   return bytes.buffer;
+// }
+
+async function base64ToArrayBuffer(base64String: string) {
+  let response = await fetch("data:application/octet-stream;base64," + base64String);
+  let arrayBuffer = await response.arrayBuffer();
+  return arrayBuffer;
+  // let buffer = new Uint8Array(arrayBuffer);
+  // return buffer;
 }
 
 class wsConnection {
@@ -154,7 +217,7 @@ class wsConnection {
   messageHandlers: Map<string, (event: any) => void> = new Map();
   peerMessageHandlers: Map<string, (data: any) => void> = new Map();
 
-  
+
   send(message: any) {
     let json = ""
     try {
@@ -162,13 +225,26 @@ class wsConnection {
     } catch (e) {
       console.log(e, "wsConnection send: Couldn't serialize message", message);
     }
-    log(`ws->${json.slice(0,240)}`)
+    // log(`ws->${json.slice(0, 240)}`)
     this.websocket!.send(json);
 
   }
 
   helloResponseHandler(data: any) {
-    for (let [userID, peerIDs] of Object.entries(data.userPeers)) {
+
+    let users = [];
+    try {
+      let currentUserPeers = data.userPeers[app.router.userID];
+      users.push([app.router.userID, data.userPeers[app.router.userID]]);
+      delete data.userPeers[app.router.userID];
+    } catch (e) {
+      console.log('helloResponseHandler', e);
+    }
+
+    users = [...users, ...Object.entries(data.userPeers)];
+    log(`Network: got ${users.length} users from bootstrap peer.  ${users.join(',')}`)
+
+    for (let [userID, peerIDs] of users) {
       this.peers.set(userID, [...Object.keys(peerIDs as any)]);
 
       for (let peerID of [...Object.keys(peerIDs as any)]) {
@@ -176,11 +252,12 @@ class wsConnection {
           continue;
         }
 
+        log(`Network: Requesting post IDs for user ${userID} from peer ${peerID}`);
         this.send({
-          type:"peer_message",
-          from:this.peerID,
-          to:peerID,
-          message:{type:"get_post_ids_for_user", user_id:userID}
+          type: "peer_message",
+          from: this.peerID,
+          to: peerID,
+          message: { type: "get_post_ids_for_user", user_id: userID }
         })
       }
     }
@@ -193,8 +270,8 @@ class wsConnection {
     // log(`getPostsForUserResponse: ${data}`)
 
     let message = data.message;
-    console.log(`getPostIdsForUserResponseHandler Got ${message.post_ids.length} from peer ${data.from}`);
-    
+    log(`Network: got ${message.post_ids.length} post IDs for user ${data.message.user_id} from peer ${data.from}`);
+
     console.log(`Checking post IDs...`);
 
     let postIds = await checkPostIds(message.user_id, data.message.post_ids);
@@ -203,18 +280,36 @@ class wsConnection {
       return;
     }
 
+    log(`Network: requesting ${postIds.length} posts for user ${message.user_id} from peer ${data.from}`)
     let responseMessage = { type: "peer_message", from: app.peerID, to: data.from, message: { type: "get_posts_for_user", post_ids: postIds, user_id: message.user_id } }
 
     this.send(responseMessage);
   }
 
- 
+
+  //   static async compressArrayBuffer(data: ArrayBuffer): Promise<ArrayBuffer> {
+  //     const compressionStream = new CompressionStream('gzip'); // You can also use 'deflate', 'deflate-raw', etc.
+
+  //     const compressedStream = new Response(
+  //         new Blob([data]).stream().pipeThrough(compressionStream)
+  //     );
+
+  //     const compressedArrayBuffer = await compressedStream.arrayBuffer();
+
+  //     return compressedArrayBuffer;
+  // }
 
   async getPostIdsForUserHandler(data: any) {
     let message = data.message;
-    let postIds = await getAllIds(message.user_id) ?? []; 
+    let postIds = await getAllIds(message.user_id) ?? [];
+    if (postIds.length === 0) {
+      log(`Network: I know about user ${message.user_id} but I have 0 posts, so I'm not sending any to to peer ${data.from}`);
+      return;
+    }
+    log(`Network: Sending ${postIds.length} post Ids for user ${message.user_id} to peer ${data.from}`)
+
     let responseMessage = { type: "peer_message", from: app.peerID, to: data.from, message: { type: "get_post_ids_for_user_response", post_ids: postIds, user_id: message.user_id } }
-    this.send(responseMessage)
+    this.send(responseMessage);
   }
 
   // Send posts to peer
@@ -222,43 +317,65 @@ class wsConnection {
     let message = data.message;
     let posts = await getPostsByIds(message.user_id, message.post_ids) ?? [];
 
+    log(`Network: Sending ${posts.length} posts for user ${message.user_id} to peer ${data.from}`);
+
+    app.timerStart();
     let output = [];
     for (let post of posts) {
-      let newPost = (post as any).data; if (newPost.image_data) {
-        newPost.image_data = arrayBufferToBase64(newPost.image_data)
+      let newPost = (post as any).data;
+
+      if (newPost.image_data) {
+        // let compressedData = await wsConnection.compressArrayBuffer(newPost.image_data);
+        // console.log((newPost.image_data.byteLength - compressedData.byteLength) / 1024 / 1024);
+        newPost.image_data = await arrayBufferToBase64(newPost.image_data)
+
       }
-      
+
+      // let megs = JSON.stringify(newPost).length/1024/1024;
+      // console.log(`getPostsForUserHandler id:${newPost.post_id} post length:${megs}`);
       output.push(newPost);
     }
-    
+
     // posts = posts.map((post:any)=>{let newPost = post.data; if (newPost.image_data){newPost.image_data = arraybufferto};return newPost});
     // posts = posts.map((post:any)=>{})
     let responseMessage = { type: "peer_message", from: app.peerID, to: data.from, message: { type: "get_posts_for_user_response", posts: output, user_id: message.user_id } }
     this.send(responseMessage)
+    let sendTime = app.timerDelta();
+
+    log(`send took: ${sendTime.toFixed(2)}ms`);
+
   }
 
   // Got posts from peer
-   async getPostsForUserReponseHandler(data: any) {
+  async getPostsForUserReponseHandler(data: any) {
+    app.timerStart();
     let message = data.message;
+    console.log(`Network: got ${message.posts.length} posts for user ${message.user_id} from peer ${data.from}`);
     console.log(`getPostsForUserResponseHandler Got ${message.posts.length} from peer ${data.from}`);
     for (let post of message.posts) {
+      if (message.user_id === app.userID) {
+        post.author_id = app.userID;
+      }
       post.post_timestamp = new Date(post.post_timestamp);
       if (post.image_data) {
-        post.image_data = base64ToArrayBuffer(post.image_data);
+        post.image_data = await base64ToArrayBuffer(post.image_data);
       }
     }
     console.log(`Merging same user peer posts...`)
-    await mergeDataArray(message.user_id, data.message.posts)
+    await mergeDataArray(message.user_id, data.message.posts);
+
+    let receiveTime = app.timerDelta();
+
+    log(`Receive took: ${receiveTime.toFixed(2)}ms`);
 
 
-    if (message.user_id === this.userID) {
-      app.posts = await app.loadPosts(this.userID) ?? [];
-      app.render(app.posts);
+    if (message.user_id === app.router.userID) {
+      app.render();
     }
   }
 
   async peerMessageHandler(data: any) {
-    log(`peerMessageHandler ${data}`)
+    // log(`peerMessageHandler ${JSON.stringify(data)}`)
 
     let peerMessageType = data.message.type;
 
@@ -287,14 +404,16 @@ class wsConnection {
       return;
     }
 
-    this.websocket.onopen = (event) => {
+    this.websocket.onopen = async (event) => {
       log("ws:connected");
-      this.send({type:"hello", user_id: this.userID, peer_id:this.peerID});
+      let knownUsers = [...(await indexedDB.databases())].map((db) => db.name?.replace('user_', ''));
+      console.log('Network: Sending known users', knownUsers);
+      this.send({ type: "hello", user_id: this.userID, peer_id: this.peerID, known_users: knownUsers });
       this.websocketPingInterval = window.setInterval(() => {
         if (!navigator.onLine) {
           return;
         }
-        this.send({type:"ping", peer_id: this.peerID});
+        this.send({ type: "ping", peer_id: this.peerID });
       }, 10_000)
     };
 
@@ -306,7 +425,7 @@ class wsConnection {
     };
 
     this.websocket.onmessage = (event) => {
-      log('ws:<-' + event.data.slice(0,240));
+      // log('ws:<-' + event.data.slice(0, 240));
 
       let data = JSON.parse(event.data);
 
@@ -361,6 +480,8 @@ class App {
   userID: string = '';
   peerID: string = '';
   posts: Post[] = [];
+  isHeadless: boolean = false;
+  showLog: boolean = false;
 
   initMarkdown() {
     const renderer = new marked.Renderer();
@@ -511,19 +632,19 @@ class App {
       });
   }
 
-  addPost(userID: string, postText: string, imageData?: ArrayBuffer) {
+  addPost(userID: string, postText: string, mediaData?: ArrayBuffer, mediaType?: "image/png" | "image/gif" | "image/jpg" | "video/mp4") {
     if ((typeof postText !== "string") || postText.length === 0) {
       log("Not posting an empty string...")
       return;
     }
 
-    let post = new Post(this.username, userID, postText, new Date(), imageData);
+    let post = new Post(this.username, userID, postText, new Date(), mediaData);
 
     this.posts.push(post);
     // localStorage.setItem(key, JSON.stringify(posts));
     addData(userID, post)
 
-    this.render(this.posts);
+    this.render();
   }
 
 
@@ -551,11 +672,30 @@ class App {
     return id;
   }
 
+  animals = ['shrew', 'jerboa', 'lemur', 'weasel', 'possum', 'possum', 'marmoset', 'planigale', 'mole', 'narwhal'];
+  adjectives = ['snazzy', 'whimsical', 'jazzy', 'bonkers', 'wobbly', 'spiffy', 'chirpy', 'zesty', 'bubbly', 'perky', 'sassy'];
+
+  hashUserIdToIndices() {
+    let indices = [];
+    for (let char of this.userID) {
+      if (char !== '0' && char !== '-') {
+        indices.push(parseInt(char, 16));
+        if (indices.length == 2) {
+          break;
+        }
+      }
+    }
+    return [indices[0], indices[1]];
+  }
+
   getUsername() {
     let username = localStorage.getItem("dandelion_username");
 
-    if (!username) {
-      username = "not_set"
+    if (!username || username === "not_set") {
+      let [one, two] = this.hashUserIdToIndices();
+      let adjective = this.adjectives[one % this.adjectives.length]
+      let animal = this.animals[two % this.animals.length]
+      username = `${adjective}_${animal}`
       localStorage.setItem("dandelion_username", username);
     }
 
@@ -592,8 +732,7 @@ class App {
     window.addEventListener('online', async () => {
       log("online")
       connection.connect();
-      this.posts = await this.loadPosts(this.userID) ?? [];
-      this.render(this.posts);
+      this.render();
     });
 
     log(`Online status: ${navigator.onLine ? "online" : "offline"}`)
@@ -650,14 +789,32 @@ class App {
     let clearPostsButton = document.getElementById("clear_posts") as HTMLButtonElement;
     let updateApp = document.getElementById("update_app") as HTMLButtonElement;
     let ddlnLogoButton = document.getElementById('ddln_logo_button') as HTMLDivElement;
-    // let addP = document.getElementById('button_add_pic') as HTMLDivElement;
+    // let addPic = document.getElementById('button_add_pic') as HTMLDivElement;
+    let filePickerLabel = document.getElementById('file_input_label');
+    let filePicker = document.getElementById('file_input') as HTMLInputElement;
+    let toggleDark = document.getElementById('toggle_dark') as HTMLButtonElement;
+
+    toggleDark.addEventListener('click', () => {
+      document.documentElement.style.setProperty('--main-bg-color', 'white');
+      document.documentElement.style.setProperty('--main-fg-color', 'black');
+    })
 
 
+    filePicker?.addEventListener('change', async (event: any) => {
+      for (let file of filePicker.files as any) {
+        let buffer = await file.arrayBuffer();
+        let type =
+          this.addPost(this.userID, 'image...', buffer);
+      }
+    });
+
+    filePickerLabel?.addEventListener('click', () => {
+      console.log("Add pic...")
+    })
 
-    
 
     let usernameField = document.getElementById('username');
-    usernameField?.addEventListener('input', (event:any)=>{
+    usernameField?.addEventListener('input', (event: any) => {
       this.username = event.target.innerText;
       localStorage.setItem("dandelion_username", this.username);
     })
@@ -678,12 +835,11 @@ class App {
       clearData(userID);
       // posts = posts.reverse();
       addDataArray(userID, imported_posts);
-      posts = await this.loadPosts(userID) ?? [];
-      this.render(posts);
+      this.render();
 
     });
 
-    clearPostsButton.addEventListener('click', () => { clearData(userID); posts = []; this.render(posts) });
+    clearPostsButton.addEventListener('click', () => { clearData(userID); posts = []; this.render() });
 
 
     let postButton = document.getElementById("button_post") as HTMLButtonElement;
@@ -693,12 +849,12 @@ class App {
       throw new Error();
     }
 
-    postText.addEventListener('paste', async (e)=>{
+    postText.addEventListener('paste', async (e) => {
       const dataTransfer = e.clipboardData
-      const file = dataTransfer!.files[ 0 ];
+      const file = dataTransfer!.files[0];
       let buffer = await file.arrayBuffer();
-      let type = 
-      this.addPost(this.userID, 'image...', buffer);
+      let type =
+        this.addPost(this.userID, 'image...', buffer);
     });
 
     postButton.addEventListener("click", () => {
@@ -719,10 +875,16 @@ class App {
     ddlnLogoButton.addEventListener('click', () => { infoElement.style.display == 'none' ? infoElement.style.display = 'block' : infoElement.style.display = 'none'; });
   }
 
-  async loadPosts(userID: string) {
+  async loadPosts(userID: string, postID?: string) {
 
     this.timerStart();
-    let posts: any = await getData(userID, new Date(2022, 8), new Date());
+    let posts: Post[] = [];
+
+    // if (postID) {
+    //   posts = await gePostForUser(userID, postID);
+    // }
+
+    posts = await getData(userID, new Date(2022, 8), new Date());
 
     if (posts.length > 0) {
       log(`Loaded ${posts.length} posts in ${this.timerDelta().toFixed(2)}ms`);
@@ -736,27 +898,47 @@ class App {
     // return await getData(userID, new Date(2022, 8), new Date());
   }
 
-  async main() {
-    let urlParams = (new URL(window.location.href)).searchParams;
-    let connection_userID = urlParams.get('connect');
-
-    let registration = undefined;
-    // if (urlParams.get("sw") === "true") {
-    registration = await this.registerServiceWorker();
-    // }
-
-    if (connection_userID) {
-      console.log('connect', connection_userID);
-      localStorage.setItem("dandelion_id", connection_userID);
+  async purgeEmptyUsers() {
+    let knownUsers = [...(await indexedDB.databases())].map((db) => db.name?.replace('user_', ''));
+    if (!knownUsers) {
+      return;
     }
 
-    this.username = this.getUsername();
-    document.getElementById('username')!.innerText = this.username;
+    for (let userID of knownUsers as string[]) {
+      let ids = await getAllIds(userID);
+      if (ids.length === 0) {
+        console.log(`Purging user ${userID}`);
+        indexedDB.deleteDatabase(`user_${userID}`);
+      }
+
+      console.log(`https://ddln.app/user/${userID}`);
+    }
+
+  }
+
+  async main() {
+    this.isHeadless = /\bHeadlessChrome\//.test(navigator.userAgent)
     let userID = this.getUserID();
     let peerID = this.getPeerID();
     this.userID = userID;
     this.peerID = peerID;
-    this.initButtons(userID, this.posts, registration);
+    this.getRoute();
+
+    if (this.router.route === App.Route.CONNECT) {
+      console.log('connect', this.router.userID);
+      localStorage.setItem("dandelion_id", this.router.userID);
+    }
+
+    let urlParams = (new URL(window.location.href)).searchParams;
+    let connection_userID = urlParams.get('connect');
+
+    let registration = undefined;
+
+    if (urlParams.has('log')) {
+      document.getElementById('info')!.style.display = "block";
+      this.showLog = true;
+    }
+
 
     let time = 0;
     let delta = 0;
@@ -776,20 +958,25 @@ class App {
     //   console.log(code);
     // registration.active.postMessage({type:"updateMain", code:code});
 
-    this.posts = await this.loadPosts(userID) ?? [];
+    // this.posts = await this.loadPosts(userID) ?? [];
 
     // debugger;
 
-    this.timerStart();
-    this.render(this.posts); // , (postID:string)=>{this.deletePost(userID, postID)}
-    let renderTime = this.timerDelta();
-
-    log(`render took: ${renderTime.toFixed(2)}ms`);
+    await this.render(); // , (postID:string)=>{this.deletePost(userID, postID)}
 
     if ((performance as any)?.memory) {
       log(`memory used: ${((performance as any).memory.usedJSHeapSize / 1024 / 1024).toFixed(2)}Mb`)
     }
-    let connectURL = `https://${document.location.hostname}?connect=${this.userID}`;
+    // if (urlParams.get("sw") === "true") {
+    registration = await this.registerServiceWorker();
+    // }
+
+    this.username = this.getUsername();
+    document.getElementById('username')!.innerText = this.username;
+
+    this.initButtons(userID, this.posts, registration);
+
+    let connectURL = `https://${document.location.hostname}/connect/${this.userID}`;
     document.getElementById('connectURL')!.innerHTML = `<a href="${connectURL}">connect</a>`;
 
     let qrcode = await new QRCode(document.getElementById('qrcode'), {
@@ -801,11 +988,14 @@ class App {
       correctLevel: QRCode.CorrectLevel.H
     });
 
-   
-    let qrcodeImage:HTMLImageElement = document.querySelector('#qrcode > img') as HTMLImageElement;
-    qrcodeImage.classList.add('qrcode_image');
 
-    log(`user:${userID} peer:${peerID}`);
+    (document.querySelector('#qrcode > img') as HTMLImageElement).classList.add('qrcode_image');
+    (document.querySelector('#qrcode > canvas') as HTMLImageElement).classList.add('qrcode_image');
+
+    log(`username:${this.username} user:${userID} peer:${peerID}`);
+
+    await this.purgeEmptyUsers();
+
     let websocket = new wsConnection(userID, peerID);
     window.addEventListener('beforeunload', () => { websocket.disconnect() })
     this.initOffline(websocket);
@@ -828,7 +1018,52 @@ class App {
     // })
   }
 
-  render(posts: Post[]) {
+
+  // keep a map of posts to dom nodes.
+  // on re-render
+  // posts that are not in our list that we need at add
+  // posts that are in our list that we need to remove
+
+  // postsSet = new Set();
+
+  async render() {
+    if (this.isHeadless) {
+      console.log('Headless so skipping render...');
+      return;
+    }
+    this.timerStart();
+
+    let posts = [];
+    switch (this.router.route) {
+      case App.Route.HOME:
+      case App.Route.CONNECT: {
+        posts = await this.loadPosts(this.userID) ?? [];
+        break;
+      }
+      case App.Route.USER: {
+        posts = await this.loadPosts(this.router.userID) ?? [];
+        break;
+      }
+      case App.Route.POST: {
+        posts = await this.loadPosts(this.router.userID, this.router.postID) ?? [];
+        break;
+      }
+      default: {
+        console.log("Render: got a route I didn't understand. Rendering HOME:", this.router.route);
+        posts = await this.loadPosts(this.userID) ?? [];
+        break;
+      }
+
+    }
+
+    // let newPostsSet = new Set(posts.map(post=>post.post_id));
+    // let newPosts = (newPostsSet as any).difference(this.postsSet);
+    // // let removedPosts = (this.postsSet as any).difference(newPosts);
+    // let keepPosts = (this.postsSet as any).intersection(newPostsSet);
+
+    // let renderPosts = keepPosts.union(newPosts);
+
+
     const fragment = document.createDocumentFragment();
     let contentDiv = document.getElementById("content");
     if (!contentDiv) {
@@ -839,8 +1074,9 @@ class App {
 
     for (let i = posts.length - 1; i >= 0; i--) {
       let postData = posts[i];
+      // this.postsSet.add(postData);
 
-      let post = this.renderPost(postData, posts);
+      let post = this.renderPost(postData);
 
       if (post) {
         fragment.appendChild(post);
@@ -858,15 +1094,23 @@ class App {
 
     contentDiv.appendChild(fragment);
 
+    let renderTime = this.timerDelta();
+
+    log(`render took: ${renderTime.toFixed(2)}ms`);
+
+    if ((performance as any)?.memory) {
+      log(`memory used: ${((performance as any).memory.usedJSHeapSize / 1024 / 1024).toFixed(2)}Mb`)
+    }
+
   }
 
   async deletePost(userID: string, postID: string) {
     deleteData(userID, postID)
-    this.posts = await this.loadPosts(userID) ?? [];
-    this.render(this.posts);
+
+    this.render();
   }
 
-  renderPost(post: Post, posts: Post[]) {
+  renderPost(post: Post) {
     if (!(post.hasOwnProperty("text"))) {
       throw new Error("Post is malformed!");
     }
@@ -875,23 +1119,41 @@ class App {
     let timestamp = `${post.post_timestamp.toLocaleTimeString()} · ${post.post_timestamp.toLocaleDateString()}`;
 
     let deleteButton = document.createElement('button'); deleteButton.innerText = 'delete';
+    deleteButton.onclick = () => { this.deletePost(post.author_id, post.post_id) };
+
     let editButton = document.createElement('button'); editButton.innerText = 'edit';
-    deleteButton.onclick = () => { this.deletePost(this.userID, post.post_id) };
+    let shareButton = document.createElement('button'); shareButton.innerText = 'share';
+    shareButton.onclick = async () => {
+      let shareUrl = `https://${document.location.hostname}/user/${post.author_id}/post/${post.post_id}`;
+
+      await navigator.clipboard.writeText(shareUrl)
+    };
+
+    let ownPost = post.author_id === this.userID;
 
     let postTemplate =
       `<div><hr>
-    <div>
-      <span class='header' title='${timestamp}'>@${post.author} -
-        <span style="color:rgb(128,128,128)">${post.post_timestamp.toLocaleDateString()}</span>
-        </span>
-        <span id="deleteButton"></span><span id="editButton"></span></div>
-    <div>${marked.parse(post.text)}</div>
-    </div>`
+        <div>
+          <span class='header' title='${timestamp}'><img class="logo" src="/static/favicon.ico">@${post.author} -
+            <span style="color:rgb(128,128,128)">${post.post_timestamp.toLocaleDateString()}</span>
+          </span>
+          ${ownPost ? `<span id="deleteButton"></span>` : ''}
+          ${ownPost ? `<span id="editButton"></span>` : ''}
+          <span id="shareButton"></span>
+        </div>
+        <div>${marked.parse(post.text)}</div>
+      </div>`
 
     containerDiv.innerHTML = postTemplate;
 
-    containerDiv.querySelector('#deleteButton')?.appendChild(deleteButton);
-    containerDiv.querySelector('#editButton')?.appendChild(editButton);
+
+    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.appendChild(timestampDiv);
@@ -900,6 +1162,7 @@ class App {
     }
 
     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);
@@ -907,12 +1170,10 @@ class App {
       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);
@@ -920,8 +1181,72 @@ class App {
     return containerDiv;
   }
 
+  static maximizeElement(element: HTMLImageElement) {
+    element.style.transform = "scale(2.0)"
+  }
+
+  router = {
+    route: App.Route.HOME,
+    userID: '',
+    postID: '',
+    mediaID: ''
+  }
+
+  getRoute() {
+    app.router.userID = this.userID;
+    let path = document.location.pathname;
+    console.log(">>>>>>>>>>>>>>>>>>>>>>>>>", path);
+
+    const regex = "(user/([a-zA-Z0-9\-]+)/?(post/([a-zA-Z0-9\-]+)?/?)?(media/([0-9]+)?)?)|(connect/([a-zA-Z0-9\-]+))";
+
+    const match = path.match(new RegExp(regex));
+
+    if (match) {
+      if (match[8]) {  // Check for the connect route
+        this.router.userID = match[8];
+        this.router.route = App.Route.CONNECT;
+      } else {
+
+        this.router.userID = match[2];
+        this.router.postID = match[4];
+        this.router.mediaID = match[6];
+
+        if (this.router.mediaID) {
+          this.router.route = App.Route.MEDIA;
+        } else if (this.router.postID) {
+          this.router.route = App.Route.POST;
+        } else {
+          this.router.route = App.Route.USER;
+        }
+      }
+    }
+
+    console.log(">>>>>>>>>>>>>", this.router, App.Route[this.router.route]);
+
+    // user = /user/<ID>
+    // post = /user/<ID>/post/<ID>
+    // media = /user/<ID>/post/<ID>/media/<index>
+    // group = /group/ID/post/<ID>
+    // hashtag = /hashtag/ -- maybe only hastags in groups
+    // home = /
+
+  }
+
 }
 
+namespace App {
+  export enum Route {
+    USER,
+    POST,
+    MEDIA,
+    GROUP,
+    HOME,
+    CONNECT,
+  };
+}
+
+
+
 let app = new App();
 
 window.addEventListener("load", app.main.bind(app));