0.0.31

added experimental /timeline/npub... route, this currently does
not correctly reload as contacts of that npub are lost onload.
other than that it seems to work well, but needs more testing.

.woodpecker.yml

@@ -0,0 +1,34 @@
+pipeline:
+  build:
+    image: node:18-alpine
+    commands:
+      - apk add --no-cache git
+      - npm ci
+      - npm run build
+  prepare_release:
+    when:
+      event: tag
+      tag: v*
+    image: node:18-slim
+    commands:
+      - tools/ci-make-release-targz.sh
+  create_release:
+    when:
+      event: tag
+      tag: v*
+    image: plugins/gitea-release
+    settings:
+      api_key:
+        from_secret: releaser_auth_token
+      base_url: https://git.qcode.ch
+      files: nostrweb.tar.gz
+      note: "automated release by ${CI_SYSTEM_HOST} \nbuild id: ${CI_BUILD_NUMBER}"
+  rsync_dist:
+    when:
+      event: tag
+      tag: v*
+    image: alpine:3.16.2
+    secrets: [releaser_ssh_key]
+    commands:
+      - apk add --no-cache --quiet openssh-client rsync
+      - tools/ci-rsync-release.sh

README.md

@@ -1,14 +1,15 @@
-# nostr web sandbox
+# nostr web client
+
+this is a web interface to [nostr](https://github.com/nostr-protocol/nostr#readme).
+a live instance is hosted at https://nostr.ch/
 
-a playground for a web interface to [nostr](https://nostr.info/).
 some useful resources:
 
 * JS library used in this project: https://github.com/fiatjaf/nostr-tools
 * NIPs: https://github.com/nostr-protocol/nips
-* relays registry: https://nostr-registry.netlify.app/
-* event inspector: https://nostr.com/
-* a working web interface in vue.js: https://astral.ninja/
-* https://github.com/aljazceru/awesome-nostr
+* relays registry: https://nostr-registry.netlify.app
+* event inspector: https://nostr.guru
+* a list of nostr projects and resources: https://nostr.net
 
 ## dev
 
@@ -27,3 +28,19 @@ execute
 
 the build is done using [esbuild](https://esbuild.github.io/), with a config in
 [esbuildconf.js](esbuildconf.js). the result is placed in `dist` directory.
+
+## release
+
+1. make sure `version` field in [package.json](package.json) as seen by remote
+git on **master** branch matches the tag created in the next step.
+2. tag a commit on **master** branch with a `git tag v<vesion>`.
+3. push the tag to the remote: `git push --tags`.
+
+the CI then receives a git tag event, executes `npm run build`, creates
+a tar.gz with all the files found in `dist` directory and uploads it as a new
+release artifact. the release is named after the tag name.
+
+the idea is that nostr web instances are then notified about a new release,
+download the tar.gz archive and update their local copies.
+this is not yet implemented. at the moment, the CI symply rsync's dist/ with
+a remote on https://nostr.ch.

esbuildconf.js

@@ -3,17 +3,28 @@ import { createRequire } from 'module';
 import alias from 'esbuild-plugin-alias';
 import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill';
 
+import { replaceOnCopyPlugin } from './tools/esbuild-helper.js'
+
 // see docs at https://esbuild.github.io/api/
 export const options = {
   entryPoints: [
-    'src/main.js',
-    'src/main.css',
+    'src/about.html',
+    'src/assets/comment.svg',
+    'src/assets/heart-fill.svg',
+    'src/assets/nostr-favicon.png',
+    'src/assets/nostr-favicon.svg',
+    'src/assets/star.svg',
+    'src/assets/star-fill.svg',
+    'src/favicon.ico',
     'src/index.html',
-    'src/bubble.svg'
+    'src/styles/main.css',
+    'src/main.ts',
+    'src/manifest.json',
+    'src/worker.js',
   ],
   outdir: 'dist',
   //entryNames: '[name]-[hash]', TODO: replace urls in index.html with hashed paths
-  loader: {'.html': 'copy', '.svg': 'copy'},
+  loader: {'.html': 'copy', '.ico': 'copy', '.png': 'copy', '.svg': 'copy'},
   bundle: true,
   platform: 'browser',
   minify: false, // TODO: true for release and enable sourcemap
@@ -27,7 +38,9 @@ export const options = {
       // cipher-base require's "stream"
       stream: createRequire(import.meta.url).resolve('readable-stream')
     }),
-    NodeGlobalsPolyfillPlugin({buffer: true})
+    NodeGlobalsPolyfillPlugin({buffer: true}),
+    replaceOnCopyPlugin(/about\.html$/),
+    replaceOnCopyPlugin(/manifest\.json$/),
   ]
 };
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nostrweb",
-  "version": "0.0.1",
+  "version": "0.0.31",
   "private": true,
   "type": "module",
   "devDependencies": {
@@ -8,7 +8,10 @@
     "esbuild": "^0.14.54",
     "esbuild-plugin-alias": "^0.2.1",
     "events": "^3.3.0",
-    "nostr-tools": "0.24.1"
+    "readable-stream": "4.3.0"
+  },
+  "dependencies": {
+    "nostr-tools": "1.10.1"
   },
   "scripts": {
     "build": "node tools/build.js",

src/about.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>about / nostr</title>
+    <link rel="stylesheet" href="styles/main.css" type="text/css">
+    <link rel="manifest" href="/manifest.json">
+  </head>
+  <body>
+    <main>
+      <div class="text">
+        <h1>nostr: notes and other stuff transmitted by relays</h1>
+        this is a nostr web client.<br>
+        source code is at <a href="https://git.qcode.ch/nostr/nostrweb">git.qcode.ch/nostr/nostrweb</a>.
+        <p>
+          you are looking at version #[PKG_VERSION]#, built at git commit
+          <a href="https://git.qcode.ch/nostr/nostrweb/commit/#[GIT_COMMIT]#">#[GIT_COMMIT]#</a>.
+        </p>
+        <p>
+          for more information about nostr protocol, check out
+          <a href="https://github.com/nostr-protocol/nostr#readme" target="_blank" rel="noopener noreferrer">github.com/nostr-protocol/nostr#readme</a>.
+        </p>
+        back to <a href="/">nostr.ch</a>
+      </div>
+    </main>
+  </body>
+</html>

src/assets/comment.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="21" viewBox="0 0 80.035 70.031"><path fill="transparent" stroke="#7f7f7f" stroke-width="4.927" d="M2.463 31.824q0-4.789 1.893-9.248 1.892-4.46 5.361-8.087 3.47-3.626 8.07-6.333 4.598-2.707 10.324-4.2 5.727-1.493 11.836-1.493 6.107 0 11.834 1.492 5.725 1.494 10.325 4.2 4.599 2.708 8.07 6.334 3.47 3.627 5.362 8.087 1.891 4.46 1.891 9.248 0 5.97-2.967 11.384-2.967 5.414-7.982 9.336-5.015 3.922-11.957 6.248-6.94 2.325-14.576 2.325-7.463 0-14.334-2.221l-8.537 6.038q-4.789 3.02-6.733 1.752-1.943-1.266-.867-7.13l1.77-8.886q-4.2-3.887-6.49-8.71-2.29-4.825-2.29-10.136Z"/></svg>

src/assets/heart-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M14 20.408c-.492.308-.903.546-1.192.709-.153.086-.308.17-.463.252h-.002a.75.75 0 01-.686 0 16.709 16.709 0 01-.465-.252 31.147 31.147 0 01-4.803-3.34C3.8 15.572 1 12.331 1 8.513 1 5.052 3.829 2.5 6.736 2.5 9.03 2.5 10.881 3.726 12 5.605 13.12 3.726 14.97 2.5 17.264 2.5 20.17 2.5 23 5.052 23 8.514c0 3.818-2.801 7.06-5.389 9.262A31.146 31.146 0 0114 20.408z"></path></svg>

src/assets/heart.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill-rule="evenodd" d="M4.25 2.5c-1.336 0-2.75 1.164-2.75 3 0 2.15 1.58 4.144 3.365 5.682A20.565 20.565 0 008 13.393a20.561 20.561 0 003.135-2.211C12.92 9.644 14.5 7.65 14.5 5.5c0-1.836-1.414-3-2.75-3-1.373 0-2.609.986-3.029 2.456a.75.75 0 01-1.442 0C6.859 3.486 5.623 2.5 4.25 2.5zM8 14.25l-.345.666-.002-.001-.006-.003-.018-.01a7.643 7.643 0 01-.31-.17 22.075 22.075 0 01-3.434-2.414C2.045 10.731 0 8.35 0 5.5 0 2.836 2.086 1 4.25 1 5.797 1 7.153 1.802 8 3.02 8.847 1.802 10.203 1 11.75 1 13.914 1 16 2.836 16 5.5c0 2.85-2.045 5.231-3.885 6.818a22.08 22.08 0 01-3.744 2.584l-.018.01-.006.003h-.002L8 14.25zm0 0l.345.666a.752.752 0 01-.69 0L8 14.25z"></path></svg>

src/assets/nostr-favicon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="331.088" height="331.088" viewBox="0 0 87.6 87.6">
+  <circle cx="90.953" cy="119.632" r="37.72" style="fill:none;fill-opacity:1;stroke:#f0f;stroke-width:12.16;stroke-dasharray:none;stroke-opacity:1" transform="translate(-47.152 -75.832)"/>
+</svg>

src/assets/star-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="#7f7f7f" d="M12.672.668a.75.75 0 00-1.345 0L8.27 6.865l-6.838.994a.75.75 0 00-.416 1.279l4.948 4.823-1.168 6.811a.75.75 0 001.088.791L12 18.347l6.117 3.216a.75.75 0 001.088-.79l-1.168-6.812 4.948-4.823a.75.75 0 00-.416-1.28l-6.838-.993L12.672.668z"></path></svg>

src/assets/star.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="#7f7f7f" d="M12 .25a.75.75 0 01.673.418l3.058 6.197 6.839.994a.75.75 0 01.415 1.279l-4.948 4.823 1.168 6.811a.75.75 0 01-1.088.791L12 18.347l-6.117 3.216a.75.75 0 01-1.088-.79l1.168-6.812-4.948-4.823a.75.75 0 01.416-1.28l6.838-.993L11.328.668A.75.75 0 0112 .25zm0 2.445L9.44 7.882a.75.75 0 01-.565.41l-5.725.832 4.143 4.038a.75.75 0 01.215.664l-.978 5.702 5.121-2.692a.75.75 0 01.698 0l5.12 2.692-.977-5.702a.75.75 0 01.215-.664l4.143-4.038-5.725-.831a.75.75 0 01-.565-.41L12 2.694z"></path></svg>

src/bubble.svg

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg enable-background="new 0 0 1000 1000" version="1.1" viewBox="0 0 1e3 1e3" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
-<path d="m240.4 673.3c-67.5 0-122.5 44.8-122.5 100 0 55.1 55 100 122.5 100s122.5-44.8 122.5-100c0-55.1-54.9-100-122.5-100zm0 160.3c-45.7 0-82.8-27-82.8-60.3 0-33.2 37.1-60.3 82.8-60.3s82.8 27 82.8 60.3c0 33.2-37.1 60.3-82.8 60.3z"/><path d="m108.5 865.9c-37.1 0-67.3 25.5-67.3 56.9s30.2 56.9 67.3 56.9 67.3-25.5 67.3-56.9-30.2-56.9-67.3-56.9zm0 74c-15.8 0-27.6-9.1-27.6-17.2s11.3-17.2 27.6-17.2c15.8 0 27.6 9.1 27.6 17.2s-11.8 17.2-27.6 17.2z"/><path d="m989.1 391c-5.4-48.7-35.5-92-83-120.4 0-5.9-0.3-11.5-0.9-16.8-10.2-91.8-93.6-161.2-194.7-162.8-38.1-50-102.5-77.1-171.9-69.3-35.3 4-68 16.6-95.5 36.8-28.5-25-67.5-37.4-108.8-32.8-58.6 6.5-106.6 47.2-119.1 99.1-130.6 36.7-217.5 153.8-203.8 277.4 13.7 122.4 120.2 216.1 254.6 225.3 28.3 24.1 69.3 35.8 112.4 31.1 19-2.1 37.5-7.5 54.1-15.7 31.8 22.3 72.4 34.4 115.8 34.4 8.6 0 17.2-0.5 25.8-1.4 62.8-7 117.7-38.7 147-84.1 12 1.6 24.1 2.4 36.2 2.4 10.1 0 20.3-0.6 30.4-1.7 122-13.6 212.3-104 201.4-201.5zm-205.6 162c-8.7 1-17.4 1.4-26 1.4-14.4 0-28.8-1.3-42.8-4l-14.5-2.7-6.8 13.2c-20.8 40.4-68.1 69.3-123.5 75.5-47 5.2-92.4-7.1-122.8-32.4l-10.9-9.1-12.1 7.4c-14.6 9-31.9 14.8-49.9 16.8-34 3.8-66.1-6-86-25.3l-5.4-5.3-7.5-0.3c-118.2-5.4-212.5-85.4-224.2-190.5-12-107.6 68-209.7 186.1-237.6l13.6-3.2 1.6-13.8c4.7-40.1 41.1-72.9 86.6-78 34.5-3.8 67.7 9 87.7 32.8l13.2 15.8 15.3-13.8c24.1-21.7 54.6-35.2 88.2-38.9 57.5-6.4 112.3 18.1 140.8 60.8l6.1 9.2 17.1-0.5c82.3 0 150.6 54.8 158.7 127.5 0.8 6.8 0.9 14.2 0.4 22.6l-0.8 12.9 11.5 6c42 21.9 68.6 56.7 72.9 95.8 8 75.9-66.6 146.5-166.6 157.7z"/>
-</svg>

src/cards.css

@@ -1,20 +0,0 @@
-/* https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Media_objects */
-.mbox {
-  display: flex;
-  align-items: flex-start;
-}
-
-.mbox .mbox-img {
-  width: 64px;
-  height: 64px;
-  margin-right: 1rem;
-}
-
-.mbox .mbox-body {
-  flex: 1;
-  color: var(--fgcolor-accent);
-}
-
-.mbox-body > .header {
-  margin-top: 0;
-}

src/contacts.ts

@@ -0,0 +1,291 @@
+import {Event, nip19, signEvent} from 'nostr-tools';
+import {elem} from './utils/dom';
+import {dateTime} from './utils/time';
+import {isNotNonceTag, isPTag} from './events';
+import {getViewContent, getViewElem, getViewOptions, setViewElem} from './view';
+import {powEvent} from './system';
+import {config} from './settings';
+import {getMetadata} from './profiles';
+import {publish} from './relays';
+import {parseJSON} from './media';
+
+const contactHistoryMap: {
+  [pubkey: string]: Event[];
+} = {};
+
+const hasOwnContactList = () => {
+  return !!contactHistoryMap[config.pubkey];
+};
+
+/**
+ * returns true if user is following pubkey
+ */
+export const isFollowing = (pubkey: string) => {
+  const following = contactHistoryMap[config.pubkey]?.at(0);
+  if (!following) {
+    return false;
+  }
+  return following.tags.some(([tag, value]) => tag === 'p' && value === pubkey);
+};
+
+export const updateFollowBtn = (pubkey: string) => {
+  const followBtn = getViewElem(`followBtn-${pubkey}`);
+  const view = getViewOptions();
+  if (followBtn && (view.type === 'contacts' || view.type === 'profile')) {
+    const hasContact = isFollowing(pubkey);
+    const isMe = config.pubkey === pubkey;
+    followBtn.textContent = isMe ? 'following' : hasContact ? 'unfollow' : 'follow';
+    followBtn.classList.remove('primary', 'secondary');
+    followBtn.classList.add(hasContact ? 'secondary' : 'primary');
+    followBtn.hidden = false;
+  }
+};
+
+const updateFollowing = (evt: Event) => {
+  const view = getViewOptions();
+  if (evt.pubkey === config.pubkey) {
+    localStorage.setItem('follwing', JSON.stringify(evt));
+  }
+  switch(view.type) {
+    case 'contacts':
+      if (hasOwnContactList()) {
+        const lastContactList = contactHistoryMap[config.pubkey]?.at(1);
+        if (lastContactList) {
+          const [added, removed] = findChanges(evt, lastContactList);
+          [
+            ...added.map(([, pubkey]) => pubkey),
+            ...removed.map(([, pubkey]) => pubkey),
+          ].forEach(updateFollowBtn);
+        } else {
+          evt.tags
+            .filter(isPTag)
+            .forEach(([, pubkey]) => updateFollowBtn(pubkey));
+        }
+      }
+      break;
+    case 'profile':
+      updateFollowBtn(view.id);
+      if (view.id === evt.pubkey) {
+        const npub = nip19.npubEncode(evt.pubkey);
+        // update following link
+        const following = getViewElem('following') as HTMLElement;
+        if (following) {
+          const count = evt.tags.filter(isPTag).length;
+          const anchor = elem('a', {
+            data: {following: evt.pubkey},
+            href: `/contacts/${npub}`,
+            title: dateTime.format(evt.created_at * 1000),
+          }, [
+            'following ',
+            elem('span', {className: 'highlight'}, count),
+          ]);
+          following.replaceWith(anchor);
+          setViewElem('following', anchor);
+        }
+        let timeline = getViewElem('timeline');
+        if (!timeline) {
+          timeline = elem('a', {href: `/timeline/${npub}`}, 'timeline');
+          getViewElem('header').querySelector('footer')?.append(timeline);
+          setViewElem('timeline', timeline);
+        }
+      }
+      break;
+  }
+};
+
+export const refreshFollowing = (id: string) => {
+  if (contactHistoryMap[id]?.at(0)) {
+    updateFollowing(contactHistoryMap[id][0]);
+  }
+};
+
+export const setContactList = (evt: Event) => {
+  const contactHistory = contactHistoryMap[evt.pubkey];
+  if (!contactHistory) {
+    contactHistoryMap[evt.pubkey] = [evt];
+    updateFollowing(evt);
+    return;
+  }
+  if (contactHistory.find(({id}) => id === evt.id)) {
+    return;
+  }
+  contactHistory.unshift(evt);
+  updateFollowing(contactHistory[0]); // TODO: ensure that this is newest contactlist?
+};
+
+/**
+ * findChanges
+ * returns added and removed contacts list of P tags, ignores any tag other than 'p'
+ */
+const findChanges = (current: Event, previous: Event) => {
+  const previousContacts = previous.tags.join('\n'); // filter for p tags first?
+  const currentContacts = current.tags.join('\n');
+  const addedContacts = current.tags.filter(([tag, pubkey]) => tag === 'p' && !previousContacts.includes(pubkey));
+  const removedContacts = previous.tags.filter(([tag, pubkey]) => tag === 'p' && !currentContacts.includes(pubkey));
+  return [addedContacts, removedContacts];
+};
+
+export const resetContactList = (pubkey: string) => {
+  delete contactHistoryMap[pubkey];
+};
+
+export const getContactUpdateMessage = (
+  addedList: string[][],
+  removedList: string[][],
+) => {
+  const content = [];
+  if (addedList.length && addedList[0]) {
+    const pubkey = addedList[0][1];
+    const {userName} = getMetadata(pubkey);
+    const npub = nip19.npubEncode(pubkey);
+    content.push(
+      'follows ',
+      elem('a', {href: `/${npub}`, data: {profile: pubkey}}, userName),
+    );
+  }
+  if (addedList.length > 1) {
+    content.push(` (+ ${addedList.length - 1} others)`);
+  }
+  if (removedList?.length > 0) {
+    if (content.length) {
+      content.push(' and');
+    }
+    content.push(' unfollowed ');
+    if (removedList.length > 1) {
+      content.push(`${removedList.length}`);
+    } else {
+      const removedPubkey = removedList[0][1];
+      const {userName: removeduserName} = getMetadata(removedPubkey);
+      const removedNpub = nip19.npubEncode(removedPubkey);
+      content.push(elem('a', {href: `/${removedNpub}`, data: {profile: removedPubkey}}, removeduserName));
+    }
+  }
+  return content;
+};
+
+export const updateContactList = (evt: Event) => {
+  const contactHistory = contactHistoryMap[evt.pubkey];
+  if (contactHistory.length === 1) {
+    return [contactHistory[0].tags.filter(isPTag)];
+  }
+  const pos = contactHistory.findIndex(({id}) => id === evt.id);
+  if (evt.id !== contactHistory.at(-1)?.id) { // not oldest known contact-list update
+    return findChanges(evt, contactHistory[pos + 1]);
+  }
+  // update existing contact entries
+  contactHistory
+    .slice(0, -1)
+    .forEach((entry, i) => {
+      const previous = contactHistory[i + 1];
+      const [added, removed] = findChanges(entry, previous);
+      const contactNote = getViewContent().querySelector(`[data-contacts="${entry.id}"]`);
+      const updated = getContactUpdateMessage(added, removed);
+      contactNote?.replaceChildren(...updated);
+    });
+  return [evt.tags.filter(isPTag)];
+};
+
+/**
+ * returns list of pubkeys the given pubkey is following
+ * @param pubkey
+ * @returns {String[]} pubkeys
+ */
+export const getContacts = (pubkey: string) => {
+  const following = contactHistoryMap[pubkey]?.at(0);
+  if (!following) {
+    return [];
+  }
+  return following.tags
+    .filter(isPTag)
+    .map(([, pubkey]) => pubkey);
+};
+
+/**
+ * returns list of pubkeys the user is following, if none found it will try from localstorage
+ * @returns {String[]} pubkeys
+ */
+export const getOwnContacts = () => {
+  const following = getContacts(config.pubkey);
+  if (following.length) {
+    return following;
+  }
+  const followingFromStorage = localStorage.getItem('follwing');
+  if (followingFromStorage) {
+    const follwingData = parseJSON(followingFromStorage) as Event;
+    // TODO: ensure signature matches
+    if (follwingData && follwingData.pubkey === config.pubkey) {
+      return follwingData.tags
+        .filter(isPTag)
+        .map(([, pubkey]) => pubkey);
+    }
+  }
+  return [];
+};
+
+const updateContactTags = (
+  followeeID: string,
+  currentContactList: Event | undefined,
+) => {
+  if (!currentContactList?.tags) {
+    return [['p', followeeID], ['p', config.pubkey]];
+  }
+  if (currentContactList.tags.some(([tag, id]) => tag === 'p' && id === followeeID)) {
+    return currentContactList.tags
+      .filter(([tag, id]) => tag === 'p' && id !== followeeID);
+  }
+  return [
+    ['p', followeeID],
+    ...currentContactList.tags
+      .filter(isNotNonceTag),
+  ];
+};
+
+export const followContact = async (pubkey: string) => {
+  const followBtn = getViewElem(`followBtn-${pubkey}`) as HTMLButtonElement;
+  const statusElem = getViewElem(`followStatus-${pubkey}`) as HTMLElement;
+  if (!followBtn || !statusElem) {
+    return;
+  }
+  const following = contactHistoryMap[config.pubkey]?.at(0);
+  const unsignedEvent = {
+    kind: 3,
+    pubkey: config.pubkey,
+    content: '',
+    tags: updateContactTags(pubkey, following),
+    created_at: Math.floor(Date.now() * 0.001),
+  };
+
+  followBtn.disabled = true;
+  const newContactListEvent = await powEvent(unsignedEvent, {
+    difficulty: config.difficulty,
+    statusElem,
+    timeout: config.timeout,
+  }).catch(console.warn);
+
+  if (!newContactListEvent) {
+    statusElem.textContent = '';
+    statusElem.hidden = false;
+    followBtn.disabled = false;
+    return;
+  }
+  const privatekey = localStorage.getItem('private_key');
+  if (!privatekey) {
+    statusElem.textContent = 'no private key to sign';
+    statusElem.hidden = false;
+    followBtn.disabled = false;
+    return;
+  }
+  const sig = signEvent(newContactListEvent, privatekey);
+  // TODO: validateEvent?
+  if (sig) {
+    statusElem.textContent = 'publishing…';
+    publish({...newContactListEvent, sig}, (relay, error) => {
+      if (error) {
+        return console.error(error, relay);
+      }
+      statusElem.hidden = true;
+      followBtn.disabled = false;
+      console.info(`event published by ${relay}`);
+    });
+  }
+};

src/domutil.js

@@ -1,18 +0,0 @@
-/**
- * example usage:
- *
- *   const props = {className: 'btn', onclick: async (e) => alert('hi')};
- *   const btn = elem('button', props, ['download']);
- *   document.body.append(btn);
- *
- * @param {string} name
- * @param {HTMLElement.prototype} props
- * @param {Array<HTMLElement|string>} children
- * @return HTMLElement
- */
-export function elem(name = 'div', props = {}, children = []) {
-    const el = document.createElement(name);
-    Object.assign(el, props);
-    el.append(...children);
-    return el;
-}

src/events.ts

@@ -0,0 +1,64 @@
+import {Event} from 'nostr-tools';
+import {zeroLeadingBitsCount} from './utils/crypto';
+
+export const isEvent = <T>(evt?: T): evt is T => evt !== undefined;
+export const isMention = ([tag, , , marker]: string[]) => tag === 'e' && marker === 'mention';
+export const isPTag = ([tag]: string[]) => tag === 'p';
+export const hasEventTag = (tag: string[]) => tag[0] === 'e';
+export const isNotNonceTag = ([tag]: string[]) => tag !== 'nonce';
+
+/**
+ * validate proof-of-work of a nostr event per nip-13.
+ * the validation always requires difficulty commitment in the nonce tag.
+ *
+ * @param {EventObj} evt event to validate
+ * TODO: @param {number} targetDifficulty target proof-of-work difficulty
+ */
+export const validatePow = (evt: Event) => {
+  const tag = evt.tags.find(tag => tag[0] === 'nonce');
+  if (!tag) {
+    return false;
+  }
+  const difficultyCommitment = Number(tag[2]);
+  if (!difficultyCommitment || Number.isNaN(difficultyCommitment)) {
+    return false;
+  }
+  return zeroLeadingBitsCount(evt.id) >= difficultyCommitment;
+}
+
+export const sortByCreatedAt = (evt1: Event, evt2: Event) => {
+  if (evt1.created_at ===  evt2.created_at) {
+    // console.log('TODO: OMG exactly at the same time, figure out how to sort then', evt1, evt2);
+  }
+  return evt1.created_at > evt2.created_at ? -1 : 1;
+};
+
+export const sortEventCreatedAt = (created_at: number) => (
+  {created_at: a}: Event,
+  {created_at: b}: Event,
+) => (
+  Math.abs(a - created_at) < Math.abs(b - created_at) ? -1 : 1
+);
+
+const isReply = ([tag, , , marker]: string[]) => tag === 'e' && marker !== 'mention';
+
+/**
+ * find reply-to ID according to nip-10, find marked reply or root tag or
+ * fallback to positional (last) e tag or return null
+ * @param {event} evt
+ * @returns replyToID | null
+ */
+export const getReplyTo = (evt: Event): string | null => {
+  const eventTags = evt.tags.filter(isReply);
+  const withReplyMarker = eventTags.filter(([, , , marker]) => marker === 'reply');
+  if (withReplyMarker.length === 1) {
+    return withReplyMarker[0][1];
+  }
+  const withRootMarker = eventTags.filter(([, , , marker]) => marker === 'root');
+  if (withReplyMarker.length === 0 && withRootMarker.length === 1) {
+    return withRootMarker[0][1];
+  }
+  // fallback to deprecated positional 'e' tags (nip-10)
+  const lastTag = eventTags.at(-1);
+  return lastTag ? lastTag[1] : null;
+};

src/index.html

@@ -2,45 +2,113 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>nostr sandbox</title>
-    <link rel="stylesheet" href="main.css" type="text/css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
+    <meta name="apple-mobile-web-app-status-bar-style" content="default">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <title>nostr</title>
+    <link rel="stylesheet" href="/styles/main.css" type="text/css">
+    <link rel="manifest" href="/manifest.json">
   </head>
   <body>
-    <div class="tabs">
-
-      <div class="tab">
-        <input type="radio" name="maintabs" id="homefeed" checked>
-        <label for="homefeed">feed</label>
-        <div class="content">
-          <div class="cards" id="feedlist"></div>
-        </div>
-      </div>
-
-      <div class="tab">
-        <input type="radio" name="maintabs" id="trending">
-        <label for="trending">trending</label>
-        <div class="content">
-          <p><a href="https://github.com/nostr-protocol/nips/blob/master/12.md">NIP-12 (generic queries)</a></p>
-        </div>
-      </div>
-
-      <div class="tab">
-        <input type="radio" name="maintabs" id="direct">
-        <label for="direct">direct</label>
-        <div class="content">
-          <p><a href="https://github.com/nostr-protocol/nips/blob/master/04.md">NIP-04 (direct msg)</a></p>
-        </div>
-      </div>
-
-      <div class="tab">
-        <input type="radio" name="maintabs" id="chat">
-        <label for="chat">chat</label>
-        <div class="content">
-          <p><a href="https://github.com/nostr-protocol/nips/blob/master/28.md">NIP-28 (public chat)</a></p>
-        </div>
-      </div>
-
+    <div class="root">
+      <main>
+        <aside>
+          <button name="new-note" id="bubble">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="21" viewBox="0 0 80.035 70.031">
+              <path fill="var(--bgcolor-textinput)" stroke="darkmagenta" stroke-width="4" d="M2.463 31.824q0-4.789 1.893-9.248 1.892-4.46 5.361-8.087 3.47-3.626 8.07-6.333 4.598-2.707 10.324-4.2 5.727-1.493 11.836-1.493 6.107 0 11.834 1.492 5.725 1.494 10.325 4.2 4.599 2.708 8.07 6.334 3.47 3.627 5.362 8.087 1.891 4.46 1.891 9.248 0 5.97-2.967 11.384-2.967 5.414-7.982 9.336-5.015 3.922-11.957 6.248-6.94 2.325-14.576 2.325-7.463 0-14.334-2.221l-8.537 6.038q-4.789 3.02-6.733 1.752-1.943-1.266-.867-7.13l1.77-8.886q-4.2-3.887-6.49-8.71-2.29-4.825-2.29-10.136Z"/>
+            </svg>
+          </button>
+          <section class="view" id="newNote" hidden>
+            <form action="#" id="writeForm" class="form-inline">
+              <fieldset>
+                <legend>write a new note</legend>
+                <textarea name="message" rows="1"></textarea>
+                <div class="buttons">
+                  <button type="submit" id="publish" class="primary" disabled>send</button>
+                  <button type="button" name="back" class="primary">back</button>
+                </div>
+                <small id="sendstatus" class="form-status"></small>
+              </fieldset>
+            </form>
+          </section>
+          <section class="view" id="settings" hidden>
+            <div class="content">
+              <form action="#" name="profile" autocomplete="new-password">
+                <label for="profile_name">name</label>
+                <input type="text" name="name" id="profile_name" autocomplete="off" pattern="[a-zA-Z_0-9][a-zA-Z_\-0-9]+[a-zA-Z_0-9]">
+                <label for="profile_about">about</label>
+                <textarea name="about" id="profile_about"></textarea>
+                <label for="profile_picture">picture</label>
+                <input type="url" name="picture" id="profile_picture" placeholder="https://your.domain/image.png">
+                <div class="buttons">
+                  <small id="profilestatus" class="form-status" hidden></small>
+                  <button type="submit" name="publish" class="primary" tabindex="0" disabled>publish</button>
+                </div>
+              </form>
+              <form action="#" name="options">
+                <label for="filterDifficulty">
+                   difficulty filter<br>
+                  <small>
+                    hide text notes with mining proof lower
+                    than:&nbsp;<span data-display="filter_difficulty"></span>. a zero value shows all notes.
+                  </small>
+                </label>
+                <input type="range" name="filter_difficulty" step="1" min="0" max="32" id="filterDifficulty" value="0">
+                <label class="number" for="miningTarget">
+                  <span>
+                    mining difficulty<br>
+                    <small>
+                      with which difficulty to try to mine a proof of work when publishing events, such as: notes, replies, reactions and profile updates.
+                      use zero to disable mining.
+                      difficulty is defined as the number of leading zero bits, read more about
+                      <a href="https://github.com/nostr-protocol/nips/blob/master/13.md" target="_blank" rel="noopener noreferrer">proof of work (nip-13)</a>.
+                    </small>
+                  </span>
+                  <input type="number" name="mining_target" step="1" min="0" max="32" id="miningTarget" value="16">
+                </label>
+                <label class="number" for="miningTimeout">
+                  <span>
+                    mining timeout<br>
+                    <small>abort trying to find a proof if timeout (in seconds) exceeds. use 0 to mine without a time limit.</small>
+                  </span>
+                  <input type="number" name="mining_timeout" step="1" min="0" max="256" id="miningTimeout" value="5">
+                </label>
+              </form>
+              <form action="#" name="settings" autocomplete="new-password">
+                <label for="pubkey">public-key</label>
+                <input type="text" id="pubkey" autocomplete="off">
+                <label for="privatekey">
+                  private-key
+                  <button type="button" name="privatekey-toggle" class="btn-inline" >
+                    <small>show</small>
+                  </button>
+                </label>
+                <input type="password" id="privatekey" autocomplete="off">
+                <div class="buttons">
+                  <small id="keystatus" class="form-status" hidden></small>
+                  <button type="button" name="generate" class="primary" tabindex="0">new</button>
+                  <button type="button" name="import" class="primary" tabindex="0" disabled>save</button>
+                </div>
+              </form>
+              <footer class="text">
+                <p>
+                  <a href="/about.html">about nostr.ch</a>
+                </p>
+              </footer>
+            </div>
+          </section>
+          <section id="errorOverlay" class="form" hidden></section>
+        </aside>
+        <!-- views are inserted here -->
+      </main>
+      <nav>
+        <a href="/">home</a>
+        <a href="/feed">global</a>
+        <span class="spacer"></span>
+        <button tpye="button" name="settings">settings</button>
+      </nav>
     </div>
+
   </body>
-  <script src="main.js"></script>
+  <script src="/main.js"></script>
 </html>

src/main.css

@@ -1,39 +0,0 @@
-@import "tabs.css";
-@import "cards.css";
-
-@media (prefers-color-scheme: light) {
-  html {
-    --bgcolor: #fff7e9;
-    --bgcolor-accent: #ff731d;
-    --fgcolor: #1746a2;
-    --fgcolor-accent: #5f9df7;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-    --bgcolor: #191919;
-    --bgcolor-accent: #2d4263;
-    --fgcolor: #c84b31;
-    --fgcolor-accent: #ecdbba;
-  }
-
-  img {
-    opacity: .75;
-    transition: opacity .5s ease-in-out;
-  }
-  img:hover {
-    opacity: 1;
-  }
-}
-
-*, ::after, ::before {
-  box-sizing: border-box;
-}
-
-body {
-  background-color: var(--bgcolor);
-  color: var(--fgcolor);
-  font-family: monospace;
-  font-size: 120%;
-}

src/main.js

@@ -1,28 +0,0 @@
-import {relayPool} from 'nostr-tools';
-import {elem} from './domutil.js';
-
-const pool = relayPool();
-pool.addRelay('wss://nostr.x1ddos.ch', {read: true, write: true});
-pool.addRelay('wss://nostr.bitcoiner.social/', {read: true, write: true});
-
-const feedlist = document.querySelector('#feedlist');
-
-function onEvent(evt, relay) {
-  console.log(`event from ${relay}`, evt);
-  const time = new Date(evt.created_at * 1000);
-  const text = `${evt.content} - ${time.toISOString()}`; // TODO: Intl.DateTimeFormat
-  const img = elem('img', {className: 'mbox-img', src: 'bubble.svg'}, '');
-  const body = elem('div', {className: 'mbox-body'}, [text]);
-  const art = elem('article', {className: 'mbox'}, [img, body]);
-  feedlist.append(art);
-}
-
-pool.sub({
-  cb: onEvent,
-  filter: {authors: [
-    '52155da703585f25053830ac39863c80ea6adc57b360472c16c566a412d2bc38', // quark
-    'a6057742e73ff93b89587c27a74edf2cdab86904291416e90dc98af1c5f70cfa', // mosc
-    '3bf0c63fcb93463407af97a5e5ee64fa883d107ef9e558472c4eb9aaaefa459d', // fiatjaf
-    '32e1827635450ebb3c5a7d12c1f8e7b2b514439ac10a67eef3d9fd9c5c68e245'  // jb55
-  ]}
-});

src/main.ts

@@ -0,0 +1,443 @@
+import {Event, nip19} from 'nostr-tools';
+import {zeroLeadingBitsCount} from './utils/crypto';
+import {elem} from './utils/dom';
+import {bounce} from './utils/time';
+import {isWssUrl} from './utils/url';
+import {closeSettingsView, config, toggleSettingsView} from './settings';
+import {subGlobalFeed, subEventID, subNote, subProfile, subPubkeys, subOwnContacts, subContactList} from './subscriptions'
+import {getReplyTo, hasEventTag, isEvent, isMention, sortByCreatedAt, sortEventCreatedAt} from './events';
+import {clearView, getViewContent, getViewElem, getViewOptions, setViewElem, view} from './view';
+import {handleReaction, handleUpvote} from './reactions';
+import {closePublishView, openWriteInput, togglePublishView} from './write';
+import {handleMetadata, renderProfile} from './profiles';
+import {followContact, getContactUpdateMessage, getContacts, getOwnContacts, refreshFollowing, resetContactList, setContactList, updateContactList, updateFollowBtn} from './contacts';
+import {EventWithNip19, EventWithNip19AndReplyTo, textNoteList, replyList} from './notes';
+import {createContact, createTextNote, renderEventDetails, renderRecommendServer, renderUpdateContact} from './ui';
+
+// curl -H 'accept: application/nostr+json' https://relay.nostr.ch/
+
+type EventRelayMap = {
+  [eventId: string]: string[];
+};
+const eventRelayMap: EventRelayMap = {}; // eventId: [relay1, relay2]
+
+const renderNote = (
+  evt: EventWithNip19,
+  i: number,
+  sortedFeeds: EventWithNip19[],
+) => {
+  if (getViewElem(evt.id)) { // note already in view
+    return;
+  }
+  const article = createTextNote(evt, eventRelayMap[evt.id][0]);
+  if (i === 0) {
+    getViewContent().append(article);
+  } else {
+    getViewElem(sortedFeeds[i - 1].id).before(article);
+  }
+  setViewElem(evt.id, article);
+};
+
+const renderContact = (pubkey: string) => {
+  if (getViewElem(`contact-${pubkey}`)) { // contact already in view
+    updateFollowBtn(pubkey);
+    return;
+  }
+  const contact = createContact(pubkey);
+  if (contact) {
+    getViewContent().append(contact);
+    setViewElem(`contact-${pubkey}`, contact);
+  }
+};
+
+const hasEnoughPOW = (
+  [tag, , commitment]: string[],
+  eventId: string
+) => {
+  return tag === 'nonce' && Number(commitment) >= config.filterDifficulty && zeroLeadingBitsCount(eventId) >= config.filterDifficulty;
+};
+
+const renderFeed = bounce(() => {
+  const view = getViewOptions();
+  switch (view.type) {
+    case 'note':
+      textNoteList
+        .concat(replyList) // search id in notes and replies
+        .filter(note => note.id === view.id)
+        .forEach(renderNote);
+      break;
+    case 'profile':
+      [
+        ...textNoteList // get notes
+          .filter(note => note.pubkey === view.id),
+        ...replyList.filter(reply => reply.pubkey === view.id) // and replies
+          .map(reply => textNoteList.find(note => note.id === reply.replyTo)) // and the replied to notes
+          .filter(isEvent)
+      ]
+        .sort(sortByCreatedAt)
+        .reverse()
+        .forEach(renderNote);
+
+      renderProfile(view.id);
+      refreshFollowing(view.id);
+      break;
+    case 'home':
+      const ids = view.id ? getContacts(view.id) : getOwnContacts();
+      [
+        ...textNoteList
+          .filter(note => ids.includes(note.pubkey)),
+        ...replyList // search id in notes and replies
+          .filter(reply => ids.includes(reply.pubkey))
+          .map(reply => textNoteList.find(note => note.id === reply.replyTo))
+          .filter(isEvent),
+      ]
+        .sort(sortByCreatedAt)
+        .reverse()
+        .forEach(renderNote);
+      break;
+    case 'feed':
+      const now = Math.floor(Date.now() * 0.001);
+      textNoteList
+        .filter(note => {
+          // dont render notes from the future
+          if (note.created_at > now) return false;
+          // if difficulty filter is configured dont render notes with too little pow
+          return !config.filterDifficulty || note.tags.some(tag => hasEnoughPOW(tag, note.id))
+        })
+        .sort(sortByCreatedAt)
+        .reverse()
+        .forEach(renderNote);
+      break;
+    case 'contacts':
+      getContacts(view.id)
+        .forEach(renderContact);
+      break;
+  }
+}, 17); // (16.666 rounded, an arbitrary value to limit updates to max 60x per s)
+
+const renderReply = (evt: EventWithNip19AndReplyTo) => {
+  const parent = getViewElem(evt.replyTo);
+  if (!parent || getViewElem(evt.id)) {
+    return;
+  }
+  let replyContainer = parent.querySelector('.mbox-replies');
+  if (!replyContainer) {
+    replyContainer = elem('div', {className: 'mbox-replies'});
+    parent.append(replyContainer);
+    parent.classList.add('mbox-has-replies');
+  }
+  const reply = createTextNote(evt, eventRelayMap[evt.id][0]);
+  replyContainer.append(reply);
+  setViewElem(evt.id, reply);
+};
+
+const handleReply = (evt: EventWithNip19, relay: string) => {
+  if (
+    getViewElem(evt.id) // already rendered probably received from another relay
+    || evt.tags.some(isMention) // ignore mentions for now
+  ) {
+    return;
+  }
+  const replyTo = getReplyTo(evt);
+  if (!replyTo) {
+    return;
+  }
+  const evtWithReplyTo = {replyTo, ...evt};
+  replyList.push(evtWithReplyTo);
+  renderReply(evtWithReplyTo);
+};
+
+const handleTextNote = (evt: Event, relay: string) => {
+  if (evt.content.startsWith('vmess://') && !evt.content.includes(' ')) {
+    console.info('drop VMESS encrypted message');
+    return;
+  }
+  if (eventRelayMap[evt.id]) {
+    eventRelayMap[evt.id] = [...(eventRelayMap[evt.id]), relay]; // TODO: remove eventRelayMap and just check for getViewElem?
+  } else {
+    eventRelayMap[evt.id] = [relay];
+    const evtWithNip19 = {
+      nip19: {
+        note: nip19.noteEncode(evt.id),
+        npub: nip19.npubEncode(evt.pubkey),
+      },
+      ...evt,
+    };
+    if (evt.tags.some(hasEventTag)) {
+      handleReply(evtWithNip19, relay);
+    } else {
+      textNoteList.push(evtWithNip19);
+    }
+  }
+  if (!getViewElem(evt.id)) {
+    renderFeed();
+  }
+};
+
+const rerenderFeed = () => {
+  clearView();
+  renderFeed();
+};
+config.rerenderFeed = rerenderFeed;
+
+const handleContactList = (evt: Event, relay: string) => {
+  // TODO: if newer and view.type === 'home' rerenderFeed()
+  setContactList(evt);
+  const view = getViewOptions();
+  if (getViewElem(evt.id)) {
+    return;
+  }
+  if (
+    view.type === 'contacts'
+    && [view.id, config.pubkey].includes(evt.pubkey) // render if contact-list is from current users or current view
+  ) {
+    renderFeed();
+    return;
+  }
+  if (view.type === 'profile' && view.id === evt.pubkey) {
+    // use find instead of sort?
+    const closestTextNotes = textNoteList.sort(sortEventCreatedAt(evt.created_at));
+    const closestNote = getViewElem(closestTextNotes[0].id);
+    if (!closestNote) {
+      // no close note, try later
+      setTimeout(() => handleContactList(evt, relay), 1500);
+      return;
+    };
+    const [addedContacts, removedContacts] = updateContactList(evt);
+    const content = getContactUpdateMessage(addedContacts, removedContacts);
+    if (!content.length) {
+      // P same as before, maybe only evt.content or 'a' tags changed?
+      return;
+    }
+    const art = renderUpdateContact({...evt, content}, relay);
+    closestNote.after(art);
+    setViewElem(evt.id, art);
+  }
+};
+
+const handleRecommendServer = (evt: Event, relay: string) => {
+  if (getViewElem(evt.id) || !isWssUrl(evt.content)) {
+    return;
+  }
+  const art = renderRecommendServer(evt, relay);
+  if (textNoteList.length < 2) {
+    getViewContent().append(art);
+  } else {
+    const closestTextNotes = textNoteList
+      // TODO: prob change to hasEnoughPOW
+      .filter(note => !config.filterDifficulty || note.tags.some(([tag, , commitment]) => tag === 'nonce' && Number(commitment) >= config.filterDifficulty))
+      // use find instead of sort?
+      .sort(sortEventCreatedAt(evt.created_at));
+    getViewElem(closestTextNotes[0].id)?.after(art); // TODO: note might not be in the dom yet, recommendedServers could be controlled by renderFeed
+  }
+  setViewElem(evt.id, art);
+};
+
+const onEventDetails = (evt: Event, relay: string) => {
+  if (getViewElem(evt.id)) {
+    return;
+  }
+  const article = renderEventDetails(evt, relay);
+  getViewContent().append(article);
+  setViewElem(evt.id, article);
+};
+
+const onEvent = (evt: Event, relay: string) => {
+  switch (evt.kind) {
+    case 0:
+      handleMetadata(evt, relay);
+      break;
+    case 1:
+      handleTextNote(evt, relay);
+      break;
+    case 2:
+      handleRecommendServer(evt, relay);
+      break;
+    case 3:
+      handleContactList(evt, relay);
+      break;
+    case 7:
+      handleReaction(evt, relay);
+    default:
+      // console.log(`TODO: add support for event kind ${evt.kind}`/*, evt*/)
+  }
+};
+
+// subscribe and change view
+const route = (path: string) => {
+  if (path === '/') {
+    const contactList = getOwnContacts();
+    if (contactList.length) {
+      subPubkeys(contactList, onEvent);
+      view('/', {type: 'home'});
+    } else {
+      subGlobalFeed(onEvent);
+      view('/feed', {type: 'feed'});
+    }
+    return;
+  }
+  if (path === '/feed') {
+    subGlobalFeed(onEvent);
+    view('/feed', {type: 'feed'});
+  } else if (path.length === 64 && path.match(/^\/[0-9a-z]+$/)) {
+    const {type, data} = nip19.decode(path.slice(1));
+    if (typeof data !== 'string') {
+      console.warn('nip19 ProfilePointer, EventPointer and AddressPointer are not yet supported');
+      return;
+    }
+    switch(type) {
+      case 'note':
+        subNote(data, onEvent);
+        view(path, {type: 'note', id: data});
+        break;
+      case 'npub':
+        subProfile(data, onEvent);
+        view(path, {type: 'profile', id: data});
+        updateFollowBtn(data);
+        break;
+      default:
+        console.warn(`type ${type} not yet supported`);
+    }
+    renderFeed();
+  } else if (path.length === 73 && path.match(/^\/contacts\/npub[0-9a-z]+$/)) {
+    const contactNpub = path.slice(10);
+    const {type: contactType, data: contactPubkey} = nip19.decode(contactNpub);
+    if (contactType === 'npub') {
+      subContactList(contactPubkey, onEvent);
+      view(path, {type: 'contacts', id: contactPubkey});
+    }
+  } else if (path.length === 73 && path.match(/^\/timeline\/npub[0-9a-z]+$/)) {
+    const timelineNpub = path.slice(10);
+    const {type: timelineType, data: timelinePubkey} = nip19.decode(timelineNpub);
+    if (timelineType === 'npub') {
+      const timelinePubkeys = getContacts(timelinePubkey);
+      subPubkeys(timelinePubkeys, onEvent);
+      view(path, {type: 'home', id: timelinePubkey});
+    }
+  } else if (path.length === 65) {
+    const eventID = path.slice(1);
+    subEventID(eventID, onEventDetails);
+    view(path, {type: 'event', id: eventID});
+  } else {
+    console.warn('no support for ', path);
+  }
+};
+
+// onload
+route(location.pathname);
+subOwnContacts(onEvent); // subscribe after route as routing unsubscribes current subs
+
+// only push a new entry if there is no history onload
+if (!history.length) {
+  history.pushState({}, '', location.pathname);
+}
+
+window.addEventListener('popstate', (event) => {
+  route(location.pathname);
+});
+
+const handleLink = (a: HTMLAnchorElement, e: MouseEvent) => {
+  const href = a.getAttribute('href');
+  if (typeof href !== 'string') {
+    console.warn('expected anchor to have href attribute', a);
+    return;
+  }
+  closeSettingsView();
+  closePublishView();
+  if (href === location.pathname) {
+    e.preventDefault();
+    return;
+  }
+  if (
+    href === '/'
+    || href.startsWith('/feed')
+    || href.startsWith('/note')
+    || href.startsWith('/npub')
+    || href.startsWith('/contacts/npub')
+    || href.startsWith('/timeline/npub')
+    || (href.startsWith('/') && href.length === 65)
+  ) {
+    route(href);
+    history.pushState({}, '', href);
+    e.preventDefault();
+  }
+};
+
+const handleButton = (button: HTMLButtonElement) => {
+  switch(button.name) {
+    case 'settings':
+      toggleSettingsView();
+      return;
+    case 'new-note':
+      togglePublishView();
+      return;
+    case 'back':
+      closePublishView();
+      return;
+    case 'import':
+      resetContactList(config.pubkey);
+      rerenderFeed();
+      subOwnContacts(onEvent);
+      subGlobalFeed(onEvent);
+      return;
+  }
+  const id = button.dataset.id || (button.closest('[data-id]') as HTMLElement)?.dataset.id;
+  if (id) {
+    switch(button.name) {
+      case 'reply':
+        openWriteInput(button, id);
+        return;
+      case 'star':
+        const note = replyList.find(r => r.id === id) || textNoteList.find(n => n.id === (id));
+        note && handleUpvote(note);
+        return;
+      case 'follow':
+        followContact(id);
+        return;
+    }
+  }
+  // const container = e.target.closest('[data-append]');
+  // if (container) {
+  //   container.append(...parseTextContent(container.dataset.append));
+  //   delete container.dataset.append;
+  //   return;
+  // }
+};
+
+const handleContentClick = (content: HTMLElement) => {
+  const card = content.closest('article[data-id]') as HTMLElement;
+  if (
+    !card
+    || !card.dataset.id
+    || !card.dataset.kind
+    || getSelection()?.toString() // do not navigate if user selects text
+  ) {
+    return;
+  }
+  const {kind, id} = card.dataset;
+  const href = `/${kind === '1' ? nip19.noteEncode(id) : id}`;
+  route(href);
+  history.pushState({}, '', href);
+};
+
+document.body.addEventListener('click', (event: MouseEvent) => {
+  // dont intercept command or shift-click
+  if (event.metaKey || event.shiftKey) {
+    return;
+  }
+  const target = event.target as HTMLElement;
+  const a = target?.closest('a');
+  if (a) {
+    handleLink(a, event);
+    return;
+  }
+  const button = target?.closest('button');
+  if (button) {
+    handleButton(button);
+    return;
+  }
+  const card = target?.closest('.mbox-body');
+  if (card) {
+    handleContentClick(card as HTMLElement);
+  }
+});

src/manifest.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://json.schemastore.org/web-manifest-combined.json",
+  "background_color": "#191919",
+  "categories": ["news", "social"],
+  "description": "a nostr news client to connect with the world.",
+  "display": "fullscreen",
+  "name": "nostr",
+  "short_name": "nostr",
+  "start_url": "https://nostr.ch/",
+  "icons": [{
+    "src": "assets/nostr-favicon.png",
+    "sizes": "256x256",
+    "type": "image/png"
+  }, {
+    "src": "favicon.ico",
+    "sizes": "32x32"
+  }, {
+    "src": "assets/nostr-favicon.svg",
+    "sizes": "any"
+  }]
+}

src/media.ts

@@ -0,0 +1,114 @@
+import { elem } from './utils/dom';
+import { getNoxyUrl } from './utils/url';
+
+export const parseJSON = (content: string): unknown => {
+  try {
+    return JSON.parse(content);
+  } catch(err) {
+    console.warn(err, content);
+    return null;
+  }
+}
+
+type FetchItem = {
+  href: string;
+  id: string;
+  relay: string;
+};
+
+type NoxyData = {
+  title: string;
+  descr: string;
+  images: string[];
+};
+
+const fetchQue: Array<FetchItem> = [];
+
+let fetchPending: (null | Promise<NoxyData>) = null;
+
+const fetchNext = (
+  href: string,
+  id: string,
+  relay: string,
+) => {
+  const noxy = getNoxyUrl('meta', href, id, relay);
+  if (!noxy) {
+    return false;
+  }
+  const previewId = noxy.searchParams.toString();
+  if (fetchPending) {
+    fetchQue.push({href, id, relay});
+    return previewId;
+  }
+  fetchPending = fetch(noxy.href)
+    .then(data => {
+      if (data.status === 200) {
+        return data.json();
+      }
+      // fetchQue.push({href, id, relay}); // could try one more time
+      return Promise.reject(data);
+    })
+    .then(meta => {
+      const container = document.getElementById(previewId);
+      const content: Array<HTMLElement> = [];
+      if (meta.images[0]) {
+        const img = getNoxyUrl('data', meta.images[0], id, relay);
+        img && content.push(
+          elem('img', {
+            className: 'preview-image',
+            loading: 'lazy',
+            src: img.href,
+          })
+        );
+      }
+      if (meta.title) {
+        content.push(elem('h2', {className: 'preview-title'}, meta.title));
+      }
+      if (meta.descr) {
+        content.push(elem('p', {className: 'preview-descr'}, meta.descr))
+      }
+      if (container && content.length) {
+        container.append(elem('a', {href, rel: 'noopener noreferrer', target: '_blank'}, content));
+        container.classList.add('preview-loaded');
+      }
+    })
+    .finally(() => {
+      fetchPending = null;
+      if (fetchQue.length) {
+        const {href, id, relay} = fetchQue.shift() as FetchItem;
+        return fetchNext(href, id, relay);
+      }
+    })
+    .catch(err => err.text && err.text())
+    .then(errMsg => errMsg && console.warn(errMsg));
+
+  return previewId;
+};
+
+export const linkPreview = (
+  href: string,
+  id: string,
+  relay: string,
+) => {
+  if ((/\.(gif|jpe?g|png)$/i).test(href)) {
+    const img = getNoxyUrl('data', href, id, relay);
+    if (!img) {
+      return null;
+    }
+    return elem('div', {},
+      [elem('img', {
+        className: 'preview-image-only',
+        loading: 'lazy',
+        src: img.href,
+      })]
+    );
+  }
+  const previewId = fetchNext(href, id, relay);
+  if (!previewId) {
+    return null;
+  }
+  return elem('div', {
+    className: 'preview',
+    id: previewId,
+  });
+};

src/notes.ts

@@ -0,0 +1,16 @@
+import {Event} from 'nostr-tools';
+
+export type EventWithNip19 = Event & {
+  nip19: {
+    note: string;
+    npub: string;
+  }
+};
+
+export const textNoteList: Array<EventWithNip19> = []; // could use indexDB
+
+export type EventWithNip19AndReplyTo = EventWithNip19 & {
+  replyTo: string;
+};
+
+export const replyList: Array<EventWithNip19AndReplyTo> = [];

src/profiles.ts

@@ -0,0 +1,149 @@
+import {Event} from 'nostr-tools';
+import {elem, elemCanvas, parseTextContent} from './utils/dom';
+import {getNoxyUrl} from './utils/url';
+import {getViewElem, getViewOptions} from './view';
+import {parseJSON} from './media';
+import {sortByCreatedAt} from './events';
+
+type Profile = {
+  name: string;
+  about?: string;
+  picture?: string;
+  website?: string;
+}
+
+const transformMetadata = (data: unknown): Profile | undefined => {
+  if (!data || typeof data !== 'object' || Array.isArray(data)) {
+    console.warn('expected nip-01 JSON object with user info, but got something funny', data);
+    return;
+  }
+  const hasNameString = 'name' in data && typeof data.name === 'string';
+  const hasAboutString = 'about' in data && typeof data.about === 'string';
+  const hasPictureString = 'picture' in data && typeof data.picture === 'string';
+  // custom
+  const hasDisplayName = 'display_name' in data && typeof data.display_name === 'string';
+  const hasWebsite = 'website' in data && typeof data.website === 'string';
+
+  if (!hasNameString && !hasAboutString && !hasPictureString && !hasDisplayName) {
+    console.warn('expected basic nip-01 user info (name, about, picture) but nothing found', data);
+    return;
+  }
+  const name = (
+    hasNameString && data.name as string
+    || hasDisplayName && data.display_name as string
+    || ''
+  );
+  return {
+    name,
+    ...(hasAboutString && {about: data.about as string}),
+    ...(hasPictureString && {picture: data.picture as string}),
+    ...(hasWebsite && {website: data.website as string})
+  };
+};
+
+const profileMap: {
+  [pubkey: string]: Profile
+} = {};
+
+const metadataList: Array<Event> = [];
+
+export const handleMetadata = (evt: Event, relay: string) => {
+  if (metadataList.find(({id}) => id === evt.id)) {
+    return;
+  }
+  const contactEventList = metadataList.filter(({pubkey}) => pubkey === evt.pubkey);
+  metadataList.push(evt);
+  contactEventList.push(evt);
+  contactEventList.sort(sortByCreatedAt);
+
+  if (contactEventList.some(({created_at}) => created_at > evt.created_at) ) {
+    // evt is older
+    return;
+  }
+  const content = parseJSON(evt.content);
+  const metadata = transformMetadata(content);
+  if (!metadata) {
+    return;
+  }
+  profileMap[evt.pubkey] = metadata;
+
+  if (metadata.picture) {
+    const imgUrl = getNoxyUrl('data', metadata.picture, evt.id, relay);
+    if (imgUrl) {
+      // update profile images that used some nip-13 work
+      // if (imgUrl.href && validatePow(evt)) {
+      //   document.body
+      //     .querySelectorAll(`canvas[data-pubkey="${evt.pubkey}"]`)
+      //     .forEach(canvas => canvas.parentNode?.replaceChild(elem('img', {src: imgUrl.href}), canvas));
+      // }
+    }
+  }
+  if (metadata.name) {
+    // update profile names
+    document.body
+      .querySelectorAll(`[data-profile="${evt.pubkey}"]`)
+      .forEach((username: HTMLElement) => {
+        username.textContent = metadata.name;
+        username.classList.add('mbox-kind0-name');
+      });
+  }
+  if (metadata.about) {
+    const about = getViewElem(`about-${evt.pubkey}`);
+    if (about) {
+      const view = getViewOptions();
+      about.replaceChildren(...parseTextContent(
+        view.type === 'contacts'
+          ? metadata.about.split('\n')[0]
+          : metadata.about
+      )[0]);
+    }
+  }
+};
+
+export const getMetadata = (pubkey: string) => {
+  const user = profileMap[pubkey];
+  const about = user?.about;
+  const name = user?.name;
+  const userName = name || pubkey.slice(0, 8);
+  // const userImg = user?.picture;
+  const img = /* (userImg && validatePow(evt)) ? elem('img', {
+    alt: `${userName} ${host}`,
+    loading: 'lazy',
+    src: userImg,
+    title: `${userName} on ${host} ${userAbout}`,
+  }) : */ elemCanvas(pubkey);
+  return {about, img, name, userName};
+};
+
+export const renderProfile = (pubkey: string) => {
+  const header = getViewElem('header');
+  const metadata = profileMap[pubkey];
+  if (!header || !metadata) {
+    return;
+  }
+  if (metadata.name) {
+    const h1 = header.querySelector('h1');
+    if (h1) {
+      h1.textContent = metadata.name;
+      document.title = metadata.name;
+    } else {
+      header.append(elem('h1', {}, metadata.name));
+    }
+  }
+  const detail = getViewElem(`detail-${pubkey}`);
+  if (metadata.about && !detail.children.length) {
+    const [content] = parseTextContent(metadata.about);
+    detail?.append(...content);
+  }
+  if (metadata.website) {
+    const website = detail.querySelector('[data-website]');
+    if (website) {
+      const url = metadata.website.toLowerCase().startsWith('http') ? metadata.website : `https://${metadata.website}`;
+      const [content] = parseTextContent(url);
+      website.replaceChildren(...content);
+      (website as HTMLDivElement).hidden = false;
+    } else {
+      detail.append(elem('div', {data: {website: ''}}, metadata.name));
+    }
+  }
+};

src/reactions.ts

@@ -0,0 +1,105 @@
+import {Event, signEvent, UnsignedEvent} from 'nostr-tools';
+import {powEvent} from './system';
+import {publish} from './relays';
+import {hasEventTag} from './events';
+import {getViewElem} from './view';
+import {config} from './settings';
+
+type ReactionMap = {
+  [eventId: string]: Array<Event>
+};
+
+const reactionMap: ReactionMap = {};
+
+export const getReactions = (eventId: string) => reactionMap[eventId] || [];
+
+export const getReactionContents = (eventId: string) => {
+  return reactionMap[eventId]?.map(({content}) => content) || [];
+};
+
+export const handleReaction = (
+  evt: Event,
+  relay: string,
+) => {
+  // last id is the note that is being reacted to https://github.com/nostr-protocol/nips/blob/master/25.md
+  const lastEventTag = evt.tags.filter(hasEventTag).at(-1);
+  if (!lastEventTag || !evt.content.length) {
+    // ignore reactions with no content
+    return;
+  }
+  const [, eventId] = lastEventTag;
+  if (reactionMap[eventId]) {
+    if (reactionMap[eventId].find(reaction => reaction.id === evt.id)) {
+      // already received this reaction from a different relay
+      return;
+    }
+    reactionMap[eventId] = [evt, ...(reactionMap[eventId])];
+  } else {
+    reactionMap[eventId] = [evt];
+  }
+  const article = getViewElem(eventId);
+  if (article) {
+    const button = article.querySelector('button[name="star"]') as HTMLButtonElement;
+    const reactions = button.querySelector('[data-reactions]') as HTMLElement;
+    reactions.textContent = `${reactionMap[eventId].length || ''}`;
+    if (evt.pubkey === config.pubkey) {
+      const star = button.querySelector('img[src*="star"]');
+      star?.setAttribute('src', '/assets/star-fill.svg');
+      star?.setAttribute('title', getReactionContents(eventId).join(' '));
+    }
+  }
+};
+
+const upvote = async (
+  eventId: string,
+  evt: UnsignedEvent,
+) => {
+  const article = getViewElem(eventId);
+  const reactionBtn = article.querySelector('button[name="star"]') as HTMLButtonElement;
+  const statusElem = article.querySelector('[data-reactions]') as HTMLElement;
+  reactionBtn.disabled = true;
+  const newReaction = await powEvent(evt, {
+    difficulty: config.difficulty,
+    statusElem,
+    timeout: config.timeout,
+  }).catch(console.warn);
+  if (!newReaction) {
+    statusElem.textContent = `${getReactions(eventId)?.length}`;
+    reactionBtn.disabled = false;
+    return;
+  }
+  const privatekey = localStorage.getItem('private_key');
+  if (!privatekey) {
+    statusElem.textContent = 'no private key to sign';
+    statusElem.hidden = false;
+    return;
+  }
+  const sig = signEvent(newReaction, privatekey);
+  // TODO: validateEvent
+  if (sig) {
+    statusElem.textContent = 'publishing…';
+    publish({...newReaction, sig}, (relay, error) => {
+      if (error) {
+        return console.error(error, relay);
+      }
+      console.info(`event published by ${relay}`);
+    });
+    reactionBtn.disabled = false;
+  }
+};
+
+export const handleUpvote = (evt: Event) => {
+  const tags = [
+    ...evt.tags
+      .filter(tag => ['e', 'p'].includes(tag[0])) // take e and p tags from event
+      .map(([a, b]) => [a, b]), // drop optional (nip-10) relay and marker fields, TODO: use relay?
+    ['e', evt.id], ['p', evt.pubkey], // last e and p tag is the id and pubkey of the note being reacted to (nip-25)
+  ];
+  upvote(evt.id, {
+    kind: 7,
+    pubkey: config.pubkey,
+    content: '+',
+    tags,
+    created_at: Math.floor(Date.now() * 0.001),
+  });
+};

src/relays.ts

@@ -0,0 +1,111 @@
+import {Event, Filter, relayInit, Relay, Sub} from 'nostr-tools';
+
+type SubCallback = (
+  event: Readonly<Event>,
+  relay: Readonly<string>,
+) => void;
+
+type Subscribe = {
+  cb: SubCallback;
+  filter: Filter;
+  unsub?: boolean;
+};
+
+const subList: Array<Sub> = [];
+const currentSubList: Array<Subscribe> = [];
+const relayMap = new Map<string, Relay>();
+
+export const addRelay = async (url: string) => {
+  const relay = relayInit(url);
+  relay.on('connect', () => {
+    console.info(`connected to ${relay.url}`);
+  });
+  relay.on('error', () => {
+    console.warn(`failed to connect to ${relay.url}`);
+  });
+  try {
+    await relay.connect();
+    currentSubList.forEach(({cb, filter}) => subscribe(cb, filter, relay));
+    relayMap.set(url, relay);
+  } catch {
+    console.warn(`could not connect to ${url}`);
+  }
+};
+
+export const unsubscribe = (sub: Sub) => {
+  sub.unsub();
+  subList.splice(subList.indexOf(sub), 1);
+};
+
+const subscribe = (
+  cb: SubCallback,
+  filter: Filter,
+  relay: Relay,
+  unsub?: boolean
+) => {
+  const sub = relay.sub([filter]);
+  subList.push(sub);
+  sub.on('event', (event: Event) => {
+    cb(event, relay.url);
+  });
+  if (unsub) {
+    sub.on('eose', () => {
+      // console.log('eose', relay.url);
+      unsubscribe(sub);
+    });
+  }
+  return sub;
+};
+
+export const sub = (obj: Subscribe) => {
+  currentSubList.push(obj);
+  relayMap.forEach((relay) => subscribe(obj.cb, obj.filter, relay, obj.unsub));
+};
+
+export const subOnce = (
+  obj: Subscribe & {relay: string}
+) => {
+  const relay = relayMap.get(obj.relay);
+  if (relay) {
+    const sub = subscribe(obj.cb, obj.filter, relay);
+    sub.on('eose', () => {
+      // console.log('eose', obj.relay);
+      unsubscribe(sub);
+    });
+  }
+};
+
+export const unsubAll = () => {
+  subList.forEach(unsubscribe);
+  currentSubList.length = 0;
+};
+
+type PublishCallback = (
+  relay: string,
+  errorMessage?: string,
+) => void;
+
+export const publish = (
+  event: Event,
+  cb: PublishCallback,
+) => {
+  relayMap.forEach((relay, url) => {
+    const pub = relay.publish(event);
+    pub.on('ok', () => {
+      console.info(`${relay.url} has accepted our event`);
+      cb(relay.url);
+    });
+    pub.on('failed', (reason: any) => {
+      console.error(`failed to publish to ${relay.url}: ${reason}`);
+      cb(relay.url, reason);
+    });
+  });
+};
+
+
+addRelay('wss://relay.snort.social');
+addRelay('wss://nostr.bitcoiner.social');
+addRelay('wss://nostr.mom');
+addRelay('wss://relay.nostr.bg');
+addRelay('wss://nos.lol');
+// addRelay('wss://relay.nostr.ch');

src/settings.ts

@@ -0,0 +1,236 @@
+import {generatePrivateKey, getPublicKey, signEvent} from 'nostr-tools';
+import {updateElemHeight} from './utils/dom';
+import {powEvent} from './system';
+import {publish} from './relays';
+
+const settingsView = document.querySelector('#settings') as HTMLElement;
+
+export const closeSettingsView = () => settingsView.hidden = true;
+
+export const toggleSettingsView = () => settingsView.hidden = !settingsView.hidden;
+
+let pubkey: string = '';
+
+const loadOrGenerateKeys = () => {
+  const storedPubKey = localStorage.getItem('pub_key');
+  if (storedPubKey) {
+    return storedPubKey;
+  }
+  const privatekey = generatePrivateKey();
+  const pubkey = getPublicKey(privatekey);
+  localStorage.setItem('private_key', privatekey);
+  localStorage.setItem('pub_key', pubkey);
+  return pubkey;
+};
+
+let filterDifficulty: number = 0;
+let difficulty: number = 16;
+let timeout: number = 5;
+let rerenderFeed: (() => void) | undefined;
+
+/**
+ * global config object
+ * config.pubkey, if not set loaded from localStorage or generate a new key
+ */
+export const config = {
+  get pubkey() {
+    if (!pubkey) {
+      pubkey = loadOrGenerateKeys();
+    }
+    return pubkey;
+  },
+  set pubkey(value) {
+    console.info(`pubkey was set to ${value}`);
+    pubkey = value;
+  },
+  get filterDifficulty() {
+    return filterDifficulty;
+  },
+  get difficulty() {
+    return difficulty;
+  },
+  get timeout() {
+    return timeout;
+  },
+  set rerenderFeed(value: () => void) {
+    rerenderFeed = value;
+  }
+};
+
+const getNumberFromStorage = (
+  item: string,
+  fallback: number,
+) => {
+  const stored = localStorage.getItem(item);
+  if (!stored) {
+    return fallback;
+  }
+  return Number(stored);
+};
+
+// filter difficulty
+const filterDifficultyInput = document.querySelector('#filterDifficulty') as HTMLInputElement;
+const filterDifficultyDisplay = document.querySelector('[data-display="filter_difficulty"]') as HTMLElement;
+filterDifficultyInput.addEventListener('input', (e) => {
+  localStorage.setItem('filter_difficulty', filterDifficultyInput.value);
+  filterDifficulty = filterDifficultyInput.valueAsNumber;
+  filterDifficultyDisplay.textContent = filterDifficultyInput.value;
+  rerenderFeed && rerenderFeed();
+});
+filterDifficulty = getNumberFromStorage('filter_difficulty', 0);
+filterDifficultyInput.valueAsNumber = filterDifficulty;
+filterDifficultyDisplay.textContent = filterDifficultyInput.value;
+
+// mining difficulty target
+const miningTargetInput = document.querySelector('#miningTarget') as HTMLInputElement;
+miningTargetInput.addEventListener('input', (e) => {
+  localStorage.setItem('mining_target', miningTargetInput.value);
+  difficulty = miningTargetInput.valueAsNumber;
+});
+// arbitrary difficulty default, still experimenting.
+difficulty = getNumberFromStorage('mining_target', 16);
+miningTargetInput.valueAsNumber = difficulty;
+
+// mining timeout
+const miningTimeoutInput = document.querySelector('#miningTimeout') as HTMLInputElement;
+miningTimeoutInput.addEventListener('input', (e) => {
+  localStorage.setItem('mining_timeout', miningTimeoutInput.value);
+  timeout = miningTimeoutInput.valueAsNumber;
+});
+timeout = getNumberFromStorage('mining_timeout', 5);
+miningTimeoutInput.valueAsNumber = timeout;
+
+
+// settings
+const settingsForm = document.querySelector('form[name="settings"]') as HTMLFormElement;
+const privateKeyInput = settingsForm.querySelector('#privatekey') as HTMLInputElement;
+const pubKeyInput = settingsForm.querySelector('#pubkey') as HTMLInputElement;
+const statusMessage = settingsForm.querySelector('#keystatus') as HTMLElement;
+const generateBtn = settingsForm.querySelector('button[name="generate"]') as HTMLButtonElement;
+const importBtn = settingsForm.querySelector('button[name="import"]') as HTMLButtonElement;
+const privateTgl = settingsForm.querySelector('button[name="privatekey-toggle"]') as HTMLButtonElement;
+
+const validKeys = (
+  privatekey: string,
+  pubkey: string,
+) => {
+  try {
+    if (getPublicKey(privatekey) === pubkey) {
+      statusMessage.hidden = true;
+      statusMessage.textContent = 'public-key corresponds to private-key';
+      importBtn.removeAttribute('disabled');
+      return true;
+    } else {
+      statusMessage.textContent = 'private-key does not correspond to public-key!'
+    }
+  } catch (e) {
+    statusMessage.textContent = `not a valid private-key: ${e.message || e}`;
+  }
+  statusMessage.hidden = false;
+  importBtn.disabled = true;
+  return false;
+};
+
+generateBtn.addEventListener('click', () => {
+  const privatekey = generatePrivateKey();
+  const pubkey = getPublicKey(privatekey);
+  if (validKeys(privatekey, pubkey)) {
+    privateKeyInput.value = privatekey;
+    pubKeyInput.value = pubkey;
+    statusMessage.textContent = 'private-key created!';
+    statusMessage.hidden = false;
+  }
+});
+
+importBtn.addEventListener('click', () => {
+  const privatekey = privateKeyInput.value;
+  const pubkeyInput = pubKeyInput.value;
+  if (validKeys(privatekey, pubkeyInput)) {
+    localStorage.setItem('private_key', privatekey);
+    localStorage.setItem('pub_key', pubkeyInput);
+    statusMessage.textContent = 'stored private and public key locally!';
+    statusMessage.hidden = false;
+    config.pubkey = pubkeyInput;
+  }
+});
+
+settingsForm.addEventListener('input', () => validKeys(privateKeyInput.value, pubKeyInput.value));
+
+privateKeyInput.addEventListener('paste', (event) => {
+  if (pubKeyInput.value || !event.clipboardData) {
+    return;
+  }
+  if (privateKeyInput.value === '' || ( // either privatekey field is empty
+    privateKeyInput.selectionStart === 0 // or the whole text is selected and replaced with the clipboard
+    && privateKeyInput.selectionEnd === privateKeyInput.value.length
+  )) { // only generate the pubkey if no data other than the text from clipboard will be used
+    try {
+      pubKeyInput.value = getPublicKey(event.clipboardData.getData('text'));
+    } catch(err) {} // settings form will call validKeys on input and display the error
+  }
+});
+
+privateTgl.addEventListener('click', () => {
+  privateKeyInput.type = privateKeyInput.type === 'text' ? 'password' : 'text';
+});
+
+privateKeyInput.value = localStorage.getItem('private_key') || '';
+pubKeyInput.value = localStorage.getItem('pub_key') || '';
+
+// profile
+const profileForm = document.querySelector('form[name="profile"]') as HTMLFormElement;
+const profileSubmit = profileForm.querySelector('button[type="submit"]') as HTMLButtonElement;
+const profileStatus = document.querySelector('#profilestatus') as HTMLElement;
+
+profileForm.addEventListener('input', (e) => {
+  if (e.target instanceof HTMLElement) {
+    if (e.target?.nodeName === 'TEXTAREA') {
+      updateElemHeight(e.target as HTMLTextAreaElement);
+    }
+  }
+  const form = new FormData(profileForm);
+  const name = form.get('name');
+  const about = form.get('about');
+  const picture = form.get('picture');
+  profileSubmit.disabled = !(name || about || picture);
+});
+
+profileForm.addEventListener('submit', async (e) => {
+  e.preventDefault();
+  const form = new FormData(profileForm);
+  const newProfile = await powEvent({
+    kind: 0,
+    pubkey: config.pubkey,
+    content: JSON.stringify(Object.fromEntries(form)),
+    tags: [],
+    created_at: Math.floor(Date.now() * 0.001)
+  }, {
+    difficulty: config.difficulty,
+    statusElem: profileStatus,
+    timeout: config.timeout,
+  }).catch(console.warn);
+  if (!newProfile) {
+    profileStatus.textContent = 'publishing profile data canceled';
+    profileStatus.hidden = false;
+    return;
+  }
+  const privatekey = localStorage.getItem('private_key');
+  if (!privatekey) {
+    profileStatus.textContent = 'no private key to sign';
+    profileStatus.hidden = false;
+    return;
+  }
+  const sig = signEvent(newProfile, privatekey);
+  // TODO: validateEvent
+  if (sig) {
+    publish({...newProfile, sig}, (relay, error) => {
+      if (error) {
+        return console.error(error, relay);
+      }
+      console.info(`publish request sent to ${relay}`);
+      profileStatus.textContent = 'profile successfully published';
+      profileStatus.hidden = false;
+      profileSubmit.disabled = true;
+    });
+  }
+});

src/styles/cards.css

@@ -0,0 +1,336 @@
+/* https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Media_objects */
+.mbox {
+  align-items: center;
+  border-top: 1px solid var(--bgcolor-nav);
+  display: flex;
+  flex-direction: row;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  /* margin-bottom: 1rem; */
+  max-width: var(--content-width);
+  padding: var(--gap-half) var(--gap-half) 0 var(--gap-half);
+}
+.mbox:last-child {
+  margin-bottom: 0;
+}
+
+.mbox-img {
+  align-self: start;
+  background-color: var(--bgcolor-textinput);
+  border-radius: var(--profileimg-size);
+  flex-basis: var(--profileimg-size);
+  flex-shrink: 0;
+  height: var(--profileimg-size);
+  margin-right: var(--gap-half);
+  max-height: var(--profileimg-size);
+  max-width: var(--profileimg-size);
+  overflow: clip;
+  position: relative;
+  z-index: 2;
+}
+a.mbox-img:focus {
+  --focus-border-radius: var(--profileimg-size);
+}
+
+.mbox-img canvas,
+.mbox-img img {
+  display: block;
+}
+
+.mbox-updated-contact .mbox-img,
+.mbox-recommend-server .mbox-img {
+  --profileimg-size: 2rem;
+  margin-left: 2rem;
+}
+
+.mbox-body {
+  flex-basis: 100%;
+  flex-grow: 0;
+  flex-shrink: 1;
+  padding-bottom: var(--gap-half);
+  word-break: break-word;
+}
+.mbox-img + .mbox-body {
+  --max-width: calc(100% - var(--profileimg-size) - var(--gap-half));
+  flex-basis: var(--max-width);
+  max-width: var(--max-width);
+}
+.mbox-replies .mbox-replies .mbox-img + .mbox-body {
+  --max-width: calc(100% - var(--profileimg-size) + var(--gap-half));
+}
+.mbox-contact .mbox-img + .mbox-body {
+  --max-width: calc(100% - var(--profileimg-size) - var(--gap-half) - 90px);
+}
+
+.mbox-header {
+  align-items: baseline;
+  display: flex;
+  gap: var(--gap-quarter);
+  justify-content: space-between;
+  margin: .1rem 0;
+  min-height: 1.8rem;
+}
+.mbox-header a {
+  font-size: var(--font-small);
+  line-height: var(--lineheight-small);
+  text-decoration: none;
+}
+.mbox-header small {
+  color: var(--color-accent);
+  white-space: nowrap;
+}
+
+.mbox-username {
+}
+.mbox-kind0-name {
+  color: var(--color-accent);
+}
+
+.mbox-contact {
+  align-items: start; /* TODO: maybe all .mbox element should have align-items start */
+  flex-wrap: nowrap;
+  padding: var(--gap-half);
+}
+.mbox-contact .mbox-header {
+  justify-content: start;
+}
+.mbox-contact .mbox-body {
+  flex-basis: 100%;
+  flex-grow: 1;
+  flex-shrink: 1;
+  min-width: 0; /* with this mbox-content displays text on one line cutting off text-overflo... */
+  padding-bottom: 0;
+}
+.mbox-contact .mbox-content {
+  overflow: clip;
+  padding-right: var(--gap-quarter);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mbox-cta {
+  align-items: center;
+  align-self: center;
+  display: flex;
+  white-space: nowrap;
+}
+
+.mbox-updated-contact,
+.mbox-recommend-server {
+  padding-bottom: var(--gap-quarter);
+}
+.mbox-updated-contact .mbox-body,
+.mbox-recommend-server .mbox-body {
+  display: block;
+  font-size: var(--font-small);
+  padding-bottom: var(--gap-quarter);
+  padding-top: 0;
+}
+.mbox-updated-contact + .mbox-updated-contact,
+.mbox-recommend-server + .mbox-updated-contact {
+  padding-top: 0;
+}
+
+.mbox-updated-contact .mbox-header,
+.mbox-recommend-server .mbox-header {
+  display: inline;
+}
+.mbox-content {
+  max-width: 100%;
+}
+
+.mbox-updated-contact {
+  margin: 0;
+}
+.mbox-updated-contact + .mbox-updated-contact {
+  border-top: none;
+}
+
+.mbox {
+  overflow: clip;
+}
+.mbox .mbox {
+  border-top: none;
+  max-width: 100%;
+  overflow: visible;
+  padding: 0;
+  position: relative;
+}
+.mbox button:not(#publish) {
+  --bg-color: none;
+  --border-color: none;
+}
+.mbox button img + small:not(:empty) {
+  padding-left: .5rem;
+}
+.mbox-replies {
+  box-sizing: border-box;
+  flex-basis: 100%;
+  flex-grow: 1;
+  flex-shrink: 0;
+  position: relative;
+}
+.mbox-replies .mbox-replies {
+  --reply-padding: 3rem;
+  margin-bottom: 2px;
+  padding: 0 0 0 var(--reply-padding);
+}
+.mbox-replies .mbox-replies .mbox-replies {
+  --reply-padding: 0;
+}
+/* direct replies, test with http://localhost:8001/note1aer8780aywqqlfgjjch75uqmkujcdj4edv009nuludwq7w46lkvssclaxx */
+.mbox-replies .mbox-replies .mbox:first-child::before {
+  background: none;
+  border-color: var(--bgcolor-inactive);;
+  border-style: solid;
+  border-width: 0 0 .2rem .2rem;
+  content: "";
+  display: block;
+  height: var(--profileimg-size-quarter);
+  left: calc(-1 * var(--profileimg-size-quarter));
+  margin-left: -.1rem;
+  position: absolute;
+  top: 0;
+  width: .8rem;
+}
+.mbox-replies .mbox-replies .mbox-replies .mbox::before {
+  content: none;
+  display: none;
+}
+
+/* .mbox-replies .mbox-replies .mbox-replies .mbox::after, */
+.mbox-replies .mbox-replies .mbox-replies::before {
+  content: none;
+}
+
+.mbox-body,
+.mbox-has-replies:not(:last-child) {
+  position: relative;
+}
+.mbox-has-replies > .mbox-body::after,
+.mbox-replies .mbox-has-replies:not(:last-child)::after,
+.mbox-has-replies:not(:last-child) .mbox > .mbox-body::after,
+.mbox-has-replies .mbox:not(:last-child) > .mbox-body::after {
+  bottom: 0;
+  content: "";
+  display: block;
+  position: absolute;
+  top: .2rem;
+  width: .2rem;
+}
+
+.mbox-body::after,
+.mbox-has-replies::after {
+  background: var(--bgcolor-inactive);
+}
+.mbox-has-replies .mbox:not(:last-child) > .mbox-body::after {
+  left: -33px;
+}
+/* test with http://localhost:8001/note1aer8780aywqqlfgjjch75uqmkujcdj4edv009nuludwq7w46lkvssclaxx */
+.mbox-has-replies .mbox-has-replies .mbox:not(:last-child) > .mbox-body::after {
+  left: -18px;
+}
+.mbox-has-replies > .mbox-body::after {
+  left: -33px;
+}
+.mbox-has-replies:not(:last-child) .mbox > .mbox-body::after {
+  left: -33px;
+}
+.mbox-has-replies:not(:last-child)::after {
+  left: 18px;
+}
+
+.mbox-replies .mbox-has-replies:not(:last-child)::after {
+  left: 19px;
+}
+/* test with http://localhost:8001/note1quq9waqtrgl97v3gutg4au4zthetz853u8knsnz65nrqhavxvq8qrp6lyg */
+.mbox-replies .mbox-replies .mbox-has-replies:not(:last-child)::after {
+  left: 7px;
+}
+
+.mbox-replies .mbox-replies .mbox-has-replies > .mbox-body::after {
+  left: -18px;
+}
+.mbox-has-replies .mbox-has-replies .mbox-has-replies .mbox:not(:last-child) > .mbox-body::after {
+  left: -18px;
+}
+.mbox-replies .mbox:not(.mbox-has-replies):last-child > .mbox-body::after {
+  content: none;
+  display: none;
+}
+
+.mbox-replies .mbox-replies .mbox-has-replies.mbox:not(:last-child) > .mbox-body::after {
+  left: -18px;
+}
+
+
+.mbox-replies .mbox .mbox .mbox-img {
+  --profileimg-size: 2rem;
+  left: -.2rem;
+  margin-right: .5rem;
+  margin-top: .2rem;
+  position: relative;
+}
+
+/*
+.mbox-replies .mbox-body.mbox-oneline {
+  display: flex;
+  flex-wrap: wrap;
+  font-size: var(--font-small);
+  padding-bottom: var(--gap-half);
+  padding-top: var(--gap-eight);
+}
+@media (orientation: portrait) {
+  .mbox-replies .mbox .mbox .mbox-body {
+  }
+}
+*/
+
+.mbox-replies .mbox .mbox .buttons {
+  display: none;
+}
+
+[data-append]::after {
+  color: var(--color-accent);
+  content: "…";
+}
+
+.preview-loaded a {
+  background-color: var(--bgcolor-textinput);
+  border: 1px solid var(--bgcolor-inactive);
+  color: var(--color);
+  display: flex;
+  flex-direction: column;
+  margin: var(--gap) 0 0 0;
+  max-width: 48rem;
+  padding: 1.5rem 1.8rem;
+  text-decoration: none;
+}
+.preview-loaded a:visited {
+  color: inherit;
+}
+
+.preview-title {
+  font-size: inherit;
+  margin: 0;
+}
+
+.preview-descr {
+  font-size: var(--font-small);
+}
+
+.preview-image {
+  background-color: rgba(72, 63, 63, 0.07);
+  margin-bottom: var(--gap);
+  max-height: 30vh;
+  object-fit: contain;
+}
+
+.preview-image-only {
+  background-color: var(--bgcolor-textinput);
+  border: 1px solid var(--bgcolor-inactive);
+  margin: var(--gap) 0 0 0;
+  max-width: 48rem;
+  padding: 1.5rem 1.8rem;
+  width: 100%;
+}

src/styles/debug.css

@@ -0,0 +1,24 @@
+
+.mbox-img {
+  opacity: .73;
+}
+.mbox-replies {
+  margin-bottom: 4px !important;
+  outline: 2px dashed rgba(0, 255, 0, 0.15);
+  outline-offset: -2px;
+}
+.mbox-replies .mbox-replies {
+  outline-color: rgba(0, 255, 0, .4);
+  outline-offset: -4px;
+}
+.mbox-replies .mbox-replies .mbox-replies {
+  outline-color: rgba(0, 255, 0, .7);
+  outline-offset: -6px;
+}
+.mbox-replies .mbox-replies .mbox-replies .mbox-replies {
+  outline-color: rgba(210, 255, 0, 1);
+  outline-offset: -8px;
+}
+.mbox-replies .mbox-replies .mbox-replies .mbox-replies .mbox-replies {
+  outline-color: rgb(187, 119, 9);
+}

src/styles/error.css

@@ -0,0 +1,39 @@
+#errorOverlay {
+  background: var(--bgcolor-danger);
+  bottom: 0;
+  color: var(--color-danger);
+  display: flex;
+  flex-direction: column;
+  left: 0;
+  max-width: 100vw;
+  overflow: auto;
+  padding: var(--gap);
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 100;
+}
+
+.error-title {
+  margin-top: 0;
+}
+
+#errorOverlay button {
+  background-color: var(--bgcolor-danger-input);
+  border: none;
+  color: var(--color-danger);
+  display: inline-block;
+}
+#errorOverlay button:focus {
+  outline: 2px solid white;
+  outline-offset: var(--focus-outline-offset);
+}
+
+#errorOverlay .buttons {
+  max-width: var(--content-width);
+}
+@media (orientation: portrait) {
+  #errorOverlay .buttons {
+    flex-basis: 4rem;
+  }
+}

