feat: migrate activity screen to i18n

apps/desktop/src/routes/activty/components/activityRepost.tsx

@@ -1,8 +1,11 @@
 import { User } from "@lume/ark";
 import { NDKEvent } from "@nostr-dev-kit/ndk";
+import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 
 export function ActivityRepost({ event }: { event: NDKEvent }) {
+	const { t } = useTranslation();
+
 	return (
 		<Link
 			to={`/activity/${event.id}`}
@@ -14,7 +17,7 @@ export function ActivityRepost({ event }: { event: NDKEvent }) {
 						<User.Avatar className="size-8 rounded-lg shrink-0" />
 						<div className="inline-flex items-center gap-1.5">
 							<User.Name className="max-w-[8rem] font-semibold text-neutral-950 dark:text-neutral-50" />
-							<p className="shrink-0">reposted</p>
+							<p className="shrink-0">{t("activity.repost")}</p>
 						</div>
 					</div>
 					<User.Time

apps/desktop/src/routes/activty/components/activityText.tsx

@@ -1,8 +1,11 @@
 import { User } from "@lume/ark";
 import { NDKEvent } from "@nostr-dev-kit/ndk";
+import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 
 export function ActivityText({ event }: { event: NDKEvent }) {
+	const { t } = useTranslation();
+
 	return (
 		<Link
 			to={`/activity/${event.id}`}
@@ -14,7 +17,7 @@ export function ActivityText({ event }: { event: NDKEvent }) {
 						<User.Avatar className="size-8 rounded-lg shrink-0" />
 						<div className="inline-flex items-center gap-1.5">
 							<User.Name className="max-w-[8rem] font-semibold text-neutral-950 dark:text-neutral-50" />
-							<p className="shrink-0">mention you</p>
+							<p className="shrink-0">{t("activity.mention")}</p>
 						</div>
 					</div>
 					<User.Time

apps/desktop/src/routes/activty/components/activityZap.tsx

@@ -1,9 +1,11 @@
 import { User } from "@lume/ark";
 import { compactNumber } from "@lume/utils";
 import { NDKEvent, zapInvoiceFromEvent } from "@nostr-dev-kit/ndk";
+import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 
 export function ActivityZap({ event }: { event: NDKEvent }) {
+	const { t } = useTranslation();
 	const invoice = zapInvoiceFromEvent(event);
 
 	return (
@@ -18,7 +20,7 @@ export function ActivityZap({ event }: { event: NDKEvent }) {
 						<div className="inline-flex items-center gap-1.5">
 							<User.Name className="max-w-[8rem] font-semibold text-neutral-950 dark:text-neutral-50" />
 							<p className="shrink-0">
-								zapped {compactNumber.format(invoice.amount)} sats
+								{t("activity.zap")} {compactNumber.format(invoice.amount)} sats
 							</p>
 						</div>
 					</div>

apps/desktop/src/routes/activty/components/list.tsx

@@ -4,6 +4,7 @@ import { FETCH_LIMIT } from "@lume/utils";
 import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
 import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
 import { useCallback, useMemo } from "react";
+import { useTranslation } from "react-i18next";
 import { ActivityRepost } from "./activityRepost";
 import { ActivityText } from "./activityText";
 import { ActivityZap } from "./activityZap";
@@ -12,6 +13,7 @@ export function ActivityList() {
 	const ark = useArk();
 	const queryClient = useQueryClient();
 
+	const { t } = useTranslation();
 	const { data, hasNextPage, isLoading, isFetchingNextPage, fetchNextPage } =
 		useInfiniteQuery({
 			queryKey: ["activity"],
@@ -86,7 +88,7 @@ export function ActivityList() {
 			) : !allEvents.length ? (
 				<div className="w-full h-full flex flex-col items-center justify-center">
 					<p className="mb-2 text-2xl">🎉</p>
-					<p className="text-center font-medium">Yo! Nothing new yet.</p>
+					<p className="text-center font-medium">{t("activity.empty")}</p>
 				</div>
 			) : (
 				allEvents.map((event) => renderEvenKind(event))
@@ -104,7 +106,7 @@ export function ActivityList() {
 						) : (
 							<>
 								<ArrowRightCircleIcon className="size-5" />
-								Load more
+								{t("global.loadMore")}
 							</>
 						)}
 					</button>

apps/desktop/src/routes/activty/components/singleRepost.tsx

@@ -1,16 +1,20 @@
 import { User } from "@lume/ark";
 import { NDKEvent } from "@nostr-dev-kit/ndk";
+import { useTranslation } from "react-i18next";
 import { ActivityRootNote } from "./rootNote";
 
 export function ActivitySingleRepost({ event }: { event: NDKEvent }) {
+	const { t } = useTranslation();
 	const repostId = event.tags.find((el) => el[0] === "e")[1];
 
 	return (
 		<div className="pb-3 flex flex-col">
 			<div className="h-14 shrink-0 border-b border-neutral-100 dark:border-neutral-900 flex flex-col items-center justify-center px-3">
-				<h3 className="text-center font-semibold leading-tight">Boost</h3>
+				<h3 className="text-center font-semibold leading-tight">
+					{t("activity.boost")}
+				</h3>
 				<p className="text-sm text-blue-500 font-medium leading-tight">
-					@ Someone has reposted to your note
+					{t("activity.boostSubtitle")}
 				</p>
 			</div>
 			<div className="flex-1 min-h-0">
@@ -22,7 +26,7 @@ export function ActivitySingleRepost({ event }: { event: NDKEvent }) {
 					</User.Provider>
 					<div className="flex flex-col items-center gap-3">
 						<div className="h-4 w-px bg-blue-500" />
-						<h3 className="font-semibold">Reposted</h3>
+						<h3 className="font-semibold capitalize">{t("activity.repost")}</h3>
 						<div className="h-4 w-px bg-blue-500" />
 					</div>
 					<ActivityRootNote eventId={repostId} />

apps/desktop/src/routes/activty/components/singleText.tsx

@@ -1,5 +1,6 @@
 import { Note, useArk } from "@lume/ark";
 import { NDKEvent } from "@nostr-dev-kit/ndk";
+import { useTranslation } from "react-i18next";
 import { ActivityRootNote } from "./rootNote";
 
 export function ActivitySingleText({ event }: { event: NDKEvent }) {
@@ -9,14 +10,16 @@ export function ActivitySingleText({ event }: { event: NDKEvent }) {
 		tags: event.tags,
 	});
 
+	const { t } = useTranslation();
+
 	return (
 		<div className="h-full w-full flex flex-col justify-between">
 			<div className="h-14 border-b border-neutral-100 dark:border-neutral-900 flex flex-col items-center justify-center px-3">
 				<h3 className="text-center font-semibold leading-tight">
-					Conversation
+					{t("activity.conversation")}
 				</h3>
 				<p className="text-sm text-blue-500 font-medium leading-tight">
-					@ Someone has replied to your note
+					{t("activity.conversationSubtitle")}
 				</p>
 			</div>
 			<div className="overflow-y-auto">
@@ -33,7 +36,9 @@ export function ActivitySingleText({ event }: { event: NDKEvent }) {
 					) : null}
 					<div className="mt-3 flex flex-col gap-3">
 						<div className="flex items-center gap-3">
-							<p className="text-teal-500 font-medium">New reply</p>
+							<p className="text-teal-500 font-medium">
+								{t("activity.newReply")}
+							</p>
 							<div className="flex-1 h-px bg-teal-300" />
 							<div className="w-4 shrink-0 h-px bg-teal-300" />
 						</div>

apps/desktop/src/routes/activty/index.tsx

@@ -1,10 +1,12 @@
 import { activityUnreadAtom } from "@lume/utils";
 import { useSetAtom } from "jotai";
 import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
 import { Outlet } from "react-router-dom";
 import { ActivityList } from "./components/list";
 
 export function ActivityScreen() {
+	const { t } = useTranslation();
 	const setUnreadActivity = useSetAtom(activityUnreadAtom);
 
 	useEffect(() => {
@@ -15,7 +17,7 @@ export function ActivityScreen() {
 		<div className="flex h-full w-full 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">
 			<div className="h-full flex flex-col w-96 shrink-0 rounded-l-xl bg-white/50 backdrop-blur-xl dark:bg-black/50">
 				<div className="h-14 shrink-0 flex items-center px-5 text-lg font-semibold border-b border-black/10 dark:border-white/10">
-					Activity
+					{t("activity.title")}
 				</div>
 				<ActivityList />
 			</div>