feat: add translation to relay screen

lumehq · Jan 29, 2024 · b97676d · b97676d
1 parent 25ae4f2
commit b97676d
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 137 deletions.
diff --git a/apps/desktop/src/routes/home/index.tsx b/apps/desktop/src/routes/home/index.tsx
@@ -18,10 +18,13 @@ import { TutorialModal } from "@lume/ui/src/tutorial/modal";
 import { COL_TYPES } from "@lume/utils";
 import * as Tooltip from "@radix-ui/react-tooltip";
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 import { VList } from "virtua";
 
 export function HomeScreen() {
+	const { t } = useTranslation();
 	const { columns, vlistRef, addColumn } = useColumnContext();
+
 	const [selectedIndex, setSelectedIndex] = useState(-1);
 
 	const renderItem = (column: IColumn) => {
@@ -124,7 +127,7 @@ export function HomeScreen() {
 							</Tooltip.Trigger>
 							<Tooltip.Portal>
 								<Tooltip.Content className="inline-flex h-7 select-none text-neutral-50 dark:text-neutral-950 items-center justify-center rounded-md bg-neutral-950 dark:bg-neutral-50 px-3.5 text-sm will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade">
-									Move Left
+									{t("global.moveLeft")}
 									<Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
 								</Tooltip.Content>
 							</Tooltip.Portal>
@@ -151,7 +154,7 @@ export function HomeScreen() {
 							</Tooltip.Trigger>
 							<Tooltip.Portal>
 								<Tooltip.Content className="inline-flex h-7 select-none text-neutral-50 dark:text-neutral-950 items-center justify-center rounded-md bg-neutral-950 dark:bg-neutral-50 px-3.5 text-sm will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade">
-									Move Right
+									{t("global.moveRight")}
 									<Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
 								</Tooltip.Content>
 							</Tooltip.Portal>
@@ -174,7 +177,7 @@ export function HomeScreen() {
 							</Tooltip.Trigger>
 							<Tooltip.Portal>
 								<Tooltip.Content className="inline-flex h-7 select-none text-neutral-50 dark:text-neutral-950 items-center justify-center rounded-md bg-neutral-950 dark:bg-neutral-50 px-3.5 text-sm will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade">
-									New Column
+									{t("global.newColum")}
 									<Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
 								</Tooltip.Content>
 							</Tooltip.Portal>

diff --git a/apps/desktop/src/routes/relays/components/relayEventList.tsx b/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>

diff --git a/apps/desktop/src/routes/relays/components/relayItem.tsx b/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"

diff --git a/apps/desktop/src/routes/relays/components/relayList.tsx b/apps/desktop/src/routes/relays/components/relayList.tsx
diff --git a/apps/desktop/src/routes/relays/components/sidebar.tsx b/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) => (

diff --git a/apps/desktop/src/routes/relays/index.tsx b/apps/desktop/src/routes/relays/index.tsx
@@ -1,8 +1,11 @@
 import { cn } from "@lume/utils";
+import { useTranslation } from "react-i18next";
 import { NavLink, Outlet } from "react-router-dom";
 import { RelaySidebar } from "./components/sidebar";
 
 export function RelaysScreen() {
+	const { t } = useTranslation();
+
 	return (
 		<div className="grid h-full w-full lg:grid-cols-4 xl:grid-cols-5 rounded-xl shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] dark:shadow-none dark:ring-1 dark:ring-white/10">
 			<RelaySidebar className="col-span-1" />
@@ -20,7 +23,7 @@ export function RelaysScreen() {
 							)
 						}
 					>
-						Global
+						{t("relays.global")}
 					</NavLink>
 					<NavLink
 						to={"/relays/follows/"}
@@ -33,7 +36,7 @@ export function RelaysScreen() {
 							)
 						}
 					>
-						Follows
+						{t("relays.follows")}
 					</NavLink>
 				</div>
 				<div className="flex flex-col flex-1 min-h-0 overflow-y-auto">