src/styles/form.css

@@ -0,0 +1,285 @@
+:root {
+  --transition-duration: .25s;
+  --transition-timing-function: ease-out;
+}
+
+form,
+.form {
+  --padding: 1.2rem;
+  display: flex;
+  flex-direction: column;
+  max-width: var(--content-width);
+  padding: 0 var(--gap);
+}
+
+fieldset {
+  /* ignore this container */
+  border: none;
+  display: contents;
+}
+
+legend {
+  display: none;
+  width: 100%;
+}
+#newNote legend {
+  display: block;
+}
+
+input,
+textarea {
+  color: var(--color);
+  font-size: 1.6rem;
+}
+
+button,
+label {
+  color: var(--color);
+  cursor: pointer;
+  display: block;
+  font-size: 1.6rem;
+  margin-bottom: 0;
+  padding: var(--padding);
+  text-indent: 0;
+  transition: background-color var(--transition-duration);
+}
+
+input[type="number"],
+input[type="password"],
+input[type="text"],
+input[type="url"],
+textarea {
+  background: var(--bgcolor-textinput);
+  border: .2rem solid #b7b7b7;
+  border-radius: .2rem;
+  display: block;
+  margin: 0 0 var(--gap-half) 0;
+  padding: var(--padding);
+}
+label.number,
+input[type="range"] {
+  margin: 0 0 var(--gap) 0;
+}
+input[type="number"]:focus,
+input[type="password"]:focus,
+input[type="text"]:focus,
+input[type="url"]:focus,
+textarea:focus {
+  border-color: var(--focus-border-color);
+  outline-offset: var(--focus-outline-offset);
+  outline: var(--focus-outline);
+}
+input:invalid {
+  outline: 2px solid var(--bgcolor-danger);
+  outline-offset: var(--focus-outline-offset);
+}
+textarea {
+  /* max-height: 64vh; */
+  min-height: 20px;
+  resize: none;
+  transition: min-height var(--transition-duration) var(--transition-timing-function),
+              height var(--transition-duration) var(--transition-timing-function);
+}
+textarea:focus {
+  min-height: 3.5rem;
+}
+#newNote textarea {
+  min-height: 10rem;
+}
+#newNote textarea:focus {
+  min-height: 18rem;
+}
+@media (orientation: portrait) {
+  #newNote textarea {
+    min-height: 8rem;
+  }
+  #newNote textarea:focus {
+    min-height: 15rem;
+  }
+}
+
+.buttons {
+  align-items: center;
+  display: flex;
+  flex-basis: 100%;
+  gap: var(--gap);
+  justify-content: start;
+  margin: .6rem 0;
+  min-height: 2.2rem;
+}
+form .buttons,
+.form .buttons,
+.form-inline .buttons {
+  flex-basis: fit-content;
+  justify-content: end;
+}
+
+.buttons img,
+.buttons small,
+.buttons span {
+  font-weight: normal;
+  vertical-align: middle;
+}
+
+button {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  font-weight: bold;
+  outline-offset: 1px;
+  word-break: normal;
+}
+button:active {
+  --bg-color: rgb(13, 74, 139);
+  --border-color: rgb(13, 74, 139);
+}
+
+.primary,
+.secondary {
+  border: 0.2rem solid var(--bgcolor-accent);
+  border-radius: .2rem;
+  padding: .9rem 2rem .7rem 2rem;
+}
+.primary {
+  background-color: var(--bgcolor-accent);
+}
+.secondary {
+  background-color: transparent;
+}
+.secondary:disabled {
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+}
+
+button:focus {
+}
+
+.btn-inline {
+  --border-color: transparent;
+  background: transparent;
+  color: var(--color-accent);
+  display: inline-block;
+  line-height: 1;
+  padding: 0 .6rem;
+}
+
+.btn-danger {
+  background: var(--bgcolor-danger);
+}
+
+button:disabled {
+  --bg-color: var(--bgcolor-inactive);
+  --border-color: var(--bgcolor-inactive);
+  cursor: default;
+}
+
+.form-status {
+  flex-basis: 100%;
+  flex-grow: 1;
+  min-height: 1.8rem;
+  padding: var(--padding);
+}
+
+.form-inline {
+  --padding: 1.2rem 1.3rem;
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  flex-wrap: wrap;
+  padding: 0;
+}
+.form-inline * + * {
+  margin-left: var(--gap);
+}
+.form-inline button,
+.form-inline input[type="number"],
+.form-inline input[type="text"],
+.form-inline textarea {
+  margin: .4rem 0;
+}
+
+.form-inline input[type="number"],
+.form-inline input[type="text"],
+.form-inline textarea {
+  flex-basis: 50%;
+  flex-grow: 1;
+  flex-shrink: 1;
+  min-width: 100px;
+  margin-bottom: 0;
+}
+
+.form-inline button {
+  flex-grow: 0;
+}
+
+label.number {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: var(--gap);
+  padding: 0;
+}
+label.number span {
+  flex-grow: 1;
+  padding: 0 0 0 var(--padding);
+}
+label.number input[type="number"] {
+  align-self: baseline;
+  margin-bottom: 0;
+}
+@media (orientation: landscape) {
+  label.number span {
+    align-self: center;
+  }
+  label.number input[type="number"] + span {
+    padding: 0 var(--padding) 0 0;
+  }
+}
+@media (orientation: portrait) {
+  label.number {
+    flex-direction: column;
+    gap: var(--gap-half);
+    padding: 0;
+  }
+  label.number span {
+    padding: 0 var(--padding);
+  }
+  label.number input[type="number"] {
+    align-self: stretch;
+  }
+}
+
+button#publish {
+  align-self: end;
+  order: 2;
+}
+button[name="back"] {
+  display: none;
+}
+#newNote button[name="back"] {
+  align-self: end;
+  display: inherit;
+}
+
+#sendstatus {
+  margin-left: 0;
+  order: 1;
+}
+
+.focus-active {
+
+}
+
+.shrink-out {
+  animation-duration: var(--transition-duration);
+  animation-name: lineInserted;
+  transition: max-height calc(.5 * var(--transition-duration)) var(--transition-timing-function);
+}
+@keyframes lineInserted {
+  from {
+    max-height: 50px;
+  }
+  to {
+    max-height: 0px;
+  }
+}

