feat: replaceable query filters

fix: debug print for deletes

.dockerignore

@@ -0,0 +1,10 @@
+**/node_modules
+**/.pnp.*
+**/.yarn/*
+!**/.yarn/patches
+!**/.yarn/plugins
+!**/.yarn/releases
+!**/.yarn/sdks
+!**/.yarn/versions
+**/.idea
+**/target

.drone.yml

@@ -17,17 +17,19 @@ steps:
     commands:
       - git fetch --tags
   - name: Build site
-    image: node:current-bullseye
+    image: node:current
     volumes:
       - name: cache
         path: /cache
     environment:
       YARN_CACHE_FOLDER: /cache/.yarn-docker
+      NODE_CONFIG_ENV: default
     commands:
+      - apt update && apt install -y git
       - yarn install
       - yarn build
   - name: build docker image
-    image: r.j3ss.co/img
+    image: docker
     privileged: true
     volumes:
       - name: cache
@@ -36,9 +38,11 @@ steps:
       TOKEN:
         from_secret: docker_hub
     commands:
-      - img login -u voidic -p $TOKEN
-      - img build -t voidic/snort:latest --platform linux/amd64,linux/arm64 -f Dockerfile.prebuilt .
-      - img push voidic/snort:latest
+      - dockerd &
+      - docker login -u voidic -p $TOKEN
+      - docker buildx create --name mybuilder --bootstrap --use
+      - docker buildx build -t voidic/snort:latest --platform linux/amd64,linux/arm64 --push -f Dockerfile.prebuilt .
+      - kill $(cat /var/run/docker.pid)
 volumes:
   - name: cache
     claim:
@@ -53,12 +57,13 @@ metadata:
   namespace: git
 steps:
   - name: Test/Lint
-    image: node:current-bullseye
+    image: node:current
     volumes:
       - name: cache
         path: /cache
     environment:
       YARN_CACHE_FOLDER: /cache/.yarn-test
+      NODE_CONFIG_ENV: default
     commands:
       - yarn install
       - yarn build
@@ -84,12 +89,13 @@ metadata:
   namespace: git
 steps:
   - name: Push/Pull translations
-    image: node:current-bullseye
+    image: node:current
     volumes:
       - name: cache
         path: /cache
     environment:
       YARN_CACHE_FOLDER: /cache/.yarn-translations
+      NODE_CONFIG_ENV: default
       TOKEN:
         from_secret: gitea
       CTOKEN:
@@ -129,17 +135,19 @@ steps:
     commands:
       - git fetch --tags
   - name: Build site
-    image: node:current-bullseye
+    image: node:current
     volumes:
       - name: cache
         path: /cache
     environment:
-      YARN_CACHE_FOLDER: /cache/.yarn-docker-release
+      YARN_CACHE_FOLDER: /cache/.yarn-docker-
+      NODE_CONFIG_ENV: default
     commands:
+      - apt update && apt install -y git
       - yarn install
       - yarn build
   - name: build docker image
-    image: r.j3ss.co/img
+    image: docker
     privileged: true
     volumes:
       - name: cache
@@ -148,9 +156,11 @@ steps:
       TOKEN:
         from_secret: docker_hub
     commands:
-      - img login -u voidic -p $TOKEN
-      - img build -t voidic/snort:$DRONE_TAG --platform linux/amd64,linux/arm64 -f Dockerfile.prebuilt .
-      - img push voidic/snort:$DRONE_TAG
+      - dockerd &
+      - docker login -u voidic -p $TOKEN
+      - docker buildx create --name mybuilder --bootstrap --use
+      - docker buildx build -t voidic/snort:$DRONE_TAG --platform linux/amd64,linux/arm64 --push -f Dockerfile.prebuilt .
+      - kill $(cat /var/run/docker.pid)
 volumes:
   - name: cache
     claim:

.github/workflows/release.yml

@@ -8,42 +8,6 @@ env:
   DOCKER_CLI_EXPERIMENTAL: enabled
   TAG_FMT: "^refs/tags/(((.?[0-9]+){3,4}))$"
 jobs:
-  tauri_release:
-    permissions:
-      contents: write
-    strategy:
-      fail-fast: false
-      matrix:
-        platform: [macos-latest, ubuntu-20.04, windows-latest]
-    runs-on: ${{ matrix.platform }}
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v3
-      - name: Install dependencies (ubuntu only)
-        if: matrix.platform == 'ubuntu-20.04'
-        run: |
-          sudo apt-get update
-          sudo apt-get install -y libgtk-3-dev libwebkit2gtk-4.0-dev libayatana-appindicator3-dev librsvg2-dev
-      - name: Rust setup
-        uses: dtolnay/rust-toolchain@stable
-      - name: Rust cache
-        uses: swatinem/rust-cache@v2
-        with:
-          workspaces: "./src-tauri -> target"
-
-      - name: Sync node version and setup cache
-        uses: actions/setup-node@v3
-        with:
-          node-version: "16"
-          cache: "yarn"
-      - name: Install frontend dependencies
-        run: yarn install
-      - name: Build the app
-        uses: tauri-apps/tauri-action@v0
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        with:
-          tagName: ${{ github.ref_name }}
   app:
     runs-on: ubuntu-latest
     permissions:
@@ -92,7 +56,8 @@ jobs:
           alias: ${{ secrets.KEY_ALIAS }}
           keyStorePassword: ${{ secrets.KEY_STORE_PASSWORD }}
           keyPassword: ${{ secrets.KEY_PASSWORD }}
-
+        env:
+          BUILD_TOOLS_VERSION: "33.0.0"
       - name: Sign APK
         uses: r0adkll/sign-android-release@v1
         with:
@@ -101,6 +66,8 @@ jobs:
           alias: ${{ secrets.KEY_ALIAS }}
           keyStorePassword: ${{ secrets.KEY_STORE_PASSWORD }}
           keyPassword: ${{ secrets.KEY_PASSWORD }}
+        env:
+          BUILD_TOOLS_VERSION: "33.0.0"
       - name: Rename files
         run: |-
           mkdir -p snort_android/app/release

.gitignore

@@ -11,4 +11,6 @@ dist/
 *.tgz
 *.log
 .DS_Store
-.pnp*
+.pnp*
+docs/
+.wrangler/

.yarnrc.yml

@@ -1 +1,9 @@
-yarnPath: .yarn/releases/yarn-3.6.3.cjs
+compressionLevel: mixed
+
+enableGlobalCache: false
+
+npmScopes:
+  here:
+    npmRegistryServer: "https://repo.platform.here.com/artifactory/api/npm/maps-api-for-javascript/"
+
+yarnPath: .yarn/releases/yarn-4.1.1.cjs

Dockerfile

@@ -1,12 +1,12 @@
-FROM node:19 as build
-WORKDIR /app
-
-COPY package.json yarn.lock .yarnrc.yml .
-COPY .yarn .yarn
-COPY packages packages
-RUN yarn --network-timeout 1000000
-RUN yarn build
+FROM node:current as build
+WORKDIR /src
+RUN apt update \
+    && apt install -y --no-install-recommends git \
+    && git clone --single-branch -b main https://git.v0l.io/Kieran/snort \
+    && cd snort \
+    && yarn --network-timeout 1000000 \
+    && yarn build
 
 FROM nginxinc/nginx-unprivileged:mainline-alpine
 COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
-COPY --from=build /app/packages/app/build /usr/share/nginx/html
+COPY --from=build /src/snort/packages/app/build /usr/share/nginx/html

README.md

@@ -65,6 +65,19 @@ To build the application and system packages, use
 $ yarn build
 ```
 
+Tauri desktop application:
+
+```
+# install dependencies
+yarn
+
+# develop
+yarn tauri dev
+
+# build
+yarn tauri build
+```
+
 ### Translations
 
 [![Crowdin](https://badges.crowdin.net/snort/localized.svg)](https://crowdin.com/project/snort)

dev-docs/query.md

@@ -0,0 +1,30 @@
+# Reactions
+
+## Problem
+
+When presented with a feed of notes, either a timeline (social) or a live chat log (live stream chat)
+how do you fetch the reactions to such notes and maintain realtime updates.
+
+## Current solution
+
+When a list of reactions is requested we use the expensive `buildDiff` operation to compute a
+list of new (added) filters and send them to relays.
+
+Usually if `leaveOpen` is specified (as it should be for realtime updates) this new trace will be sent
+as a separate subscription causing exhasution.
+
+Another side effect of this this approach is that over time (especially in live chat) the number of filters that get passed to `buildDiff` increases and so the computation time takes longer and causes jank (https://git.v0l.io/Kieran/zap.stream/issues/126).
+
+There is also the question of updating the "root" query, since this is not updated, each independant query trace receives its own set of updates which is a problem of its own.
+
+## Proposed solution (Live chat)
+
+The ideal solution is to update only the "root" query as new filters are detected along with appending the current timestamp as the `since` value.
+
+In this way only 1 subscription is maintained, the "root" query trace.
+
+Each time a new set of filters is created from `buildDiff` we push the same `REQ` again with the new filters which **should** result in no new results from the relays as we expect there to be none `since` the current time is the time of the latest message.
+
+## Proposed solution (Timeline)
+
+TBD

docker/nginx.conf

@@ -3,6 +3,9 @@ server {
     server_name _;
     root /usr/share/nginx/html;
     index index.html;
+    add_header Content-Security-Policy "default-src 'self'; manifest-src *; child-src 'none'; worker-src 'self'; frame-src youtube.com www.youtube.com https://platform.twitter.com https://embed.tidal.com https://w.soundcloud.com https://www.mixcloud.com https://open.spotify.com https://player.twitch.tv https://embed.music.apple.com https://embed.wavlake.com https://challenges.cloudflare.com; style-src 'self' 'unsafe-inline'; connect-src *; img-src * data: blob:; font-src 'self'; media-src * blob:; script-src 'self' 'wasm-unsafe-eval' https://platform.twitter.com https://embed.tidal.com https://challenges.cloudflare.com";
+    add_header Cross-Origin-Opener-Policy same-origin;
+    add_header Cross-Origin-Embedder-Policy require-corp;
 
     location / {
         try_files $uri $uri/ /index.html =404;

functions/_middleware.ts

@@ -0,0 +1,50 @@
+interface Env {}
+
+const HOST = "snort.social";
+
+export const onRequest: PagesFunction<Env> = async context => {
+  const u = new URL(context.request.url);
+
+  const prefixes = ["npub1", "nprofile1", "naddr1", "nevent1", "note1"];
+  const isEntityPath = prefixes.some(
+    a => u.pathname.startsWith(`/${a}`) || u.pathname.startsWith(`/e/${a}`) || u.pathname.startsWith(`/p/${a}`),
+  );
+  const nostrAddress = u.pathname.match(/^\/([a-zA-Z0-9_]+)$/i);
+  const next = await context.next();
+  if (u.pathname != "/" && (isEntityPath || nostrAddress)) {
+    //console.log("Handeling path: ", u.pathname, isEntityPath, nostrAddress[1]);
+    try {
+      let id = u.pathname.split("/").at(-1);
+      if (!isEntityPath && nostrAddress) {
+        id = `${id}@${HOST}`;
+      }
+      const fetchApi = `https://nostr.api.v0l.io/api/v1/opengraph/${id}?canonical=${encodeURIComponent(
+        `https://${HOST}/%s`,
+      )}`;
+      console.log("Fetching tags from: ", fetchApi);
+      const rsp = await fetch(fetchApi, {
+        method: "POST",
+        body: await next.arrayBuffer(),
+        headers: {
+          "user-agent": `SnortFunctions/1.0 (https://${HOST})`,
+          "content-type": "text/html",
+          accept: "text/html",
+        },
+      });
+      if (rsp.ok) {
+        const body = await rsp.text();
+        if (body.length > 0) {
+          return new Response(body, {
+            headers: {
+              ...Object.fromEntries(rsp.headers.entries()),
+              "cache-control": "public, max-age=60",
+            },
+          });
+        }
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  }
+  return next;
+};

functions/e/[id].ts

@@ -1,30 +0,0 @@
-interface Env {}
-
-export const onRequest: PagesFunction<Env> = async context => {
-  const id = context.params.id as string;
-
-  const next = await context.next();
-  try {
-    const rsp = await fetch(`https://api.snort.social/api/v1/og/tag/e/${id}`, {
-      method: "POST",
-      body: await next.arrayBuffer(),
-      headers: {
-        "user-agent": "Snort-Functions/1.0 (https://snort.social)",
-        "content-type": "text/plain",
-      },
-    });
-    if (rsp.ok) {
-      const body = await rsp.text();
-      if (body.length > 0) {
-        return new Response(body, {
-          headers: {
-            "content-type": "text/html",
-          },
-        });
-      }
-    }
-  } catch {
-    // ignore
-  }
-  return next;
-};

functions/p/[id].ts

@@ -1,30 +0,0 @@
-interface Env {}
-
-export const onRequest: PagesFunction<Env> = async context => {
-  const id = context.params.id as string;
-
-  const next = await context.next();
-  try {
-    const rsp = await fetch(`https://api.snort.social/api/v1/og/tag/p/${id}`, {
-      method: "POST",
-      body: await next.arrayBuffer(),
-      headers: {
-        "user-agent": "Snort-Functions/1.0 (https://snort.social)",
-        "content-type": "text/plain",
-      },
-    });
-    if (rsp.ok) {
-      const body = await rsp.text();
-      if (body.length > 0) {
-        return new Response(body, {
-          headers: {
-            "content-type": "text/html",
-          },
-        });
-      }
-    }
-  } catch {
-    // ignore
-  }
-  return next;
-};

maintainers.yaml

@@ -0,0 +1,8 @@
+maintainers:
+  - npub1g53mukxnjkcmr94fhryzkqutdz2ukq4ks0gvy5af25rgmwsl4ngq43drvk
+  - npub1v0lxxxxutpvrelsksy8cdhgfux9l6a42hsj2qzquu2zk7vc9qnkszrqj49
+relays:
+  - wss://relay.snort.social/
+  - wss://pyramid.fiatjaf.com/
+  - wss://nos.lol/
+  - ws://skzzn6cimfdv5e2phjc4yr5v7ikbxtn5f7dkwn5c7v47tduzlbosqmqd.onion/

package.json

@@ -4,24 +4,29 @@
     "packages/*"
   ],
   "scripts": {
-    "build": "yarn workspace @snort/shared build && yarn workspace @snort/system build && yarn workspace @snort/system-web build && yarn workspace @snort/system-react build && yarn workspace @snort/app build",
+    "build": "yarn workspace @snort/shared build && yarn workspace @snort/worker-relay build && yarn workspace @snort/system build && yarn workspace @snort/system-web build && yarn workspace @snort/system-react build && yarn workspace @snort/wallet build && yarn workspace @snort/app build",
     "start": "yarn build && yarn workspace @snort/app start",
     "test": "yarn build && yarn workspace @snort/app test && yarn workspace @snort/system test",
     "pre:commit": "yarn workspace @snort/app intl-extract && yarn workspace @snort/app intl-compile && yarn prettier --write .",
-    "push-prod": "git checkout snort-prod && git merge --ff-only main && git push && git checkout main"
+    "push-prod": "git switch snort-prod && git merge --ff-only main && git push && git checkout main",
+    "docs": "typedoc --entryPointStrategy packages ./packages/* --exclude ./packages/app --exclude ./packages/webrtc-server --name snort.social"
   },
   "prettier": {
     "printWidth": 120,
     "bracketSameLine": true,
     "arrowParens": "avoid",
-    "trailingComma": "all"
+    "trailingComma": "all",
+    "endOfLine": "lf"
   },
-  "packageManager": "yarn@3.6.3",
+  "packageManager": "yarn@4.1.1",
   "dependencies": {
     "@cloudflare/workers-types": "^4.20230307.0",
-    "@tauri-apps/cli": "^1.2.3",
     "eslint": "^8.48.0",
     "prettier": "^3.0.3",
     "typescript": "^5.2.2"
+  },
+  "devDependencies": {
+    "@tauri-apps/cli": "^1.5.14",
+    "typedoc": "^0.25.7"
   }
 }

packages/app/.eslintrc.cjs

@@ -1,21 +0,0 @@
-module.exports = {
-  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
-  parser: "@typescript-eslint/parser",
-  plugins: ["@typescript-eslint", "formatjs"],
-  rules: {
-    "formatjs/enforce-id": [
-      "error",
-      {
-        idInterpolationPattern: "[sha512:contenthash:base64:6]",
-      },
-    ],
-  },
-  root: true,
-  ignorePatterns: ["build/", "*.test.ts", "*.js"],
-  env: {
-    browser: true,
-    worker: true,
-    commonjs: true,
-    node: false,
-  },
-};

packages/app/.eslintrc.js

@@ -0,0 +1,31 @@
+/* eslint-disable import/no-anonymous-default-export */
+module.exports = {
+  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:react/recommended"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["@typescript-eslint", "formatjs", "react-refresh", "simple-import-sort"],
+  rules: {
+    "react/react-in-jsx-scope": "off",
+    "react-hooks/exhaustive-deps": "off",
+    "react-refresh/only-export-components": "error",
+    "simple-import-sort/imports": "error",
+    "simple-import-sort/exports": "error",
+    "@typescript-eslint/no-unused-vars": "error",
+    "max-lines": ["warn", { max: 300, skipBlankLines: true, skipComments: true }],
+  },
+  overrides: [
+    {
+      files: ["*.tsx"],
+      rules: {
+        "max-lines": ["warn", { max: 200, skipBlankLines: true, skipComments: true }],
+      },
+    },
+  ],
+  root: true,
+  ignorePatterns: ["build/", "*.test.ts", "*.js"],
+  env: {
+    browser: true,
+    worker: true,
+    commonjs: true,
+    node: false,
+  },
+};

packages/app/.gitignore

@@ -25,4 +25,5 @@ yarn-error.log*
 .idea
 
 dist/
-dev-dist/
+dev-dist/
+.wrangler/

packages/app/.yarn/.cache/webpack-dev-server/server.pem

