feat: redesign relay screen

packages/ark/src/ark.ts

@@ -355,11 +355,11 @@ export class Ark {
 
 	public async getAllRelaysFromContacts() {
 		const fetcher = NostrFetcher.withCustomPool(ndkAdapter(this.ndk));
+		const connectedRelays = this.ndk.pool
+			.connectedRelays()
+			.map((item) => item.url);
+
 		try {
-			const LIMIT = 1;
-			const connectedRelays = this.ndk.pool
-				.connectedRelays()
-				.map((item) => item.url);
 			const relayMap = new Map<string, string[]>();
 			const relayEvents = fetcher.fetchLatestEventsPerAuthor(
 				{
@@ -367,7 +367,7 @@ export class Ark {
 					relayUrls: connectedRelays,
 				},
 				{ kinds: [NDKKind.RelayList] },
-				LIMIT,
+				1,
 			);
 
 			for await (const { author, events } of relayEvents) {

packages/ark/src/hooks/useRelayList.ts

@@ -1,11 +1,9 @@
-import { useStorage } from "@lume/storage";
 import { NDKKind, NDKRelayUrl, NDKTag } from "@nostr-dev-kit/ndk";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useArk } from "./useArk";
 
-export function useRelay() {
+export function useRelaylist() {
 	const ark = useArk();
-	const storage = useStorage();
 	const queryClient = useQueryClient();
 
 	const connectRelay = useMutation({
@@ -15,7 +13,7 @@ export function useRelay() {
 		) => {
 			// Cancel any outgoing refetches
 			await queryClient.cancelQueries({
-				queryKey: ["relays", ark.account.pubkey],
+				queryKey: ["relay-personal"],
 			});
 
 			// Snapshot the previous value
@@ -42,17 +40,17 @@ export function useRelay() {
 			});
 
 			// Optimistically update to the new value
-			queryClient.setQueryData(
-				["relays", ark.account.pubkey],
-				(prev: NDKTag[]) => [...prev, ["r", relay, purpose ?? ""]],
-			);
+			queryClient.setQueryData(["relay-personal"], (prev: NDKTag[]) => [
+				...prev,
+				["r", relay, purpose ?? ""],
+			]);
 
 			// Return a context object with the snapshotted value
 			return { prevRelays };
 		},
 		onSettled: () => {
 			queryClient.invalidateQueries({
-				queryKey: ["relays", ark.account.pubkey],
+				queryKey: ["relay-personal"],
 			});
 		},
 	});
@@ -61,7 +59,7 @@ export function useRelay() {
 		mutationFn: async (relay: NDKRelayUrl) => {
 			// Cancel any outgoing refetches
 			await queryClient.cancelQueries({
-				queryKey: ["relays", ark.account.pubkey],
+				queryKey: ["relay-personal"],
 			});
 
 			// Snapshot the previous value
@@ -81,14 +79,14 @@ export function useRelay() {
 			});
 
 			// Optimistically update to the new value
-			queryClient.setQueryData(["relays", ark.account.pubkey], prevRelays);
+			queryClient.setQueryData(["relay-personal"], prevRelays);
 
 			// Return a context object with the snapshotted value
 			return { prevRelays };
 		},
 		onSettled: () => {
 			queryClient.invalidateQueries({
-				queryKey: ["relays", ark.account.pubkey],
+				queryKey: ["relay-personal"],
 			});
 		},
 	});

packages/ark/src/index.ts

@@ -4,7 +4,7 @@ export * from "./provider";
 export * from "./hooks/useEvent";
 export * from "./hooks/useArk";
 export * from "./hooks/useProfile";
-export * from "./hooks/useRelay";
+export * from "./hooks/useRelayList";
 export * from "./components/user";
 export * from "./components/column";
 export * from "./components/column/provider";

packages/ark/src/provider.tsx

@@ -1,7 +1,7 @@
 import { LoaderIcon } from "@lume/icons";
 import { NDKCacheAdapterTauri } from "@lume/ndk-cache-tauri";
 import { useStorage } from "@lume/storage";
-import { QUOTES, sendNativeNotification } from "@lume/utils";
+import { FETCH_LIMIT, QUOTES, sendNativeNotification } from "@lume/utils";
 import NDK, {
 	NDKEvent,
 	NDKKind,
@@ -11,6 +11,7 @@ import NDK, {
 	NDKRelayAuthPolicies,
 	NDKUser,
 } from "@nostr-dev-kit/ndk";
+import { useQueryClient } from "@tanstack/react-query";
 import { fetch } from "@tauri-apps/plugin-http";
 import Linkify from "linkify-react";
 import { normalizeRelayUrlSet } from "nostr-fetch";
@@ -20,6 +21,7 @@ import { LumeContext } from "./context";
 
 export const LumeProvider = ({ children }: PropsWithChildren<object>) => {
 	const storage = useStorage();
+	const queryClient = useQueryClient();
 
 	const [ark, setArk] = useState<Ark>(undefined);
 	const [ndk, setNDK] = useState<NDK>(undefined);
@@ -151,6 +153,56 @@ export const LumeProvider = ({ children }: PropsWithChildren<object>) => {
 				{ closeOnEose: false, groupable: false },
 			);
 
+			// prefetch activty
+			await queryClient.prefetchInfiniteQuery({
+				queryKey: ["activity"],
+				initialPageParam: 0,
+				queryFn: async ({
+					signal,
+					pageParam,
+				}: {
+					signal: AbortSignal;
+					pageParam: number;
+				}) => {
+					const events = await ark.getInfiniteEvents({
+						filter: {
+							kinds: [NDKKind.Text, NDKKind.Repost, NDKKind.Zap],
+							"#p": [ark.account.pubkey],
+						},
+						limit: FETCH_LIMIT,
+						pageParam,
+						signal,
+					});
+
+					return events;
+				},
+			});
+
+			// prefetch timeline
+			await queryClient.prefetchInfiniteQuery({
+				queryKey: ["timeline-9999"],
+				initialPageParam: 0,
+				queryFn: async ({
+					signal,
+					pageParam,
+				}: {
+					signal: AbortSignal;
+					pageParam: number;
+				}) => {
+					const events = await ark.getInfiniteEvents({
+						filter: {
+							kinds: [NDKKind.Text, NDKKind.Repost],
+							authors: ark.account.contacts,
+						},
+						limit: FETCH_LIMIT,
+						pageParam,
+						signal,
+					});
+
+					return events;
+				},
+			});
+
 			sub.addListener("event", async (event: NDKEvent) => {
 				const profile = await ark.getUserProfile(event.pubkey);
 				switch (event.kind) {

packages/ui/src/navigation.tsx

@@ -3,9 +3,13 @@ import {
 	BellIcon,
 	ComposeFilledIcon,
 	ComposeIcon,
+	DepotFilledIcon,
+	DepotIcon,
 	HomeFilledIcon,
 	HomeIcon,
 	NwcIcon,
+	RelayFilledIcon,
+	RelayIcon,
 	SettingsFilledIcon,
 	SettingsIcon,
 } from "@lume/icons";
@@ -27,7 +31,12 @@ export function Navigation() {
 					<button
 						type="button"
 						onClick={() => setIsEditorOpen((state) => !state)}
-						className="flex items-center justify-center h-auto w-full text-black aspect-square rounded-xl bg-black/5 hover:bg-blue-500 hover:text-white dark:bg-white/5 dark:text-white dark:hover:bg-blue-500"
+						className={cn(
+							"flex items-center justify-center h-auto w-full text-black aspect-square rounded-xl hover:text-white dark:text-white",
+							isEditorOpen
+								? "bg-blue-500"
+								: "bg-black/5 hover:bg-blue-500 dark:bg-white/5 dark:hover:bg-blue-500",
+						)}
 					>
 						{isEditorOpen ? (
 							<ComposeFilledIcon className="size-5" />
@@ -61,7 +70,7 @@ export function Navigation() {
 						)}
 					</NavLink>
 					<NavLink
-						to="/activity"
+						to="/activity/"
 						preventScrollReset={true}
 						className="inline-flex flex-col items-center justify-center"
 					>
@@ -82,6 +91,28 @@ export function Navigation() {
 							</div>
 						)}
 					</NavLink>
+					<NavLink
+						to="/relays/"
+						preventScrollReset={true}
+						className="inline-flex flex-col items-center justify-center"
+					>
+						{({ isActive }) => (
+							<div
+								className={cn(
+									"inline-flex aspect-square h-auto w-full items-center justify-center rounded-xl",
+									isActive
+										? "bg-black/10 text-black dark:bg-white/10 dark:text-white"
+										: "text-black/50 dark:text-neutral-400",
+								)}
+							>
+								{isActive ? (
+									<DepotFilledIcon className="size-6" />
+								) : (
+									<DepotIcon className="size-6" />
+								)}
+							</div>
+						)}
+					</NavLink>
 				</div>
 			</div>
 			<div className="flex flex-col">