src/styles/main.css

@@ -0,0 +1,194 @@
+@import "view.css";
+@import "cards.css";
+@import "form.css";
+@import "write.css";
+@import "error.css";
+/* @import "debug.css"; */
+
+:root {
+  --content-width: min(100% - 2.4rem, 96ch);
+  /* 5px auto Highlight */
+  --focus-border-color: rgb(0, 122, 255);
+  --focus-border-radius: .2rem;
+  --focus-outline-color: rgb(192, 227, 252);
+  --focus-outline-offset: 2px;
+  --focus-outline-style: solid;
+  --focus-outline-width: 2px;
+  --focus-outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
+  --font-small: 1.2rem;
+  --lineheight-small: 1.5;
+  --gap: 2.4rem;
+  --gap-half: 1.2rem;
+  --gap-quarter: .6rem;
+  --gap-eight: .3rem;
+  --profileimg-size: 4rem;
+  --profileimg-size-half: 2rem;
+  --profileimg-size-quarter: 1rem;
+}
+@media (orientation: portrait) {
+  :root {
+    --content-width: 100%;
+  }
+}
+
+::selection {
+  background: #ff79f9;
+  color: #fff;
+}
+
+:where([hidden]) {
+  display: none !important;
+}
+
+@media (prefers-color-scheme: light) {
+  html {
+    --color: rgb(43, 43, 43);
+    --color-accent: rgb(118, 118, 118);
+    --color-accent-line: rgb(163, 163, 163);
+    --color-danger: #0e0e0e;
+    --color-visited: #7467c4;
+    --color-visited-line: #9083e3;
+    --color-inverse: #fff;
+    --bgcolor: #fff;
+    --bgcolor-nav: gainsboro;
+    --bgcolor-accent: #5194ff;
+    --bgcolor-danger: rgb(225, 40, 40);
+    --bgcolor-danger-input: rgba(255 255 255 / .85);
+    --bgcolor-inactive: #bababa;
+    --bgcolor-textinput: #fff;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    --color: #d9d9d9;
+    --color-accent: #828282;
+    --color-accent-line: #737373;
+    --color-danger: #e3e3e3;
+    --color-visited: #796ae3;
+    --color-visited-line: #5d4fce;
+    --color-inverse: #101010;
+    --bgcolor: #101010;
+    --bgcolor-nav: rgb(31, 22, 51);
+    --bgcolor-accent: rgb(16, 77, 176);
+    --bgcolor-danger: rgb(169, 0, 0);
+    --bgcolor-danger-input: rgba(0 0 0 / .5);
+    --bgcolor-inactive: #353638;
+    --bgcolor-textinput: #0e0e0e;
+  }
+
+  img {
+    opacity: .75;
+    transition: opacity .5s ease-in-out;
+  }
+  img:hover {
+    opacity: 1;
+  }
+}
+
+html {
+  font-size: 62.5%;
+  line-height: 1;
+}
+
+body {
+  background-color: var(--bgcolor);
+  color: var(--color);
+  font-size: 1.6rem;
+  line-height: 1.375;
+  word-break: break-word;
+}
+@media (orientation: portrait) {
+  body {
+    font-size: 1.4rem;
+    line-height: 1.428571428571429;
+  }
+}
+
+html, body {
+  height: 100%;
+  margin: 0;
+  min-height: 100%;
+  overflow: clip;
+}
+
+h1, h2, h3, h4, h5 { font-weight: normal; }
+
+body,
+button,
+input,
+select,
+textarea {
+  font-family: sans-serif;
+}
+
+small,
+time {
+  font-size: var(--font-small);
+  line-height: 1.25;
+}
+
+canvas,
+img {
+  max-width: 100%;
+}
+
+.text {
+  padding: 0 var(--gap);
+}
+
+.danger {
+  background-color: var(--bgcolor-danger);
+}
+
+a {
+  color: var(--color-accent);
+  text-decoration-color: var(--color-accent-line);
+  text-decoration-line: underline;
+  text-decoration-style: solid;
+  text-decoration-thickness: 2px;
+}
+
+a .highlight {
+  color: var(--color);
+}
+
+a:focus,
+button:focus {
+  border-radius: var(--focus-border-radius);
+  outline: var(--focus-outline);
+  outline-offset: 0;
+}
+a:visited {
+  color: var(--color-visited);
+  text-decoration-color: var(--color-visited-line);
+}
+nav a:visited {
+  color: inherit;
+}
+
+img[alt] {
+  font-size: .9rem;
+  text-align: center;
+  word-break: break-all;
+}
+
+pre {
+  margin: 0;
+  padding: 0;
+}
+
+dl {
+  display: grid;
+  grid-row-gap: var(--gap-half);
+  grid-template-columns: max-content auto;
+}
+
+dt {
+  color: var(--color-accent);
+  grid-column-start: 1;
+}
+
+dd {
+  grid-column-start: 2;
+}

