feat: migrate ui components to i18n

packages/ark/src/components/column/header.tsx

@@ -3,12 +3,11 @@ import {
 	MoveLeftIcon,
 	MoveRightIcon,
 	RefreshIcon,
-	ThreadIcon,
 	TrashIcon,
 } from "@lume/icons";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import { useQueryClient } from "@tanstack/react-query";
-import { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
 import { InterestModal } from "./interestModal";
 import { useColumnContext } from "./provider";
 
@@ -16,14 +15,14 @@ export function ColumnHeader({
 	id,
 	title,
 	queryKey,
-	icon,
 }: {
 	id: number;
 	title: string;
 	queryKey?: string[];
-	icon?: ReactNode;
 }) {
 	const queryClient = useQueryClient();
+
+	const { t } = useTranslation();
 	const { moveColumn, removeColumn } = useColumnContext();
 
 	const refresh = async () => {
@@ -63,7 +62,7 @@ export function ColumnHeader({
 								className="inline-flex items-center gap-3 px-3 text-sm font-medium rounded-lg h-9 text-black/70 hover:bg-black/10 hover:text-black focus:outline-none dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white"
 							>
 								<RefreshIcon className="size-4" />
-								Refresh
+								{t("global.refresh")}
 							</button>
 						</DropdownMenu.Item>
 						{queryKey?.[0] === "foryou-9998" ? (
@@ -81,7 +80,7 @@ export function ColumnHeader({
 								className="inline-flex items-center gap-3 px-3 text-sm font-medium rounded-lg h-9 text-black/70 hover:bg-black/10 hover:text-black focus:outline-none dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white"
 							>
 								<MoveLeftIcon className="size-4" />
-								Move left
+								{t("global.moveLeft")}
 							</button>
 						</DropdownMenu.Item>
 						<DropdownMenu.Item asChild>
@@ -91,7 +90,7 @@ export function ColumnHeader({
 								className="inline-flex items-center gap-3 px-3 text-sm font-medium rounded-lg h-9 text-black/70 hover:bg-black/10 hover:text-black focus:outline-none dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white"
 							>
 								<MoveRightIcon className="size-4" />
-								Move right
+								{t("global.moveRight")}
 							</button>
 						</DropdownMenu.Item>
 						<DropdownMenu.Separator className="h-px my-1 bg-black/10 dark:bg-white/10" />
@@ -102,7 +101,7 @@ export function ColumnHeader({
 								className="inline-flex items-center gap-3 px-3 text-sm font-medium text-red-500 rounded-lg h-9 hover:bg-red-500 hover:text-red-50 focus:outline-none"
 							>
 								<TrashIcon className="size-4" />
-								Delete
+								{t("global.Delete")}
 							</button>
 						</DropdownMenu.Item>
 					</DropdownMenu.Content>

packages/ark/src/components/column/interestModal.tsx

@@ -4,6 +4,7 @@ import { TOPICS, cn } from "@lume/utils";
 import * as Dialog from "@radix-ui/react-dialog";
 import { useQueryClient } from "@tanstack/react-query";
 import { ReactNode, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 
 export function InterestModal({
@@ -14,6 +15,7 @@ export function InterestModal({
 	const storage = useStorage();
 	const queryClient = useQueryClient();
 
+	const [t] = useTranslation();
 	const [open, setOpen] = useState(false);
 	const [loading, setLoading] = useState(false);
 	const [hashtags, setHashtags] = useState(storage.interests?.hashtags || []);
@@ -65,7 +67,7 @@ export function InterestModal({
 				) : (
 					<>
 						<EditInterestIcon className="size-4" />
-						Edit interest
+						{t("interests.edit")}
 					</>
 				)}
 			</Dialog.Trigger>
@@ -80,7 +82,7 @@ export function InterestModal({
 						<div className="w-full h-full flex flex-col">
 							<div className="h-16 shrink-0 px-8 border-b border-neutral-100 dark:border-neutral-900 flex w-full items-center justify-between">
 								<div className="flex flex-col">
-									<h3 className="font-semibold">Edit Interest</h3>
+									<h3 className="font-semibold">{t("interests.edit")}</h3>
 								</div>
 							</div>
 							<div className="w-full flex-1 min-h-0 flex flex-col justify-between">
@@ -104,7 +106,7 @@ export function InterestModal({
 														onClick={() => toggleAll(topic.content)}
 														className="text-sm font-medium text-blue-500"
 													>
-														Follow All
+														{t("interests.followAll")}
 													</button>
 												</div>
 												<div className="flex flex-wrap items-center gap-3">
@@ -131,7 +133,7 @@ export function InterestModal({
 								<div className="h-16 shrink-0 w-full flex items-center px-8 justify-center gap-2 border-t border-neutral-100 dark:border-neutral-900 bg-neutral-50 dark:bg-neutral-950">
 									<Dialog.Close className="inline-flex h-9 flex-1 gap-2 shrink-0 items-center justify-center rounded-lg bg-neutral-100 font-medium dark:bg-neutral-900 dark:hover:bg-neutral-800 hover:bg-blue-200">
 										<ArrowLeftIcon className="size-4" />
-										Cancel
+										{t("global.cancel")}
 									</Dialog.Close>
 									<button
 										type="button"
@@ -141,7 +143,7 @@ export function InterestModal({
 										{loading ? (
 											<LoaderIcon className="size-4 animate-spin" />
 										) : (
-											"Save"
+											t("global.save")
 										)}
 									</button>
 								</div>

packages/ark/src/components/user/followButton.tsx

@@ -1,6 +1,7 @@
 import { LoaderIcon } from "@lume/icons";
 import { cn } from "@lume/utils";
 import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { useArk } from "../../hooks/useArk";
 
 export function UserFollowButton({
@@ -9,6 +10,7 @@ export function UserFollowButton({
 }: { target: string; className?: string }) {
 	const ark = useArk();
 
+	const [t] = useTranslation();
 	const [loading, setLoading] = useState(false);
 	const [followed, setFollowed] = useState(false);
 
@@ -43,14 +45,14 @@ export function UserFollowButton({
 			type="button"
 			disabled={loading}
 			onClick={toggleFollow}
-			className={cn("", className)}
+			className={cn("w-max", className)}
 		>
 			{loading ? (
 				<LoaderIcon className="size-4 animate-spin" />
 			) : followed ? (
-				"Unfollow"
+				t("user.unfollow")
 			) : (
-				"Follow"
+				t("user.follow")
 			)}
 		</button>
 	);