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} />