chore: upgrade snort libs

.yarnrc.yml

@@ -1,2 +1,3 @@
 nodeLinker: pnp
-yarnPath: .yarn/releases/yarn-4.0.2.cjs
+
+yarnPath: .yarn/releases/yarn-4.1.1.cjs

package.json

@@ -12,10 +12,10 @@
   },
   "dependencies": {
     "@noble/hashes": "^1.3.2",
-    "@snort/shared": "^1.0.10",
+    "@snort/shared": "^1.0.14",
-    "@snort/system": "^1.1.5",
+    "@snort/system": "^1.2.12",
-    "@snort/system-react": "^1.1.5",
+    "@snort/system-react": "^1.2.12",
-    "@snort/system-web": "^1.0.3",
+    "@snort/worker-relay": "^1.0.9",
     "classnames": "^2.3.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -35,9 +35,10 @@
     "prettier": "^3.1.0",
     "tailwindcss": "^3.3.5",
     "typescript": "^5.2.2",
-    "vite": "^5.0.0"
+    "vite": "^5.1.6",
+    "vite-plugin-pwa": "^0.19.4"
   },
-  "packageManager": "yarn@4.0.2",
+  "packageManager": "yarn@4.1.1",
   "prettier": {
     "printWidth": 120
   }

public/fonts/outfit/outfit.css