@@ -1,47 +0,0 @@
------BEGIN RSA PRIVATE KEY-----
-MIIEowIBAAKCAQEApyUVkYJVwV7XgluUnllgCtrsdq1ctRICm5gQy8nd+aEdDQjA
-CKPOWh5miLl/fAQVZGZy/JxavzXulwXo8238E6n6bmNB1Us2nuw7a0aW4iUSQ1Pt
-P4ZhPpcrqeqMf+hp7iBW0nAHFy/aa2UR84d7tBmSk5J3NNrfBsZdUex/7FqF1EVv
-mEzlc8kepU9lRXWFQDtZCllEZ1kY3SBJPm10h0g9saI8YIVRxUuNII5GHDYAE3hb
-EmoY6fuSEoiXA8u0Yt9soBQxgxIhQVKSRPPoIPjGFOxsGHY6h8R9nx1kxhHKFRuV
-nwsn0uWl/7yjhwyHanogJu73/WgelPcgP/hMDQIDAQABAoIBAAru+xU0oGVwzcoi
-MXuWPxkWrwcoWfsiPXduIBMklleg+WSD4QPvqyzr9isVb0huf/O8W+M4WxtM7NmG
-MnHSDP5ATThxV7obHGyS6WQgDvimEibDU66nHK9adim8RQqM6nkANo23dE9I+xGx
-X9Y9U5M5ZQQwPYoAkzw/N5WHUerk+cSEYWYV8jDtO7wJhYOMu5qliPeuNOaWZ1W6
-1uwr8A4ih69WwzugPuBSgBrPAW1c84zWIFN+njAugqPF5x8xp2uM3tUO9s5UlHJC
-FWEuU40KcDT2utSUY+2HXSHbycF4KLKT5jAKSa4sPziLfo+YifrlN0Y3rhofUlZT
-jCaeZ8ECgYEA5/xpk8aVhCEvv5iCghv0p/IHcjdXjx5+PCWh3Adx0fF91UvU5oqn
-okdyYZDShZMuLDfJ0lG+OMKZd01JapnbTtiVNceVRMnraIdoWEM2/4bTXTSZGtdA
-8gh/Kc/PMbPf5ppVWwqTCbUkPOSyGHyGc7+DQquq1w6yZu04A3x9vHECgYEAuHJk
-uz8YKY5ZUR7CZ3y7YFuwq5Lcpl43AfiiCasjRch0P8yLrITc/6fORsXyy64XW9fC
-h3YmXvEPaM03W2dxw2aQDvXEvXiEITzmILs7SE3UmZR9m7OMy7Jeqr3+JOc0ckZe
-Rz5FfuMt1IvNB6lrpfHVtoVrpCOXpzHgC/k/x10CgYA6lU18GfwL/+107uiWPsUL
-3FzxBPTBmau7OK2lSOP/ZoKmaJ39Eiq/GlfSN6ZSQRa55+S5jhcBcnMa45OUrgHp
-6VvU1u/lDTC7luZM07yBzuR1dyDq3Ez0Uhz6zBXAsXHrZDIF6ae0HeBm2EH5WQkD
-Fevp3DwqTvXSdDle+AMwoQKBgQCBSlaH1rNmNc0wCsK07f8ejUcrDZgz2mjurc1P
-v7HK8bdjHUtvE/ciEguLGqiV06O2EmjesZg2Bv4JNYivPrTFBrjGc8qEEd10uw6J
-NRVaGoyDV04w/UwdYRvwzZs/XP4reF4PzHvEdRSkH5cJ3t2BhiKLfby1YumkHlbx
-rbbiVQKBgB02jyZUiB6pPTCP8vXZCJbZELgqNyS04ALhBBpdfGMcU1+0hRLJFBaE
-tClJPGARFXl+MPkY032vmJZOuH3LrcTCm8DmMLzM/hT1EWawQ8BJkkwiIokE4lqc
-Bi8CrkvuQs2cuCStK6C3Nkyr1lTkDge46trsb7KTcfHdtLsS7EPj
------END RSA PRIVATE KEY-----
------BEGIN CERTIFICATE-----
-MIIDWzCCAkOgAwIBAgIJDji8iiceMvQlMA0GCSqGSIb3DQEBCwUAMBQxEjAQBgNV
-BAMTCWxvY2FsaG9zdDAeFw0yMzEwMTYwOTI0MThaFw0yMzExMTUxMDI0MThaMBQx
-EjAQBgNVBAMTCWxvY2FsaG9zdDCCASIwDQYJKoZIhvcNAQEBBQADggEPADCCAQoC
-ggEBAKclFZGCVcFe14JblJ5ZYAra7HatXLUSApuYEMvJ3fmhHQ0IwAijzloeZoi5
-f3wEFWRmcvycWr817pcF6PNt/BOp+m5jQdVLNp7sO2tGluIlEkNT7T+GYT6XK6nq
-jH/oae4gVtJwBxcv2mtlEfOHe7QZkpOSdzTa3wbGXVHsf+xahdRFb5hM5XPJHqVP
-ZUV1hUA7WQpZRGdZGN0gST5tdIdIPbGiPGCFUcVLjSCORhw2ABN4WxJqGOn7khKI
-lwPLtGLfbKAUMYMSIUFSkkTz6CD4xhTsbBh2OofEfZ8dZMYRyhUblZ8LJ9Llpf+8
-o4cMh2p6ICbu9/1oHpT3ID/4TA0CAwEAAaOBrzCBrDAMBgNVHRMEBTADAQH/MAsG
-A1UdDwQEAwIC9DAxBgNVHSUEKjAoBggrBgEFBQcDAQYIKwYBBQUHAwIGCCsGAQUF
-BwMDBggrBgEFBQcDCDBcBgNVHREEVTBTgglsb2NhbGhvc3SCFWxvY2FsaG9zdC5s
-b2NhbGRvbWFpboIGbHZoLm1lgggqLmx2aC5tZYIFWzo6MV2HBH8AAAGHEP6AAAAA
-AAAAAAAAAAAAAAEwDQYJKoZIhvcNAQELBQADggEBABY0rgWuzLYvVtvoVvWKS9cg
-8rVhBRIFvpYO814ocN1iaxYQ9t9uLRsJXj0K+z1BHWf0zBiw4mB3dD9VpiKpuliL
-4tRT+vATA96OYCd9G5k7DFQascAau40H3jxckh9rimIWa45FUSd7FIcddo1jeciv
-gdAdiNUuHBen82O8KHJb+1PCBdA8RYeO5EGKfJM2yrOovu7dAFilf1ZPkXWgXnfG
-nN6YfDDo9rAVDbvNXImrkwmGqEcN3Pq909IHiM/VETlU5lP4AbTNgrDa/aaZ+I+b
-1MC1p87MvnibyXs+rTlK5+j8E6noNcD7tsHNd4ufkVCqr+pvSpuA3OvnXjbbm54=
------END CERTIFICATE-----

packages/app/CHANGELOG.md

@@ -1,3 +1,95 @@
+# v0.2.0
+
+`+16,990,-9,649`
+
+## Added
+
+- Check notification settings page
+- New settings page layout - nostr:npub1g53mukxnjkcmr94fhryzkqutdz2ukq4ks0gvy5af25rgmwsl4ngq43drvk
+- Community Leaders / Invite system - nostr:npub1v0lxxxxutpvrelsksy8cdhgfux9l6a42hsj2qzquu2zk7vc9qnkszrqj49
+- Settings->Tools pages (Check follows relay health etc) - nostr:npub1v0lxxxxutpvrelsksy8cdhgfux9l6a42hsj2qzquu2zk7vc9qnkszrqj49
+- New wallet pages design - nostr:npub1v0lxxxxutpvrelsksy8cdhgfux9l6a42hsj2qzquu2zk7vc9qnkszrqj49
+- Alby OAuth wallet connection - nostr:npub1v0lxxxxutpvrelsksy8cdhgfux9l6a42hsj2qzquu2zk7vc9qnkszrqj49
+- Cashu wallet support (WIP) - nostr:npub1v0lxxxxutpvrelsksy8cdhgfux9l6a42hsj2qzquu2zk7vc9qnkszrqj49
+- Followed by friends feed page - nostr:npub1g53mukxnjkcmr94fhryzkqutdz2ukq4ks0gvy5af25rgmwsl4ngq43drvk
+- Fuzzysearch profiles everywhere - nostr:npub1g53mukxnjkcmr94fhryzkqutdz2ukq4ks0gvy5af25rgmwsl4ngq43drvk
+- Worker Relay package `@snort/worker-relay` - nostr:npub1v0lxxxxutpvrelsksy8cdhgfux9l6a42hsj2qzquu2zk7vc9qnkszrqj49
+  - Replaces all previous caching objects, all caches are handled inside `@snort/system` via worker relay
+- "View as user" button - nostr:npub1g53mukxnjkcmr94fhryzkqutdz2ukq4ks0gvy5af25rgmwsl4ngq43drvk
+- Play live streams directly in feed with embed iframe - nostr:npub1v0lxxxxutpvrelsksy8cdhgfux9l6a42hsj2qzquu2zk7vc9qnkszrqj49
+- Negentropy v1 support - nostr:npub1v0lxxxxutpvrelsksy8cdhgfux9l6a42hsj2qzquu2zk7vc9qnkszrqj49
+
+## Changed
+
+- Hidden note styles & preferences - nostr:npub1cz2ve34nk0ukn0ph4yq2qx3ud8rfy5e0ak4epx42dn8gha0sdgpsgra9kv
+- Keybinds for grid modal navigation - nostr:npub1g53mukxnjkcmr94fhryzkqutdz2ukq4ks0gvy5af25rgmwsl4ngq43drvk
+- Cache trending sections in browser - nostr:npub1g53mukxnjkcmr94fhryzkqutdz2ukq4ks0gvy5af25rgmwsl4ngq43drvk
+- Cache images / nostr.json in service worker - nostr:npub1g53mukxnjkcmr94fhryzkqutdz2ukq4ks0gvy5af25rgmwsl4ngq43drvk
+- Add dimensions to `imeta` tag for void.cat uploads - nostr:npub1v0lxxxxutpvrelsksy8cdhgfux9l6a42hsj2qzquu2zk7vc9qnkszrqj49
+- Check event sigs in `@snort/system-wasm` - nostr:npub1v0lxxxxutpvrelsksy8cdhgfux9l6a42hsj2qzquu2zk7vc9qnkszrqj49
+- Primary color scheme - nostr:npub1g53mukxnjkcmr94fhryzkqutdz2ukq4ks0gvy5af25rgmwsl4ngq43drvk
+- Note creator styles (removed hashtags input) - nostr:npub1g53mukxnjkcmr94fhryzkqutdz2ukq4ks0gvy5af25rgmwsl4ngq43drvk
+- Cache link preview results in memory - nostr:npub1g53mukxnjkcmr94fhryzkqutdz2ukq4ks0gvy5af25rgmwsl4ngq43drvk
+- Show only 1 task at a time in task list - nostr:
+- Render media in reply to note creator - nostr:npub1g53mukxnjkcmr94fhryzkqutdz2ukq4ks0gvy5af25rgmwsl4ngq43drvk
+- Show top zappers inline with footer icons on notes - nostr:npub1g53mukxnjkcmr94fhryzkqutdz2ukq4ks0gvy5af25rgmwsl4ngq43drvk
+- Add more search relays - nostr:npub1g53mukxnjkcmr94fhryzkqutdz2ukq4ks0gvy5af25rgmwsl4ngq43drvk
+- Moved link previews and opengraph tagging to https://nostr.api.v0l.io - nostr:npub1v0lxxxxutpvrelsksy8cdhgfux9l6a42hsj2qzquu2zk7vc9qnkszrqj49
+
+## Fixed
+
+- Iris account error mesage - nostr:npub1g53mukxnjkcmr94fhryzkqutdz2ukq4ks0gvy5af25rgmwsl4ngq43drvk
+- Light theme color fixes - nostr:npub1g53mukxnjkcmr94fhryzkqutdz2ukq4ks0gvy5af25rgmwsl4ngq43drvk
+- Notifications page overflow - nostr:npub1v0lxxxxutpvrelsksy8cdhgfux9l6a42hsj2qzquu2zk7vc9qnkszrqj49
+
+# v0.1.24
+
+`+11,573,-3,010`
+
+## Added
+
+- 3 Column layout - nostr:npub1g53mukxnjkcmr94fhryzkqutdz2ukq4ks0gvy5af25rgmwsl4ngq43drvk
+- Fuzzy cache search - nostr:npub1g53mukxnjkcmr94fhryzkqutdz2ukq4ks0gvy5af25rgmwsl4ngq43drvk
+- Followed by on profile pages - nostr:npub1g53mukxnjkcmr94fhryzkqutdz2ukq4ks0gvy5af25rgmwsl4ngq43drvk
+- Show more on long notes - nostr:npub1g53mukxnjkcmr94fhryzkqutdz2ukq4ks0gvy5af25rgmwsl4ngq43drvk
+- Better error message page - nostr:npub1g53mukxnjkcmr94fhryzkqutdz2ukq4ks0gvy5af25rgmwsl4ngq43drvk
+- Media grid feed - nostr:npub1g53mukxnjkcmr94fhryzkqutdz2ukq4ks0gvy5af25rgmwsl4ngq43drvk
+- Mobile fixed footer - nostr:npub1g53mukxnjkcmr94fhryzkqutdz2ukq4ks0gvy5af25rgmwsl4ngq43drvk
+- Follow button on profile search results - nostr:npub17q5n2z8naw0xl6vu9lvt560lg33pdpe29k0k09umlfxm3vc4tqrq466f2y
+- Invite codes (WIP Community Program) - nostr:npub1v0lxxxxutpvrelsksy8cdhgfux9l6a42hsj2qzquu2zk7vc9qnkszrqj49
+- `imeta` tag insertion for images - nostr:npub1v0lxxxxutpvrelsksy8cdhgfux9l6a42hsj2qzquu2zk7vc9qnkszrqj49
+- Wallet settings page improvements - nostr:npub1v0lxxxxutpvrelsksy8cdhgfux9l6a42hsj2qzquu2zk7vc9qnkszrqj49
+- Nostr Wallet Connect upgrade (balance + history) - nostr:npub1v0lxxxxutpvrelsksy8cdhgfux9l6a42hsj2qzquu2zk7vc9qnkszrqj49
+- Schnorr sig check in WASM binary - nostr:npub1v0lxxxxutpvrelsksy8cdhgfux9l6a42hsj2qzquu2zk7vc9qnkszrqj49
+- Autoplay videos in feed (muted) - nostr:npub1g53mukxnjkcmr94fhryzkqutdz2ukq4ks0gvy5af25rgmwsl4ngq43drvk
+- Followed by friends feed (a feed of your 2nd degree follows posts) - nostr:npub1g53mukxnjkcmr94fhryzkqutdz2ukq4ks0gvy5af25rgmwsl4ngq43drvk
+- imgproxy image integrity check (sha256 from `imeta` passed to imgproxy) - nostr:npub1v0lxxxxutpvrelsksy8cdhgfux9l6a42hsj2qzquu2zk7vc9qnkszrqj49
+
+## Changed
+
+- Removed Twitter embed - nostr:npub1v0lxxxxutpvrelsksy8cdhgfux9l6a42hsj2qzquu2zk7vc9qnkszrqj49
+- Removed attachment button on DM's - nostr:npub1g53mukxnjkcmr94fhryzkqutdz2ukq4ks0gvy5af25rgmwsl4ngq43drvk
+- Note broadcaster dialog changed to toast notification - nostr:npub1v0lxxxxutpvrelsksy8cdhgfux9l6a42hsj2qzquu2zk7vc9qnkszrqj49
+- Removed npub link from profile (use QR button) - nostr:npub1g53mukxnjkcmr94fhryzkqutdz2ukq4ks0gvy5af25rgmwsl4ngq43drvk
+- Render image size from `imeta` tags - nostr:npub1v0lxxxxutpvrelsksy8cdhgfux9l6a42hsj2qzquu2zk7vc9qnkszrqj49
+- Style fixes - nostr:npub1cz2ve34nk0ukn0ph4yq2qx3ud8rfy5e0ak4epx42dn8gha0sdgpsgra9kv
+- Zap pool slider tweak - nostr:npub1ltx67888tz7lqnxlrg06x234vjnq349tcfyp52r0lstclp548mcqnuz40t
+- New Malay translations - nostr:npub1cjtt3nywuflj65ftld4v7zzpg0qh3ergycjcym0956vf9eftv7esekxpmn
+- Updated Persian translations - nostr:npub1cpazafytvafazxkjn43zjfwtfzatfz508r54f6z6a3rf2ws8223qc3xxpk
+- Updated Finnish translations - nostr:npub1ust7u0v3qffejwhqee45r49zgcyewrcn99vdwkednd356c9resyqtnn3mj
+- Updated French translations - nostr:npub1x8dzy9xegwmdk2vy30l8u08caspcqq2yzncxehdsa6kvnte9pr3qnt8pg4 & nostr:npub13w02l37gkjwv90lnklfet5653jj0p5ueu976v3dpda5afvxgw3uslcqdnv
+- Updated German translations - nostr:npub19a6x8frkkn2660fw0flz74a7qg8c2jxk5v9p2rsh7tv5e6ftsq3sav63vp
+- Updated Hungarian translations - nostr:npub1ww8kjxz2akn82qptdpl7glywnchhkx3x04hez3d3rye397turrhssenvtp
+- Updated Swedish translations - nostr:npub19jk45jz45gczwfm22y9z69xhaex3nwg47dz84zw096xl6z62amkqj99rv7
+- Updated Japanese translations - nostr:npub1wh69w45awqnlsxw7jt5tkymets87h6t4phplkx6ug2ht2qkssswswntjk0
+
+## Fixed
+
+- Longform note overlfow-x - nostr:npub1g53mukxnjkcmr94fhryzkqutdz2ukq4ks0gvy5af25rgmwsl4ngq43drvk
+- Trim zap content - nostr:npub1u8lnhlw5usp3t9vmpz60ejpyt649z33hu82wc2hpv6m5xdqmuxhs46turz
+
+---
+
 # v0.1.23
 
 ## Added
@@ -535,7 +627,7 @@ https://git.v0l.io/Kieran/snort/compare/v0.1.9...v0.1.10
 - Fix event mention bug by @SamSamskies in https://github.com/v0l/snort/pull/421
 - fix NaN when parsing empty string by @SamSamskies in https://github.com/v0l/snort/pull/422
 - NIP06 support by @w3irdrobot in https://github.com/v0l/snort/pull/425
-- Added key attr to Tabs to remove React warning by @w3irdrobot in https://github.com/v0l/snort/pull/424
+- Added key attr to TabSelectors to remove React warning by @w3irdrobot in https://github.com/v0l/snort/pull/424
 - New Crowdin updates by @v0l in https://github.com/v0l/snort/pull/426
 - New Crowdin updates by @v0l in https://github.com/v0l/snort/pull/436
 - Update Wavlake embed URL, add support for album & artist links by @blastshielddown in https://github.com/v0l/snort/pull/439

packages/app/_headers

