feat: add translation to relay screen

apps/desktop/src/routes/relays/components/relayEventList.tsx

@@ -4,10 +4,13 @@ import { FETCH_LIMIT } from "@lume/utils";
 import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { useCallback, useMemo } from "react";
+import { useTranslation } from "react-i18next";
 import { VList } from "virtua";
 
 export function RelayEventList({ relayUrl }: { relayUrl: string }) {
 	const ark = useArk();
+
+	const { t } = useTranslation();
 	const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
 		useInfiniteQuery({
 			queryKey: ["relay-events", relayUrl],
@@ -37,14 +40,10 @@ export function RelayEventList({ relayUrl }: { relayUrl: string }) {
 				if (!lastEvent) return;
 				return lastEvent.created_at - 1;
 			},
+			select: (data) => data?.pages.flatMap((page) => page),
 			refetchOnWindowFocus: false,
 		});
 
-	const allEvents = useMemo(
-		() => (data ? data.pages.flatMap((page) => page) : []),
-		[data],
-	);
-
 	const renderItem = useCallback(
 		(event: NDKEvent) => {
 			switch (event.kind) {
@@ -64,7 +63,7 @@ export function RelayEventList({ relayUrl }: { relayUrl: string }) {
 			{status === "pending" ? (
 				<NoteSkeleton />
 			) : (
-				allEvents.map((item) => renderItem(item))
+				data.map((item) => renderItem(item))
 			)}
 			<div className="flex h-16 items-center justify-center px-3 pb-3">
 				{hasNextPage ? (
@@ -79,7 +78,7 @@ export function RelayEventList({ relayUrl }: { relayUrl: string }) {
 						) : (
 							<>
 								<ArrowRightCircleIcon className="h-5 w-5" />
-								Load more
+								{t("global.loading")}
 							</>
 						)}
 					</button>

apps/desktop/src/routes/relays/components/relayItem.tsx

@@ -1,17 +1,20 @@
 import { User, useRelaylist } from "@lume/ark";
 import { PlusIcon, SearchIcon } from "@lume/icons";
 import { normalizeRelayUrl } from "nostr-fetch";
+import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 
 export function RelayItem({ url, users }: { url: string; users?: string[] }) {
 	const domain = new URL(url).hostname;
+
+	const { t } = useTranslation();
 	const { connectRelay } = useRelaylist();
 
 	return (
 		<div className="flex h-14 w-full items-center justify-between border-b border-neutral-100 px-5 dark:border-neutral-950">
 			<div className="inline-flex items-center gap-2">
 				<span className="text-sm font-semibold text-neutral-500 dark:text-neutral-400">
-					Relay:{" "}
+					{t("global.relay")}:{" "}
 				</span>
 				<span className="max-w-[200px] truncate text-sm font-medium text-neutral-900 dark:text-neutral-100">
 					{url}
@@ -39,7 +42,7 @@ export function RelayItem({ url, users }: { url: string; users?: string[] }) {
 					className="inline-flex h-8 items-center justify-center gap-2 rounded-lg bg-neutral-100 px-2 text-sm font-medium hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800"
 				>
 					<SearchIcon className="size-4" />
-					Inspect
+					{t("global.inspect")}
 				</Link>
 				<button
 					type="button"

apps/desktop/src/routes/relays/components/relayList.tsx

@@ -1,91 +0,0 @@
-import { useArk, useRelaylist } from "@lume/ark";
-import { LoaderIcon, PlusIcon, ShareIcon } from "@lume/icons";
-import { User } from "@lume/ui";
-import { useQuery } from "@tanstack/react-query";
-import { useNavigate } from "react-router-dom";
-import { VList } from "virtua";
-
-export function RelayList() {
-	const ark = useArk();
-	const { connectRelay } = useRelaylist();
-	const { status, data } = useQuery({
-		queryKey: ["relays"],
-		queryFn: async () => {
-			return await ark.getAllRelaysFromContacts();
-		},
-		refetchOnWindowFocus: false,
-		refetchOnMount: false,
-		refetchOnReconnect: false,
-		staleTime: Infinity,
-	});
-
-	const navigate = useNavigate();
-
-	const inspectRelay = (relayUrl: string) => {
-		const url = new URL(relayUrl);
-		navigate(`/relays/${url.hostname}`);
-	};
-
-	return (
-		<div className="col-span-2 bg-white">
-			{status === "pending" ? (
-				<div className="flex h-full w-full items-center justify-center pb-10">
-					<div className="inline-flex flex-col items-center justify-center gap-2">
-						<LoaderIcon className="h-5 w-5 animate-spin text-neutral-900 dark:text-neutral-100" />
-						<p>Loading relay...</p>
-					</div>
-				</div>
-			) : (
-				<VList className="h-full">
-					<div className="inline-flex h-16 w-full items-center border-b border-neutral-100 px-3 dark:border-neutral-900">
-						<h3 className="font-semibold">Relay discovery</h3>
-					</div>
-					{[...data].map(([key, value]) => (
-						<div
-							key={key}
-							className="flex h-14 w-full items-center justify-between border-b border-neutral-100 px-3 dark:border-neutral-900"
-						>
-							<div className="inline-flex items-center gap-2 divide-x divide-neutral-100 dark:divide-neutral-900">
-								<div className="inline-flex items-center gap-2">
-									<button
-										type="button"
-										onClick={() => inspectRelay(key)}
-										className="inline-flex h-6 items-center justify-center gap-1 rounded bg-neutral-200 px-1.5 text-sm font-medium text-neutral-900 hover:bg-neutral-300 dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-neutral-700"
-									>
-										<ShareIcon className="h-3 w-3" />
-										Inspect
-									</button>
-									<button
-										type="button"
-										onClick={() => connectRelay.mutate(key)}
-										className="inline-flex h-6 w-6 items-center justify-center rounded text-neutral-900 hover:bg-neutral-200 dark:text-neutral-100 dark:hover:bg-neutral-800"
-									>
-										<PlusIcon className="h-3 w-3" />
-									</button>
-								</div>
-								<div className="inline-flex items-center gap-2 pl-3">
-									<span className="text-sm font-semibold text-neutral-500 dark:text-neutral-400">
-										Relay:{" "}
-									</span>
-									<span className="max-w-[200px] truncate text-sm font-medium text-neutral-900 dark:text-neutral-100">
-										{key}
-									</span>
-								</div>
-							</div>
-							<div className="isolate flex -space-x-2">
-								{value.slice(0, 4).map((item) => (
-									<User key={item} pubkey={item} variant="stacked" />
-								))}
-								{value.length > 4 ? (
-									<div className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-neutral-200 text-neutral-900 ring-1 ring-neutral-300 dark:bg-neutral-800 dark:text-neutral-100 dark:ring-neutral-700">
-										<span className="text-xs font-medium">+{value.length}</span>
-									</div>
-								) : null}
-							</div>
-						</div>
-					))}
-				</VList>
-			)}
-		</div>
-	);
-}

apps/desktop/src/routes/relays/components/sidebar.tsx

@@ -3,11 +3,13 @@ import { CancelIcon, LoaderIcon, RefreshIcon } from "@lume/icons";
 import { cn } from "@lume/utils";
 import { NDKKind, NDKSubscriptionCacheUsage } from "@nostr-dev-kit/ndk";
 import { useQuery } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
 import { RelayForm } from "./relayForm";
 
 export function RelaySidebar({ className }: { className?: string }) {
 	const ark = useArk();
 
+	const { t } = useTranslation();
 	const { removeRelay } = useRelaylist();
 	const { status, data, isRefetching, refetch } = useQuery({
 		queryKey: ["relay-personal"],
@@ -40,7 +42,7 @@ export function RelaySidebar({ className }: { className?: string }) {
 			)}
 		>
 			<div className="inline-flex items-center justify-between w-full h-14 px-3 border-b border-black/10 dark:border-white/10">
-				<h3 className="font-semibold">Connected relays</h3>
+				<h3 className="font-semibold">{t("relays.sidebar.title")}</h3>
 				<button
 					type="button"
 					onClick={() => refetch()}
@@ -58,7 +60,7 @@ export function RelaySidebar({ className }: { className?: string }) {
 					</div>
 				) : !data.length ? (
 					<div className="flex items-center justify-center w-full h-20 rounded-lg bg-black/10 dark:bg-white/10">
-						<p className="text-sm font-medium">Empty.</p>
+						<p className="text-sm font-medium">{t("relays.sidebar.empty")}</p>
 					</div>
 				) : (
 					data.map((item) => (