@@ -1,72 +1,80 @@
 /* latin-ext */
 @font-face {
-  font-family: 'Outfit';
+  font-family: "Outfit";
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(outfit_400_latin-ext.woff2) format('woff2');
+  src: url(outfit_400_latin-ext.woff2) format("woff2");
-  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
+    U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
 @font-face {
-  font-family: 'Outfit';
+  font-family: "Outfit";
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(outfit_400_latin.woff2) format('woff2');
+  src: url(outfit_400_latin.woff2) format("woff2");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 /* latin-ext */
 @font-face {
-  font-family: 'Outfit';
+  font-family: "Outfit";
   font-style: normal;
   font-weight: 500;
   font-display: swap;
-  src: url(outfit_500_latin-ext.woff2) format('woff2');
+  src: url(outfit_500_latin-ext.woff2) format("woff2");
-  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
+    U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
 @font-face {
-  font-family: 'Outfit';
+  font-family: "Outfit";
   font-style: normal;
   font-weight: 500;
   font-display: swap;
-  src: url(outfit_500_latin.woff2) format('woff2');
+  src: url(outfit_500_latin.woff2) format("woff2");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 /* latin-ext */
 @font-face {
-  font-family: 'Outfit';
+  font-family: "Outfit";
   font-style: normal;
   font-weight: 600;
   font-display: swap;
-  src: url(outfit_600_latin-ext.woff2) format('woff2');
+  src: url(outfit_600_latin-ext.woff2) format("woff2");
-  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
+    U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
 @font-face {
-  font-family: 'Outfit';
+  font-family: "Outfit";
   font-style: normal;
   font-weight: 600;
   font-display: swap;
-  src: url(outfit_600_latin.woff2) format('woff2');
+  src: url(outfit_600_latin.woff2) format("woff2");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 /* latin-ext */
 @font-face {
-  font-family: 'Outfit';
+  font-family: "Outfit";
   font-style: normal;
   font-weight: 700;
   font-display: swap;
-  src: url(outfit_700_latin-ext.woff2) format('woff2');
+  src: url(outfit_700_latin-ext.woff2) format("woff2");
-  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
+    U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
 @font-face {
-  font-family: 'Outfit';
+  font-family: "Outfit";
   font-style: normal;
   font-weight: 700;
   font-display: swap;
-  src: url(outfit_700_latin.woff2) format('woff2');
+  src: url(outfit_700_latin.woff2) format("woff2");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }

src/element/button.tsx

@@ -21,9 +21,9 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
     }
   }
 
-  const colorScheme =
+  const colorScheme = props.disabled
-    props.disabled ? "bg-neutral-900 text-neutral-600 border border-solid border-neutral-700" :
+    ? "bg-neutral-900 text-neutral-600 border border-solid border-neutral-700"
-    props.type == "danger"
+    : props.type == "danger"
       ? "bg-red-900 hover:bg-red-600"
       : props.type == "primary"
         ? "bg-indigo-800 hover:bg-indigo-700"

src/element/comments.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { NostrLink, NoteCollection, RequestBuilder } from "@snort/system";
+import { NostrLink, RequestBuilder } from "@snort/system";
 import { useRequestBuilder } from "@snort/system-react";
 import { unwrap } from "@snort/shared";
 
@@ -12,13 +12,13 @@ import { TorrentCommentKind } from "../const";
 export function Comments({ link }: { link: NostrLink }) {
   const rb = new RequestBuilder(`replies:${link.encode()}`);
   rb.withFilter().kinds([TorrentCommentKind]).replyToLink([link]);
-  const comments = useRequestBuilder(NoteCollection, rb);
+  const comments = useRequestBuilder(rb);
 
   return (
     <div className="flex flex-col gap-2">
       <WriteComment link={link} />
-      {comments.data
+      {comments
-        ?.sort((a, b) => (a.created_at > b.created_at ? -1 : 1))
+        .sort((a, b) => (a.created_at > b.created_at ? -1 : 1))
         .map((a, i) => (
           <div key={i} className="flex flex-col gap-2 rounded-lg p-4 bg-neutral-900">
             <ProfileImage pubkey={a.pubkey} withName={true}>
@@ -63,7 +63,9 @@ function WriteComment({ link }: { link: NostrLink }) {
         ></textarea>
       </div>
       <div>
-        <Button type="primary" onClick={sendComment}>Send</Button>
+        <Button type="primary" onClick={sendComment}>
+          Send
+        </Button>
       </div>
     </div>
   );

src/element/trending.tsx

@@ -1,4 +1,4 @@
-import { NoteCollection, RequestBuilder } from "@snort/system";
+import { RequestBuilder } from "@snort/system";
 import { TorrentKind } from "../const";
 import { useRequestBuilder } from "@snort/system-react";
 import { TorrentList } from "./torrent-list";
@@ -8,15 +8,14 @@ export function LatestTorrents({ author }: { author?: string }) {
   sub
     .withFilter()
     .kinds([TorrentKind])
-    .authors(author ? [author] : undefined)
+    .authors(author ? [author] : undefined);
-    .limit(100);
 
-  const latest = useRequestBuilder(NoteCollection, sub);
+  const latest = useRequestBuilder(sub);
 
   return (
     <>
       <h2>Latest Torrents</h2>
-      <TorrentList items={latest.data ?? []} />
+      <TorrentList items={latest} />
     </>
   );
 }

src/index.css

@@ -4,14 +4,14 @@
 
 html,
 body {
-  font-family: 'Outfit', Arial, Helvetica, sans-serif;
+  font-family: "Outfit", Arial, Helvetica, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-size: 16px;
   color: #adadad;
   font-style: normal;
   font-weight: 500;
-  line-height: 24px;  
+  line-height: 24px;
   background-color: black;
   color: white;
 }
@@ -37,4 +37,4 @@ a:not([href="/"], :has(button)) {
 .file-list {
   font-size: 15px;
   font-weight: 400;
-}
+}

src/main.tsx

@@ -2,28 +2,22 @@ import "./index.css";
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { RouteObject, RouterProvider, createBrowserRouter } from "react-router-dom";
+
+import { SnortContext } from "@snort/system-react";
+
 import { Layout } from "./page/layout";
 import { HomePage } from "./page/home";
-import { NostrSystem } from "@snort/system";
-import { SnortContext } from "@snort/system-react";
 import { ProfilePage } from "./page/profile";
 import { NewPage } from "./page/new";
 import { TorrentPage } from "./page/torrent";
-import { SnortSystemDb } from "@snort/system-web";
 import { SearchPage } from "./page/search";
+import { System, initSystem } from "./system";
 
-const db = new SnortSystemDb();
-const System = new NostrSystem({
-  db,
-});
 const Routes = [
   {
     element: <Layout />,
     loader: async () => {
-      await System.Init();
+      await initSystem();
-      for (const r of ["wss://nos.lol", "wss://relay.damus.io"]) {
-        await System.ConnectToRelay(r, { read: true, write: true });
-      }
       return null;
     },
     children: [

src/page/layout.tsx

@@ -23,8 +23,16 @@ export function Layout() {
           <img src="/logo_256.jpg" className="rounded-full" height={40} width={40} />
           <h1 className="font-bold uppercase">dtan.xyz</h1>
         </Link>
-        <div className="w-1/2"><Search /></div>
+        <div className="w-1/2">
-        {login ? <LoggedInHeader login={login} /> : <Button type="primary" onClick={DoLogin}>Login</Button>}
+          <Search />
+        </div>
+        {login ? (
+          <LoggedInHeader login={login} />
+        ) : (
+          <Button type="primary" onClick={DoLogin}>
+            Login
+          </Button>
+        )}
       </header>
       <div>
         <Outlet />

src/page/search.tsx

@@ -1,7 +1,7 @@
-import { NoteCollection, RequestBuilder } from "@snort/system";
+import { RequestBuilder } from "@snort/system";
+import { useRequestBuilder } from "@snort/system-react";
 import { useLocation, useParams } from "react-router-dom";
 import { TorrentKind } from "../const";
-import { useRequestBuilder } from "@snort/system-react";
 import { TorrentList } from "../element/torrent-list";
 
 export function SearchPage() {
@@ -22,12 +22,12 @@ export function SearchPage() {
     f.tag("t", tags);
   }
 
-  const data = useRequestBuilder(NoteCollection, rb);
+  const data = useRequestBuilder(rb);
 
   return (
     <div className="flex flex-col gap-4">
       <h2>Search Results</h2>
-      <TorrentList items={data.data ?? []} />
+      <TorrentList items={data} />
     </div>
   );
 }

src/page/torrent.tsx

@@ -1,5 +1,5 @@
 import { unwrap } from "@snort/shared";
-import { NostrLink, NoteCollection, RequestBuilder, TaggedNostrEvent, parseNostrLink } from "@snort/system";
+import { NostrLink, RequestBuilder, TaggedNostrEvent, parseNostrLink } from "@snort/system";
 import { useRequestBuilder } from "@snort/system-react";
 import { Link, useLocation, useNavigate, useParams } from "react-router-dom";
 import { FormatBytes, TorrentKind } from "../const";
@@ -21,9 +21,9 @@ export function TorrentPage() {
     .kinds([TorrentKind])
     .link(parseNostrLink(unwrap(id)));
 
-  const evNew = useRequestBuilder(NoteCollection, evState ? null : rb);
+  const evNew = useRequestBuilder(evState ? null : rb);
 
-  const ev = evState ?? evNew.data?.at(0);
+  const ev = evState ?? evNew?.at(0);
   if (!ev) return;
   return <TorrentDetail item={ev} />;
 }
@@ -107,12 +107,12 @@ export function TorrentDetail({ item }: { item: TaggedNostrEvent }) {
             </tr>
           </thead>
           <tbody>
-          {sortedFiles.map((a, i) => (
+            {sortedFiles.map((a, i) => (
-            <tr key={i}>
+              <tr key={i}>
-              <td className="pr-4">{a[1]}</td>
+                <td className="pr-4">{a[1]}</td>
-              <td className="text-neutral-500 font-semibold text-right text-sm">{FormatBytes(Number(a[2]))}</td>
+                <td className="text-neutral-500 font-semibold text-right text-sm">{FormatBytes(Number(a[2]))}</td>
-            </tr>
+              </tr>
-          ))}
+            ))}
           </tbody>
         </table>
       </div>

src/system.ts

@@ -0,0 +1,24 @@
+import { NostrSystem } from "@snort/system";
+import { WorkerRelayInterface } from "@snort/worker-relay";
+import WorkerVite from "@snort/worker-relay/src/worker?worker";
+
+const workerScript = import.meta.env.DEV
+  ? new URL("@snort/worker-relay/dist/esm/worker.mjs", import.meta.url)
+  : new WorkerVite();
+const workerRelay = new WorkerRelayInterface(workerScript);
+
+export const System = new NostrSystem({
+  cachingRelay: workerRelay,
+});
+
+let didInit = false;
+export async function initSystem() {
+  if (didInit) return;
+  didInit = true;
+
+  await workerRelay.init("dtan.db");
+  await System.Init();
+  for (const r of ["wss://nos.lol", "wss://relay.damus.io", "wss://relay.nostr.band"]) {
+    await System.ConnectToRelay(r, { read: true, write: true });
+  }
+}

vite.config.ts

@@ -1,7 +1,25 @@
-import { defineConfig } from "vite";
+import { defineConfig, searchForWorkspaceRoot } from "vite";
 import react from "@vitejs/plugin-react";
+import { VitePWA } from "vite-plugin-pwa";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    VitePWA({
+      registerType: "autoUpdate",
+      devOptions: {
+        enabled: false,
+        type: "module",
+      },
+    }),
+  ],
+  server: {
+    fs: {
+      strict: false,
+    },
+  },
+  worker: {
+    format: "es",
+  },
 });