new nav bar (#492)

app/UI/icons/caret-down-icon.tsx

@@ -0,0 +1,26 @@
+/** @jsx h */
+import { h } from "preact";
+
+export function CaretDownIcon(props: {
+    class?: string | h.JSX.SignalLike<string | undefined> | undefined;
+    style?:
+        | string
+        | h.JSX.CSSProperties
+        | h.JSX.SignalLike<string | h.JSX.CSSProperties>
+        | undefined;
+}) {
+    return (
+        <svg
+            class={props.class}
+            style={props.style}
+            viewBox="0 0 32 32"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M26.7074 12.7075L16.7074 22.7075C16.6146 22.8005 16.5043 22.8742 16.3829 22.9246C16.2615 22.9749 16.1314 23.0008 15.9999 23.0008C15.8685 23.0008 15.7384 22.9749 15.617 22.9246C15.4956 22.8742 15.3853 22.8005 15.2924 22.7075L5.29245 12.7075C5.1048 12.5199 4.99939 12.2654 4.99939 12C4.99939 11.7346 5.1048 11.4801 5.29245 11.2925C5.48009 11.1049 5.73458 10.9995 5.99995 10.9995C6.26531 10.9995 6.5198 11.1049 6.70745 11.2925L15.9999 20.5863L25.2924 11.2925C25.3854 11.1996 25.4957 11.1259 25.6171 11.0756C25.7384 11.0253 25.8686 10.9995 25.9999 10.9995C26.1313 10.9995 26.2614 11.0253 26.3828 11.0756C26.5042 11.1259 26.6145 11.1996 26.7074 11.2925C26.8004 11.3854 26.8741 11.4957 26.9243 11.6171C26.9746 11.7385 27.0005 11.8686 27.0005 12C27.0005 12.1314 26.9746 12.2615 26.9243 12.3829C26.8741 12.5043 26.8004 12.6146 26.7074 12.7075Z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+}

app/UI/icons/pound-icon.tsx

@@ -0,0 +1,20 @@
+/** @jsx h */
+import { h } from "preact";
+
+export function PoundIcon(props: {
+    class?: string | h.JSX.SignalLike<string | undefined> | undefined;
+    style?:
+        | string
+        | h.JSX.CSSProperties
+        | h.JSX.SignalLike<string | h.JSX.CSSProperties>
+        | undefined;
+}) {
+    return (
+        <svg class={props.class} style={props.style} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path
+                fill="currentColor"
+                d="m5.41 21l.71-4h-4l.35-2h4l1.06-6h-4l.35-2h4l.71-4h2l-.71 4h6l.71-4h2l-.71 4h4l-.35 2h-4l-1.06 6h4l-.35 2h-4l-.71 4h-2l.71-4h-6l-.71 4zM9.53 9l-1.06 6h6l1.06-6z"
+            />
+        </svg>
+    );
+}

app/UI/new-nav.test.tsx

@@ -0,0 +1,58 @@
+/** @jsx h */
+import { h, render } from "preact";
+import { NewNav } from "./new-nav.tsx";
+import { prepareProfileEvent, testEventBus } from "./_setup.test.ts";
+import { ConnectionPool, InMemoryAccountContext } from "@blowater/nostr-sdk";
+
+const pool = new ConnectionPool();
+await pool.addRelayURLs(
+    [
+        "blowater.nostr1.com",
+        "nos.lol",
+        "relay.damus.io",
+        "nostr.wine",
+        "wss://relay.nostr.wirednet.jp",
+        "wss://relay.nostr.moctane.com",
+        "wss://remnant.cloud",
+        // "wss://nostr.cahlen.org",
+        // "wss://fog.dedyn.io",
+        // "wss://global-relay.cesc.trade",
+        // "wss://nostr.dakukitsune.ca",
+        // "wss://africa.nostr.joburg",
+        // "wss://nostr-relay.ktwo.io",
+        // "wss://bevo.nostr1.com",
+        // "wss://relay.corpum.com",
+        // "wss://relay.nostr.directory",
+        // "wss://nostr.1f52b.xyz",
+        // "wss://lnbits.eldamar.icu/nostrrelay/relay",
+        // "wss://relay.cosmicbolt.net",
+        // "wss://island.nostr1.com",
+        // "wss://nostr.codingarena.de",
+        // "wss://nostr.madco.me",
+        // "wss://nostr-relay.bitcoin.ninja",
+    ],
+);
+const ctx = InMemoryAccountContext.Generate();
+const profileEvent = await prepareProfileEvent(ctx, {
+    name: "test_name",
+    display_name: "Orionna Lumis",
+    about:
+        "Celestial bodies move in a harmonious dance, bound by the tether of gravity. Their ballet paints stories in the sky.",
+    website: "https://github.com",
+    picture: "https://image.nostr.build/655007ae74f24ea1c611889f48b25cb485b83ab67408daddd98f95782f47e1b5.jpg",
+});
+
+render(
+    <NewNav
+        currentSpace="wss://blowater.nostr1.com"
+        emit={testEventBus.emit}
+        pool={pool}
+        activeNav="DM"
+        profile={profileEvent}
+    />,
+    document.body,
+);
+
+for await (const event of testEventBus.onChange()) {
+    console.log(event);
+}