src/styles/view.css

@@ -0,0 +1,203 @@
+.root {
+  display: flex;
+  height: 100%;
+  max-height: 100%;
+  flex-direction: column;
+}
+@media (orientation: landscape) {
+  .root {
+    flex-direction: row-reverse;
+  }
+}
+
+main {
+  display: flex;
+  flex-grow: 1;
+  height: 100%;
+  overflow: clip;
+  position: relative;
+  width: 100%;
+}
+
+aside {
+  z-index: 4;
+}
+
+nav {
+  align-items: center;
+  background-color: var(--bgcolor-nav);
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  flex-shrink: 0;
+  justify-content: space-between;
+  min-height: 4.6rem;
+  overflow-y: auto;
+  padding: .2rem 1.5rem;
+  user-select: none;
+  -webkit-user-select: none;
+}
+@supports (padding: max(0px)) {
+  nav {
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+}
+@media (orientation: landscape) {
+  nav {
+    align-items: stretch;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+}
+nav a,
+nav button {
+  --bgcolor-accent: transparent;
+  --border-color: transparent;
+  border-radius: 0;
+  color: inherit;
+  font-weight: bold;
+  padding: 1rem;
+}
+@media (orientation: landscape) {
+  nav a,
+  nav button {
+    padding: 2rem 0;
+  }
+  nav .spacer {
+    flex-grow: 1;
+  }
+  nav button:last-child {
+    margin-bottom: .4rem;
+  }
+}
+@media (orientation: portrait) {
+  nav .spacer {
+    display: none;
+  }
+}
+
+.view {
+  background-color: var(--bgcolor);
+  display: flex;
+  flex-direction: column;
+  left: 0;
+  min-height: 100%;
+  opacity: 1;
+  overflow-x: clip;
+  position: absolute;
+  top: 0;
+  transform: translateX(0);
+  transition: transform .3s cubic-bezier(.465,.183,.153,.946);
+  width: 100%;
+  will-change: transform;
+  z-index: 2;
+}
+@media (orientation: landscape) {
+  .view {
+    transition: opacity .3s cubic-bezier(.465,.183,.153,.946);
+  }
+}
+.view.view-next {
+  z-index: 3;
+}
+.view.view-prev {
+  z-index: 1;
+}
+@media (orientation: portrait) {
+  .view.view-next {
+    transform: translateX(100%);
+  }
+  .view.view-prev {
+    transform: translateX(-20%);
+  }
+}
+@media (orientation: landscape) {
+  .view.view-next,
+  .view.view-next {
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  margin-inline: auto;
+  overflow-y: auto;
+  width: 100%;
+}
+main .content {
+  height: 1px;
+  padding-bottom: 10rem;
+}
+nav .content {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+nav a {
+  text-align: center;
+  text-decoration: none;
+}
+
+.content h1 {
+  padding: 0;
+}
+
+.hero {
+  --extra-space: calc(var(--profileimg-size) + var(--gap-half));
+  padding: var(--gap-half);
+}
+.hero-title {
+  align-items: baseline;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gap-half);
+  justify-content: end;
+  max-width: var(--content-width);
+}
+.hero-title h1 {
+  flex-grow: 1;
+  font-size: 2.1rem;
+  line-height: 1.285714285714286;
+  margin-bottom: 0;
+  margin-top: 2rem;
+  padding-left: var(--extra-space);
+}
+.hero-title button {
+  line-height: 1;
+}
+
+.hero p {
+  max-width: calc(var(--content-width) - var(--extra-space));
+  padding-left: var(--extra-space);
+}
+
+.hero .hero-npub {
+  color: var(--color-accent);
+  display: block;
+  font-size: 1.1rem;
+  line-height: 1.36363636;
+  max-width: 100%;
+  overflow: clip;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+@media (min-width: 54ch) {
+  .hero .hero-npub {
+    padding-left: var(--extra-space);
+    text-align: left;
+  }
+}
+
+.hero footer {
+  display: flex;
+  gap: var(--gap-half);
+  padding-left: var(--extra-space);
+}
+
+.hero footer a {
+  text-decoration: none;
+}

src/styles/write.css

@@ -0,0 +1,67 @@
+#bubble {
+  background-color: darkmagenta;
+  border-color: darkmagenta;
+  border-radius: 10rem;
+  bottom: 5rem;
+  height: 10rem;
+  padding: 0;
+  position: fixed;
+  right: 5rem;
+  width: 10rem;
+  z-index: 1;
+}
+@media (orientation: portrait) {
+  #bubble {
+    bottom: 7rem;
+    right: 3rem;
+    height: 7rem;
+    width: 7rem;
+  }
+}
+#bubble svg {
+  height: 100%;
+  position: relative;
+  width: 100%;
+  top: .5rem;
+}
+
+#newNote {
+  align-items: center;
+  display: flex;
+  height: 100vh;
+  justify-content: center;
+  position: fixed;
+  top: 0;
+  width: 100vw;
+  z-index: 20;
+}
+@media (orientation: portrait) {
+  #newNote {
+    align-items: start;
+  }
+}
+
+#newNote #writeForm {
+  align-items: start;
+  background-color: var(--bgcolor);
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  flex-wrap: wrap;
+  gap: 0;
+  justify-content: end;
+  max-height: 100vh;
+  min-height: 64vh;
+  outline: 100vh solid var(--bgcolor);
+  overflow-y: auto;
+  padding: 2rem;
+}
+
+#newNote .form-inline textarea {
+  flex-basis: 100%;
+  margin: var(--gap) 0;
+}
+
+#newNote .buttons {
+  align-self: end;
+}

