feature: Add i18n support. Fixes #57 (#635)

* feature(web): Add basic scaffolding for i18n

* refactor: Switch most of the app's strings to use i18n strings

* fix: Remove unused i18next-resources-for-ts command

* Add user setting

* More translations

* Drop the german translation for now

4 files changed, 23 insertions, 11 deletions

diff --git a/apps/web/components/dashboard/preview/ActionBar.tsx b/apps/web/components/dashboard/preview/ActionBar.tsx
index 3505d0a5..38ad8fa2 100644
--- a/apps/web/components/dashboard/preview/ActionBar.tsx
+++ b/apps/web/components/dashboard/preview/ActionBar.tsx
@@ -6,6 +6,7 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { toast } from "@/components/ui/use-toast";
+import { useTranslation } from "@/lib/i18n/client";
 import { Trash2 } from "lucide-react";
 
 import type { ZBookmark } from "@hoarder/shared/types/bookmarks";
@@ -17,6 +18,7 @@ import {
 import { ArchivedActionIcon, FavouritedActionIcon } from "../bookmarks/icons";
 
 export default function ActionBar({ bookmark }: { bookmark: ZBookmark }) {
+  const { t } = useTranslation();
   const router = useRouter();
   const onError = () => {
     toast({
@@ -72,7 +74,9 @@ export default function ActionBar({ bookmark }: { bookmark: ZBookmark }) {
           </ActionButton>
         </TooltipTrigger>
         <TooltipContent side="bottom">
-          {bookmark.favourited ? "Un-favourite" : "Favourite"}
+          {bookmark.favourited
+            ? t("actions.unfavorite")
+            : t("actions.favorite")}
         </TooltipContent>
       </Tooltip>
       <Tooltip delayDuration={0}>
@@ -92,7 +96,7 @@ export default function ActionBar({ bookmark }: { bookmark: ZBookmark }) {
           </ActionButton>
         </TooltipTrigger>
         <TooltipContent side="bottom">
-          {bookmark.archived ? "Un-archive" : "Archive"}
+          {bookmark.archived ? t("actions.unarchive") : t("actions.archive")}
         </TooltipContent>
       </Tooltip>
       <Tooltip delayDuration={0}>
@@ -108,7 +112,7 @@ export default function ActionBar({ bookmark }: { bookmark: ZBookmark }) {
             <Trash2 />
           </ActionButton>
         </TooltipTrigger>
-        <TooltipContent side="bottom">Delete</TooltipContent>
+        <TooltipContent side="bottom">{t("actions.delete")}</TooltipContent>
       </Tooltip>
     </div>
   );
diff --git a/apps/web/components/dashboard/preview/AttachmentBox.tsx b/apps/web/components/dashboard/preview/AttachmentBox.tsx
index d631f4d9..32184c30 100644
--- a/apps/web/components/dashboard/preview/AttachmentBox.tsx
+++ b/apps/web/components/dashboard/preview/AttachmentBox.tsx
@@ -10,6 +10,7 @@ import {
 import FilePickerButton from "@/components/ui/file-picker-button";
 import { toast } from "@/components/ui/use-toast";
 import useUpload from "@/lib/hooks/upload-file";
+import { useTranslation } from "@/lib/i18n/client";
 import {
   Archive,
   Camera,
@@ -41,6 +42,7 @@ import {
 } from "@hoarder/trpc/lib/attachments";
 
 export default function AttachmentBox({ bookmark }: { bookmark: ZBookmark }) {
+  const { t } = useTranslation();
   const typeToIcon: Record<ZAssetType, React.ReactNode> = {
     screenshot: <Camera className="size-4" />,
     fullPageArchive: <Archive className="size-4" />,
@@ -109,7 +111,7 @@ export default function AttachmentBox({ bookmark }: { bookmark: ZBookmark }) {
   return (
     <Collapsible>
       <CollapsibleTrigger className="flex w-full items-center justify-between gap-2 text-sm text-gray-400">
-        Attachments
+        {t("common.attachments")}
         <ChevronsDownUp className="size-4" />
       </CollapsibleTrigger>
       <CollapsibleContent className="flex flex-col gap-1 py-2 text-sm">
diff --git a/apps/web/components/dashboard/preview/BookmarkPreview.tsx b/apps/web/components/dashboard/preview/BookmarkPreview.tsx
index e37c4b86..ff6330fa 100644
--- a/apps/web/components/dashboard/preview/BookmarkPreview.tsx
+++ b/apps/web/components/dashboard/preview/BookmarkPreview.tsx
@@ -12,6 +12,7 @@ import {
   TooltipPortal,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { useTranslation } from "@/lib/i18n/client";
 import { api } from "@/lib/trpc";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
@@ -75,6 +76,7 @@ export default function BookmarkPreview({
   bookmarkId: string;
   initialData?: ZBookmark;
 }) {
+  const { t } = useTranslation();
   const { data: bookmark } = api.bookmarks.getBookmark.useQuery(
     {
       bookmarkId,
@@ -130,7 +132,7 @@ export default function BookmarkPreview({
               href={sourceUrl}
               className="flex items-center gap-2 text-gray-400"
             >
-              <span>View Original</span>
+              <span>{t("preview.view_original")}</span>
               <ExternalLink />
             </Link>
           )}
@@ -140,11 +142,11 @@ export default function BookmarkPreview({
         <CreationTime createdAt={bookmark.createdAt} />
         <SummarizeBookmarkArea bookmark={bookmark} />
         <div className="flex items-center gap-4">
-          <p className="text-sm text-gray-400">Tags</p>
+          <p className="text-sm text-gray-400">{t("common.tags")}</p>
           <BookmarkTagsEditor bookmark={bookmark} />
         </div>
         <div className="flex gap-4">
-          <p className="pt-2 text-sm text-gray-400">Note</p>
+          <p className="pt-2 text-sm text-gray-400">{t("common.note")}</p>
           <NoteEditor bookmark={bookmark} />
         </div>
         <AttachmentBox bookmark={bookmark} />
diff --git a/apps/web/components/dashboard/preview/LinkContentSection.tsx b/apps/web/components/dashboard/preview/LinkContentSection.tsx
index bf0d8f90..320fc561 100644
--- a/apps/web/components/dashboard/preview/LinkContentSection.tsx
+++ b/apps/web/components/dashboard/preview/LinkContentSection.tsx
@@ -8,6 +8,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { useTranslation } from "@/lib/i18n/client";
 import { ScrollArea } from "@radix-ui/react-scroll-area";
 
 import {
@@ -79,6 +80,7 @@ export default function LinkContentSection({
 }: {
   bookmark: ZBookmark;
 }) {
+  const { t } = useTranslation();
   const [section, setSection] = useState<string>("cached");
 
   if (bookmark.content.type != BookmarkTypes.LINK) {
@@ -104,21 +106,23 @@ export default function LinkContentSection({
         </SelectTrigger>
         <SelectContent>
           <SelectGroup>
-            <SelectItem value="cached">Cached Content</SelectItem>
+            <SelectItem value="cached">
+              {t("preview.cached_content")}
+            </SelectItem>
             <SelectItem
               value="screenshot"
               disabled={!bookmark.content.screenshotAssetId}
             >
-              Screenshot
+              {t("common.screenshot")}
             </SelectItem>
             <SelectItem
               value="archive"
               disabled={!bookmark.content.fullPageArchiveAssetId}
             >
-              Archive
+              {t("common.archive")}
             </SelectItem>
             <SelectItem value="video" disabled={!bookmark.content.videoAssetId}>
-              Video
+              {t("common.video")}
             </SelectItem>
           </SelectGroup>
         </SelectContent>