feat: use existing translation on all pages

inertia/components/dashboard/collection/header/collection_controls.tsx

@@ -1,5 +1,6 @@
 import type Collection from '#models/collection';
 import { route } from '@izzyjs/route/client';
+import { useTranslation } from 'react-i18next';
 import { BsThreeDotsVertical } from 'react-icons/bs';
 import { GoPencil } from 'react-icons/go';
 import { IoIosAddCircleOutline } from 'react-icons/io';
@@ -8,30 +9,34 @@ import Dropdown from '~/components/common/dropdown/dropdown';
 import { DropdownItemLink } from '~/components/common/dropdown/dropdown_item';
 import { appendCollectionId } from '~/lib/navigation';
 
-const CollectionControls = ({
+export default function CollectionControls({
   collectionId,
 }: {
   collectionId: Collection['id'];
-}) => (
-  <Dropdown label={<BsThreeDotsVertical />} svgSize={18}>
-    <DropdownItemLink href={route('link.create-form').url}>
-      <IoIosAddCircleOutline /> Add
-    </DropdownItemLink>
-    <DropdownItemLink
-      href={appendCollectionId(route('collection.edit-form').url, collectionId)}
-    >
-      <GoPencil /> Edit
-    </DropdownItemLink>
-    <DropdownItemLink
-      href={appendCollectionId(
-        route('collection.delete-form').url,
-        collectionId
-      )}
-      danger
-    >
-      <IoTrashOutline /> Delete
-    </DropdownItemLink>
-  </Dropdown>
-);
-
-export default CollectionControls;
+}) {
+  const { t } = useTranslation('common');
+  return (
+    <Dropdown label={<BsThreeDotsVertical />} svgSize={18}>
+      <DropdownItemLink href={route('link.create-form').url}>
+        <IoIosAddCircleOutline /> {t('link.create')}
+      </DropdownItemLink>
+      <DropdownItemLink
+        href={appendCollectionId(
+          route('collection.edit-form').url,
+          collectionId
+        )}
+      >
+        <GoPencil /> {t('collection.edit')}
+      </DropdownItemLink>
+      <DropdownItemLink
+        href={appendCollectionId(
+          route('collection.delete-form').url,
+          collectionId
+        )}
+        danger
+      >
+        <IoTrashOutline /> {t('collection.delete')}
+      </DropdownItemLink>
+    </Dropdown>
+  );
+}

inertia/components/dashboard/collection/list/collection_list.tsx

@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import { useTranslation } from 'react-i18next';
 import CollectionItem from '~/components/dashboard/collection/list/collection_item';
 import CollectionListContainer from '~/components/dashboard/collection/list/collection_list_container';
 import useActiveCollection from '~/hooks/use_active_collection';