src/subscriptions.ts

@@ -0,0 +1,328 @@
+import {Event} from 'nostr-tools';
+import {getReplyTo, hasEventTag, isMention, isPTag} from './events';
+import {config} from './settings';
+import {sub, subOnce, unsubAll} from './relays';
+
+type SubCallback = (
+  event: Event,
+  relay: string,
+) => void;
+
+export const subPubkeys = (
+  pubkeys: string[],
+  onEvent: SubCallback,
+) => {
+  const authorsPrefixes = pubkeys.map(pubkey => pubkey.slice(0, 32));
+  console.info(`subscribe to homefeed ${authorsPrefixes}`);
+  unsubAll();
+
+  const repliesTo = new Set<string>();
+  sub({
+    cb: (evt, relay) => {
+      if (
+        evt.tags.some(hasEventTag)
+        && !evt.tags.some(isMention)
+      ) {
+        const note = getReplyTo(evt); // get all reply to events instead?
+        if (note && !repliesTo.has(note)) {
+          repliesTo.add(note);
+          subOnce({
+            cb: onEvent,
+            filter: {
+              ids: [note],
+              kinds: [1],
+              limit: 1,
+            },
+            relay,
+          });
+        }
+      }
+      onEvent(evt, relay);
+    },
+    filter: {
+      authors: authorsPrefixes,
+      kinds: [1],
+      limit: 20,
+    },
+  });
+  // get metadata
+  sub({
+    cb: onEvent,
+    filter: {
+      authors: pubkeys,
+      kinds: [0],
+      limit: pubkeys.length,
+    },
+    unsub: true,
+  });
+};
+
+/** subscribe to global feed */
+export const subGlobalFeed = (onEvent: SubCallback) => {
+  console.info('subscribe to global feed');
+  unsubAll();
+  const now = Math.floor(Date.now() * 0.001);
+  const pubkeys = new Set<string>();
+  const notes = new Set<string>();
+  const prefix = Math.floor(config.filterDifficulty / 4); //  4 bits in each '0' character
+  sub({ // get past events
+    cb: (evt, relay) => {
+      pubkeys.add(evt.pubkey);
+      notes.add(evt.id);
+      onEvent(evt, relay);
+    },
+    filter: {
+      ...(prefix && {ids: ['0'.repeat(prefix)]}),
+      kinds: [1],
+      until: now,
+      ...(!prefix && {since: Math.floor(now - (24 * 60 * 60))}),
+      limit: 100,
+    },
+    unsub: true
+  });
+
+  setTimeout(() => {
+    // get profile info
+    sub({
+      cb: onEvent,
+      filter: {
+        authors: Array.from(pubkeys),
+        kinds: [0],
+        limit: pubkeys.size,
+      },
+      unsub: true,
+    });
+    pubkeys.clear();
+
+    // get reactions
+    sub({
+      cb: onEvent,
+      filter: {
+        '#e': Array.from(notes),
+        kinds: [7],
+        until: now,
+        since: Math.floor(now - (24 * 60 * 60)),
+      },
+      unsub: true,
+    });
+    notes.clear();
+  }, 2000);
+
+  // subscribe to future notes, reactions and profile updates
+  sub({
+    cb: (evt, relay) => {
+      onEvent(evt, relay);
+      if (
+        evt.kind !== 1
+        || pubkeys.has(evt.pubkey)
+      ) {
+        return;
+      }
+      subOnce({ // get profil data
+        relay,
+        cb: onEvent,
+        filter: {
+          authors: [evt.pubkey],
+          kinds: [0],
+          limit: 1,
+        }
+      });
+    },
+    filter: {
+      ...(prefix && {ids: ['0'.repeat(prefix)]}),
+      kinds: [0, 1, 7],
+      since: now,
+    },
+  });
+};
+
+/** subscribe to global feed */
+// export const simpleSub24hFeed = (onEvent: SubCallback) => {
+//   unsubAll();
+//   sub({
+//     cb: onEvent,
+//     filter: {
+//       kinds: [0, 1, 2, 7],
+//       // until: Math.floor(Date.now() * 0.001),
+//       since: Math.floor((Date.now() * 0.001) - (24 * 60 * 60)),
+//       limit: 250,
+//     }
+//   });
+// };
+
+/** subscribe to a note id (nip-19) */
+export const subNote = (
+  eventId: string,
+  onEvent: SubCallback,
+) => {
+  unsubAll();
+  sub({
+    cb: onEvent,
+    filter: {
+      ids: [eventId],
+      kinds: [1],
+      limit: 1,
+    },
+    unsub: true,
+  });
+
+  const replies = new Set<string>();
+
+  const onReply = (evt: Event, relay: string) => {
+    replies.add(evt.id)
+    onEvent(evt, relay);
+    unsubAll();
+    sub({
+      cb: onEvent,
+      filter: {
+        '#e': Array.from(replies),
+        kinds: [1, 7],
+      },
+      unsub: true,
+    });
+  };
+
+  replies.add(eventId);
+  setTimeout(() => {
+    sub({
+      cb: onReply,
+      filter: {
+        '#e': [eventId],
+        kinds: [1, 7],
+      },
+      unsub: true, // TODO: probably keep this subscription also after onReply/unsubAll
+    });
+  }, 200);
+};
+
+/** subscribe to npub key (nip-19) */
+export const subProfile = (
+  pubkey: string,
+  onEvent: SubCallback,
+) => {
+  console.info(`subscribe to profile ${pubkey}`);
+  unsubAll();
+  sub({
+    cb: onEvent,
+    filter: {
+      authors: [pubkey],
+      kinds: [0],
+      limit: 1,
+    },
+  });
+
+  const repliesTo = new Set<string>();
+  // get notes for profile
+  sub({
+    cb: (evt, relay) => {
+      if (
+        evt.tags.some(hasEventTag)
+        && !evt.tags.some(isMention)
+      ) {
+        const note = getReplyTo(evt);
+        if (note && !repliesTo.has(note)) {
+          repliesTo.add(note);
+          subOnce({
+            relay,
+            cb: onEvent,
+            filter: {
+              ids: [note],
+              kinds: [1],
+              limit: 1,
+            }
+          });
+        }
+      }
+      onEvent(evt, relay);
+    },
+    filter: {
+      authors: [pubkey],
+      kinds: [1],
+      limit: 50,
+    }
+  });
+  setTimeout(() => {
+    // get contacts
+    sub({
+      cb: onEvent,
+      filter: {
+        authors: [pubkey, config.pubkey],
+        kinds: [3],
+        limit: 6,
+      },
+    });
+  }, 100);
+};
+
+export const subEventID = (
+  id: string,
+  onEvent: SubCallback,
+) => {
+  unsubAll();
+  sub({
+    cb: onEvent,
+    filter: {
+      ids: [id],
+      limit: 1,
+    },
+    unsub: true,
+  });
+  sub({
+    cb: onEvent,
+    filter: {
+      authors: [id],
+      limit: 200,
+    },
+    unsub: true,
+  });
+};
+
+export const subOwnContacts = (onEvent: SubCallback) => {
+  sub({
+    cb: onEvent,
+    filter: {
+      authors: [config.pubkey],
+      kinds: [3],
+      limit: 1,
+    },
+    unsub: true,
+  });
+};
+
+export const subContactList = (
+  pubkey: string,
+  onEvent: SubCallback,
+) => {
+  unsubAll();
+  const pubkeys = new Set<string>();
+  let newestEvent = 0;
+  sub({
+    cb: (evt: Event, relay: string) => {
+      if (evt.created_at <= newestEvent) {
+        return;
+      }
+      newestEvent = evt.created_at;
+      const newPubkeys = evt.tags
+        .filter(isPTag)
+        .filter(([, p]) => !pubkeys.has(p))
+        .map(([, p]) => {
+          pubkeys.add(p);
+          return p
+        });
+      subOnce({
+        cb: onEvent,
+        filter: {
+          authors: newPubkeys,
+          kinds: [0],
+        },
+        relay,
+      });
+      onEvent(evt, relay);
+    },
+    filter: {
+      authors: [pubkey],
+      kinds: [3],
+      limit: 1,
+    },
+  });
+};

