feat: add option for relay hint

apps/desktop2/src/components/conversation.tsx

@@ -3,15 +3,21 @@ import type { NostrEvent } from "@lume/types";
 import { Note } from "@/components/note";
 import { cn } from "@lume/utils";
 import { LumeEvent } from "@lume/system";
+import { useMemo } from "react";
 
 export function Conversation({
 	event,
+	gossip,
 	className,
 }: {
 	event: NostrEvent;
+	gossip?: boolean;
 	className?: string;
 }) {
-	const thread = LumeEvent.getEventThread(event.tags);
+	const thread = useMemo(
+		() => LumeEvent.getEventThread(event.tags, gossip),
+		[event],
+	);
 
 	return (
 		<Note.Provider event={event}>

apps/desktop2/src/routes/$account.home.tsx

@@ -132,11 +132,10 @@ function Screen() {
 				horizontal
 				tabIndex={-1}
 				itemSize={440}
-				overscan={3}
+				overscan={5}
 				onScroll={() => setIsScroll(true)}
 				onScrollEnd={() => setIsScroll(false)}
 				className="scrollbar-none h-full w-full overflow-x-auto focus:outline-none"
-				cache={null}
 			>
 				{columns.map((column) => (
 					<Column

apps/desktop2/src/routes/newsfeed.tsx

@@ -40,7 +40,7 @@ export const Route = createFileRoute("/newsfeed")({
 
 export function Screen() {
 	const { label, account } = Route.useSearch();
-	const { contacts } = Route.useRouteContext();
+	const { contacts, settings } = Route.useRouteContext();
 	const {
 		data,
 		isLoading,
@@ -72,7 +72,14 @@ export function Screen() {
 				const isQuote = event.tags.filter((tag) => tag[0] === "q").length > 0;
 
 				if (isConversation) {
-					return <Conversation key={event.id} event={event} className="mb-3" />;
+					return (
+						<Conversation
+							key={event.id}
+							className="mb-3"
+							event={event}
+							gossip={settings?.gossip}
+						/>
+					);
 				}
 
 				if (isQuote) {

apps/desktop2/src/routes/settings/general.tsx

@@ -9,10 +9,7 @@ import { useDebouncedCallback } from "use-debounce";
 export const Route = createFileRoute("/settings/general")({
 	beforeLoad: async () => {
 		const settings = await NostrQuery.getSettings();
-
-		return {
-			settings,
-		};
+		return { settings };
 	},
 	component: Screen,
 });
@@ -29,6 +26,13 @@ function Screen() {
 		}));
 	};
 
+	const toggleGossip = async () => {
+		setNewSettings((prev) => ({
+			...prev,
+			gossip: !newSettings.gossip,
+		}));
+	};
+
 	const toggleAutoUpdate = () => {
 		setNewSettings((prev) => ({
 			...prev,
@@ -91,6 +95,24 @@ function Screen() {
 								</Switch.Root>
 							</div>
 						</div>
+						<div className="flex w-full items-start justify-between gap-4 py-3">
+							<div className="flex-1">
+								<h3 className="font-medium">Relay Hint</h3>
+								<p className="text-sm text-neutral-700 dark:text-neutral-300">
+									Automatically connect to the necessary relay suggested by
+									Relay Hint when fetching a new event.
+								</p>
+							</div>
+							<div className="w-36 flex justify-end shrink-0">
+								<Switch.Root
+									checked={newSettings.gossip}
+									onClick={() => toggleGossip()}
+									className="relative h-7 w-12 shrink-0 cursor-default rounded-full bg-black/10 outline-none data-[state=checked]:bg-blue-500 dark:bg-white/10"
+								>
+									<Switch.Thumb className="block size-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
+								</Switch.Root>
+							</div>
+						</div>
 						<div className="flex w-full items-start justify-between gap-4 py-3">
 							<div className="flex-1">
 								<h3 className="font-medium">Enhanced Privacy</h3>

packages/system/src/event.ts

@@ -22,24 +22,25 @@ export class LumeEvent {
 		return this.tags.filter((tag) => tag[0] === "p").map((tag) => tag[1]);
 	}
 
-	static getEventThread(tags: string[][]) {
+	static getEventThread(tags: string[][], gossip?: boolean) {
 		let root: string = null;
 		let reply: string = null;
 
 		// Get all event references from tags, ignore mention
 		const events = tags.filter((el) => el[0] === "e" && el[3] !== "mention");
 
-		/*
-    if (gossip) {
-      const relays = tags.filter((el) => el[0] === "e" && el[2]?.length);
+		if (gossip) {
+			const relays = tags.filter((el) => el[0] === "e" && el[2]?.length);
 
-      if (relays.length >= 1) {
-        for (const relay of relays) {
-          if (relay[2]?.length) this.add_relay(relay[2]);
-        }
-      }
-    }
-    */
+			if (relays.length >= 1) {
+				for (const relay of relays) {
+					if (relay[2]?.length)
+						commands
+							.connectRelay(relay[2])
+							.then(() => console.log("[gossip]: ", relay[2]));
+				}
+			}
+		}
 
 		if (events.length === 1) {
 			root = events[0][1];

packages/types/index.d.ts

@@ -4,6 +4,7 @@ export interface Settings {
 	autoUpdate: boolean;
 	zap: boolean;
 	nsfw: boolean;
+	gossip: boolean;
 	[key: string]: string | number | boolean;
 }