@@ -1,2 +0,0 @@
-/*
-  Content-Security-Policy: default-src 'self'; manifest-src *; child-src 'none'; worker-src 'self'; frame-src youtube.com www.youtube.com https://platform.twitter.com https://embed.tidal.com https://w.soundcloud.com https://www.mixcloud.com https://open.spotify.com https://player.twitch.tv https://embed.music.apple.com https://nostrnests.com https://embed.wavlake.com https://challenges.cloudflare.com; style-src 'self' 'unsafe-inline'; connect-src *; img-src * data: blob:; font-src 'self'; media-src * blob:; script-src 'self' 'wasm-unsafe-eval' https://analytics.v0l.io https://platform.twitter.com https://embed.tidal.com https://challenges.cloudflare.com;

packages/app/babel.config.json

@@ -0,0 +1,11 @@
+{
+  "plugins": [
+    [
+      "formatjs",
+      {
+        "idInterpolationPattern": "[sha512:contenthash:base64:6]",
+        "ast": true
+      }
+    ]
+  ]
+}

packages/app/config/default.json

@@ -4,23 +4,55 @@
   "appTitle": "Snort - Nostr",
   "hostname": "snort.social",
   "nip05Domain": "snort.social",
-  "favicon": "public/favicon.ico",
-  "appleTouchIconUrl": "/nostrich_512.png",
+  "icon": "/nostrich_512.png",
+  "navLogo": null,
   "publicDir": "public/snort",
   "httpCache": "",
   "animalNamePlaceholders": false,
-  "defaultZapPoolFee": 0.5,
+  "defaultZapPoolFee": 1,
   "features": {
     "analytics": true,
     "subscriptions": true,
     "deck": true,
-    "zapPool": true
+    "zapPool": true,
+    "notificationGraph": true,
+    "communityLeaders": true,
+    "nostrAddress": true,
+    "pushNotifications": true
   },
+  "signUp": {
+    "quickStart": false,
+    "defaultFollows": ["npub1sn0rtcjcf543gj4wsg7fa59s700d5ztys5ctj0g69g2x6802npjqhjjtws"]
+  },
+  "defaultPreferences": {
+    "hideMutedNotes": false,
+    "defaultRootTab": "following"
+  },
+  "media": {
+    "bypassImgProxyError": false,
+    "preferLargeMedia": true
+  },
+  "communityLeaders": {
+    "list": "naddr1qq4xc6tnw3ez6vp58y6rywpjxckngdtyxukngwr9vckkze33vcknzcnrxcenje35xqmn2cczyp3lucccm3v9s087z6qslpkap8schltk427zfgqgrn3g2menq5zw6qcyqqq82vqprpmhxue69uhhyetvv9ujuumwdae8gtnnda3kjctv7rajfl"
+  },
+  "noteCreatorToast": false,
+  "hideFromNavbar": ["/graph"],
+  "deckSubKind": 1,
+  "showPowIcon": true,
   "eventLinkPrefix": "nevent",
   "profileLinkPrefix": "nprofile",
   "defaultRelays": {
     "wss://relay.snort.social/": { "read": true, "write": true },
     "wss://nostr.wine/": { "read": true, "write": false },
-    "wss://eden.nostr.land/": { "read": true, "write": false }
-  }
+    "wss://relay.damus.io/": { "read": true, "write": true },
+    "wss://nos.lol/": { "read": true, "write": true }
+  },
+  "alby": {
+    "clientId": "pohiJjPhQR",
+    "clientSecret": "GAl1YKLA3FveK1gLBYok"
+  },
+  "chatChannels": [
+    { "type": "telegram", "value": "https://t.me/irismessenger" },
+    { "type": "nip28", "value": "23286a4602ada10cc10200553bff62a110e8dc0eacddf73277395a89ddf26a09" }
+  ]
 }

packages/app/config/iris.json

@@ -4,22 +4,53 @@
   "appTitle": "iris",
   "hostname": "iris.to",
   "nip05Domain": "iris.to",
-  "favicon": "public/iris/favicon.ico",
-  "appleTouchIconUrl": "/img/apple-touch-icon.png",
+  "icon": "/img/icon128.png",
+  "navLogo": "/img/icon128.png",
   "publicDir": "public/iris",
-  "httpCache": "https://api.iris.to",
+  "httpCache": "",
   "animalNamePlaceholders": true,
+  "defaultZapPoolFee": 0.5,
   "features": {
     "analytics": true,
-    "subscriptions": false,
+    "subscriptions": true,
     "deck": true,
-    "zapPool": true
+    "zapPool": true,
+    "notificationGraph": false,
+    "communityLeaders": true
   },
+  "defaultPreferences": {
+    "hideMutedNotes": true,
+    "defaultRootTab": "for-you"
+  },
+  "signUp": {
+    "quickStart": true,
+    "defaultFollows": ["npub1wnwwcv0a8wx0m9stck34ajlwhzuua68ts8mw3kjvspn42dcfyjxs4n95l8"]
+  },
+  "media": {
+    "bypassImgProxyError": true,
+    "preferLargeMedia": true
+  },
+  "communityLeaders": {
+    "list": "naddr1qq4xc6tnw3ez6vp58y6rywpjxckngdtyxukngwr9vckkze33vcknzcnrxcenje35xqmn2cczyp3lucccm3v9s087z6qslpkap8schltk427zfgqgrn3g2menq5zw6qcyqqq82vqprpmhxue69uhhyetvv9ujuumwdae8gtnnda3kjctv7rajfl"
+  },
+  "noteCreatorToast": false,
+  "hideFromNavbar": [],
   "eventLinkPrefix": "note",
   "profileLinkPrefix": "npub",
+  "showPowIcon": false,
   "defaultRelays": {
     "wss://relay.snort.social/": { "read": true, "write": true },
     "wss://nostr.wine/": { "read": true, "write": false },
-    "wss://eden.nostr.land/": { "read": true, "write": false }
+    "wss://eden.nostr.land/": { "read": true, "write": false },
+    "wss://relay.nostr.band/": { "read": true, "write": true },
+    "wss://relay.damus.io/": { "read": true, "write": true }
+  },
+  "chatChannels": [
+    { "type": "telegram", "value": "https://t.me/irismessenger" },
+    { "type": "nip28", "value": "23286a4602ada10cc10200553bff62a110e8dc0eacddf73277395a89ddf26a09" }
+  ],
+  "alby": {
+    "clientId": "5rYcHDrlDb",
+    "clientSecret": "QAI3QmgiaPH3BfTMzzFd"
   }
 }

packages/app/config/meku.json

@@ -0,0 +1,50 @@
+{
+  "appName": "めく",
+  "appNameCapitalized": "めく",
+  "appTitle": "めく",
+  "hostname": "meku.app",
+  "nip05Domain": "meku.app",
+  "icon": "/nostr.jpg",
+  "navLogo": null,
+  "publicDir": "public/nostr",
+  "httpCache": "",
+  "animalNamePlaceholders": false,
+  "defaultZapPoolFee": 0,
+  "features": {
+    "analytics": true,
+    "subscriptions": false,
+    "deck": false,
+    "zapPool": false,
+    "notificationGraph": true,
+    "communityLeaders": false,
+    "nostrAddress": false,
+    "pushNotifications": true
+  },
+  "signUp": {
+    "quickStart": false,
+    "defaultFollows": []
+  },
+  "defaultPreferences": {
+    "hideMutedNotes": false,
+    "defaultRootTab": "following",
+    "language": "ja"
+  },
+  "media": {
+    "bypassImgProxyError": false,
+    "preferLargeMedia": true
+  },
+  "communityLeaders": null,
+  "noteCreatorToast": false,
+  "hideFromNavbar": ["/graph"],
+  "deckSubKind": 1,
+  "showPowIcon": true,
+  "eventLinkPrefix": "nevent",
+  "profileLinkPrefix": "nprofile",
+  "defaultRelays": {
+    "wss://relay.nostr.wirednet.jp/": { "read": true, "write": true },
+    "wss://yabu.me/": { "read": true, "write": true },
+    "wss://nos.lol/": { "read": true, "write": true }
+  },
+  "alby": null,
+  "chatChannels": null
+}

packages/app/config/nostr.json

@@ -0,0 +1,50 @@
+{
+  "appName": "Nostr",
+  "appNameCapitalized": "Nostr",
+  "appTitle": "Nostr",
+  "hostname": "nostr.com",
+  "nip05Domain": "nostr.com",
+  "icon": "/nostr.jpg",
+  "navLogo": null,
+  "publicDir": "public/nostr",
+  "httpCache": "",
+  "animalNamePlaceholders": false,
+  "defaultZapPoolFee": 0,
+  "features": {
+    "analytics": false,
+    "subscriptions": false,
+    "deck": false,
+    "zapPool": false,
+    "notificationGraph": true,
+    "communityLeaders": false,
+    "nostrAddress": false,
+    "pushNotifications": false
+  },
+  "signUp": {
+    "quickStart": false,
+    "defaultFollows": []
+  },
+  "defaultPreferences": {
+    "hideMutedNotes": false,
+    "defaultRootTab": "following"
+  },
+  "media": {
+    "bypassImgProxyError": false,
+    "preferLargeMedia": true
+  },
+  "communityLeaders": null,
+  "noteCreatorToast": true,
+  "hideFromNavbar": ["/graph"],
+  "deckSubKind": 1,
+  "showPowIcon": true,
+  "eventLinkPrefix": "nevent",
+  "profileLinkPrefix": "nprofile",
+  "defaultRelays": {
+    "wss://relay.snort.social/": { "read": true, "write": true },
+    "wss://nostr.wine/": { "read": true, "write": false },
+    "wss://eden.nostr.land/": { "read": true, "write": false },
+    "wss://nos.lol/": { "read": true, "write": true }
+  },
+  "alby": null,
+  "chatChannels": null
+}

packages/app/custom.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="@webbtc/webln-types" />
+/// <reference types="vite/client" />
 
 declare module "*.jpg" {
   const value: unknown;
@@ -46,26 +47,65 @@ declare const CONFIG: {
   appTitle: string;
   hostname: string;
   nip05Domain: string;
-  favicon: string;
-  appleTouchIconUrl: string;
+  icon: string;
+  navLogo: string | null;
   httpCache: string;
   animalNamePlaceholders: boolean;
-  defaultZapPoolFee?: number;
+  defaultZapPoolFee: number;
   features: {
     analytics: boolean;
     subscriptions: boolean;
     deck: boolean;
     zapPool: boolean;
+    notificationGraph: boolean;
+    communityLeaders: boolean;
+    nostrAddress: boolean;
+    pushNotifications: boolean;
   };
+  defaultPreferences: {
+    hideMutedNotes: boolean;
+    defaultRootTab: "following" | "for-you";
+  };
+  signUp: {
+    quickStart: boolean;
+    defaultFollows: Array<string>;
+  };
+  media: {
+    bypassImgProxyError: boolean;
+    preferLargeMedia: boolean;
+  };
+  communityLeaders?: {
+    list: string;
+  };
+
+  // Filter urls from nav sidebar
+  hideFromNavbar: Array<string>;
+
+  // Limit deck to certain subscriber tier
+  deckSubKind?: number;
+
+  showDeck?: boolean;
+
+  // Create toast notifications when publishing notes
+  noteCreatorToast: boolean;
+
   eventLinkPrefix: NostrPrefix;
   profileLinkPrefix: NostrPrefix;
   defaultRelays: Record<string, RelaySettings>;
-};
+  showPowIcon: boolean;
 
-/**
- * Single relay (Debug)
- */
-declare const SINGLE_RELAY: string | undefined;
+  // Alby wallet oAuth config
+  alby?: {
+    clientId: string;
+    clientSecret: string;
+  };
+
+  // public chat channels for site
+  chatChannels?: Array<{
+    type: "nip28" | "telegram";
+    value: string;
+  }>;
+};
 
 /**
  * Build git hash

packages/app/index.html

@@ -2,17 +2,21 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes, viewport-fit=cover" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Feature packed nostr client" />
     <meta
       name="keywords"
       content="nostr snort fast decentralized social media censorship resistant open source software" />
     <link rel="preconnect" href="https://imgproxy.snort.social" />
-    <link rel="apple-touch-icon" href="" />
+    <link rel="apple-touch-icon" href="/img/apple-touch-icon.png" />
     <link rel="manifest" href="/manifest.json" />
+    <link rel="icon" href="/favicon.png" />
     <title></title>
   </head>
+
   <body>
     <div id="root"></div>
     <script type="module" src="/src/index.tsx"></script>

packages/app/jest.config.js

@@ -1,9 +0,0 @@
-/** @type {import('ts-jest').JestConfigWithTsJest} */
-module.exports = {
-  bail: true,
-  preset: "ts-jest",
-  testEnvironment: "jsdom",
-  roots: ["src"],
-  moduleDirectories: ["src", "node_modules"],
-  setupFiles: ["./src/setupTests.ts"],
-};

packages/app/package.json