src/system.ts

@@ -0,0 +1,124 @@
+import {Event, getEventHash, UnsignedEvent} from 'nostr-tools';
+import {elem, lockScroll, unlockScroll} from './utils/dom';
+
+const errorOverlay = document.querySelector('section#errorOverlay') as HTMLElement;
+
+type PromptErrorOptions = {
+  onCancel?: () => void;
+  onRetry?: () => void;
+};
+
+/**
+ * Creates an error overlay, currently with hardcoded POW related message, this could be come a generic prompt
+ * @param error message
+ * @param options {onRetry, onCancel} callbacks
+ */
+const promptError = (
+  error: string,
+  options: PromptErrorOptions,
+) => {
+  const {onCancel, onRetry} = options;
+  lockScroll();
+  errorOverlay.replaceChildren(
+    elem('h1', {className: 'error-title'}, error),
+    elem('p', {}, 'time ran out finding a proof with the desired mining difficulty. either try again, lower the mining difficulty or increase the timeout in profile settings.'),
+    elem('div', {className: 'buttons'}, [
+      onCancel ? elem('button', {data: {action: 'close'}}, 'close') : '',
+      onRetry ? elem('button', {data: {action: 'again'}}, 'try again') : '',
+    ]),
+  );
+  const handleOverlayClick = (e: MouseEvent) => {
+    if (e.target instanceof Element) {
+      const button = e.target.closest('button');
+      if (button) {
+        switch(button.dataset.action) {
+          case 'close':
+            onCancel && onCancel();
+            break;
+          case 'again':
+            onRetry && onRetry();
+            break;
+        }
+        errorOverlay.removeEventListener('click', handleOverlayClick);
+        errorOverlay.hidden = true;
+        unlockScroll();
+      }
+    }
+  };
+  errorOverlay.addEventListener('click', handleOverlayClick);
+  errorOverlay.hidden = false;
+}
+
+type PowEventOptions = {
+  difficulty: number;
+  statusElem: HTMLElement;
+  timeout: number;
+};
+
+type WorkerResponse = {
+  error: string;
+  event: Event;
+};
+
+type HashedEvent = UnsignedEvent & {
+  id: string;
+};
+
+/**
+ * run proof of work in a worker until at least the specified difficulty.
+ * if succcessful, the returned event contains the 'nonce' tag
+ * and the updated created_at timestamp.
+ *
+ * powEvent returns a rejected promise if the funtion runs for longer than timeout.
+ * a zero timeout makes mineEvent run without a time limit.
+ * a zero mining target just resolves the promise without trying to find a 'nonce'.
+ */
+export const powEvent = (
+  evt: UnsignedEvent,
+  options: PowEventOptions
+): Promise<HashedEvent | void> => {
+  const {difficulty, statusElem, timeout} = options;
+  if (difficulty === 0) {
+    return Promise.resolve({
+      ...evt,
+      id: getEventHash(evt),
+    });
+  }
+  const cancelBtn = elem('button', {className: 'btn-inline'}, [elem('small', {}, 'cancel')]);
+  statusElem.replaceChildren('working…', cancelBtn);
+  statusElem.hidden = false;
+  return new Promise((resolve, reject) => {
+    const worker = new Worker('/worker.js');
+
+    const onCancel = () => {
+      worker.terminate();
+      reject(`mining kind ${evt.kind} event canceled`);
+    };
+    cancelBtn.addEventListener('click', onCancel);
+
+    worker.onmessage = (msg: MessageEvent<WorkerResponse>) => {
+      worker.terminate();
+      cancelBtn.removeEventListener('click', onCancel);
+      if (msg.data.error) {
+        promptError(msg.data.error, {
+          onCancel: () => reject(`mining kind ${evt.kind} event canceled`),
+          onRetry: async () => {
+            const result = await powEvent(evt, {difficulty, statusElem, timeout}).catch(console.warn);
+            resolve(result);
+          }
+        })
+      } else {
+        resolve(msg.data.event);
+      }
+    };
+
+    worker.onerror = (err) => {
+      worker.terminate();
+      // promptError(msg.data.error, {});
+      cancelBtn.removeEventListener('click', onCancel);
+      reject(err);
+    };
+
+    worker.postMessage({event: evt, difficulty, timeout});
+  });
+};

