Add initial project structure with Svelte, TypeScript support, and basic Nostr client implementation

app/web/public/global.css

@@ -0,0 +1,63 @@
+html, body {
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+
+body {
+	color: #333;
+	margin: 0;
+	padding: 8px;
+	box-sizing: border-box;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+}
+
+a {
+	color: rgb(0,100,200);
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+a:visited {
+	color: rgb(0,80,160);
+}
+
+label {
+	display: block;
+}
+
+input, button, select, textarea {
+	font-family: inherit;
+	font-size: inherit;
+	-webkit-padding: 0.4em 0;
+	padding: 0.4em;
+	margin: 0 0 0.5em 0;
+	box-sizing: border-box;
+	border: 1px solid #ccc;
+	border-radius: 2px;
+}
+
+input:disabled {
+	color: #ccc;
+}
+
+button {
+	color: #333;
+	background-color: #f4f4f4;
+	outline: none;
+}
+
+button:disabled {
+	color: #999;
+}
+
+button:not(:disabled):active {
+	background-color: #ddd;
+}
+
+button:focus {
+	border-color: #666;
+}

app/web/readme.adoc

@@ -0,0 +1,3 @@
+= nostrly.app
+
+a simple, material design nostr kind 1 nostr note client

app/web/rollup.config.js

@@ -0,0 +1,78 @@
+import { spawn } from 'child_process';
+import svelte from 'rollup-plugin-svelte';
+import commonjs from '@rollup/plugin-commonjs';
+import terser from '@rollup/plugin-terser';
+import resolve from '@rollup/plugin-node-resolve';
+import livereload from 'rollup-plugin-livereload';
+import css from 'rollup-plugin-css-only';
+
+const production = !process.env.ROLLUP_WATCH;
+
+function serve() {
+	let server;
+
+	function toExit() {
+		if (server) server.kill(0);
+	}
+
+	return {
+		writeBundle() {
+			if (server) return;
+			server = spawn('npm', ['run', 'start', '--', '--dev'], {
+				stdio: ['ignore', 'inherit', 'inherit'],
+				shell: true
+			});
+
+			process.on('SIGTERM', toExit);
+			process.on('exit', toExit);
+		}
+	};
+}
+
+export default {
+	input: 'src/main.js',
+	output: {
+		sourcemap: true,
+		format: 'iife',
+		name: 'app',
+		file: 'dist/bundle.js'
+	},
+	plugins: [
+		svelte({
+			compilerOptions: {
+				// enable run-time checks when not in production
+				dev: !production
+			}
+		}),
+		// we'll extract any component CSS out into
+		// a separate file - better for performance
+		css({ output: 'bundle.css' }),
+
+		// If you have external dependencies installed from
+		// npm, you'll most likely need these plugins. In
+		// some cases you'll need additional configuration -
+		// consult the documentation for details:
+		// https://github.com/rollup/plugins/tree/master/packages/commonjs
+		resolve({
+			browser: true,
+			dedupe: ['svelte'],
+			exportConditions: ['svelte']
+		}),
+		commonjs(),
+
+		// In dev mode, call `npm run start` once
+		// the bundle has been generated
+		!production && serve(),
+
+		// Watch the `public` directory and refresh the
+		// browser on changes when not in production
+		!production && livereload('public'),
+
+		// If we're building for production (npm run build
+		// instead of npm run dev), minify
+		production && terser()
+	],
+	watch: {
+		clearScreen: false
+	}
+};

app/web/scripts/setupTypeScript.js

@@ -0,0 +1,134 @@
+// @ts-check
+
+/** This script modifies the project to support TS code in .svelte files like:
+
+  <script lang="ts">
+  	export let name: string;
+  </script>
+ 
+  As well as validating the code for CI.
+  */
+
+/**  To work on this script:
+  rm -rf test-template template && git clone sveltejs/template test-template && node scripts/setupTypeScript.js test-template
+*/
+
+import fs from "fs"
+import path from "path"
+import { argv } from "process"
+import url from 'url';
+
+const __filename = url.fileURLToPath(import.meta.url);
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
+const projectRoot = argv[2] || path.join(__dirname, "..")
+
+// Add deps to pkg.json
+const packageJSON = JSON.parse(fs.readFileSync(path.join(projectRoot, "package.json"), "utf8"))
+packageJSON.devDependencies = Object.assign(packageJSON.devDependencies, {
+  "svelte-check": "^3.0.0",
+  "svelte-preprocess": "^5.0.0",
+  "@rollup/plugin-typescript": "^11.0.0",
+  "typescript": "^4.9.0",
+  "tslib": "^2.5.0",
+  "@tsconfig/svelte": "^3.0.0"
+})
+
+// Add script for checking
+packageJSON.scripts = Object.assign(packageJSON.scripts, {
+  "check": "svelte-check"
+})
+
+// Write the package JSON
+fs.writeFileSync(path.join(projectRoot, "package.json"), JSON.stringify(packageJSON, null, "  "))
+
+// mv src/main.js to main.ts - note, we need to edit rollup.config.js for this too
+const beforeMainJSPath = path.join(projectRoot, "src", "main.js")
+const afterMainTSPath = path.join(projectRoot, "src", "main.ts")
+fs.renameSync(beforeMainJSPath, afterMainTSPath)
+
+// Switch the app.svelte file to use TS
+const appSveltePath = path.join(projectRoot, "src", "App.svelte")
+let appFile = fs.readFileSync(appSveltePath, "utf8")
+appFile = appFile.replace("<script>", '<script lang="ts">')
+appFile = appFile.replace("export let name;", 'export let name: string;')
+fs.writeFileSync(appSveltePath, appFile)
+
+// Edit rollup config
+const rollupConfigPath = path.join(projectRoot, "rollup.config.js")
+let rollupConfig = fs.readFileSync(rollupConfigPath, "utf8")
+
+// Edit imports
+rollupConfig = rollupConfig.replace(`'rollup-plugin-css-only';`, `'rollup-plugin-css-only';
+import sveltePreprocess from 'svelte-preprocess';
+import typescript from '@rollup/plugin-typescript';`)
+
+// Replace name of entry point
+rollupConfig = rollupConfig.replace(`'src/main.js'`, `'src/main.ts'`)
+
+// Add preprocessor
+rollupConfig = rollupConfig.replace(
+  'compilerOptions:',
+  'preprocess: sveltePreprocess({ sourceMap: !production }),\n\t\t\tcompilerOptions:'
+);
+
+// Add TypeScript
+rollupConfig = rollupConfig.replace(
+  'commonjs(),',
+  'commonjs(),\n\t\ttypescript({\n\t\t\tsourceMap: !production,\n\t\t\tinlineSources: !production\n\t\t}),'
+);
+fs.writeFileSync(rollupConfigPath, rollupConfig)
+
+// Add svelte.config.js
+const tsconfig = `{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+
+  "include": ["src/**/*"],
+  "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
+}`
+const tsconfigPath =  path.join(projectRoot, "tsconfig.json")
+fs.writeFileSync(tsconfigPath, tsconfig)
+
+// Add TSConfig
+const svelteConfig = `import sveltePreprocess from 'svelte-preprocess';
+
+export default {
+  preprocess: sveltePreprocess()
+};
+`
+const svelteConfigPath =  path.join(projectRoot, "svelte.config.js")
+fs.writeFileSync(svelteConfigPath, svelteConfig)
+
+// Add global.d.ts
+const dtsPath =  path.join(projectRoot, "src", "global.d.ts")
+fs.writeFileSync(dtsPath, `/// <reference types="svelte" />`)
+
+// Delete this script, but not during testing
+if (!argv[2]) {
+  // Remove the script
+  fs.unlinkSync(path.join(__filename))
+
+  // Check for Mac's DS_store file, and if it's the only one left remove it
+  const remainingFiles = fs.readdirSync(path.join(__dirname))
+  if (remainingFiles.length === 1 && remainingFiles[0] === '.DS_store') {
+    fs.unlinkSync(path.join(__dirname, '.DS_store'))
+  }
+
+  // Check if the scripts folder is empty
+  if (fs.readdirSync(path.join(__dirname)).length === 0) {
+    // Remove the scripts folder
+    fs.rmdirSync(path.join(__dirname))
+  }
+}
+
+// Adds the extension recommendation
+fs.mkdirSync(path.join(projectRoot, ".vscode"), { recursive: true })
+fs.writeFileSync(path.join(projectRoot, ".vscode", "extensions.json"), `{
+  "recommendations": ["svelte.svelte-vscode"]
+}
+`)
+
+console.log("Converted to TypeScript.")
+
+if (fs.existsSync(path.join(projectRoot, "node_modules"))) {
+  console.log("\nYou will need to re-run your dependency manager to get started.")
+}

app/web/src/constants.js

@@ -0,0 +1,11 @@
+// Default Nostr relays for searching
+export const DEFAULT_RELAYS = [
+    'wss://relay.damus.io',
+    'wss://relay.nostr.band',
+    'wss://nos.lol',
+    'wss://relay.nostr.net',
+    'wss://relay.minibits.cash',
+    'wss://relay.coinos.io/',
+    'wss://nwc.primal.net',
+    'wss://relay.orly.dev',
+];

app/web/src/main.js

@@ -0,0 +1,11 @@
+import App from './App.svelte';
+import '../public/global.css';
+
+const app = new App({
+	target: document.body,
+	props: {
+		name: 'world'
+	}
+});
+
+export default app;

app/web/src/nostr.js

@@ -0,0 +1,316 @@
+import { DEFAULT_RELAYS } from './constants.js';
+
+// Simple WebSocket relay manager
+class NostrClient {
+    constructor() {
+        this.relays = new Map();
+        this.subscriptions = new Map();
+    }
+
+    async connect() {
+        console.log('Starting connection to', DEFAULT_RELAYS.length, 'relays...');
+        
+        const connectionPromises = DEFAULT_RELAYS.map(relayUrl => {
+            return new Promise((resolve) => {
+                try {
+                    console.log(`Attempting to connect to ${relayUrl}`);
+                    const ws = new WebSocket(relayUrl);
+                    
+                    ws.onopen = () => {
+                        console.log(`✓ Successfully connected to ${relayUrl}`);
+                        resolve(true);
+                    };
+                    
+                    ws.onerror = (error) => {
+                        console.error(`✗ Error connecting to ${relayUrl}:`, error);
+                        resolve(false);
+                    };
+                    
+                    ws.onclose = (event) => {
+                        console.warn(`Connection closed to ${relayUrl}:`, event.code, event.reason);
+                    };
+                    
+                    ws.onmessage = (event) => {
+                        console.log(`Message from ${relayUrl}:`, event.data);
+                        try {
+                            this.handleMessage(relayUrl, JSON.parse(event.data));
+                        } catch (error) {
+                            console.error(`Failed to parse message from ${relayUrl}:`, error, event.data);
+                        }
+                    };
+                    
+                    this.relays.set(relayUrl, ws);
+                    
+                    // Timeout after 5 seconds
+                    setTimeout(() => {
+                        if (ws.readyState !== WebSocket.OPEN) {
+                            console.warn(`Connection timeout for ${relayUrl}`);
+                            resolve(false);
+                        }
+                    }, 5000);
+                    
+                } catch (error) {
+                    console.error(`Failed to create WebSocket for ${relayUrl}:`, error);
+                    resolve(false);
+                }
+            });
+        });
+        
+        const results = await Promise.all(connectionPromises);
+        const successfulConnections = results.filter(Boolean).length;
+        console.log(`Connected to ${successfulConnections}/${DEFAULT_RELAYS.length} relays`);
+        
+        // Wait a bit more for connections to stabilize
+        await new Promise(resolve => setTimeout(resolve, 1000));
+    }
+
+    handleMessage(relayUrl, message) {
+        console.log(`Processing message from ${relayUrl}:`, message);
+        const [type, subscriptionId, event, ...rest] = message;
+        
+        console.log(`Message type: ${type}, subscriptionId: ${subscriptionId}`);
+        
+        if (type === 'EVENT') {
+            console.log(`Received EVENT for subscription ${subscriptionId}:`, event);
+            if (this.subscriptions.has(subscriptionId)) {
+                console.log(`Found callback for subscription ${subscriptionId}, executing...`);
+                const callback = this.subscriptions.get(subscriptionId);
+                callback(event);
+            } else {
+                console.warn(`No callback found for subscription ${subscriptionId}`);
+            }
+        } else if (type === 'EOSE') {
+            console.log(`End of stored events for subscription ${subscriptionId} from ${relayUrl}`);
+        } else if (type === 'NOTICE') {
+            console.warn(`Notice from ${relayUrl}:`, subscriptionId);
+        } else {
+            console.log(`Unknown message type ${type} from ${relayUrl}:`, message);
+        }
+    }
+
+    subscribe(filters, callback) {
+        const subscriptionId = Math.random().toString(36).substring(7);
+        console.log(`Creating subscription ${subscriptionId} with filters:`, filters);
+        
+        this.subscriptions.set(subscriptionId, callback);
+        
+        const subscription = ['REQ', subscriptionId, filters];
+        console.log(`Subscription message:`, JSON.stringify(subscription));
+        
+        let sentCount = 0;
+        for (const [relayUrl, ws] of this.relays) {
+            console.log(`Checking relay ${relayUrl}, readyState: ${ws.readyState} (${ws.readyState === WebSocket.OPEN ? 'OPEN' : 'NOT OPEN'})`);
+            if (ws.readyState === WebSocket.OPEN) {
+                try {
+                    ws.send(JSON.stringify(subscription));
+                    console.log(`✓ Sent subscription to ${relayUrl}`);
+                    sentCount++;
+                } catch (error) {
+                    console.error(`✗ Failed to send subscription to ${relayUrl}:`, error);
+                }
+            } else {
+                console.warn(`✗ Cannot send to ${relayUrl}, connection not ready`);
+            }
+        }
+        
+        console.log(`Subscription ${subscriptionId} sent to ${sentCount}/${this.relays.size} relays`);
+        return subscriptionId;
+    }
+
+    unsubscribe(subscriptionId) {
+        this.subscriptions.delete(subscriptionId);
+        
+        const closeMessage = ['CLOSE', subscriptionId];
+        
+        for (const [relayUrl, ws] of this.relays) {
+            if (ws.readyState === WebSocket.OPEN) {
+                ws.send(JSON.stringify(closeMessage));
+            }
+        }
+    }
+
+    disconnect() {
+        for (const [relayUrl, ws] of this.relays) {
+            ws.close();
+        }
+        this.relays.clear();
+        this.subscriptions.clear();
+    }
+}
+
+// Create a global client instance
+export const nostrClient = new NostrClient();
+
+// IndexedDB helpers for caching events (kind 0 profiles)
+const DB_NAME = 'nostrCache';
+const DB_VERSION = 1;
+const STORE_EVENTS = 'events';
+
+function openDB() {
+    return new Promise((resolve, reject) => {
+        try {
+            const req = indexedDB.open(DB_NAME, DB_VERSION);
+            req.onupgradeneeded = () => {
+                const db = req.result;
+                if (!db.objectStoreNames.contains(STORE_EVENTS)) {
+                    const store = db.createObjectStore(STORE_EVENTS, { keyPath: 'id' });
+                    store.createIndex('byKindAuthor', ['kind', 'pubkey'], { unique: false });
+                    store.createIndex('byKindAuthorCreated', ['kind', 'pubkey', 'created_at'], { unique: false });
+                }
+            };
+            req.onsuccess = () => resolve(req.result);
+            req.onerror = () => reject(req.error);
+        } catch (e) {
+            reject(e);
+        }
+    });
+}
+
+async function getLatestProfileEvent(pubkey) {
+    try {
+        const db = await openDB();
+        return await new Promise((resolve, reject) => {
+            const tx = db.transaction(STORE_EVENTS, 'readonly');
+            const idx = tx.objectStore(STORE_EVENTS).index('byKindAuthorCreated');
+            const range = IDBKeyRange.bound([0, pubkey, -Infinity], [0, pubkey, Infinity]);
+            const req = idx.openCursor(range, 'prev'); // newest first
+            req.onsuccess = () => {
+                const cursor = req.result;
+                resolve(cursor ? cursor.value : null);
+            };
+            req.onerror = () => reject(req.error);
+        });
+    } catch (e) {
+        console.warn('IDB getLatestProfileEvent failed', e);
+        return null;
+    }
+}
+
+async function putEvent(event) {
+    try {
+        const db = await openDB();
+        await new Promise((resolve, reject) => {
+            const tx = db.transaction(STORE_EVENTS, 'readwrite');
+            tx.oncomplete = () => resolve();
+            tx.onerror = () => reject(tx.error);
+            tx.objectStore(STORE_EVENTS).put(event);
+        });
+    } catch (e) {
+        console.warn('IDB putEvent failed', e);
+    }
+}
+
+function parseProfileFromEvent(event) {
+    try {
+        const profile = JSON.parse(event.content || '{}');
+        return {
+            name: profile.name || profile.display_name || '',
+            picture: profile.picture || '',
+            banner: profile.banner || '',
+            about: profile.about || '',
+            nip05: profile.nip05 || '',
+            lud16: profile.lud16 || profile.lud06 || ''
+        };
+    } catch (e) {
+        return { name: '', picture: '', banner: '', about: '', nip05: '', lud16: '' };
+    }
+}
+
+// Fetch user profile metadata (kind 0)
+export async function fetchUserProfile(pubkey) {
+    return new Promise(async (resolve, reject) => {
+        console.log(`Starting profile fetch for pubkey: ${pubkey}`);
+
+        let resolved = false;
+        let newestEvent = null;
+        let debounceTimer = null;
+        let overallTimer = null;
+        let subscriptionId = null;
+
+        function cleanup() {
+            if (subscriptionId) {
+                try { nostrClient.unsubscribe(subscriptionId); } catch {}
+            }
+            if (debounceTimer) clearTimeout(debounceTimer);
+            if (overallTimer) clearTimeout(overallTimer);
+        }
+
+        // 1) Try cached profile first and resolve immediately if present
+        try {
+            const cachedEvent = await getLatestProfileEvent(pubkey);
+            if (cachedEvent) {
+                console.log('Using cached profile event');
+                const profile = parseProfileFromEvent(cachedEvent);
+                resolved = true; // resolve immediately with cache
+                resolve(profile);
+            }
+        } catch (e) {
+            console.warn('Failed to load cached profile', e);
+        }
+
+        // 2) Set overall timeout
+        overallTimer = setTimeout(() => {
+            if (!newestEvent) {
+                console.log('Profile fetch timeout reached');
+                if (!resolved) reject(new Error('Profile fetch timeout'));
+            } else if (!resolved) {
+                resolve(parseProfileFromEvent(newestEvent));
+            }
+            cleanup();
+        }, 15000);
+
+        // 3) Wait a bit to ensure connections are ready and then subscribe without limit
+        setTimeout(() => {
+            console.log('Starting subscription after connection delay...');
+            subscriptionId = nostrClient.subscribe(
+                {
+                    kinds: [0],
+                    authors: [pubkey]
+                },
+                (event) => {
+                    // Collect all kind 0 events and pick the newest by created_at
+                    if (!event || event.kind !== 0) return;
+                    console.log('Profile event received:', event);
+
+                    if (!newestEvent || (event.created_at || 0) > (newestEvent.created_at || 0)) {
+                        newestEvent = event;
+                    }
+
+                    // Debounce to wait for more relays; then finalize selection
+                    if (debounceTimer) clearTimeout(debounceTimer);
+                    debounceTimer = setTimeout(async () => {
+                        try {
+                            if (newestEvent) {
+                                await putEvent(newestEvent); // cache newest only
+                                const profile = parseProfileFromEvent(newestEvent);
+
+                                // Notify listeners that an updated profile is available
+                                try {
+                                    if (typeof window !== 'undefined' && window.dispatchEvent) {
+                                        window.dispatchEvent(new CustomEvent('profile-updated', {
+                                            detail: { pubkey, profile, event: newestEvent }
+                                        }));
+                                    }
+                                } catch (e) {
+                                    console.warn('Failed to dispatch profile-updated event', e);
+                                }
+
+                                if (!resolved) {
+                                    resolve(profile);
+                                    resolved = true;
+                                }
+                            }
+                        } finally {
+                            cleanup();
+                        }
+                    }, 800);
+                }
+            );
+        }, 2000);
+    });
+}
+
+// Initialize client connection
+export async function initializeNostrClient() {
+    await nostrClient.connect();
+}