@@ -17,7 +18,10 @@ const SideMenu = styled.nav(({ theme }) => ({
 
 const CollectionLabel = styled.p(({ theme }) => ({
   color: theme.colors.grey,
+  marginBlock: '0.35em',
+  paddingInline: '15px',
 }));
+
 const CollectionListStyle = styled.div({
   padding: '1px',
   paddingRight: '5px',
@@ -29,6 +33,7 @@ const CollectionListStyle = styled.div({
 });
 
 export default function CollectionList() {
+  const { t } = useTranslation('common');
   const { collections } = useCollections();
   const { activeCollection, setActiveCollection } = useActiveCollection();
 
@@ -60,7 +65,10 @@ export default function CollectionList() {
   return (
     <SideMenu>
       <CollectionListContainer>
-        <CollectionLabel>Collections • {collections.length}</CollectionLabel>
+        <CollectionLabel>
+          {t('collection.collections', { count: collections.length })} •{' '}
+          {collections.length}
+        </CollectionLabel>
         <CollectionListStyle>
           {collections.map((collection) => (
             <CollectionItem collection={collection} key={collection.id} />

inertia/components/dashboard/link/link_controls.tsx

@@ -3,6 +3,7 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { route } from '@izzyjs/route/client';
 import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 import { AiFillStar, AiOutlineStar } from 'react-icons/ai';
 import { BsThreeDotsVertical } from 'react-icons/bs';
 import { GoPencil } from 'react-icons/go';
@@ -22,6 +23,7 @@ const StartItem = styled(DropdownItemButton)(({ theme }) => ({
 
 export default function LinkControls({ link }: { link: Link }) {
   const theme = useTheme();
+  const { t } = useTranslation('common');
   const { collections, setCollections } = useCollections();
 
   const toggleFavorite = useCallback(
@@ -74,11 +76,11 @@ export default function LinkControls({ link }: { link: Link }) {
       <StartItem onClick={onFavorite}>
         {!link.favorite ? (
           <>
-            <AiFillStar /> Add to favorites
+            <AiFillStar /> {t('add-favorite')}
           </>
         ) : (
           <>
-            <AiOutlineStar /> Remove from favorites
+            <AiOutlineStar /> {t('remove-favorite')}
           </>
         )}
       </StartItem>
@@ -88,7 +90,7 @@ export default function LinkControls({ link }: { link: Link }) {
           link.collectionId
         )}
       >
-        <GoPencil /> Edit
+        <GoPencil /> {t('link.edit')}
       </DropdownItemLink>
       <DropdownItemLink
         href={appendCollectionId(
@@ -97,7 +99,7 @@ export default function LinkControls({ link }: { link: Link }) {
         )}
         danger
       >
-        <IoTrashOutline /> Delete
+        <IoTrashOutline /> {t('link.delete')}
       </DropdownItemLink>
     </Dropdown>
   );

inertia/components/dashboard/side_nav/favorite/favorite_list.tsx

@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import { useTranslation } from 'react-i18next';
 import TextEllipsis from '~/components/common/text_ellipsis';
 import LinkFavicon from '~/components/dashboard/link/link_favicon';
 import FavoriteListContainer from '~/components/dashboard/side_nav/favorite/favorite_container';
@@ -7,13 +8,18 @@ import useFavorites from '~/hooks/use_favorites';
 
 const FavoriteLabel = styled.p(({ theme }) => ({
   color: theme.colors.grey,
+  marginBlock: '0.35em',
+  paddingInline: '15px',
 }));
 
-const NoFavorite = () => (
-  <FavoriteLabel css={{ textAlign: 'center' }}>
-    Your favorites will appear here
-  </FavoriteLabel>
-);
+const NoFavorite = () => {
+  const { t } = useTranslation('common');
+  return (
+    <FavoriteLabel css={{ textAlign: 'center' }}>
+      {t('favorites-appears-here')}
+    </FavoriteLabel>
+  );
+};
 
 const FavoriteListStyle = styled.div({
   padding: '1px',
@@ -26,6 +32,7 @@ const FavoriteListStyle = styled.div({
 });
 
 export default function FavoriteList() {
+  const { t } = useTranslation('common');
   const { favorites } = useFavorites();
   if (favorites.length === 0) {
     return <NoFavorite key="no-favorite" />;
@@ -33,8 +40,8 @@ export default function FavoriteList() {
 
   return (
     <FavoriteListContainer>
-      <FavoriteLabel css={{ marginBlock: '0.35em', paddingInline: '15px' }}>
-        Favorites • {favorites.length}
+      <FavoriteLabel>
+        {t('favorite')} • {favorites.length}
       </FavoriteLabel>
       <FavoriteListStyle>
         {favorites.map(({ id, name, url }) => (

inertia/components/dashboard/side_nav/side_navigation.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 import { route } from '@izzyjs/route/client';
+import { useTranslation } from 'react-i18next';
 import { AiOutlineFolderAdd } from 'react-icons/ai';
 import { IoAdd } from 'react-icons/io5';
 import { MdOutlineAdminPanelSettings } from 'react-icons/md';
@@ -30,13 +31,14 @@ const AddButton = styled(ItemLink)(({ theme }) => ({
 }));
 
 export default function SideNavigation() {
+  const { t } = useTranslation('common');
   const { activeCollection } = useActiveCollection();
   return (
     <SideMenu>
       <div css={{ paddingInline: '10px' }}>
         <UserCard />
         <AdminButton>
-          <MdOutlineAdminPanelSettings /> Administrator
+          <MdOutlineAdminPanelSettings /> {t('admin')}
         </AdminButton>
         <ModalSettings openItem={SettingsButton} />
         <AddButton
@@ -45,10 +47,10 @@ export default function SideNavigation() {
             activeCollection?.id
           )}
         >
-          <IoAdd /> Create link
+          <IoAdd /> {t('link.create')}
         </AddButton>
         <AddButton href={route('collection.create-form').url}>
-          <AiOutlineFolderAdd /> Create collection
+          <AiOutlineFolderAdd /> {t('collection.create')}
         </AddButton>
       </div>
       <FavoriteList />