src/tabs.css

@@ -1,54 +0,0 @@
-.tabs {
-  position: relative;
-  min-height: 200px;
-}
-
-.tab {
-  float: left;
-}
-
-.tab label {
-  cursor: pointer;
-  font-size: 1.1em;
-  border-radius: 5px 5px 0 0;
-  padding: .5em 1em;
-}
-
-.tab [type=radio] {
-  position: absolute;
-  height: 0;
-  width: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-}
-
-.tab [type=radio] + label {
-  outline: 1px solid var(--bgcolor-accent);
-}
-
-/*
-.tab [type=radio]:focus + label {
-  outline: 2px dotted black;
-}
-*/
-
-.tab [type=radio]:checked ~ label {
-  z-index: 2;
-  background-color: var(--bgcolor-accent);
-  color: var(--fgcolor-accent);
-}
-
-.tab [type=radio]:checked ~ label ~ .content {
-  z-index: 1;
-  opacity: 1;
-}
-
-.tab .content {
-  position: absolute;
-  top: 2.5em;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  padding: 5px;
-  opacity: 0;
-}

src/template.ts

@@ -0,0 +1,83 @@
+
+import {nip19} from 'nostr-tools';
+import {elem} from './utils/dom';
+
+export type DOMMap = {
+  [id: string]: HTMLElement
+};
+
+export type ViewTemplateOptions = {
+  type: 'home';
+  id?: string;
+} | {
+  type: 'feed';
+} | {
+  type: 'note';
+  id: string;
+} | {
+  type: 'profile';
+  id: string;
+} | {
+  type: 'contacts';
+  id: string;
+} | {
+  type: 'event';
+  id: string;
+};
+
+export const renderViewTemplate = (options: ViewTemplateOptions) => {
+  const content = elem('div', {className: 'content'});
+  const dom: DOMMap = {};
+  switch (options.type) {
+    case 'home':
+      break;
+    case 'feed':
+      break;
+    case 'profile':
+      const pubkey = options.id;
+      const npub = nip19.npubEncode(pubkey);
+      const about = elem('span');
+      const detail = elem('p', {}, about);
+      const followStatus = elem('small');
+      const followBtn = elem('button', {
+        className: 'primary',
+        name: 'follow',
+        data: {'id': options.id}
+      }, 'follow');
+      const following = elem('span');
+      const profileHeader = elem('header', {className: 'hero'}, [
+        elem('small', {className: 'hero-npub'}, npub),
+        elem('div', {className: 'hero-title'}, [
+          elem('h1', {}, pubkey),
+          followStatus,
+          followBtn,
+        ]),
+        detail,
+        elem('footer', {}, following),
+      ]);
+      dom.header = profileHeader;
+      dom[`about-${pubkey}`] = about;
+      dom[`detail-${pubkey}`] = detail;
+      dom.following = following;
+      dom[`followStatus-${pubkey}`] = followStatus;
+      dom[`followBtn-${pubkey}`] = followBtn;
+      content.append(profileHeader);
+      document.title = pubkey;
+      break;
+    case 'note':
+      break;
+    case 'contacts':
+      break;
+    case 'event':
+      const id = options.id;
+      content.append(
+        elem('header', {className: 'hero'}, [
+          elem('h1', {}, id),
+        ])
+      );
+      document.title = id;
+      break;
+  }
+  const view = elem('section', {className: 'view'}, [content]);
+  return {content, dom, view};
+};

src/ui.ts

@@ -0,0 +1,225 @@
+import {Event, nip19} from  'nostr-tools';
+import {Children, elem, elemArticle, parseTextContent} from './utils/dom';
+import {dateTime, formatTime} from './utils/time';
+import {/*validatePow,*/ sortByCreatedAt} from './events';
+import {getViewElem, getViewOptions, setViewElem} from './view';
+import {config} from './settings';
+import {getReactions, getReactionContents} from './reactions';
+import {openWriteInput} from './write';
+// import {linkPreview} from './media';
+import {parseJSON} from './media';
+import {getMetadata} from './profiles';
+import {EventWithNip19, replyList} from './notes';
+import {isFollowing} from './contacts';
+
+setInterval(() => {
+  document.querySelectorAll('time[datetime]').forEach((timeElem: HTMLTimeElement) => {
+    timeElem.textContent = formatTime(new Date(timeElem.dateTime));
+  });
+}, 10000);
+
+export const createTextNote = (
+  evt: EventWithNip19,
+  relay: string,
+) => {
+  const {img, name, userName} = getMetadata(evt.pubkey);
+  const replies = replyList.filter(({replyTo}) => replyTo === evt.id)
+    .sort(sortByCreatedAt)
+    .reverse();
+  // const isLongContent = evt.content.trimRight().length > 280;
+  // const content = isLongContent ? evt.content.slice(0, 280) : evt.content;
+  const reactions = getReactions(evt.id);
+  const didReact = reactions.length && !!reactions.find(reaction => reaction.pubkey === config.pubkey);
+  const [content, {firstLink}] = parseTextContent(evt.content);
+  const time = new Date(evt.created_at * 1000);
+  const buttons = elem('div', {className: 'buttons'}, [
+    elem('button', {name: 'reply', type: 'button'}, [
+      elem('img', {height: 24, width: 24, src: '/assets/comment.svg'})
+    ]),
+    elem('button', {name: 'star', type: 'button'}, [
+      elem('img', {
+        alt: didReact ? '✭' : '✩', // ♥
+        height: 24, width: 24,
+        src: `/assets/${didReact ? 'star-fill' : 'star'}.svg`,
+        title: getReactionContents(evt.id).join(' '),
+      }),
+      elem('small', {data: {reactions: ''}}, reactions.length || ''),
+    ]),
+  ]);
+  if (localStorage.getItem('reply_to') === evt.id) {
+    openWriteInput(buttons, evt.id);
+  }
+  const replyFeed: Array<HTMLElement> = replies[0] ? replies.map(e => setViewElem(e.id, createTextNote(e, relay))) : [];
+  return elemArticle([
+    elem('a', {className: 'mbox-img', href: `/${evt.nip19.npub}`, tabIndex: -1}, img),
+    elem('div', {className: 'mbox-body'}, [
+      elem('header', {
+        className: 'mbox-header',
+        title: `User: ${userName}\n${time}\n\nUser pubkey: ${evt.pubkey}\n\nRelay: ${relay}\n\nEvent-id: ${evt.id}
+        ${evt.tags.length ? `\nTags ${JSON.stringify(evt.tags)}\n` : ''}
+        ${evt.content}`
+      }, [
+        elem('a', {
+          className: `mbox-username${name ? ' mbox-kind0-name' : ''}`,
+          data: {profile: evt.pubkey},
+          href: `/${evt.nip19.npub}`,
+        }, name || userName),
+        ' ',
+        elem('a', {href: `/${evt.nip19.note}`}, elem('time', {dateTime: time.toISOString()}, formatTime(time))),
+      ]),
+      elem('div', {className: 'mbox-content'/* data: isLongContent ? {append: evt.content.slice(280)} : null*/}, content /*[
+        ...content,
+        (firstLink && validatePow(evt)) ? linkPreview(firstLink, evt.id, relay) : null,
+      ]*/),
+      buttons,
+    ]),
+    ...(replies[0] ? [elem('div', {className: 'mbox-replies'}, replyFeed)] : []),
+  ], {
+    className: replies.length ? 'mbox-has-replies' : '',
+    data: {kind: evt.kind, id: evt.id, pubkey: evt.pubkey, relay}
+  });
+};
+
+type EventWithContent = Omit<Event, 'content'> & {
+  content: Children
+}
+
+export const renderUpdateContact = (
+  evt: EventWithContent,
+  relay: string,
+) => {
+  const {img, name, userName} = getMetadata(evt.pubkey);
+  const time = new Date(evt.created_at * 1000);
+  return elemArticle([
+    elem('div', {className: 'mbox-img'}, img),
+    elem('div', {className: 'mbox-body'}, [
+      elem('header', {className: 'mbox-header'}, [
+        elem('span', {
+          className: `mbox-username${name ? ' mbox-kind0-name' : ''}`,
+          data: {profile: evt.pubkey},
+        }, name || userName),
+        ' ',
+        elem('span', {data: {contacts: evt.id}, title: time.toISOString()}, evt.content),
+      ]),
+    ]),
+  ], {
+      className: 'mbox-updated-contact',
+      data: {kind: evt.kind, id: evt.id, pubkey: evt.pubkey, relay}
+    }
+  );
+};
+
+export const renderRecommendServer = (evt: Event, relay: string) => {
+  const {img, userName} = getMetadata(evt.pubkey);
+  const time = new Date(evt.created_at * 1000);
+  const body = elem('div', {className: 'mbox-body', title: dateTime.format(time)}, [
+    elem('header', {className: 'mbox-header'}, [
+      elem('small', {}, [
+        elem('strong', {}, userName)
+      ]),
+    ]),
+    ` recommends server: ${evt.content}`,
+  ]);
+  return elemArticle([
+    elem('div', {className: 'mbox-img'}, [img]), body
+  ], {
+    className: 'mbox-recommend-server',
+    data: {kind: evt.kind, id: evt.id, pubkey: evt.pubkey}
+  });
+};
+
+export const renderEventDetails = (evt: Event, relay: string) => {
+  const {img, name, userName} = getMetadata(evt.pubkey);
+  const npub = nip19.npubEncode(evt.pubkey);
+
+  let content = (![1, 7].includes(evt.kind) && evt.content !== '') ? parseJSON(evt.content) : (evt.content || '<empty>');
+  switch (typeof content) {
+    case 'object':
+      content = JSON.stringify(content, null, 2);
+      break;
+    default:
+      content = `${content}`;
+  }
+  const body = elem('div', {className: 'mbox-body'}, [
+    elem('header', {className: 'mbox-header'}, [
+      elem('a', {
+        className: `mbox-username${name ? ' mbox-kind0-name' : ''}`,
+        data: {profile: evt.pubkey},
+        href: `/${npub}`,
+      }, name || userName),
+    ]),
+    elem('dl', {}, [
+      elem('dt', {}, 'npub'),
+      elem('dd', {}, npub),
+      elem('dt', {}, 'created at'),
+      elem('dd', {}, dateTime.format(evt.created_at * 1000)),
+      elem('dt', {}, 'relay'),
+      elem('dd', {}, relay),
+    ]),
+    elem('h2', {}, 'Event'),
+    elem('dl', {}, [
+      elem('dt', {}, 'id'),
+      elem('dd', {}, evt.id),
+      elem('dt', {}, 'kind'),
+      elem('dd', {}, evt.kind),
+      elem('dt', {}, 'pubkey'),
+      elem('dd', {}, evt.pubkey),
+      elem('dt', {}, 'tags count'),
+      elem('dd', {}, evt.tags.length),
+      elem('dt', {}, 'tags'),
+      elem('dd', {}, JSON.stringify(evt.tags)),
+      elem('dt', {}, 'content'),
+      elem('dd', {}, elem('pre', {}, content as string)),
+    ]),
+  ]);
+  return elemArticle([
+    elem('a', {className: 'mbox-img', href: `/${npub}`, tabIndex: -1}, img),
+    body,
+  ], {
+    className: 'mbox-plain-event',
+    data: {kind: evt.kind, id: evt.id, pubkey: evt.pubkey}
+  });
+};
+
+export const createContact = (pubkey: string) => {
+  const {about: aboutContent, img, name, userName} = getMetadata(pubkey);
+  const npub = nip19.npubEncode(pubkey);
+  const view = getViewOptions();
+  if (view.type !== 'contacts') {
+    return null;
+  }
+  const isMe = config.pubkey === pubkey;
+  const isCurrentUser = view.id === pubkey;
+  const hasContact = isFollowing(pubkey);
+  const followStatus = elem('small');
+  const followBtn = elem('button', {
+      className: hasContact ? 'secondary' : 'primary',
+      ...(isMe && {disabled: true}),
+      name: 'follow',
+      data: {id: pubkey}
+    }, hasContact ? (isMe ? 'following' : 'unfollow') : 'follow');
+  const about = elem('div', {className: 'mbox-content'}, aboutContent);
+  setViewElem(`about-${pubkey}`, about);
+  setViewElem(`followStatus-${pubkey}`, followStatus);
+  setViewElem(`followBtn-${pubkey}`, followBtn);
+  return elemArticle([
+    elem('a', {className: 'mbox-img', href: `/${npub}`, tabIndex: -1}, img),
+    elem('div', {className: 'mbox-body'}, [
+      elem('header', {className: 'mbox-header'}, [
+        elem('a', {
+          className: `mbox-username${name ? ' mbox-kind0-name' : ''}`,
+          data: {profile: pubkey},
+          href: `/${npub}`,
+        }, name || userName),
+        (isMe || isCurrentUser)
+          ? elem('small', {}, isMe ? '(your user)' : '(current user)')
+           : null,
+      ]),
+      about,
+    ]),
+    elem('div', {className: 'mbox-cta'}, [followStatus, followBtn]),
+  ], {
+    className: 'mbox-contact',
+    data: {pubkey},
+  });
+};

src/utils/array.ts

@@ -0,0 +1,8 @@
+/**
+ * type-guarded function that tells TypeScript (in strictNullChecks mode) that you're filtering out null/undefined items.
+ * example: array.filter(isNotNull)
+ */
+export const isNotNull = <T>(item: T): item is NonNullable<T> => item != null;
+
+// alternative
+// const const isNotNull = <T>(item: T | null): item is T => item !== null;

src/utils/crypto.ts

@@ -0,0 +1,24 @@
+/**
+ * evaluate the difficulty of hex32 according to nip-13.
+ * @param hex32 a string of 64 chars - 32 bytes in hex representation
+ */
+export const zeroLeadingBitsCount = (hex32: string) => {
+  let count = 0;
+  for (let i = 0; i < 64; i += 2) {
+    const hexbyte = hex32.slice(i, i + 2); // grab next byte
+    if (hexbyte === '00') {
+      count += 8;
+      continue;
+    }
+    // reached non-zero byte; count number of 0 bits in hexbyte
+    const bits = parseInt(hexbyte, 16).toString(2).padStart(8, '0');
+    for (let b = 0; b < 8; b++) {
+      if (bits[b] === '1' ) {
+        break; // reached non-zero bit; stop
+      }
+      count += 1;
+    }
+    break;
+  }
+  return count;
+};

src/utils/dom.ts

@@ -0,0 +1,201 @@
+import {nip19} from 'nostr-tools';
+import {isNotNull} from './array';
+import {isValidURL} from './url';
+
+type DataAttributes = {
+  data: {
+    [key: string]: string | number;
+  },
+} & {
+  dataset: never, // the dataset property itself is readonly
+};
+
+type Attributes<Type> = Partial<Type & DataAttributes>;
+
+export type Children = Array<HTMLElement | string | null> | HTMLElement | string | number | null;
+
+/**
+ * example usage:
+ *
+ *   const props = {className: 'btn', onclick: async (e) => alert('hi')};
+ *   const btn = elem('button', props, ['download']);
+ *   document.body.append(btn);
+ *
+ * @param {string} name
+ * @param {HTMLElement.prototype} props
+ * @param {Array<Node> | string | number} children
+ * @return HTMLElement
+ */
+export const elem = <Name extends keyof HTMLElementTagNameMap>(
+  name: Extract<Name, keyof HTMLElementTagNameMap>,
+  attrs?: Attributes<HTMLElementTagNameMap[Name]>,
+  children?: Children | undefined,
+): HTMLElementTagNameMap[Name] => {
+  const el = document.createElement(name);
+  if (attrs) {
+    const {data, ...props} = attrs;
+    Object.assign(el, props);
+    if (data) {
+      Object.entries(data).forEach(([key, value]) => {
+        el.dataset[key] = value as string;
+      });
+    }
+  }
+  if (children != null) {
+    if (Array.isArray(children)) {
+      el.append(...children.filter(isNotNull));
+    } else {
+      switch (typeof children) {
+        case 'number':
+          el.append(`${children}`);
+          break;
+        case 'string':
+          el.append(children);
+          break;
+        default:
+          if (children instanceof Element) {
+            el.append(children);
+            break;
+          }
+          console.error(`expected element, string or number but got ${typeof children}`, children);
+      }
+    }
+  }
+  return el;
+};
+
+/** freeze global page scrolling */
+export const lockScroll = () => document.body.style.overflow = 'hidden';
+
+/** free global page scrolling */
+export const unlockScroll = () => document.body.style.removeProperty('overflow');
+
+/**
+ * example usage:
+ *
+ * const [content, {firstLink}] = parseTextContent('Hi<br>click https://nostr.ch/');
+ *
+ * @param {string} content
+ * @returns [Array<string | HTMLElement>, {firstLink: href}]
+ */
+export const parseTextContent = (
+  content: string,
+): [
+  Array<string | HTMLAnchorElement | HTMLBRElement>,
+  {firstLink: string | undefined},
+] => {
+  let firstLink: string | undefined;
+  const parsedContent = content
+    .trim()
+    .replaceAll(/\n{3,}/g, '\n\n')
+    .split('\n')
+    .map(line => {
+      const words = line.split(/\s/);
+      return words.map(word => {
+        if (word.match(/^ln(tbs?|bcr?t?)[a-z0-9]+$/g)) {
+          return elem('a', {
+            href: `lightning:${word}`
+          }, `lightning:${word.slice(0, 24)}…`);
+        }
+        if (word.startsWith('nostr:npub') && word.length === 69) {
+          const npub = word.slice(6);
+          const {type, data} = nip19.decode(npub);
+          if (type === 'npub') {
+            return elem('a', {href: `/${npub}`, data: {profile: data}}, data.slice(6, 15))
+          }
+        }
+        const WORD = word.toUpperCase();
+        if (!WORD.match(/^(HTTPS?:\/\/|WWW\.)\S*/)) {
+          return word;
+        }
+        try {
+          if (!WORD.startsWith('HTTP')) {
+            word = 'https://' + word;
+          }
+          const url = new URL(word);
+          if (!isValidURL(url)) {
+            return word;
+          }
+          firstLink = firstLink || url.href;
+          const prettierWithoutSlash = url.pathname === '/';
+          return elem('a', {
+            href: url.href,
+            target: '_blank',
+            rel: 'noopener noreferrer'
+          }, url.href.slice(url.protocol.length + 2, prettierWithoutSlash ? -1 : undefined));
+        } catch (err) {
+          return word;
+        }
+      })
+      .reduce((acc, word) => [...acc, word, ' '], []);
+    })
+    .reduce((acc, words) => [...acc, ...words, elem('br')], []);
+
+  return [
+    parsedContent,
+    {firstLink}
+  ];
+};
+
+/**
+ * creates a small profile image
+ * @param text to pass pubkey
+ * @returns HTMLCanvasElement | null
+ */
+export const elemCanvas = (text: string) => {
+  const canvas = elem('canvas', {
+    height: 80,
+    width: 80,
+    data: {pubkey: text}
+  });
+  const context = canvas.getContext('2d');
+  if (!context) {
+    return null;
+  }
+  const color = `#${text.slice(0, 6)}`;
+  context.fillStyle = color;
+  context.fillRect(0, 0, 80, 80);
+  context.fillStyle = '#202122';
+  context.fillRect(0, 50, 80, 32);
+  context.font = 'bold 18px monospace';
+  if (color === '#000000') {
+    context.fillStyle = '#fff';
+  }
+  context.fillText(text.slice(0, 8), 2, 46);
+  return canvas;
+};
+
+/**
+ * creates a placeholder element that animates the height to 0
+ * @param element to get the initial height from
+ * @returns HTMLDivElement
+ */
+export const elemShrink = (el: HTMLElement) => {
+  const height = el.style.height || el.getBoundingClientRect().height;
+  const shrink = elem('div', {className: 'shrink-out'});
+  shrink.style.height = `${height}px`;
+  shrink.addEventListener('animationend', () => shrink.remove(), {once: true});
+  return shrink;
+};
+
+
+export const updateElemHeight = (
+  el: HTMLInputElement | HTMLTextAreaElement
+) => {
+  el.style.removeProperty('height');
+  if (el.value) {
+    el.style.paddingBottom = '0';
+    el.style.paddingTop = '0';
+    el.style.height = el.scrollHeight + 'px';
+    el.style.removeProperty('padding-bottom');
+    el.style.removeProperty('padding-top');
+  }
+};
+
+export const elemArticle = (
+  content: Array<HTMLElement>,
+  attrs: Attributes<HTMLElementTagNameMap['div']> = {},
+) => {
+  const className = attrs.className ? `mbox ${attrs.className}` : 'mbox';
+  return elem('article', {...attrs, className}, content);
+};

