feat: add relay feeds

2024-11-01 09:25:12 +07:00
parent aa4f21a869
commit 18e1ac0e6c
15 changed files with 510 additions and 103 deletions
--- a/src/commands.gen.ts
+++ b/src/commands.gen.ts
@@ -5,22 +5,6 @@


 export const commands = {
-async syncAccount(id: string, reader: TAURI_CHANNEL<number>) : Promise<Result<null, string>> {
-    try {
-    return { status: "ok", data: await TAURI_INVOKE("sync_account", { id, reader }) };
-} catch (e) {
-    if(e instanceof Error) throw e;
-    else return { status: "error", error: e  as any };
-}
-},
-async isAccountSync(id: string) : Promise<Result<boolean, string>> {
-    try {
-    return { status: "ok", data: await TAURI_INVOKE("is_account_sync", { id }) };
-} catch (e) {
-    if(e instanceof Error) throw e;
-    else return { status: "error", error: e  as any };
-}
-},
 async getRelays(id: string) : Promise<Result<Relays, string>> {
    try {
    return { status: "ok", data: await TAURI_INVOKE("get_relays", { id }) };
@@ -29,7 +13,23 @@ async getRelays(id: string) : Promise<Result<Relays, string>> {
    else return { status: "error", error: e  as any };
 }
 },
-async connectRelay(relay: string) : Promise<Result<boolean, string>> {
+async getAllRelays(until: string | null) : Promise<Result<string[], string>> {
+    try {
+    return { status: "ok", data: await TAURI_INVOKE("get_all_relays", { until }) };
+} catch (e) {
+    if(e instanceof Error) throw e;
+    else return { status: "error", error: e  as any };
+}
+},
+async isRelayConnected(relay: string) : Promise<Result<boolean, string>> {
+    try {
+    return { status: "ok", data: await TAURI_INVOKE("is_relay_connected", { relay }) };
+} catch (e) {
+    if(e instanceof Error) throw e;
+    else return { status: "error", error: e  as any };
+}
+},
+async connectRelay(relay: string) : Promise<Result<null, string>> {
    try {
    return { status: "ok", data: await TAURI_INVOKE("connect_relay", { relay }) };
 } catch (e) {
@@ -37,7 +37,7 @@ async connectRelay(relay: string) : Promise<Result<boolean, string>> {
    else return { status: "error", error: e  as any };
 }
 },
-async removeRelay(relay: string) : Promise<Result<boolean, string>> {
+async removeRelay(relay: string) : Promise<Result<null, string>> {
    try {
    return { status: "ok", data: await TAURI_INVOKE("remove_relay", { relay }) };
 } catch (e) {
@@ -53,9 +53,9 @@ async getBootstrapRelays() : Promise<Result<string[], string>> {
    else return { status: "error", error: e  as any };
 }
 },
-async saveBootstrapRelays(relays: string) : Promise<Result<null, string>> {
+async setBootstrapRelays(relays: string) : Promise<Result<null, string>> {
    try {
-    return { status: "ok", data: await TAURI_INVOKE("save_bootstrap_relays", { relays }) };
+    return { status: "ok", data: await TAURI_INVOKE("set_bootstrap_relays", { relays }) };
 } catch (e) {
    if(e instanceof Error) throw e;
    else return { status: "error", error: e  as any };
@@ -360,6 +360,14 @@ async getAllEventsByHashtags(hashtags: string[], until: string | null) : Promise
    else return { status: "error", error: e  as any };
 }
 },
+async getAllEventsFrom(url: string, until: string | null) : Promise<Result<RichEvent[], string>> {
+    try {
+    return { status: "ok", data: await TAURI_INVOKE("get_all_events_from", { url, until }) };
+} catch (e) {
+    if(e instanceof Error) throw e;
+    else return { status: "error", error: e  as any };
+}
+},
 async getLocalEvents(until: string | null) : Promise<Result<RichEvent[], string>> {
    try {
    return { status: "ok", data: await TAURI_INVOKE("get_local_events", { until }) };
@@ -523,7 +531,6 @@ export type NewWindow = { label: string; title: string; url: string; width: numb
 export type Relays = { connected: string[]; read: string[] | null; write: string[] | null; both: string[] | null }
 export type RichEvent = { raw: string; parsed: Meta | null }
 export type Settings = { resize_service: boolean; content_warning: boolean; display_avatar: boolean; display_zap_button: boolean; display_repost_button: boolean; display_media: boolean }
-export type TAURI_CHANNEL<TSend> = null

 /** tauri-specta globals **/

--- a/src/components/column.tsx
+++ b/src/components/column.tsx
@@ -40,7 +40,7 @@ export function Column({ column }: { column: LumeColumn }) {
 				/>
 				<div ref={ref} className="flex-1 size-full">
 					<div className="size-full flex flex-col items-center justify-center">
-						<div className="text-red-500 text-sm break-all">
+						<div className="invisible text-red-500 text-sm break-all">
 							{error?.length ? error : null}
 						</div>
 					</div>
--- a/src/components/repost.tsx
+++ b/src/components/repost.tsx
@@ -14,6 +14,8 @@ export const RepostNote = memo(function RepostNote({
 }) {
 	const { isLoading, isError, data } = useEvent(event.repostId, event.content);

+	console.log("Repost: ", event);
+
 	return (
 		<Note.Root className={cn("", className)}>
 			{isLoading ? (
--- a/src/routes.gen.ts
+++ b/src/routes.gen.ts
@@ -51,6 +51,9 @@ const ColumnsLayoutSearchLazyImport = createFileRoute(
 const ColumnsLayoutOnboardingLazyImport = createFileRoute(
  '/columns/_layout/onboarding',
 )()
+const ColumnsLayoutDiscoverRelaysLazyImport = createFileRoute(
+  '/columns/_layout/discover-relays',
+)()
 const ColumnsLayoutDiscoverNewsfeedsLazyImport = createFileRoute(
  '/columns/_layout/discover-newsfeeds',
 )()
@@ -63,6 +66,9 @@ const ColumnsLayoutUsersIdLazyImport = createFileRoute(
 const ColumnsLayoutRepliesIdLazyImport = createFileRoute(
  '/columns/_layout/replies/$id',
 )()
+const ColumnsLayoutRelaysUrlLazyImport = createFileRoute(
+  '/columns/_layout/relays/$url',
+)()
 const ColumnsLayoutNotificationIdLazyImport = createFileRoute(
  '/columns/_layout/notification/$id',
 )()
@@ -202,6 +208,17 @@ const ColumnsLayoutOnboardingLazyRoute =
    import('./routes/columns/_layout/onboarding.lazy').then((d) => d.Route),
  )

+const ColumnsLayoutDiscoverRelaysLazyRoute =
+  ColumnsLayoutDiscoverRelaysLazyImport.update({
+    id: '/discover-relays',
+    path: '/discover-relays',
+    getParentRoute: () => ColumnsLayoutRoute,
+  } as any).lazy(() =>
+    import('./routes/columns/_layout/discover-relays.lazy').then(
+      (d) => d.Route,
+    ),
+  )
+
 const ColumnsLayoutDiscoverNewsfeedsLazyRoute =
  ColumnsLayoutDiscoverNewsfeedsLazyImport.update({
    id: '/discover-newsfeeds',
@@ -279,6 +296,16 @@ const ColumnsLayoutRepliesIdLazyRoute = ColumnsLayoutRepliesIdLazyImport.update(
  import('./routes/columns/_layout/replies.$id.lazy').then((d) => d.Route),
 )

+const ColumnsLayoutRelaysUrlLazyRoute = ColumnsLayoutRelaysUrlLazyImport.update(
+  {
+    id: '/relays/$url',
+    path: '/relays/$url',
+    getParentRoute: () => ColumnsLayoutRoute,
+  } as any,
+).lazy(() =>
+  import('./routes/columns/_layout/relays.$url.lazy').then((d) => d.Route),
+)
+
 const ColumnsLayoutNotificationIdLazyRoute =
  ColumnsLayoutNotificationIdLazyImport.update({
    id: '/notification/$id',
@@ -511,6 +538,13 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof ColumnsLayoutDiscoverNewsfeedsLazyImport
      parentRoute: typeof ColumnsLayoutImport
    }
+    '/columns/_layout/discover-relays': {
+      id: '/columns/_layout/discover-relays'
+      path: '/discover-relays'
+      fullPath: '/columns/discover-relays'
+      preLoaderRoute: typeof ColumnsLayoutDiscoverRelaysLazyImport
+      parentRoute: typeof ColumnsLayoutImport
+    }
    '/columns/_layout/onboarding': {
      id: '/columns/_layout/onboarding'
      path: '/onboarding'
@@ -595,6 +629,13 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof ColumnsLayoutNotificationIdLazyImport
      parentRoute: typeof ColumnsLayoutImport
    }
+    '/columns/_layout/relays/$url': {
+      id: '/columns/_layout/relays/$url'
+      path: '/relays/$url'
+      fullPath: '/columns/relays/$url'
+      preLoaderRoute: typeof ColumnsLayoutRelaysUrlLazyImport
+      parentRoute: typeof ColumnsLayoutImport
+    }
    '/columns/_layout/replies/$id': {
      id: '/columns/_layout/replies/$id'
      path: '/replies/$id'
@@ -646,6 +687,7 @@ interface ColumnsLayoutRouteChildren {
  ColumnsLayoutGlobalRoute: typeof ColumnsLayoutGlobalRoute
  ColumnsLayoutDiscoverInterestsLazyRoute: typeof ColumnsLayoutDiscoverInterestsLazyRoute
  ColumnsLayoutDiscoverNewsfeedsLazyRoute: typeof ColumnsLayoutDiscoverNewsfeedsLazyRoute
+  ColumnsLayoutDiscoverRelaysLazyRoute: typeof ColumnsLayoutDiscoverRelaysLazyRoute
  ColumnsLayoutOnboardingLazyRoute: typeof ColumnsLayoutOnboardingLazyRoute
  ColumnsLayoutSearchLazyRoute: typeof ColumnsLayoutSearchLazyRoute
  ColumnsLayoutTrendingLazyRoute: typeof ColumnsLayoutTrendingLazyRoute
@@ -656,6 +698,7 @@ interface ColumnsLayoutRouteChildren {
  ColumnsLayoutEventsIdLazyRoute: typeof ColumnsLayoutEventsIdLazyRoute
  ColumnsLayoutLaunchpadIdLazyRoute: typeof ColumnsLayoutLaunchpadIdLazyRoute
  ColumnsLayoutNotificationIdLazyRoute: typeof ColumnsLayoutNotificationIdLazyRoute
+  ColumnsLayoutRelaysUrlLazyRoute: typeof ColumnsLayoutRelaysUrlLazyRoute
  ColumnsLayoutRepliesIdLazyRoute: typeof ColumnsLayoutRepliesIdLazyRoute
  ColumnsLayoutUsersIdLazyRoute: typeof ColumnsLayoutUsersIdLazyRoute
 }
@@ -668,6 +711,7 @@ const ColumnsLayoutRouteChildren: ColumnsLayoutRouteChildren = {
    ColumnsLayoutDiscoverInterestsLazyRoute,
  ColumnsLayoutDiscoverNewsfeedsLazyRoute:
    ColumnsLayoutDiscoverNewsfeedsLazyRoute,
+  ColumnsLayoutDiscoverRelaysLazyRoute: ColumnsLayoutDiscoverRelaysLazyRoute,
  ColumnsLayoutOnboardingLazyRoute: ColumnsLayoutOnboardingLazyRoute,
  ColumnsLayoutSearchLazyRoute: ColumnsLayoutSearchLazyRoute,
  ColumnsLayoutTrendingLazyRoute: ColumnsLayoutTrendingLazyRoute,
@@ -678,6 +722,7 @@ const ColumnsLayoutRouteChildren: ColumnsLayoutRouteChildren = {
  ColumnsLayoutEventsIdLazyRoute: ColumnsLayoutEventsIdLazyRoute,
  ColumnsLayoutLaunchpadIdLazyRoute: ColumnsLayoutLaunchpadIdLazyRoute,
  ColumnsLayoutNotificationIdLazyRoute: ColumnsLayoutNotificationIdLazyRoute,
+  ColumnsLayoutRelaysUrlLazyRoute: ColumnsLayoutRelaysUrlLazyRoute,
  ColumnsLayoutRepliesIdLazyRoute: ColumnsLayoutRepliesIdLazyRoute,
  ColumnsLayoutUsersIdLazyRoute: ColumnsLayoutUsersIdLazyRoute,
 }
@@ -735,6 +780,7 @@ export interface FileRoutesByFullPath {
  '/settings/$id/wallet': typeof SettingsIdWalletRoute
  '/columns/discover-interests': typeof ColumnsLayoutDiscoverInterestsLazyRoute
  '/columns/discover-newsfeeds': typeof ColumnsLayoutDiscoverNewsfeedsLazyRoute
+  '/columns/discover-relays': typeof ColumnsLayoutDiscoverRelaysLazyRoute
  '/columns/onboarding': typeof ColumnsLayoutOnboardingLazyRoute
  '/columns/search': typeof ColumnsLayoutSearchLazyRoute
  '/columns/trending': typeof ColumnsLayoutTrendingLazyRoute
@@ -747,6 +793,7 @@ export interface FileRoutesByFullPath {
  '/columns/events/$id': typeof ColumnsLayoutEventsIdLazyRoute
  '/columns/launchpad/$id': typeof ColumnsLayoutLaunchpadIdLazyRoute
  '/columns/notification/$id': typeof ColumnsLayoutNotificationIdLazyRoute
+  '/columns/relays/$url': typeof ColumnsLayoutRelaysUrlLazyRoute
  '/columns/replies/$id': typeof ColumnsLayoutRepliesIdLazyRoute
  '/columns/users/$id': typeof ColumnsLayoutUsersIdLazyRoute
 }
@@ -772,6 +819,7 @@ export interface FileRoutesByTo {
  '/settings/$id/wallet': typeof SettingsIdWalletRoute
  '/columns/discover-interests': typeof ColumnsLayoutDiscoverInterestsLazyRoute
  '/columns/discover-newsfeeds': typeof ColumnsLayoutDiscoverNewsfeedsLazyRoute
+  '/columns/discover-relays': typeof ColumnsLayoutDiscoverRelaysLazyRoute
  '/columns/onboarding': typeof ColumnsLayoutOnboardingLazyRoute
  '/columns/search': typeof ColumnsLayoutSearchLazyRoute
  '/columns/trending': typeof ColumnsLayoutTrendingLazyRoute
@@ -784,6 +832,7 @@ export interface FileRoutesByTo {
  '/columns/events/$id': typeof ColumnsLayoutEventsIdLazyRoute
  '/columns/launchpad/$id': typeof ColumnsLayoutLaunchpadIdLazyRoute
  '/columns/notification/$id': typeof ColumnsLayoutNotificationIdLazyRoute
+  '/columns/relays/$url': typeof ColumnsLayoutRelaysUrlLazyRoute
  '/columns/replies/$id': typeof ColumnsLayoutRepliesIdLazyRoute
  '/columns/users/$id': typeof ColumnsLayoutUsersIdLazyRoute
 }
@@ -812,6 +861,7 @@ export interface FileRoutesById {
  '/settings/$id/wallet': typeof SettingsIdWalletRoute
  '/columns/_layout/discover-interests': typeof ColumnsLayoutDiscoverInterestsLazyRoute
  '/columns/_layout/discover-newsfeeds': typeof ColumnsLayoutDiscoverNewsfeedsLazyRoute
+  '/columns/_layout/discover-relays': typeof ColumnsLayoutDiscoverRelaysLazyRoute
  '/columns/_layout/onboarding': typeof ColumnsLayoutOnboardingLazyRoute
  '/columns/_layout/search': typeof ColumnsLayoutSearchLazyRoute
  '/columns/_layout/trending': typeof ColumnsLayoutTrendingLazyRoute
@@ -824,6 +874,7 @@ export interface FileRoutesById {
  '/columns/_layout/events/$id': typeof ColumnsLayoutEventsIdLazyRoute
  '/columns/_layout/launchpad/$id': typeof ColumnsLayoutLaunchpadIdLazyRoute
  '/columns/_layout/notification/$id': typeof ColumnsLayoutNotificationIdLazyRoute
+  '/columns/_layout/relays/$url': typeof ColumnsLayoutRelaysUrlLazyRoute
  '/columns/_layout/replies/$id': typeof ColumnsLayoutRepliesIdLazyRoute
  '/columns/_layout/users/$id': typeof ColumnsLayoutUsersIdLazyRoute
 }
@@ -852,6 +903,7 @@ export interface FileRouteTypes {
    | '/settings/$id/wallet'
    | '/columns/discover-interests'
    | '/columns/discover-newsfeeds'
+    | '/columns/discover-relays'
    | '/columns/onboarding'
    | '/columns/search'
    | '/columns/trending'
@@ -864,6 +916,7 @@ export interface FileRouteTypes {
    | '/columns/events/$id'
    | '/columns/launchpad/$id'
    | '/columns/notification/$id'
+    | '/columns/relays/$url'
    | '/columns/replies/$id'
    | '/columns/users/$id'
  fileRoutesByTo: FileRoutesByTo
@@ -888,6 +941,7 @@ export interface FileRouteTypes {
    | '/settings/$id/wallet'
    | '/columns/discover-interests'
    | '/columns/discover-newsfeeds'
+    | '/columns/discover-relays'
    | '/columns/onboarding'
    | '/columns/search'
    | '/columns/trending'
@@ -900,6 +954,7 @@ export interface FileRouteTypes {
    | '/columns/events/$id'
    | '/columns/launchpad/$id'
    | '/columns/notification/$id'
+    | '/columns/relays/$url'
    | '/columns/replies/$id'
    | '/columns/users/$id'
  id:
@@ -926,6 +981,7 @@ export interface FileRouteTypes {
    | '/settings/$id/wallet'
    | '/columns/_layout/discover-interests'
    | '/columns/_layout/discover-newsfeeds'
+    | '/columns/_layout/discover-relays'
    | '/columns/_layout/onboarding'
    | '/columns/_layout/search'
    | '/columns/_layout/trending'
@@ -938,6 +994,7 @@ export interface FileRouteTypes {
    | '/columns/_layout/events/$id'
    | '/columns/_layout/launchpad/$id'
    | '/columns/_layout/notification/$id'
+    | '/columns/_layout/relays/$url'
    | '/columns/_layout/replies/$id'
    | '/columns/_layout/users/$id'
  fileRoutesById: FileRoutesById
@@ -1037,6 +1094,7 @@ export const routeTree = rootRoute
        "/columns/_layout/global",
        "/columns/_layout/discover-interests",
        "/columns/_layout/discover-newsfeeds",
+        "/columns/_layout/discover-relays",
        "/columns/_layout/onboarding",
        "/columns/_layout/search",
        "/columns/_layout/trending",
@@ -1047,6 +1105,7 @@ export const routeTree = rootRoute
        "/columns/_layout/events/$id",
        "/columns/_layout/launchpad/$id",
        "/columns/_layout/notification/$id",
+        "/columns/_layout/relays/$url",
        "/columns/_layout/replies/$id",
        "/columns/_layout/users/$id"
      ]
@@ -1110,6 +1169,10 @@ export const routeTree = rootRoute
      "filePath": "columns/_layout/discover-newsfeeds.lazy.tsx",
      "parent": "/columns/_layout"
    },
+    "/columns/_layout/discover-relays": {
+      "filePath": "columns/_layout/discover-relays.lazy.tsx",
+      "parent": "/columns/_layout"
+    },
    "/columns/_layout/onboarding": {
      "filePath": "columns/_layout/onboarding.lazy.tsx",
      "parent": "/columns/_layout"
@@ -1158,6 +1221,10 @@ export const routeTree = rootRoute
      "filePath": "columns/_layout/notification.$id.lazy.tsx",
      "parent": "/columns/_layout"
    },
+    "/columns/_layout/relays/$url": {
+      "filePath": "columns/_layout/relays.$url.lazy.tsx",
+      "parent": "/columns/_layout"
+    },
    "/columns/_layout/replies/$id": {
      "filePath": "columns/_layout/replies.$id.lazy.tsx",
      "parent": "/columns/_layout"
--- a/src/routes/bootstrap-relays.lazy.tsx
+++ b/src/routes/bootstrap-relays.lazy.tsx
@@ -53,7 +53,7 @@ function Screen() {
 			}

 			const merged = relays.join("\r\n");
-			const res = await commands.saveBootstrapRelays(merged);
+			const res = await commands.setBootstrapRelays(merged);

 			if (res.status === "ok") {
 				return await relaunch();
--- a/src/routes/columns/_layout/discover-relays.lazy.tsx
+++ b/src/routes/columns/_layout/discover-relays.lazy.tsx
@@ -0,0 +1,154 @@
+import { commands } from "@/commands.gen";
+import { Spinner, User } from "@/components";
+import { LumeWindow } from "@/system";
+import type { NostrEvent } from "@/types";
+import { ArrowDown } from "@phosphor-icons/react";
+import * as ScrollArea from "@radix-ui/react-scroll-area";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { createLazyFileRoute } from "@tanstack/react-router";
+import { type RefObject, useCallback, useRef } from "react";
+import { Virtualizer } from "virtua";
+
+export const Route = createLazyFileRoute("/columns/_layout/discover-relays")({
+	component: Screen,
+});
+
+function Screen() {
+	const {
+		isLoading,
+		isError,
+		error,
+		isFetchingNextPage,
+		hasNextPage,
+		fetchNextPage,
+		data,
+	} = useInfiniteQuery({
+		queryKey: ["discover-relays"],
+		initialPageParam: 0,
+		queryFn: async ({ pageParam }: { pageParam: number }) => {
+			const until = pageParam > 0 ? pageParam.toString() : null;
+			const res = await commands.getAllRelays(until);
+
+			if (res.status === "ok") {
+				const data: NostrEvent[] = res.data.map((item) => JSON.parse(item));
+				return data;
+			} else {
+				throw new Error(res.error);
+			}
+		},
+		getNextPageParam: (lastPage) => {
+			const lastEvent = lastPage.at(-1);
+
+			if (lastEvent) {
+				return lastEvent.created_at - 1;
+			}
+		},
+		select: (data) => data?.pages.flat(),
+		refetchOnWindowFocus: false,
+		refetchOnReconnect: false,
+		refetchOnMount: false,
+	});
+
+	const ref = useRef<HTMLDivElement>(null);
+
+	const renderItem = useCallback(
+		(item: NostrEvent) => {
+			return (
+				<div
+					key={item.id}
+					className="mb-3 flex flex-col rounded-xl overflow-hidden bg-white dark:bg-neutral-800/50 shadow-lg shadow-primary dark:ring-1 dark:ring-neutral-800"
+				>
+					<div className="flex flex-col gap-2 p-2">
+						{item.tags.map((tag) =>
+							tag[1]?.startsWith("wss://") ? (
+								<div
+									key={tag[1]}
+									className="group px-3 flex items-center justify-between h-11 rounded-lg bg-neutral-100 dark:bg-neutral-800"
+								>
+									<div className="flex-1 truncate select-text text-sm font-medium">
+										{tag[1]}
+									</div>
+									<button
+										type="button"
+										onClick={() =>
+											LumeWindow.openColumn({
+												name: tag[1],
+												label: `relays_${tag[1].replace(/[^\w\s]/gi, "")}`,
+												url: `/columns/relays/${encodeURIComponent(tag[1])}`,
+											})
+										}
+										className="hidden h-6 w-24 shrink-0 group-hover:inline-flex items-center justify-center gap-1 text-xs font-semibold rounded-full bg-neutral-200 dark:bg-neutral-700 hover:bg-blue-500 hover:text-white"
+									>
+										View event
+									</button>
+								</div>
+							) : null,
+						)}
+					</div>
+					<div className="p-2 flex items-center">
+						<User.Provider pubkey={item.pubkey}>
+							<User.Root className="inline-flex items-center gap-2">
+								<User.Avatar className="size-7 rounded-full" />
+								<User.Name className="text-xs font-medium" />
+							</User.Root>
+						</User.Provider>
+					</div>
+				</div>
+			);
+		},
+		[data],
+	);
+
+	return (
+		<ScrollArea.Root
+			type={"scroll"}
+			scrollHideDelay={300}
+			className="overflow-hidden size-full"
+		>
+			<ScrollArea.Viewport ref={ref} className="relative h-full px-3 pb-3">
+				<Virtualizer scrollRef={ref as unknown as RefObject<HTMLElement>}>
+					{isLoading ? (
+						<div className="inline-flex items-center gap-1.5">
+							<Spinner className="size-4" />
+							Loading...
+						</div>
+					) : isError ? (
+						<div className="mb-3 flex flex-col items-center justify-center h-16 w-full rounded-xl overflow-hidden bg-neutral-200/50 dark:bg-neutral-800/50">
+							<p className="text-center">{error?.message ?? "Error"}</p>
+						</div>
+					) : !data?.length ? (
+						<div className="mb-3 flex flex-col items-center justify-center h-16 w-full rounded-xl overflow-hidden bg-neutral-200/50 dark:bg-neutral-800/50">
+							<p className="text-center">Empty.</p>
+						</div>
+					) : (
+						data?.map((item) => renderItem(item))
+					)}
+					{hasNextPage ? (
+						<button
+							type="button"
+							onClick={() => fetchNextPage()}
+							disabled={isFetchingNextPage || isLoading}
+							className="h-11 w-full px-3 flex items-center justify-center gap-1.5 bg-neutral-200/50 hover:bg-neutral-200 rounded-full text-sm font-medium text-blue-600 dark:hover:bg-neutral-800 dark:bg-neutral-800/50 dark:text-blue-400"
+						>
+							{isFetchingNextPage ? (
+								<Spinner className="size-4" />
+							) : (
+								<>
+									<ArrowDown className="size-4" />
+									Load more
+								</>
+							)}
+						</button>
+					) : null}
+				</Virtualizer>
+			</ScrollArea.Viewport>
+			<ScrollArea.Scrollbar
+				className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
+				orientation="vertical"
+			>
+				<ScrollArea.Thumb className="flex-1 bg-black/10 dark:bg-white/10 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
+			</ScrollArea.Scrollbar>
+			<ScrollArea.Corner className="bg-transparent" />
+		</ScrollArea.Root>
+	);
+}
--- a/src/routes/columns/_layout/groups.$id.lazy.tsx
+++ b/src/routes/columns/_layout/groups.$id.lazy.tsx
@@ -26,7 +26,7 @@ export function Screen() {
 		hasNextPage,
 		fetchNextPage,
 	} = useInfiniteQuery({
-		queryKey: ["events", "groups", params.id],
+		queryKey: ["groups", params.id],
 		initialPageParam: 0,
 		queryFn: async ({ pageParam }: { pageParam: number }) => {
 			const until = pageParam > 0 ? pageParam.toString() : null;
--- a/src/routes/columns/_layout/interests.$id.lazy.tsx
+++ b/src/routes/columns/_layout/interests.$id.lazy.tsx
@@ -26,7 +26,7 @@ export function Screen() {
 		hasNextPage,
 		fetchNextPage,
 	} = useInfiniteQuery({
-		queryKey: ["events", "hashtags", params.id],
+		queryKey: ["hashtags", params.id],
 		initialPageParam: 0,
 		queryFn: async ({ pageParam }: { pageParam: number }) => {
 			const tags = hashtags.map((tag) => tag.toLowerCase().replace("#", ""));
--- a/src/routes/columns/_layout/launchpad.$id.lazy.tsx
+++ b/src/routes/columns/_layout/launchpad.$id.lazy.tsx
@@ -42,7 +42,7 @@ function Screen() {
 function Newsfeeds() {
 	const { id } = Route.useParams();
 	const { isLoading, isError, error, data, refetch, isRefetching } = useQuery({
-		queryKey: ["others", "newsfeeds", id],
+		queryKey: ["newsfeeds", id],
 		queryFn: async () => {
 			const res = await commands.getAllNewsfeeds(id);

@@ -204,7 +204,7 @@ function Newsfeeds() {
 function Interests() {
 	const { id } = Route.useParams();
 	const { isLoading, isError, error, data, refetch, isRefetching } = useQuery({
-		queryKey: ["others", "interests", id],
+		queryKey: ["interests", id],
 		queryFn: async () => {
 			const res = await commands.getAllInterests(id);

@@ -399,6 +399,22 @@ function Core() {
 							Add
 						</button>
 					</div>
+					<div className="px-3 flex items-center justify-between h-11 rounded-lg bg-neutral-100 dark:bg-neutral-800">
+						<div className="text-sm font-medium">Relays</div>
+						<button
+							type="button"
+							onClick={() =>
+								LumeWindow.openColumn({
+									name: "Relays",
+									label: "relays",
+									url: "/columns/discover-relays",
+								})
+							}
+							className="h-6 w-16 inline-flex items-center justify-center gap-1 text-xs font-semibold rounded-full bg-neutral-200 dark:bg-neutral-700 hover:bg-blue-500 hover:text-white"
+						>
+							Add
+						</button>
+					</div>
 					{data?.map((column) => (
 						<div
 							key={column.label}
--- a/src/routes/columns/_layout/newsfeed.$id.lazy.tsx
+++ b/src/routes/columns/_layout/newsfeed.$id.lazy.tsx
@@ -7,8 +7,7 @@ import { ArrowDown } from "@phosphor-icons/react";
 import * as ScrollArea from "@radix-ui/react-scroll-area";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { createLazyFileRoute } from "@tanstack/react-router";
-import { listen } from "@tauri-apps/api/event";
-import { type RefObject, useCallback, useEffect, useRef } from "react";
+import { type RefObject, useCallback, useRef } from "react";
 import { Virtualizer } from "virtua";

 export const Route = createLazyFileRoute("/columns/_layout/newsfeed/$id")({
@@ -18,7 +17,7 @@ export const Route = createLazyFileRoute("/columns/_layout/newsfeed/$id")({
 export function Screen() {
 	const contacts = Route.useLoaderData();
 	const search = Route.useSearch();
-	const { queryClient } = Route.useRouteContext();
+
 	const {
 		data,
 		isLoading,
@@ -83,18 +82,6 @@ export function Screen() {
 		[data],
 	);

-	useEffect(() => {
-		const unlisten = listen("synchronized", async () => {
-			await queryClient.refetchQueries({
-				queryKey: ["events", "newsfeed", search.label],
-			});
-		});
-
-		return () => {
-			unlisten.then((f) => f());
-		};
-	}, []);
-
 	return (
 		<ScrollArea.Root
 			type={"scroll"}
--- a/src/routes/columns/_layout/relays.$url.lazy.tsx
+++ b/src/routes/columns/_layout/relays.$url.lazy.tsx
@@ -0,0 +1,144 @@
+import { commands } from "@/commands.gen";
+import { toLumeEvents } from "@/commons";
+import { RepostNote, Spinner, TextNote } from "@/components";
+import type { LumeEvent } from "@/system";
+import { Kind } from "@/types";
+import { ArrowDown } from "@phosphor-icons/react";
+import * as ScrollArea from "@radix-ui/react-scroll-area";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { createLazyFileRoute } from "@tanstack/react-router";
+import { type RefObject, useCallback, useRef } from "react";
+import { Virtualizer } from "virtua";
+
+export const Route = createLazyFileRoute("/columns/_layout/relays/$url")({
+	component: Screen,
+});
+
+export function Screen() {
+	const { url } = Route.useParams();
+	const {
+		data,
+		isLoading,
+		isFetching,
+		isFetchingNextPage,
+		hasNextPage,
+		fetchNextPage,
+	} = useInfiniteQuery({
+		queryKey: ["relays", url],
+		initialPageParam: 0,
+		queryFn: async ({ pageParam }: { pageParam: number }) => {
+			const until = pageParam > 0 ? pageParam.toString() : null;
+			const relay = decodeURIComponent(url);
+			const res = await commands.getAllEventsFrom(relay, until);
+
+			if (res.status === "error") {
+				throw new Error(res.error);
+			}
+
+			return toLumeEvents(res.data);
+		},
+		getNextPageParam: (lastPage) => {
+			const lastEvent = lastPage.at(-1);
+
+			if (lastEvent) {
+				return lastEvent.created_at - 1;
+			}
+		},
+		select: (data) => data?.pages.flat(),
+	});
+
+	const ref = useRef<HTMLDivElement>(null);
+
+	const renderItem = useCallback(
+		(event: LumeEvent) => {
+			if (!event) {
+				return;
+			}
+
+			switch (event.kind) {
+				case Kind.Repost: {
+					const repostId = event.repostId;
+
+					return (
+						<RepostNote
+							key={repostId + event.id}
+							event={event}
+							className="border-b-[.5px] border-neutral-300 dark:border-neutral-700"
+						/>
+					);
+				}
+				default:
+					return (
+						<TextNote
+							key={event.id}
+							event={event}
+							className="border-b-[.5px] border-neutral-300 dark:border-neutral-700"
+						/>
+					);
+			}
+		},
+		[data],
+	);
+
+	return (
+		<ScrollArea.Root
+			type={"scroll"}
+			scrollHideDelay={300}
+			className="overflow-hidden size-full px-3"
+		>
+			<ScrollArea.Viewport
+				ref={ref}
+				className="relative h-full bg-white dark:bg-neutral-800 rounded-t-xl shadow shadow-neutral-300/50 dark:shadow-none border-[.5px] border-neutral-300 dark:border-neutral-700"
+			>
+				<Virtualizer scrollRef={ref as unknown as RefObject<HTMLElement>}>
+					{isFetching && !isLoading && !isFetchingNextPage ? (
+						<div className="z-50 fixed top-0 left-0 w-full h-14 flex items-center justify-center px-3">
+							<div className="w-max h-8 pl-2 pr-3 inline-flex items-center justify-center gap-1.5 rounded-full shadow-lg text-sm font-medium text-white bg-black dark:text-black dark:bg-white">
+								<Spinner className="size-4" />
+								Getting new notes...
+							</div>
+						</div>
+					) : null}
+					{isLoading ? (
+						<div className="flex items-center justify-center w-full h-16 gap-2">
+							<Spinner className="size-4" />
+							<span className="text-sm font-medium">Loading...</span>
+						</div>
+					) : !data?.length ? (
+						<div className="mb-3 flex items-center justify-center h-20 text-sm">
+							🎉 Yo. You're catching up on all latest notes.
+						</div>
+					) : (
+						data.map((item) => renderItem(item))
+					)}
+					{hasNextPage ? (
+						<div>
+							<button
+								type="button"
+								onClick={() => fetchNextPage()}
+								disabled={isFetchingNextPage || isLoading}
+								className="inline-flex items-center justify-center w-full gap-2 px-3 text-sm font-medium text-blue-500 h-11 focus:outline-none"
+							>
+								{isFetchingNextPage ? (
+									<Spinner className="size-4" />
+								) : (
+									<>
+										<ArrowDown className="size-4" />
+										Load more
+									</>
+								)}
+							</button>
+						</div>
+					) : null}
+				</Virtualizer>
+			</ScrollArea.Viewport>
+			<ScrollArea.Scrollbar
+				className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
+				orientation="vertical"
+			>
+				<ScrollArea.Thumb className="flex-1 bg-black/10 dark:bg-white/10 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
+			</ScrollArea.Scrollbar>
+			<ScrollArea.Corner className="bg-transparent" />
+		</ScrollArea.Root>
+	);
+}