Internationalization + Finnish language (#181)

* I18n with next-intl

* package-lock

* Finnish translations

* Development fix

* Use locale for positioning currency symbol

* Translations: Expenses.ActiveUserModal

* Translations: group 404

* Better translation for ExpenseCard

* Apply translations in CategorySelect search

* Fix for Finnish translation

* Translations for ExpenseDocumentsInput

* Translations for CreateFromReceipt

* Fix for Finnish translation

* Translations for schema errors

* Fix for Finnish translation

* Fixes for Finnish translations

* Prettier

---------

Co-authored-by: Sebastien Castiel <sebastien@castiel.me>

src/app/groups/add-group-by-url-button.tsx

@@ -9,6 +9,7 @@ import {
 } from '@/components/ui/popover'
 import { useMediaQuery } from '@/lib/hooks'
 import { Loader2, Plus } from 'lucide-react'
+import { useTranslations } from 'next-intl'
 import { useState } from 'react'
 
 type Props = {
@@ -16,6 +17,7 @@ type Props = {
 }
 
 export function AddGroupByUrlButton({ reload }: Props) {
+  const t = useTranslations('Groups.AddByURL')
   const isDesktop = useMediaQuery('(min-width: 640px)')
   const [url, setUrl] = useState('')
   const [error, setError] = useState(false)
@@ -27,18 +29,15 @@ export function AddGroupByUrlButton({ reload }: Props) {
       <PopoverTrigger asChild>
         <Button variant="secondary">
           {/* <Plus className="w-4 h-4 mr-2" /> */}
-          <>Add by URL</>
+          {t('button')}
         </Button>
       </PopoverTrigger>
       <PopoverContent
         align={isDesktop ? 'end' : 'start'}
         className="[&_p]:text-sm flex flex-col gap-3"
       >
-        <h3 className="font-bold">Add a group by URL</h3>
-        <p>
-          If a group was shared with you, you can paste its URL here to add it
-          to your list.
-        </p>
+        <h3 className="font-bold">{t('title')}</h3>
+        <p>{t('description')}</p>
         <form
           className="flex gap-2"
           onSubmit={async (event) => {
@@ -80,11 +79,7 @@ export function AddGroupByUrlButton({ reload }: Props) {
             )}
           </Button>
         </form>
-        {error && (
-          <p className="text-destructive">
-            Oops, we are not able to find the group from the URL you provided…
-          </p>
-        )}
+        {error && <p className="text-destructive">{t('error')}</p>}
       </PopoverContent>
     </Popover>
   )