src/utils/time.ts

@@ -0,0 +1,94 @@
+/**
+ * throttle and debounce given function in regular time interval,
+ * but with the difference that the last call will be debounced and therefore never missed.
+ * @param {*} function to throttle and debounce
+ * @param {*} time desired interval to execute function
+ * @returns callback
+ */
+export const bounce = (
+  fn: () => void,
+  time: number,
+) => {
+  let throttle: number | undefined;
+  let debounce: number | undefined;
+  return (/*...args*/) => {
+    if (throttle) {
+    	clearTimeout(debounce);
+    	debounce = setTimeout(() => fn(/*...args*/), time);
+      return;
+    }
+    fn(/*...args*/);
+    throttle = setTimeout(() => {
+      clearTimeout(throttle);
+    }, time);
+  };
+};
+
+/**
+ * Intl.DateTimeFormat object
+ *
+ * example:
+ *
+ *   console.log(dateTime.format(new Date()));
+ */
+export const dateTime = new Intl.DateTimeFormat(navigator.language /* navigator.language */, {
+  dateStyle: 'medium',
+  timeStyle: 'short',
+});
+
+/**
+ * format time relative to now, such as 5min ago
+ *
+ * @param {Date} time
+ * @param {string} locale
+ * @returns string
+ *
+ * example:
+ *
+ *   console.log(timeAgo(new Date(Date.now() - 10000)));
+ *
+ */
+const timeAgo = (
+  time: Date,
+  locale: string = 'en',
+) => {
+  const relativeTime = new Intl.RelativeTimeFormat(locale, {
+    numeric: 'auto',
+    style: 'long',
+  });
+  const timeSince = (Date.now() - time.getTime()) * 0.001;
+  const minutes = Math.floor(timeSince / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+  const months = Math.floor(days / 30);
+  const years = Math.floor(months / 12);
+
+  if (years > 0) {
+    return relativeTime.format(0 - years, 'year');
+  } else if (months > 0) {
+    return relativeTime.format(0 - months, 'month');
+  } else if (days > 0) {
+    return relativeTime.format(0 - days, 'day');
+  } else if (hours > 0) {
+    return relativeTime.format(0 - hours, 'hour');
+  } else if (minutes > 0) {
+    return relativeTime.format(0 - minutes, 'minute');
+  } else {
+    return relativeTime.format(Math.round(0 - timeSince), 'second');
+  }
+};
+
+/**
+ * formatTime shows relative time if it is less than 24h else absolute datetime
+ *
+ * @param {time} date object to format
+ * @return string
+ */
+export const formatTime = (time: Date) => {
+  const yesterday = new Date(Date.now() - (24 * 60 * 60 * 1000));
+  if (time > yesterday) {
+    return timeAgo(time);
+  } else {
+    return dateTime.format(time);
+  };
+};

src/utils/url.ts

@@ -0,0 +1,65 @@
+export const getHost = (url: string) => {
+  try {
+    return new URL(url).host;
+  } catch(err) {
+    return err;
+  }
+};
+
+export const isHttpUrl = (url: string) => {
+  try {
+    return ['http:', 'https:'].includes(new URL(url).protocol);
+  } catch (err) {
+    return false;
+  }
+};
+
+export const isWssUrl = (url: string) => {
+  try {
+    return 'wss:' === new URL(url).protocol;
+  } catch (err) {
+    return false;
+  }
+};
+
+export const getNoxyUrl = (
+  type: 'data' | 'meta',
+  url: string,
+  id: string,
+  relay: string,
+) => {
+  if (!isHttpUrl(url)) {
+    return false;
+  }
+  const link = new URL(`https://noxy.nostr.ch/${type}`);
+  link.searchParams.set('id', id);
+  link.searchParams.set('relay', relay);
+  link.searchParams.set('url', url);
+  return link;
+};
+
+export const isValidURL = (url: URL) => {
+  if (!['http:', 'https:'].includes(url.protocol)) {
+    return false;
+  }
+  if (!['', '443', '80'].includes(url.port)) {
+    return false;
+  }
+  if (url.hostname === 'localhost') {
+    return false;
+  }
+  const lastDot = url.hostname.lastIndexOf('.');
+  if (lastDot < 1) {
+    return false;
+  }
+  if (url.hostname.slice(lastDot) === '.local') {
+    return false;
+  }
+  if (url.hostname.slice(lastDot + 1).match(/^[\d]+$/)) { // there should be no tld with numbers, possible ipv4
+    return false;
+  }
+  if (url.hostname.includes(':')) { // possibly an ipv6 addr; certainly an invalid hostname
+    return false;
+  }
+  return true;
+};

src/view.ts

@@ -0,0 +1,92 @@
+import {DOMMap, renderViewTemplate, ViewTemplateOptions} from './template';
+
+type Container = {
+  id: string;
+  options: ViewTemplateOptions,
+  view: HTMLElement;
+  content: HTMLDivElement;
+  dom: DOMMap;
+};
+
+const containers: Array<Container> = [];
+
+let activeContainerIndex = -1;
+
+export const getViewContent = () => containers[activeContainerIndex]?.content;
+
+/**
+ * clears current view so it is empty and ready to be re-used.
+ * only clears the current view, not all views
+ */
+export const clearView = () => {
+  const domMap = containers[activeContainerIndex]?.dom;
+  Object.keys(domMap).forEach(eventId => delete domMap[eventId]);
+  getViewContent().replaceChildren();
+};
+
+/**
+ * get elmenet stored in internal DOMMap of the current view
+ * alternative to internal map in view.dom, is to use id="" attribute, however same event could be shown in different views so event.id is not unique.
+ */
+export const getViewElem = (id: string) => {
+  return containers[activeContainerIndex]?.dom[id];
+};
+
+/**
+ * store element in internal view.dom map using id as key
+ */
+export const setViewElem = (id: string, node: HTMLElement) => {
+  const container = containers[activeContainerIndex];
+  if (container) {
+    container.dom[id] = node;
+  }
+  return node;
+};
+
+const mainContainer = document.querySelector('main') as HTMLElement;
+
+const createContainer = (
+  route: string,
+  options: ViewTemplateOptions,
+) => {
+  const {content, dom, view} = renderViewTemplate(options);
+  const container = {id: route, options, view, content, dom};
+  mainContainer.append(view);
+  containers.push(container);
+  return container;
+};
+
+type GetViewOptions = () => ViewTemplateOptions;
+
+/**
+ * get options for current view
+ * @returns {id: 'home' | 'feed' | 'profile' | 'note' | 'contacts' | 'event', id?: string}
+*/
+export const getViewOptions: GetViewOptions = () => containers[activeContainerIndex]?.options || {type: 'feed'};
+
+/**
+ * changes the current view and transitions to the view specified by route
+ * example:
+ *    view('/npub0293ji3gojaed32r4r412', {type: 'feed})
+ */
+export const view = (
+  route: string,
+  options: ViewTemplateOptions,
+) => {
+  const active = containers[activeContainerIndex];
+  const nextContainer = containers.find(c => c.id === route) || createContainer(route, options);
+  const nextContainerIndex = containers.indexOf(nextContainer);
+  if (nextContainerIndex === activeContainerIndex) {
+    return;
+  }
+  if (active) {
+    nextContainer.view.classList.add('view-next');
+  }
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      nextContainer.view.classList.remove('view-next', 'view-prev');
+    });
+    active?.view.classList.add(nextContainerIndex < activeContainerIndex ? 'view-next' : 'view-prev');
+    activeContainerIndex = nextContainerIndex;
+  });
+};

src/worker.js

@@ -0,0 +1,42 @@
+import {getEventHash} from 'nostr-tools';
+import {zeroLeadingBitsCount} from './utils/crypto';
+
+const mine = (event, difficulty, timeout = 5) => {
+  const max = 256; // arbitrary
+  if (!Number.isInteger(difficulty) || difficulty < 0 || difficulty > max) {
+    throw new Error(`difficulty must be an integer between 0 and ${max}`);
+  }
+  // continue with mining
+  let n = BigInt(0);
+  event.tags.unshift(['nonce', n.toString(), `${difficulty}`]);
+
+  const until = Math.floor(Date.now() * 0.001) + timeout;
+  console.time('pow');
+  while (true) {
+    const now = Math.floor(Date.now() * 0.001);
+    if (timeout !== 0 && (now > until)) {
+      console.timeEnd('pow');
+      throw 'timeout';
+    }
+    if (now !== event.created_at) {
+      event.created_at = now;
+      // n = BigInt(0); // could reset nonce as we have a new timestamp
+    }
+    event.tags[0][1] = (++n).toString();
+    const id = getEventHash(event);
+    if (zeroLeadingBitsCount(id) === difficulty) {
+      console.timeEnd('pow');
+      return {id, ...event};
+    }
+  }
+};
+
+addEventListener('message', (msg) => {
+  const {difficulty, event, timeout} = msg.data;
+  try {
+    const minedEvent = mine(event, difficulty, timeout);
+    postMessage({event: minedEvent});
+  } catch (err) {
+    postMessage({error: err});
+  }
+});

src/write.ts

@@ -0,0 +1,154 @@
+import {signEvent} from 'nostr-tools';
+import {elemShrink, updateElemHeight} from './utils/dom';
+import {powEvent} from './system';
+import {config} from './settings';
+import {publish} from './relays';
+
+// form used to write and publish textnotes for replies and new notes
+const writeForm = document.querySelector('#writeForm') as HTMLFormElement;
+const writeInput = document.querySelector('textarea[name="message"]') as HTMLTextAreaElement;
+
+// overlay for writing new text notes
+const publishView = document.querySelector('#newNote') as HTMLElement;
+
+const openWriteView = () => {
+  publishView.append(writeForm);
+  if (writeInput.value.trimRight()) {
+    writeInput.style.removeProperty('height');
+  }
+  requestAnimationFrame(() => {
+    updateElemHeight(writeInput);
+    writeInput.focus();
+  });
+  publishView.removeAttribute('hidden');
+};
+
+export const closePublishView = () => publishView.hidden = true;
+
+export const togglePublishView = () => {
+  if (publishView.hidden) {
+    localStorage.removeItem('reply_to'); // should it forget old replyto context?
+    openWriteView();
+  } else {
+    publishView.hidden = true;
+  }
+};
+
+const appendReplyForm = (el: HTMLElement) => {
+  writeForm.before(elemShrink(writeInput));
+  writeInput.blur();
+  writeInput.style.removeProperty('height');
+  el.after(writeForm);
+  if (writeInput.value && !writeInput.value.trimRight()) {
+    writeInput.value = '';
+  } else {
+    requestAnimationFrame(() => updateElemHeight(writeInput));
+  }
+  requestAnimationFrame(() => writeInput.focus());
+};
+
+const closeWriteInput = () => writeInput.blur();
+
+export const openWriteInput = (
+  button: HTMLElement,
+  id: string,
+) => {
+  appendReplyForm(button.closest('.buttons') as HTMLElement);
+  localStorage.setItem('reply_to', id);
+};
+
+export const toggleWriteInput = (
+  button: HTMLElement,
+  id: string,
+) => {
+  if (id && localStorage.getItem('reply_to') === id) {
+    closeWriteInput();
+    return;
+  }
+  appendReplyForm(button.closest('.buttons') as HTMLElement);
+  localStorage.setItem('reply_to', id);
+};
+
+// const updateWriteInputHeight = () => updateElemHeight(writeInput);
+
+writeInput.addEventListener('focusout', () => {
+  const reply_to = localStorage.getItem('reply_to');
+  if (reply_to && writeInput.value === '') {
+    writeInput.addEventListener('transitionend', (event) => {
+      if (!reply_to || reply_to === localStorage.getItem('reply_to') && !writeInput.style.height) { // should prob use some class or data-attr instead of relying on height
+        writeForm.after(elemShrink(writeInput));
+        writeForm.remove();
+        localStorage.removeItem('reply_to');
+      }
+    }, {once: true});
+  }
+});
+
+// document.body.addEventListener('keyup', (e) => {
+//   if (e.key === 'Escape') {
+//     hideNewMessage(true);
+//   }
+// });
+
+const sendStatus = document.querySelector('#sendstatus') as HTMLElement;
+const publishBtn = document.querySelector('#publish') as HTMLButtonElement;
+const onSendError = (err: Error) => sendStatus.textContent = err.message;
+
+writeForm.addEventListener('submit', async (e) => {
+  e.preventDefault();
+  const privatekey = localStorage.getItem('private_key');
+  if (!config.pubkey || !privatekey) {
+    return onSendError(new Error('no pubkey/privatekey'));
+  }
+  const content = writeInput.value.trimRight();
+  if (!content) {
+    return onSendError(new Error('message is empty'));
+  }
+  const replyTo = localStorage.getItem('reply_to');
+  const close = () => {
+    sendStatus.textContent = '';
+    writeInput.value = '';
+    writeInput.style.removeProperty('height');
+    publishBtn.disabled = true;
+    if (replyTo) {
+      localStorage.removeItem('reply_to');
+      publishView.append(writeForm);
+    }
+    publishView.hidden = true;
+  };
+  const tags = replyTo ? [['e', replyTo]] : []; // , eventRelayMap[replyTo][0]
+  const newEvent = await powEvent({
+    kind: 1,
+    content,
+    pubkey: config.pubkey,
+    tags,
+    created_at: Math.floor(Date.now() * 0.001),
+  }, {
+    difficulty: config.difficulty,
+    statusElem: sendStatus,
+    timeout: config.timeout,
+  }).catch(console.warn);
+  if (!newEvent) {
+    close();
+    return;
+  }
+  const sig = signEvent(newEvent, privatekey);
+  // TODO validateEvent
+  if (sig) {
+    sendStatus.textContent = 'publishing…';
+    publish({...newEvent, sig}, (relay, error) => {
+      if (error) {
+        return console.log(error, relay);
+      }
+      console.info(`publish request sent to ${relay}`);
+      close();
+    });
+  }
+});
+
+writeInput.addEventListener('input', () => {
+  publishBtn.disabled = !writeInput.value.trimRight();
+  updateElemHeight(writeInput);
+});
+
+writeInput.addEventListener('blur', () => sendStatus.textContent = '');

tools/ci-make-release-targz.sh

@@ -0,0 +1,16 @@
+#!/bin/sh
+set -e
+
+# assuming the script is run from the repo root dir
+cd dist
+
+# create build metadata
+truncate -s0 build.txt
+echo "remote: $CI_REPO_REMOTE" >> build.txt
+echo "commit: $CI_COMMIT_SHA" >> build.txt
+echo "tag: $CI_COMMIT_TAG" >> build.txt
+echo "build id: $CI_BUILD_NUMBER" >> build.txt
+cat build.txt
+
+# make the release archive in the repo root dir
+tar -czvf ../nostrweb.tar.gz *

tools/ci-rsync-release.sh

@@ -0,0 +1,6 @@
+#!/bin/sh
+set -e
+printenv RELEASER_SSH_KEY > .sshkey
+chmod 0600 .sshkey
+sshcmd='ssh -i .sshkey -o UserKnownHostsFile=/dev/null -o StrictHostKeyChecking=no'
+exec rsync -vrz -e "$sshcmd" dist/* nostrreleaser@nostr.ch:/var/www/nostr/

tools/esbuild-helper.js

@@ -0,0 +1,47 @@
+import { readFile } from 'node:fs/promises';
+import { execFile } from 'node:child_process';
+import { promisify } from 'node:util';
+const execFileAsync = promisify(execFile);
+
+/**
+ * replaceOnCopyPlugin is an esbuild plugin. it loads files as utf-8 text
+ * and replaces certain placeholders with their values computed on plugin setup.
+ * the fileFilter is a regexp matching names or extensions of the files to process,
+ * passed to esbuild's onLoad as is.
+ *
+ * the following placeholders are replaced:
+ *
+ * #[PKG_VERSION]# -> npm package version
+ * #[GIT_COMMIT]#  -> short git commit at current HEAD
+ */
+export function replaceOnCopyPlugin(fileFilter) {
+  return {
+    name: 'replace-on-copy',
+    setup(build) {
+      const appVersion = sanitizedStr(process.env.npm_package_version);
+      const gitHeadCommit = gitRevParse('HEAD');
+
+      build.onLoad({filter: fileFilter}, async (args) => {
+        const gitCommitHash = await gitHeadCommit;
+        let text = await readFile(args.path, 'utf8');
+        text = text.replaceAll('#[PKG_VERSION]#', appVersion);
+        text = text.replaceAll('#[GIT_COMMIT]#', gitCommitHash);
+        return {
+          contents: text,
+          loader: 'copy',
+        }
+      });
+    }
+  }
+}
+
+async function gitRevParse(rev) {
+  rev = sanitizedStr(rev);
+  const { stdout } = await execFileAsync('git', ['rev-parse', '--short', rev]);
+  return sanitizedStr(stdout.trim());
+}
+
+function sanitizedStr(s) {
+  const notOk = /[^0-9a-z \.@-]/ig;
+  return s.replaceAll(notOk, '-');
+}

tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "alwaysStrict": true,
+    "moduleResolution": "node",
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "strictBindCallApply": true,
+    "strictFunctionTypes": false,
+    "strictNullChecks": true,
+    "target": "es2022"
+  },
+  "exclude": [
+    "dist",
+    "esbuildconf.js",
+    "node_modules",
+    "**/*.test.ts"
+  ]
+}