refactor(web): centralize i18n translations

apps/web/src/components/common/error.tsx

@@ -2,7 +2,7 @@ import { useRouter } from '@tanstack/react-router';
 import { useTranslation } from 'react-i18next';
 
 export function ErrorFallback({ error }: { error: Error }) {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const router = useRouter();
 
   return (

apps/web/src/components/common/not-found.tsx

@@ -2,7 +2,7 @@ import { useRouter } from '@tanstack/react-router';
 import { useTranslation } from 'react-i18next';
 
 export function NotFound() {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const router = useRouter();
 
   return (

apps/web/src/components/common/user-menu.tsx

@@ -56,7 +56,7 @@ function getInitials(name: string): string {
 }
 
 export function UserMenu({ align = 'end', contentClassName, trigger }: UserMenuProps) {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const { data: user } = useGetUser();
   const { setTheme, theme } = useTheme();
   const navigate = useNavigate();

apps/web/src/components/layouts/demo-banner.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { env } from '@/lib/env';
 
 export function DemoModeBanner() {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
 
   if (!env.isDemo) return null;
 

apps/web/src/components/layouts/header.tsx

@@ -8,7 +8,7 @@ import { UserMenu } from '../common/user-menu';
 
 export function Header() {
   const { pathname } = useLocation();
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
 
   return (
     <header className="bg-background/80 dark:bg-card border-border sticky top-0 z-50 hidden border-b backdrop-blur-md md:block">

apps/web/src/components/layouts/reader.tsx

@@ -23,7 +23,7 @@ function ReaderLayout({
   onUpdateHighlight,
   onRemoveHighlight
 }: ReaderLayoutProps) {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const id = useParams({ from: '/_protected/articles/$id' }).id;
   const { selectedHighlightId, setSelectedHighlightId, showHighlights, toggleShowHighlights } =
     useHighlights();

apps/web/src/components/navigation/mobile-header-nav.tsx

@@ -5,7 +5,7 @@ import { UserMenu } from '../common/user-menu';
 import { Button } from '../ui/button';
 
 export function MobileHeaderNav() {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
 
   return (
     <div className="sepia-theme:bg-background fixed top-0 right-0 left-0 z-50 flex h-16 items-center justify-between border-b border-zinc-300 bg-white px-4 py-2  sm:hidden dark:border-zinc-800 dark:bg-zinc-950/80">

apps/web/src/components/navigation/reader-nav.tsx

@@ -86,7 +86,7 @@ function getFontFamilyLocaleKey(value: string) {
 
 function ReaderNav({ linkId, onOpenHighlights }: ReaderNavProps) {
   const navigate = useNavigate();
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
 
   const linkQuery = useGetLink({ linkId });
 

apps/web/src/components/ui/spinner.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { cn } from '@/lib/utils';
 
 function Spinner({ className, ...props }: React.ComponentProps<'svg'>) {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
 
   return (
     <SpinnerIcon

apps/web/src/components/ui/tag-input.tsx

@@ -148,7 +148,7 @@ const TagInput = forwardRef<HTMLInputElement, TagInputProps>(
     }, [groupedTags, inputValue]);
 
     const isMaxReached = maxTags ? value.length >= maxTags : false;
-    const { t } = useTranslation('common');
+    const { t } = useTranslation();
 
     const addTag = useCallback(
       (tag: Tag) => {

apps/web/src/features/articles/components/add-article-dialog.tsx

@@ -49,7 +49,7 @@ export function AddArticleDialog({
   tags
 }: Props) {
   const position = isMobile ? 'top-center' : 'top-right';
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
 
   const createLinkMutation = useCreateLink({
     mutationConfig: {

apps/web/src/features/articles/components/article-card.tsx

@@ -138,7 +138,7 @@ function ArticleDropdownMenu({
   link,
   onEditTagsOpen
 }: ArticleDropdownMenuProps) {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const { id, isArchived, priority } = link;
 
   return (
@@ -228,7 +228,7 @@ function GridCard({
   link,
   tagGroups
 }: ArticleCardProps) {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const {
     coverImage,
     excerpt,
@@ -478,7 +478,7 @@ function ListCardCompact({
   link,
   tagGroups
 }: ArticleCardProps) {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const {
     coverImage,
     excerpt,
@@ -696,7 +696,7 @@ function ListCardDesktop({
   link,
   tagGroups
 }: ArticleCardProps) {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const {
     coverImage,
     excerpt,

apps/web/src/features/articles/components/articles-toolbar.tsx

@@ -59,7 +59,7 @@ export function ArticlesToolbar({
   searchQuery,
   setOpenFilterModal
 }: Props) {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === 'Escape') onSearchClear();
   };

apps/web/src/features/articles/components/edit-tags-dialog.tsx

@@ -40,7 +40,7 @@ interface EditTagsDialogProps {
 function EditTagsDialog({ initialTags, linkId, onOpenChange, open }: EditTagsDialogProps) {
   const [pendingTags, setPendingTags] = useState<Tag[]>(initialTags);
   const pendingCreatedTagRef = useRef<Tag | null>(null);
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const { isMobile } = useMediaQuery();
 
   const tagsQuery = useGetTags();

apps/web/src/features/articles/components/empty-state.tsx

@@ -20,7 +20,7 @@ interface EmptyStateProps {
 
 export function EmptyState({ filter, hasSearch, isDemo = false, onAddArticle }: EmptyStateProps) {
   const shouldReduceMotion = useReducedMotion();
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
 
   const getEmptyStateContent = () => {
     if (hasSearch) {

apps/web/src/features/articles/components/filter-sidebar.tsx

@@ -41,7 +41,7 @@ const Filter = memo(function Filter({
   onFilterClick,
   onNavigateToTagManagement
 }: FilterProps) {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   return (
     <div className="flex flex-col gap-4">
       <SidebarTitle className="inline-flex items-center gap-2">

apps/web/src/features/auth/components/brand-panel.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { cn } from '@/lib/utils';
 
 export function AuthBrandPanel() {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
 
   return (
     <div className="relative flex h-full flex-col overflow-hidden rounded-xl bg-linear-to-br from-[oklch(0.44_0.18_248)] to-[oklch(0.18_0.09_240)]">

apps/web/src/features/auth/components/login-form.tsx

@@ -17,7 +17,7 @@ import { type LoginInput, useLogin } from '../api/login';
 import { authKeys } from '../api/query-keys';
 
 export function LoginForm({ className, ...props }: React.ComponentProps<'form'>) {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const navigate = useNavigate();
   const queryClient = useQueryClient();
   const notifyError = useNotificationsStore.useError();

apps/web/src/features/auth/components/register-form.tsx

@@ -16,7 +16,7 @@ import { authKeys } from '../api/query-keys';
 import { type RegisterInput, useRegister } from '../api/register';
 
 export function RegisterForm({ className, ...props }: React.ComponentProps<'form'>) {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const navigate = useNavigate();
   const queryClient = useQueryClient();
   const notifyError = useNotificationsStore.useError();

apps/web/src/features/home/components/continue-reading-section.tsx

@@ -14,7 +14,7 @@ type Props = {
 
 export function ContinueReadingSection({ data, isLoading }: Props) {
   const navigate = useNavigate();
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
 
   if (isLoading) {
     return <Skeleton className="h-25 w-full rounded-3xl" />;

apps/web/src/features/home/components/onboarding-progress-card.tsx

@@ -11,7 +11,7 @@ type Props = {
 };
 
 export function OnboardingProgressCard({ hasStartedReading, totalArticles }: Props) {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
 
   const steps = [
     {

apps/web/src/features/home/components/quick-add-bar.tsx

@@ -14,7 +14,7 @@ type QuickAddBarProps = {
 };
 
 export function QuickAddBar({ isDemo = false }: QuickAddBarProps) {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const notifySuccess = useNotificationsStore.useSuccess();
 
   const [url, setUrl] = useState('');

apps/web/src/features/home/components/recently-saved-section.tsx

@@ -14,7 +14,7 @@ type Props = {
 };
 
 export function RecentlySavedSection({ articles, isFirstTimeUser, isLoading }: Props) {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
 
   return (
     <div className="flex flex-col gap-4">

apps/web/src/features/home/components/suggestions-section.tsx

@@ -19,7 +19,7 @@ type Props = {
 };
 
 export function SuggestionsSection({ isLoading, suggestions }: Props) {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const navigate = useNavigate();
 
   const shortReadCount = suggestions?.shortReads?.totalArticles ?? 0;

apps/web/src/features/import-articles/api/get-links-from-session.ts

@@ -77,7 +77,7 @@ export const useGetLinksFromImportSession = ({
   queryConfig
 }: UseGetLinksFromImportSessionOptions) => {
   const queryClient = useQueryClient();
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
 
   const infiniteQuery = useInfiniteQuery({
     ...getLinksFromImportSessionQueryOptions(importSessionId, extractionStatus),

apps/web/src/features/import-articles/components/extraction-progress.tsx

@@ -43,7 +43,7 @@ const statusFilterKeys = [
 ] as const;
 
 export function ExtractionProgress(props: ExtractionProgressProps) {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const {
     extractionCompleted,
     extractionFailed,

apps/web/src/features/import-articles/components/extraction-status-card.tsx

@@ -39,7 +39,7 @@ const renderStatusBadge = (status: string, t: (key: string) => string) => {
 };
 
 export function ExtractionStatusCard({ link, onViewArticle }: ExtractionStatusCardProps) {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
 
   const getStatusIconStyle = () => {
     switch (link.status) {

apps/web/src/features/import-articles/components/import-progress.tsx

@@ -8,7 +8,7 @@ import { Progress } from '@/components/ui/progress';
 import { ExtractionProgress } from './extraction-progress';
 
 export function ImportProgress() {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const [progress, setProgress] = useState({
     extraction: 0,
     import: 0

apps/web/src/features/import-articles/components/map-fields.tsx

@@ -79,7 +79,7 @@ function ColumnSelect({
 }
 
 export function MapFields({ onMappingComplete }: MapFieldsProps) {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const { mapping, onMappingChange, uploadedFile } = useImportArticles();
 
   const populateFields = (columns: string[]) => {

apps/web/src/features/import-articles/components/review-import.tsx

@@ -21,7 +21,7 @@ interface ReviewImportProps {
 }
 
 export function ReviewImport({ onReviewComplete }: ReviewImportProps) {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const { preview, uploadedFile } = useImportArticles();
 
   useEffect(() => {

apps/web/src/features/import-articles/components/upload-from-csv.tsx

@@ -20,7 +20,7 @@ interface UploadFromCsvProps {
 }
 
 export function UploadFromCsv({ disabled = false, onUploadComplete }: UploadFromCsvProps) {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const fileInputRef = useRef<HTMLInputElement>(null);
   const notifyError = useNotificationsStore.useError();
 

apps/web/src/features/import-articles/components/wizard-step-indicator.tsx

@@ -8,7 +8,7 @@ type Props = {
 };
 
 export function WizardStepIndicator({ currentStep, steps }: Props) {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
 
   return (
     <nav aria-label={t('import.wizard.stepsAria')} className="flex items-center gap-2 text-sm">

apps/web/src/features/reader/components/floating-progress-indicator.tsx

@@ -17,7 +17,7 @@ export default function FloatingProgressIndicator({
   progress,
   readingTime
 }: FloatingProgressIndicatorProps) {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const [isExpanded, setIsExpanded] = useState(false);
   const [isVisible, setIsVisible] = useState(false);
   const [shouldShowIndicator, setShouldShowIndicator] = useState(true);

apps/web/src/features/reader/components/highlighter/manage-highlight.tsx

@@ -32,7 +32,7 @@ export function ManageHighlight({
   updateHighlight
 }: ManageHighlightProps) {
   const { selectedHighlightId, toggleShowHighlights } = useHighlights();
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
 
   return (
     <div className="flex min-w-40 flex-col items-center gap-2">

apps/web/src/features/reader/components/highlighter/use-highlighter.tsx

@@ -74,7 +74,7 @@ export function useHighlighter({
   onRemove,
   onUpdate
 }: UseHighlighterProps) {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const [popoverState, setPopoverState] = useState<HighlightPopoverState>({
     editingHighlight: null,
     selectedRange: null,

apps/web/src/features/reader/components/note-card.tsx

@@ -31,7 +31,7 @@ export function NoteCard({
   onRemove,
   onUpdate
 }: NoteCardProps) {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const [isEditing, setIsEditing] = useState(false);
   const [noteText, setNoteText] = useState(note || '');
   const cardRef = useRef<HTMLDivElement>(null);

apps/web/src/features/reader/components/resume-position-banner.tsx

@@ -17,7 +17,7 @@ export default function ResumePositionBanner({
   onRestore,
   onDismiss
 }: ResumePositionBannerProps) {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const [isVisible, setIsVisible] = useState(false);
 
   const [snapshotPercent] = useState(Math.round(progress));

apps/web/src/features/settings/components/account-section.tsx

@@ -26,7 +26,7 @@ const isValidEmail = (value: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.
 const easeOutCubic = 'cubic-bezier(0.215, 0.61, 0.355, 1)';
 
 export function AccountSection() {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const { data: user } = useGetUser();
   const notifyError = useNotificationsStore.useError();
   const notifySuccess = useNotificationsStore.useSuccess();

apps/web/src/features/settings/components/data-section.tsx

@@ -29,7 +29,7 @@ import { SettingsRow, SettingsSection } from './settings-section';
 
 export function DataSection() {
   const navigate = useNavigate();
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
 
   const importSessionQuery = useImportSessions();
   const importSessions = importSessionQuery.data?.result?.items || [];

apps/web/src/features/settings/components/language-section.tsx

@@ -17,7 +17,7 @@ const languages = ['en', 'id'] as const;
 
 export function LanguageSection() {
   const { current, setLanguage } = useLanguage();
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const currentLanguage = t(`settings.language.languages.${current}`);
 
   function handleLanguageChange(value: string) {

apps/web/src/features/settings/components/reader-preferences-section.tsx

@@ -78,7 +78,7 @@ export function ReaderPreferencesSection() {
   } = useThemeConfig();
 
   const [showFontPreview, setShowFontPreview] = useState(false);
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
 
   const currentFonts = getFontsByCategory(fontFamily.style);