@@ -1,28 +1,35 @@
 {
   "name": "@snort/app",
-  "version": "0.1.23",
+  "version": "0.2.0",
   "dependencies": {
-    "@cashu/cashu-ts": "^0.6.1",
-    "@lightninglabs/lnc-web": "^0.2.3-alpha",
-    "@noble/curves": "^1.0.0",
-    "@noble/hashes": "^1.2.0",
-    "@scure/base": "^1.1.1",
-    "@scure/bip32": "^1.3.0",
-    "@scure/bip39": "^1.1.1",
+    "@cashu/cashu-ts": "^1.0.0-rc.3",
+    "@here/maps-api-for-javascript": "^1.50.0",
+    "@noble/curves": "^1.4.0",
+    "@noble/hashes": "^1.4.0",
+    "@scure/base": "^1.1.6",
+    "@scure/bip32": "^1.4.0",
+    "@scure/bip39": "^1.3.0",
     "@snort/shared": "workspace:*",
     "@snort/system": "workspace:*",
     "@snort/system-react": "workspace:*",
     "@snort/system-wasm": "workspace:*",
     "@snort/system-web": "workspace:*",
-    "@szhsin/react-menu": "^3.3.1",
-    "@uidotdev/usehooks": "^2.3.1",
-    "@void-cat/api": "^1.0.10",
+    "@snort/wallet": "workspace:*",
+    "@snort/worker-relay": "workspace:*",
+    "@szhsin/react-menu": "^3.5.3",
+    "@uidotdev/usehooks": "^2.4.1",
+    "@void-cat/api": "^1.0.12",
     "classnames": "^2.3.2",
+    "comlink": "^4.4.1",
     "debug": "^4.3.4",
     "dexie": "^3.2.4",
     "emojilib": "^3.0.10",
+    "eventemitter3": "^5.0.1",
+    "fuse.js": "^7.0.0",
     "highlight.js": "^11.8.0",
+    "latlon-geohash": "^2.0.0",
     "light-bolt11-decoder": "^2.1.0",
+    "lottie-react": "^2.4.0",
     "marked": "^9.1.0",
     "marked-footnote": "^1.0.0",
     "match-sorter": "^6.3.1",
@@ -35,13 +42,15 @@
     "react-router-dom": "^6.5.0",
     "react-tag-input-component": "^2.0.2",
     "react-textarea-autosize": "^8.4.0",
-    "react-twitter-embed": "^4.0.4",
     "recharts": "^2.8.0",
     "three": "^0.157.0",
+    "typescript-lru-cache": "^2.0.0",
     "use-long-press": "^3.2.0",
     "use-sync-external-store": "^1.2.0",
     "uuid": "^9.0.0",
+    "workbox-cacheable-response": "^7.0.0",
     "workbox-core": "^6.4.2",
+    "workbox-expiration": "^7.0.0",
     "workbox-precaching": "^7.0.0",
     "workbox-routing": "^6.4.2",
     "workbox-strategies": "^6.4.2"
@@ -50,10 +59,13 @@
     "start": "vite",
     "build": "yarn eslint --fix && vite build",
     "serve": "vite preview",
-    "test": "jest --runInBand",
+    "test": "vitest run",
+    "test:watch": "vitest watch",
     "intl-extract": "formatjs extract 'src/**/*.ts*' --ignore='**/*.d.ts' --out-file src/lang.json --flatten true",
     "intl-compile": "formatjs compile src/lang.json --out-file src/translations/en.json",
-    "eslint": "eslint ."
+    "eslint": "eslint .",
+    "deploy:meku": "NODE_CONFIG_ENV=meku yarn build && npx wrangler pages deploy --project-name meku build/",
+    "deploy:notestr": "NODE_CONFIG_ENV=nostr yarn build && npx wrangler pages deploy --project-name nostr-generic build/"
   },
   "eslintConfig": {
     "extends": [
@@ -76,10 +88,9 @@
   },
   "devDependencies": {
     "@formatjs/cli": "^6.1.3",
-    "@jest/globals": "^29.6.1",
     "@types/config": "^3.3.3",
     "@types/debug": "^4.1.8",
-    "@types/jest": "^29.5.1",
+    "@types/latlon-geohash": "^2.0.3",
     "@types/node": "^20.4.1",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
@@ -91,14 +102,19 @@
     "@typescript-eslint/eslint-plugin": "^6.1.0",
     "@typescript-eslint/parser": "^6.1.0",
     "@vitejs/plugin-react": "^4.2.0",
-    "@webbtc/webln-types": "^1.0.10",
+    "@webbtc/webln-types": "^3.0.0",
     "@webscopeio/react-textarea-autocomplete": "^4.9.2",
+    "@welldone-software/why-did-you-render": "^8.0.1",
     "autoprefixer": "^10.4.16",
+    "babel-plugin-formatjs": "^10.5.14",
     "config": "^3.3.9",
     "eslint": "^8.48.0",
+    "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-formatjs": "^4.11.3",
-    "jest": "^29.5.0",
-    "jest-environment-jsdom": "^29.5.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
     "postcss": "^8.4.31",
     "postcss-preset-env": "^9.2.0",
     "prettier": "2.8.3",
@@ -106,10 +122,11 @@
     "rollup-plugin-visualizer": "^5.9.2",
     "tailwindcss": "^3.3.3",
     "tinybench": "^2.5.1",
-    "ts-jest": "^29.1.1",
     "typescript": "^5.2.2",
-    "vite": "^5.0.0",
-    "vite-plugin-pwa": "^0.17.0",
-    "vite-plugin-version-mark": "^0.0.10"
+    "vite": "^5.2.8",
+    "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-pwa": "^0.19.2",
+    "vite-plugin-version-mark": "^0.0.10",
+    "vitest": "^0.34.6"
   }
 }

packages/app/public/iris/_headers

@@ -0,0 +1,4 @@
+/*
+  Content-Security-Policy: default-src 'self'; manifest-src *; child-src 'none'; worker-src 'self'; frame-src https://youtube.com https://www.youtube.com https://platform.twitter.com https://embed.tidal.com https://w.soundcloud.com https://www.mixcloud.com https://open.spotify.com https://player.twitch.tv https://embed.music.apple.com https://embed.wavlake.com https://challenges.cloudflare.com; style-src 'self' 'unsafe-inline'; connect-src *; img-src * data: blob:; font-src 'self'; media-src * blob:; script-src 'self' 'wasm-unsafe-eval' https://platform.twitter.com https://embed.tidal.com https://challenges.cloudflare.com;
+/service-worker.js
+  Cache-Control: max-age=604800, must-revalidate;

packages/app/public/nostr/_headers

@@ -0,0 +1,2 @@
+/*
+  Content-Security-Policy: default-src 'self'; manifest-src *; child-src 'none'; worker-src 'self'; frame-src https://youtube.com https://www.youtube.com https://platform.twitter.com https://embed.tidal.com https://w.soundcloud.com https://www.mixcloud.com https://open.spotify.com https://player.twitch.tv https://embed.music.apple.com https://embed.wavlake.com https://challenges.cloudflare.com; style-src 'self' 'unsafe-inline'; connect-src *; img-src * data: blob:; font-src 'self'; media-src * blob:; script-src 'self' 'wasm-unsafe-eval' https://platform.twitter.com https://embed.tidal.com https://challenges.cloudflare.com;

packages/app/public/snort/_headers

@@ -0,0 +1,4 @@
+/*
+  Content-Security-Policy: default-src 'self'; manifest-src *; child-src 'none'; worker-src 'self'; frame-src https://youtube.com https://www.youtube.com https://platform.twitter.com https://embed.tidal.com https://w.soundcloud.com https://www.mixcloud.com https://open.spotify.com https://player.twitch.tv https://embed.music.apple.com https://embed.wavlake.com https://challenges.cloudflare.com; style-src 'self' 'unsafe-inline'; connect-src *; img-src * data: blob:; font-src 'self'; media-src * blob:; script-src 'self' 'wasm-unsafe-eval' https://platform.twitter.com https://embed.tidal.com https://challenges.cloudflare.com;
+/service-worker.js
+  Cache-Control: max-age=604800, must-revalidate;

packages/app/public/snort/robots.txt

@@ -1,3 +1,4 @@
 # https://www.robotstxt.org/robotstxt.html
 User-agent: *
 Disallow:
+Sitemap: https://api.snort.social/api/v1/sitemap/index.xml

packages/app/src/Cache/ChatCache.ts

@@ -1,5 +1,6 @@
-import { NostrEvent } from "@snort/system";
 import { FeedCache } from "@snort/shared";
+import { NostrEvent } from "@snort/system";
+
 import { db } from "@/Db";
 
 export class ChatCache extends FeedCache<NostrEvent> {
@@ -26,4 +27,8 @@ export class ChatCache extends FeedCache<NostrEvent> {
   takeSnapshot(): Array<NostrEvent> {
     return [...this.cache.values()];
   }
+
+  async search() {
+    return <Array<NostrEvent>>[];
+  }
 }

packages/app/src/Cache/CommunityLeadersStore.tsx

@@ -0,0 +1,16 @@
+import { ExternalStore } from "@snort/shared";
+
+class CommunityLeadersStore extends ExternalStore<Array<string>> {
+  #leaders: Array<string> = [];
+
+  setLeaders(arr: Array<string>) {
+    this.#leaders = arr;
+    this.notifyChange();
+  }
+
+  takeSnapshot(): string[] {
+    return [...this.#leaders];
+  }
+}
+
+export const LeadersStore = new CommunityLeadersStore();

packages/app/src/Cache/EventCacheWorker.ts

@@ -0,0 +1,110 @@
+import { CachedTable, CacheEvents } from "@snort/shared";
+import { CacheRelay, NostrEvent } from "@snort/system";
+import { EventEmitter } from "eventemitter3";
+
+export class EventCacheWorker extends EventEmitter<CacheEvents> implements CachedTable<NostrEvent> {
+  #relay: CacheRelay;
+  #keys = new Set<string>();
+  #cache = new Map<string, NostrEvent>();
+
+  constructor(relay: CacheRelay) {
+    super();
+    this.#relay = relay;
+  }
+
+  async preload() {
+    const ids = await this.#relay.query([
+      "REQ",
+      "preload-event-cache",
+      {
+        ids_only: true,
+      },
+    ]);
+    this.#keys = new Set<string>(ids as unknown as Array<string>);
+  }
+
+  async search(q: string) {
+    const results = await this.#relay.query([
+      "REQ",
+      "events-search",
+      {
+        search: q,
+      },
+    ]);
+    return results;
+  }
+
+  keysOnTable(): string[] {
+    return [...this.#keys];
+  }
+
+  getFromCache(key?: string | undefined): NostrEvent | undefined {
+    if (key) {
+      return this.#cache.get(key);
+    }
+  }
+
+  discover(ev: NostrEvent) {
+    this.#keys.add(this.key(ev));
+  }
+
+  async get(key?: string | undefined): Promise<NostrEvent | undefined> {
+    if (key) {
+      const res = await this.bulkGet([key]);
+      if (res.length > 0) {
+        return res[0];
+      }
+    }
+  }
+
+  async bulkGet(keys: string[]): Promise<NostrEvent[]> {
+    const results = await this.#relay.query([
+      "REQ",
+      "EventCacheWorker.bulkGet",
+      {
+        ids: keys,
+      },
+    ]);
+    for (const ev of results) {
+      this.#cache.set(ev.id, ev);
+    }
+    return results;
+  }
+
+  async set(obj: NostrEvent): Promise<void> {
+    await this.#relay.event(obj);
+    this.#keys.add(obj.id);
+  }
+
+  async bulkSet(obj: NostrEvent[] | readonly NostrEvent[]): Promise<void> {
+    await Promise.all(
+      obj.map(async a => {
+        await this.#relay.event(a);
+        this.#keys.add(a.id);
+      }),
+    );
+  }
+
+  async update<TWithCreated extends NostrEvent & { created: number; loaded: number }>(
+    m: TWithCreated,
+  ): Promise<"new" | "refresh" | "updated" | "no_change"> {
+    if (await this.#relay.event(m)) {
+      return "updated";
+    }
+    return "no_change";
+  }
+
+  async buffer(keys: string[]): Promise<string[]> {
+    const missing = keys.filter(a => !this.#keys.has(a));
+    const res = await this.bulkGet(missing);
+    return missing.filter(a => !res.some(b => this.key(b) === a));
+  }
+
+  key(of: NostrEvent): string {
+    return of.id;
+  }
+
+  snapshot(): NostrEvent[] {
+    return [...this.#cache.values()];
+  }
+}

packages/app/src/Cache/EventInteractionCache.ts

@@ -1,42 +0,0 @@
-import { FeedCache } from "@snort/shared";
-import { db, EventInteraction } from "@/Db";
-import { LoginStore } from "@/Login";
-import { sha256 } from "@/SnortUtils";
-
-export class EventInteractionCache extends FeedCache<EventInteraction> {
-  constructor() {
-    super("EventInteraction", db.eventInteraction);
-  }
-
-  key(of: EventInteraction): string {
-    return sha256(of.event + of.by);
-  }
-
-  override async preload(): Promise<void> {
-    await super.preload();
-
-    const data = window.localStorage.getItem("zap-cache");
-    if (data) {
-      const toImport = [...new Set<string>(JSON.parse(data) as Array<string>)].map(a => {
-        const ret = {
-          event: a,
-          by: LoginStore.takeSnapshot().publicKey,
-          zapped: true,
-          reacted: false,
-          reposted: false,
-        } as EventInteraction;
-        ret.id = this.key(ret);
-        return ret;
-      });
-      await this.bulkSet(toImport);
-
-      console.debug(`Imported dumb-zap-cache events: `, toImport.length);
-      window.localStorage.removeItem("zap-cache");
-    }
-    await this.buffer([...this.onTable]);
-  }
-
-  takeSnapshot(): EventInteraction[] {
-    return [...this.cache.values()];
-  }
-}

packages/app/src/Cache/FollowListCache.ts

@@ -1,47 +0,0 @@
-import { db } from "@/Db";
-import { unixNowMs } from "@snort/shared";
-import { EventKind, RequestBuilder, socialGraphInstance, TaggedNostrEvent } from "@snort/system";
-import { RefreshFeedCache } from "./RefreshFeedCache";
-import { LoginSession } from "@/Login";
-
-export class FollowListCache extends RefreshFeedCache<TaggedNostrEvent> {
-  constructor() {
-    super("FollowListCache", db.followLists);
-  }
-
-  buildSub(session: LoginSession, rb: RequestBuilder): void {
-    const since = this.newest();
-    rb.withFilter()
-      .kinds([EventKind.ContactList])
-      .authors(session.follows.item)
-      .since(since === 0 ? undefined : since);
-  }
-
-  async onEvent(evs: readonly TaggedNostrEvent[]) {
-    await Promise.all(
-      evs.map(async e => {
-        const update = await super.update({
-          ...e,
-          created: e.created_at,
-          loaded: unixNowMs(),
-        });
-        if (update !== "no_change") {
-          socialGraphInstance.handleFollowEvent(e);
-        }
-      }),
-    );
-  }
-
-  key(of: TaggedNostrEvent): string {
-    return of.pubkey;
-  }
-
-  takeSnapshot() {
-    return [...this.cache.values()];
-  }
-
-  override async preload() {
-    await super.preload();
-    this.snapshot().forEach(e => socialGraphInstance.handleFollowEvent(e));
-  }
-}

packages/app/src/Cache/FollowsFeed.ts

@@ -1,126 +0,0 @@
-import debug from "debug";
-import { EventKind, RequestBuilder, SystemInterface, TaggedNostrEvent } from "@snort/system";
-import { unixNow, unixNowMs } from "@snort/shared";
-
-import { db } from "@/Db";
-import { RefreshFeedCache, TWithCreated } from "./RefreshFeedCache";
-import { LoginSession } from "@/Login";
-import { Day, Hour } from "@/Const";
-
-const WindowSize = Hour * 6;
-const MaxCacheWindow = Day * 7;
-
-export class FollowsFeedCache extends RefreshFeedCache<TaggedNostrEvent> {
-  #kinds = [EventKind.TextNote, EventKind.Repost, EventKind.Polls];
-  #oldest?: number;
-
-  constructor() {
-    super("FollowsFeedCache", db.followsFeed);
-  }
-
-  key(of: TWithCreated<TaggedNostrEvent>): string {
-    return of.id;
-  }
-
-  takeSnapshot(): TWithCreated<TaggedNostrEvent>[] {
-    return [...this.cache.values()];
-  }
-
-  buildSub(session: LoginSession, rb: RequestBuilder): void {
-    const since = this.newest();
-    rb.withFilter()
-      .kinds(this.#kinds)
-      .authors(session.follows.item)
-      .since(since === 0 ? unixNow() - WindowSize : since);
-  }
-
-  async onEvent(evs: readonly TaggedNostrEvent[]): Promise<void> {
-    const filtered = evs.filter(a => this.#kinds.includes(a.kind));
-    if (filtered.length > 0) {
-      await this.bulkSet(filtered);
-      this.notifyChange(filtered.map(a => this.key(a)));
-    }
-  }
-
-  override async preload() {
-    const start = unixNowMs();
-    const keys = (await this.table?.toCollection().primaryKeys()) ?? [];
-    this.onTable = new Set<string>(keys.map(a => a as string));
-
-    // load only latest 50 posts, rest can be loaded on-demand
-    const latest = await this.table?.orderBy("created_at").reverse().limit(50).toArray();
-    latest?.forEach(v => this.cache.set(this.key(v), v));
-
-    // cleanup older than 7 days
-    await this.table
-      ?.where("created_at")
-      .below(unixNow() - MaxCacheWindow)
-      .delete();
-
-    const oldest = await this.table?.orderBy("created_at").first();
-    this.#oldest = oldest?.created_at;
-    this.notifyChange(latest?.map(a => this.key(a)) ?? []);
-
-    debug(this.name)(`Loaded %d/%d in %d ms`, latest?.length ?? 0, keys.length, (unixNowMs() - start).toLocaleString());
-  }
-
-  async loadMore(system: SystemInterface, session: LoginSession, before: number) {
-    if (this.#oldest && before <= this.#oldest) {
-      const rb = new RequestBuilder(`${this.name}-loadmore`);
-      rb.withFilter()
-        .kinds(this.#kinds)
-        .authors(session.follows.item)
-        .until(before)
-        .since(before - WindowSize);
-      await system.Fetch(rb, async evs => {
-        await this.bulkSet(evs);
-      });
-    } else {
-      const latest = await this.table
-        ?.where("created_at")
-        .between(before - WindowSize, before)
-        .reverse()
-        .sortBy("created_at");
-      latest?.forEach(v => {
-        const k = this.key(v);
-        this.cache.set(k, v);
-        this.onTable.add(k);
-      });
-
-      this.notifyChange(latest?.map(a => this.key(a)) ?? []);
-    }
-  }
-
-  /**
-   * Backfill cache with new follows
-   */
-  async backFill(system: SystemInterface, keys: Array<string>) {
-    if (keys.length === 0) return;
-
-    const rb = new RequestBuilder(`${this.name}-backfill`);
-    rb.withFilter()
-      .kinds(this.#kinds)
-      .authors(keys)
-      .until(unixNow())
-      .since(this.#oldest ?? unixNow() - MaxCacheWindow);
-    await system.Fetch(rb, async evs => {
-      await this.bulkSet(evs);
-    });
-  }
-
-  /**
-   * Backfill cache based on follows list
-   */
-  async backFillIfMissing(system: SystemInterface, keys: Array<string>) {
-    if (!this.#oldest) return;
-
-    const start = unixNowMs();
-    const everything = await this.table?.toArray();
-    if ((everything?.length ?? 0) > 0) {
-      const allKeys = new Set(everything?.map(a => a.pubkey));
-      const missingKeys = keys.filter(a => !allKeys.has(a));
-      await this.backFill(system, missingKeys);
-      debug(this.name)(`Backfilled %d keys in %d ms`, missingKeys.length, (unixNowMs() - start).toLocaleString());
-    }
-  }
-}

packages/app/src/Cache/GiftWrapCache.ts

@@ -1,8 +1,9 @@
-import { EventKind, EventPublisher, RequestBuilder, TaggedNostrEvent } from "@snort/system";
-import { UnwrappedGift, db } from "@/Db";
-import { findTag, unwrap } from "@/SnortUtils";
-import { RefreshFeedCache } from "./RefreshFeedCache";
-import { LoginSession, LoginSessionType } from "@/Login";
+import { EventKind, EventPublisher, TaggedNostrEvent } from "@snort/system";
+
+import { db, UnwrappedGift } from "@/Db";
+import { findTag, unwrap } from "@/Utils";
+
+import { RefreshFeedCache, TWithCreated } from "./RefreshFeedCache";
 
 export class GiftWrapCache extends RefreshFeedCache<UnwrappedGift> {
   constructor() {
@@ -13,11 +14,8 @@ export class GiftWrapCache extends RefreshFeedCache<UnwrappedGift> {
     return of.id;
   }
 
-  buildSub(session: LoginSession, rb: RequestBuilder): void {
-    const pubkey = session.publicKey;
-    if (pubkey && session.type === LoginSessionType.PrivateKey) {
-      rb.withFilter().kinds([EventKind.GiftWrap]).tag("p", [pubkey]).since(this.newest());
-    }
+  buildSub(): void {
+    // not used
   }
 
   takeSnapshot(): Array<UnwrappedGift> {
@@ -55,4 +53,8 @@ export class GiftWrapCache extends RefreshFeedCache<UnwrappedGift> {
     }
     await this.bulkSet(unwrapped);
   }
+
+  search(): Promise<TWithCreated<UnwrappedGift>[]> {
+    throw new Error("Method not implemented.");
+  }
 }

packages/app/src/Cache/Notifications.ts

@@ -1,45 +0,0 @@
-import { EventKind, NostrEvent, RequestBuilder, TaggedNostrEvent } from "@snort/system";
-import { RefreshFeedCache, TWithCreated } from "./RefreshFeedCache";
-import { LoginSession } from "@/Login";
-import { NostrEventForSession, db } from "@/Db";
-import { Day } from "@/Const";
-import { unixNow } from "@snort/shared";
-
-export class NotificationsCache extends RefreshFeedCache<NostrEventForSession> {
-  #kinds = [EventKind.TextNote, EventKind.Reaction, EventKind.Repost, EventKind.ZapReceipt];
-
-  constructor() {
-    super("notifications", db.notifications);
-  }
-
-  buildSub(session: LoginSession, rb: RequestBuilder) {
-    if (session.publicKey) {
-      const newest = this.newest(v => v.tags.some(a => a[0] === "p" && a[1] === session.publicKey));
-      rb.withFilter()
-        .kinds(this.#kinds)
-        .tag("p", [session.publicKey])
-        .since(newest === 0 ? unixNow() - Day * 30 : newest);
-    }
-  }
-
-  async onEvent(evs: readonly TaggedNostrEvent[], pubKey: string) {
-    const filtered = evs.filter(a => this.#kinds.includes(a.kind) && a.tags.some(b => b[0] === "p"));
-    if (filtered.length > 0) {
-      await this.bulkSet(
-        filtered.map(v => ({
-          ...v,
-          forSession: pubKey,
-        })),
-      );
-      this.notifyChange(filtered.map(v => this.key(v)));
-    }
-  }
-
-  key(of: TWithCreated<NostrEvent>): string {
-    return of.id;
-  }
-
-  takeSnapshot() {
-    return [...this.cache.values()];
-  }
-}

packages/app/src/Cache/PaymentsCache.ts

@@ -1,16 +0,0 @@
-import { Payment, db } from "@/Db";
-import { FeedCache } from "@snort/shared";
-
-export class Payments extends FeedCache<Payment> {
-  constructor() {
-    super("PaymentsCache", db.payments);
-  }
-
-  key(of: Payment): string {
-    return of.url;
-  }
-
-  takeSnapshot(): Array<Payment> {
-    return [...this.cache.values()];
-  }
-}

packages/app/src/Cache/ProfileWorkerCache.ts

@@ -0,0 +1,123 @@
+import { CachedTable, CacheEvents, removeUndefined, unixNowMs, unwrap } from "@snort/shared";
+import { CachedMetadata, CacheRelay, mapEventToProfile, NostrEvent } from "@snort/system";
+import debug from "debug";
+import { EventEmitter } from "eventemitter3";
+
+export class ProfileCacheRelayWorker extends EventEmitter<CacheEvents> implements CachedTable<CachedMetadata> {
+  #relay: CacheRelay;
+  #keys = new Set<string>();
+  #cache = new Map<string, CachedMetadata>();
+  #log = debug("ProfileCacheRelayWorker");
+
+  constructor(relay: CacheRelay) {
+    super();
+    this.#relay = relay;
+  }
+
+  async preload() {
+    const start = unixNowMs();
+    const profiles = await this.#relay.query([
+      "REQ",
+      "profiles-preload",
+      {
+        kinds: [0],
+      },
+    ]);
+    this.#cache = new Map<string, CachedMetadata>(profiles.map(a => [a.pubkey, unwrap(mapEventToProfile(a))]));
+    this.#keys = new Set<string>(this.#cache.keys());
+    this.#log(`Loaded %d/%d in %d ms`, this.#cache.size, this.#keys.size, (unixNowMs() - start).toLocaleString());
+  }
+
+  async search(q: string) {
+    const profiles = await this.#relay.query([
+      "REQ",
+      "profiles-search",
+      {
+        kinds: [0],
+        search: q,
+      },
+    ]);
+    return removeUndefined(profiles.map(mapEventToProfile));
+  }
+
+  keysOnTable(): string[] {
+    return [...this.#keys];
+  }
+
+  getFromCache(key?: string | undefined) {
+    if (key) {
+      return this.#cache.get(key);
+    }
+  }
+
+  discover(ev: NostrEvent) {
+    if (ev.kind === 0) {
+      this.#keys.add(ev.pubkey);
+    }
+  }
+
+  async get(key?: string | undefined) {
+    if (key) {
+      const cached = this.getFromCache(key);
+      if (cached) {
+        return cached;
+      }
+      const res = await this.bulkGet([key]);
+      if (res.length > 0) {
+        return res[0];
+      }
+    }
+  }
+
+  async bulkGet(keys: string[]) {
+    if (keys.length === 0) return [];
+
+    const results = await this.#relay.query([
+      "REQ",
+      "ProfileCacheRelayWorker.bulkGet",
+      {
+        authors: keys,
+        kinds: [0],
+      },
+    ]);
+    const mapped = removeUndefined(results.map(a => mapEventToProfile(a)));
+    for (const pf of mapped) {
+      this.#cache.set(this.key(pf), pf);
+    }
+    this.emit(
+      "change",
+      mapped.map(a => this.key(a)),
+    );
+    return mapped;
+  }
+
+  async set(obj: CachedMetadata) {
+    this.#keys.add(this.key(obj));
+  }
+
+  async bulkSet(obj: CachedMetadata[] | readonly CachedMetadata[]) {
+    const mapped = obj.map(a => this.key(a));
+    mapped.forEach(a => this.#keys.add(a));
+    // todo: store in cache
+    this.emit("change", mapped);
+  }
+
+  async update(): Promise<"new" | "refresh" | "updated" | "no_change"> {
+    // do nothing
+    return "refresh";
+  }
+
+  async buffer(keys: string[]) {
+    const missing = keys.filter(a => !this.#cache.has(a));
+    const res = await this.bulkGet(missing);
+    return missing.filter(a => !res.some(b => this.key(b) === a));
+  }
+
+  key(of: CachedMetadata) {
+    return of.pubkey;
+  }
+
+  snapshot() {
+    return [...this.#cache.values()];
+  }
+}

packages/app/src/Cache/RefreshFeedCache.ts

@@ -1,6 +1,7 @@
 import { FeedCache } from "@snort/shared";
 import { EventPublisher, RequestBuilder, TaggedNostrEvent } from "@snort/system";
-import { LoginSession } from "@/Login";
+
+import { LoginSession } from "@/Utils/Login";
 
 export type TWithCreated<T> = (T | Readonly<T>) & { created_at: number };
 
@@ -23,7 +24,6 @@ export abstract class RefreshFeedCache<T> extends FeedCache<TWithCreated<T>> {
 
   override async preload(): Promise<void> {
     await super.preload();
-    // load all dms to memory
     await this.buffer([...this.onTable]);
   }
 }

packages/app/src/Cache/TextCache.tsx

@@ -0,0 +1,6 @@
+import { ParsedFragment } from "@snort/system";
+import { LRUCache } from "typescript-lru-cache";
+
+export const TextCache = new LRUCache<string, Array<ParsedFragment>>({
+  maxSize: 1000,
+});

packages/app/src/Cache/UserFollowsWorker.ts

@@ -0,0 +1,128 @@
+import { CachedTable, CacheEvents, removeUndefined, unixNowMs, unwrap } from "@snort/shared";
+import { CacheRelay, EventKind, NostrEvent, UsersFollows } from "@snort/system";
+import debug from "debug";
+import { EventEmitter } from "eventemitter3";
+
+export class UserFollowsWorker extends EventEmitter<CacheEvents> implements CachedTable<UsersFollows> {
+  #relay: CacheRelay;
+  #keys = new Set<string>();
+  #cache = new Map<string, UsersFollows>();
+  #log = debug("UserFollowsWorker");
+
+  constructor(relay: CacheRelay) {
+    super();
+    this.#relay = relay;
+  }
+
+  async preload() {
+    const start = unixNowMs();
+    const profiles = await this.#relay.query([
+      "REQ",
+      "profiles-preload",
+      {
+        kinds: [3],
+      },
+    ]);
+    this.#cache = new Map<string, UsersFollows>(profiles.map(a => [a.pubkey, unwrap(mapEventToUserFollows(a))]));
+    this.#keys = new Set<string>(this.#cache.keys());
+    this.#log(`Loaded %d/%d in %d ms`, this.#cache.size, this.#keys.size, (unixNowMs() - start).toLocaleString());
+  }
+
+  async search(q: string) {
+    const results = await this.#relay.query([
+      "REQ",
+      "contacts-search",
+      {
+        kinds: [3],
+        search: q,
+      },
+    ]);
+    return removeUndefined(results.map(mapEventToUserFollows));
+  }
+
+  keysOnTable(): string[] {
+    return [...this.#keys];
+  }
+
+  getFromCache(key?: string | undefined): UsersFollows | undefined {
+    if (key) {
+      return this.#cache.get(key);
+    }
+  }
+
+  discover(ev: NostrEvent) {
+    this.#keys.add(ev.pubkey);
+  }
+
+  async get(key?: string | undefined): Promise<UsersFollows | undefined> {
+    if (key) {
+      const res = await this.bulkGet([key]);
+      if (res.length > 0) {
+        return res[0];
+      }
+    }
+  }
+
+  async bulkGet(keys: string[]) {
+    if (keys.length === 0) return [];
+
+    const results = await this.#relay.query([
+      "REQ",
+      "UserFollowsWorker.bulkGet",
+      {
+        authors: keys,
+        kinds: [3],
+      },
+    ]);
+    const mapped = removeUndefined(results.map(a => mapEventToUserFollows(a)));
+    for (const pf of mapped) {
+      this.#cache.set(this.key(pf), pf);
+    }
+    this.emit(
+      "change",
+      mapped.map(a => this.key(a)),
+    );
+    return mapped;
+  }
+
+  async set(obj: UsersFollows) {
+    this.#keys.add(this.key(obj));
+  }
+
+  async bulkSet(obj: UsersFollows[] | readonly UsersFollows[]) {
+    const mapped = obj.map(a => this.key(a));
+    mapped.forEach(a => this.#keys.add(a));
+    // todo: store in cache
+    this.emit("change", mapped);
+  }
+
+  async update(): Promise<"new" | "refresh" | "updated" | "no_change"> {
+    // do nothing
+    return "refresh";
+  }
+
+  async buffer(keys: string[]): Promise<string[]> {
+    const missing = keys.filter(a => !this.#keys.has(a));
+    const res = await this.bulkGet(missing);
+    return missing.filter(a => !res.some(b => this.key(b) === a));
+  }
+
+  key(of: UsersFollows): string {
+    return of.pubkey;
+  }
+
+  snapshot(): UsersFollows[] {
+    return [...this.#cache.values()];
+  }
+}
+
+export function mapEventToUserFollows(ev: NostrEvent): UsersFollows | undefined {
+  if (ev.kind !== EventKind.ContactList) return;
+
+  return {
+    pubkey: ev.pubkey,
+    loaded: unixNowMs(),
+    created: ev.created_at,
+    follows: ev.tags,
+  };
+}

packages/app/src/Cache/index.ts

@@ -1,38 +1,86 @@
-import { UserProfileCache, UserRelaysCache, RelayMetricCache } from "@snort/system";
+import { CacheRelay, Connection, ConnectionCacheRelay, RelayMetricCache, UserRelaysCache } from "@snort/system";
 import { SnortSystemDb } from "@snort/system-web";
+import { WorkerRelayInterface } from "@snort/worker-relay";
+import WorkerVite from "@snort/worker-relay/src/worker?worker";
 
-import { EventInteractionCache } from "./EventInteractionCache";
-import { ChatCache } from "./ChatCache";
-import { Payments } from "./PaymentsCache";
+import { EventCacheWorker } from "./EventCacheWorker";
 import { GiftWrapCache } from "./GiftWrapCache";
-import { NotificationsCache } from "./Notifications";
-import { FollowsFeedCache } from "./FollowsFeed";
-import { FollowListCache } from "./FollowListCache";
+import { ProfileCacheRelayWorker } from "./ProfileWorkerCache";
+import { UserFollowsWorker } from "./UserFollowsWorker";
+
+const cacheRelay = localStorage.getItem("cache-relay");
+
+const workerRelay = new WorkerRelayInterface(
+  import.meta.env.DEV ? new URL("@snort/worker-relay/dist/esm/worker.mjs", import.meta.url) : new WorkerVite(),
+);
+
+export const Relay: CacheRelay = cacheRelay
+  ? new ConnectionCacheRelay(new Connection(cacheRelay, { read: true, write: true }))
+  : workerRelay;
+
+async function tryUseCacheRelay(url: string) {
+  try {
+    const conn = new Connection(url, { read: true, write: true });
+    await conn.connect(true);
+    localStorage.setItem("cache-relay", url);
+    return conn;
+  } catch (e) {
+    console.error(e);
+  }
+}
+
+export async function initRelayWorker() {
+  try {
+    if (!cacheRelay) {
+      let conn = await tryUseCacheRelay("ws://localhost:4869");
+      if (!conn) {
+        conn = await tryUseCacheRelay("ws://umbrel:4848");
+      }
+      if (conn) {
+        window.location.reload();
+        return;
+      }
+    } else if (Relay instanceof ConnectionCacheRelay) {
+      await Relay.connection.connect(true);
+      return;
+    }
+  } catch (e) {
+    localStorage.removeItem("cache-relay");
+    console.error(e);
+    if (cacheRelay) {
+      window.location.reload();
+    }
+  }
+
+  try {
+    await workerRelay.debug("");
+    await workerRelay.init({
+      databasePath: "relay.db",
+      insertBatchSize: 100,
+    });
+  } catch (e) {
+    console.error(e);
+  }
+}
 
 export const SystemDb = new SnortSystemDb();
-export const UserCache = new UserProfileCache(SystemDb.users);
 export const UserRelays = new UserRelaysCache(SystemDb.userRelays);
 export const RelayMetrics = new RelayMetricCache(SystemDb.relayMetrics);
 
-export const Chats = new ChatCache();
-export const PaymentsCache = new Payments();
-export const InteractionCache = new EventInteractionCache();
+export const UserFollows = new UserFollowsWorker(Relay);
+export const UserCache = new ProfileCacheRelayWorker(Relay);
+export const EventsCache = new EventCacheWorker(Relay);
+
 export const GiftsCache = new GiftWrapCache();
-export const Notifications = new NotificationsCache();
-export const FollowsFeed = new FollowsFeedCache();
-export const FollowLists = new FollowListCache();
 
 export async function preload(follows?: Array<string>) {
   const preloads = [
-    UserCache.preload(follows),
-    Chats.preload(),
-    InteractionCache.preload(),
-    UserRelays.preload(follows),
+    UserCache.preload(),
     RelayMetrics.preload(),
     GiftsCache.preload(),
-    Notifications.preload(),
-    FollowsFeed.preload(),
-    FollowLists.preload(),
+    UserRelays.preload(follows),
+    EventsCache.preload(),
+    UserFollows.preload(),
   ];
   await Promise.all(preloads);
 }

packages/app/src/Components/Button/AsyncButton.css

@@ -19,10 +19,10 @@
   box-shadow: rgba(0, 0, 0, 0.08) 0 1px 1px;
 }
 
-.light .spinner-button:hover {
+.light .spinner-button:not(.primary):hover {
   box-shadow: rgba(0, 0, 0, 0.2) 0 1px 3px;
 }
 
-.light .spinner-button > span {
+.light .spinner-button:not(.primary) > span {
   color: black;
 }

packages/app/src/Components/Button/AsyncButton.tsx

@@ -1,8 +1,10 @@
 import "./AsyncButton.css";
-import React, { ForwardedRef } from "react";
-import Spinner from "../Icons/Spinner";
-import useLoading from "@/Hooks/useLoading";
+
 import classNames from "classnames";
+import React, { ForwardedRef } from "react";
+
+import Spinner from "@/Components/Icons/Spinner";
+import useLoading from "@/Hooks/useLoading";
 
 export interface AsyncButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   onClick?: (e: React.MouseEvent) => Promise<void> | void;
@@ -29,4 +31,6 @@ const AsyncButton = React.forwardRef<HTMLButtonElement, AsyncButtonProps>((props
   );
 });
 
+AsyncButton.displayName = "AsyncButton";
+
 export default AsyncButton;

packages/app/src/Components/Button/AsyncIcon.tsx

@@ -1,6 +1,6 @@
-import Icon from "@/Icons/Icon";
+import Icon from "@/Components/Icons/Icon";
+import Spinner from "@/Components/Icons/Spinner";
 import useLoading from "@/Hooks/useLoading";
-import Spinner from "@/Icons/Spinner";
 
 export type AsyncIconProps = React.HTMLProps<HTMLDivElement> & {
   iconName: string;

packages/app/src/Components/Button/BackButton.tsx

@@ -1,9 +1,10 @@
 import "./BackButton.css";
+
 import { useIntl } from "react-intl";
 
-import Icon from "@/Icons/Icon";
+import Icon from "@/Components/Icons/Icon";
 
-import messages from "./messages";
+import messages from "../messages";
 
 interface BackButtonProps {
   text?: string;

packages/app/src/Components/Button/CloseButton.tsx

@@ -0,0 +1,16 @@
+import classNames from "classnames";
+
+import Icon from "@/Components/Icons/Icon";
+
+export default function CloseButton({ onClick, className }: { onClick?: () => void; className?: string }) {
+  return (
+    <div
+      onClick={onClick}
+      className={classNames(
+        "self-center circle flex flex-shrink-0 flex-grow-0 items-center justify-center hover:opacity-80 bg-dark p-2 cursor-pointer",
+        className,
+      )}>
+      <Icon name="close" size={12} />
+    </div>
+  );
+}

packages/app/src/Components/Button/IconButton.tsx

@@ -1,7 +1,8 @@
 import classNames from "classnames";
-import Icon, { IconProps } from "@/Icons/Icon";
 import type { ReactNode } from "react";
 
+import Icon, { IconProps } from "@/Components/Icons/Icon";
+
 interface IconButtonProps {
   onClick?: () => void;
   icon: IconProps;

packages/app/src/Components/Button/LogoutButton.tsx

@@ -1,9 +1,10 @@
 import { FormattedMessage } from "react-intl";
 import { useNavigate } from "react-router-dom";
 
-import { logout } from "@/Login";
 import useLogin from "@/Hooks/useLogin";
-import messages from "./messages";
+import { logout } from "@/Utils/Login";
+
+import messages from "../messages";
 
 export default function LogoutButton() {
   const navigate = useNavigate();

packages/app/src/Components/Button/NavLink.tsx

@@ -0,0 +1,20 @@
+import { NavLink as RouterNavLink, NavLinkProps, useLocation } from "react-router-dom";
+
+export default function NavLink(props: NavLinkProps) {
+  const { to, onClick, ...rest } = props;
+  const location = useLocation();
+
+  const isActive = location.pathname === to.toString();
+
+  const handleClick = event => {
+    if (onClick) {
+      onClick(event);
+    }
+
+    if (isActive) {
+      window.scrollTo({ top: 0, behavior: "instant" });
+    }
+  };
+
+  return <RouterNavLink to={to} onClick={handleClick} {...rest} />;
+}

packages/app/src/Components/Collapsed.tsx

@@ -1,8 +1,7 @@
-import { useState, ReactNode } from "react";
 import classNames from "classnames";
+import { ReactNode, useState } from "react";
 
-import Icon from "@/Icons/Icon";
-import ShowMore from "@/Element/Event/ShowMore";
+import Icon from "@/Components/Icons/Icon";
 
 interface CollapsedProps {
   text?: string;
@@ -13,8 +12,8 @@ interface CollapsedProps {
 
 const Collapsed = ({ text, children, collapsed, setCollapsed }: CollapsedProps) => {
   return collapsed ? (
-    <div className="collapsed">
-      <ShowMore text={text} onClick={() => setCollapsed(false)} />
+    <div className="text-nostr-purple px-4 pb-3 cursor-pointer hover:underline" onClick={() => setCollapsed(false)}>
+      {text}
     </div>
   ) : (
     <div className="uncollapsed">{children}</div>

packages/app/src/Components/CommunityLeaders/Award.tsx

@@ -0,0 +1,54 @@
+export default function AwardIcon({ size }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 62 62" fill="none" className="award">
+      <defs>
+        <linearGradient
+          id="paint0_linear_2660_40043"
+          x1="31"
+          y1="3.57143"
+          x2="31"
+          y2="58.4286"
+          gradientUnits="userSpaceOnUse">
+          <stop stopColor="#5B2CB3" />
+          <stop offset="1" stopColor="#811EFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_2660_40043"
+          x1="15.5594"
+          y1="24.305"
+          x2="46.433"
+          y2="24.305"
+          gradientUnits="userSpaceOnUse">
+          <stop stopColor="#AC88FF" />
+          <stop offset="1" stopColor="#7234FF" />
+        </linearGradient>
+      </defs>
+      <g id="award-02">
+        <rect x="1.85713" y="1.85714" width="58.2857" height="58.2857" rx="29.1429" fill="#AC88FF" fillOpacity="0.2" />
+        <rect
+          x="1.85713"
+          y="1.85714"
+          width="58.2857"
+          height="58.2857"
+          rx="29.1429"
+          stroke="url(#paint0_linear_2660_40043)"
+          strokeWidth="3.42857"
+        />
+        <path
+          id="Solid"
+          d="M23.2006 52.4983L22.5639 50.9066L23.2006 52.4983L30.9963 49.38L38.7919 52.4983C39.8813 52.934 41.116 52.801 42.0876 52.1432C43.0592 51.4854 43.6412 50.3885 43.6412 49.2151V38.1015C46.467 35.038 48.1957 30.9408 48.1957 26.4427C48.1957 16.9437 40.4952 9.24329 30.9963 9.24329C21.4973 9.24329 13.7968 16.9437 13.7968 26.4427C13.7968 30.9408 15.5255 35.038 18.3513 38.1015V49.2151C18.3513 50.3885 18.9333 51.4854 19.9049 52.1432C20.8765 52.801 22.1112 52.934 23.2006 52.4983ZM27.2967 43.2429L25.4234 43.9922V42.7187C26.0332 42.9275 26.6584 43.1029 27.2967 43.2429ZM34.6958 43.2429C35.3341 43.1029 35.9593 42.9275 36.5691 42.7187V43.9922L34.6958 43.2429Z"
+          fill="url(#paint1_linear_2660_40043)"
+          stroke="#251250"
+          strokeWidth="3.42857"
+          strokeLinecap="round"
+        />
+        <path
+          id="Ellipse 1595"
+          d="M24.2557 14.6002C17.7766 18.3409 15.5567 26.6257 19.2974 33.1049L42.7604 19.5585C39.0196 13.0794 30.7348 10.8595 24.2557 14.6002Z"
+          fill="white"
+          fillOpacity="0.1"
+        />
+      </g>
+    </svg>
+  );
+}

packages/app/src/Components/CommunityLeaders/LeaderBadge.tsx

@@ -0,0 +1,49 @@
+import { useState } from "react";
+import { FormattedMessage } from "react-intl";
+import { Link } from "react-router-dom";
+
+import CloseButton from "../Button/CloseButton";
+import Modal from "../Modal/Modal";
+import AwardIcon from "./Award";
+
+export function LeaderBadge() {
+  const [showModal, setShowModal] = useState(false);
+  return (
+    <>
+      <div
+        className="flex gap-1 p-1 pr-2 items-center border border-[#5B2CB3] rounded-full"
+        onClick={e => {
+          e.preventDefault();
+          e.stopPropagation();
+          setShowModal(true);
+        }}>
+        <AwardIcon size={16} />
+        <div className="text-xs font-medium text-[#AC88FF]">
+          <FormattedMessage defaultMessage="Community Leader" />
+        </div>
+      </div>
+      {showModal && (
+        <Modal onClose={() => setShowModal(false)} id="leaders">
+          <div className="flex flex-col gap-4 items-center relative">
+            <CloseButton className="absolute right-2 top-2" onClick={() => setShowModal(false)} />
+            <AwardIcon size={80} />
+            <div className="text-3xl font-semibold">
+              <FormattedMessage defaultMessage="Community Leader" />
+            </div>
+            <p className="text-secondary">
+              <FormattedMessage
+                defaultMessage="Community leaders are individuals who grow the nostr ecosystem by being active in their local communities and helping onboard new users. Anyone can become a community leader, but few hold the current honorary title."
+                id="f1OxTe"
+              />
+            </p>
+            <Link to="/settings/invite">
+              <button className="primary">
+                <FormattedMessage defaultMessage="Become a leader" />
+              </button>
+            </Link>
+          </div>
+        </Modal>
+      )}
+    </>
+  );
+}

packages/app/src/Components/Copy/Copy.tsx

@@ -1,21 +1,29 @@
 import "./Copy.css";
+
 import classNames from "classnames";
-import Icon from "@/Icons/Icon";
-import { useCopy } from "@/useCopy";
+
+import Icon from "@/Components/Icons/Icon";
+import { useCopy } from "@/Hooks/useCopy";
 
 export interface CopyProps {
   text: string;
   maxSize?: number;
   className?: string;
+  showText?: boolean;
+  mask?: string;
 }
-export default function Copy({ text, maxSize = 32, className }: CopyProps) {
+export default function Copy({ text, maxSize = 32, className, showText, mask }: CopyProps) {
   const { copy, copied } = useCopy();
   const sliceLength = maxSize / 2;
-  const trimmed = text.length > maxSize ? `${text.slice(0, sliceLength)}...${text.slice(-sliceLength)}` : text;
+  const displayText = mask ? mask.repeat(text.length) : text;
+  const trimmed =
+    displayText.length > maxSize
+      ? `${displayText.slice(0, sliceLength)}...${displayText.slice(-sliceLength)}`
+      : displayText;
 
   return (
     <div className={classNames("copy flex pointer g8 items-center", className)} onClick={() => copy(text)}>
-      <span className="copy-body">{trimmed}</span>
+      {(showText ?? true) && <span className="copy-body">{trimmed}</span>}
       <span className="icon" style={{ color: copied ? "var(--success)" : "var(--highlight)" }}>
         {copied ? <Icon name="check" size={14} /> : <Icon name="copy-solid" size={14} />}
       </span>

packages/app/src/Components/Embed/AppleMusicEmbed.tsx

@@ -0,0 +1,24 @@
+const AppleMusicEmbed = ({ link }: { link: string }) => {
+  const convertedUrl = link.replace("music.apple.com", "embed.music.apple.com");
+  const isSongLink = /\?i=\d+$/.test(convertedUrl);
+
+  return (
+    <>
+      <iframe
+        allow="autoplay *; encrypted-media *; fullscreen *; clipboard-write"
+        frameBorder="0"
+        // eslint-disable-next-line react/no-unknown-property
+        credentialless=""
+        height={isSongLink ? 175 : 450}
+        style={{ width: "100%", maxWidth: 660, overflow: "hidden", background: "transparent" }}
+        sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-storage-access-by-user-activation allow-top-navigation-by-user-activation"
+        src={convertedUrl}
+      />
+      <a href={link} target="_blank" rel="noreferrer" onClick={e => e.stopPropagation()} className="ext">
+        {link}
+      </a>
+    </>
+  );
+};
+
+export default AppleMusicEmbed;

packages/app/src/Components/Embed/CashuNuts.css

@@ -0,0 +1,3 @@
+.cashu {
+  background: var(--cashu-gradient);
+}

packages/app/src/Components/Embed/CashuNuts.tsx

@@ -0,0 +1,82 @@
+import "./CashuNuts.css";
+
+import { useUserProfile } from "@snort/system-react";
+import { useEffect, useState } from "react";
+import { FormattedMessage, FormattedNumber } from "react-intl";
+
+import AsyncButton from "@/Components/Button/AsyncButton";
+import ECashIcon from "@/Components/Icons/ECash";
+import Icon from "@/Components/Icons/Icon";
+import { useCopy } from "@/Hooks/useCopy";
+import useLogin from "@/Hooks/useLogin";
+
+interface Token {
+  token: Array<{
+    mint: string;
+    proofs: Array<{
+      amount: number;
+    }>;
+  }>;
+  memo?: string;
+}
+
+export default function CashuNuts({ token }: { token: string }) {
+  const { publicKey } = useLogin(s => ({ publicKey: s.publicKey }));
+  const profile = useUserProfile(publicKey);
+  const { copy } = useCopy();
+
+  async function redeemToken(token: string) {
+    const lnurl = profile?.lud16 ?? "";
+    const url = `https://redeem.cashu.me?token=${encodeURIComponent(token)}&lightning=${encodeURIComponent(
+      lnurl,
+    )}&autopay=yes`;
+    window.open(url, "_blank");
+  }
+
+  const [cashu, setCashu] = useState<Token>();
+  useEffect(() => {
+    try {
+      if (!token.startsWith("cashuA") || token.length < 10) {
+        return;
+      }
+      import("@cashu/cashu-ts").then(({ getDecodedToken }) => {
+        const tkn = getDecodedToken(token);
+        setCashu(tkn);
+      });
+    } catch {
+      // ignored
+    }
+  }, [token]);
+
+  if (!cashu) return <>{token}</>;
+
+  const amount = cashu.token[0].proofs.reduce((acc, v) => acc + v.amount, 0);
+  return (
+    <div className="cashu flex justify-between p24 br items-center">
+      <div className="flex flex-col gap-2 f-ellipsis">
+        <div className="flex items-center gap-4">
+          <ECashIcon width={30} />
+          <FormattedMessage
+            defaultMessage="{n} eSats"
+            id="yAztTU"
+            values={{
+              n: (
+                <span className="text-3xl">
+                  <FormattedNumber value={amount} />
+                </span>
+              ),
+            }}
+          />
+        </div>
+      </div>
+      <div className="flex gap-2 items-center">
+        <AsyncButton onClick={() => copy(token)}>
+          <Icon name="copy" />
+        </AsyncButton>
+        <AsyncButton onClick={() => redeemToken(token)}>
+          <FormattedMessage defaultMessage="Redeem" />
+        </AsyncButton>
+      </div>
+    </div>
+  );
+}

packages/app/src/Components/Embed/GenericPlayer.tsx

@@ -0,0 +1,34 @@
+import { useState } from "react";
+
+import Icon from "../Icons/Icon";
+import { ProxyImg } from "../ProxyImg";
+
+export default function GenericPlayer({ url, poster }: { url: string; poster: string }) {
+  const [play, setPlay] = useState(false);
+
+  if (!play) {
+    return (
+      <div
+        className="relative aspect-video"
+        onClick={e => {
+          e.preventDefault();
+          e.stopPropagation();
+          setPlay(true);
+        }}>
+        <ProxyImg className="absolute" src={poster} />
+        <div className="absolute w-full h-full opacity-0 hover:opacity-100 hover:bg-black/30 flex items-center justify-center transition">
+          <Icon name="play-square-outline" size={50} />
+        </div>
+      </div>
+    );
+  }
+  return (
+    <iframe
+      className="aspect-video w-full"
+      src={url}
+      frameBorder="0"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+      allowFullScreen={true}
+    />
+  );
+}

packages/app/src/Components/Embed/Hashtag.tsx

@@ -1,6 +1,7 @@
-import { Link } from "react-router-dom";
 import "./Hashtag.css";
 
+import { Link } from "react-router-dom";
+
 const Hashtag = ({ tag }: { tag: string }) => {
   return (
     <span className="hashtag">

packages/app/src/Components/Embed/HyperText.tsx

@@ -1,30 +1,28 @@
-import { TwitterTweetEmbed } from "react-twitter-embed";
-
-import {
-  YoutubeUrlRegex,
-  TweetUrlRegex,
-  TidalRegex,
-  SoundCloudRegex,
-  MixCloudRegex,
-  SpotifyRegex,
-  TwitchRegex,
-  AppleMusicRegex,
-  NostrNestsRegex,
-  WavlakeRegex,
-} from "@/Const";
-import { magnetURIDecode } from "@/SnortUtils";
-import SoundCloudEmbed from "@/Element/Embed/SoundCloudEmded";
-import MixCloudEmbed from "@/Element/Embed/MixCloudEmbed";
-import SpotifyEmbed from "@/Element/Embed/SpotifyEmbed";
-import TidalEmbed from "@/Element/Embed/TidalEmbed";
-import TwitchEmbed from "@/Element/Embed/TwitchEmbed";
-import AppleMusicEmbed from "@/Element/Embed/AppleMusicEmbed";
-import WavlakeEmbed from "@/Element/Embed/WavlakeEmbed";
-import LinkPreview from "@/Element/Embed/LinkPreview";
-import NostrLink from "@/Element/Embed/NostrLink";
-import MagnetLink from "@/Element/Embed/MagnetLink";
 import { ReactNode } from "react";
 
+import AppleMusicEmbed from "@/Components/Embed/AppleMusicEmbed";
+import LinkPreview from "@/Components/Embed/LinkPreview";
+import MagnetLink from "@/Components/Embed/MagnetLink";
+import MixCloudEmbed from "@/Components/Embed/MixCloudEmbed";
+import NostrLink from "@/Components/Embed/NostrLink";
+import SoundCloudEmbed from "@/Components/Embed/SoundCloudEmded";
+import SpotifyEmbed from "@/Components/Embed/SpotifyEmbed";
+import TidalEmbed from "@/Components/Embed/TidalEmbed";
+import TwitchEmbed from "@/Components/Embed/TwitchEmbed";
+import WavlakeEmbed from "@/Components/Embed/WavlakeEmbed";
+import { magnetURIDecode } from "@/Utils";
+import {
+  AppleMusicRegex,
+  MixCloudRegex,
+  NostrNestsRegex,
+  SoundCloudRegex,
+  SpotifyRegex,
+  TidalRegex,
+  TwitchRegex,
+  WavlakeRegex,
+  YoutubeUrlRegex,
+} from "@/Utils/Const";
+
 interface HypeTextProps {
   link: string;
   children?: ReactNode | Array<ReactNode> | null;
@@ -37,7 +35,6 @@ export default function HyperText({ link, depth, showLinkPreview, children }: Hy
   try {
     const url = new URL(a);
     const youtubeId = YoutubeUrlRegex.test(a) && RegExp.$1;
-    const tweetId = TweetUrlRegex.test(a) && RegExp.$2;
     const tidalId = TidalRegex.test(a) && RegExp.$1;
     const soundcloundId = SoundCloudRegex.test(a) && RegExp.$1;
     const mixcloudId = MixCloudRegex.test(a) && RegExp.$1;
@@ -46,23 +43,25 @@ export default function HyperText({ link, depth, showLinkPreview, children }: Hy
     const isAppleMusicLink = AppleMusicRegex.test(a);
     const isNostrNestsLink = NostrNestsRegex.test(a);
     const isWavlakeLink = WavlakeRegex.test(a);
-    if (tweetId) {
+
+    if (youtubeId) {
       return (
-        <div className="tweet" key={tweetId}>
-          <TwitterTweetEmbed tweetId={tweetId} />
-        </div>
-      );
-    } else if (youtubeId) {
-      return (
-        <iframe
-          className="w-max"
-          src={`https://www.youtube.com/embed/${youtubeId}`}
-          title="YouTube video player"
-          key={youtubeId}
-          frameBorder="0"
-          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-          allowFullScreen={true}
-        />
+        <>
+          <iframe
+            // eslint-disable-next-line react/no-unknown-property
+            credentialless=""
+            className="-mx-4 md:mx-0 w-max my-2"
+            src={`https://www.youtube.com/embed/${youtubeId}`}
+            title="YouTube video player"
+            key={youtubeId}
+            frameBorder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            allowFullScreen={true}
+          />
+          <a href={a} onClick={e => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">
+            {a}
+          </a>
+        </>
       );
     } else if (tidalId) {
       return <TidalEmbed link={a} />;

packages/app/src/Components/Embed/Invoice.tsx

@@ -1,12 +1,13 @@
 import "./Invoice.css";
-import { useState } from "react";
-import { useIntl, FormattedMessage } from "react-intl";
-import { useMemo } from "react";
+
 import { decodeInvoice } from "@snort/shared";
 import classNames from "classnames";
+import { useState } from "react";
+import { useMemo } from "react";
+import { FormattedMessage, useIntl } from "react-intl";
 
-import SendSats from "@/Element/SendSats";
-import Icon from "@/Icons/Icon";
+import Icon from "@/Components/Icons/Icon";
+import ZapModal from "@/Components/ZapModal/ZapModal";
 import { useWallet } from "@/Wallet";
 
 import messages from "../messages";
@@ -35,7 +36,7 @@ export default function Invoice(props: InvoiceProps) {
           <FormattedMessage {...messages.Invoice} />
         </h4>
         <Icon name="zapCircle" className="zap-circle" />
-        <SendSats
+        <ZapModal
           title={formatMessage(messages.PayInvoice)}
           invoice={invoice}
           show={showInvoice}
@@ -76,7 +77,7 @@ export default function Invoice(props: InvoiceProps) {
           {description && <p>{description}</p>}
           {isPaid ? (
             <div className="paid">
-              <FormattedMessage defaultMessage="Paid" id="u/vOPu" />
+              <FormattedMessage defaultMessage="Paid" />
             </div>
           ) : (
             <button disabled={isExpired} type="button" onClick={payInvoice}>

packages/app/src/Components/Embed/LinkPreview.css

@@ -38,7 +38,9 @@
   font-size: 12px;
 }
 
-.link-preview-image {
+.link-preview-container img,
+.link-preview-container video,
+.link-preview-container iframe {
   margin: 0 0 15px 0 !important;
   border-radius: 0 !important;
   background-image: var(--img-url);

packages/app/src/Components/Embed/LinkPreview.tsx

@@ -1,13 +1,17 @@
 import "./LinkPreview.css";
-import { CSSProperties, useEffect, useState } from "react";
 
-import Spinner from "@/Icons/Spinner";
-import SnortApi, { LinkPreviewData } from "@/External/SnortApi";
-import useImgProxy from "@/Hooks/useImgProxy";
-import { MediaElement } from "@/Element/Embed/MediaElement";
+import { useEffect, useState } from "react";
+import { LRUCache } from "typescript-lru-cache";
+
+import { MediaElement } from "@/Components/Embed/MediaElement";
+import Spinner from "@/Components/Icons/Spinner";
+import { LinkPreviewData, NostrServices } from "@/External/NostrServices";
+
+import { ProxyImg } from "../ProxyImg";
+import GenericPlayer from "./GenericPlayer";
 
 async function fetchUrlPreviewInfo(url: string) {
-  const api = new SnortApi();
+  const api = new NostrServices("https://nostr.api.v0l.io");
   try {
     return await api.linkPreview(url.endsWith(")") ? url.slice(0, -1) : url);
   } catch (e) {
@@ -15,18 +19,23 @@ async function fetchUrlPreviewInfo(url: string) {
   }
 }
 
+const cache = new LRUCache<string, LinkPreviewData>({
+  maxSize: 100,
+});
+
 const LinkPreview = ({ url }: { url: string }) => {
-  const [preview, setPreview] = useState<LinkPreviewData | null>();
-  const { proxy } = useImgProxy();
+  const [preview, setPreview] = useState<LinkPreviewData | null>(cache.get(url));
 
   useEffect(() => {
     (async () => {
+      if (preview) return;
       const data = await fetchUrlPreviewInfo(url);
       if (data) {
         const type = data.og_tags?.find(a => a[0].toLowerCase() === "og:type");
         const canPreviewType = type?.[1].startsWith("image") || type?.[1].startsWith("video") || false;
         if (canPreviewType || data.image) {
           setPreview(data);
+          cache.set(url, data);
           return;
         }
       }
@@ -48,9 +57,12 @@ const LinkPreview = ({ url }: { url: string }) => {
       const urlTags = ["og:video:secure_url", "og:video:url", "og:video"];
       const link = preview?.og_tags?.find(a => urlTags.includes(a[0].toLowerCase()))?.[1];
       const videoType = preview?.og_tags?.find(a => a[0].toLowerCase() === "og:video:type")?.[1] ?? "video/mp4";
-      if (link) {
+      if (link && videoType.startsWith("video/")) {
         return <MediaElement url={link} mime={videoType} />;
       }
+      if (link && videoType.startsWith("text/html") && preview?.image) {
+        return <GenericPlayer url={link} poster={preview?.image} />;
+      }
     }
     if (type?.startsWith("image")) {
       const urlTags = ["og:image:secure_url", "og:image:url", "og:image"];
@@ -61,9 +73,7 @@ const LinkPreview = ({ url }: { url: string }) => {
       }
     }
     if (preview?.image) {
-      const backgroundImage = preview?.image ? `url(${proxy(preview?.image)})` : "";
-      const style = { "--img-url": backgroundImage } as CSSProperties;
-      return <div className="link-preview-image" style={style}></div>;
+      return <ProxyImg src={preview?.image} className="w-full object-cover aspect-video" />;
     }
     return null;
   }

packages/app/src/Components/Embed/MagnetLink.tsx

@@ -1,6 +1,6 @@
 import { FormattedMessage } from "react-intl";
 
-import { Magnet } from "@/SnortUtils";
+import { Magnet } from "@/Utils";
 
 interface MagnetLinkProps {
   magnet: Magnet;
@@ -10,7 +10,7 @@ const MagnetLink = ({ magnet }: MagnetLinkProps) => {
   return (
     <div className="note-invoice">
       <h4>
-        <FormattedMessage defaultMessage="Magnet Link" id="Gcn9NQ" />
+        <FormattedMessage defaultMessage="Magnet Link" />
       </h4>
       <a href={magnet.raw} rel="noreferrer">
         {magnet.dn ?? magnet.infoHash}

packages/app/src/Components/Embed/MediaElement.tsx

@@ -0,0 +1,128 @@
+import { IMeta } from "@snort/system";
+import classNames from "classnames";
+import React, { CSSProperties, useEffect, useMemo, useRef } from "react";
+import { useInView } from "react-intersection-observer";
+
+import { ProxyImg } from "@/Components/ProxyImg";
+import useImgProxy from "@/Hooks/useImgProxy";
+
+interface MediaElementProps {
+  mime: string;
+  url: string;
+  meta?: IMeta;
+  onMediaClick?: (e: React.MouseEvent<HTMLImageElement>) => void;
+  size?: number;
+}
+
+interface AudioElementProps {
+  url: string;
+}
+
+interface VideoElementProps {
+  url: string;
+  meta?: IMeta;
+}
+
+interface ImageElementProps {
+  url: string;
+  meta?: IMeta;
+  size?: number;
+  onMediaClick?: (e: React.MouseEvent<HTMLImageElement>) => void;
+}
+
+const AudioElement = ({ url }: AudioElementProps) => {
+  return <audio key={url} src={url} controls />;
+};
+
+const ImageElement = ({ url, meta, onMediaClick, size }: ImageElementProps) => {
+  const imageRef = useRef<HTMLImageElement | null>(null);
+  const style = useMemo(() => {
+    const style = {} as CSSProperties;
+    if (meta?.height && meta.width && imageRef.current) {
+      const scale = imageRef.current.offsetWidth / meta.width;
+      style.height = `${Math.min(document.body.clientHeight * 0.8, meta.height * scale)}px`;
+    }
+    return style;
+  }, [imageRef?.current, meta]);
+
+  return (
+    <div
+      className={classNames("flex items-center -mx-4 md:mx-0 my-2", {
+        "md:h-[510px]": !meta && !CONFIG.media.preferLargeMedia,
+        "cursor-pointer": onMediaClick,
+      })}>
+      <ProxyImg
+        key={url}
+        src={url}
+        size={size}
+        sha256={meta?.sha256}
+        onClick={onMediaClick}
+        className={classNames("max-h-[80vh] w-full h-full object-contain object-center", {
+          "md:max-h-[510px]": !meta && !CONFIG.media.preferLargeMedia,
+        })}
+        style={style}
+        ref={imageRef}
+      />
+    </div>
+  );
+};
+
+const VideoElement = ({ url }: VideoElementProps) => {
+  const { proxy } = useImgProxy();
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  const { ref: videoContainerRef, inView } = useInView({ threshold: 0.33 });
+  const isMobile = window.innerWidth < 768;
+
+  useEffect(() => {
+    if (isMobile || !videoRef.current) {
+      return;
+    }
+    if (inView) {
+      videoRef.current.play();
+    } else {
+      videoRef.current.pause();
+    }
+  }, [inView]);
+
+  return (
+    <div
+      ref={videoContainerRef}
+      className={classNames("flex justify-center items-center -mx-4 md:mx-0 my-2", {
+        "md:h-[510px]": !CONFIG.media.preferLargeMedia,
+      })}>
+      <video
+        crossOrigin="anonymous"
+        ref={videoRef}
+        loop={true}
+        muted={!isMobile}
+        src={url}
+        controls
+        poster={proxy(url)}
+        className={classNames("max-h-[80vh]", { "md:max-h-[510px]": !CONFIG.media.preferLargeMedia })}
+        onClick={e => e.stopPropagation()}
+      />
+    </div>
+  );
+};
+
+export function MediaElement(props: MediaElementProps) {
+  if (props.mime.startsWith("image/")) {
+    return <ImageElement url={props.url} meta={props.meta} onMediaClick={props.onMediaClick} size={props.size} />;
+  } else if (props.mime.startsWith("audio/")) {
+    return <AudioElement url={props.url} />;
+  } else if (props.mime.startsWith("video/")) {
+    return <VideoElement url={props.url} />;
+  } else {
+    return (
+      <a
+        key={props.url}
+        href={props.url}
+        onClick={e => e.stopPropagation()}
+        target="_blank"
+        rel="noreferrer"
+        className="ext">
+        {props.url}
+      </a>
+    );
+  }
+}

packages/app/src/Components/Embed/Mention.tsx

@@ -0,0 +1,35 @@
+import { NostrLink, NostrPrefix } from "@snort/system";
+import { useUserProfile } from "@snort/system-react";
+import { useCallback, useRef, useState } from "react";
+
+import DisplayName from "@/Components/User/DisplayName";
+import { ProfileCard } from "@/Components/User/ProfileCard";
+import { ProfileLink } from "@/Components/User/ProfileLink";
+
+export default function Mention({ link }: { link: NostrLink }) {
+  const profile = useUserProfile(link.id);
+  const [isHovering, setIsHovering] = useState(false);
+
+  const hoverTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  const handleMouseEnter = useCallback(() => {
+    hoverTimeoutRef.current && clearTimeout(hoverTimeoutRef.current);
+    hoverTimeoutRef.current = setTimeout(() => setIsHovering(true), 100); // Adjust timeout as needed
+  }, []);
+
+  const handleMouseLeave = useCallback(() => {
+    hoverTimeoutRef.current && clearTimeout(hoverTimeoutRef.current);
+    hoverTimeoutRef.current = setTimeout(() => setIsHovering(false), 300); // Adjust timeout as needed
+  }, []);
+
+  if (link.type !== NostrPrefix.Profile && link.type !== NostrPrefix.PublicKey) return;
+
+  return (
+    <span className="highlight" onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
+      <ProfileLink pubkey={link.id} link={link} user={profile} onClick={e => e.stopPropagation()}>
+        @<DisplayName user={profile} pubkey={link.id} />
+      </ProfileLink>
+      {isHovering && <ProfileCard pubkey={link.id} user={profile} show={true} />}
+    </span>
+  );
+}

packages/app/src/Components/Embed/MixCloudEmbed.tsx

@@ -1,10 +1,10 @@
-import { MixCloudRegex } from "@/Const";
-import useLogin from "@/Hooks/useLogin";
+import usePreferences from "@/Hooks/usePreferences";
+import { MixCloudRegex } from "@/Utils/Const";
 
 const MixCloudEmbed = ({ link }: { link: string }) => {
   const feedPath = (MixCloudRegex.test(link) && RegExp.$1) + "%2F" + (MixCloudRegex.test(link) && RegExp.$2);
 
-  const theme = useLogin(s => s.appData.item.preferences.theme);
+  const theme = usePreferences(s => s.theme);
   const lightParams = theme === "light" ? "light=1" : "light=0";
   return (
     <>
@@ -16,6 +16,9 @@ const MixCloudEmbed = ({ link }: { link: string }) => {
         frameBorder="0"
         src={`https://www.mixcloud.com/widget/iframe/?hide_cover=1&${lightParams}&feed=%2F${feedPath}%2F`}
       />
+      <a href={link} target="_blank" rel="noreferrer">
+        {link}
+      </a>
     </>
   );
 };

packages/app/src/Components/Embed/NostrLink.tsx

@@ -1,17 +1,13 @@
-import { Link } from "react-router-dom";
 import { NostrPrefix, tryParseNostrLink } from "@snort/system";
+import { Link } from "react-router-dom";
 
-import Mention from "@/Element/Embed/Mention";
-import NoteQuote from "@/Element/Event/NoteQuote";
+import Mention from "@/Components/Embed/Mention";
+import NoteQuote from "@/Components/Event/Note/NoteQuote";
 
 export default function NostrLink({ link, depth }: { link: string; depth?: number }) {
   const nav = tryParseNostrLink(link);
 
   if (nav?.type === NostrPrefix.PublicKey || nav?.type === NostrPrefix.Profile) {
-    if (nav.id.startsWith("npub")) {
-      // eslint-disable-next-line no-debugger
-      debugger;
-    }
     return <Mention link={nav} />;
   } else if (nav?.type === NostrPrefix.Note || nav?.type === NostrPrefix.Event || nav?.type === NostrPrefix.Address) {
     if ((depth ?? 0) > 0) {

packages/app/src/Components/Embed/PubkeyList.tsx

@@ -1,37 +1,38 @@
-import { NostrEvent } from "@snort/system";
-import { FormattedMessage, FormattedNumber } from "react-intl";
 import { LNURL } from "@snort/shared";
+import { NostrEvent } from "@snort/system";
+import { WalletInvoiceState } from "@snort/wallet";
+import { FormattedMessage, FormattedNumber } from "react-intl";
 
-import { dedupe, findTag, hexToBech32, getDisplayName } from "@/SnortUtils";
-import FollowListBase from "@/Element/User/FollowListBase";
-import AsyncButton from "@/Element/AsyncButton";
-import { useWallet } from "@/Wallet";
-import { Toastore } from "@/Toaster";
 import { UserCache } from "@/Cache";
-import useLogin from "@/Hooks/useLogin";
+import AsyncButton from "@/Components/Button/AsyncButton";
+import { Toastore } from "@/Components/Toaster/Toaster";
+import FollowListBase from "@/Components/User/FollowListBase";
 import useEventPublisher from "@/Hooks/useEventPublisher";
-import { WalletInvoiceState } from "@/Wallet";
+import usePreferences from "@/Hooks/usePreferences";
+import { dedupe, findTag, getDisplayName, hexToBech32 } from "@/Utils";
+import { useWallet } from "@/Wallet";
 
 export default function PubkeyList({ ev, className }: { ev: NostrEvent; className?: string }) {
   const wallet = useWallet();
-  const login = useLogin();
-  const { publisher } = useEventPublisher();
+  const defaultZapAmount = usePreferences(s => s.defaultZapAmount);
+  const { publisher, system } = useEventPublisher();
   const ids = dedupe(ev.tags.filter(a => a[0] === "p").map(a => a[1]));
 
   async function zapAll() {
     for (const pk of ids) {
       try {
         const profile = await UserCache.get(pk);
-        const amtSend = login.appData.item.preferences.defaultZapAmount;
+        const amtSend = defaultZapAmount;
         const lnurl = profile?.lud16 || profile?.lud06;
         if (lnurl) {
           const svc = new LNURL(lnurl);
           await svc.load();
 
+          const relays = await system.requestRouter?.forReplyTo(pk);
           const zap = await publisher?.zap(
             amtSend * 1000,
             pk,
-            Object.keys(login.relays.item),
+            relays ?? [],
             undefined,
             `Zap from ${hexToBech32("note", ev.id)}`,
           );
@@ -74,7 +75,7 @@ export default function PubkeyList({ ev, className }: { ev: NostrEvent; classNam
               defaultMessage="Zap all {n} sats"
               id="IVbtTS"
               values={{
-                n: <FormattedNumber value={login.appData.item.preferences.defaultZapAmount * ids.length} />,
+                n: <FormattedNumber value={defaultZapAmount * ids.length} />,
               }}
             />
           </AsyncButton>

packages/app/src/Components/Embed/SoundCloudEmded.tsx

@@ -0,0 +1,20 @@
+const SoundCloudEmbed = ({ link }: { link: string }) => {
+  return (
+    <>
+      <iframe
+        // eslint-disable-next-line react/no-unknown-property
+        credentialless=""
+        width="100%"
+        height="166"
+        scrolling="no"
+        allow="autoplay"
+        src={`https://w.soundcloud.com/player/?url=${link}`}
+      />
+      <a href={link} target="_blank" rel="noreferrer" onClick={e => e.stopPropagation()} className="ext">
+        {link}
+      </a>
+    </>
+  );
+};
+
+export default SoundCloudEmbed;

packages/app/src/Components/Embed/SpotifyEmbed.tsx

@@ -0,0 +1,24 @@
+const SpotifyEmbed = ({ link }: { link: string }) => {
+  const convertedUrl = link.replace(/\/(track|album|playlist|episode)\/([a-zA-Z0-9]+)/, "/embed/$1/$2");
+
+  return (
+    <>
+      <iframe
+        // eslint-disable-next-line react/no-unknown-property
+        credentialless=""
+        style={{ borderRadius: 12 }}
+        src={convertedUrl}
+        width="100%"
+        height="352"
+        frameBorder="0"
+        allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
+        loading="lazy"
+      />
+      <a href={link} target="_blank" rel="noreferrer" onClick={e => e.stopPropagation()} className="ext">
+        {link}
+      </a>
+    </>
+  );
+};
+
+export default SpotifyEmbed;

packages/app/src/Components/Embed/TidalEmbed.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
-import { TidalRegex } from "@/Const";
+
+import { TidalRegex } from "@/Utils/Const";
 
 // Re-use dom parser across instances of TidalEmbed
 const domParser = new DOMParser();
@@ -45,13 +46,32 @@ const TidalEmbed = ({ link }: { link: string }) => {
       .catch(console.error);
   }, [link]);
 
-  if (!source)
+  if (!source) {
     return (
       <a href={link} target="_blank" rel="noreferrer" onClick={e => e.stopPropagation()} className="ext">
         {link}
       </a>
     );
-  return <iframe src={source} style={extraStyles} width="100%" title="TIDAL Embed" frameBorder={0} />;
+  }
+  const iframe = (
+    <iframe
+      src={source}
+      style={extraStyles}
+      width="100%"
+      allow="encrypted-media *; clipboard-write *; clipboard-read *"
+      sandbox="allow-scripts allow-popups allow-forms allow-same-origin"
+      title="TIDAL Embed"
+      frameBorder={0}
+    />
+  );
+  return (
+    <>
+      {iframe}
+      <a href={link} target="_blank" rel="noreferrer" onClick={e => e.stopPropagation()} className="ext">
+        {link}
+      </a>
+    </>
+  );
 };
 
 export default TidalEmbed;

packages/app/src/Components/Embed/TwitchEmbed.tsx

@@ -0,0 +1,15 @@
+const TwitchEmbed = ({ link }: { link: string }) => {
+  const channel = link.split("/").slice(-1);
+
+  const args = `?channel=${channel}&parent=${window.location.hostname}&muted=true`;
+  return (
+    <>
+      <iframe src={`https://player.twitch.tv/${args}`} className="w-max" allowFullScreen={true} />
+      <a href={link} target="_blank" rel="noreferrer" onClick={e => e.stopPropagation()} className="ext">
+        {link}
+      </a>
+    </>
+  );
+};
+
+export default TwitchEmbed;

packages/app/src/Components/Embed/WavlakeEmbed.tsx

@@ -0,0 +1,23 @@
+const WavlakeEmbed = ({ link }: { link: string }) => {
+  const convertedUrl = link.replace(/(?:player\.|www\.)?wavlake\.com/, "embed.wavlake.com");
+
+  return (
+    <>
+      <iframe
+        // eslint-disable-next-line react/no-unknown-property
+        credentialless=""
+        style={{ borderRadius: 12 }}
+        src={convertedUrl}
+        width="100%"
+        height="380"
+        frameBorder="0"
+        loading="lazy"
+      />
+      <a href={link} target="_blank" rel="noreferrer" onClick={e => e.stopPropagation()} className="ext">
+        {link}
+      </a>
+    </>
+  );
+};
+
+export default WavlakeEmbed;

packages/app/src/Components/Embed/ZapstrEmbed.tsx

@@ -1,10 +1,11 @@
 import "./ZapstrEmbed.css";
-import { Link } from "react-router-dom";
-import { NostrEvent, NostrLink } from "@snort/system";
 
-import { ProxyImg } from "@/Element/ProxyImg";
-import ProfileImage from "@/Element/User/ProfileImage";
+import { NostrEvent, NostrLink } from "@snort/system";
 import { FormattedMessage } from "react-intl";
+import { Link } from "react-router-dom";
+
+import { ProxyImg } from "@/Components/ProxyImg";
+import ProfileImage from "@/Components/User/ProfileImage";
 
 export default function ZapstrEmbed({ ev }: { ev: NostrEvent }) {
   const media = ev.tags.find(a => a[0] === "media");
@@ -24,14 +25,14 @@ export default function ZapstrEmbed({ ev }: { ev: NostrEvent }) {
           <audio src={media?.[1] ?? ""} controls={true} />
           <div>
             {refPersons.map(a => (
-              <ProfileImage pubkey={a[1]} subHeader={<>{a[2] ?? ""}</>} className="" defaultNip=" " />
+              <ProfileImage key={a[1]} pubkey={a[1]} subHeader={<>{a[2] ?? ""}</>} className="" defaultNip=" " />
             ))}
           </div>
         </div>
       </div>
       <Link to={`https://zapstr.live/?track=${link}`} target="_blank">
         <button>
-          <FormattedMessage defaultMessage="Open on Zapstr" id="Lu5/Bj" />
+          <FormattedMessage defaultMessage="Open on Zapstr" />
         </button>
       </Link>
     </>

packages/app/src/Components/ErrorBoundary.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+import { trackEvent } from "@/Utils";
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  errorMessage?: string;
+  stack?: string;
+}
+
+interface ErrorBoundaryProps {
+  children: React.ReactNode;
+}
+
+export default class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, errorMessage: error.message, stack: error.stack };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error("Caught an error:", error, errorInfo);
+    trackEvent("error", { error: error.message, errorInfo: JSON.stringify(errorInfo) });
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // Render any custom fallback UI with the error message
+      return (
+        <div className="p-2">
+          <h1>Something went wrong.</h1>
+          <p>Error: {this.state.errorMessage}</p>
+          <pre className="text-xs overflow-auto mt-8">{this.state.stack}</pre>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

packages/app/src/Components/ErrorOrOffline.tsx

@@ -1,7 +1,10 @@
 import { OfflineError } from "@snort/shared";
-import { Offline } from "./Offline";
 import classNames from "classnames";
 
+import Icon from "@/Components/Icons/Icon";
+
+import { Offline } from "./Offline";
+
 export function ErrorOrOffline({
   error,
   onRetry,
@@ -14,6 +17,11 @@ export function ErrorOrOffline({
   if (error instanceof OfflineError) {
     return <Offline onRetry={onRetry} className={className} />;
   } else {
-    return <b className={classNames("error", className)}>{error.message}</b>;
+    return (
+      <div className={classNames("flex flex-row items-center px-4 py-3 gap-2", className)}>
+        <Icon name="alert-circle" size={24} />
+        <b>{error.message}</b>
+      </div>
+    );
   }
 }

packages/app/src/Components/Event/Create/NoteCreator.css

@@ -1,12 +1,3 @@
-.note-creator {
-  border: 1px solid transparent;
-  border-radius: 12px;
-  box-shadow: 0px 0px 6px 1px rgba(182, 108, 156, 0.3);
-  background:
-    linear-gradient(var(--gray-superdark), var(--gray-superdark)) padding-box,
-    linear-gradient(90deg, #ef9644, #fd7c49, #ff5e58, #ff3b70, #ff088e, #eb00b1, #c31ed5, #7b41f6) border-box;
-}
-
 .note-creator-modal .modal-body > div {
   display: flex;
   flex-direction: column;
@@ -45,7 +36,6 @@
   padding: 0;
   border-radius: 0;
   margin: 8px 12px;
-  background-color: var(--gray-superdark);
   min-height: 100px;
   width: stretch;
   width: -webkit-fill-available;
@@ -78,6 +68,7 @@
   justify-content: center;
   width: 32px;
   height: 32px;
+  cursor: pointer;
 }
 
 .note-creator-icon.pfp .avatar {
@@ -85,17 +76,6 @@
   height: 32px;
 }
 
-.light .note-creator textarea {
-  background-color: var(--gray-superdark);
-}
-
-.light .note-creator {
-  box-shadow: 0px 0px 6px 1px rgba(182, 108, 156, 0.3);
-  background:
-    linear-gradient(var(--gray-superdark), var(--gray-superdark)) padding-box,
-    linear-gradient(90deg, #ef9644, #fd7c49, #ff5e58, #ff3b70, #ff088e, #eb00b1, #c31ed5, #7b41f6) border-box;
-}
-
 .note-creator-modal .rti--container {
   background-color: unset !important;
   box-shadow: unset !important;

packages/app/src/Components/Event/Create/NoteCreator.tsx

@@ -1,40 +1,76 @@
+/* eslint-disable max-lines */
 import "./NoteCreator.css";
-import { FormattedMessage, useIntl } from "react-intl";
-import { EventKind, NostrPrefix, TaggedNostrEvent, EventBuilder, tryParseNostrLink, NostrLink } from "@snort/system";
+
+import { fetchNip05Pubkey, unixNow } from "@snort/shared";
+import { EventBuilder, EventKind, NostrLink, NostrPrefix, TaggedNostrEvent, tryParseNostrLink } from "@snort/system";
 import classNames from "classnames";
-import { TagsInput } from "react-tag-input-component";
+import { ClipboardEventHandler, DragEvent, useEffect } from "react";
+import { FormattedMessage, useIntl } from "react-intl";
 
-import Icon from "@/Icons/Icon";
+import AsyncButton from "@/Components/Button/AsyncButton";
+import { AsyncIcon } from "@/Components/Button/AsyncIcon";
+import CloseButton from "@/Components/Button/CloseButton";
+import { sendEventToRelays } from "@/Components/Event/Create/util";
+import Note from "@/Components/Event/EventComponent";
+import Icon from "@/Components/Icons/Icon";
+import { ToggleSwitch } from "@/Components/Icons/Toggle";
+import Modal from "@/Components/Modal/Modal";
+import Textarea from "@/Components/Textarea/Textarea";
+import { Toastore } from "@/Components/Toaster/Toaster";
+import ProfileImage from "@/Components/User/ProfileImage";
 import useEventPublisher from "@/Hooks/useEventPublisher";
-import { appendDedupe, openFile } from "@/SnortUtils";
-import Textarea from "@/Element/Textarea";
-import Modal from "@/Element/Modal";
-import ProfileImage from "@/Element/User/ProfileImage";
-import useFileUpload from "@/Upload";
-import Note from "@/Element/Event/Note";
-
-import { ClipboardEventHandler, DragEvent, useEffect, useState } from "react";
 import useLogin from "@/Hooks/useLogin";
-import { GetPowWorker } from "@/index";
-import AsyncButton from "@/Element/AsyncButton";
-import { AsyncIcon } from "@/Element/AsyncIcon";
-import { fetchNip05Pubkey } from "@snort/shared";
-import { ZapTarget } from "@/Zapper";
+import usePreferences from "@/Hooks/usePreferences";
+import useRelays from "@/Hooks/useRelays";
 import { useNoteCreator } from "@/State/NoteCreator";
-import { NoteBroadcaster } from "./NoteBroadcaster";
-import FileUploadProgress from "./FileUpload";
-import { ToggleSwitch } from "@/Icons/Toggle";
-import NostrBandApi from "@/External/NostrBand";
-import { useLocale } from "@/IntlProvider";
+import { openFile, trackEvent } from "@/Utils";
+import useFileUpload from "@/Utils/Upload";
+import { GetPowWorker } from "@/Utils/wasm";
+import { ZapTarget } from "@/Utils/Zapper";
+
+import FileUploadProgress from "../FileUpload";
+import { OkResponseRow } from "./OkResponseRow";
+
+const previewNoteOptions = {
+  showContextMenu: false,
+  showFooter: false,
+  canClick: false,
+  showTime: false,
+};
+
+const replyToNoteOptions = {
+  showFooter: false,
+  showContextMenu: false,
+  showProfileCard: false,
+  showTime: false,
+  canClick: false,
+  longFormPreview: true,
+};
+
+const quoteNoteOptions = {
+  showFooter: false,
+  showContextMenu: false,
+  showTime: false,
+  canClick: false,
+  longFormPreview: true,
+};
 
 export function NoteCreator() {
   const { formatMessage } = useIntl();
   const uploader = useFileUpload();
-  const login = useLogin(s => ({ relays: s.relays, publicKey: s.publicKey, pow: s.appData.item.preferences.pow }));
-  const { publisher: pub } = useEventPublisher();
-  const publisher = login.pow ? pub?.pow(login.pow, GetPowWorker()) : pub;
+  const publicKey = useLogin(s => s.publicKey);
+  const pow = usePreferences(s => s.pow);
+  const relays = useRelays();
+  const { system, publisher: pub } = useEventPublisher();
+  const publisher = pow ? pub?.pow(pow, GetPowWorker()) : pub;
   const note = useNoteCreator();
-  const relays = login.relays;
+
+  useEffect(() => {
+    const draft = localStorage.getItem("msgDraft");
+    if (draft) {
+      note.update(n => (n.note = draft));
+    }
+  }, []);
 
   async function buildNote() {
     try {
@@ -150,9 +186,46 @@ export function NoteCreator() {
   async function sendNote() {
     const ev = await buildNote();
     if (ev) {
-      note.update(n => {
-        n.sending = (note.otherEvents ?? []).concat(ev);
-      });
+      let props: Record<string, boolean> | undefined = undefined;
+      if (ev.tags.find(a => a[0] === "content-warning")) {
+        props ??= {};
+        props["content-warning"] = true;
+      }
+      if (ev.tags.find(a => a[0] === "poll_option")) {
+        props ??= {};
+        props["poll"] = true;
+      }
+      if (ev.tags.find(a => a[0] === "zap")) {
+        props ??= {};
+        props["zap-split"] = true;
+      }
+      if (note.hashTags.length > 0) {
+        props ??= {};
+        props["hashtags"] = true;
+      }
+      if (props) {
+        props["content-warning"] ??= false;
+        props["poll"] ??= false;
+        props["zap-split"] ??= false;
+        props["hashtags"] ??= false;
+      }
+      trackEvent("PostNote", props);
+
+      const events = (note.otherEvents ?? []).concat(ev);
+      events.map(a =>
+        sendEventToRelays(system, a, note.selectedCustomRelays, r => {
+          if (CONFIG.noteCreatorToast) {
+            r.forEach(rr => {
+              Toastore.push({
+                element: c => <OkResponseRow rsp={rr} close={c} />,
+                expire: unixNow() + (rr.ok ? 5 : 55555),
+              });
+            });
+          }
+        }),
+      );
+      note.update(n => n.reset());
+      localStorage.removeItem("msgDraft");
     }
   }
 
@@ -173,7 +246,7 @@ export function NoteCreator() {
     }
   }
 
-  async function uploadFile(file: File | Blob) {
+  async function uploadFile(file: File) {
     try {
       if (file) {
         const rx = await uploader.upload(file, file.name);
@@ -195,6 +268,9 @@ export function NoteCreator() {
               if (rx.metadata.width && rx.metadata.height) {
                 imeta.push(`dim ${rx.metadata.width}x${rx.metadata.height}`);
               }
+              if (rx.metadata.hash) {
+                imeta.push(`x ${rx.metadata.hash}`);
+              }
               v.extraTags.push(imeta);
             }
           } else if (rx?.error) {
@@ -216,6 +292,7 @@ export function NoteCreator() {
   function onChange(ev: React.ChangeEvent<HTMLTextAreaElement>) {
     const { value } = ev.target;
     note.update(n => (n.note = value));
+    localStorage.setItem("msgDraft", value);
   }
 
   function cancel() {
@@ -235,6 +312,7 @@ export function NoteCreator() {
       note.update(v => (v.preview = undefined));
     } else if (publisher) {
       const tmpNote = await buildNote();
+      trackEvent("PostNotePreview");
       note.update(v => (v.preview = tmpNote));
     }
   }
@@ -242,16 +320,7 @@ export function NoteCreator() {
   function getPreviewNote() {
     if (note.preview) {
       return (
-        <Note
-          data={note.preview as TaggedNostrEvent}
-          related={[]}
-          options={{
-            showContextMenu: false,
-            showFooter: false,
-            canClick: false,
-            showTime: false,
-          }}
-        />
+        <Note className="hover:bg-transparent" data={note.preview as TaggedNostrEvent} options={previewNoteOptions} />
       );
     }
   }
@@ -261,20 +330,16 @@ export function NoteCreator() {
       return (
         <>
           <h4>
-            <FormattedMessage defaultMessage="Poll Options" id="vhlWFg" />
+            <FormattedMessage defaultMessage="Poll Options" />
           </h4>
           {note.pollOptions?.map((a, i) => (
             <div className="form-group w-max" key={`po-${i}`}>
               <div>
-                <FormattedMessage defaultMessage="Option: {n}" id="mfe8RW" values={{ n: i + 1 }} />
+                <FormattedMessage defaultMessage="Option: {n}" values={{ n: i + 1 }} />
               </div>
               <div>
                 <input type="text" value={a} onChange={e => changePollOption(i, e.target.value)} />
-                {i > 1 && (
-                  <button onClick={() => removePollOption(i)} className="ml5">
-                    <Icon name="close" size={14} />
-                  </button>
-                )}
+                {i > 1 && <CloseButton className="ml5" onClick={() => removePollOption(i)} />}
               </div>
             </div>
           ))}
@@ -305,10 +370,11 @@ export function NoteCreator() {
   function renderRelayCustomisation() {
     return (
       <div className="flex flex-col g8">
-        {Object.keys(relays.item || {})
-          .filter(el => relays.item[el].write)
+        {Object.entries(relays)
+          .filter(el => el[1].write)
+          .map(a => a[0])
           .map((r, i, a) => (
-            <div className="p flex justify-between note-creator-relay">
+            <div className="p flex justify-between note-creator-relay" key={r}>
               <div>{r}</div>
               <div>
                 <input
@@ -356,24 +422,24 @@ export function NoteCreator() {
       <>
         <div>
           <h4>
-            <FormattedMessage defaultMessage="Custom Relays" id="EcZF24" />
+            <FormattedMessage defaultMessage="Custom Relays" />
           </h4>
           <p>
-            <FormattedMessage defaultMessage="Send note to a subset of your write relays" id="th5lxp" />
+            <FormattedMessage defaultMessage="Send note to a subset of your write relays" />
           </p>
           {renderRelayCustomisation()}
         </div>
         <div className="flex flex-col g8">
           <h4>
-            <FormattedMessage defaultMessage="Zap Splits" id="5CB6zB" />
+            <FormattedMessage defaultMessage="Zap Splits" />
           </h4>
-          <FormattedMessage defaultMessage="Zaps on this note will be split to the following users." id="LwYmVi" />
+          <FormattedMessage defaultMessage="Zaps on this note will be split to the following users." />
           <div className="flex flex-col g8">
-            {[...(note.zapSplits ?? [])].map((v, i, arr) => (
-              <div className="flex items-center g8">
-                <div className="flex flex-col f-4 g4">
+            {[...(note.zapSplits ?? [])].map((v: ZapTarget, i, arr) => (
+              <div className="flex items-center g8" key={`${v.name}-${v.value}`}>
+                <div className="flex flex-col flex-4 g4">
                   <h4>
-                    <FormattedMessage defaultMessage="Recipient" id="8Rkoyb" />
+                    <FormattedMessage defaultMessage="Recipient" />
                   </h4>
                   <input
                     type="text"
@@ -386,9 +452,9 @@ export function NoteCreator() {
                     placeholder={formatMessage({ defaultMessage: "npub / nprofile / nostr address", id: "WvGmZT" })}
                   />
                 </div>
-                <div className="flex flex-col f-1 g4">
+                <div className="flex flex-col flex-1 g4">
                   <h4>
-                    <FormattedMessage defaultMessage="Weight" id="zCb8fX" />
+                    <FormattedMessage defaultMessage="Weight" />
                   </h4>
                   <input
                     type="number"
@@ -418,7 +484,7 @@ export function NoteCreator() {
               onClick={() =>
                 note.update(v => (v.zapSplits = [...(v.zapSplits ?? []), { type: "pubkey", value: "", weight: 1 }]))
               }>
-              <FormattedMessage defaultMessage="Add" id="2/2yg+" />
+              <FormattedMessage defaultMessage="Add" />
             </button>
           </div>
           <span className="warning">
@@ -430,7 +496,7 @@ export function NoteCreator() {
         </div>
         <div className="flex flex-col g8">
           <h4>
-            <FormattedMessage defaultMessage="Sensitive Content" id="bQdA2k" />
+            <FormattedMessage defaultMessage="Sensitive Content" />
           </h4>
           <FormattedMessage
             defaultMessage="Users must accept the content warning to show the content of your note."
@@ -449,7 +515,7 @@ export function NoteCreator() {
             })}
           />
           <span className="warning">
-            <FormattedMessage defaultMessage="Not all clients support this yet" id="gXgY3+" />
+            <FormattedMessage defaultMessage="Not all clients support this yet" />
           </span>
         </div>
       </>
@@ -458,14 +524,15 @@ export function NoteCreator() {
 
   function noteCreatorFooter() {
     return (
-      <div className="flex items-center justify-between">
+      <div className="flex justify-between">
         <div className="flex items-center g8">
           <ProfileImage
-            pubkey={login.publicKey ?? ""}
+            pubkey={publicKey ?? ""}
             className="note-creator-icon"
             link=""
             showUsername={false}
             showFollowDistance={false}
+            showProfileCard={false}
           />
           {note.pollOptions === undefined && !note.replyTo && (
             <AsyncIcon
@@ -483,7 +550,7 @@ export function NoteCreator() {
             className={classNames("note-creator-icon", { active: note.advanced })}
           />
           <span className="sm:inline hidden">
-            <FormattedMessage defaultMessage="Preview" id="TJo5E6" />
+            <FormattedMessage defaultMessage="Preview" />
           </span>
           <ToggleSwitch
             onClick={() => loadPreview()}
@@ -493,14 +560,10 @@ export function NoteCreator() {
         </div>
         <div className="flex g8">
           <button className="secondary" onClick={cancel}>
-            <FormattedMessage defaultMessage="Cancel" id="47FYwb" />
+            <FormattedMessage defaultMessage="Cancel" />
           </button>
           <AsyncButton onClick={onSubmit} className="primary">
-            {note.replyTo ? (
-              <FormattedMessage defaultMessage="Reply" id="9HU8vw" />
-            ) : (
-              <FormattedMessage defaultMessage="Send" id="9WRlF4" />
-            )}
+            {note.replyTo ? <FormattedMessage defaultMessage="Reply" /> : <FormattedMessage defaultMessage="Send" />}
           </AsyncButton>
         </div>
       </div>
@@ -550,39 +613,23 @@ export function NoteCreator() {
         {note.replyTo && (
           <>
             <h4>
-              <FormattedMessage defaultMessage="Reply To" id="8ED/4u" />
+              <FormattedMessage defaultMessage="Reply To" />
             </h4>
-            <Note
-              data={note.replyTo}
-              related={[]}
-              options={{
-                showFooter: false,
-                showContextMenu: false,
-                showTime: false,
-                canClick: false,
-                showMedia: false,
-                longFormPreview: true,
-              }}
-            />
+            <div className="max-h-64 overflow-y-auto">
+              <Note className="hover:bg-transparent" data={note.replyTo} options={replyToNoteOptions} />
+            </div>
+            <hr className="border-border-color border-1 -mx-6" />
           </>
         )}
         {note.quote && (
           <>
             <h4>
-              <FormattedMessage defaultMessage="Quote Repost" id="C7642/" />
+              <FormattedMessage defaultMessage="Quote Repost" />
             </h4>
-            <Note
-              data={note.quote}
-              related={[]}
-              options={{
-                showFooter: false,
-                showContextMenu: false,
-                showTime: false,
-                canClick: false,
-                showMedia: false,
-                longFormPreview: true,
-              }}
-            />
+            <div className="max-h-64 overflow-y-auto">
+              <Note className="hover:bg-transparent" data={note.quote} options={quoteNoteOptions} />
+            </div>
+            <hr className="border-border-color border-1 -mx-6" />
           </>
         )}
         {note.preview && getPreviewNote()}
@@ -594,7 +641,6 @@ export function NoteCreator() {
                 onDragLeave={handleDragLeave}
                 onDrop={handleDrop}
                 autoFocus
-                className={classNames("textarea", { "textarea--focused": note.active })}
                 onChange={c => onChange(c)}
                 value={note.note}
                 onFocus={() => note.update(v => (v.active = true))}
@@ -606,23 +652,6 @@ export function NoteCreator() {
               />
               {renderPollOptions()}
             </div>
-            <div className="flex flex-col g4">
-              <TagsInput
-                value={note.hashTags}
-                onChange={e => note.update(s => (s.hashTags = e))}
-                placeHolder={formatMessage({
-                  defaultMessage: "Add up to 4 hashtags",
-                  id: "AIgmDy",
-                })}
-                separators={["Enter", ","]}
-              />
-              {note.hashTags.length > 4 && (
-                <small className="warning">
-                  <FormattedMessage defaultMessage="Try to use less than 5 hashtags to stay on topic 🙏" id="d8gpCh" />
-                </small>
-              )}
-              <TrendingHashTagsLine onClick={t => note.update(s => (s.hashTags = appendDedupe(s.hashTags, [t])))} />
-            </div>
           </>
         )}
         {uploader.progress.length > 0 && <FileUploadProgress progress={uploader.progress} />}
@@ -635,47 +664,18 @@ export function NoteCreator() {
 
   function reset() {
     note.update(v => {
-      v.reset();
       v.show = false;
     });
   }
 
   if (!note.show) return null;
   return (
-    <Modal id="note-creator" className="note-creator-modal" onClose={reset}>
-      {note.sending && <NoteBroadcaster evs={note.sending} onClose={reset} customRelays={note.selectedCustomRelays} />}
-      {!note.sending && noteCreatorForm()}
+    <Modal
+      id="note-creator"
+      bodyClassName="modal-body flex flex-col gap-4"
+      className="note-creator-modal"
+      onClose={reset}>
+      {noteCreatorForm()}
     </Modal>
   );
 }
-
-function TrendingHashTagsLine(props: { onClick: (tag: string) => void }) {
-  const [hashtags, setHashtags] = useState<Array<{ hashtag: string; posts: number }>>();
-  const { lang } = useLocale();
-
-  async function loadTrendingHashtags() {
-    const api = new NostrBandApi();
-    const rsp = await api.trendingHashtags(lang);
-    setHashtags(rsp.hashtags);
-  }
-
-  useEffect(() => {
-    loadTrendingHashtags().catch(console.error);
-  }, []);
-
-  if (!hashtags || hashtags.length === 0) return;
-  return (
-    <div className="flex flex-col g4">
-      <small>
-        <FormattedMessage defaultMessage="Popular Hashtags" id="ddd3JX" />
-      </small>
-      <div className="flex g4 flex-wrap">
-        {hashtags.slice(0, 5).map(a => (
-          <span className="px-2 py-1 bg-dark rounded-full pointer nowrap" onClick={() => props.onClick(a.hashtag)}>
-            #{a.hashtag}
-          </span>
-        ))}
-      </div>
-    </div>
-  );
-}