Merge pull request #618 from linkwarden/feat/client-i18n

Feat/client i18n

components/Announcement.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import React, { MouseEventHandler } from "react";
+import { Trans } from "next-i18next";
 
 type Props = {
   toggleAnnouncementBar: MouseEventHandler<HTMLButtonElement>;
@@ -9,19 +10,22 @@ export default function Announcement({ toggleAnnouncementBar }: Props) {
   const announcementId = localStorage.getItem("announcementId");
 
   return (
-    <div className="fixed left-0 right-0 bottom-20 sm:bottom-10 w-full p-5 z-20">
+    <div className="fixed left-0 right-0 bottom-20 sm:bottom-10 w-full p-5 z-30">
       <div className="mx-auto w-full p-2 flex justify-between gap-2 items-center border border-primary shadow-xl rounded-xl bg-base-300 backdrop-blur-sm bg-opacity-80 max-w-md">
         <i className="bi-stars text-2xl text-yellow-600 dark:text-yellow-500"></i>
         <p className="w-4/5 text-center text-sm sm:text-base">
-          See what&apos;s new in{" "}
+          <Trans
-          <Link
+            i18nKey="new_version_announcement"
-            href={`https://blog.linkwarden.app/releases/${announcementId}`}
+            values={{ version: announcementId }}
-            target="_blank"
+            components={[
-            className="underline"
+              <Link
-          >
+                href={`https://blog.linkwarden.app/releases/${announcementId}`}
-            Linkwarden {announcementId}
+                target="_blank"
-          </Link>
+                className="underline"
-          !
+                key={0}
+              />,
+            ]}
+          />
         </p>
         <button
           onClick={toggleAnnouncementBar}

components/CollectionCard.tsx

@@ -10,6 +10,7 @@ import EditCollectionModal from "./ModalContent/EditCollectionModal";
 import EditCollectionSharingModal from "./ModalContent/EditCollectionSharingModal";
 import DeleteCollectionModal from "./ModalContent/DeleteCollectionModal";
 import { dropdownTriggerer } from "@/lib/client/utils";
+import { useTranslation } from "next-i18next";
 
 type Props = {
   collection: CollectionIncludingMembersAndLinkCount;
@@ -17,6 +18,7 @@ type Props = {
 };
 
 export default function CollectionCard({ collection, className }: Props) {
+  const { t } = useTranslation();
   const { settings } = useLocalSettingsStore();
   const { account } = useAccountStore();
 
@@ -76,8 +78,8 @@ export default function CollectionCard({ collection, className }: Props) {
         >
           <i className="bi-three-dots text-xl" title="More"></i>
         </div>
-        <ul className="dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box w-52 mt-1">
+        <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-52 mt-1">
-          {permissions === true ? (
+          {permissions === true && (
             <li>
               <div
                 role="button"
@@ -87,10 +89,10 @@ export default function CollectionCard({ collection, className }: Props) {
                   setEditCollectionModal(true);
                 }}
               >
-                Edit Collection Info
+                {t("edit_collection_info")}
               </div>
             </li>
-          ) : undefined}
+          )}
           <li>
             <div
               role="button"
@@ -100,7 +102,9 @@ export default function CollectionCard({ collection, className }: Props) {
                 setEditCollectionSharingModal(true);
               }}
             >
-              {permissions === true ? "Share and Collaborate" : "View Team"}
+              {permissions === true
+                ? t("share_and_collaborate")
+                : t("view_team")}
             </div>
           </li>
           <li>
@@ -112,7 +116,9 @@ export default function CollectionCard({ collection, className }: Props) {
                 setDeleteCollectionModal(true);
               }}
             >
-              {permissions === true ? "Delete Collection" : "Leave Collection"}
+              {permissions === true
+                ? t("delete_collection")
+                : t("leave_collection")}
             </div>
           </li>
         </ul>

components/CollectionListing.tsx

@@ -16,12 +16,14 @@ import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import { useRouter } from "next/router";
 import useAccountStore from "@/store/account";
 import toast from "react-hot-toast";
+import { useTranslation } from "next-i18next";
 
 interface ExtendedTreeItem extends TreeItem {
   data: Collection;
 }
 
 const CollectionListing = () => {
+  const { t } = useTranslation();
   const { collections, updateCollection } = useCollectionStore();
   const { account, updateAccount } = useAccountStore();
 
@@ -141,9 +143,7 @@ const CollectionListing = () => {
       (destinationCollection?.ownerId !== account.id &&
         destination.parentId !== "root")
     ) {
-      return toast.error(
+      return toast.error(t("cant_change_collection_you_dont_own"));
-        "You can't make change to a collection you don't own."
-      );
     }
 
     setTree((currentTree) => moveItemOnTree(currentTree!, source, destination));
@@ -203,7 +203,7 @@ const CollectionListing = () => {
   if (!tree) {
     return (
       <p className="text-neutral text-xs font-semibold truncate w-full px-2 mt-5 mb-8">
-        You Have No Collections...
+        {t("you_have_no_collections")}
       </p>
     );
   } else

components/FilterSearchDropdown.tsx

@@ -1,5 +1,6 @@
 import { dropdownTriggerer } from "@/lib/client/utils";
 import React from "react";
+import { useTranslation } from "next-i18next";
 
 type Props = {
   setSearchFilter: Function;
@@ -16,6 +17,8 @@ export default function FilterSearchDropdown({
   setSearchFilter,
   searchFilter,
 }: Props) {
+  const { t } = useTranslation();
+
   return (
     <div className="dropdown dropdown-bottom dropdown-end">
       <div
@@ -38,11 +41,11 @@ export default function FilterSearchDropdown({
               name="search-filter-checkbox"
               className="checkbox checkbox-primary"
               checked={searchFilter.name}
-              onChange={() => {
+              onChange={() =>
-                setSearchFilter({ ...searchFilter, name: !searchFilter.name });
+                setSearchFilter({ ...searchFilter, name: !searchFilter.name })
-              }}
+              }
             />
-            <span className="label-text">Name</span>
+            <span className="label-text">{t("name")}</span>
           </label>
         </li>
         <li>
@@ -56,11 +59,11 @@ export default function FilterSearchDropdown({
               name="search-filter-checkbox"
               className="checkbox checkbox-primary"
               checked={searchFilter.url}
-              onChange={() => {
+              onChange={() =>
-                setSearchFilter({ ...searchFilter, url: !searchFilter.url });
+                setSearchFilter({ ...searchFilter, url: !searchFilter.url })
-              }}
+              }
             />
-            <span className="label-text">Link</span>
+            <span className="label-text">{t("link")}</span>
           </label>
         </li>
         <li>
@@ -74,14 +77,14 @@ export default function FilterSearchDropdown({
               name="search-filter-checkbox"
               className="checkbox checkbox-primary"
               checked={searchFilter.description}
-              onChange={() => {
+              onChange={() =>
                 setSearchFilter({
                   ...searchFilter,
                   description: !searchFilter.description,
-                });
+                })
-              }}
+              }
             />
-            <span className="label-text">Description</span>
+            <span className="label-text">{t("description")}</span>
           </label>
         </li>
         <li>
@@ -95,14 +98,11 @@ export default function FilterSearchDropdown({
               name="search-filter-checkbox"
               className="checkbox checkbox-primary"
               checked={searchFilter.tags}
-              onChange={() => {
+              onChange={() =>
-                setSearchFilter({
+                setSearchFilter({ ...searchFilter, tags: !searchFilter.tags })
-                  ...searchFilter,
+              }
-                  tags: !searchFilter.tags,
-                });
-              }}
             />
-            <span className="label-text">Tags</span>
+            <span className="label-text">{t("tags")}</span>
           </label>
         </li>
         <li>
@@ -116,16 +116,17 @@ export default function FilterSearchDropdown({
               name="search-filter-checkbox"
               className="checkbox checkbox-primary"
               checked={searchFilter.textContent}
-              onChange={() => {
+              onChange={() =>
                 setSearchFilter({
                   ...searchFilter,
                   textContent: !searchFilter.textContent,
-                });
+                })
-              }}
+              }
             />
-            <span className="label-text">Full Content</span>
+            <span className="label-text">{t("full_content")}</span>
-
+            <div className="ml-auto badge badge-sm badge-neutral">
-            <div className="ml-auto badge badge-sm badge-neutral">Slower</div>
+              {t("slower")}
+            </div>
           </label>
         </li>
       </ul>

components/InstallApp.tsx

@@ -1,5 +1,6 @@
 import { isPWA } from "@/lib/client/utils";
 import React, { useState } from "react";
+import { Trans } from "next-i18next";
 
 type Props = {};
 
@@ -25,15 +26,17 @@ const InstallApp = (props: Props) => {
           />
         </svg>
         <p className="w-4/5 text-[0.92rem]">
-          Install Linkwarden to your home screen for a faster access and
+          <Trans
-          enhanced experience.{" "}
+            i18nKey="pwa_install_prompt"
-          <a
+            components={[
-            className="underline"
+              <a
-            target="_blank"
+                className="underline"
-            href="https://docs.linkwarden.app/getting-started/pwa-installation"
+                target="_blank"
-          >
+                href="https://docs.linkwarden.app/getting-started/pwa-installation"
-            Learn more
+                key={0}
-          </a>
+              />,
+            ]}
+          />
         </p>
         <button
           onClick={() => setIsOpen(false)}

components/LinkListOptions.tsx

@@ -0,0 +1,203 @@
+import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
+import FilterSearchDropdown from "./FilterSearchDropdown";
+import SortDropdown from "./SortDropdown";
+import ViewDropdown from "./ViewDropdown";
+import { TFunction } from "i18next";
+import BulkDeleteLinksModal from "./ModalContent/BulkDeleteLinksModal";
+import BulkEditLinksModal from "./ModalContent/BulkEditLinksModal";
+import toast from "react-hot-toast";
+import useCollectivePermissions from "@/hooks/useCollectivePermissions";
+import { useRouter } from "next/router";
+import useLinkStore from "@/store/links";
+import { Sort } from "@/types/global";
+
+type Props = {
+  children: React.ReactNode;
+  t: TFunction<"translation", undefined>;
+  viewMode: string;
+  setViewMode: Dispatch<SetStateAction<string>>;
+  searchFilter?: {
+    name: boolean;
+    url: boolean;
+    description: boolean;
+    tags: boolean;
+    textContent: boolean;
+  };
+  setSearchFilter?: (filter: {
+    name: boolean;
+    url: boolean;
+    description: boolean;
+    tags: boolean;
+    textContent: boolean;
+  }) => void;
+  sortBy: Sort;
+  setSortBy: Dispatch<SetStateAction<Sort>>;
+  editMode?: boolean;
+  setEditMode?: (mode: boolean) => void;
+};
+
+const LinkListOptions = ({
+  children,
+  t,
+  viewMode,
+  setViewMode,
+  searchFilter,
+  setSearchFilter,
+  sortBy,
+  setSortBy,
+  editMode,
+  setEditMode,
+}: Props) => {
+  const { links, selectedLinks, setSelectedLinks, deleteLinksById } =
+    useLinkStore();
+
+  const router = useRouter();
+
+  const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
+  const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
+
+  useEffect(() => {
+    if (editMode && setEditMode) return setEditMode(false);
+  }, [router]);
+
+  const collectivePermissions = useCollectivePermissions(
+    selectedLinks.map((link) => link.collectionId as number)
+  );
+
+  const handleSelectAll = () => {
+    if (selectedLinks.length === links.length) {
+      setSelectedLinks([]);
+    } else {
+      setSelectedLinks(links.map((link) => link));
+    }
+  };
+
+  const bulkDeleteLinks = async () => {
+    const load = toast.loading(t("deleting_selections"));
+
+    const response = await deleteLinksById(
+      selectedLinks.map((link) => link.id as number)
+    );
+
+    toast.dismiss(load);
+
+    response.ok &&
+      toast.success(
+        selectedLinks.length === 1
+          ? t("link_deleted")
+          : t("links_deleted", { count: selectedLinks.length })
+      );
+  };
+
+  return (
+    <>
+      <div className="flex justify-between items-center">
+        {children}
+
+        <div className="flex gap-3 items-center justify-end">
+          <div className="flex gap-2 items-center mt-2">
+            {links.length > 0 && editMode !== undefined && setEditMode && (
+              <div
+                role="button"
+                onClick={() => {
+                  setEditMode(!editMode);
+                  setSelectedLinks([]);
+                }}
+                className={`btn btn-square btn-sm btn-ghost ${
+                  editMode
+                    ? "bg-primary/20 hover:bg-primary/20"
+                    : "hover:bg-neutral/20"
+                }`}
+              >
+                <i className="bi-pencil-fill text-neutral text-xl"></i>
+              </div>
+            )}
+            {searchFilter && setSearchFilter && (
+              <FilterSearchDropdown
+                searchFilter={searchFilter}
+                setSearchFilter={setSearchFilter}
+              />
+            )}
+            <SortDropdown sortBy={sortBy} setSort={setSortBy} t={t} />
+            <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
+          </div>
+        </div>
+      </div>
+
+      {editMode && links.length > 0 && (
+        <div className="w-full flex justify-between items-center min-h-[32px]">
+          {links.length > 0 && (
+            <div className="flex gap-3 ml-3">
+              <input
+                type="checkbox"
+                className="checkbox checkbox-primary"
+                onChange={() => handleSelectAll()}
+                checked={
+                  selectedLinks.length === links.length && links.length > 0
+                }
+              />
+              {selectedLinks.length > 0 ? (
+                <span>
+                  {selectedLinks.length === 1
+                    ? t("link_selected")
+                    : t("links_selected", { count: selectedLinks.length })}
+                </span>
+              ) : (
+                <span>{t("nothing_selected")}</span>
+              )}
+            </div>
+          )}
+          <div className="flex gap-3">
+            <button
+              onClick={() => setBulkEditLinksModal(true)}
+              className="btn btn-sm btn-accent text-white w-fit ml-auto"
+              disabled={
+                selectedLinks.length === 0 ||
+                !(
+                  collectivePermissions === true ||
+                  collectivePermissions?.canUpdate
+                )
+              }
+            >
+              {t("edit")}
+            </button>
+            <button
+              onClick={(e) => {
+                (document?.activeElement as HTMLElement)?.blur();
+                e.shiftKey ? bulkDeleteLinks() : setBulkDeleteLinksModal(true);
+              }}
+              className="btn btn-sm bg-red-500 hover:bg-red-400 text-white w-fit ml-auto"
+              disabled={
+                selectedLinks.length === 0 ||
+                !(
+                  collectivePermissions === true ||
+                  collectivePermissions?.canDelete
+                )
+              }
+            >
+              {t("delete")}
+            </button>
+          </div>
+        </div>
+      )}
+
+      {bulkDeleteLinksModal && (
+        <BulkDeleteLinksModal
+          onClose={() => {
+            setBulkDeleteLinksModal(false);
+          }}
+        />
+      )}
+
+      {bulkEditLinksModal && (
+        <BulkEditLinksModal
+          onClose={() => {
+            setBulkEditLinksModal(false);
+          }}
+        />
+      )}
+    </>
+  );
+};
+
+export default LinkListOptions;

components/LinkViews/LinkCard.tsx

@@ -20,6 +20,7 @@ import useAccountStore from "@/store/account";
 import usePermissions from "@/hooks/usePermissions";
 import toast from "react-hot-toast";
 import LinkTypeBadge from "./LinkComponents/LinkTypeBadge";
+import { useTranslation } from "next-i18next";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -30,6 +31,8 @@ type Props = {
 };
 
 export default function LinkCard({ link, flipDropdown, editMode }: Props) {
+  const { t } = useTranslation();
+
   const viewMode = localStorage.getItem("viewMode") || "card";
   const { collections } = useCollectionStore();
   const { account } = useAccountStore();
@@ -121,9 +124,7 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
         selectable
           ? handleCheckboxClick(link)
           : editMode
-            ? toast.error(
+            ? toast.error(t("link_selection_error"))
-                "You don't have permission to edit or delete this item."
-              )
             : undefined
       }
     >
@@ -167,7 +168,7 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
 
         <div className="flex flex-col justify-between h-full">
           <div className="p-3 flex flex-col gap-2">
-            <p className="truncate w-full pr-8 text-primary text-sm">
+            <p className="truncate w-full pr-9 text-primary text-sm">
               {unescapeString(link.name)}
             </p>
 
@@ -197,7 +198,9 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
           >
             <i className="bi-x text-neutral text-2xl"></i>
           </div>
-          <p className="text-neutral text-lg font-semibold">Description</p>
+          <p className="text-neutral text-lg font-semibold">
+            {t("description")}
+          </p>
 
           <hr className="divider my-2 border-t border-neutral-content h-[1px]" />
           <p>
@@ -205,13 +208,15 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
               unescapeString(link.description)
             ) : (
               <span className="text-neutral text-sm">
-                No description provided.
+                {t("no_description")}
               </span>
             )}
           </p>
           {link.tags && link.tags[0] && (
             <>
-              <p className="text-neutral text-lg mt-3 font-semibold">Tags</p>
+              <p className="text-neutral text-lg mt-3 font-semibold">
+                {t("tags")}
+              </p>
 
               <hr className="divider my-2 border-t border-neutral-content h-[1px]" />
 

components/LinkViews/LinkComponents/LinkActions.tsx

@@ -11,6 +11,7 @@ import useLinkStore from "@/store/links";
 import { toast } from "react-hot-toast";
 import useAccountStore from "@/store/account";
 import { dropdownTriggerer } from "@/lib/client/utils";
+import { useTranslation } from "next-i18next";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -30,6 +31,8 @@ export default function LinkActions({
   alignToTop,
   flipDropdown,
 }: Props) {
+  const { t } = useTranslation();
+
   const permissions = usePermissions(link.collection.id as number);
 
   const [editLinkModal, setEditLinkModal] = useState(false);
@@ -43,7 +46,7 @@ export default function LinkActions({
   const pinLink = async () => {
     const isAlreadyPinned = link?.pinnedBy && link.pinnedBy[0];
 
-    const load = toast.loading("Applying...");
+    const load = toast.loading(t("applying"));
 
     const response = await updateLink({
       ...link,
@@ -53,17 +56,17 @@ export default function LinkActions({
     toast.dismiss(load);
 
     response.ok &&
-      toast.success(`Link ${isAlreadyPinned ? "Unpinned!" : "Pinned!"}`);
+      toast.success(isAlreadyPinned ? t("link_unpinned") : t("link_unpinned"));
   };
 
   const deleteLink = async () => {
-    const load = toast.loading("Deleting...");
+    const load = toast.loading(t("deleting"));
 
     const response = await removeLink(link.id as number);
 
     toast.dismiss(load);
 
-    response.ok && toast.success(`Link Deleted.`);
+    response.ok && toast.success(t("deleted"));
   };
 
   return (
@@ -96,8 +99,8 @@ export default function LinkActions({
               }}
             >
               {link?.pinnedBy && link.pinnedBy[0]
-                ? "Unpin"
+                ? t("unpin")
-                : "Pin to Dashboard"}
+                : t("pin_to_dashboard")}
             </div>
           </li>
           {linkInfo !== undefined && toggleShowInfo ? (
@@ -110,7 +113,7 @@ export default function LinkActions({
                   toggleShowInfo();
                 }}
               >
-                {!linkInfo ? "Show" : "Hide"} Link Details
+                {!linkInfo ? t("show_link_details") : t("hide_link_details")}
               </div>
             </li>
           ) : undefined}
@@ -124,7 +127,7 @@ export default function LinkActions({
                   setEditLinkModal(true);
                 }}
               >
-                Edit Link
+                {t("edit_link")}
               </div>
             </li>
           ) : undefined}
@@ -138,7 +141,7 @@ export default function LinkActions({
                   setPreservedFormatsModal(true);
                 }}
               >
-                Preserved Formats
+                {t("preserved_formats")}
               </div>
             </li>
           )}
@@ -152,7 +155,7 @@ export default function LinkActions({
                   e.shiftKey ? deleteLink() : setDeleteLinkModal(true);
                 }}
               >
-                Delete
+                {t("delete")}
               </div>
             </li>
           ) : undefined}

components/LinkViews/LinkComponents/LinkGroupedIconURL.tsx

@@ -1,53 +0,0 @@
-import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
-import Image from "next/image";
-import isValidUrl from "@/lib/shared/isValidUrl";
-import React from "react";
-import Link from "next/link";
-
-export default function LinkGroupedIconURL({
-  link,
-}: {
-  link: LinkIncludingShortenedCollectionAndTags;
-}) {
-  const url =
-    isValidUrl(link.url || "") && link.url ? new URL(link.url) : undefined;
-
-  const [showFavicon, setShowFavicon] = React.useState<boolean>(true);
-
-  let shortendURL;
-
-  try {
-    shortendURL = new URL(link.url || "").host.toLowerCase();
-  } catch (error) {
-    console.log(error);
-  }
-
-  return (
-    <Link href={link.url || ""} target="_blank">
-      <div className="bg-white shadow-md rounded-md border-[2px] flex gap-1 item-center justify-center border-white select-none z-10 max-w-full">
-        {link.url && url && showFavicon ? (
-          <Image
-            src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${link.url}&size=32`}
-            width={64}
-            height={64}
-            alt=""
-            className="w-5 h-5 rounded"
-            draggable="false"
-            onError={() => {
-              setShowFavicon(false);
-            }}
-          />
-        ) : showFavicon === false ? (
-          <i className="bi-link-45deg text-xl leading-none text-black"></i>
-        ) : link.type === "pdf" ? (
-          <i className={`bi-file-earmark-pdf`}></i>
-        ) : link.type === "image" ? (
-          <i className={`bi-file-earmark-image`}></i>
-        ) : undefined}
-        <p className="truncate bg-white text-black mr-1">
-          <p className="text-sm">{shortendURL}</p>
-        </p>
-      </div>
-    </Link>
-  );
-}

components/LinkViews/LinkList.tsx

@@ -10,13 +10,13 @@ import LinkActions from "@/components/LinkViews/LinkComponents/LinkActions";
 import LinkDate from "@/components/LinkViews/LinkComponents/LinkDate";
 import LinkCollection from "@/components/LinkViews/LinkComponents/LinkCollection";
 import LinkIcon from "@/components/LinkViews/LinkComponents/LinkIcon";
-import Link from "next/link";
 import { isPWA } from "@/lib/client/utils";
 import { generateLinkHref } from "@/lib/client/generateLinkHref";
 import useAccountStore from "@/store/account";
 import usePermissions from "@/hooks/usePermissions";
 import toast from "react-hot-toast";
 import LinkTypeBadge from "./LinkComponents/LinkTypeBadge";
+import { useTranslation } from "next-i18next";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -31,6 +31,8 @@ export default function LinkCardCompact({
   flipDropdown,
   editMode,
 }: Props) {
+  const { t } = useTranslation();
+
   const { collections } = useCollectionStore();
   const { account } = useAccountStore();
   const { links, setSelectedLinks, selectedLinks } = useLinkStore();
@@ -96,9 +98,7 @@ export default function LinkCardCompact({
           selectable
             ? handleCheckboxClick(link)
             : editMode
-              ? toast.error(
+              ? toast.error(t("link_selection_error"))
-                  "You don't have permission to edit or delete this item."
-                )
               : undefined
         }
       >

components/LinkViews/LinkMasonry.tsx

@@ -20,6 +20,7 @@ import useAccountStore from "@/store/account";
 import usePermissions from "@/hooks/usePermissions";
 import toast from "react-hot-toast";
 import LinkTypeBadge from "./LinkComponents/LinkTypeBadge";
+import { useTranslation } from "next-i18next";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -30,6 +31,8 @@ type Props = {
 };
 
 export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
+  const { t } = useTranslation();
+
   const { collections } = useCollectionStore();
   const { account } = useAccountStore();
 
@@ -120,9 +123,7 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
         selectable
           ? handleCheckboxClick(link)
           : editMode
-            ? toast.error(
+            ? toast.error(t("link_selection_error"))
-                "You don't have permission to edit or delete this item."
-              )
             : undefined
       }
     >
@@ -164,7 +165,7 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
         )}
 
         <div className="p-3 flex flex-col gap-2">
-          <p className="hyphens-auto w-full pr-8 text-primary text-sm">
+          <p className="hyphens-auto w-full pr-9 text-primary text-sm">
             {unescapeString(link.name)}
           </p>
 
@@ -210,7 +211,9 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
           >
             <i className="bi-x text-neutral text-2xl"></i>
           </div>
-          <p className="text-neutral text-lg font-semibold">Description</p>
+          <p className="text-neutral text-lg font-semibold">
+            {t("description")}
+          </p>
 
           <hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
           <p>
@@ -218,13 +221,15 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
               unescapeString(link.description)
             ) : (
               <span className="text-neutral text-sm">
-                No description provided.
+                {t("no_description")}
               </span>
             )}
           </p>
           {link.tags[0] && (
             <>
-              <p className="text-neutral text-lg mt-3 font-semibold">Tags</p>
+              <p className="text-neutral text-lg mt-3 font-semibold">
+                {t("tags")}
+              </p>
 
               <hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
 

components/Loader.tsx

@@ -1,7 +0,0 @@
-export default function Loading() {
-  return (
-    <div>
-      <p>Loading...</p>
-    </div>
-  );
-}

components/MobileNavigation.tsx

@@ -5,10 +5,12 @@ import NewLinkModal from "./ModalContent/NewLinkModal";
 import NewCollectionModal from "./ModalContent/NewCollectionModal";
 import UploadFileModal from "./ModalContent/UploadFileModal";
 import MobileNavigationButton from "./MobileNavigationButton";
+import { useTranslation } from "next-i18next";
 
 type Props = {};
 
 export default function MobileNavigation({}: Props) {
+  const { t } = useTranslation();
   const [newLinkModal, setNewLinkModal] = useState(false);
   const [newCollectionModal, setNewCollectionModal] = useState(false);
   const [uploadFileModal, setUploadFileModal] = useState(false);
@@ -49,21 +51,21 @@ export default function MobileNavigation({}: Props) {
                   tabIndex={0}
                   role="button"
                 >
-                  New Link
+                  {t("new_link")}
+                </div>
+              </li>
+              <li>
+                <div
+                  onClick={() => {
+                    (document?.activeElement as HTMLElement)?.blur();
+                    setUploadFileModal(true);
+                  }}
+                  tabIndex={0}
+                  role="button"
+                >
+                  {t("upload_file")}
                 </div>
               </li>
-              {/* <li>
-              <div
-                onClick={() => {
-                  (document?.activeElement as HTMLElement)?.blur();
-                  setUploadFileModal(true);
-                }}
-                tabIndex={0}
-                role="button"
-              >
-                Upload File
-              </div>
-            </li> */}
               <li>
                 <div
                   onClick={() => {
@@ -73,7 +75,7 @@ export default function MobileNavigation({}: Props) {
                   tabIndex={0}
                   role="button"
                 >
-                  New Collection
+                  {t("new_collection")}
                 </div>
               </li>
             </ul>

components/ModalContent/BulkDeleteLinksModal.tsx

@@ -3,20 +3,18 @@ import useLinkStore from "@/store/links";
 import toast from "react-hot-toast";
 import Modal from "../Modal";
 import Button from "../ui/Button";
+import { useTranslation } from "next-i18next";
 
 type Props = {
   onClose: Function;
 };
 
 export default function BulkDeleteLinksModal({ onClose }: Props) {
+  const { t } = useTranslation();
   const { selectedLinks, setSelectedLinks, deleteLinksById } = useLinkStore();
 
   const deleteLink = async () => {
-    const load = toast.loading(
+    const load = toast.loading(t("deleting"));
-      `Deleting ${selectedLinks.length} Link${
-        selectedLinks.length > 1 ? "s" : ""
-      }...`
-    );
 
     const response = await deleteLinksById(
       selectedLinks.map((link) => link.id as number)
@@ -25,12 +23,7 @@ export default function BulkDeleteLinksModal({ onClose }: Props) {
     toast.dismiss(load);
 
     if (response.ok) {
-      toast.success(
+      toast.success(t("deleted"));
-        `Deleted ${selectedLinks.length} Link${
-          selectedLinks.length > 1 ? "s" : ""
-        }`
-      );
-
       setSelectedLinks([]);
       onClose();
     } else toast.error(response.data as string);
@@ -39,33 +32,32 @@ export default function BulkDeleteLinksModal({ onClose }: Props) {
   return (
     <Modal toggleModal={onClose}>
       <p className="text-xl font-thin text-red-500">
-        Delete {selectedLinks.length} Link{selectedLinks.length > 1 ? "s" : ""}
+        {selectedLinks.length === 1
+          ? t("delete_link")
+          : t("delete_links", { count: selectedLinks.length })}
       </p>
 
       <div className="divider mb-3 mt-1"></div>
 
       <div className="flex flex-col gap-3">
-        {selectedLinks.length > 1 ? (
+        <p>
-          <p>Are you sure you want to delete {selectedLinks.length} links?</p>
+          {selectedLinks.length === 1
-        ) : (
+            ? t("link_deletion_confirmation_message")
-          <p>Are you sure you want to delete this link?</p>
+            : t("links_deletion_confirmation_message", {
-        )}
+                count: selectedLinks.length,
+              })}
+        </p>
 
         <div role="alert" className="alert alert-warning">
           <i className="bi-exclamation-triangle text-xl" />
-          <span>
+          <span>{t("warning_irreversible")}</span>
-            <b>Warning:</b> This action is irreversible!
-          </span>
         </div>
 
-        <p>
+        <p>{t("shift_key_tip")}</p>
-          Hold the <kbd className="kbd kbd-sm">Shift</kbd> key while clicking
-          &apos;Delete&apos; to bypass this confirmation in the future.
-        </p>
 
         <Button className="ml-auto" intent="destructive" onClick={deleteLink}>
           <i className="bi-trash text-xl" />
-          Delete
+          {t("delete")}
         </Button>
       </div>
     </Modal>

components/ModalContent/BulkEditLinksModal.tsx

@@ -5,12 +5,14 @@ import useLinkStore from "@/store/links";
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 import toast from "react-hot-toast";
 import Modal from "../Modal";
+import { useTranslation } from "next-i18next";
 
 type Props = {
   onClose: Function;
 };
 
 export default function BulkEditLinksModal({ onClose }: Props) {
+  const { t } = useTranslation();
   const { updateLinks, selectedLinks, setSelectedLinks } = useLinkStore();
   const [submitLoader, setSubmitLoader] = useState(false);
   const [removePreviousTags, setRemovePreviousTags] = useState(false);
@@ -20,7 +22,6 @@ export default function BulkEditLinksModal({ onClose }: Props) {
 
   const setCollection = (e: any) => {
     const collectionId = e?.value || null;
-    console.log(updatedValues);
     setUpdatedValues((prevValues) => ({ ...prevValues, collectionId }));
   };
 
@@ -33,7 +34,7 @@ export default function BulkEditLinksModal({ onClose }: Props) {
     if (!submitLoader) {
       setSubmitLoader(true);
 
-      const load = toast.loading("Updating...");
+      const load = toast.loading(t("updating"));
 
       const response = await updateLinks(
         selectedLinks,
@@ -44,7 +45,7 @@ export default function BulkEditLinksModal({ onClose }: Props) {
       toast.dismiss(load);
 
       if (response.ok) {
-        toast.success(`Updated!`);
+        toast.success(t("updated"));
         setSelectedLinks([]);
         onClose();
       } else toast.error(response.data as string);
@@ -57,13 +58,15 @@ export default function BulkEditLinksModal({ onClose }: Props) {
   return (
     <Modal toggleModal={onClose}>
       <p className="text-xl font-thin">
-        Edit {selectedLinks.length} Link{selectedLinks.length > 1 ? "s" : ""}
+        {selectedLinks.length === 1
+          ? t("edit_link")
+          : t("edit_links", { count: selectedLinks.length })}
       </p>
       <div className="divider mb-3 mt-1"></div>
       <div className="mt-5">
         <div className="grid sm:grid-cols-2 gap-3">
           <div>
-            <p className="mb-2">Move to Collection</p>
+            <p className="mb-2">{t("move_to_collection")}</p>
             <CollectionSelection
               showDefaultValue={false}
               onChange={setCollection}
@@ -72,7 +75,7 @@ export default function BulkEditLinksModal({ onClose }: Props) {
           </div>
 
           <div>
-            <p className="mb-2">Add Tags</p>
+            <p className="mb-2">{t("add_tags")}</p>
             <TagSelection onChange={setTags} />
           </div>
         </div>
@@ -84,7 +87,7 @@ export default function BulkEditLinksModal({ onClose }: Props) {
               checked={removePreviousTags}
               onChange={(e) => setRemovePreviousTags(e.target.checked)}
             />
-            Remove previous tags
+            {t("remove_previous_tags")}
           </label>
         </div>
       </div>
@@ -94,7 +97,7 @@ export default function BulkEditLinksModal({ onClose }: Props) {
           className="btn btn-accent dark:border-violet-400 text-white"
           onClick={submit}
         >
-          Save Changes
+          {t("save_changes")}
         </button>
       </div>
     </Modal>

components/ModalContent/DeleteCollectionModal.tsx

@@ -7,6 +7,7 @@ import { useRouter } from "next/router";
 import usePermissions from "@/hooks/usePermissions";
 import Modal from "../Modal";
 import Button from "../ui/Button";
+import { useTranslation } from "next-i18next";
 
 type Props = {
   onClose: Function;
@@ -17,42 +18,40 @@ export default function DeleteCollectionModal({
   onClose,
   activeCollection,
 }: Props) {
+  const { t } = useTranslation();
   const [collection, setCollection] =
     useState<CollectionIncludingMembersAndLinkCount>(activeCollection);
+  const [submitLoader, setSubmitLoader] = useState(false);
+  const { removeCollection } = useCollectionStore();
+  const router = useRouter();
+  const [inputField, setInputField] = useState("");
+  const permissions = usePermissions(collection.id as number);
 
   useEffect(() => {
     setCollection(activeCollection);
   }, []);
 
-  const [submitLoader, setSubmitLoader] = useState(false);
-  const { removeCollection } = useCollectionStore();
-  const router = useRouter();
-  const [inputField, setInputField] = useState("");
-
-  const permissions = usePermissions(collection.id as number);
-
   const submit = async () => {
-    if (permissions === true) if (collection.name !== inputField) return null;
+    if (permissions === true && collection.name !== inputField) return;
-
     if (!submitLoader) {
       setSubmitLoader(true);
       if (!collection) return null;
 
       setSubmitLoader(true);
 
-      const load = toast.loading("Deleting...");
+      const load = toast.loading(t("deleting_collection"));
 
-      let response;
+      let response = await removeCollection(collection.id as number);
-
-      response = await removeCollection(collection.id as any);
 
       toast.dismiss(load);
 
       if (response.ok) {
-        toast.success(`Deleted.`);
+        toast.success(t("deleted"));
         onClose();
         router.push("/collections");
-      } else toast.error(response.data as string);
+      } else {
+        toast.error(response.data as string);
+      }
 
       setSubmitLoader(false);
     }
@@ -61,7 +60,7 @@ export default function DeleteCollectionModal({
   return (
     <Modal toggleModal={onClose}>
       <p className="text-xl font-thin text-red-500">
-        {permissions === true ? "Delete" : "Leave"} Collection
+        {permissions === true ? t("delete_collection") : t("leave_collection")}
       </p>
 
       <div className="divider mb-3 mt-1"></div>
@@ -69,32 +68,26 @@ export default function DeleteCollectionModal({
       <div className="flex flex-col gap-3">
         {permissions === true ? (
           <>
-            <div className="flex flex-col gap-3">
+            <p>{t("confirm_deletion_prompt", { name: collection.name })}</p>
-              <p>
+            <TextInput
-                To confirm, type &quot;
+              value={inputField}
-                <span className="font-bold">{collection.name}</span>
+              onChange={(e) => setInputField(e.target.value)}
-                &quot; in the box below:
+              placeholder={t("type_name_placeholder", {
-              </p>
+                name: collection.name,
-
+              })}
-              <TextInput
+              className="w-3/4 mx-auto"
-                value={inputField}
+            />
-                onChange={(e) => setInputField(e.target.value)}
-                placeholder={`Type "${collection.name}" Here.`}
-                className="w-3/4 mx-auto"
-              />
-            </div>
 
             <div role="alert" className="alert alert-warning">
               <i className="bi-exclamation-triangle text-xl"></i>
               <span>
-                <b>Warning:</b> Deleting this collection will permanently erase
+                <b>{t("warning")}: </b>
-                all its contents, and it will become inaccessible to everyone,
+                {t("deletion_warning")}
-                including members with previous access.
               </span>
             </div>
           </>
         ) : (
-          <p>Click the button below to leave the current collection.</p>
+          <p>{t("leave_prompt")}</p>
         )}
 
         <Button
@@ -104,7 +97,7 @@ export default function DeleteCollectionModal({
           className="ml-auto"
         >
           <i className="bi-trash text-xl"></i>
-          {permissions === true ? "Delete" : "Leave"} Collection
+          {permissions === true ? t("delete") : t("leave")}
         </Button>
       </div>
     </Modal>

components/ModalContent/DeleteLinkModal.tsx

@@ -5,6 +5,7 @@ import toast from "react-hot-toast";
 import Modal from "../Modal";
 import { useRouter } from "next/router";
 import Button from "../ui/Button";
+import { useTranslation } from "next-i18next";
 
 type Props = {
   onClose: Function;
@@ -12,11 +13,10 @@ type Props = {
 };
 
 export default function DeleteLinkModal({ onClose, activeLink }: Props) {
+  const { t } = useTranslation();
   const [link, setLink] =
     useState<LinkIncludingShortenedCollectionAndTags>(activeLink);
-
   const { removeLink } = useLinkStore();
-
   const router = useRouter();
 
   useEffect(() => {
@@ -24,13 +24,13 @@ export default function DeleteLinkModal({ onClose, activeLink }: Props) {
   }, []);
 
   const deleteLink = async () => {
-    const load = toast.loading("Deleting...");
+    const load = toast.loading(t("deleting"));
 
     const response = await removeLink(link.id as number);
 
     toast.dismiss(load);
 
-    response.ok && toast.success(`Link Deleted.`);
+    response.ok && toast.success(t("deleted"));
 
     if (router.pathname.startsWith("/links/[id]")) {
       router.push("/dashboard");
@@ -41,28 +41,25 @@ export default function DeleteLinkModal({ onClose, activeLink }: Props) {
 
   return (
     <Modal toggleModal={onClose}>
-      <p className="text-xl font-thin text-red-500">Delete Link</p>
+      <p className="text-xl font-thin text-red-500">{t("delete_link")}</p>
 
       <div className="divider mb-3 mt-1"></div>
 
       <div className="flex flex-col gap-3">
-        <p>Are you sure you want to delete this Link?</p>
+        <p>{t("link_deletion_confirmation_message")}</p>
 
         <div role="alert" className="alert alert-warning">
           <i className="bi-exclamation-triangle text-xl" />
           <span>
-            <b>Warning:</b> This action is irreversible!
+            <b>{t("warning")}:</b> {t("irreversible_warning")}
           </span>
         </div>
 
-        <p>
+        <p>{t("shift_key_tip")}</p>
-          Hold the <kbd className="kbd kbd-sm">Shift</kbd> key while clicking
-          &apos;Delete&apos; to bypass this confirmation in the future.
-        </p>
 
         <Button className="ml-auto" intent="destructive" onClick={deleteLink}>
           <i className="bi-trash text-xl" />
-          Delete
+          {t("delete")}
         </Button>
       </div>
     </Modal>

components/ModalContent/DeleteUserModal.tsx

@@ -2,6 +2,7 @@ import toast from "react-hot-toast";
 import Modal from "../Modal";
 import useUserStore from "@/store/admin/users";
 import Button from "../ui/Button";
+import { useTranslation } from "next-i18next";
 
 type Props = {
   onClose: Function;
@@ -9,39 +10,40 @@ type Props = {
 };
 
 export default function DeleteUserModal({ onClose, userId }: Props) {
+  const { t } = useTranslation();
   const { removeUser } = useUserStore();
 
   const deleteUser = async () => {
-    const load = toast.loading("Deleting...");
+    const load = toast.loading(t("deleting_user"));
 
     const response = await removeUser(userId);
 
     toast.dismiss(load);
 
-    response.ok && toast.success(`User Deleted.`);
+    response.ok && toast.success(t("user_deleted"));
 
     onClose();
   };
 
   return (
     <Modal toggleModal={onClose}>
-      <p className="text-xl font-thin text-red-500">Delete User</p>
+      <p className="text-xl font-thin text-red-500">{t("delete_user")}</p>
 
       <div className="divider mb-3 mt-1"></div>
 
       <div className="flex flex-col gap-3">
-        <p>Are you sure you want to remove this user?</p>
+        <p>{t("confirm_user_deletion")}</p>
 
         <div role="alert" className="alert alert-warning">
           <i className="bi-exclamation-triangle text-xl" />
           <span>
-            <b>Warning:</b> This action is irreversible!
+            <b>{t("warning")}:</b> {t("irreversible_action_warning")}
           </span>
         </div>
 
         <Button className="ml-auto" intent="destructive" onClick={deleteUser}>
           <i className="bi-trash text-xl" />
-          Delete, I know what I&apos;m doing
+          {t("delete_confirmation")}
         </Button>
       </div>
     </Modal>

components/ModalContent/EditCollectionModal.tsx

@@ -5,6 +5,7 @@ import toast from "react-hot-toast";
 import { HexColorPicker } from "react-colorful";
 import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import Modal from "../Modal";
+import { useTranslation } from "next-i18next";
 
 type Props = {
   onClose: Function;
@@ -15,6 +16,7 @@ export default function EditCollectionModal({
   onClose,
   activeCollection,
 }: Props) {
+  const { t } = useTranslation();
   const [collection, setCollection] =
     useState<CollectionIncludingMembersAndLinkCount>(activeCollection);
 
@@ -28,16 +30,14 @@ export default function EditCollectionModal({
 
       setSubmitLoader(true);
 
-      const load = toast.loading("Updating...");
+      const load = toast.loading(t("updating_collection"));
 
-      let response;
+      let response = await updateCollection(collection as any);
-
-      response = await updateCollection(collection as any);
 
       toast.dismiss(load);
 
       if (response.ok) {
-        toast.success(`Updated!`);
+        toast.success(t("updated"));
         onClose();
       } else toast.error(response.data as string);
 
@@ -47,29 +47,35 @@ export default function EditCollectionModal({
 
   return (
     <Modal toggleModal={onClose}>
-      <p className="text-xl font-thin">Edit Collection Info</p>
+      <p className="text-xl font-thin">{t("edit_collection_info")}</p>
 
       <div className="divider mb-3 mt-1"></div>
 
       <div className="flex flex-col gap-3">
         <div className="flex flex-col sm:flex-row gap-3">
           <div className="w-full">
-            <p className="mb-2">Name</p>
+            <p className="mb-2">{t("name")}</p>
             <div className="flex flex-col gap-3">
               <TextInput
                 className="bg-base-200"
                 value={collection.name}
-                placeholder="e.g. Example Collection"
+                placeholder={t("collection_name_placeholder")}
                 onChange={(e) =>
                   setCollection({ ...collection, name: e.target.value })
                 }
               />
               <div>
-                <p className="w-full mb-2">Color</p>
+                <p className="w-full mb-2">{t("color")}</p>
-                <div className="color-picker flex justify-between">
+                <div className="color-picker flex justify-between items-center">
+                  <HexColorPicker
+                    color={collection.color}
+                    onChange={(color) =>
+                      setCollection({ ...collection, color })
+                    }
+                  />
                   <div className="flex flex-col gap-2 items-center w-32">
                     <i
-                      className="bi-folder-fill text-5xl drop-shadow"
+                      className="bi-folder-fill text-5xl"
                       style={{ color: collection.color }}
                     ></i>
                     <div
@@ -78,29 +84,22 @@ export default function EditCollectionModal({
                         setCollection({ ...collection, color: "#0ea5e9" })
                       }
                     >
-                      Reset
+                      {t("reset")}
                     </div>
                   </div>
-                  <HexColorPicker
-                    color={collection.color}
-                    onChange={(e) => setCollection({ ...collection, color: e })}
-                  />
                 </div>
               </div>
             </div>
           </div>
 
           <div className="w-full">
-            <p className="mb-2">Description</p>
+            <p className="mb-2">{t("description")}</p>
             <textarea
               className="w-full h-[13rem] resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-primary"
-              placeholder="The purpose of this Collection..."
+              placeholder={t("collection_description_placeholder")}
               value={collection.description}
               onChange={(e) =>
-                setCollection({
+                setCollection({ ...collection, description: e.target.value })
-                  ...collection,
-                  description: e.target.value,
-                })
               }
             />
           </div>
@@ -110,7 +109,7 @@ export default function EditCollectionModal({
           className="btn btn-accent dark:border-violet-400 text-white w-fit ml-auto"
           onClick={submit}
         >
-          Save Changes
+          {t("save_changes")}
         </button>
       </div>
     </Modal>

components/ModalContent/EditCollectionSharingModal.tsx

@@ -10,6 +10,7 @@ import ProfilePhoto from "../ProfilePhoto";
 import addMemberToCollection from "@/lib/client/addMemberToCollection";
 import Modal from "../Modal";
 import { dropdownTriggerer } from "@/lib/client/utils";
+import { useTranslation } from "next-i18next";
 
 type Props = {
   onClose: Function;
@@ -20,6 +21,8 @@ export default function EditCollectionSharingModal({
   onClose,
   activeCollection,
 }: Props) {
+  const { t } = useTranslation();
+
   const [collection, setCollection] =
     useState<CollectionIncludingMembersAndLinkCount>(activeCollection);
 
@@ -33,7 +36,7 @@ export default function EditCollectionSharingModal({
 
       setSubmitLoader(true);
 
-      const load = toast.loading("Updating...");
+      const load = toast.loading(t("updating"));
 
       let response;
 
@@ -42,7 +45,7 @@ export default function EditCollectionSharingModal({
       toast.dismiss(load);
 
       if (response.ok) {
-        toast.success(`Updated!`);
+        toast.success(t("updated"));
         onClose();
       } else toast.error(response.data as string);
 
@@ -93,7 +96,7 @@ export default function EditCollectionSharingModal({
   return (
     <Modal toggleModal={onClose}>
       <p className="text-xl font-thin">
-        {permissions === true ? "Share and Collaborate" : "Team"}
+        {permissions === true ? t("share_and_collaborate") : t("team")}
       </p>
 
       <div className="divider mb-3 mt-1"></div>
@@ -101,7 +104,7 @@ export default function EditCollectionSharingModal({
       <div className="flex flex-col gap-3">
         {permissions === true && (
           <div>
-            <p>Make Public</p>
+            <p>{t("make_collection_public")}</p>
 
             <label className="label cursor-pointer justify-start gap-2">
               <input
@@ -115,25 +118,26 @@ export default function EditCollectionSharingModal({
                 }
                 className="checkbox checkbox-primary"
               />
-              <span className="label-text">Make this a public collection</span>
+              <span className="label-text">
+                {t("make_collection_public_checkbox")}
+              </span>
             </label>
 
             <p className="text-neutral text-sm">
-              This will let <b>Anyone</b> to view this collection and it&apos;s
+              {t("make_collection_public_desc")}
-              users.
             </p>
           </div>
         )}
 
         {collection.isPublic ? (
           <div className={permissions === true ? "pl-5" : ""}>
-            <p className="mb-2">Sharable Link (Click to copy)</p>
+            <p className="mb-2">{t("sharable_link_guide")}</p>
             <div
               onClick={() => {
                 try {
                   navigator.clipboard
                     .writeText(publicCollectionURL)
-                    .then(() => toast.success("Copied!"));
+                    .then(() => toast.success(t("copied")));
                 } catch (err) {
                   console.log(err);
                 }
@@ -149,13 +153,13 @@ export default function EditCollectionSharingModal({
 
         {permissions === true && (
           <>
-            <p>Members</p>
+            <p>{t("members")}</p>
 
             <div className="flex items-center gap-2">
               <TextInput
                 value={memberUsername || ""}
                 className="bg-base-200"
-                placeholder="Username (without the '@')"
+                placeholder={t("members_username_placeholder")}
                 onChange={(e) => setMemberUsername(e.target.value)}
                 onKeyDown={(e) =>
                   e.key === "Enter" &&
@@ -163,7 +167,8 @@ export default function EditCollectionSharingModal({
                     account.username as string,
                     memberUsername || "",
                     collection,
-                    setMemberState
+                    setMemberState,
+                    t
                   )
                 }
               />
@@ -174,7 +179,8 @@ export default function EditCollectionSharingModal({
                     account.username as string,
                     memberUsername || "",
                     collection,
-                    setMemberState
+                    setMemberState,
+                    t
                   )
                 }
                 className="btn btn-accent dark:border-violet-400 text-white btn-square btn-sm h-10 w-10"
@@ -214,7 +220,7 @@ export default function EditCollectionSharingModal({
                     </div>
                   </div>
                   <div>
-                    <p className="text-sm font-bold">Owner</p>
+                    <p className="text-sm font-bold">{t("owner")}</p>
                   </div>
                 </div>
               </div>
@@ -226,11 +232,11 @@ export default function EditCollectionSharingModal({
                 .map((e, i) => {
                   const roleLabel =
                     e.canCreate && e.canUpdate && e.canDelete
-                      ? "Admin"
+                      ? t("admin")
                       : e.canCreate && !e.canUpdate && !e.canDelete
-                        ? "Contributor"
+                        ? t("contributor")
                         : !e.canCreate && !e.canUpdate && !e.canDelete
-                          ? "Viewer"
+                          ? t("viewer")
                           : undefined;
 
                   return (
@@ -307,8 +313,10 @@ export default function EditCollectionSharingModal({
                                         }}
                                       />
                                       <div>
-                                        <p className="font-bold">Viewer</p>
+                                        <p className="font-bold">
-                                        <p>Read-only access</p>
+                                          {t("viewer")}
+                                        </p>
+                                        <p>{t("viewer_desc")}</p>
                                       </div>
                                     </label>
                                   </li>
@@ -350,8 +358,10 @@ export default function EditCollectionSharingModal({
                                         }}
                                       />
                                       <div>
-                                        <p className="font-bold">Contributor</p>
+                                        <p className="font-bold">
-                                        <p>Can view and create Links</p>
+                                          {t("contributor")}
+                                        </p>
+                                        <p>{t("contributor_desc")}</p>
                                       </div>
                                     </label>
                                   </li>
@@ -393,8 +403,10 @@ export default function EditCollectionSharingModal({
                                         }}
                                       />
                                       <div>
-                                        <p className="font-bold">Admin</p>
+                                        <p className="font-bold">
-                                        <p>Full access to all Links</p>
+                                          {t("admin")}
+                                        </p>
+                                        <p>{t("admin_desc")}</p>
                                       </div>
                                     </label>
                                   </li>
@@ -411,7 +423,7 @@ export default function EditCollectionSharingModal({
                                 className={
                                   "bi-x text-xl btn btn-sm btn-square btn-ghost text-neutral hover:text-red-500 dark:hover:text-red-500 duration-100 cursor-pointer"
                                 }
-                                title="Remove Member"
+                                title={t("remove_member")}
                                 onClick={() => {
                                   const updatedMembers =
                                     collection.members.filter((member) => {
@@ -442,7 +454,7 @@ export default function EditCollectionSharingModal({
             className="btn btn-accent dark:border-violet-400 text-white w-fit ml-auto mt-3"
             onClick={submit}
           >
-            Save Changes
+            {t("save_changes")}
           </button>
         )}
       </div>

components/ModalContent/EditLinkModal.tsx

@@ -8,6 +8,7 @@ import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 import toast from "react-hot-toast";
 import Link from "next/link";
 import Modal from "../Modal";
+import { useTranslation } from "next-i18next";
 
 type Props = {
   onClose: Function;
@@ -15,13 +16,13 @@ type Props = {
 };
 
 export default function EditLinkModal({ onClose, activeLink }: Props) {
+  const { t } = useTranslation();
   const [link, setLink] =
     useState<LinkIncludingShortenedCollectionAndTags>(activeLink);
 
-  let shortendURL;
+  let shortenedURL;
-
   try {
-    shortendURL = new URL(link.url || "").host.toLowerCase();
+    shortenedURL = new URL(link.url || "").host.toLowerCase();
   } catch (error) {
     console.log(error);
   }
@@ -31,7 +32,6 @@ export default function EditLinkModal({ onClose, activeLink }: Props) {
 
   const setCollection = (e: any) => {
     if (e?.__isNew__) e.value = null;
-
     setLink({
       ...link,
       collection: { id: e?.value, name: e?.label, ownerId: e?.ownerId },
@@ -39,10 +39,7 @@ export default function EditLinkModal({ onClose, activeLink }: Props) {
   };
 
   const setTags = (e: any) => {
-    const tagNames = e.map((e: any) => {
+    const tagNames = e.map((e: any) => ({ name: e.label }));
-      return { name: e.label };
-    });
-
     setLink({ ...link, tags: tagNames });
   };
 
@@ -53,29 +50,25 @@ export default function EditLinkModal({ onClose, activeLink }: Props) {
   const submit = async () => {
     if (!submitLoader) {
       setSubmitLoader(true);
-
+      const load = toast.loading(t("updating"));
-      let response;
+      let response = await updateLink(link);
-
-      const load = toast.loading("Updating...");
-
-      response = await updateLink(link);
-
       toast.dismiss(load);
 
       if (response.ok) {
-        toast.success(`Updated!`);
+        toast.success(t("updated"));
         onClose();
-      } else toast.error(response.data as string);
+      } else {
+        toast.error(response.data as string);
+      }
 
       setSubmitLoader(false);
-
       return response;
     }
   };
 
   return (
     <Modal toggleModal={onClose}>
-      <p className="text-xl font-thin">Edit Link</p>
+      <p className="text-xl font-thin">{t("edit_link")}</p>
 
       <div className="divider mb-3 mt-1"></div>
 
@@ -87,42 +80,31 @@ export default function EditLinkModal({ onClose, activeLink }: Props) {
           target="_blank"
         >
           <i className="bi-link-45deg text-xl" />
-          <p>{shortendURL}</p>
+          <p>{shortenedURL}</p>
         </Link>
       ) : undefined}
 
       <div className="w-full">
-        <p className="mb-2">Name</p>
+        <p className="mb-2">{t("name")}</p>
         <TextInput
           value={link.name}
           onChange={(e) => setLink({ ...link, name: e.target.value })}
-          placeholder="e.g. Example Link"
+          placeholder={t("placeholder_example_link")}
           className="bg-base-200"
         />
       </div>
 
       <div className="mt-5">
-        {/* <hr className="mb-3 border border-neutral-content" /> */}
         <div className="grid sm:grid-cols-2 gap-3">
           <div>
-            <p className="mb-2">Collection</p>
+            <p className="mb-2">{t("collection")}</p>
             {link.collection.name ? (
               <CollectionSelection
                 onChange={setCollection}
-                // defaultValue={{
-                //   label: link.collection.name,
-                //   value: link.collection.id,
-                // }}
                 defaultValue={
                   link.collection.id
-                    ? {
+                    ? { value: link.collection.id, label: link.collection.name }
-                        value: link.collection.id,
+                    : { value: null as unknown as number, label: "Unorganized" }
-                        label: link.collection.name,
-                      }
-                    : {
-                        value: null as unknown as number,
-                        label: "Unorganized",
-                      }
                 }
                 creatable={false}
               />
@@ -130,23 +112,24 @@ export default function EditLinkModal({ onClose, activeLink }: Props) {
           </div>
 
           <div>
-            <p className="mb-2">Tags</p>
+            <p className="mb-2">{t("tags")}</p>
             <TagSelection
               onChange={setTags}
-              defaultValue={link.tags.map((e) => {
+              defaultValue={link.tags.map((e) => ({
-                return { label: e.name, value: e.id };
+                label: e.name,
-              })}
+                value: e.id,
+              }))}
             />
           </div>
 
           <div className="sm:col-span-2">
-            <p className="mb-2">Description</p>
+            <p className="mb-2">{t("description")}</p>
             <textarea
               value={unescapeString(link.description) as string}
               onChange={(e) =>
                 setLink({ ...link, description: e.target.value })
               }
-              placeholder="Will be auto generated if nothing is provided."
+              placeholder={t("link_description_placeholder")}
               className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-200 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100"
             />
           </div>
@@ -158,7 +141,7 @@ export default function EditLinkModal({ onClose, activeLink }: Props) {
           className="btn btn-accent dark:border-violet-400 text-white"
           onClick={submit}
         >
-          Save Changes
+          {t("save_changes")}
         </button>
       </div>
     </Modal>

components/ModalContent/EmailChangeVerificationModal.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import TextInput from "@/components/TextInput";
 import Modal from "../Modal";
+import { useTranslation } from "next-i18next";
 
 type Props = {
   onClose: Function;
@@ -15,39 +16,40 @@ export default function EmailChangeVerificationModal({
   oldEmail,
   newEmail,
 }: Props) {
+  const { t } = useTranslation();
   const [password, setPassword] = useState("");
 
   return (
     <Modal toggleModal={onClose}>
-      <p className="text-xl font-thin">Confirm Password</p>
+      <p className="text-xl font-thin">{t("confirm_password")}</p>
 
       <div className="divider mb-3 mt-1"></div>
 
       <div className="flex flex-col gap-5">
         <p>
-          Please confirm your password before changing your email address.{" "}
+          {t("password_change_warning")}
-          {process.env.NEXT_PUBLIC_STRIPE === "true" &&
+          {process.env.NEXT_PUBLIC_STRIPE === "true" && t("stripe_update_note")}
-            "Updating this field will change your billing email on Stripe as well."}
         </p>
 
         <p>
-          If you change your email address, any existing{" "}
+          {t("sso_will_be_removed_warning", {
-          {process.env.NEXT_PUBLIC_GOOGLE_ENABLED === "true" && "Google"} SSO
+            service:
-          connections will be removed.
+              process.env.NEXT_PUBLIC_GOOGLE_ENABLED === "true" ? "Google" : "",
+          })}
         </p>
 
         <div>
-          <p>Old Email</p>
+          <p>{t("old_email")}</p>
           <p className="text-neutral">{oldEmail}</p>
         </div>
 
         <div>
-          <p>New Email</p>
+          <p>{t("new_email")}</p>
           <p className="text-neutral">{newEmail}</p>
         </div>
 
         <div className="w-full">
-          <p className="mb-2">Password</p>
+          <p className="mb-2">{t("password")}</p>
           <TextInput
             value={password}
             onChange={(e) => setPassword(e.target.value)}
@@ -63,7 +65,7 @@ export default function EmailChangeVerificationModal({
             className="btn btn-accent dark:border-violet-400 text-white"
             onClick={() => onSubmit(password)}
           >
-            Confirm
+            {t("confirm")}
           </button>
         </div>
       </div>

components/ModalContent/NewCollectionModal.tsx

@@ -8,6 +8,7 @@ import Modal from "../Modal";
 import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import useAccountStore from "@/store/account";
 import { useSession } from "next-auth/react";
+import { useTranslation } from "next-i18next";
 
 type Props = {
   onClose: Function;
@@ -15,6 +16,7 @@ type Props = {
 };
 
 export default function NewCollectionModal({ onClose, parent }: Props) {
+  const { t } = useTranslation();
   const initial = {
     parentId: parent?.id,
     name: "",
@@ -39,15 +41,14 @@ export default function NewCollectionModal({ onClose, parent }: Props) {
 
     setSubmitLoader(true);
 
-    const load = toast.loading("Creating...");
+    const load = toast.loading(t("creating"));
 
     let response = await addCollection(collection as any);
     toast.dismiss(load);
 
     if (response.ok) {
-      toast.success("Created!");
+      toast.success(t("created"));
       if (response.data) {
-        // If the collection was created successfully, we need to get the new collection order
         setAccount(data?.user.id as number);
         onClose();
       }
@@ -60,11 +61,13 @@ export default function NewCollectionModal({ onClose, parent }: Props) {
     <Modal toggleModal={onClose}>
       {parent?.id ? (
         <>
-          <p className="text-xl font-thin">New Sub-Collection</p>
+          <p className="text-xl font-thin">{t("new_sub_collection")}</p>
-          <p className="capitalize text-sm">For {parent.name}</p>
+          <p className="capitalize text-sm">
+            {t("for_collection", { name: parent.name })}
+          </p>
         </>
       ) : (
-        <p className="text-xl font-thin">Create a New Collection</p>
+        <p className="text-xl font-thin">{t("create_new_collection")}</p>
       )}
 
       <div className="divider mb-3 mt-1"></div>
@@ -72,19 +75,25 @@ export default function NewCollectionModal({ onClose, parent }: Props) {
       <div className="flex flex-col gap-3">
         <div className="flex flex-col sm:flex-row gap-3">
           <div className="w-full">
-            <p className="mb-2">Name</p>
+            <p className="mb-2">{t("name")}</p>
-            <div className="flex flex-col gap-3">
+            <div className="flex flex-col gap-2">
               <TextInput
                 className="bg-base-200"
                 value={collection.name}
-                placeholder="e.g. Example Collection"
+                placeholder={t("collection_name_placeholder")}
                 onChange={(e) =>
                   setCollection({ ...collection, name: e.target.value })
                 }
               />
               <div>
-                <p className="w-full mb-2">Color</p>
+                <p className="w-full mb-2">{t("color")}</p>
-                <div className="color-picker flex justify-between">
+                <div className="color-picker flex justify-between items-center">
+                  <HexColorPicker
+                    color={collection.color}
+                    onChange={(color) =>
+                      setCollection({ ...collection, color })
+                    }
+                  />
                   <div className="flex flex-col gap-2 items-center w-32">
                     <i
                       className={"bi-folder-fill text-5xl"}
@@ -96,29 +105,22 @@ export default function NewCollectionModal({ onClose, parent }: Props) {
                         setCollection({ ...collection, color: "#0ea5e9" })
                       }
                     >
-                      Reset
+                      {t("reset")}
                     </div>
                   </div>
-                  <HexColorPicker
-                    color={collection.color}
-                    onChange={(e) => setCollection({ ...collection, color: e })}
-                  />
                 </div>
               </div>
             </div>
           </div>
 
           <div className="w-full">
-            <p className="mb-2">Description</p>
+            <p className="mb-2">{t("description")}</p>
             <textarea
               className="w-full h-[13rem] resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-primary"
-              placeholder="The purpose of this Collection..."
+              placeholder={t("collection_description_placeholder")}
               value={collection.description}
               onChange={(e) =>
-                setCollection({
+                setCollection({ ...collection, description: e.target.value })
-                  ...collection,
-                  description: e.target.value,
-                })
               }
             />
           </div>
@@ -128,7 +130,7 @@ export default function NewCollectionModal({ onClose, parent }: Props) {
           className="btn btn-accent dark:border-violet-400 text-white w-fit ml-auto"
           onClick={submit}
         >
-          Create Collection
+          {t("create_collection_button")}
         </button>
       </div>
     </Modal>

components/ModalContent/NewLinkModal.tsx

@@ -11,14 +11,15 @@ import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
 import toast from "react-hot-toast";
 import Modal from "../Modal";
+import { useTranslation } from "next-i18next";
 
 type Props = {
   onClose: Function;
 };
 
 export default function NewLinkModal({ onClose }: Props) {
+  const { t } = useTranslation();
   const { data } = useSession();
-
   const initial = {
     name: "",
     url: "",
@@ -38,18 +39,14 @@ export default function NewLinkModal({ onClose }: Props) {
 
   const [link, setLink] =
     useState<LinkIncludingShortenedCollectionAndTags>(initial);
-
   const { addLink } = useLinkStore();
   const [submitLoader, setSubmitLoader] = useState(false);
-
   const [optionsExpanded, setOptionsExpanded] = useState(false);
-
   const router = useRouter();
   const { collections } = useCollectionStore();
 
   const setCollection = (e: any) => {
     if (e?.__isNew__) e.value = null;
-
     setLink({
       ...link,
       collection: { id: e?.value, name: e?.label, ownerId: e?.ownerId },
@@ -57,10 +54,7 @@ export default function NewLinkModal({ onClose }: Props) {
   };
 
   const setTags = (e: any) => {
-    const tagNames = e.map((e: any) => {
+    const tagNames = e.map((e: any) => ({ name: e.label }));
-      return { name: e.label };
-    });
-
     setLink({ ...link, tags: tagNames });
   };
 
@@ -69,7 +63,6 @@ export default function NewLinkModal({ onClose }: Props) {
       const currentCollection = collections.find(
         (e) => e.id == Number(router.query.id)
       );
-
       if (
         currentCollection &&
         currentCollection.ownerId &&
@@ -86,53 +79,42 @@ export default function NewLinkModal({ onClose }: Props) {
     } else
       setLink({
         ...initial,
-        collection: {
+        collection: { name: "Unorganized", ownerId: data?.user.id as number },
-          name: "Unorganized",
-          ownerId: data?.user.id as number,
-        },
       });
   }, []);
 
   const submit = async () => {
     if (!submitLoader) {
       setSubmitLoader(true);
-
+      const load = toast.loading(t("creating_link"));
-      let response;
+      const response = await addLink(link);
-
-      const load = toast.loading("Creating...");
-
-      response = await addLink(link);
-
       toast.dismiss(load);
-
       if (response.ok) {
-        toast.success(`Created!`);
+        toast.success(t("link_created"));
         onClose();
-      } else toast.error(response.data as string);
+      } else {
+        toast.error(response.data as string);
+      }
       setSubmitLoader(false);
-
-      return response;
     }
   };
 
   return (
     <Modal toggleModal={onClose}>
-      <p className="text-xl font-thin">Create a New Link</p>
+      <p className="text-xl font-thin">{t("create_new_link")}</p>
-
       <div className="divider mb-3 mt-1"></div>
-
       <div className="grid grid-flow-row-dense sm:grid-cols-5 gap-3">
         <div className="sm:col-span-3 col-span-5">
-          <p className="mb-2">Link</p>
+          <p className="mb-2">{t("link")}</p>
           <TextInput
             value={link.url || ""}
             onChange={(e) => setLink({ ...link, url: e.target.value })}
-            placeholder="e.g. http://example.com/"
+            placeholder={t("link_url_placeholder")}
             className="bg-base-200"
           />
         </div>
         <div className="sm:col-span-2 col-span-5">
-          <p className="mb-2">Collection</p>
+          <p className="mb-2">{t("collection")}</p>
           {link.collection.name ? (
             <CollectionSelection
               onChange={setCollection}
@@ -144,40 +126,37 @@ export default function NewLinkModal({ onClose }: Props) {
           ) : null}
         </div>
       </div>
-
       <div className={"mt-2"}>
         {optionsExpanded ? (
           <div className="mt-5">
-            {/* <hr className="mb-3 border border-neutral-content" /> */}
             <div className="grid sm:grid-cols-2 gap-3">
               <div>
-                <p className="mb-2">Name</p>
+                <p className="mb-2">{t("name")}</p>
                 <TextInput
                   value={link.name}
                   onChange={(e) => setLink({ ...link, name: e.target.value })}
-                  placeholder="Will be auto generated if left empty."
+                  placeholder={t("link_name_placeholder")}
                   className="bg-base-200"
                 />
               </div>
-
               <div>
-                <p className="mb-2">Tags</p>
+                <p className="mb-2">{t("tags")}</p>
                 <TagSelection
                   onChange={setTags}
-                  defaultValue={link.tags.map((e) => {
+                  defaultValue={link.tags.map((e) => ({
-                    return { label: e.name, value: e.id };
+                    label: e.name,
-                  })}
+                    value: e.id,
+                  }))}
                 />
               </div>
-
               <div className="sm:col-span-2">
-                <p className="mb-2">Description</p>
+                <p className="mb-2">{t("description")}</p>
                 <textarea
                   value={unescapeString(link.description) as string}
                   onChange={(e) =>
                     setLink({ ...link, description: e.target.value })
                   }
-                  placeholder="Notes, thoughts, etc."
+                  placeholder={t("link_description_placeholder")}
                   className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-200 focus:border-primary border-solid border outline-none duration-100"
                 />
               </div>
@@ -185,27 +164,19 @@ export default function NewLinkModal({ onClose }: Props) {
           </div>
         ) : undefined}
       </div>
-
       <div className="flex justify-between items-center mt-5">
         <div
           onClick={() => setOptionsExpanded(!optionsExpanded)}
           className={`rounded-md cursor-pointer btn btn-sm btn-ghost duration-100 flex items-center px-2 w-fit text-sm`}
         >
-          <p className="font-normal">
+          <p>{optionsExpanded ? t("hide_options") : t("more_options")}</p>
-            {optionsExpanded ? "Hide" : "More"} Options
+          <i className={`bi-chevron-${optionsExpanded ? "up" : "down"}`}></i>
-          </p>
-          <i
-            className={`${
-              optionsExpanded ? "bi-chevron-up" : "bi-chevron-down"
-            }`}
-          ></i>
         </div>
-
         <button
           className="btn btn-accent dark:border-violet-400 text-white"
           onClick={submit}
         >
-          Create Link
+          {t("create_link")}
         </button>
       </div>
     </Modal>

components/ModalContent/NewTokenModal.tsx

@@ -6,14 +6,15 @@ import Modal from "../Modal";
 import useTokenStore from "@/store/tokens";
 import { dropdownTriggerer } from "@/lib/client/utils";
 import Button from "../ui/Button";
+import { useTranslation } from "next-i18next";
 
 type Props = {
   onClose: Function;
 };
 
 export default function NewTokenModal({ onClose }: Props) {
+  const { t } = useTranslation();
   const [newToken, setNewToken] = useState("");
-
   const { addToken } = useTokenStore();
 
   const initial = {
@@ -22,21 +23,19 @@ export default function NewTokenModal({ onClose }: Props) {
   };
 
   const [token, setToken] = useState(initial as any);
-
   const [submitLoader, setSubmitLoader] = useState(false);
 
   const submit = async () => {
     if (!submitLoader) {
       setSubmitLoader(true);
-
+      const load = toast.loading(t("creating_token"));
-      const load = toast.loading("Creating...");
 
       const { ok, data } = await addToken(token);
 
       toast.dismiss(load);
 
       if (ok) {
-        toast.success(`Created!`);
+        toast.success(t("token_created"));
         setNewToken((data as any).secretKey);
       } else toast.error(data as string);
 
@@ -44,15 +43,27 @@ export default function NewTokenModal({ onClose }: Props) {
     }
   };
 
+  const getLabel = (expiry: TokenExpiry) => {
+    switch (expiry) {
+      case TokenExpiry.sevenDays:
+        return t("7_days");
+      case TokenExpiry.oneMonth:
+        return t("30_days");
+      case TokenExpiry.twoMonths:
+        return t("60_days");
+      case TokenExpiry.threeMonths:
+        return t("90_days");
+      case TokenExpiry.never:
+        return t("no_expiration");
+    }
+  };
+
   return (
     <Modal toggleModal={onClose}>
       {newToken ? (
         <div className="flex flex-col justify-center space-y-4">
-          <p className="text-xl font-thin">Access Token Created</p>
+          <p className="text-xl font-thin">{t("access_token_created")}</p>
-          <p>
+          <p>{t("token_creation_notice")}</p>
-            Your new token has been created. Please copy it and store it
-            somewhere safe. You will not be able to see it again.
-          </p>
           <TextInput
             spellCheck={false}
             value={newToken}
@@ -62,33 +73,33 @@ export default function NewTokenModal({ onClose }: Props) {
           <button
             onClick={() => {
               navigator.clipboard.writeText(newToken);
-              toast.success("Copied to clipboard!");
+              toast.success(t("copied_to_clipboard"));
             }}
             className="btn btn-primary w-fit mx-auto"
           >
-            Copy to Clipboard
+            {t("copy_to_clipboard")}
           </button>
         </div>
       ) : (
         <>
-          <p className="text-xl font-thin">Create an Access Token</p>
+          <p className="text-xl font-thin">{t("create_access_token")}</p>
 
           <div className="divider mb-3 mt-1"></div>
 
           <div className="flex sm:flex-row flex-col gap-2 items-center">
             <div className="w-full">
-              <p className="mb-2">Name</p>
+              <p className="mb-2">{t("name")}</p>
 
               <TextInput
                 value={token.name}
                 onChange={(e) => setToken({ ...token, name: e.target.value })}
-                placeholder="e.g. For the iOS shortcut"
+                placeholder={t("token_name_placeholder")}
                 className="bg-base-200"
               />
             </div>
 
             <div className="w-full sm:w-fit">
-              <p className="mb-2">Expires in</p>
+              <p className="mb-2">{t("expires_in")}</p>
 
               <div className="dropdown dropdown-bottom dropdown-end w-full">
                 <Button
@@ -98,11 +109,7 @@ export default function NewTokenModal({ onClose }: Props) {
                   onMouseDown={dropdownTriggerer}
                   className="whitespace-nowrap w-32"
                 >
-                  {token.expires === TokenExpiry.sevenDays && "7 Days"}
+                  {getLabel(token.expires)}
-                  {token.expires === TokenExpiry.oneMonth && "30 Days"}
-                  {token.expires === TokenExpiry.twoMonths && "60 Days"}
-                  {token.expires === TokenExpiry.threeMonths && "90 Days"}
-                  {token.expires === TokenExpiry.never && "No Expiration"}
                 </Button>
                 <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-xl w-full sm:w-52 mt-1">
                   <li>
@@ -124,7 +131,7 @@ export default function NewTokenModal({ onClose }: Props) {
                           });
                         }}
                       />
-                      <span className="label-text">7 Days</span>
+                      <span className="label-text">{t("7_days")}</span>
                     </label>
                   </li>
                   <li>
@@ -143,7 +150,7 @@ export default function NewTokenModal({ onClose }: Props) {
                           setToken({ ...token, expires: TokenExpiry.oneMonth });
                         }}
                       />
-                      <span className="label-text">30 Days</span>
+                      <span className="label-text">{t("30_days")}</span>
                     </label>
                   </li>
                   <li>
@@ -165,7 +172,7 @@ export default function NewTokenModal({ onClose }: Props) {
                           });
                         }}
                       />
-                      <span className="label-text">60 Days</span>
+                      <span className="label-text">{t("60_days")}</span>
                     </label>
                   </li>
                   <li>
@@ -187,7 +194,7 @@ export default function NewTokenModal({ onClose }: Props) {
                           });
                         }}
                       />
-                      <span className="label-text">90 Days</span>
+                      <span className="label-text">{t("90_days")}</span>
                     </label>
                   </li>
                   <li>
@@ -206,7 +213,7 @@ export default function NewTokenModal({ onClose }: Props) {
                           setToken({ ...token, expires: TokenExpiry.never });
                         }}
                       />
-                      <span className="label-text">No Expiration</span>
+                      <span className="label-text">{t("no_expiration")}</span>
                     </label>
                   </li>
                 </ul>
@@ -219,7 +226,7 @@ export default function NewTokenModal({ onClose }: Props) {
               className="btn btn-accent dark:border-violet-400 text-white"
               onClick={submit}
             >
-              Create Access Token
+              {t("create_token")}
             </button>
           </div>
         </>

components/ModalContent/NewUserModal.tsx

@@ -3,6 +3,7 @@ import Modal from "../Modal";
 import useUserStore from "@/store/admin/users";
 import TextInput from "../TextInput";
 import { FormEvent, useState } from "react";
+import { useTranslation, Trans } from "next-i18next";
 
 type Props = {
   onClose: Function;
@@ -18,15 +19,14 @@ type FormData = {
 const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER === "true";
 
 export default function NewUserModal({ onClose }: Props) {
+  const { t } = useTranslation();
   const { addUser } = useUserStore();
-
   const [form, setForm] = useState<FormData>({
     name: "",
     username: "",
     email: emailEnabled ? "" : undefined,
     password: "",
   });
-
   const [submitLoader, setSubmitLoader] = useState(false);
 
   async function submit(event: FormEvent<HTMLFormElement>) {
@@ -45,11 +45,11 @@ export default function NewUserModal({ onClose }: Props) {
 
       if (checkFields()) {
         if (form.password.length < 8)
-          return toast.error("Passwords must be at least 8 characters.");
+          return toast.error(t("password_length_error"));
 
         setSubmitLoader(true);
 
-        const load = toast.loading("Creating Account...");
+        const load = toast.loading(t("creating_account"));
 
         const response = await addUser(form);
 
@@ -57,29 +57,29 @@ export default function NewUserModal({ onClose }: Props) {
         setSubmitLoader(false);
 
         if (response.ok) {
-          toast.success("User Created!");
+          toast.success(t("user_created"));
           onClose();
         } else {
           toast.error(response.data as string);
         }
       } else {
-        toast.error("Please fill out all the fields.");
+        toast.error(t("fill_all_fields_error"));
       }
     }
   }
 
   return (
     <Modal toggleModal={onClose}>
-      <p className="text-xl font-thin">Create New User</p>
+      <p className="text-xl font-thin">{t("create_new_user")}</p>
 
       <div className="divider mb-3 mt-1"></div>
 
       <form onSubmit={submit}>
         <div className="grid sm:grid-cols-2 gap-3">
           <div>
-            <p className="mb-2">Display Name</p>
+            <p className="mb-2">{t("display_name")}</p>
             <TextInput
-              placeholder="Johnny"
+              placeholder={t("placeholder_johnny")}
               className="bg-base-200"
               onChange={(e) => setForm({ ...form, name: e.target.value })}
               value={form.name}
@@ -88,9 +88,9 @@ export default function NewUserModal({ onClose }: Props) {
 
           {emailEnabled ? (
             <div>
-              <p className="mb-2">Email</p>
+              <p className="mb-2">{t("email")}</p>
               <TextInput
-                placeholder="johnny@example.com"
+                placeholder={t("placeholder_email")}
                 className="bg-base-200"
                 onChange={(e) => setForm({ ...form, email: e.target.value })}
                 value={form.email}
@@ -100,13 +100,13 @@ export default function NewUserModal({ onClose }: Props) {
 
           <div>
             <p className="mb-2">
-              Username{" "}
+              {t("username")}{" "}
               {emailEnabled && (
-                <span className="text-xs text-neutral">(Optional)</span>
+                <span className="text-xs text-neutral">{t("optional")}</span>
               )}
             </p>
             <TextInput
-              placeholder="john"
+              placeholder={t("placeholder_john")}
               className="bg-base-200"
               onChange={(e) => setForm({ ...form, username: e.target.value })}
               value={form.username}
@@ -114,7 +114,7 @@ export default function NewUserModal({ onClose }: Props) {
           </div>
 
           <div>
-            <p className="mb-2">Password</p>
+            <p className="mb-2">{t("password")}</p>
             <TextInput
               placeholder="••••••••••••••"
               className="bg-base-200"
@@ -127,8 +127,10 @@ export default function NewUserModal({ onClose }: Props) {
         <div role="note" className="alert alert-note mt-5">
           <i className="bi-exclamation-triangle text-xl" />
           <span>
-            <b>Note:</b> Please make sure you inform the user that they need to
+            <Trans
-            change their password.
+              i18nKey="password_change_note"
+              components={[<b key={0} />]}
+            />
           </span>
         </div>
 
@@ -137,7 +139,7 @@ export default function NewUserModal({ onClose }: Props) {
             className="btn btn-accent dark:border-violet-400 text-white ml-auto"
             type="submit"
           >
-            Create User
+            {t("create_user")}
           </button>
         </div>
       </form>

components/ModalContent/PreservedFormatsModal.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from "react";
 import useLinkStore from "@/store/links";
 import {
-  ArchivedFormat,
   LinkIncludingShortenedCollectionAndTags,
+  ArchivedFormat,
 } from "@/types/global";
 import toast from "react-hot-toast";
 import Link from "next/link";
@@ -17,6 +17,7 @@ import {
 import PreservedFormatRow from "@/components/PreserverdFormatRow";
 import useAccountStore from "@/store/account";
 import getPublicUserData from "@/lib/client/getPublicUserData";
+import { useTranslation } from "next-i18next";
 
 type Props = {
   onClose: Function;
@@ -24,14 +25,12 @@ type Props = {
 };
 
 export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
+  const { t } = useTranslation();
   const session = useSession();
   const { getLink } = useLinkStore();
-
   const { account } = useAccountStore();
-
   const [link, setLink] =
     useState<LinkIncludingShortenedCollectionAndTags>(activeLink);
-
   const router = useRouter();
 
   let isPublic = router.pathname.startsWith("/public") ? true : undefined;
@@ -109,17 +108,16 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
         clearInterval(interval);
       }
     };
-  }, [link?.image, link?.pdf, link?.readable]);
+  }, [link, getLink]);
 
   const updateArchive = async () => {
-    const load = toast.loading("Sending request...");
+    const load = toast.loading(t("sending_request"));
 
     const response = await fetch(`/api/v1/links/${link?.id}/archive`, {
       method: "PUT",
     });
 
     const data = await response.json();
-
     toast.dismiss(load);
 
     if (response.ok) {
@@ -127,33 +125,29 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
       setLink(
         (newLink as any).response as LinkIncludingShortenedCollectionAndTags
       );
-      toast.success(`Link is being archived...`);
+      toast.success(t("link_being_archived"));
     } else toast.error(data.response);
   };
 
   return (
     <Modal toggleModal={onClose}>
-      <p className="text-xl font-thin">Preserved Formats</p>
+      <p className="text-xl font-thin">{t("preserved_formats")}</p>
-
       <div className="divider mb-2 mt-1"></div>
-
       {isReady() &&
       (screenshotAvailable(link) ||
         pdfAvailable(link) ||
         readabilityAvailable(link)) ? (
-        <p className="mb-3">
+        <p className="mb-3">{t("available_formats")}</p>
-          The following formats are available for this link:
-        </p>
       ) : (
         ""
       )}
 
-      <div className={`flex flex-col gap-3`}>
+      <div className="flex flex-col gap-3">
         {isReady() ? (
           <>
             {screenshotAvailable(link) ? (
               <PreservedFormatRow
-                name={"Screenshot"}
+                name={t("screenshot")}
                 icon={"bi-file-earmark-image"}
                 format={
                   link?.image?.endsWith("png")
@@ -164,37 +158,29 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
                 downloadable={true}
               />
             ) : undefined}
-
             {pdfAvailable(link) ? (
               <PreservedFormatRow
-                name={"PDF"}
+                name={t("pdf")}
-                icon={"bi-file-earmark-pdf"}
+                icon="bi-file-earmark-pdf"
                 format={ArchivedFormat.pdf}
                 activeLink={link}
                 downloadable={true}
               />
             ) : undefined}
-
             {readabilityAvailable(link) ? (
               <PreservedFormatRow
-                name={"Readable"}
+                name={t("readable")}
-                icon={"bi-file-earmark-text"}
+                icon="bi-file-earmark-text"
                 format={ArchivedFormat.readability}
                 activeLink={link}
               />
             ) : undefined}
           </>
         ) : (
-          <div
+          <div className="w-full h-full flex flex-col justify-center p-10 skeleton bg-base-200">
-            className={`w-full h-full flex flex-col justify-center p-10 skeleton bg-base-200`}
-          >
             <i className="bi-stack drop-shadow text-primary text-8xl mx-auto mb-5"></i>
-            <p className="text-center text-2xl">
+            <p className="text-center text-2xl">{t("preservation_in_queue")}</p>
-              Link preservation is in the queue
+            <p className="text-center text-lg">{t("check_back_later")}</p>
-            </p>
-            <p className="text-center text-lg">
-              Please check back later to see the result
-            </p>
           </div>
         )}
 
@@ -209,23 +195,21 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
               ""
             )}`}
             target="_blank"
-            className={`text-neutral duration-100 hover:opacity-60 flex gap-2 w-1/2 justify-center items-center text-sm`}
+            className="text-neutral duration-100 hover:opacity-60 flex gap-2 w-1/2 justify-center items-center text-sm"
           >
-            <p className="whitespace-nowrap">
+            <p className="whitespace-nowrap">{t("view_latest_snapshot")}</p>
-              View latest snapshot on archive.org
-            </p>
             <i className="bi-box-arrow-up-right" />
           </Link>
-          {link?.collection.ownerId === session.data?.user.id ? (
+          {link?.collection.ownerId === session.data?.user.id && (
-            <div className={`btn btn-outline`} onClick={() => updateArchive()}>
+            <div className="btn btn-outline" onClick={updateArchive}>
               <div>
-                <p>Refresh Preserved Formats</p>
+                <p>{t("refresh_preserved_formats")}</p>
                 <p className="text-xs">
-                  This deletes the current preservations
+                  {t("this_deletes_current_preservations")}
                 </p>
               </div>
             </div>
-          ) : undefined}
+          )}
         </div>
       </div>
     </Modal>

components/ModalContent/RevokeTokenModal.tsx

@@ -1,11 +1,10 @@
 import React, { useEffect, useState } from "react";
-import useLinkStore from "@/store/links";
+import useTokenStore from "@/store/tokens";
 import toast from "react-hot-toast";
 import Modal from "../Modal";
-import { useRouter } from "next/router";
-import { AccessToken } from "@prisma/client";
-import useTokenStore from "@/store/tokens";
 import Button from "../ui/Button";
+import { useTranslation } from "next-i18next";
+import { AccessToken } from "@prisma/client";
 
 type Props = {
   onClose: Function;
@@ -13,46 +12,41 @@ type Props = {
 };
 
 export default function DeleteTokenModal({ onClose, activeToken }: Props) {
+  const { t } = useTranslation();
   const [token, setToken] = useState<AccessToken>(activeToken);
 
   const { revokeToken } = useTokenStore();
-  const [submitLoader, setSubmitLoader] = useState(false);
-
-  const router = useRouter();
 
   useEffect(() => {
     setToken(activeToken);
-  }, []);
+  }, [activeToken]);
 
   const deleteLink = async () => {
-    console.log(token);
+    const load = toast.loading(t("deleting"));
-    const load = toast.loading("Deleting...");
 
     const response = await revokeToken(token.id as number);
 
     toast.dismiss(load);
 
-    response.ok && toast.success(`Token Revoked.`);
+    if (response.ok) {
+      toast.success(t("token_revoked"));
+    }
 
     onClose();
   };
 
   return (
     <Modal toggleModal={onClose}>
-      <p className="text-xl font-thin text-red-500">Revoke Token</p>
+      <p className="text-xl font-thin text-red-500">{t("revoke_token")}</p>
 
       <div className="divider mb-3 mt-1"></div>
 
       <div className="flex flex-col gap-3">
-        <p>
+        <p>{t("revoke_confirmation")}</p>
-          Are you sure you want to revoke this Access Token? Any apps or
-          services using this token will no longer be able to access Linkwarden
-          using it.
-        </p>
 
         <Button className="ml-auto" intent="destructive" onClick={deleteLink}>
           <i className="bi-trash text-xl" />
-          Revoke
+          {t("revoke")}
         </Button>
       </div>
     </Modal>

components/ModalContent/UploadFileModal.tsx

@@ -5,20 +5,19 @@ import TextInput from "@/components/TextInput";
 import unescapeString from "@/lib/client/unescapeString";
 import useCollectionStore from "@/store/collections";
 import useLinkStore from "@/store/links";
-import {
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
-  ArchivedFormat,
-  LinkIncludingShortenedCollectionAndTags,
-} from "@/types/global";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
 import toast from "react-hot-toast";
 import Modal from "../Modal";
+import { useTranslation } from "next-i18next";
 
 type Props = {
   onClose: Function;
 };
 
 export default function UploadFileModal({ onClose }: Props) {
+  const { t } = useTranslation();
   const { data } = useSession();
 
   const initial = {
@@ -40,14 +39,11 @@ export default function UploadFileModal({ onClose }: Props) {
 
   const [link, setLink] =
     useState<LinkIncludingShortenedCollectionAndTags>(initial);
-
   const [file, setFile] = useState<File>();
 
   const { uploadFile } = useLinkStore();
   const [submitLoader, setSubmitLoader] = useState(false);
-
   const [optionsExpanded, setOptionsExpanded] = useState(false);
-
   const router = useRouter();
   const { collections } = useCollectionStore();
 
@@ -74,7 +70,6 @@ export default function UploadFileModal({ onClose }: Props) {
       const currentCollection = collections.find(
         (e) => e.id == Number(router.query.id)
       );
-
       if (
         currentCollection &&
         currentCollection.ownerId &&
@@ -91,30 +86,26 @@ export default function UploadFileModal({ onClose }: Props) {
     } else
       setLink({
         ...initial,
-        collection: {
+        collection: { name: "Unorganized", ownerId: data?.user.id as number },
-          name: "Unorganized",
-          ownerId: data?.user.id as number,
-        },
       });
-  }, []);
+  }, [router, collections]);
 
   const submit = async () => {
     if (!submitLoader && file) {
       setSubmitLoader(true);
-
+      const load = toast.loading(t("creating"));
-      const load = toast.loading("Creating...");
 
       const response = await uploadFile(link, file);
 
       toast.dismiss(load);
-
       if (response.ok) {
-        toast.success(`Created!`);
+        toast.success(t("created"));
         onClose();
-      } else toast.error(response.data as string);
+      } else {
+        toast.error(response.data as string);
+      }
 
       setSubmitLoader(false);
-
       return response;
     }
   };
@@ -122,12 +113,12 @@ export default function UploadFileModal({ onClose }: Props) {
   return (
     <Modal toggleModal={onClose}>
       <div className="flex gap-2 items-start">
-        <p className="text-xl font-thin">Upload File</p>
+        <p className="text-xl font-thin">{t("upload_file")}</p>
       </div>
       <div className="divider mb-3 mt-1"></div>
       <div className="grid grid-flow-row-dense sm:grid-cols-5 gap-3">
         <div className="sm:col-span-3 col-span-5">
-          <p className="mb-2">File</p>
+          <p className="mb-2">{t("file")}</p>
           <label className="btn h-10 btn-sm w-full border border-neutral-content hover:border-neutral-content flex justify-between">
             <input
               type="file"
@@ -137,12 +128,13 @@ export default function UploadFileModal({ onClose }: Props) {
             />
           </label>
           <p className="text-xs font-semibold mt-2">
-            PDF, PNG, JPG (Up to {process.env.NEXT_PUBLIC_MAX_FILE_SIZE || 30}
+            {t("file_types", {
-            MB)
+              size: process.env.NEXT_PUBLIC_MAX_FILE_SIZE || 30,
+            })}
           </p>
         </div>
         <div className="sm:col-span-2 col-span-5">
-          <p className="mb-2">Collection</p>
+          <p className="mb-2">{t("collection")}</p>
           {link.collection.name ? (
             <CollectionSelection
               onChange={setCollection}
@@ -156,36 +148,34 @@ export default function UploadFileModal({ onClose }: Props) {
       </div>
       {optionsExpanded ? (
         <div className="mt-5">
-          {/* <hr className="mb-3 border border-neutral-content" /> */}
           <div className="grid sm:grid-cols-2 gap-3">
             <div>
-              <p className="mb-2">Name</p>
+              <p className="mb-2">{t("name")}</p>
               <TextInput
                 value={link.name}
                 onChange={(e) => setLink({ ...link, name: e.target.value })}
-                placeholder="e.g. Example Link"
+                placeholder={t("example_link")}
                 className="bg-base-200"
               />
             </div>
-
             <div>
-              <p className="mb-2">Tags</p>
+              <p className="mb-2">{t("tags")}</p>
               <TagSelection
                 onChange={setTags}
-                defaultValue={link.tags.map((e) => {
+                defaultValue={link.tags.map((e) => ({
-                  return { label: e.name, value: e.id };
+                  label: e.name,
-                })}
+                  value: e.id,
+                }))}
               />
             </div>
-
             <div className="sm:col-span-2">
-              <p className="mb-2">Description</p>
+              <p className="mb-2">{t("description")}</p>
               <textarea
                 value={unescapeString(link.description) as string}
                 onChange={(e) =>
                   setLink({ ...link, description: e.target.value })
                 }
-                placeholder="Will be auto generated if nothing is provided."
+                placeholder={t("description_placeholder")}
                 className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-200 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100"
               />
             </div>
@@ -197,14 +187,15 @@ export default function UploadFileModal({ onClose }: Props) {
           onClick={() => setOptionsExpanded(!optionsExpanded)}
           className={`rounded-md cursor-pointer btn btn-sm btn-ghost duration-100 flex items-center px-2 w-fit text-sm`}
         >
-          <p>{optionsExpanded ? "Hide" : "More"} Options</p>
+          <p>
+            {optionsExpanded ? t("hide") : t("more")} {t("options")}
+          </p>
         </div>
-
         <button
           className="btn btn-accent dark:border-violet-400 text-white"
           onClick={submit}
         >
-          Upload File
+          {t("upload_file")}
         </button>
       </div>
     </Modal>

components/Navbar.tsx

@@ -11,8 +11,10 @@ import UploadFileModal from "./ModalContent/UploadFileModal";
 import { dropdownTriggerer } from "@/lib/client/utils";
 import MobileNavigation from "./MobileNavigation";
 import ProfileDropdown from "./ProfileDropdown";
+import { useTranslation } from "next-i18next";
 
 export default function Navbar() {
+  const { t } = useTranslation();
   const router = useRouter();
 
   const [sidebar, setSidebar] = useState(false);
@@ -49,7 +51,7 @@ export default function Navbar() {
         <ToggleDarkMode className="hidden sm:inline-grid" />
 
         <div className="dropdown dropdown-end sm:inline-block hidden">
-          <div className="tooltip tooltip-bottom" data-tip="Create New...">
+          <div className="tooltip tooltip-bottom" data-tip={t("create_new")}>
             <div
               tabIndex={0}
               role="button"
@@ -74,7 +76,7 @@ export default function Navbar() {
                 tabIndex={0}
                 role="button"
               >
-                New Link
+                {t("new_link")}
               </div>
             </li>
             <li>
@@ -86,7 +88,7 @@ export default function Navbar() {
                 tabIndex={0}
                 role="button"
               >
-                Upload File
+                {t("upload_file")}
               </div>
             </li>
             <li>
@@ -98,7 +100,7 @@ export default function Navbar() {
                 tabIndex={0}
                 role="button"
               >
-                New Collection
+                {t("new_collection")}
               </div>
             </li>
           </ul>

components/NoLinksFound.tsx

@@ -1,11 +1,13 @@
 import React, { useState } from "react";
 import NewLinkModal from "./ModalContent/NewLinkModal";
+import { useTranslation } from "next-i18next";
 
 type Props = {
   text?: string;
 };
 
 export default function NoLinksFound({ text }: Props) {
+  const { t } = useTranslation();
   const [newLinkModal, setNewLinkModal] = useState(false);
 
   return (
@@ -23,9 +25,7 @@ export default function NoLinksFound({ text }: Props) {
       <p className="text-center text-xl sm:text-2xl">
         {text || "You haven't created any Links Here"}
       </p>
-      <p className="text-center text-sm sm:text-base">
+      <p className="text-center text-sm sm:text-base">{t("start_journey")}</p>
-        Start your journey by creating a new Link!
-      </p>
       <div className="text-center w-full mt-4">
         <div
           onClick={() => {
@@ -35,7 +35,7 @@ export default function NoLinksFound({ text }: Props) {
         >
           <i className="bi-plus-lg text-3xl left-2 group-hover:ml-[4rem] absolute duration-100"></i>
           <span className="group-hover:opacity-0 text-right w-full duration-100">
-            Create New Link
+            {t("create_new_link")}
           </span>
         </div>
       </div>

components/PreserverdFormatRow.tsx

@@ -4,7 +4,6 @@ import {
   ArchivedFormat,
   LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
-import toast from "react-hot-toast";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useSession } from "next-auth/react";

components/ProfileDropdown.tsx

@@ -4,17 +4,16 @@ import ProfilePhoto from "./ProfilePhoto";
 import useAccountStore from "@/store/account";
 import Link from "next/link";
 import { signOut } from "next-auth/react";
+import { useTranslation } from "next-i18next";
 
 export default function ProfileDropdown() {
+  const { t } = useTranslation();
   const { settings, updateSettings } = useLocalSettingsStore();
   const { account } = useAccountStore();
 
   const handleToggle = () => {
-    if (settings.theme === "dark") {
+    const newTheme = settings.theme === "dark" ? "light" : "dark";
-      updateSettings({ theme: "light" });
+    updateSettings({ theme: newTheme });
-    } else {
-      updateSettings({ theme: "dark" });
-    }
   };
 
   return (
@@ -38,7 +37,7 @@ export default function ProfileDropdown() {
             tabIndex={0}
             role="button"
           >
-            Settings
+            {t("settings")}
           </Link>
         </li>
         <li className="block sm:hidden">
@@ -50,7 +49,9 @@ export default function ProfileDropdown() {
             tabIndex={0}
             role="button"
           >
-            Switch to {settings.theme === "light" ? "Dark" : "Light"}
+            {t("switch_to", {
+              theme: settings.theme === "light" ? t("dark") : t("light"),
+            })}
           </div>
         </li>
         <li>
@@ -62,7 +63,7 @@ export default function ProfileDropdown() {
             tabIndex={0}
             role="button"
           >
-            Logout
+            {t("logout")}
           </div>
         </li>
       </ul>

components/RadioButton.tsx

@@ -16,14 +16,6 @@ export default function RadioButton({ label, state, onClick }: Props) {
         checked={state}
         onChange={onClick}
       />
-      {/*<FontAwesomeIcon*/}
-      {/*  icon={faCircleCheck}*/}
-      {/*  className="w-5 h-5 text-primary peer-checked:block hidden"*/}
-      {/*/>*/}
-      {/*<FontAwesomeIcon*/}
-      {/*  icon={faCircle}*/}
-      {/*  className="w-5 h-5 text-primary peer-checked:hidden block"*/}
-      {/*/>*/}
       <span className="rounded select-none">{label}</span>
     </label>
   );

components/ReadableView.tsx

@@ -15,6 +15,7 @@ import { useRouter } from "next/router";
 import React, { useEffect, useMemo, useState } from "react";
 import LinkActions from "./LinkViews/LinkComponents/LinkActions";
 import useCollectionStore from "@/store/collections";
+import { useTranslation } from "next-i18next";
 
 type LinkContent = {
   title: string;
@@ -33,6 +34,7 @@ type Props = {
 };
 
 export default function ReadableView({ link }: Props) {
+  const { t } = useTranslation();
   const [linkContent, setLinkContent] = useState<LinkContent>();
   const [imageError, setImageError] = useState<boolean>(false);
   const [colorPalette, setColorPalette] = useState<RGBColor[]>();
@@ -271,11 +273,9 @@ export default function ReadableView({ link }: Props) {
               <path d="m14.12 6.576 1.715.858c.22.11.22.424 0 .534l-7.568 3.784a.598.598 0 0 1-.534 0L.165 7.968a.299.299 0 0 1 0-.534l1.716-.858 5.317 2.659c.505.252 1.1.252 1.604 0l5.317-2.659z" />
             </svg>
             <p className="text-center text-2xl">
-              The Link preservation is currently in the queue
+              {t("link_preservation_in_queue")}
-            </p>
-            <p className="text-center text-lg mt-2">
-              Please check back later to see the result
             </p>
+            <p className="text-center text-lg mt-2">{t("check_back_later")}</p>
           </div>
         )}
       </div>

components/SettingsSidebar.tsx

@@ -1,20 +1,18 @@
-import useCollectionStore from "@/store/collections";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
+import { useTranslation } from "next-i18next";
 
 export default function SettingsSidebar({ className }: { className?: string }) {
+  const { t } = useTranslation();
   const LINKWARDEN_VERSION = process.env.version;
 
-  const { collections } = useCollectionStore();
-
   const router = useRouter();
-
   const [active, setActive] = useState("");
 
   useEffect(() => {
     setActive(router.asPath);
-  }, [router, collections]);
+  }, [router]);
 
   return (
     <div
@@ -26,71 +24,69 @@ export default function SettingsSidebar({ className }: { className?: string }) {
         <Link href="/settings/account">
           <div
             className={`${
-              active === `/settings/account`
+              active === "/settings/account"
                 ? "bg-primary/20"
                 : "hover:bg-neutral/20"
             } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
             <i className="bi-person text-primary text-2xl"></i>
-
+            <p className="truncate w-full pr-7">{t("account")}</p>
-            <p className="truncate w-full pr-7">Account</p>
           </div>
         </Link>
 
         <Link href="/settings/preference">
           <div
             className={`${
-              active === `/settings/preference`
+              active === "/settings/preference"
                 ? "bg-primary/20"
                 : "hover:bg-neutral/20"
             } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
             <i className="bi-sliders text-primary text-2xl"></i>
-
+            <p className="truncate w-full pr-7">{t("preference")}</p>
-            <p className="truncate w-full pr-7">Preference</p>
           </div>
         </Link>
 
         <Link href="/settings/access-tokens">
           <div
             className={`${
-              active === `/settings/access-tokens`
+              active === "/settings/access-tokens"
                 ? "bg-primary/20"
                 : "hover:bg-neutral/20"
             } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
             <i className="bi-key text-primary text-2xl"></i>
-            <p className="truncate w-full pr-7">Access Tokens</p>
+            <p className="truncate w-full pr-7">{t("access_tokens")}</p>
           </div>
         </Link>
 
         <Link href="/settings/password">
           <div
             className={`${
-              active === `/settings/password`
+              active === "/settings/password"
                 ? "bg-primary/20"
                 : "hover:bg-neutral/20"
             } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
             <i className="bi-lock text-primary text-2xl"></i>
-            <p className="truncate w-full pr-7">Password</p>
+            <p className="truncate w-full pr-7">{t("password")}</p>
           </div>
         </Link>
 
-        {process.env.NEXT_PUBLIC_STRIPE ? (
+        {process.env.NEXT_PUBLIC_STRIPE && (
           <Link href="/settings/billing">
             <div
               className={`${
-                active === `/settings/billing`
+                active === "/settings/billing"
                   ? "bg-primary/20"
                   : "hover:bg-neutral/20"
               } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
             >
               <i className="bi-credit-card text-primary text-xl"></i>
-              <p className="truncate w-full pr-7">Billing</p>
+              <p className="truncate w-full pr-7">{t("billing")}</p>
             </div>
           </Link>
-        ) : undefined}
+        )}
       </div>
 
       <div className="flex flex-col gap-1">
@@ -99,42 +95,38 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           target="_blank"
           className="text-neutral text-sm ml-2 hover:opacity-50 duration-100"
         >
-          Linkwarden {LINKWARDEN_VERSION}
+          {t("linkwarden_version", { version: LINKWARDEN_VERSION })}
         </Link>
         <Link href="https://docs.linkwarden.app" target="_blank">
           <div
             className={`hover:bg-neutral/20 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
             <i className="bi-question-circle text-primary text-xl"></i>
-
+            <p className="truncate w-full pr-7">{t("help")}</p>
-            <p className="truncate w-full pr-7">Help</p>
           </div>
         </Link>
-
         <Link href="https://github.com/linkwarden/linkwarden" target="_blank">
           <div
             className={`hover:bg-neutral/20 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
             <i className="bi-github text-primary text-xl"></i>
-            <p className="truncate w-full pr-7">GitHub</p>
+            <p className="truncate w-full pr-7">{t("github")}</p>
           </div>
         </Link>
-
         <Link href="https://twitter.com/LinkwardenHQ" target="_blank">
           <div
             className={`hover:bg-neutral/20 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
             <i className="bi-twitter-x text-primary text-xl"></i>
-            <p className="truncate w-full pr-7">Twitter</p>
+            <p className="truncate w-full pr-7">{t("twitter")}</p>
           </div>
         </Link>
-
         <Link href="https://fosstodon.org/@linkwarden" target="_blank">
           <div
             className={`hover:bg-neutral/20 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
             <i className="bi-mastodon text-primary text-xl"></i>
-            <p className="truncate w-full pr-7">Mastodon</p>
+            <p className="truncate w-full pr-7">{t("mastodon")}</p>
           </div>
         </Link>
       </div>

components/Sidebar.tsx

@@ -6,8 +6,10 @@ import { useEffect, useState } from "react";
 import { Disclosure, Transition } from "@headlessui/react";
 import SidebarHighlightLink from "@/components/SidebarHighlightLink";
 import CollectionListing from "@/components/CollectionListing";
+import { useTranslation } from "next-i18next";
 
 export default function Sidebar({ className }: { className?: string }) {
+  const { t } = useTranslation();
   const [tagDisclosure, setTagDisclosure] = useState<boolean>(() => {
     const storedValue = localStorage.getItem("tagDisclosure");
     return storedValue ? storedValue === "true" : true;
@@ -82,7 +84,7 @@ export default function Sidebar({ className }: { className?: string }) {
           }}
           className="flex items-center justify-between w-full text-left mb-2 pl-2 font-bold text-neutral mt-5"
         >
-          <p className="text-sm">Collections</p>
+          <p className="text-sm">{t("collections")}</p>
           <i
             className={`bi-chevron-down ${
               collectionDisclosure ? "rotate-reverse" : "rotate"
@@ -109,7 +111,7 @@ export default function Sidebar({ className }: { className?: string }) {
           }}
           className="flex items-center justify-between w-full text-left mb-2 pl-2 font-bold text-neutral mt-5"
         >
-          <p className="text-sm">Tags</p>
+          <p className="text-sm">{t("tags")}</p>
           <i
             className={`bi-chevron-down  ${
               tagDisclosure ? "rotate-reverse" : "rotate"
@@ -152,7 +154,7 @@ export default function Sidebar({ className }: { className?: string }) {
                 className={`duration-100 py-1 px-2 flex items-center gap-2 w-full rounded-md h-8 capitalize`}
               >
                 <p className="text-neutral text-xs font-semibold truncate w-full pr-7">
-                  You Have No Tags...
+                  {t("you_have_no_tags")}
                 </p>
               </div>
             )}

components/SortDropdown.tsx

@@ -1,13 +1,15 @@
 import React, { Dispatch, SetStateAction } from "react";
 import { Sort } from "@/types/global";
 import { dropdownTriggerer } from "@/lib/client/utils";
+import { TFunction } from "i18next";
 
 type Props = {
   sortBy: Sort;
   setSort: Dispatch<SetStateAction<Sort>>;
+  t: TFunction<"translation", undefined>;
 };
 
-export default function SortDropdown({ sortBy, setSort }: Props) {
+export default function SortDropdown({ sortBy, setSort, t }: Props) {
   return (
     <div className="dropdown dropdown-bottom dropdown-end">
       <div
@@ -29,13 +31,10 @@ export default function SortDropdown({ sortBy, setSort }: Props) {
               type="radio"
               name="sort-radio"
               className="radio checked:bg-primary"
-              value="Date (Newest First)"
               checked={sortBy === Sort.DateNewestFirst}
-              onChange={() => {
+              onChange={() => setSort(Sort.DateNewestFirst)}
-                setSort(Sort.DateNewestFirst);
-              }}
             />
-            <span className="label-text">Date (Newest First)</span>
+            <span className="label-text">{t("date_newest_first")}</span>
           </label>
         </li>
         <li>
@@ -48,11 +47,10 @@ export default function SortDropdown({ sortBy, setSort }: Props) {
               type="radio"
               name="sort-radio"
               className="radio checked:bg-primary"
-              value="Date (Oldest First)"
               checked={sortBy === Sort.DateOldestFirst}
               onChange={() => setSort(Sort.DateOldestFirst)}
             />
-            <span className="label-text">Date (Oldest First)</span>
+            <span className="label-text">{t("date_oldest_first")}</span>
           </label>
         </li>
         <li>
@@ -65,11 +63,10 @@ export default function SortDropdown({ sortBy, setSort }: Props) {
               type="radio"
               name="sort-radio"
               className="radio checked:bg-primary"
-              value="Name (A-Z)"
               checked={sortBy === Sort.NameAZ}
               onChange={() => setSort(Sort.NameAZ)}
             />
-            <span className="label-text">Name (A-Z)</span>
+            <span className="label-text">{t("name_az")}</span>
           </label>
         </li>
         <li>
@@ -82,11 +79,10 @@ export default function SortDropdown({ sortBy, setSort }: Props) {
               type="radio"
               name="sort-radio"
               className="radio checked:bg-primary"
-              value="Name (Z-A)"
               checked={sortBy === Sort.NameZA}
               onChange={() => setSort(Sort.NameZA)}
             />
-            <span className="label-text">Name (Z-A)</span>
+            <span className="label-text">{t("name_za")}</span>
           </label>
         </li>
         <li>
@@ -99,11 +95,10 @@ export default function SortDropdown({ sortBy, setSort }: Props) {
               type="radio"
               name="sort-radio"
               className="radio checked:bg-primary"
-              value="Description (A-Z)"
               checked={sortBy === Sort.DescriptionAZ}
               onChange={() => setSort(Sort.DescriptionAZ)}
             />
-            <span className="label-text">Description (A-Z)</span>
+            <span className="label-text">{t("description_az")}</span>
           </label>
         </li>
         <li>
@@ -116,11 +111,10 @@ export default function SortDropdown({ sortBy, setSort }: Props) {
               type="radio"
               name="sort-radio"
               className="radio checked:bg-primary"
-              value="Description (Z-A)"
               checked={sortBy === Sort.DescriptionZA}
               onChange={() => setSort(Sort.DescriptionZA)}
             />
-            <span className="label-text">Description (Z-A)</span>
+            <span className="label-text">{t("description_za")}</span>
           </label>
         </li>
       </ul>

components/ToggleDarkMode.tsx

@@ -1,11 +1,13 @@
 import useLocalSettingsStore from "@/store/localSettings";
 import { useEffect, useState } from "react";
+import { useTranslation } from "next-i18next";
 
 type Props = {
   className?: string;
 };
 
 export default function ToggleDarkMode({ className }: Props) {
+  const { t } = useTranslation();
   const { settings, updateSettings } = useLocalSettingsStore();
 
   const [theme, setTheme] = useState(localStorage.getItem("theme"));
@@ -21,7 +23,9 @@ export default function ToggleDarkMode({ className }: Props) {
   return (
     <div
       className="tooltip tooltip-bottom"
-      data-tip={`Switch to ${settings.theme === "light" ? "Dark" : "Light"}`}
+      data-tip={t("switch_to", {
+        theme: settings.theme === "light" ? "Dark" : "Light",
+      })}
     >
       <label
         className={`swap swap-rotate btn-square text-neutral btn btn-ghost btn-sm ${className}`}

components/UserListing.tsx

@@ -0,0 +1,87 @@
+import DeleteUserModal from "@/components/ModalContent/DeleteUserModal";
+import { User as U } from "@prisma/client";
+import { TFunction } from "i18next";
+
+interface User extends U {
+  subscriptions: {
+    active: boolean;
+  };
+}
+
+type UserModal = {
+  isOpen: boolean;
+  userId: number | null;
+};
+
+const UserListing = (
+  users: User[],
+  deleteUserModal: UserModal,
+  setDeleteUserModal: Function,
+  t: TFunction<"translation", undefined>
+) => {
+  return (
+    <div className="overflow-x-auto whitespace-nowrap w-full">
+      <table className="table w-full">
+        <thead>
+          <tr>
+            <th></th>
+            <th>{t("username")}</th>
+            {process.env.NEXT_PUBLIC_EMAIL_PROVIDER === "true" && (
+              <th>{t("email")}</th>
+            )}
+            {process.env.NEXT_PUBLIC_STRIPE === "true" && (
+              <th>{t("subscribed")}</th>
+            )}
+            <th>{t("created_at")}</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          {users.map((user, index) => (
+            <tr
+              key={index}
+              className="group hover:bg-neutral-content hover:bg-opacity-30 duration-100"
+            >
+              <td className="text-primary">{index + 1}</td>
+              <td>
+                {user.username ? user.username : <b>{t("not_available")}</b>}
+              </td>
+              {process.env.NEXT_PUBLIC_EMAIL_PROVIDER === "true" && (
+                <td>{user.email}</td>
+              )}
+              {process.env.NEXT_PUBLIC_STRIPE === "true" && (
+                <td>
+                  {user.subscriptions?.active ? (
+                    <i className="bi bi-check text-green-500"></i>
+                  ) : (
+                    <i className="bi bi-x text-red-500"></i>
+                  )}
+                </td>
+              )}
+              <td>{new Date(user.createdAt).toLocaleString()}</td>
+              <td className="relative">
+                <button
+                  className="btn btn-sm btn-ghost duration-100 hidden group-hover:block absolute z-20 right-[0.35rem] top-[0.35rem]"
+                  onClick={() =>
+                    setDeleteUserModal({ isOpen: true, userId: user.id })
+                  }
+                >
+                  <i className="bi bi-trash"></i>
+                </button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+
+      {deleteUserModal.isOpen && deleteUserModal.userId ? (
+        <DeleteUserModal
+          onClose={() => setDeleteUserModal({ isOpen: false, userId: null })}
+          userId={deleteUserModal.userId}
+        />
+      ) : null}
+    </div>
+  );
+};
+
+export default UserListing;

layouts/AuthRedirect.tsx

@@ -1,7 +1,6 @@
 import { ReactNode, useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import { useSession } from "next-auth/react";
-import Loader from "../components/Loader";
 import useInitialData from "@/hooks/useInitialData";
 import useAccountStore from "@/store/account";
 
@@ -42,6 +41,7 @@ export default function AuthRedirect({ children }: Props) {
       { path: "/tags", isProtected: true },
       { path: "/preserved", isProtected: true },
       { path: "/admin", isProtected: true },
+      { path: "/search", isProtected: true },
     ];
 
     if (isPublicPage) {

layouts/CenteredForm.tsx

@@ -1,7 +1,8 @@
 import useLocalSettingsStore from "@/store/localSettings";
 import Image from "next/image";
 import Link from "next/link";
-import React, { ReactNode, useEffect } from "react";
+import React, { ReactNode } from "react";
+import { Trans } from "next-i18next";
 
 interface Props {
   text?: string;
@@ -40,11 +41,13 @@ export default function CenteredForm({
         ) : undefined}
         {children}
         <p className="text-center text-xs text-neutral mb-5">
-          © {new Date().getFullYear()}{" "}
+          <Trans
-          <Link href="https://linkwarden.app" className="font-semibold">
+            values={{ date: new Date().getFullYear() }}
-            Linkwarden
+            i18nKey="all_rights_reserved"
-          </Link>
+            components={[
-          . All rights reserved.
+              <Link href="https://linkwarden.app" className="font-semibold" />,
+            ]}
+          />
         </p>
       </div>
     </div>

lib/api/controllers/links/bulk/deleteLinksById.ts

@@ -1,7 +1,6 @@
 import { prisma } from "@/lib/api/db";
 import { UsersAndCollections } from "@prisma/client";
 import getPermission from "@/lib/api/getPermission";
-import removeFile from "@/lib/api/storage/removeFile";
 import { removeFiles } from "@/lib/api/manageLinkFiles";
 
 export default async function deleteLinksById(

lib/api/controllers/users/userId/updateUserById.ts

@@ -5,6 +5,7 @@ import removeFile from "@/lib/api/storage/removeFile";
 import createFile from "@/lib/api/storage/createFile";
 import createFolder from "@/lib/api/storage/createFolder";
 import sendChangeEmailVerificationRequest from "@/lib/api/sendChangeEmailVerificationRequest";
+import { i18n } from "next-i18next.config";
 
 const emailEnabled =
   process.env.EMAIL_FROM && process.env.EMAIL_SERVER ? true : false;
@@ -204,6 +205,7 @@ export default async function updateUserById(
       collectionOrder: data.collectionOrder.filter(
         (value, index, self) => self.indexOf(value) === index
       ),
+      locale: i18n.locales.includes(data.locale) ? data.locale : "en",
       archiveAsScreenshot: data.archiveAsScreenshot,
       archiveAsPDF: data.archiveAsPDF,
       archiveAsWaybackMachine: data.archiveAsWaybackMachine,

lib/client/addMemberToCollection.ts

@@ -1,12 +1,14 @@
 import { CollectionIncludingMembersAndLinkCount, Member } from "@/types/global";
 import getPublicUserData from "./getPublicUserData";
 import { toast } from "react-hot-toast";
+import { TFunction } from "i18next";
 
 const addMemberToCollection = async (
   ownerUsername: string,
   memberUsername: string,
   collection: CollectionIncludingMembersAndLinkCount,
-  setMember: (newMember: Member) => null | undefined
+  setMember: (newMember: Member) => null | undefined,
+  t: TFunction<"translation", undefined>
 ) => {
   const checkIfMemberAlreadyExists = collection.members.find((e) => {
     const username = (e.user.username || "").toLowerCase();
@@ -39,9 +41,9 @@ const addMemberToCollection = async (
         },
       });
     }
-  } else if (checkIfMemberAlreadyExists) toast.error("User already exists.");
+  } else if (checkIfMemberAlreadyExists) toast.error(t("user_already_member"));
   else if (memberUsername.trim().toLowerCase() === ownerUsername.toLowerCase())
-    toast.error("You are already the collection owner.");
+    toast.error(t("you_are_already_collection_owner"));
 };
 
 export default addMemberToCollection;

lib/client/getServerSideProps.ts

@@ -0,0 +1,57 @@
+import { GetServerSideProps } from "next";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { i18n } from "next-i18next.config";
+import { getToken } from "next-auth/jwt";
+import { prisma } from "../api/db";
+
+const getServerSideProps: GetServerSideProps = async (ctx) => {
+  const acceptLanguageHeader = ctx.req.headers["accept-language"];
+  const availableLanguages = i18n.locales;
+
+  const token = await getToken({ req: ctx.req });
+
+  if (token) {
+    const user = await prisma.user.findUnique({
+      where: {
+        id: token.id,
+      },
+    });
+
+    if (user) {
+      return {
+        props: {
+          ...(await serverSideTranslations(user.locale ?? "en", ["common"])),
+        },
+      };
+    }
+  }
+
+  const acceptedLanguages = acceptLanguageHeader
+    ?.split(",")
+    .map((lang) => lang.split(";")[0]);
+
+  let bestMatch = acceptedLanguages?.find((lang) =>
+    availableLanguages.includes(lang)
+  );
+
+  if (!bestMatch) {
+    acceptedLanguages?.some((acceptedLang) => {
+      const partialMatch = availableLanguages.find((lang) =>
+        lang.startsWith(acceptedLang)
+      );
+      if (partialMatch) {
+        bestMatch = partialMatch;
+        return true;
+      }
+      return false;
+    });
+  }
+
+  return {
+    props: {
+      ...(await serverSideTranslations(bestMatch ?? "en", ["common"])),
+    },
+  };
+};
+
+export default getServerSideProps;

next-i18next.config.js

@@ -0,0 +1,8 @@
+/** @type {import('next-i18next').UserConfig} */
+module.exports = {
+  i18n: {
+    defaultLocale: "en",
+    locales: ["en"],
+  },
+  reloadOnPrerender: process.env.NODE_ENV === "development",
+};

next.config.js

@@ -1,7 +1,9 @@
 /** @type {import('next').NextConfig} */
 const { version } = require("./package.json");
+const { i18n } = require("./next-i18next.config");
 
 const nextConfig = {
+  i18n,
   reactStrictMode: true,
   images: {
     // For fetching the favicons

package.json

@@ -50,12 +50,14 @@
     "framer-motion": "^10.16.4",
     "handlebars": "^4.7.8",
     "himalaya": "^1.1.0",
+    "i18next": "^23.11.5",
     "jimp": "^0.22.10",
     "jsdom": "^22.1.0",
     "lottie-web": "^5.12.2",
     "micro": "^10.0.1",
     "next": "13.4.12",
     "next-auth": "^4.22.1",
+    "next-i18next": "^15.3.0",
     "node-fetch": "^2.7.0",
     "nodemailer": "^6.9.3",
     "playwright": "^1.43.1",
@@ -63,6 +65,7 @@
     "react-colorful": "^5.6.1",
     "react-dom": "18.2.0",
     "react-hot-toast": "^2.4.1",
+    "react-i18next": "^14.1.2",
     "react-image-file-resizer": "^0.4.8",
     "react-masonry-css": "^1.0.16",
     "react-select": "^5.7.4",

pages/_app.tsx

@@ -9,9 +9,11 @@ import toast from "react-hot-toast";
 import { Toaster, ToastBar } from "react-hot-toast";
 import { Session } from "next-auth";
 import { isPWA } from "@/lib/client/utils";
-import useInitialData from "@/hooks/useInitialData";
+// import useInitialData from "@/hooks/useInitialData";
+import { appWithTranslation } from "next-i18next";
+import nextI18nextConfig from "../next-i18next.config";
 
-export default function App({
+function App({
   Component,
   pageProps,
 }: AppProps<{
@@ -96,6 +98,8 @@ export default function App({
   );
 }
 
+export default appWithTranslation(App);
+
 // function GetData({ children }: { children: React.ReactNode }) {
 //   const status = useInitialData();
 //   return typeof window !== "undefined" && status !== "loading" ? (

pages/admin.tsx

@@ -3,7 +3,10 @@ import NewUserModal from "@/components/ModalContent/NewUserModal";
 import useUserStore from "@/store/admin/users";
 import { User as U } from "@prisma/client";
 import Link from "next/link";
-import { Fragment, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
+import { useTranslation } from "next-i18next";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+import UserListing from "@/components/UserListing";
 
 interface User extends U {
   subscriptions: {
@@ -17,6 +20,8 @@ type UserModal = {
 };
 
 export default function Admin() {
+  const { t } = useTranslation();
+
   const { users, setUsers } = useUserStore();
 
   const [searchQuery, setSearchQuery] = useState("");
@@ -44,7 +49,7 @@ export default function Admin() {
             <i className="bi-chevron-left text-xl"></i>
           </Link>
           <p className="capitalize text-3xl font-thin inline">
-            User Administration
+            {t("user_administration")}
           </p>
         </div>
 
@@ -60,7 +65,7 @@ export default function Admin() {
             <input
               id="search-box"
               type="text"
-              placeholder={"Search for Users"}
+              placeholder={t("search_users")}
               value={searchQuery}
               onChange={(e) => {
                 setSearchQuery(e.target.value);
@@ -91,13 +96,13 @@ export default function Admin() {
       <div className="divider my-3"></div>
 
       {filteredUsers && filteredUsers.length > 0 && searchQuery !== "" ? (
-        UserListing(filteredUsers, deleteUserModal, setDeleteUserModal)
+        UserListing(filteredUsers, deleteUserModal, setDeleteUserModal, t)
       ) : searchQuery !== "" ? (
-        <p>No users found with the given search query.</p>
+        <p>{t("no_user_found_in_search")}</p>
       ) : users && users.length > 0 ? (
-        UserListing(users, deleteUserModal, setDeleteUserModal)
+        UserListing(users, deleteUserModal, setDeleteUserModal, t)
       ) : (
-        <p>No users found.</p>
+        <p>{t("no_users_found")}</p>
       )}
 
       {newUserModal ? (
@@ -107,68 +112,4 @@ export default function Admin() {
   );
 }
 
-const UserListing = (
+export { getServerSideProps };
-  users: User[],
-  deleteUserModal: UserModal,
-  setDeleteUserModal: Function
-) => {
-  return (
-    <div className="overflow-x-auto whitespace-nowrap w-full">
-      <table className="table w-full">
-        <thead>
-          <tr>
-            <th></th>
-            <th>Username</th>
-            {process.env.NEXT_PUBLIC_EMAIL_PROVIDER === "true" && (
-              <th>Email</th>
-            )}
-            {process.env.NEXT_PUBLIC_STRIPE === "true" && <th>Subscribed</th>}
-            <th>Created At</th>
-            <th></th>
-          </tr>
-        </thead>
-        <tbody>
-          {users.map((user, index) => (
-            <tr
-              key={index}
-              className="group hover:bg-neutral-content hover:bg-opacity-30 duration-100"
-            >
-              <td className="text-primary">{index + 1}</td>
-              <td>{user.username ? user.username : <b>N/A</b>}</td>
-              {process.env.NEXT_PUBLIC_EMAIL_PROVIDER === "true" && (
-                <td>{user.email}</td>
-              )}
-              {process.env.NEXT_PUBLIC_STRIPE === "true" && (
-                <td>
-                  {user.subscriptions?.active ? (
-                    JSON.stringify(user.subscriptions?.active)
-                  ) : (
-                    <b>N/A</b>
-                  )}
-                </td>
-              )}
-              <td>{new Date(user.createdAt).toLocaleString()}</td>
-              <td className="relative">
-                <button
-                  className="btn btn-sm btn-ghost duration-100 hidden group-hover:block absolute z-20 right-[0.35rem] top-[0.35rem]"
-                  onClick={() =>
-                    setDeleteUserModal({ isOpen: true, userId: user.id })
-                  }
-                >
-                  <i className="bi bi-trash"></i>
-                </button>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-
-      {deleteUserModal.isOpen && deleteUserModal.userId ? (
-        <DeleteUserModal
-          onClose={() => setDeleteUserModal({ isOpen: false, userId: null })}
-          userId={deleteUserModal.userId}
-        />
-      ) : null}
-    </div>
-  );
-};

pages/api/v1/auth/[...nextauth].ts

@@ -114,44 +114,7 @@ if (
 
         if (!user) throw Error("Invalid credentials.");
         else if (!user?.emailVerified && emailEnabled) {
-          const identifier = user?.email as string;
+          throw Error("Email not verified.");
-          const token = randomBytes(32).toString("hex");
-          const url = `${
-            process.env.NEXTAUTH_URL
-          }/callback/email?token=${token}&email=${encodeURIComponent(
-            identifier
-          )}`;
-          const from = process.env.EMAIL_FROM as string;
-
-          const recentVerificationRequestsCount =
-            await prisma.verificationToken.count({
-              where: {
-                identifier,
-                createdAt: {
-                  gt: new Date(new Date().getTime() - 1000 * 60 * 5), // 5 minutes
-                },
-              },
-            });
-
-          if (recentVerificationRequestsCount >= 4)
-            throw Error("Too many requests. Please try again later.");
-
-          sendVerificationRequest({
-            identifier,
-            url,
-            from,
-            token,
-          });
-
-          await prisma.verificationToken.create({
-            data: {
-              identifier,
-              token,
-              expires: new Date(Date.now() + 24 * 3600 * 1000), // 1 day
-            },
-          });
-
-          throw Error("Email not verified. Verification email sent.");
         }
 
         let passwordMatches: boolean = false;

pages/auth/reset-password.tsx

@@ -1,10 +1,12 @@
-import AccentSubmitButton from "@/components/ui/Button";
+import Button from "@/components/ui/Button";
 import TextInput from "@/components/TextInput";
 import CenteredForm from "@/layouts/CenteredForm";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { FormEvent, useState } from "react";
 import { toast } from "react-hot-toast";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+import { useTranslation } from "next-i18next";
 
 interface FormData {
   password: string;
@@ -12,8 +14,8 @@ interface FormData {
 }
 
 export default function ResetPassword() {
+  const { t } = useTranslation();
   const [submitLoader, setSubmitLoader] = useState(false);
-
   const router = useRouter();
 
   const [form, setForm] = useState<FormData>({
@@ -34,7 +36,7 @@ export default function ResetPassword() {
     ) {
       setSubmitLoader(true);
 
-      const load = toast.loading("Sending password recovery link...");
+      const load = toast.loading(t("sending_password_recovery_link"));
 
       const response = await fetch("/api/v1/auth/reset-password", {
         method: "POST",
@@ -46,6 +48,7 @@ export default function ResetPassword() {
 
       const data = await response.json();
 
+      toast.dismiss(load);
       if (response.ok) {
         toast.success(data.response);
         setRequestSent(true);
@@ -53,11 +56,9 @@ export default function ResetPassword() {
         toast.error(data.response);
       }
 
-      toast.dismiss(load);
-
       setSubmitLoader(false);
     } else {
-      toast.error("Please fill out all the fields.");
+      toast.error(t("please_fill_all_fields"));
     }
   }
 
@@ -66,22 +67,18 @@ export default function ResetPassword() {
       <form onSubmit={submit}>
         <div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-base-200 rounded-2xl shadow-md border border-neutral-content">
           <p className="text-3xl text-center font-extralight">
-            {requestSent ? "Password Updated!" : "Reset Password"}
+            {requestSent ? t("password_updated") : t("reset_password")}
           </p>
 
           <div className="divider my-0"></div>
 
           {!requestSent ? (
             <>
+              <p>{t("enter_email_for_new_password")}</p>
               <div>
-                <p>
+                <p className="text-sm w-fit font-semibold mb-1">
-                  Enter your email so we can send you a link to create a new
+                  {t("new_password")}
-                  password.
                 </p>
-              </div>
-              <div>
-                <p className="text-sm w-fit font-semibold mb-1">New Password</p>
-
                 <TextInput
                   autoFocus
                   type="password"
@@ -93,24 +90,22 @@ export default function ResetPassword() {
                   }
                 />
               </div>
-
+              <Button
-              <AccentSubmitButton
                 type="submit"
                 intent="accent"
                 className="mt-2"
                 size="full"
                 loading={submitLoader}
               >
-                Update Password
+                {t("update_password")}
-              </AccentSubmitButton>
+              </Button>
             </>
           ) : (
             <>
-              <p>Your password has been successfully updated.</p>
+              <p>{t("password_successfully_updated")}</p>
-
               <div className="mx-auto w-fit mt-3">
                 <Link className="font-semibold" href="/login">
-                  Back to Login
+                  {t("back_to_login")}
                 </Link>
               </div>
             </>
@@ -120,3 +115,5 @@ export default function ResetPassword() {
     </CenteredForm>
   );
 }
+
+export { getServerSideProps };

pages/auth/verify-email.tsx

@@ -2,9 +2,12 @@ import { signOut } from "next-auth/react";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 import toast from "react-hot-toast";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+import { useTranslation } from "next-i18next";
 
 const VerifyEmail = () => {
   const router = useRouter();
+  const { t } = useTranslation();
 
   useEffect(() => {
     const token = router.query.token;
@@ -19,12 +22,12 @@ const VerifyEmail = () => {
       method: "POST",
     }).then((res) => {
       if (res.ok) {
-        toast.success("Email verified. Signing out..");
+        toast.success(t("email_verified_signing_out"));
         setTimeout(() => {
           signOut();
         }, 3000);
       } else {
-        toast.error("Invalid token.");
+        toast.error(t("invalid_token"));
       }
     });
 
@@ -35,3 +38,5 @@ const VerifyEmail = () => {
 };
 
 export default VerifyEmail;
+
+export { getServerSideProps };

pages/collections/[id].tsx

@@ -9,7 +9,6 @@ import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
 import MainLayout from "@/layouts/MainLayout";
 import ProfilePhoto from "@/components/ProfilePhoto";
-import SortDropdown from "@/components/SortDropdown";
 import useLinks from "@/hooks/useLinks";
 import usePermissions from "@/hooks/usePermissions";
 import NoLinksFound from "@/components/NoLinksFound";
@@ -19,23 +18,22 @@ import getPublicUserData from "@/lib/client/getPublicUserData";
 import EditCollectionModal from "@/components/ModalContent/EditCollectionModal";
 import EditCollectionSharingModal from "@/components/ModalContent/EditCollectionSharingModal";
 import DeleteCollectionModal from "@/components/ModalContent/DeleteCollectionModal";
-import ViewDropdown from "@/components/ViewDropdown";
 import CardView from "@/components/LinkViews/Layouts/CardView";
 import ListView from "@/components/LinkViews/Layouts/ListView";
 import { dropdownTriggerer } from "@/lib/client/utils";
 import NewCollectionModal from "@/components/ModalContent/NewCollectionModal";
-import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal";
-import toast from "react-hot-toast";
-import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
 import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+import { useTranslation } from "next-i18next";
+import LinkListOptions from "@/components/LinkListOptions";
 
 export default function Index() {
+  const { t } = useTranslation();
   const { settings } = useLocalSettingsStore();
 
   const router = useRouter();
 
-  const { links, selectedLinks, setSelectedLinks, deleteLinksById } =
+  const { links } = useLinkStore();
-    useLinkStore();
   const { collections } = useCollectionStore();
 
   const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
@@ -84,9 +82,6 @@ export default function Index() {
     };
 
     fetchOwner();
-
-    // When the collection changes, reset the selected links
-    setSelectedLinks([]);
   }, [activeCollection]);
 
   const [editCollectionModal, setEditCollectionModal] = useState(false);
@@ -94,8 +89,6 @@ export default function Index() {
   const [editCollectionSharingModal, setEditCollectionSharingModal] =
     useState(false);
   const [deleteCollectionModal, setDeleteCollectionModal] = useState(false);
-  const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
-  const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
   const [editMode, setEditMode] = useState(false);
 
   useEffect(() => {
@@ -115,35 +108,6 @@ export default function Index() {
   // @ts-ignore
   const LinkComponent = linkView[viewMode];
 
-  const handleSelectAll = () => {
-    if (selectedLinks.length === links.length) {
-      setSelectedLinks([]);
-    } else {
-      setSelectedLinks(links.map((link) => link));
-    }
-  };
-
-  const bulkDeleteLinks = async () => {
-    const load = toast.loading(
-      `Deleting ${selectedLinks.length} Link${
-        selectedLinks.length > 1 ? "s" : ""
-      }...`
-    );
-
-    const response = await deleteLinksById(
-      selectedLinks.map((link) => link.id as number)
-    );
-
-    toast.dismiss(load);
-
-    response.ok &&
-      toast.success(
-        `Deleted ${selectedLinks.length} Link${
-          selectedLinks.length > 1 ? "s" : ""
-        }!`
-      );
-  };
-
   return (
     <MainLayout>
       <div
@@ -187,7 +151,7 @@ export default function Index() {
                         setEditCollectionModal(true);
                       }}
                     >
-                      Edit Collection Info
+                      {t("edit_collection_info")}
                     </div>
                   </li>
                 )}
@@ -201,8 +165,8 @@ export default function Index() {
                     }}
                   >
                     {permissions === true
-                      ? "Share and Collaborate"
+                      ? t("share_and_collaborate")
-                      : "View Team"}
+                      : t("view_team")}
                   </div>
                 </li>
                 {permissions === true && (
@@ -215,7 +179,7 @@ export default function Index() {
                         setNewCollectionModal(true);
                       }}
                     >
-                      Create Sub-Collection
+                      {t("create_subcollection")}
                     </div>
                   </li>
                 )}
@@ -229,8 +193,8 @@ export default function Index() {
                     }}
                   >
                     {permissions === true
-                      ? "Delete Collection"
+                      ? t("delete_collection")
-                      : "Leave Collection"}
+                      : t("leave_collection")}
                   </div>
                 </li>
               </ul>
@@ -272,11 +236,23 @@ export default function Index() {
                   </div>
                 ) : null}
               </div>
-              <p className="text-neutral text-sm font-semibold">
+
-                By {collectionOwner.name}
+              <p className="text-neutral text-sm">
                 {activeCollection.members.length > 0 &&
-                  ` and ${activeCollection.members.length} others`}
+                activeCollection.members.length === 1
-                .
+                  ? t("by_author_and_other", {
+                      author: collectionOwner.name,
+                      count: activeCollection.members.length,
+                    })
+                  : activeCollection.members.length > 0 &&
+                      activeCollection.members.length !== 1
+                    ? t("by_author_and_others", {
+                        author: collectionOwner.name,
+                        count: activeCollection.members.length,
+                      })
+                    : t("by_author", {
+                        author: collectionOwner.name,
+                      })}
               </p>
             </div>
           </div>
@@ -313,84 +289,37 @@ export default function Index() {
 
         <div className="divider my-0"></div>
 
-        <div className="flex justify-between items-center gap-5">
+        <LinkListOptions
-          <p>Showing {activeCollection?._count?.links} results</p>
+          t={t}
-          <div className="flex items-center gap-2">
+          viewMode={viewMode}
-            {links.length > 0 &&
+          setViewMode={setViewMode}
-              (permissions === true ||
+          sortBy={sortBy}
-                permissions?.canUpdate ||
+          setSortBy={setSortBy}
-                permissions?.canDelete) && (
+          editMode={
-                <div
+            permissions === true ||
-                  role="button"
+            permissions?.canUpdate ||
-                  onClick={() => {
+            permissions?.canDelete
-                    setEditMode(!editMode);
+              ? editMode
-                    setSelectedLinks([]);
+              : undefined
-                  }}
+          }
-                  className={`btn btn-square btn-sm btn-ghost ${
+          setEditMode={
-                    editMode
+            permissions === true ||
-                      ? "bg-primary/20 hover:bg-primary/20"
+            permissions?.canUpdate ||
-                      : "hover:bg-neutral/20"
+            permissions?.canDelete
-                  }`}
+              ? setEditMode
-                >
+              : undefined
-                  <i className="bi-pencil-fill text-neutral text-xl"></i>
+          }
-                </div>
+        >
-              )}
+          <p>
-            <SortDropdown sortBy={sortBy} setSort={setSortBy} />
+            {activeCollection?._count?.links === 1
-            <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
+              ? t("showing_count_result", {
-          </div>
+                  count: activeCollection?._count?.links,
-        </div>
+                })
-
+              : t("showing_count_results", {
-        {editMode && links.length > 0 && (
+                  count: activeCollection?._count?.links,
-          <div className="w-full flex justify-between items-center min-h-[32px]">
+                })}
-            {links.length > 0 && (
+          </p>
-              <div className="flex gap-3 ml-3">
+        </LinkListOptions>
-                <input
-                  type="checkbox"
-                  className="checkbox checkbox-primary"
-                  onChange={() => handleSelectAll()}
-                  checked={
-                    selectedLinks.length === links.length && links.length > 0
-                  }
-                />
-                {selectedLinks.length > 0 ? (
-                  <span>
-                    {selectedLinks.length}{" "}
-                    {selectedLinks.length === 1 ? "link" : "links"} selected
-                  </span>
-                ) : (
-                  <span>Nothing selected</span>
-                )}
-              </div>
-            )}
-            <div className="flex gap-3">
-              <button
-                onClick={() => setBulkEditLinksModal(true)}
-                className="btn btn-sm btn-accent text-white w-fit ml-auto"
-                disabled={
-                  selectedLinks.length === 0 ||
-                  !(permissions === true || permissions?.canUpdate)
-                }
-              >
-                Edit
-              </button>
-              <button
-                onClick={(e) => {
-                  (document?.activeElement as HTMLElement)?.blur();
-                  e.shiftKey
-                    ? bulkDeleteLinks()
-                    : setBulkDeleteLinksModal(true);
-                }}
-                className="btn btn-sm bg-red-500 hover:bg-red-400 text-white w-fit ml-auto"
-                disabled={
-                  selectedLinks.length === 0 ||
-                  !(permissions === true || permissions?.canDelete)
-                }
-              >
-                Delete
-              </button>
-            </div>
-          </div>
-        )}
 
         {links.some((e) => e.collectionId === Number(router.query.id)) ? (
           <LinkComponent
@@ -429,22 +358,10 @@ export default function Index() {
               activeCollection={activeCollection}
             />
           )}
-          {bulkDeleteLinksModal && (
-            <BulkDeleteLinksModal
-              onClose={() => {
-                setBulkDeleteLinksModal(false);
-              }}
-            />
-          )}
-          {bulkEditLinksModal && (
-            <BulkEditLinksModal
-              onClose={() => {
-                setBulkEditLinksModal(false);
-              }}
-            />
-          )}
         </>
       )}
     </MainLayout>
   );
 }
+
+export { getServerSideProps };

pages/collections/index.tsx

@@ -8,8 +8,11 @@ import { Sort } from "@/types/global";
 import useSort from "@/hooks/useSort";
 import NewCollectionModal from "@/components/ModalContent/NewCollectionModal";
 import PageHeader from "@/components/PageHeader";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+import { useTranslation } from "next-i18next";
 
 export default function Collections() {
+  const { t } = useTranslation();
   const { collections } = useCollectionStore();
   const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
   const [sortedCollections, setSortedCollections] = useState(collections);
@@ -26,13 +29,13 @@ export default function Collections() {
         <div className="flex justify-between">
           <PageHeader
             icon={"bi-folder"}
-            title={"Collections"}
+            title={t("collections")}
-            description={"Collections you own"}
+            description={t("collections_you_own")}
           />
 
           <div className="flex gap-3 justify-end">
             <div className="relative mt-2">
-              <SortDropdown sortBy={sortBy} setSort={setSortBy} />
+              <SortDropdown sortBy={sortBy} setSort={setSortBy} t={t} />
             </div>
           </div>
         </div>
@@ -48,7 +51,9 @@ export default function Collections() {
             className="card card-compact shadow-md hover:shadow-none duration-200 border border-neutral-content p-5 bg-base-200 self-stretch min-h-[12rem] rounded-2xl cursor-pointer flex flex-col gap-4 justify-center items-center group btn"
             onClick={() => setNewCollectionModal(true)}
           >
-            <p className="group-hover:opacity-0 duration-100">New Collection</p>
+            <p className="group-hover:opacity-0 duration-100">
+              {t("new_collection")}
+            </p>
             <i className="bi-plus-lg text-5xl group-hover:text-7xl group-hover:-mt-6 text-primary drop-shadow duration-100"></i>
           </div>
         </div>
@@ -57,8 +62,8 @@ export default function Collections() {
           <>
             <PageHeader
               icon={"bi-folder"}
-              title={"Other Collections"}
+              title={t("other_collections")}
-              description={"Shared collections you're a member of"}
+              description={t("other_collections_desc")}
             />
 
             <div className="grid min-[1900px]:grid-cols-4 2xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
@@ -77,3 +82,5 @@ export default function Collections() {
     </MainLayout>
   );
 }
+
+export { getServerSideProps };

pages/confirmation.tsx

@@ -1,19 +1,25 @@
 import CenteredForm from "@/layouts/CenteredForm";
 import { signIn } from "next-auth/react";
-import Link from "next/link";
 import { useRouter } from "next/router";
 import React, { useState } from "react";
 import toast from "react-hot-toast";
+import { useTranslation } from "next-i18next";
+import getServerSideProps from "@/lib/client/getServerSideProps";
 
 export default function EmailConfirmaion() {
   const router = useRouter();
 
+  const { t } = useTranslation();
+
   const [submitLoader, setSubmitLoader] = useState(false);
 
   const resend = async () => {
+    if (submitLoader) return;
+    else if (!router.query.email) return;
+
     setSubmitLoader(true);
 
-    const load = toast.loading("Authenticating...");
+    const load = toast.loading(t("authenticating"));
 
     const res = await signIn("email", {
       email: decodeURIComponent(router.query.email as string),
@@ -25,29 +31,28 @@ export default function EmailConfirmaion() {
 
     setSubmitLoader(false);
 
-    toast.success("Verification email sent.");
+    toast.success(t("verification_email_sent"));
   };
 
   return (
     <CenteredForm>
       <div className="p-4 max-w-[30rem] min-w-80 w-full rounded-2xl shadow-md mx-auto border border-neutral-content bg-base-200">
         <p className="text-center text-2xl sm:text-3xl font-extralight mb-2 ">
-          Please check your Email
+          {t("check_your_email")}
         </p>
 
         <div className="divider my-3"></div>
 
-        <p>
+        <p>{t("verification_email_sent_desc")}</p>
-          A sign in link has been sent to your email address. If you don't see
-          the email, check your spam folder.
-        </p>
 
         <div className="mx-auto w-fit mt-3">
           <div className="btn btn-ghost btn-sm" onClick={resend}>
-            Resend Email
+            {t("resend_email")}
           </div>
         </div>
       </div>
     </CenteredForm>
   );
 }
+
+export { getServerSideProps };

pages/dashboard.tsx

@@ -17,8 +17,11 @@ import ListView from "@/components/LinkViews/Layouts/ListView";
 import ViewDropdown from "@/components/ViewDropdown";
 import { dropdownTriggerer } from "@/lib/client/utils";
 import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+import { useTranslation } from "next-i18next";
 
 export default function Dashboard() {
+  const { t } = useTranslation();
   const { collections } = useCollectionStore();
   const { links } = useLinkStore();
   const { tags } = useTagStore();
@@ -117,7 +120,7 @@ export default function Dashboard() {
           <PageHeader
             icon={"bi-house "}
             title={"Dashboard"}
-            description={"A brief overview of your data"}
+            description={t("dashboard_desc")}
           />
           <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
         </div>
@@ -125,7 +128,7 @@ export default function Dashboard() {
         <div>
           <div className="flex justify-evenly flex-col xl:flex-row xl:items-center gap-2 xl:w-full h-full rounded-2xl p-8 border border-neutral-content bg-base-200">
             <DashboardItem
-              name={numberOfLinks === 1 ? "Link" : "Links"}
+              name={numberOfLinks === 1 ? t("link") : t("links")}
               value={numberOfLinks}
               icon={"bi-link-45deg"}
             />
@@ -133,7 +136,9 @@ export default function Dashboard() {
             <div className="divider xl:divider-horizontal"></div>
 
             <DashboardItem
-              name={collections.length === 1 ? "Collection" : "Collections"}
+              name={
+                collections.length === 1 ? t("collection") : t("collections")
+              }
               value={collections.length}
               icon={"bi-folder"}
             />
@@ -141,7 +146,7 @@ export default function Dashboard() {
             <div className="divider xl:divider-horizontal"></div>
 
             <DashboardItem
-              name={tags.length === 1 ? "Tag" : "Tags"}
+              name={tags.length === 1 ? t("tag") : t("tags")}
               value={tags.length}
               icon={"bi-hash"}
             />
@@ -152,15 +157,15 @@ export default function Dashboard() {
           <div className="flex gap-2 items-center">
             <PageHeader
               icon={"bi-clock-history"}
-              title={"Recent"}
+              title={t("recent")}
-              description={"Recently added Links"}
+              description={t("recent_links_desc")}
             />
           </div>
           <Link
             href="/links"
             className="flex items-center text-sm text-black/75 dark:text-white/75 gap-2 cursor-pointer"
           >
-            View All
+            {t("view_all")}
             <i className="bi-chevron-right text-sm"></i>
           </Link>
         </div>
@@ -176,11 +181,10 @@ export default function Dashboard() {
           ) : (
             <div className="sky-shadow flex flex-col justify-center h-full border border-solid border-neutral-content w-full mx-auto p-10 rounded-2xl bg-base-200">
               <p className="text-center text-2xl">
-                View Your Recently Added Links Here!
+                {t("view_added_links_here")}
               </p>
               <p className="text-center mx-auto max-w-96 w-fit text-neutral text-sm mt-2">
-                This section will view your latest added Links across every
+                {t("view_added_links_here_desc")}
-                Collections you have access to.
               </p>
 
               <div className="text-center w-full mt-4 flex flex-wrap gap-4 justify-center">
@@ -192,7 +196,7 @@ export default function Dashboard() {
                 >
                   <i className="bi-plus-lg text-xl"></i>
                   <span className="group-hover:opacity-0 text-right">
-                    Add New Link
+                    {t("add_link")}
                   </span>
                 </div>
 
@@ -205,7 +209,7 @@ export default function Dashboard() {
                     id="import-dropdown"
                   >
                     <i className="bi-cloud-upload text-xl duration-100"></i>
-                    <p>Import From</p>
+                    <p>{t("import_links")}</p>
                   </div>
                   <ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
                     <li>
@@ -213,9 +217,9 @@ export default function Dashboard() {
                         tabIndex={0}
                         role="button"
                         htmlFor="import-linkwarden-file"
-                        title="JSON File"
+                        title={t("from_linkwarden")}
                       >
-                        From Linkwarden
+                        {t("from_linkwarden")}
                         <input
                           type="file"
                           name="photo"
@@ -233,9 +237,9 @@ export default function Dashboard() {
                         tabIndex={0}
                         role="button"
                         htmlFor="import-html-file"
-                        title="HTML File"
+                        title={t("from_html")}
                       >
-                        From Bookmarks HTML file
+                        {t("from_html")}
                         <input
                           type="file"
                           name="photo"
@@ -248,6 +252,26 @@ export default function Dashboard() {
                         />
                       </label>
                     </li>
+                    <li>
+                      <label
+                        tabIndex={0}
+                        role="button"
+                        htmlFor="import-wallabag-file"
+                        title={t("from_wallabag")}
+                      >
+                        {t("from_wallabag")}
+                        <input
+                          type="file"
+                          name="photo"
+                          id="import-wallabag-file"
+                          accept=".json"
+                          className="hidden"
+                          onChange={(e) =>
+                            importBookmarks(e, MigrationFormat.wallabag)
+                          }
+                        />
+                      </label>
+                    </li>
                   </ul>
                 </div>
               </div>
@@ -259,15 +283,15 @@ export default function Dashboard() {
           <div className="flex gap-2 items-center">
             <PageHeader
               icon={"bi-pin-angle"}
-              title={"Pinned"}
+              title={t("pinned")}
-              description={"Your pinned Links"}
+              description={t("pinned_links_desc")}
             />
           </div>
           <Link
             href="/links/pinned"
             className="flex items-center text-sm text-black/75 dark:text-white/75 gap-2 cursor-pointer"
           >
-            View All
+            {t("view_all")}
             <i className="bi-chevron-right text-sm "></i>
           </Link>
         </div>
@@ -291,12 +315,10 @@ export default function Dashboard() {
             >
               <i className="bi-pin mx-auto text-6xl text-primary"></i>
               <p className="text-center text-2xl">
-                Pin Your Favorite Links Here!
+                {t("pin_favorite_links_here")}
               </p>
               <p className="text-center mx-auto max-w-96 w-fit text-neutral text-sm">
-                You can Pin your favorite Links by clicking on the three dots on
+                {t("pin_favorite_links_here_desc")}
-                each Link and clicking{" "}
-                <span className="font-semibold">Pin to Dashboard</span>.
               </p>
             </div>
           )}
@@ -308,3 +330,5 @@ export default function Dashboard() {
     </MainLayout>
   );
 }
+
+export { getServerSideProps };

pages/forgot.tsx

@@ -1,15 +1,18 @@
-import AccentSubmitButton from "@/components/ui/Button";
+import Button from "@/components/ui/Button";
 import TextInput from "@/components/TextInput";
 import CenteredForm from "@/layouts/CenteredForm";
 import Link from "next/link";
 import { FormEvent, useState } from "react";
 import { toast } from "react-hot-toast";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+import { useTranslation } from "next-i18next";
 
 interface FormData {
   email: string;
 }
 
 export default function Forgot() {
+  const { t } = useTranslation();
   const [submitLoader, setSubmitLoader] = useState(false);
 
   const [form, setForm] = useState<FormData>({
@@ -43,7 +46,7 @@ export default function Forgot() {
     if (form.email !== "") {
       setSubmitLoader(true);
 
-      const load = toast.loading("Sending password recovery link...");
+      const load = toast.loading(t("sending_password_link"));
 
       await submitRequest();
 
@@ -51,7 +54,7 @@ export default function Forgot() {
 
       setSubmitLoader(false);
     } else {
-      toast.error("Please fill out all the fields.");
+      toast.error(t("fill_all_fields"));
     }
   }
 
@@ -60,7 +63,7 @@ export default function Forgot() {
       <form onSubmit={sendConfirmation}>
         <div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-base-200 rounded-2xl shadow-md border border-neutral-content">
           <p className="text-3xl text-center font-extralight">
-            {isEmailSent ? "Email Sent!" : "Forgot Password?"}
+            {isEmailSent ? t("email_sent") : t("forgot_password")}
           </p>
 
           <div className="divider my-0"></div>
@@ -68,13 +71,10 @@ export default function Forgot() {
           {!isEmailSent ? (
             <>
               <div>
-                <p>
+                <p>{t("password_email_prompt")}</p>
-                  Enter your email so we can send you a link to create a new
-                  password.
-                </p>
               </div>
               <div>
-                <p className="text-sm w-fit font-semibold mb-1">Email</p>
+                <p className="text-sm w-fit font-semibold mb-1">{t("email")}</p>
 
                 <TextInput
                   autoFocus
@@ -86,26 +86,23 @@ export default function Forgot() {
                 />
               </div>
 
-              <AccentSubmitButton
+              <Button
                 type="submit"
                 intent="accent"
                 className="mt-2"
                 size="full"
                 loading={submitLoader}
               >
-                Send Login Link
+                {t("send_reset_link")}
-              </AccentSubmitButton>
+              </Button>
             </>
           ) : (
-            <p>
+            <p>{t("reset_email_sent_desc")}</p>
-              Check your email for a link to reset your password. If it doesn’t
-              appear within a few minutes, check your spam folder.
-            </p>
           )}
 
           <div className="mx-auto w-fit mt-2">
             <Link className="font-semibold" href="/login">
-              Back to Login
+              {t("back_to_login")}
             </Link>
           </div>
         </div>
@@ -113,3 +110,5 @@ export default function Forgot() {
     </CenteredForm>
   );
 }
+
+export { getServerSideProps };

pages/index.tsx

@@ -1,3 +1,10 @@
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+
 export default function Index() {
-  return null;
+  const router = useRouter();
+
+  useEffect(() => {
+    router.push("/login");
+  }, []);
 }

pages/links/index.tsx

@@ -1,24 +1,21 @@
 import NoLinksFound from "@/components/NoLinksFound";
-import SortDropdown from "@/components/SortDropdown";
 import useLinks from "@/hooks/useLinks";
 import MainLayout from "@/layouts/MainLayout";
 import useLinkStore from "@/store/links";
 import React, { useEffect, useState } from "react";
 import PageHeader from "@/components/PageHeader";
-import { Member, Sort, ViewMode } from "@/types/global";
+import { Sort, ViewMode } from "@/types/global";
-import ViewDropdown from "@/components/ViewDropdown";
 import CardView from "@/components/LinkViews/Layouts/CardView";
 import ListView from "@/components/LinkViews/Layouts/ListView";
-import useCollectivePermissions from "@/hooks/useCollectivePermissions";
-import toast from "react-hot-toast";
-import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal";
-import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
 import { useRouter } from "next/router";
 import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
+import LinkListOptions from "@/components/LinkListOptions";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+import { useTranslation } from "next-i18next";
 
 export default function Links() {
-  const { links, selectedLinks, deleteLinksById, setSelectedLinks } =
+  const { t } = useTranslation();
-    useLinkStore();
+  const { links } = useLinkStore();
 
   const [viewMode, setViewMode] = useState<string>(
     localStorage.getItem("viewMode") || ViewMode.Card
@@ -27,49 +24,14 @@ export default function Links() {
 
   const router = useRouter();
 
-  const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
-  const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
   const [editMode, setEditMode] = useState(false);
 
   useEffect(() => {
     if (editMode) return setEditMode(false);
   }, [router]);
 
-  const collectivePermissions = useCollectivePermissions(
-    selectedLinks.map((link) => link.collectionId as number)
-  );
-
   useLinks({ sort: sortBy });
 
-  const handleSelectAll = () => {
-    if (selectedLinks.length === links.length) {
-      setSelectedLinks([]);
-    } else {
-      setSelectedLinks(links.map((link) => link));
-    }
-  };
-
-  const bulkDeleteLinks = async () => {
-    const load = toast.loading(
-      `Deleting ${selectedLinks.length} Link${
-        selectedLinks.length > 1 ? "s" : ""
-      }...`
-    );
-
-    const response = await deleteLinksById(
-      selectedLinks.map((link) => link.id as number)
-    );
-
-    toast.dismiss(load);
-
-    response.ok &&
-      toast.success(
-        `Deleted ${selectedLinks.length} Link${
-          selectedLinks.length > 1 ? "s" : ""
-        }!`
-      );
-  };
-
   const linkView = {
     [ViewMode.Card]: CardView,
     [ViewMode.List]: ListView,
@@ -82,113 +44,30 @@ export default function Links() {
   return (
     <MainLayout>
       <div className="p-5 flex flex-col gap-5 w-full h-full">
-        <div className="flex justify-between">
+        <LinkListOptions
+          t={t}
+          viewMode={viewMode}
+          setViewMode={setViewMode}
+          sortBy={sortBy}
+          setSortBy={setSortBy}
+          editMode={editMode}
+          setEditMode={setEditMode}
+        >
           <PageHeader
             icon={"bi-link-45deg"}
-            title={"All Links"}
+            title={t("all_links")}
-            description={"Links from every Collections"}
+            description={t("all_links_desc")}
           />
-
+        </LinkListOptions>
-          <div className="mt-2 flex items-center justify-end gap-2">
-            {links.length > 0 && (
-              <div
-                role="button"
-                onClick={() => {
-                  setEditMode(!editMode);
-                  setSelectedLinks([]);
-                }}
-                className={`btn btn-square btn-sm btn-ghost ${
-                  editMode
-                    ? "bg-primary/20 hover:bg-primary/20"
-                    : "hover:bg-neutral/20"
-                }`}
-              >
-                <i className="bi-pencil-fill text-neutral text-xl"></i>
-              </div>
-            )}
-            <SortDropdown sortBy={sortBy} setSort={setSortBy} />
-            <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
-          </div>
-        </div>
-
-        {editMode && links.length > 0 && (
-          <div className="w-full flex justify-between items-center min-h-[32px]">
-            {links.length > 0 && (
-              <div className="flex gap-3 ml-3">
-                <input
-                  type="checkbox"
-                  className="checkbox checkbox-primary"
-                  onChange={() => handleSelectAll()}
-                  checked={
-                    selectedLinks.length === links.length && links.length > 0
-                  }
-                />
-                {selectedLinks.length > 0 ? (
-                  <span>
-                    {selectedLinks.length}{" "}
-                    {selectedLinks.length === 1 ? "link" : "links"} selected
-                  </span>
-                ) : (
-                  <span>Nothing selected</span>
-                )}
-              </div>
-            )}
-            <div className="flex gap-3">
-              <button
-                onClick={() => setBulkEditLinksModal(true)}
-                className="btn btn-sm btn-accent text-white w-fit ml-auto"
-                disabled={
-                  selectedLinks.length === 0 ||
-                  !(
-                    collectivePermissions === true ||
-                    collectivePermissions?.canUpdate
-                  )
-                }
-              >
-                Edit
-              </button>
-              <button
-                onClick={(e) => {
-                  (document?.activeElement as HTMLElement)?.blur();
-                  e.shiftKey
-                    ? bulkDeleteLinks()
-                    : setBulkDeleteLinksModal(true);
-                }}
-                className="btn btn-sm bg-red-500 hover:bg-red-400 text-white w-fit ml-auto"
-                disabled={
-                  selectedLinks.length === 0 ||
-                  !(
-                    collectivePermissions === true ||
-                    collectivePermissions?.canDelete
-                  )
-                }
-              >
-                Delete
-              </button>
-            </div>
-          </div>
-        )}
 
         {links[0] ? (
           <LinkComponent editMode={editMode} links={links} />
         ) : (
-          <NoLinksFound text="You Haven't Created Any Links Yet" />
+          <NoLinksFound text={t("you_have_not_added_any_links")} />
         )}
       </div>
-      {bulkDeleteLinksModal && (
-        <BulkDeleteLinksModal
-          onClose={() => {
-            setBulkDeleteLinksModal(false);
-          }}
-        />
-      )}
-      {bulkEditLinksModal && (
-        <BulkEditLinksModal
-          onClose={() => {
-            setBulkEditLinksModal(false);
-          }}
-        />
-      )}
     </MainLayout>
   );
 }
+
+export { getServerSideProps };

pages/links/pinned.tsx

@@ -1,23 +1,21 @@
-import SortDropdown from "@/components/SortDropdown";
 import useLinks from "@/hooks/useLinks";
 import MainLayout from "@/layouts/MainLayout";
 import useLinkStore from "@/store/links";
 import React, { useEffect, useState } from "react";
 import PageHeader from "@/components/PageHeader";
 import { Sort, ViewMode } from "@/types/global";
-import ViewDropdown from "@/components/ViewDropdown";
 import CardView from "@/components/LinkViews/Layouts/CardView";
 import ListView from "@/components/LinkViews/Layouts/ListView";
-import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal";
-import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
-import useCollectivePermissions from "@/hooks/useCollectivePermissions";
-import toast from "react-hot-toast";
 import { useRouter } from "next/router";
 import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
+import { useTranslation } from "next-i18next";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+import LinkListOptions from "@/components/LinkListOptions";
 
 export default function PinnedLinks() {
-  const { links, selectedLinks, deleteLinksById, setSelectedLinks } =
+  const { t } = useTranslation();
-    useLinkStore();
+
+  const { links } = useLinkStore();
 
   const [viewMode, setViewMode] = useState<string>(
     localStorage.getItem("viewMode") || ViewMode.Card
@@ -27,47 +25,12 @@ export default function PinnedLinks() {
   useLinks({ sort: sortBy, pinnedOnly: true });
 
   const router = useRouter();
-  const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
-  const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
   const [editMode, setEditMode] = useState(false);
 
   useEffect(() => {
     if (editMode) return setEditMode(false);
   }, [router]);
 
-  const collectivePermissions = useCollectivePermissions(
-    selectedLinks.map((link) => link.collectionId as number)
-  );
-
-  const handleSelectAll = () => {
-    if (selectedLinks.length === links.length) {
-      setSelectedLinks([]);
-    } else {
-      setSelectedLinks(links.map((link) => link));
-    }
-  };
-
-  const bulkDeleteLinks = async () => {
-    const load = toast.loading(
-      `Deleting ${selectedLinks.length} Link${
-        selectedLinks.length > 1 ? "s" : ""
-      }...`
-    );
-
-    const response = await deleteLinksById(
-      selectedLinks.map((link) => link.id as number)
-    );
-
-    toast.dismiss(load);
-
-    response.ok &&
-      toast.success(
-        `Deleted ${selectedLinks.length} Link${
-          selectedLinks.length > 1 ? "s" : ""
-        }!`
-      );
-  };
-
   const linkView = {
     [ViewMode.Card]: CardView,
     [ViewMode.List]: ListView,
@@ -80,91 +43,21 @@ export default function PinnedLinks() {
   return (
     <MainLayout>
       <div className="p-5 flex flex-col gap-5 w-full h-full">
-        <div className="flex justify-between">
+        <LinkListOptions
+          t={t}
+          viewMode={viewMode}
+          setViewMode={setViewMode}
+          sortBy={sortBy}
+          setSortBy={setSortBy}
+          editMode={editMode}
+          setEditMode={setEditMode}
+        >
           <PageHeader
             icon={"bi-pin-angle"}
-            title={"Pinned Links"}
+            title={t("pinned")}
-            description={"Pinned Links from your Collections"}
+            description={t("pinned_links_desc")}
           />
-          <div className="mt-2 flex items-center justify-end gap-2">
+        </LinkListOptions>
-            {!(links.length === 0) && (
-              <div
-                role="button"
-                onClick={() => {
-                  setEditMode(!editMode);
-                  setSelectedLinks([]);
-                }}
-                className={`btn btn-square btn-sm btn-ghost ${
-                  editMode
-                    ? "bg-primary/20 hover:bg-primary/20"
-                    : "hover:bg-neutral/20"
-                }`}
-              >
-                <i className="bi-pencil-fill text-neutral text-xl"></i>
-              </div>
-            )}
-            <SortDropdown sortBy={sortBy} setSort={setSortBy} />
-            <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
-          </div>
-        </div>
-
-        {editMode && links.length > 0 && (
-          <div className="w-full flex justify-between items-center min-h-[32px]">
-            {links.length > 0 && (
-              <div className="flex gap-3 ml-3">
-                <input
-                  type="checkbox"
-                  className="checkbox checkbox-primary"
-                  onChange={() => handleSelectAll()}
-                  checked={
-                    selectedLinks.length === links.length && links.length > 0
-                  }
-                />
-                {selectedLinks.length > 0 ? (
-                  <span>
-                    {selectedLinks.length}{" "}
-                    {selectedLinks.length === 1 ? "link" : "links"} selected
-                  </span>
-                ) : (
-                  <span>Nothing selected</span>
-                )}
-              </div>
-            )}
-            <div className="flex gap-3">
-              <button
-                onClick={() => setBulkEditLinksModal(true)}
-                className="btn btn-sm btn-accent text-white w-fit ml-auto"
-                disabled={
-                  selectedLinks.length === 0 ||
-                  !(
-                    collectivePermissions === true ||
-                    collectivePermissions?.canUpdate
-                  )
-                }
-              >
-                Edit
-              </button>
-              <button
-                onClick={(e) => {
-                  (document?.activeElement as HTMLElement)?.blur();
-                  e.shiftKey
-                    ? bulkDeleteLinks()
-                    : setBulkDeleteLinksModal(true);
-                }}
-                className="btn btn-sm bg-red-500 hover:bg-red-400 text-white w-fit ml-auto"
-                disabled={
-                  selectedLinks.length === 0 ||
-                  !(
-                    collectivePermissions === true ||
-                    collectivePermissions?.canDelete
-                  )
-                }
-              >
-                Delete
-              </button>
-            </div>
-          </div>
-        )}
 
         {links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
           <LinkComponent editMode={editMode} links={links} />
@@ -182,30 +75,16 @@ export default function PinnedLinks() {
               <path d="M4.146.146A.5.5 0 0 1 4.5 0h7a.5.5 0 0 1 .5.5c0 .68-.342 1.174-.646 1.479-.126.125-.25.224-.354.298v4.431l.078.048c.203.127.476.314.751.555C12.36 7.775 13 8.527 13 9.5a.5.5 0 0 1-.5.5h-4v4.5c0 .276-.224 1.5-.5 1.5s-.5-1.224-.5-1.5V10h-4a.5.5 0 0 1-.5-.5c0-.973.64-1.725 1.17-2.189A6 6 0 0 1 5 6.708V2.277a3 3 0 0 1-.354-.298C4.342 1.674 4 1.179 4 .5a.5.5 0 0 1 .146-.354m1.58 1.408-.002-.001zm-.002-.001.002.001A.5.5 0 0 1 6 2v5a.5.5 0 0 1-.276.447h-.002l-.012.007-.054.03a5 5 0 0 0-.827.58c-.318.278-.585.596-.725.936h7.792c-.14-.34-.407-.658-.725-.936a5 5 0 0 0-.881-.61l-.012-.006h-.002A.5.5 0 0 1 10 7V2a.5.5 0 0 1 .295-.458 1.8 1.8 0 0 0 .351-.271c.08-.08.155-.17.214-.271H5.14q.091.15.214.271a1.8 1.8 0 0 0 .37.282" />
             </svg>
             <p className="text-center text-2xl">
-              Pin Your Favorite Links Here!
+              {t("pin_favorite_links_here")}
             </p>
             <p className="text-center mx-auto max-w-96 w-fit text-neutral text-sm">
-              You can Pin your favorite Links by clicking on the three dots on
+              {t("pin_favorite_links_here_desc")}
-              each Link and clicking{" "}
-              <span className="font-semibold">Pin to Dashboard</span>.
             </p>
           </div>
         )}
       </div>
-      {bulkDeleteLinksModal && (
-        <BulkDeleteLinksModal
-          onClose={() => {
-            setBulkDeleteLinksModal(false);
-          }}
-        />
-      )}
-      {bulkEditLinksModal && (
-        <BulkEditLinksModal
-          onClose={() => {
-            setBulkEditLinksModal(false);
-          }}
-        />
-      )}
     </MainLayout>
   );
 }
+
+export { getServerSideProps };

pages/login.tsx

@@ -1,4 +1,4 @@
-import AccentSubmitButton from "@/components/ui/Button";
+import Button from "@/components/ui/Button";
 import TextInput from "@/components/TextInput";
 import CenteredForm from "@/layouts/CenteredForm";
 import { signIn } from "next-auth/react";
@@ -6,22 +6,27 @@ import Link from "next/link";
 import React, { useState, FormEvent } from "react";
 import { toast } from "react-hot-toast";
 import { getLogins } from "./api/v1/logins";
-import { InferGetServerSidePropsType } from "next";
+import { GetServerSideProps, InferGetServerSidePropsType } from "next";
 import InstallApp from "@/components/InstallApp";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { i18n } from "next-i18next.config";
+import { getToken } from "next-auth/jwt";
+import { prisma } from "@/lib/api/db";
+import { useTranslation } from "next-i18next";
+import { useRouter } from "next/router";
 
 interface FormData {
   username: string;
   password: string;
 }
 
-export const getServerSideProps = () => {
-  const availableLogins = getLogins();
-  return { props: { availableLogins } };
-};
-
 export default function Login({
   availableLogins,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) {
+  const { t } = useTranslation();
+
+  const router = useRouter();
+
   const [submitLoader, setSubmitLoader] = useState(false);
 
   const [form, setForm] = useState<FormData>({
@@ -35,7 +40,7 @@ export default function Login({
     if (form.username !== "" && form.password !== "") {
       setSubmitLoader(true);
 
-      const load = toast.loading("Authenticating...");
+      const load = toast.loading(t("authenticating"));
 
       const res = await signIn("credentials", {
         username: form.username,
@@ -48,17 +53,29 @@ export default function Login({
       setSubmitLoader(false);
 
       if (!res?.ok) {
-        toast.error(res?.error || "Invalid credentials.");
+        toast.error(res?.error || t("invalid_credentials"));
+
+        if (res?.error === "Email not verified.") {
+          await signIn("email", {
+            email: form.username,
+            callbackUrl: "/",
+            redirect: false,
+          });
+
+          router.push(
+            `/confirmation?email=${encodeURIComponent(form.username)}`
+          );
+        }
       }
     } else {
-      toast.error("Please fill out all the fields.");
+      toast.error(t("fill_all_fields"));
     }
   }
 
   async function loginUserButton(method: string) {
     setSubmitLoader(true);
 
-    const load = toast.loading("Authenticating...");
+    const load = toast.loading(t("authenticating"));
 
     const res = await signIn(method, {});
 
@@ -72,15 +89,14 @@ export default function Login({
       return (
         <>
           <p className="text-3xl text-black dark:text-white text-center font-extralight">
-            Enter your credentials
+            {t("enter_credentials")}
           </p>
           <hr className="border-1 border-sky-100 dark:border-neutral-700" />
           <div>
             <p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
-              Username
               {availableLogins.emailEnabled === "true"
-                ? " or Email"
+                ? t("username_or_email")
-                : undefined}
+                : t("username")}
             </p>
 
             <TextInput
@@ -94,7 +110,7 @@ export default function Login({
           </div>
           <div className="w-full">
             <p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
-              Password
+              {t("password")}
             </p>
 
             <TextInput
@@ -112,23 +128,23 @@ export default function Login({
                   className="text-neutral font-semibold"
                   data-testid="forgot-password-link"
                 >
-                  Forgot Password?
+                  {t("forgot_password")}
                 </Link>
               </div>
             )}
           </div>
-          <AccentSubmitButton
+          <Button
             type="submit"
             size="full"
             intent="accent"
             data-testid="submit-login-button"
             loading={submitLoader}
           >
-            Login
+            {t("login")}
-          </AccentSubmitButton>
+          </Button>
 
           {availableLogins.buttonAuths.length > 0 ? (
-            <div className="divider my-1">Or continue with</div>
+            <div className="divider my-1">{t("or_continue_with")}</div>
           ) : undefined}
         </>
       );
@@ -137,12 +153,10 @@ export default function Login({
 
   function displayLoginExternalButton() {
     const Buttons: any = [];
-    availableLogins.buttonAuths.forEach((value, index) => {
+    availableLogins.buttonAuths.forEach((value: any, index: any) => {
       Buttons.push(
         <React.Fragment key={index}>
-          {index !== 0 ? <div className="divider my-1">Or</div> : undefined}
+          <Button
-
-          <AccentSubmitButton
             type="button"
             onClick={() => loginUserButton(value.method)}
             size="full"
@@ -154,7 +168,7 @@ export default function Login({
               <i className={"bi-" + value.name.toLowerCase()}></i>
             ) : undefined}
             {value.name}
-          </AccentSubmitButton>
+          </Button>
         </React.Fragment>
       );
     });
@@ -165,13 +179,15 @@ export default function Login({
     if (availableLogins.registrationDisabled !== "true") {
       return (
         <div className="flex items-baseline gap-1 justify-center">
-          <p className="w-fit text-gray-500 dark:text-gray-400">New here?</p>
+          <p className="w-fit text-gray-500 dark:text-gray-400">
+            {t("new_here")}
+          </p>
           <Link
             href={"/register"}
             className="font-semibold"
             data-testid="register-link"
           >
-            Sign Up
+            {t("sign_up")}
           </Link>
         </div>
       );
@@ -179,7 +195,7 @@ export default function Login({
   }
 
   return (
-    <CenteredForm text="Sign in to your account">
+    <CenteredForm text={t("sign_in_to_your_account")}>
       <form onSubmit={loginUser}>
         <div
           className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100 dark:border-neutral-700"
@@ -194,3 +210,59 @@ export default function Login({
     </CenteredForm>
   );
 }
+
+const getServerSideProps: GetServerSideProps = async (ctx) => {
+  const availableLogins = getLogins();
+
+  const acceptLanguageHeader = ctx.req.headers["accept-language"];
+  const availableLanguages = i18n.locales;
+
+  const token = await getToken({ req: ctx.req });
+
+  if (token) {
+    const user = await prisma.user.findUnique({
+      where: {
+        id: token.id,
+      },
+    });
+
+    if (user) {
+      return {
+        props: {
+          availableLogins,
+          ...(await serverSideTranslations(user.locale ?? "en", ["common"])),
+        },
+      };
+    }
+  }
+
+  const acceptedLanguages = acceptLanguageHeader
+    ?.split(",")
+    .map((lang) => lang.split(";")[0]);
+
+  let bestMatch = acceptedLanguages?.find((lang) =>
+    availableLanguages.includes(lang)
+  );
+
+  if (!bestMatch) {
+    acceptedLanguages?.some((acceptedLang) => {
+      const partialMatch = availableLanguages.find((lang) =>
+        lang.startsWith(acceptedLang)
+      );
+      if (partialMatch) {
+        bestMatch = partialMatch;
+        return true;
+      }
+      return false;
+    });
+  }
+
+  return {
+    props: {
+      availableLogins,
+      ...(await serverSideTranslations(bestMatch ?? "en", ["common"])),
+    },
+  };
+};
+
+export { getServerSideProps };

pages/public/collections/[id].tsx

@@ -7,7 +7,6 @@ import {
 } from "@/types/global";
 import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
-import { motion, Variants } from "framer-motion";
 import Head from "next/head";
 import useLinks from "@/hooks/useLinks";
 import useLinkStore from "@/store/links";
@@ -16,35 +15,25 @@ import ToggleDarkMode from "@/components/ToggleDarkMode";
 import getPublicUserData from "@/lib/client/getPublicUserData";
 import Image from "next/image";
 import Link from "next/link";
-import FilterSearchDropdown from "@/components/FilterSearchDropdown";
-import SortDropdown from "@/components/SortDropdown";
 import useLocalSettingsStore from "@/store/localSettings";
 import SearchBar from "@/components/SearchBar";
 import EditCollectionSharingModal from "@/components/ModalContent/EditCollectionSharingModal";
-import ViewDropdown from "@/components/ViewDropdown";
 import CardView from "@/components/LinkViews/Layouts/CardView";
 import ListView from "@/components/LinkViews/Layouts/ListView";
 import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
-
+import { useTranslation } from "next-i18next";
-const cardVariants: Variants = {
+import getServerSideProps from "@/lib/client/getServerSideProps";
-  offscreen: {
+import useCollectionStore from "@/store/collections";
-    y: 50,
+import LinkListOptions from "@/components/LinkListOptions";
-    opacity: 0,
-  },
-  onscreen: {
-    y: 0,
-    opacity: 1,
-    transition: {
-      duration: 0.4,
-    },
-  },
-};
 
 export default function PublicCollections() {
+  const { t } = useTranslation();
   const { links } = useLinkStore();
 
   const { settings } = useLocalSettingsStore();
 
+  const { collections } = useCollectionStore();
+
   const router = useRouter();
 
   const [collectionOwner, setCollectionOwner] = useState({
@@ -85,7 +74,7 @@ export default function PublicCollections() {
     if (router.query.id) {
       getPublicCollectionData(Number(router.query.id), setCollection);
     }
-  }, []);
+  }, [collections]);
 
   useEffect(() => {
     const fetchOwner = async () => {
@@ -147,7 +136,7 @@ export default function PublicCollections() {
                 width={551}
                 height={551}
                 alt="Linkwarden"
-                title="Created with Linkwarden"
+                title={t("list_created_with_linkwarden")}
                 className="h-8 w-fit mx-auto rounded"
               />
             </Link>
@@ -189,12 +178,22 @@ export default function PublicCollections() {
                 ) : null}
               </div>
 
-              <p className="text-neutral text-sm font-semibold">
+              <p className="text-neutral text-sm">
-                By {collectionOwner.name}
+                {collection.members.length > 0 &&
-                {collection.members.length > 0
+                collection.members.length === 1
-                  ? ` and ${collection.members.length} others`
+                  ? t("by_author_and_other", {
-                  : undefined}
+                      author: collectionOwner.name,
-                .
+                      count: collection.members.length,
+                    })
+                  : collection.members.length > 0 &&
+                      collection.members.length !== 1
+                    ? t("by_author_and_others", {
+                        author: collectionOwner.name,
+                        count: collection.members.length,
+                      })
+                    : t("by_author", {
+                        author: collectionOwner.name,
+                      })}
               </p>
             </div>
           </div>
@@ -205,22 +204,27 @@ export default function PublicCollections() {
         <div className="divider mt-5 mb-0"></div>
 
         <div className="flex mb-5 mt-10 flex-col gap-5">
-          <div className="flex justify-between gap-3">
+          <LinkListOptions
+            t={t}
+            viewMode={viewMode}
+            setViewMode={setViewMode}
+            sortBy={sortBy}
+            setSortBy={setSortBy}
+            searchFilter={searchFilter}
+            setSearchFilter={setSearchFilter}
+          >
             <SearchBar
-              placeholder={`Search ${collection._count?.links} Links`}
+              placeholder={
+                collection._count?.links === 1
+                  ? t("search_count_link", {
+                      count: collection._count?.links,
+                    })
+                  : t("search_count_links", {
+                      count: collection._count?.links,
+                    })
+              }
             />
-
+          </LinkListOptions>
-            <div className="flex gap-2 items-center w-fit">
-              <FilterSearchDropdown
-                searchFilter={searchFilter}
-                setSearchFilter={setSearchFilter}
-              />
-
-              <SortDropdown sortBy={sortBy} setSort={setSortBy} />
-
-              <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
-            </div>
-          </div>
 
           {links[0] ? (
             <LinkComponent
@@ -235,7 +239,7 @@ export default function PublicCollections() {
                 })}
             />
           ) : (
-            <p>This collection is empty...</p>
+            <p>{t("collection_is_empty")}</p>
           )}
 
           {/* <p className="text-center text-neutral">
@@ -254,3 +258,5 @@ export default function PublicCollections() {
     <></>
   );
 }
+
+export { getServerSideProps };

pages/register.tsx

@@ -5,9 +5,14 @@ import { signIn } from "next-auth/react";
 import { useRouter } from "next/router";
 import CenteredForm from "@/layouts/CenteredForm";
 import TextInput from "@/components/TextInput";
-import AccentSubmitButton from "@/components/ui/Button";
+import Button from "@/components/ui/Button";
 import { getLogins } from "./api/v1/logins";
-import { InferGetServerSidePropsType } from "next";
+import { GetServerSideProps, InferGetServerSidePropsType } from "next";
+import { getToken } from "next-auth/jwt";
+import { prisma } from "@/lib/api/db";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { i18n } from "next-i18next.config";
+import { Trans, useTranslation } from "next-i18next";
 
 const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER === "true";
 
@@ -19,14 +24,10 @@ type FormData = {
   passwordConfirmation: string;
 };
 
-export const getServerSideProps = () => {
-  const availableLogins = getLogins();
-  return { props: { availableLogins } };
-};
-
 export default function Register({
   availableLogins,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) {
+  const { t } = useTranslation();
   const [submitLoader, setSubmitLoader] = useState(false);
   const router = useRouter();
 
@@ -62,14 +63,14 @@ export default function Register({
 
       if (checkFields()) {
         if (form.password !== form.passwordConfirmation)
-          return toast.error("Passwords do not match.");
+          return toast.error(t("passwords_mismatch"));
         else if (form.password.length < 8)
-          return toast.error("Passwords must be at least 8 characters.");
+          return toast.error(t("password_too_short"));
         const { passwordConfirmation, ...request } = form;
 
         setSubmitLoader(true);
 
-        const load = toast.loading("Creating Account...");
+        const load = toast.loading(t("creating_account"));
 
         const response = await fetch("/api/v1/users", {
           body: JSON.stringify(request),
@@ -97,12 +98,12 @@ export default function Register({
             );
           } else if (!emailEnabled) router.push("/login");
 
-          toast.success("User Created!");
+          toast.success(t("account_created"));
         } else {
           toast.error(data.response);
         }
       } else {
-        toast.error("Please fill out all the fields.");
+        toast.error(t("fill_all_fields"));
       }
     }
   }
@@ -110,7 +111,7 @@ export default function Register({
   async function loginUserButton(method: string) {
     setSubmitLoader(true);
 
-    const load = toast.loading("Authenticating...");
+    const load = toast.loading(t("authenticating"));
 
     const res = await signIn(method, {});
 
@@ -121,12 +122,10 @@ export default function Register({
 
   function displayLoginExternalButton() {
     const Buttons: any = [];
-    availableLogins.buttonAuths.forEach((value, index) => {
+    availableLogins.buttonAuths.forEach((value: any, index: any) => {
       Buttons.push(
         <React.Fragment key={index}>
-          {index !== 0 ? <div className="divider my-1">Or</div> : undefined}
+          <Button
-
-          <AccentSubmitButton
             type="button"
             onClick={() => loginUserButton(value.method)}
             size="full"
@@ -138,7 +137,7 @@ export default function Register({
               <i className={"bi-" + value.name.toLowerCase()}></i>
             ) : undefined}
             {value.name}
-          </AccentSubmitButton>
+          </Button>
         </React.Fragment>
       );
     });
@@ -149,31 +148,30 @@ export default function Register({
     <CenteredForm
       text={
         process.env.NEXT_PUBLIC_STRIPE
-          ? `Unlock ${
+          ? t("trial_offer_desc", {
-              process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS || 14
+              count: Number(process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS || 14),
-            } days of Premium Service at no cost!`
+            })
-          : "Create a new account"
+          : t("register_desc")
       }
       data-testid="registration-form"
     >
       {process.env.NEXT_PUBLIC_DISABLE_REGISTRATION === "true" ? (
         <div className="p-4 flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-base-200 rounded-2xl shadow-md border border-neutral-content">
-          <p>
+          <p>{t("registration_disabled")}</p>
-            Registration is disabled for this instance, please contact the admin
-            in case of any issues.
-          </p>
         </div>
       ) : (
         <form onSubmit={registerUser}>
           <div className="p-4 flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full mx-auto bg-base-200 rounded-2xl shadow-md border border-neutral-content">
             <p className="text-3xl text-center font-extralight">
-              Enter your details
+              {t("enter_details")}
             </p>
 
             <div className="divider my-0"></div>
 
             <div>
-              <p className="text-sm w-fit font-semibold mb-1">Display Name</p>
+              <p className="text-sm w-fit font-semibold mb-1">
+                {t("display_name")}
+              </p>
 
               <TextInput
                 autoFocus={true}
@@ -187,7 +185,9 @@ export default function Register({
 
             {emailEnabled ? undefined : (
               <div>
-                <p className="text-sm w-fit font-semibold mb-1">Username</p>
+                <p className="text-sm w-fit font-semibold mb-1">
+                  {t("username")}
+                </p>
 
                 <TextInput
                   placeholder="john"
@@ -203,7 +203,7 @@ export default function Register({
 
             {emailEnabled ? (
               <div>
-                <p className="text-sm w-fit font-semibold mb-1">Email</p>
+                <p className="text-sm w-fit font-semibold mb-1">{t("email")}</p>
 
                 <TextInput
                   type="email"
@@ -217,7 +217,9 @@ export default function Register({
             ) : undefined}
 
             <div className="w-full">
-              <p className="text-sm w-fit font-semibold  mb-1">Password</p>
+              <p className="text-sm w-fit font-semibold  mb-1">
+                {t("password")}
+              </p>
 
               <TextInput
                 type="password"
@@ -231,7 +233,7 @@ export default function Register({
 
             <div className="w-full">
               <p className="text-sm w-fit font-semibold mb-1">
-                Confirm Password
+                {t("confirm_password")}
               </p>
 
               <TextInput
@@ -247,64 +249,67 @@ export default function Register({
             </div>
 
             {process.env.NEXT_PUBLIC_STRIPE ? (
-              <div>
+              <div className="text-xs text-neutral mb-3">
-                <p className="text-xs text-neutral">
+                <p>
-                  By signing up, you agree to our{" "}
+                  <Trans
-                  <Link
+                    i18nKey="sign_up_agreement"
-                    href="https://linkwarden.app/tos"
+                    components={[
-                    className="font-semibold underline"
+                      <Link
-                    data-testid="terms-of-service-link"
+                        href="https://linkwarden.app/tos"
-                  >
+                        className="font-semibold"
-                    Terms of Service
+                        data-testid="terms-of-service-link"
-                  </Link>{" "}
+                        key={0}
-                  and{" "}
+                      />,
-                  <Link
+                      <Link
-                    href="https://linkwarden.app/privacy-policy"
+                        href="https://linkwarden.app/privacy-policy"
-                    className="font-semibold underline"
+                        className="font-semibold"
-                    data-testid="privacy-policy-link"
+                        data-testid="privacy-policy-link"
-                  >
+                        key={1}
-                    Privacy Policy
+                      />,
-                  </Link>
+                    ]}
-                  .
+                  />
-                </p>
-                <p className="text-xs text-neutral">
-                  Need help?{" "}
-                  <Link
-                    href="mailto:support@linkwarden.app"
-                    className="font-semibold underline"
-                    data-testid="support-link"
-                  >
-                    Get in touch
-                  </Link>
-                  .
                 </p>
               </div>
             ) : undefined}
 
-            <AccentSubmitButton
+            <Button
               type="submit"
               loading={submitLoader}
               intent="accent"
               size="full"
               data-testid="register-button"
             >
-              Sign Up
+              {t("sign_up")}
-            </AccentSubmitButton>
+            </Button>
 
             {availableLogins.buttonAuths.length > 0 ? (
-              <div className="divider my-1">Or continue with</div>
+              <div className="divider my-1">{t("or_continue_with")}</div>
             ) : undefined}
 
             {displayLoginExternalButton()}
-            <div className="flex items-baseline gap-1 justify-center">
+            <div>
-              <p className="w-fit text-neutral">Already have an account?</p>
+              <div className="text-neutral text-center flex items-baseline gap-1 justify-center">
-              <Link
+                <p className="w-fit text-neutral">{t("already_registered")}</p>
-                href={"/login"}
+                <Link
-                className="block font-bold"
+                  href={"/login"}
-                data-testid="login-link"
+                  className="font-bold text-base-content"
-              >
+                  data-testid="login-link"
-                Login
+                >
-              </Link>
+                  {t("login")}
+                </Link>
+              </div>
+              {process.env.NEXT_PUBLIC_STRIPE ? (
+                <div className="text-neutral text-center flex items-baseline gap-1 justify-center">
+                  <p>{t("need_help")}</p>
+                  <Link
+                    href="mailto:support@linkwarden.app"
+                    className="font-bold text-base-content"
+                    data-testid="support-link"
+                  >
+                    {t("get_in_touch")}
+                  </Link>
+                </div>
+              ) : undefined}
             </div>
           </div>
         </form>
@@ -312,3 +317,59 @@ export default function Register({
     </CenteredForm>
   );
 }
+
+const getServerSideProps: GetServerSideProps = async (ctx) => {
+  const availableLogins = getLogins();
+
+  const acceptLanguageHeader = ctx.req.headers["accept-language"];
+  const availableLanguages = i18n.locales;
+
+  const token = await getToken({ req: ctx.req });
+
+  if (token) {
+    const user = await prisma.user.findUnique({
+      where: {
+        id: token.id,
+      },
+    });
+
+    if (user) {
+      return {
+        props: {
+          availableLogins,
+          ...(await serverSideTranslations(user.locale ?? "en", ["common"])),
+        },
+      };
+    }
+  }
+
+  const acceptedLanguages = acceptLanguageHeader
+    ?.split(",")
+    .map((lang) => lang.split(";")[0]);
+
+  let bestMatch = acceptedLanguages?.find((lang) =>
+    availableLanguages.includes(lang)
+  );
+
+  if (!bestMatch) {
+    acceptedLanguages?.some((acceptedLang) => {
+      const partialMatch = availableLanguages.find((lang) =>
+        lang.startsWith(acceptedLang)
+      );
+      if (partialMatch) {
+        bestMatch = partialMatch;
+        return true;
+      }
+      return false;
+    });
+  }
+
+  return {
+    props: {
+      availableLogins,
+      ...(await serverSideTranslations(bestMatch ?? "en", ["common"])),
+    },
+  };
+};
+
+export { getServerSideProps };

pages/search.tsx

@@ -1,25 +1,22 @@
-import FilterSearchDropdown from "@/components/FilterSearchDropdown";
-import SortDropdown from "@/components/SortDropdown";
 import useLinks from "@/hooks/useLinks";
 import MainLayout from "@/layouts/MainLayout";
 import useLinkStore from "@/store/links";
 import { Sort, ViewMode } from "@/types/global";
 import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
-import ViewDropdown from "@/components/ViewDropdown";
 import CardView from "@/components/LinkViews/Layouts/CardView";
 import ListView from "@/components/LinkViews/Layouts/ListView";
 import PageHeader from "@/components/PageHeader";
 import { GridLoader } from "react-spinners";
-import useCollectivePermissions from "@/hooks/useCollectivePermissions";
-import toast from "react-hot-toast";
-import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal";
-import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
 import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
+import LinkListOptions from "@/components/LinkListOptions";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+import { useTranslation } from "next-i18next";
 
 export default function Search() {
-  const { links, selectedLinks, setSelectedLinks, deleteLinksById } =
+  const { t } = useTranslation();
-    useLinkStore();
+
+  const { links } = useLinkStore();
 
   const router = useRouter();
 
@@ -37,47 +34,12 @@ export default function Search() {
 
   const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
 
-  const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
-  const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
   const [editMode, setEditMode] = useState(false);
 
   useEffect(() => {
     if (editMode) return setEditMode(false);
   }, [router]);
 
-  const collectivePermissions = useCollectivePermissions(
-    selectedLinks.map((link) => link.collectionId as number)
-  );
-
-  const handleSelectAll = () => {
-    if (selectedLinks.length === links.length) {
-      setSelectedLinks([]);
-    } else {
-      setSelectedLinks(links.map((link) => link));
-    }
-  };
-
-  const bulkDeleteLinks = async () => {
-    const load = toast.loading(
-      `Deleting ${selectedLinks.length} Link${
-        selectedLinks.length > 1 ? "s" : ""
-      }...`
-    );
-
-    const response = await deleteLinksById(
-      selectedLinks.map((link) => link.id as number)
-    );
-
-    toast.dismiss(load);
-
-    response.ok &&
-      toast.success(
-        `Deleted ${selectedLinks.length} Link${
-          selectedLinks.length > 1 ? "s" : ""
-        }!`
-      );
-  };
-
   const { isLoading } = useLinks({
     sort: sortBy,
     searchQueryString: decodeURIComponent(router.query.q as string),
@@ -88,10 +50,6 @@ export default function Search() {
     searchByTags: searchFilter.tags,
   });
 
-  useEffect(() => {
-    console.log("isLoading", isLoading);
-  }, [isLoading]);
-
   const linkView = {
     [ViewMode.Card]: CardView,
     [ViewMode.List]: ListView,
@@ -104,102 +62,22 @@ export default function Search() {
   return (
     <MainLayout>
       <div className="p-5 flex flex-col gap-5 w-full h-full">
-        <div className="flex justify-between">
+        <LinkListOptions
+          t={t}
+          searchFilter={searchFilter}
+          setSearchFilter={setSearchFilter}
+          viewMode={viewMode}
+          setViewMode={setViewMode}
+          sortBy={sortBy}
+          setSortBy={setSortBy}
+          editMode={editMode}
+          setEditMode={setEditMode}
+        >
           <PageHeader icon={"bi-search"} title={"Search Results"} />
-
+        </LinkListOptions>
-          <div className="flex gap-3 items-center justify-end">
-            <div className="flex gap-2 items-center mt-2">
-              {links.length > 0 && (
-                <div
-                  role="button"
-                  onClick={() => {
-                    setEditMode(!editMode);
-                    setSelectedLinks([]);
-                  }}
-                  className={`btn btn-square btn-sm btn-ghost ${
-                    editMode
-                      ? "bg-primary/20 hover:bg-primary/20"
-                      : "hover:bg-neutral/20"
-                  }`}
-                >
-                  <i className="bi-pencil-fill text-neutral text-xl"></i>
-                </div>
-              )}
-              <FilterSearchDropdown
-                searchFilter={searchFilter}
-                setSearchFilter={setSearchFilter}
-              />
-              <SortDropdown sortBy={sortBy} setSort={setSortBy} />
-              <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
-            </div>
-          </div>
-        </div>
-
-        {editMode && links.length > 0 && (
-          <div className="w-full flex justify-between items-center min-h-[32px]">
-            {links.length > 0 && (
-              <div className="flex gap-3 ml-3">
-                <input
-                  type="checkbox"
-                  className="checkbox checkbox-primary"
-                  onChange={() => handleSelectAll()}
-                  checked={
-                    selectedLinks.length === links.length && links.length > 0
-                  }
-                />
-                {selectedLinks.length > 0 ? (
-                  <span>
-                    {selectedLinks.length}{" "}
-                    {selectedLinks.length === 1 ? "link" : "links"} selected
-                  </span>
-                ) : (
-                  <span>Nothing selected</span>
-                )}
-              </div>
-            )}
-            <div className="flex gap-3">
-              <button
-                onClick={() => setBulkEditLinksModal(true)}
-                className="btn btn-sm btn-accent text-white w-fit ml-auto"
-                disabled={
-                  selectedLinks.length === 0 ||
-                  !(
-                    collectivePermissions === true ||
-                    collectivePermissions?.canUpdate
-                  )
-                }
-              >
-                Edit
-              </button>
-              <button
-                onClick={(e) => {
-                  (document?.activeElement as HTMLElement)?.blur();
-                  e.shiftKey
-                    ? bulkDeleteLinks()
-                    : setBulkDeleteLinksModal(true);
-                }}
-                className="btn btn-sm bg-red-500 hover:bg-red-400 text-white w-fit ml-auto"
-                disabled={
-                  selectedLinks.length === 0 ||
-                  !(
-                    collectivePermissions === true ||
-                    collectivePermissions?.canDelete
-                  )
-                }
-              >
-                Delete
-              </button>
-            </div>
-          </div>
-        )}
 
         {!isLoading && !links[0] ? (
-          <p>
+          <p>{t("nothing_found")}</p>
-            Nothing found.{" "}
-            <span className="font-bold text-xl" title="Shruggie">
-              ¯\_(ツ)_/¯
-            </span>
-          </p>
         ) : links[0] ? (
           <LinkComponent
             editMode={editMode}
@@ -217,20 +95,8 @@ export default function Search() {
           )
         )}
       </div>
-      {bulkDeleteLinksModal && (
-        <BulkDeleteLinksModal
-          onClose={() => {
-            setBulkDeleteLinksModal(false);
-          }}
-        />
-      )}
-      {bulkEditLinksModal && (
-        <BulkEditLinksModal
-          onClose={() => {
-            setBulkEditLinksModal(false);
-          }}
-        />
-      )}
     </MainLayout>
   );
 }
+
+export { getServerSideProps };

pages/settings/access-tokens.tsx

@@ -4,11 +4,14 @@ import NewTokenModal from "@/components/ModalContent/NewTokenModal";
 import RevokeTokenModal from "@/components/ModalContent/RevokeTokenModal";
 import { AccessToken } from "@prisma/client";
 import useTokenStore from "@/store/tokens";
+import { useTranslation } from "next-i18next";
+import getServerSideProps from "@/lib/client/getServerSideProps";
 
 export default function AccessTokens() {
   const [newTokenModal, setNewTokenModal] = useState(false);
   const [revokeTokenModal, setRevokeTokenModal] = useState(false);
   const [selectedToken, setSelectedToken] = useState<AccessToken | null>(null);
+  const { t } = useTranslation();
 
   const openRevokeModal = (token: AccessToken) => {
     setSelectedToken(token);
@@ -27,15 +30,14 @@ export default function AccessTokens() {
 
   return (
     <SettingsLayout>
-      <p className="capitalize text-3xl font-thin inline">Access Tokens</p>
+      <p className="capitalize text-3xl font-thin inline">
+        {t("access_tokens")}
+      </p>
 
       <div className="divider my-3"></div>
 
       <div className="flex flex-col gap-3">
-        <p>
+        <p>{t("access_tokens_description")}</p>
-          Access Tokens can be used to access Linkwarden from other apps and
-          services without giving away your Username and Password.
-        </p>
 
         <button
           className={`btn ml-auto btn-accent dark:border-violet-400 text-white tracking-wider w-fit flex items-center gap-2`}
@@ -43,7 +45,7 @@ export default function AccessTokens() {
             setNewTokenModal(true);
           }}
         >
-          New Access Token
+          {t("new_token")}
         </button>
 
         {tokens.length > 0 ? (
@@ -51,13 +53,12 @@ export default function AccessTokens() {
             <div className="divider my-0"></div>
 
             <table className="table">
-              {/* head */}
               <thead>
                 <tr>
                   <th></th>
-                  <th>Name</th>
+                  <th>{t("name")}</th>
-                  <th>Created</th>
+                  <th>{t("created")}</th>
-                  <th>Expires</th>
+                  <th>{t("expires")}</th>
                   <th></th>
                 </tr>
               </thead>
@@ -105,3 +106,5 @@ export default function AccessTokens() {
     </SettingsLayout>
   );
 }
+
+export { getServerSideProps };

pages/settings/account.tsx

@@ -14,17 +14,17 @@ import Checkbox from "@/components/Checkbox";
 import { dropdownTriggerer } from "@/lib/client/utils";
 import EmailChangeVerificationModal from "@/components/ModalContent/EmailChangeVerificationModal";
 import Button from "@/components/ui/Button";
+import { i18n } from "next-i18next.config";
+import { useTranslation } from "next-i18next";
+import getServerSideProps from "@/lib/client/getServerSideProps";
 
 const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
 
 export default function Account() {
   const [emailChangeVerificationModal, setEmailChangeVerificationModal] =
     useState(false);
-
   const [submitLoader, setSubmitLoader] = useState(false);
-
   const { account, updateAccount } = useAccountStore();
-
   const [user, setUser] = useState<AccountSettings>(
     !objectIsEmpty(account)
       ? account
@@ -44,6 +44,8 @@ export default function Account() {
         } as unknown as AccountSettings)
   );
 
+  const { t } = useTranslation();
+
   function objectIsEmpty(obj: object) {
     return Object.keys(obj).length === 0;
   }
@@ -67,17 +69,16 @@ export default function Account() {
         };
         reader.readAsDataURL(resizedFile);
       } else {
-        toast.error("Please select a PNG or JPEG file thats less than 1MB.");
+        toast.error(t("image_upload_size_error"));
       }
     } else {
-      toast.error("Invalid file format.");
+      toast.error(t("image_upload_format_error"));
     }
   };
 
   const submit = async (password?: string) => {
     setSubmitLoader(true);
-
+    const load = toast.loading(t("applying_settings"));
-    const load = toast.loading("Applying...");
 
     const response = await updateAccount({
       ...user,
@@ -90,56 +91,44 @@ export default function Account() {
     if (response.ok) {
       const emailChanged = account.email !== user.email;
 
+      toast.success(t("settings_applied"));
       if (emailChanged) {
-        toast.success("Settings Applied!");
+        toast.success(t("email_change_request"));
-        toast.success(
-          "Email change request sent. Please verify the new email address."
-        );
         setEmailChangeVerificationModal(false);
-      } else toast.success("Settings Applied!");
+      }
     } else toast.error(response.data as string);
     setSubmitLoader(false);
   };
 
   const importBookmarks = async (e: any, format: MigrationFormat) => {
     setSubmitLoader(true);
-
     const file: File = e.target.files[0];
-
     if (file) {
       var reader = new FileReader();
       reader.readAsText(file, "UTF-8");
       reader.onload = async function (e) {
-        const load = toast.loading("Importing...");
+        const load = toast.loading(t("importing_bookmarks"));
-
         const request: string = e.target?.result as string;
-
+        const body: MigrationRequest = { format, data: request };
-        const body: MigrationRequest = {
-          format,
-          data: request,
-        };
-
         const response = await fetch("/api/v1/migration", {
           method: "POST",
           body: JSON.stringify(body),
         });
-
         const data = await response.json();
-
         toast.dismiss(load);
-
         if (response.ok) {
-          toast.success("Imported the Bookmarks! Reloading the page...");
+          toast.success(t("import_success"));
           setTimeout(() => {
             location.reload();
           }, 2000);
-        } else toast.error(data.response as string);
+        } else {
+          toast.error(data.response as string);
+        }
       };
       reader.onerror = function (e) {
         console.log("Error:", e);
       };
     }
-
     setSubmitLoader(false);
   };
 
@@ -157,16 +146,14 @@ export default function Account() {
   }, [whitelistedUsersTextbox]);
 
   const stringToArray = (str: string) => {
-    const stringWithoutSpaces = str?.replace(/\s+/g, "");
+    return str?.replace(/\s+/g, "").split(",");
-
-    const wordsArray = stringWithoutSpaces?.split(",");
-
-    return wordsArray;
   };
 
   return (
     <SettingsLayout>
-      <p className="capitalize text-3xl font-thin inline">Account Settings</p>
+      <p className="capitalize text-3xl font-thin inline">
+        {t("accountSettings")}
+      </p>
 
       <div className="divider my-3"></div>
 
@@ -174,7 +161,7 @@ export default function Account() {
         <div className="grid sm:grid-cols-2 gap-3 auto-rows-auto">
           <div className="flex flex-col gap-3">
             <div>
-              <p className="mb-2">Display Name</p>
+              <p className="mb-2">{t("display_name")}</p>
               <TextInput
                 value={user.name || ""}
                 className="bg-base-200"
@@ -182,17 +169,16 @@ export default function Account() {
               />
             </div>
             <div>
-              <p className="mb-2">Username</p>
+              <p className="mb-2">{t("username")}</p>
               <TextInput
                 value={user.username || ""}
                 className="bg-base-200"
                 onChange={(e) => setUser({ ...user, username: e.target.value })}
               />
             </div>
-
             {emailEnabled ? (
               <div>
-                <p className="mb-2">Email</p>
+                <p className="mb-2">{t("email")}</p>
                 <TextInput
                   value={user.email || ""}
                   className="bg-base-200"
@@ -200,10 +186,32 @@ export default function Account() {
                 />
               </div>
             ) : undefined}
+            <div>
+              <p className="mb-2">{t("language")}</p>
+              <select
+                onChange={(e) => {
+                  setUser({ ...user, locale: e.target.value });
+                }}
+                className="select border border-neutral-content focus:outline-none focus:border-primary duration-100 w-full bg-base-200 rounded-[0.375rem] min-h-0 h-[2.625rem] leading-4 p-2"
+              >
+                {i18n.locales.map((locale) => (
+                  <option
+                    key={locale}
+                    value={locale}
+                    selected={user.locale === locale}
+                  >
+                    {new Intl.DisplayNames(locale, { type: "language" }).of(
+                      locale
+                    ) || ""}
+                  </option>
+                ))}
+                <option disabled>{t("more_coming_soon")}</option>
+              </select>
+            </div>
           </div>
 
           <div className="sm:row-span-2 sm:justify-self-center my-3">
-            <p className="mb-2 sm:text-center">Profile Photo</p>
+            <p className="mb-2 sm:text-center">{t("profile_photo")}</p>
             <div className="w-28 h-28 flex gap-3 sm:flex-col items-center">
               <ProfilePhoto
                 priority={true}
@@ -221,12 +229,12 @@ export default function Account() {
                   className="text-sm"
                 >
                   <i className="bi-pencil-square text-md duration-100"></i>
-                  Edit
+                  {t("edit")}
                 </Button>
                 <ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
                   <li>
                     <label tabIndex={0} role="button">
-                      Upload a new photo...
+                      {t("upload_new_photo")}
                       <input
                         type="file"
                         name="photo"
@@ -249,7 +257,7 @@ export default function Account() {
                           })
                         }
                       >
-                        Remove Photo
+                        {t("remove_photo")}
                       </div>
                     </li>
                   )}
@@ -261,25 +269,22 @@ export default function Account() {
 
         <div className="sm:-mt-3">
           <Checkbox
-            label="Make profile private"
+            label={t("make_profile_private")}
             state={user.isPrivate}
             onClick={() => setUser({ ...user, isPrivate: !user.isPrivate })}
           />
 
-          <p className="text-neutral text-sm">
+          <p className="text-neutral text-sm">{t("profile_privacy_info")}</p>
-            This will limit who can find and add you to new Collections.
-          </p>
 
           {user.isPrivate && (
             <div className="pl-5">
-              <p className="mt-2">Whitelisted Users</p>
+              <p className="mt-2">{t("whitelisted_users")}</p>
               <p className="text-neutral text-sm mb-3">
-                Please provide the Username of the users you wish to grant
+                {t("whitelisted_users_info")}
-                visibility to your profile. Separated by comma.
               </p>
               <textarea
                 className="w-full resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-primary"
-                placeholder="Your profile is hidden from everyone right now..."
+                placeholder={t("whitelisted_users_placeholder")}
                 value={whitelistedUsersTextbox}
                 onChange={(e) => setWhiteListedUsersTextbox(e.target.value)}
               />
@@ -296,14 +301,14 @@ export default function Account() {
             }
           }}
           loading={submitLoader}
-          label="Save Changes"
+          label={t("save_changes")}
           className="mt-2 w-full sm:w-fit"
         />
 
         <div>
           <div className="flex items-center gap-2 w-full rounded-md h-8">
             <p className="truncate w-full pr-7 text-3xl font-thin">
-              Import & Export
+              {t("import_export")}
             </p>
           </div>
 
@@ -311,7 +316,7 @@ export default function Account() {
 
           <div className="flex gap-3 flex-col">
             <div>
-              <p className="mb-2">Import your data from other platforms.</p>
+              <p className="mb-2">{t("import_data")}</p>
               <div className="dropdown dropdown-bottom">
                 <Button
                   tabIndex={0}
@@ -322,7 +327,7 @@ export default function Account() {
                   id="import-dropdown"
                 >
                   <i className="bi-cloud-upload text-xl duration-100"></i>
-                  Import From
+                  {t("import_links")}
                 </Button>
 
                 <ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
@@ -331,9 +336,9 @@ export default function Account() {
                       tabIndex={0}
                       role="button"
                       htmlFor="import-linkwarden-file"
-                      title="JSON File"
+                      title={t("from_linkwarden")}
                     >
-                      From Linkwarden
+                      {t("from_linkwarden")}
                       <input
                         type="file"
                         name="photo"
@@ -351,9 +356,9 @@ export default function Account() {
                       tabIndex={0}
                       role="button"
                       htmlFor="import-html-file"
-                      title="HTML File"
+                      title={t("from_html")}
                     >
-                      From Bookmarks HTML file
+                      {t("from_html")}
                       <input
                         type="file"
                         name="photo"
@@ -371,9 +376,9 @@ export default function Account() {
                       tabIndex={0}
                       role="button"
                       htmlFor="import-wallabag-file"
-                      title="Wallabag File"
+                      title={t("from_wallabag")}
                     >
-                      From Wallabag (JSON file)
+                      {t("from_wallabag")}
                       <input
                         type="file"
                         name="photo"
@@ -391,11 +396,11 @@ export default function Account() {
             </div>
 
             <div>
-              <p className="mb-2">Download your data instantly.</p>
+              <p className="mb-2">{t("download_data")}</p>
               <Link className="w-fit" href="/api/v1/migration">
                 <div className="select-none relative duration-200 rounded-lg text-sm text-center w-fit flex justify-center items-center gap-2 disabled:pointer-events-none disabled:opacity-50 bg-neutral-content text-secondary-foreground hover:bg-neutral-content/80 border border-neutral/30 h-10 px-4 py-2">
                   <i className="bi-cloud-download text-xl duration-100"></i>
-                  <p>Export Data</p>
+                  <p>{t("export_data")}</p>
                 </div>
               </Link>
             </div>
@@ -405,23 +410,22 @@ export default function Account() {
         <div>
           <div className="flex items-center gap-2 w-full rounded-md h-8">
             <p className="text-red-500 dark:text-red-500 truncate w-full pr-7 text-3xl font-thin">
-              Delete Account
+              {t("delete_account")}
             </p>
           </div>
 
           <div className="divider my-3"></div>
 
           <p>
-            This will permanently delete ALL the Links, Collections, Tags, and
+            {t("delete_account_warning")}
-            archived data you own.{" "}
             {process.env.NEXT_PUBLIC_STRIPE
-              ? "It will also cancel your subscription. "
+              ? " " + t("cancel_subscription_notice")
               : undefined}
           </p>
         </div>
 
         <Link href="/settings/delete" className="underline">
-          Account deletion page
+          {t("account_deletion_page")}
         </Link>
       </div>
 
@@ -436,3 +440,5 @@ export default function Account() {
     </SettingsLayout>
   );
 }
+
+export { getServerSideProps };

pages/settings/billing.tsx

@@ -1,9 +1,12 @@
 import SettingsLayout from "@/layouts/SettingsLayout";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
+import { useTranslation } from "next-i18next";
+import getServerSideProps from "@/lib/client/getServerSideProps";
 
 export default function Billing() {
   const router = useRouter();
+  const { t } = useTranslation();
 
   useEffect(() => {
     if (!process.env.NEXT_PUBLIC_STRIPE) router.push("/settings/profile");
@@ -11,26 +14,27 @@ export default function Billing() {
 
   return (
     <SettingsLayout>
-      <p className="capitalize text-3xl font-thin inline">Billing Settings</p>
+      <p className="capitalize text-3xl font-thin inline">
+        {t("billing_settings")}
+      </p>
 
       <div className="divider my-3"></div>
 
       <div className="w-full mx-auto flex flex-col gap-3 justify-between">
         <p className="text-md">
-          To manage/cancel your subscription, visit the{" "}
+          {t("manage_subscription_intro")}{" "}
           <a
             href={process.env.NEXT_PUBLIC_STRIPE_BILLING_PORTAL_URL}
             className="underline"
             target="_blank"
           >
-            Billing Portal
+            {t("billing_portal")}
           </a>
           .
         </p>
 
         <p className="text-md">
-          If you still need help or encountered any issues, feel free to reach
+          {t("help_contact_intro")}{" "}
-          out to us at:{" "}
           <a className="font-semibold" href="mailto:support@linkwarden.app">
             support@linkwarden.app
           </a>
@@ -39,3 +43,5 @@ export default function Billing() {
     </SettingsLayout>
   );
 }
+
+export { getServerSideProps };

pages/settings/delete.tsx

@@ -5,18 +5,16 @@ import CenteredForm from "@/layouts/CenteredForm";
 import { signOut, useSession } from "next-auth/react";
 import Link from "next/link";
 import Button from "@/components/ui/Button";
-
+import { useTranslation } from "next-i18next";
-const keycloakEnabled = process.env.NEXT_PUBLIC_KEYCLOAK_ENABLED === "true";
+import getServerSideProps from "@/lib/client/getServerSideProps";
-const authentikEnabled = process.env.NEXT_PUBLIC_AUTHENTIK_ENABLED === "true";
 
 export default function Delete() {
   const [password, setPassword] = useState("");
   const [comment, setComment] = useState<string>();
   const [feedback, setFeedback] = useState<string>();
-
   const [submitLoader, setSubmitLoader] = useState(false);
-
   const { data } = useSession();
+  const { t } = useTranslation();
 
   const submit = async () => {
     const body = {
@@ -27,13 +25,12 @@ export default function Delete() {
       },
     };
 
-    if (!keycloakEnabled && !authentikEnabled && password == "") {
+    if (password === "") {
-      return toast.error("Please fill the required fields.");
+      return toast.error(t("fill_required_fields"));
     }
 
     setSubmitLoader(true);
-
+    const load = toast.loading(t("deleting_message"));
-    const load = toast.loading("Deleting everything, please wait...");
 
     const response = await fetch(`/api/v1/users/${data?.user.id}`, {
       method: "DELETE",
@@ -49,7 +46,9 @@ export default function Delete() {
 
     if (response.ok) {
       signOut();
-    } else toast.error(message);
+    } else {
+      toast.error(message);
+    }
 
     setSubmitLoader(false);
   };
@@ -61,75 +60,65 @@ export default function Delete() {
           href="/settings/account"
           className="absolute top-4 left-4 btn btn-ghost btn-square btn-sm"
         >
-          <i className="bi-chevron-left  text-neutral text-xl"></i>
+          <i className="bi-chevron-left text-neutral text-xl"></i>
         </Link>
         <div className="flex items-center gap-2 w-full rounded-md h-8">
           <p className="text-red-500 dark:text-red-500 truncate w-full text-3xl text-center">
-            Delete Account
+            {t("delete_account")}
           </p>
         </div>
 
         <div className="divider my-0"></div>
 
-        <p>
+        <p>{t("delete_warning")}</p>
-          This will permanently delete all the Links, Collections, Tags, and
-          archived data you own. It will also log you out
-          {process.env.NEXT_PUBLIC_STRIPE
-            ? " and cancel your subscription"
-            : undefined}
-          . This action is irreversible!
-        </p>
 
-        {process.env.NEXT_PUBLIC_KEYCLOAK_ENABLED !== "true" ? (
+        <div>
-          <div>
+          <p className="mb-2">{t("confirm_password")}</p>
-            <p className="mb-2">Confirm Your Password</p>
+          <TextInput
-
+            value={password}
-            <TextInput
+            onChange={(e) => setPassword(e.target.value)}
-              value={password}
+            placeholder="••••••••••••••"
-              onChange={(e) => setPassword(e.target.value)}
+            className="bg-base-100"
-              placeholder="••••••••••••••"
+            type="password"
-              className="bg-base-100"
+          />
-              type="password"
+        </div>
-            />
-          </div>
-        ) : undefined}
 
         {process.env.NEXT_PUBLIC_STRIPE ? (
           <fieldset className="border rounded-md p-2 border-primary">
             <legend className="px-3 py-1 text-sm sm:text-base border rounded-md border-primary">
-              <b>Optional</b>{" "}
+              <b>{t("optional")}</b> <i>{t("feedback_help")}</i>
-              <i className="min-[390px]:text-sm text-xs">
-                (but it really helps us improve!)
-              </i>
             </legend>
             <label className="w-full flex min-[430px]:items-center items-start gap-2 mb-3 min-[430px]:flex-row flex-col">
-              <p className="text-sm">Reason for cancellation:</p>
+              <p className="text-sm">{t("reason_for_cancellation")}:</p>
               <select
                 className="rounded-md p-1 outline-none"
                 value={feedback}
                 onChange={(e) => setFeedback(e.target.value)}
               >
-                <option value={undefined}>Please specify</option>
+                <option value={undefined}>{t("please_specify")}</option>
-                <option value="customer_service">Customer Service</option>
+                <option value="customer_service">
-                <option value="low_quality">Low Quality</option>
+                  {t("customer_service")}
-                <option value="missing_features">Missing Features</option>
+                </option>
-                <option value="switched_service">Switched Service</option>
+                <option value="low_quality">{t("low_quality")}</option>
-                <option value="too_complex">Too Complex</option>
+                <option value="missing_features">
-                <option value="too_expensive">Too Expensive</option>
+                  {t("missing_features")}
-                <option value="unused">Unused</option>
+                </option>
-                <option value="other">Other</option>
+                <option value="switched_service">
+                  {t("switched_service")}
+                </option>
+                <option value="too_complex">{t("too_complex")}</option>
+                <option value="too_expensive">{t("too_expensive")}</option>
+                <option value="unused">{t("unused")}</option>
+                <option value="other">{t("other")}</option>
               </select>
             </label>
             <div>
-              <p className="text-sm mb-2">
+              <p className="text-sm mb-2">{t("more_information")}</p>
-                More information (the more details, the more helpful it&apos;d
-                be)
-              </p>
 
               <textarea
                 value={comment}
                 onChange={(e) => setComment(e.target.value)}
-                placeholder="e.g. I needed a feature that..."
+                placeholder={t("feedback_placeholder")}
                 className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-100 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100"
               />
             </div>
@@ -142,9 +131,11 @@ export default function Delete() {
           loading={submitLoader}
           onClick={submit}
         >
-          <p className="text-center w-full">Delete Your Account</p>
+          <p className="text-center w-full">{t("delete_your_account")}</p>
         </Button>
       </div>
     </CenteredForm>
   );
 }
+
+export { getServerSideProps };

pages/settings/password.tsx

@@ -4,25 +4,26 @@ import useAccountStore from "@/store/account";
 import SubmitButton from "@/components/SubmitButton";
 import { toast } from "react-hot-toast";
 import TextInput from "@/components/TextInput";
+import { useTranslation } from "next-i18next";
+import getServerSideProps from "@/lib/client/getServerSideProps";
 
 export default function Password() {
+  const { t } = useTranslation();
+
   const [oldPassword, setOldPassword] = useState("");
   const [newPassword, setNewPassword] = useState("");
-
   const [submitLoader, setSubmitLoader] = useState(false);
-
   const { account, updateAccount } = useAccountStore();
 
   const submit = async () => {
-    if (newPassword == "" || oldPassword == "") {
+    if (newPassword === "" || oldPassword === "") {
-      return toast.error("Please fill all the fields.");
+      return toast.error(t("fill_all_fields"));
     }
-    if (newPassword.length < 8)
+    if (newPassword.length < 8) return toast.error(t("password_length_error"));
-      return toast.error("Passwords must be at least 8 characters.");
 
     setSubmitLoader(true);
 
-    const load = toast.loading("Applying...");
+    const load = toast.loading(t("applying_changes"));
 
     const response = await updateAccount({
       ...account,
@@ -33,26 +34,27 @@ export default function Password() {
     toast.dismiss(load);
 
     if (response.ok) {
-      toast.success("Settings Applied!");
+      toast.success(t("settings_applied"));
       setNewPassword("");
       setOldPassword("");
-    } else toast.error(response.data as string);
+    } else {
+      toast.error(response.data as string);
+    }
 
     setSubmitLoader(false);
   };
 
   return (
     <SettingsLayout>
-      <p className="capitalize text-3xl font-thin inline">Change Password</p>
+      <p className="capitalize text-3xl font-thin inline">
+        {t("change_password")}
+      </p>
 
       <div className="divider my-3"></div>
 
-      <p className="mb-3">
+      <p className="mb-3">{t("password_change_instructions")}</p>
-        To change your password, please fill out the following. Your password
-        should be at least 8 characters.
-      </p>
       <div className="w-full flex flex-col gap-2 justify-between">
-        <p>Old Password</p>
+        <p>{t("old_password")}</p>
 
         <TextInput
           value={oldPassword}
@@ -62,7 +64,7 @@ export default function Password() {
           type="password"
         />
 
-        <p className="mt-3">New Password</p>
+        <p className="mt-3">{t("new_password")}</p>
 
         <TextInput
           value={newPassword}
@@ -75,10 +77,12 @@ export default function Password() {
         <SubmitButton
           onClick={submit}
           loading={submitLoader}
-          label="Save Changes"
+          label={t("save_changes")}
           className="mt-3 w-full sm:w-fit"
         />
       </div>
     </SettingsLayout>
   );
 }
+
+export { getServerSideProps };

pages/settings/preference.tsx

@@ -1,31 +1,33 @@
 import SettingsLayout from "@/layouts/SettingsLayout";
 import { useState, useEffect } from "react";
 import useAccountStore from "@/store/account";
-import { AccountSettings } from "@/types/global";
-import { toast } from "react-hot-toast";
-import React from "react";
-import useLocalSettingsStore from "@/store/localSettings";
-import Checkbox from "@/components/Checkbox";
 import SubmitButton from "@/components/SubmitButton";
+import { toast } from "react-hot-toast";
+import Checkbox from "@/components/Checkbox";
+import useLocalSettingsStore from "@/store/localSettings";
+import { useTranslation } from "next-i18next";
+import getServerSideProps from "@/lib/client/getServerSideProps"; // Import getServerSideProps for server-side data fetching
 import { LinksRouteTo } from "@prisma/client";
 
 export default function Appearance() {
+  const { t } = useTranslation();
   const { updateSettings } = useLocalSettingsStore();
-
   const [submitLoader, setSubmitLoader] = useState(false);
   const { account, updateAccount } = useAccountStore();
-  const [user, setUser] = useState<AccountSettings>(account);
+  const [user, setUser] = useState(account);
 
-  const [preventDuplicateLinks, setPreventDuplicateLinks] =
+  const [preventDuplicateLinks, setPreventDuplicateLinks] = useState<boolean>(
-    useState<boolean>(false);
+    account.preventDuplicateLinks
-  const [archiveAsScreenshot, setArchiveAsScreenshot] =
-    useState<boolean>(false);
-  const [archiveAsPDF, setArchiveAsPDF] = useState<boolean>(false);
-  const [archiveAsWaybackMachine, setArchiveAsWaybackMachine] =
-    useState<boolean>(false);
-  const [linksRouteTo, setLinksRouteTo] = useState<LinksRouteTo>(
-    user.linksRouteTo
   );
+  const [archiveAsScreenshot, setArchiveAsScreenshot] = useState<boolean>(
+    account.archiveAsScreenshot
+  );
+  const [archiveAsPDF, setArchiveAsPDF] = useState<boolean>(
+    account.archiveAsPDF
+  );
+  const [archiveAsWaybackMachine, setArchiveAsWaybackMachine] =
+    useState<boolean>(account.archiveAsWaybackMachine);
+  const [linksRouteTo, setLinksRouteTo] = useState(account.linksRouteTo);
 
   useEffect(() => {
     setUser({
@@ -62,29 +64,29 @@ export default function Appearance() {
   const submit = async () => {
     setSubmitLoader(true);
 
-    const load = toast.loading("Applying...");
+    const load = toast.loading(t("applying_changes"));
 
-    const response = await updateAccount({
+    const response = await updateAccount({ ...user });
-      ...user,
-    });
 
     toast.dismiss(load);
 
     if (response.ok) {
-      toast.success("Settings Applied!");
+      toast.success(t("settings_applied"));
-    } else toast.error(response.data as string);
+    } else {
+      toast.error(response.data as string);
+    }
     setSubmitLoader(false);
   };
 
   return (
     <SettingsLayout>
-      <p className="capitalize text-3xl font-thin inline">Preference</p>
+      <p className="capitalize text-3xl font-thin inline">{t("preference")}</p>
 
       <div className="divider my-3"></div>
 
       <div className="flex flex-col gap-5">
         <div>
-          <p className="mb-3">Select Theme</p>
+          <p className="mb-3">{t("select_theme")}</p>
           <div className="flex gap-3 w-full">
             <div
               className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-36 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-black ${
@@ -95,9 +97,7 @@ export default function Appearance() {
               onClick={() => updateSettings({ theme: "dark" })}
             >
               <i className="bi-moon-fill text-6xl"></i>
-              <p className="ml-2 text-2xl">Dark</p>
+              <p className="ml-2 text-2xl">{t("dark")}</p>
-
-              {/* <hr className="my-3 outline-1 outline-neutral-content dark:outline-neutral-700" /> */}
             </div>
             <div
               className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-36 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-white ${
@@ -108,35 +108,30 @@ export default function Appearance() {
               onClick={() => updateSettings({ theme: "light" })}
             >
               <i className="bi-sun-fill text-6xl"></i>
-              <p className="ml-2 text-2xl">Light</p>
+              <p className="ml-2 text-2xl">{t("light")}</p>
-              {/* <hr className="my-3 outline-1 outline-neutral-content dark:outline-neutral-700" /> */}
             </div>
           </div>
         </div>
 
         <div>
           <p className="capitalize text-3xl font-thin inline">
-            Archive Settings
+            {t("archive_settings")}
           </p>
-
           <div className="divider my-3"></div>
-
+          <p>{t("formats_to_archive")}</p>
-          <p>Formats to Archive/Preserve webpages:</p>
           <div className="p-3">
             <Checkbox
-              label="Screenshot"
+              label={t("screenshot")}
               state={archiveAsScreenshot}
               onClick={() => setArchiveAsScreenshot(!archiveAsScreenshot)}
             />
-
             <Checkbox
-              label="PDF"
+              label={t("pdf")}
               state={archiveAsPDF}
               onClick={() => setArchiveAsPDF(!archiveAsPDF)}
             />
-
             <Checkbox
-              label="Archive.org Snapshot"
+              label={t("archive_org_snapshot")}
               state={archiveAsWaybackMachine}
               onClick={() =>
                 setArchiveAsWaybackMachine(!archiveAsWaybackMachine)
@@ -146,18 +141,18 @@ export default function Appearance() {
         </div>
 
         <div>
-          <p className="capitalize text-3xl font-thin inline">Link Settings</p>
+          <p className="capitalize text-3xl font-thin inline">
-
+            {t("link_settings")}
+          </p>
           <div className="divider my-3"></div>
           <div className="mb-3">
             <Checkbox
-              label="Prevent duplicate links"
+              label={t("prevent_duplicate_links")}
               state={preventDuplicateLinks}
               onClick={() => setPreventDuplicateLinks(!preventDuplicateLinks)}
             />
           </div>
-
+          <p>{t("clicking_on_links_should")}</p>
-          <p>Clicking on Links should:</p>
           <div className="p-3">
             <label
               className="label cursor-pointer flex gap-2 justify-start w-fit"
@@ -172,7 +167,7 @@ export default function Appearance() {
                 checked={linksRouteTo === LinksRouteTo.ORIGINAL}
                 onChange={() => setLinksRouteTo(LinksRouteTo.ORIGINAL)}
               />
-              <span className="label-text">Open the original content</span>
+              <span className="label-text">{t("open_original_content")}</span>
             </label>
 
             <label
@@ -188,7 +183,7 @@ export default function Appearance() {
                 checked={linksRouteTo === LinksRouteTo.PDF}
                 onChange={() => setLinksRouteTo(LinksRouteTo.PDF)}
               />
-              <span className="label-text">Open PDF, if available</span>
+              <span className="label-text">{t("open_pdf_if_available")}</span>
             </label>
 
             <label
@@ -204,7 +199,9 @@ export default function Appearance() {
                 checked={linksRouteTo === LinksRouteTo.READABLE}
                 onChange={() => setLinksRouteTo(LinksRouteTo.READABLE)}
               />
-              <span className="label-text">Open Readable, if available</span>
+              <span className="label-text">
+                {t("open_readable_if_available")}
+              </span>
             </label>
 
             <label
@@ -220,7 +217,9 @@ export default function Appearance() {
                 checked={linksRouteTo === LinksRouteTo.SCREENSHOT}
                 onChange={() => setLinksRouteTo(LinksRouteTo.SCREENSHOT)}
               />
-              <span className="label-text">Open Screenshot, if available</span>
+              <span className="label-text">
+                {t("open_screenshot_if_available")}
+              </span>
             </label>
           </div>
         </div>
@@ -228,10 +227,12 @@ export default function Appearance() {
         <SubmitButton
           onClick={submit}
           loading={submitLoader}
-          label="Save Changes"
+          label={t("save_changes")}
           className="mt-2 w-full sm:w-fit"
         />
       </div>
     </SettingsLayout>
   );
 }
+
+export { getServerSideProps };

pages/subscribe.tsx

@@ -1,12 +1,18 @@
 import { signOut, useSession } from "next-auth/react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useRouter } from "next/router";
 import CenteredForm from "@/layouts/CenteredForm";
 import { Plan } from "@/types/global";
-import AccentSubmitButton from "@/components/ui/Button";
+import Button from "@/components/ui/Button";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+import { Trans, useTranslation } from "next-i18next";
+import useAccountStore from "@/store/account";
+
+const stripeEnabled = process.env.NEXT_PUBLIC_STRIPE === "true";
 
 export default function Subscribe() {
+  const { t } = useTranslation();
   const [submitLoader, setSubmitLoader] = useState(false);
   const session = useSession();
 
@@ -14,10 +20,21 @@ export default function Subscribe() {
 
   const router = useRouter();
 
+  const { account } = useAccountStore();
+
+  useEffect(() => {
+    const hasInactiveSubscription =
+      account.id && !account.subscription?.active && stripeEnabled;
+
+    if (session.status === "authenticated" && !hasInactiveSubscription) {
+      router.push("/dashboard");
+    }
+  }, [session.status]);
+
   async function submit() {
     setSubmitLoader(true);
 
-    const redirectionToast = toast.loading("Redirecting to Stripe...");
+    const redirectionToast = toast.loading(t("redirecting_to_stripe"));
 
     const res = await fetch("/api/v1/payment?plan=" + plan);
     const data = await res.json();
@@ -33,18 +50,23 @@ export default function Subscribe() {
     >
       <div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-base-200 rounded-2xl shadow-md border border-neutral-content">
         <p className="sm:text-3xl text-2xl text-center font-extralight">
-          Subscribe to Linkwarden!
+          {t("subscribe_title")}
         </p>
 
         <div className="divider my-0"></div>
 
         <div>
           <p>
-            You will be redirected to Stripe, feel free to reach out to us at{" "}
+            <Trans
-            <a className="font-semibold" href="mailto:support@linkwarden.app">
+              i18nKey="subscribe_desc"
-              support@linkwarden.app
+              components={[
-            </a>{" "}
+                <a
-            in case of any issue.
+                  className="font-semibold"
+                  href="mailto:support@linkwarden.app"
+                  key={0}
+                />,
+              ]}
+            />
           </p>
         </div>
 
@@ -57,7 +79,7 @@ export default function Subscribe() {
                 : "hover:opacity-80"
             }`}
           >
-            <p>Monthly</p>
+            <p>{t("monthly")}</p>
           </button>
 
           <button
@@ -68,10 +90,12 @@ export default function Subscribe() {
                 : "hover:opacity-80"
             }`}
           >
-            <p>Yearly</p>
+            <p>{t("yearly")}</p>
           </button>
           <div className="absolute -top-3 -right-4 px-1 bg-red-600 text-sm text-white rounded-md rotate-[22deg]">
-            25% Off
+            {t("discount_percent", {
+              percent: 25,
+            })}
           </div>
         </div>
 
@@ -81,38 +105,47 @@ export default function Subscribe() {
             <span className="text-base text-neutral">/mo</span>
           </p>
           <p className="font-semibold">
-            Billed {plan === Plan.monthly ? "Monthly" : "Yearly"}
+            {plan === Plan.monthly ? t("billed_monthly") : t("billed_yearly")}
           </p>
           <fieldset className="w-full flex-col flex justify-evenly px-4 pb-4 pt-1 rounded-md border border-neutral-content">
             <legend className="w-fit font-extralight px-2 border border-neutral-content rounded-md text-xl">
-              Total
+              {t("total")}
             </legend>
 
             <p className="text-sm">
-              {process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS}-day free trial, then $
+              {plan === Plan.monthly
-              {plan === Plan.monthly ? "4 per month" : "36 annually"}
+                ? t("total_monthly_desc", {
+                    count: Number(process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS),
+                    monthlyPrice: "4",
+                  })
+                : t("total_annual_desc", {
+                    count: Number(process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS),
+                    annualPrice: "36",
+                  })}
             </p>
-            <p className="text-sm">+ VAT if applicable</p>
+            <p className="text-sm">{t("plus_tax")}</p>
           </fieldset>
         </div>
 
-        <AccentSubmitButton
+        <Button
           type="button"
           intent="accent"
           size="full"
           onClick={submit}
           loading={submitLoader}
         >
-          Complete Subscription!
+          {t("complete_subscription")}
-        </AccentSubmitButton>
+        </Button>
 
         <div
           onClick={() => signOut()}
           className="w-fit mx-auto cursor-pointer text-neutral font-semibold "
         >
-          Sign Out
+          {t("sign_out")}
         </div>
       </div>
     </CenteredForm>
   );
 }
+
+export { getServerSideProps };

pages/tags/[id].tsx

@@ -1,26 +1,26 @@
 import useLinkStore from "@/store/links";
 import { useRouter } from "next/router";
-import { FormEvent, use, useEffect, useState } from "react";
+import { FormEvent, useEffect, useState } from "react";
 import MainLayout from "@/layouts/MainLayout";
 import useTagStore from "@/store/tags";
-import SortDropdown from "@/components/SortDropdown";
 import { Sort, TagIncludingLinkCount, ViewMode } from "@/types/global";
 import useLinks from "@/hooks/useLinks";
 import { toast } from "react-hot-toast";
-import ViewDropdown from "@/components/ViewDropdown";
 import CardView from "@/components/LinkViews/Layouts/CardView";
 import ListView from "@/components/LinkViews/Layouts/ListView";
 import { dropdownTriggerer } from "@/lib/client/utils";
 import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal";
 import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
-import useCollectivePermissions from "@/hooks/useCollectivePermissions";
 import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
+import { useTranslation } from "next-i18next";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+import LinkListOptions from "@/components/LinkListOptions";
 
 export default function Index() {
+  const { t } = useTranslation();
   const router = useRouter();
 
-  const { links, selectedLinks, deleteLinksById, setSelectedLinks } =
+  const { links } = useLinkStore();
-    useLinkStore();
   const { tags, updateTag, removeTag } = useTagStore();
 
   const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
@@ -38,10 +38,6 @@ export default function Index() {
     if (editMode) return setEditMode(false);
   }, [router]);
 
-  const collectivePermissions = useCollectivePermissions(
-    selectedLinks.map((link) => link.collectionId as number)
-  );
-
   useLinks({ tagId: Number(router.query.id), sort: sortBy });
 
   useEffect(() => {
@@ -76,7 +72,7 @@ export default function Index() {
 
     setSubmitLoader(true);
 
-    const load = toast.loading("Applying...");
+    const load = toast.loading(t("applying_changes"));
 
     let response;
 
@@ -89,7 +85,7 @@ export default function Index() {
     toast.dismiss(load);
 
     if (response?.ok) {
-      toast.success("Tag Renamed!");
+      toast.success(t("tag_renamed"));
     } else toast.error(response?.data as string);
     setSubmitLoader(false);
     setRenameTag(false);
@@ -98,7 +94,7 @@ export default function Index() {
   const remove = async () => {
     setSubmitLoader(true);
 
-    const load = toast.loading("Applying...");
+    const load = toast.loading(t("applying_changes"));
 
     let response;
 
@@ -107,42 +103,13 @@ export default function Index() {
     toast.dismiss(load);
 
     if (response?.ok) {
-      toast.success("Tag Removed.");
+      toast.success(t("tag_deleted"));
       router.push("/links");
     } else toast.error(response?.data as string);
     setSubmitLoader(false);
     setRenameTag(false);
   };
 
-  const handleSelectAll = () => {
-    if (selectedLinks.length === links.length) {
-      setSelectedLinks([]);
-    } else {
-      setSelectedLinks(links.map((link) => link));
-    }
-  };
-
-  const bulkDeleteLinks = async () => {
-    const load = toast.loading(
-      `Deleting ${selectedLinks.length} Link${
-        selectedLinks.length > 1 ? "s" : ""
-      }...`
-    );
-
-    const response = await deleteLinksById(
-      selectedLinks.map((link) => link.id as number)
-    );
-
-    toast.dismiss(load);
-
-    response.ok &&
-      toast.success(
-        `Deleted ${selectedLinks.length} Link${
-          selectedLinks.length > 1 ? "s" : ""
-        }!`
-      );
-  };
-
   const [viewMode, setViewMode] = useState<string>(
     localStorage.getItem("viewMode") || ViewMode.Card
   );
@@ -159,7 +126,15 @@ export default function Index() {
   return (
     <MainLayout>
       <div className="p-5 flex flex-col gap-5 w-full">
-        <div className="flex gap-3 items-center justify-between">
+        <LinkListOptions
+          t={t}
+          viewMode={viewMode}
+          setViewMode={setViewMode}
+          sortBy={sortBy}
+          setSortBy={setSortBy}
+          editMode={editMode}
+          setEditMode={setEditMode}
+        >
           <div className="flex gap-3 items-center">
             <div className="flex gap-2 items-center font-thin">
               <i className={"bi-hash text-primary text-3xl"} />
@@ -223,7 +198,7 @@ export default function Index() {
                               setRenameTag(true);
                             }}
                           >
-                            Rename Tag
+                            {t("rename_tag")}
                           </div>
                         </li>
                         <li>
@@ -235,7 +210,7 @@ export default function Index() {
                               remove();
                             }}
                           >
-                            Remove Tag
+                            {t("delete_tag")}
                           </div>
                         </li>
                       </ul>
@@ -245,83 +220,8 @@ export default function Index() {
               )}
             </div>
           </div>
+        </LinkListOptions>
 
-          <div className="flex gap-2 items-center mt-2">
-            <div
-              role="button"
-              onClick={() => {
-                setEditMode(!editMode);
-                setSelectedLinks([]);
-              }}
-              className={`btn btn-square btn-sm btn-ghost ${
-                editMode
-                  ? "bg-primary/20 hover:bg-primary/20"
-                  : "hover:bg-neutral/20"
-              }`}
-            >
-              <i className="bi-pencil-fill text-neutral text-xl"></i>
-            </div>
-            <SortDropdown sortBy={sortBy} setSort={setSortBy} />
-            <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
-          </div>
-        </div>
-        {editMode && links.length > 0 && (
-          <div className="w-full flex justify-between items-center min-h-[32px]">
-            {links.length > 0 && (
-              <div className="flex gap-3 ml-3">
-                <input
-                  type="checkbox"
-                  className="checkbox checkbox-primary"
-                  onChange={() => handleSelectAll()}
-                  checked={
-                    selectedLinks.length === links.length && links.length > 0
-                  }
-                />
-                {selectedLinks.length > 0 ? (
-                  <span>
-                    {selectedLinks.length}{" "}
-                    {selectedLinks.length === 1 ? "link" : "links"} selected
-                  </span>
-                ) : (
-                  <span>Nothing selected</span>
-                )}
-              </div>
-            )}
-            <div className="flex gap-3">
-              <button
-                onClick={() => setBulkEditLinksModal(true)}
-                className="btn btn-sm btn-accent text-white w-fit ml-auto"
-                disabled={
-                  selectedLinks.length === 0 ||
-                  !(
-                    collectivePermissions === true ||
-                    collectivePermissions?.canUpdate
-                  )
-                }
-              >
-                Edit
-              </button>
-              <button
-                onClick={(e) => {
-                  (document?.activeElement as HTMLElement)?.blur();
-                  e.shiftKey
-                    ? bulkDeleteLinks()
-                    : setBulkDeleteLinksModal(true);
-                }}
-                className="btn btn-sm bg-red-500 hover:bg-red-400 text-white w-fit ml-auto"
-                disabled={
-                  selectedLinks.length === 0 ||
-                  !(
-                    collectivePermissions === true ||
-                    collectivePermissions?.canDelete
-                  )
-                }
-              >
-                Delete
-              </button>
-            </div>
-          </div>
-        )}
         <LinkComponent
           editMode={editMode}
           links={links.filter((e) =>
@@ -346,3 +246,5 @@ export default function Index() {
     </MainLayout>
   );
 }
+
+export { getServerSideProps };

prisma/migrations/20240528194553_added_locale_field_for_users/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "locale" TEXT NOT NULL DEFAULT 'en';

prisma/schema.prisma

@@ -33,13 +33,14 @@ model User {
   emailVerified           DateTime?
   unverifiedNewEmail      String?
   image                   String?
-  accounts                Account[]
   password                String?
+  locale                  String                @default("en")
+  accounts                Account[]
   collections             Collection[]
   tags                    Tag[]
   pinnedLinks             Link[]
   collectionsJoined       UsersAndCollections[]
-  collectionOrder         Int[]                @default([])
+  collectionOrder         Int[]                 @default([])
   whitelistedUsers        WhitelistedUser[]
   accessTokens            AccessToken[]
   subscriptions           Subscription?

public/locales/en/common.json

@@ -0,0 +1,363 @@
+{
+  "user_administration": "User Administration",
+  "search_users": "Search for Users",
+  "no_users_found": "No users found.",
+  "no_user_found_in_search": "No users found with the given search query.",
+  "username": "Username",
+  "email": "Email",
+  "subscribed": "Subscribed",
+  "created_at": "Created At",
+  "not_available": "N/A",
+  "check_your_email": "Please check your Email",
+  "authenticating": "Authenticating...",
+  "verification_email_sent": "Verification email sent.",
+  "verification_email_sent_desc": "A sign in link has been sent to your email address. If you don't see the email, check your spam folder.",
+  "resend_email": "Resend Email",
+  "invalid_credentials": "Invalid credentials.",
+  "fill_all_fields": "Please fill out all the fields.",
+  "enter_credentials": "Enter your credentials",
+  "username_or_email": "Username or Email",
+  "password": "Password",
+  "confirm_password": "Confirm Password",
+  "forgot_password": "Forgot Password?",
+  "login": "Login",
+  "or_continue_with": "Or continue with",
+  "new_here": "New here?",
+  "sign_up": "Sign Up",
+  "sign_in_to_your_account": "Sign in to your account",
+  "dashboard_desc": "A brief overview of your data",
+  "link": "Link",
+  "links": "Links",
+  "collection": "Collection",
+  "collections": "Collections",
+  "tag": "Tag",
+  "tags": "Tags",
+  "recent": "Recent",
+  "recent_links_desc": "Recently added Links",
+  "view_all": "View All",
+  "view_added_links_here": "View Your Recently Added Links Here!",
+  "view_added_links_here_desc": "This section will view your latest added Links across every Collections you have access to.",
+  "add_link": "Add New Link",
+  "import_links": "Import Links",
+  "from_linkwarden": "From Linkwarden",
+  "from_html": "From Bookmarks HTML file",
+  "from_wallabag": "From Wallabag (JSON file)",
+  "pinned": "Pinned",
+  "pinned_links_desc": "Your pinned Links",
+  "pin_favorite_links_here": "Pin Your Favorite Links Here!",
+  "pin_favorite_links_here_desc": "You can Pin your favorite Links by clicking on the three dots on each Link and clicking Pin to Dashboard.",
+  "sending_password_link": "Sending password recovery link...",
+  "password_email_prompt": "Enter your email so we can send you a link to create a new password.",
+  "send_reset_link": "Send Reset Link",
+  "reset_email_sent_desc": "Check your email for a link to reset your password. If it doesn’t appear within a few minutes, check your spam folder.",
+  "back_to_login": "Back to Login",
+  "email_sent": "Email Sent!",
+  "passwords_mismatch": "Passwords do not match.",
+  "password_too_short": "Passwords must be at least 8 characters.",
+  "creating_account": "Creating Account...",
+  "account_created": "Account Created!",
+  "trial_offer_desc": "Unlock {{count}} days of Premium Service at no cost!",
+  "register_desc": "Create a new account",
+  "registration_disabled_desc": "Registration is disabled for this instance, please contact the admin in case of any issues.",
+  "enter_details": "Enter your details",
+  "display_name": "Display Name",
+  "sign_up_agreement": "By signing up, you agree to our <0>Terms of Service</0> and <1>Privacy Policy</1>.",
+  "need_help": "Need help?",
+  "get_in_touch": "Get in touch",
+  "already_registered": "Already have an account?",
+  "deleting_selections": "Deleting selections...",
+  "links_deleted": "{{count}} Links deleted.",
+  "link_deleted": "1 Link deleted.",
+  "links_selected": "{{count}} Links selected",
+  "link_selected": "1 Link selected",
+  "nothing_selected": "Nothing selected",
+  "edit": "Edit",
+  "delete": "Delete",
+  "nothing_found": "Nothing found.",
+  "redirecting_to_stripe": "Redirecting to Stripe...",
+  "subscribe_title": "Subscribe to Linkwarden!",
+  "subscribe_desc": "You will be redirected to Stripe, feel free to reach out to us at <0>support@linkwarden.app</0> in case of any issue.",
+  "monthly": "Monthly",
+  "yearly": "Yearly",
+  "discount_percent": "{{percent}}% Off",
+  "billed_monthly": "Billed Monthly",
+  "billed_yearly": "Billed Yearly",
+  "total": "Total",
+  "total_annual_desc": "{{count}}-day free trial, then ${{annualPrice}} annually",
+  "total_monthly_desc": "{{count}}-day free trial, then ${{monthlyPrice}} per month",
+  "plus_tax": "+ VAT if applicable",
+  "complete_subscription": "Complete Subscription",
+  "sign_out": "Sign Out",
+  "access_tokens": "Access Tokens",
+  "access_tokens_description": "Access Tokens can be used to access Linkwarden from other apps and services without giving away your Username and Password.",
+  "new_token": "New Access Token",
+  "name": "Name",
+  "created": "Created!",
+  "expires": "Expires",
+  "accountSettings": "Account Settings",
+  "language": "Language",
+  "profile_photo": "Profile Photo",
+  "upload_new_photo": "Upload a new photo...",
+  "remove_photo": "Remove Photo",
+  "make_profile_private": "Make profile private",
+  "profile_privacy_info": "This will limit who can find and add you to new Collections.",
+  "whitelisted_users": "Whitelisted Users",
+  "whitelisted_users_info": "Please provide the Username of the users you wish to grant visibility to your profile. Separated by comma.",
+  "whitelisted_users_placeholder": "Your profile is hidden from everyone right now...",
+  "save_changes": "Save Changes",
+  "import_export": "Import & Export",
+  "import_data": "Import your data from other platforms.",
+  "download_data": "Download your data instantly.",
+  "export_data": "Export Data",
+  "delete_account": "Delete Account",
+  "delete_account_warning": "This will permanently delete ALL the Links, Collections, Tags, and archived data you own.",
+  "cancel_subscription_notice": "It will also cancel your subscription.",
+  "account_deletion_page": "Account deletion page",
+  "applying_settings": "Applying settings...",
+  "settings_applied": "Settings Applied!",
+  "email_change_request": "Email change request sent. Please verify the new email address.",
+  "image_upload_size_error": "Please select a PNG or JPEG file that's less than 1MB.",
+  "image_upload_format_error": "Invalid file format.",
+  "importing_bookmarks": "Importing bookmarks...",
+  "import_success": "Imported the bookmarks! Reloading the page...",
+  "more_coming_soon": "More coming soon!",
+  "billing_settings": "Billing Settings",
+  "manage_subscription_intro": "To manage/cancel your subscription, visit the",
+  "billing_portal": "Billing Portal",
+  "help_contact_intro": "If you still need help or encountered any issues, feel free to reach out to us at:",
+  "fill_required_fields": "Please fill the required fields.",
+  "deleting_message": "Deleting everything, please wait...",
+  "delete_warning": "This will permanently delete all the Links, Collections, Tags, and archived data you own. It will also log you out. This action is irreversible!",
+  "optional": "Optional",
+  "feedback_help": "(but it really helps us improve!)",
+  "reason_for_cancellation": "Reason for cancellation",
+  "please_specify": "Please specify",
+  "customer_service": "Customer Service",
+  "low_quality": "Low Quality",
+  "missing_features": "Missing Features",
+  "switched_service": "Switched Service",
+  "too_complex": "Too Complex",
+  "too_expensive": "Too Expensive",
+  "unused": "Unused",
+  "other": "Other",
+  "more_information": "More information (the more details, the more helpful it'd be)",
+  "feedback_placeholder": "e.g. I needed a feature that...",
+  "delete_your_account": "Delete Your Account",
+  "change_password": "Change Password",
+  "password_length_error": "Passwords must be at least 8 characters.",
+  "applying_changes": "Applying...",
+  "password_change_instructions": "To change your password, please fill out the following. Your password should be at least 8 characters.",
+  "old_password": "Old Password",
+  "new_password": "New Password",
+  "preference": "Preference",
+  "select_theme": "Select Theme",
+  "dark": "Dark",
+  "light": "Light",
+  "archive_settings": "Archive Settings",
+  "formats_to_archive": "Formats to Archive/Preserve webpages:",
+  "screenshot": "Screenshot",
+  "pdf": "PDF",
+  "archive_org_snapshot": "Archive.org Snapshot",
+  "link_settings": "Link Settings",
+  "prevent_duplicate_links": "Prevent duplicate links",
+  "clicking_on_links_should": "Clicking on Links should:",
+  "open_original_content": "Open the original content",
+  "open_pdf_if_available": "Open PDF, if available",
+  "open_readable_if_available": "Open Readable, if available",
+  "open_screenshot_if_available": "Open Screenshot, if available",
+  "tag_renamed": "Tag renamed!",
+  "tag_deleted": "Tag deleted!",
+  "rename_tag": "Rename Tag",
+  "delete_tag": "Delete Tag",
+  "list_created_with_linkwarden": "List created with Linkwarden",
+  "by_author": "By {{author}}.",
+  "by_author_and_other": "By {{author}} and {{count}} other.",
+  "by_author_and_others": "By {{author}} and {{count}} others.",
+  "search_count_link": "Search {{count}} Link",
+  "search_count_links": "Search {{count}} Links",
+  "collection_is_empty": "This Collection is empty...",
+  "all_links": "All Links",
+  "all_links_desc": "Links from every Collection",
+  "you_have_not_added_any_links": "You Haven't Created Any Links Yet",
+  "collections_you_own": "Collections you own",
+  "new_collection": "New Collection",
+  "other_collections": "Other Collections",
+  "other_collections_desc": "Shared collections you're a member of",
+  "showing_count_results": "Showing {{count}} results",
+  "showing_count_result": "Showing {{count}} result",
+  "edit_collection_info": "Edit Collection Info",
+  "share_and_collaborate": "Share and Collaborate",
+  "view_team": "View Team",
+  "team": "Team",
+  "create_subcollection": "Create Sub-Collection",
+  "delete_collection": "Delete Collection",
+  "leave_collection": "Leave Collection",
+  "email_verified_signing_out": "Email verified. Signing out...",
+  "invalid_token": "Invalid token.",
+  "sending_password_recovery_link": "Sending password recovery link...",
+  "please_fill_all_fields": "Please fill out all the fields.",
+  "password_updated": "Password Updated!",
+  "reset_password": "Reset Password",
+  "enter_email_for_new_password": "Enter your email so we can send you a link to create a new password.",
+  "update_password": "Update Password",
+  "password_successfully_updated": "Your password has been successfully updated.",
+  "user_already_member": "User already exists.",
+  "you_are_already_collection_owner": "You are already the collection owner.",
+  "date_newest_first": "Date (Newest First)",
+  "date_oldest_first": "Date (Oldest First)",
+  "name_az": "Name (A-Z)",
+  "name_za": "Name (Z-A)",
+  "description_az": "Description (A-Z)",
+  "description_za": "Description (Z-A)",
+  "all_rights_reserved": "© {{date}} <0>Linkwarden</0>. All rights reserved.",
+  "you_have_no_collections": "You have no Collections...",
+  "you_have_no_tags": "You have no Tags...",
+  "cant_change_collection_you_dont_own": "You can't make changes to a collection you don't own.",
+  "account": "Account",
+  "billing": "Billing",
+  "linkwarden_version": "Linkwarden {{version}}",
+  "help": "Help",
+  "github": "GitHub",
+  "twitter": "Twitter",
+  "mastodon": "Mastodon",
+  "link_preservation_in_queue": "LThe Link preservation is currently in the queue",
+  "check_back_later": "Please check back later to see the result",
+  "settings": "Settings",
+  "switch_to": "Switch to {{theme}}",
+  "logout": "Logout",
+  "start_journey": "Start your journey by creating a new Link!",
+  "create_new_link": "Create New Link",
+  "new_link": "New Link",
+  "create_new": "Create New...",
+  "pwa_install_prompt": "Install Linkwarden to your home screen for a faster access and enhanced experience. <0>Learn more</0>",
+  "full_content": "Full Content",
+  "slower": "Slower",
+  "new_version_announcement": "See what's new in <0>Linkwarden {{version}}!</0>",
+  "creating": "Creating...",
+  "upload_file": "Upload File",
+  "file": "File",
+  "file_types": "PDF, PNG, JPG (Up to {{size}} MB)",
+  "description": "Description",
+  "auto_generated": "Will be auto generated if nothing is provided.",
+  "example_link": "e.g. Example Link",
+  "hide": "Hide",
+  "more": "More",
+  "options": "Options",
+  "description_placeholder": "Notes, thoughts, etc.",
+  "deleting": "Deleting...",
+  "token_revoked": "Token Revoked.",
+  "revoke_token": "Revoke Token",
+  "revoke_confirmation": "Are you sure you want to revoke this Access Token? Any apps or services using this token will no longer be able to access Linkwarden using it.",
+  "revoke": "Revoke",
+  "sending_request": "Sending request...",
+  "link_being_archived": "Link is being archived...",
+  "preserved_formats": "Preserved Formats",
+  "available_formats": "The following formats are available for this link:",
+  "readable": "Readable",
+  "preservation_in_queue": "Link preservation is in the queue",
+  "view_latest_snapshot": "View latest snapshot on archive.org",
+  "refresh_preserved_formats": "Refresh Preserved Formats",
+  "this_deletes_current_preservations": "This deletes the current preservations",
+  "create_new_user": "Create New User",
+  "placeholder_johnny": "Johnny",
+  "placeholder_email": "johnny@example.com",
+  "placeholder_john": "john",
+  "user_created": "User Created!",
+  "fill_all_fields_error": "Please fill out all the fields.",
+  "password_change_note": "<0>Note:</0> Please make sure you inform the user that they need to change their password.",
+  "create_user": "Create User",
+  "creating_token": "Creating Token...",
+  "token_created": "Token Created!",
+  "access_token_created": "Access Token Created",
+  "token_creation_notice": "Your new token has been created. Please copy it and store it somewhere safe. You will not be able to see it again.",
+  "copied_to_clipboard": "Copied to clipboard!",
+  "copy_to_clipboard": "Copy to Clipboard",
+  "create_access_token": "Create an Access Token",
+  "expires_in": "Expires in",
+  "token_name_placeholder": "e.g. For the iOS shortcut",
+  "create_token": "Create Access Token",
+  "7_days": "7 Days",
+  "30_days": "30 Days",
+  "60_days": "60 Days",
+  "90_days": "90 Days",
+  "no_expiration": "No Expiration",
+  "creating_link": "Creating link...",
+  "link_created": "Link created!",
+  "link_name_placeholder": "Will be auto generated if left empty.",
+  "link_url_placeholder": "e.g. http://example.com/",
+  "link_description_placeholder": "Notes, thoughts, etc.",
+  "more_options": "More Options",
+  "hide_options": "Hide Options",
+  "create_link": "Create Link",
+  "new_sub_collection": "New Sub-Collection",
+  "for_collection": "For {{name}}",
+  "create_new_collection": "Create a New Collection",
+  "color": "Color",
+  "reset": "Reset",
+  "collection_name_placeholder": "e.g. Example Collection",
+  "collection_description_placeholder": "The purpose of this Collection...",
+  "create_collection_button": "Create Collection",
+  "password_change_warning": "Please confirm your password before changing your email address.",
+  "stripe_update_note": " Updating this field will change your billing email on Stripe as well.",
+  "sso_will_be_removed_warning": "If you change your email address, any existing {{service}} SSO connections will be removed.",
+  "old_email": "Old Email",
+  "new_email": "New Email",
+  "confirm": "Confirm",
+  "edit_link": "Edit Link",
+  "updating": "Updating...",
+  "updated": "Updated!",
+  "placeholder_example_link": "e.g. Example Link",
+  "make_collection_public": "Make Collection Public",
+  "make_collection_public_checkbox": "Make this a public collection",
+  "make_collection_public_desc": "This will allow anyone to view this collection and it's users.",
+  "sharable_link_guide": "Sharable Link (Click to copy)",
+  "copied": "Copied!",
+  "members": "Members",
+  "members_username_placeholder": "Username (without the '@')",
+  "owner": "Owner",
+  "admin": "Admin",
+  "contributor": "Contributor",
+  "viewer": "Viewer",
+  "viewer_desc": "Read-only access",
+  "contributor_desc": "Can view and create Links",
+  "admin_desc": "Full access to all Links",
+  "remove_member": "Remove Member",
+  "placeholder_example_collection": "e.g. Example Collection",
+  "placeholder_collection_purpose": "The purpose of this Collection...",
+  "deleting_user": "Deleting...",
+  "user_deleted": "User Deleted.",
+  "delete_user": "Delete User",
+  "confirm_user_deletion": "Are you sure you want to remove this user?",
+  "irreversible_action_warning": "This action is irreversible!",
+  "delete_confirmation": "Delete, I know what I'm doing",
+  "delete_link": "Delete Link",
+  "deleted": "Deleted.",
+  "link_deletion_confirmation_message": "Are you sure you want to delete this Link?",
+  "warning": "Warning",
+  "irreversible_warning": "This action is irreversible!",
+  "shift_key_tip": "Hold the Shift key while clicking 'Delete' to bypass this confirmation in the future.",
+  "deleting_collection": "Deleting...",
+  "collection_deleted": "Collection Deleted.",
+  "confirm_deletion_prompt": "To confirm, type \"{{name}}\" in the box below:",
+  "type_name_placeholder": "Type \"{{name}}\" Here.",
+  "deletion_warning": "Deleting this collection will permanently erase all its contents, and it will become inaccessible to everyone, including members with previous access.",
+  "leave_prompt": "Click the button below to leave the current collection.",
+  "leave": "Leave",
+  "edit_links": "Edit {{count}} Links",
+  "move_to_collection": "Move to Collection",
+  "add_tags": "Add Tags",
+  "remove_previous_tags": "Remove previous tags",
+  "delete_links": "Delete {{count}} Links",
+  "links_deletion_confirmation_message": "Are you sure you want to delete {{count}} Links? ",
+  "warning_irreversible": "Warning: This action is irreversible!",
+  "shift_key_instruction": "Hold the 'Shift' key while clicking 'Delete' to bypass this confirmation in the future.",
+  "link_selection_error": "You don't have permission to edit or delete this item.",
+  "no_description": "No description provided.",
+  "applying": "Applying...",
+  "unpin": "Unpin",
+  "pin_to_dashboard": "Pin to Dashboard",
+  "show_link_details": "Show Link Details",
+  "hide_link_details": "Hide Link Details",
+  "link_pinned": "Link Pinned!",
+  "link_unpinned": "Link Unpinned!"
+}

yarn.lock

@@ -666,6 +666,13 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.23.2", "@babel/runtime@^7.23.9":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.6.tgz#5b76eb89ad45e2e4a0a8db54c456251469a3358e"
+  integrity sha512-Ja18XcETdEl5mzzACGd+DKgaGJzPTCow7EglgwTmHdwokzDFYh/MHua6lU6DV/hjF2IaOJ4oX2nqnjG7RElKOw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/runtime@^7.24.1":
   version "7.24.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.5.tgz#230946857c053a36ccc66e1dd03b17dd0c4ed02c"
@@ -1960,7 +1967,7 @@
     "@types/minimatch" "*"
     "@types/node" "*"
 
-"@types/hoist-non-react-statics@^3.3.0":
+"@types/hoist-non-react-statics@^3.3.0", "@types/hoist-non-react-statics@^3.3.4":
   version "3.3.5"
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz#dab7867ef789d87e2b4b0003c9d65c49cc44a494"
   integrity sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==
@@ -2683,6 +2690,11 @@ core-js@^2.6.12:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
   integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
 
+core-js@^3:
+  version "3.37.1"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.37.1.tgz#d21751ddb756518ac5a00e4d66499df981a62db9"
+  integrity sha512-Xn6qmxrQZyB0FFY8E3bgRXei3lWDJHhvI+u0q9TKIYM49G8pAr0FgnnrFRAmsbptZL1yxRADVXn+x5AGsbBfyw==
+
 core-util-is@1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -3833,6 +3845,13 @@ html-encoding-sniffer@^3.0.0:
   dependencies:
     whatwg-encoding "^2.0.0"
 
+html-parse-stringify@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz#dfc1017347ce9f77c8141a507f233040c59c55d2"
+  integrity sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==
+  dependencies:
+    void-elements "3.1.0"
+
 http-errors@1.7.3:
   version "1.7.3"
   resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.3.tgz#6c619e4f9c60308c38519498c14fbb10aacebb06"
@@ -3870,6 +3889,18 @@ https-proxy-agent@^5.0.0, https-proxy-agent@^5.0.1:
     agent-base "6"
     debug "4"
 
+i18next-fs-backend@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/i18next-fs-backend/-/i18next-fs-backend-2.3.1.tgz#0c7d2459ff4a039e2b3228131809fbc0e74ff1a8"
+  integrity sha512-tvfXskmG/9o+TJ5Fxu54sSO5OkY6d+uMn+K6JiUGLJrwxAVfer+8V3nU8jq3ts9Pe5lXJv4b1N7foIjJ8Iy2Gg==
+
+i18next@^23.11.5:
+  version "23.11.5"
+  resolved "https://registry.yarnpkg.com/i18next/-/i18next-23.11.5.tgz#d71eb717a7e65498d87d0594f2664237f9e361ef"
+  integrity sha512-41pvpVbW9rhZPk5xjCX2TPJi2861LEig/YRhUkY+1FQ2IQPS0bKUDYnEqY8XPPbB48h1uIwLnP9iiEfuSl20CA==
+  dependencies:
+    "@babel/runtime" "^7.23.2"
+
 iconv-lite@0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -4569,6 +4600,17 @@ next-auth@^4.22.1:
     preact-render-to-string "^5.1.19"
     uuid "^8.3.2"
 
+next-i18next@^15.3.0:
+  version "15.3.0"
+  resolved "https://registry.yarnpkg.com/next-i18next/-/next-i18next-15.3.0.tgz#b4530c80573854d00f95229af405e1e5beedbf18"
+  integrity sha512-bq7Cc9XJFcmGOCLnyEtHaeJ3+JJNsI/8Pkj9BaHAnhm4sZ9vNNC4ZsaqYnlRZ7VH5ypSo73fEqLK935jLsmCvQ==
+  dependencies:
+    "@babel/runtime" "^7.23.2"
+    "@types/hoist-non-react-statics" "^3.3.4"
+    core-js "^3"
+    hoist-non-react-statics "^3.3.2"
+    i18next-fs-backend "^2.3.1"
+
 next@13.4.12:
   version "13.4.12"
   resolved "https://registry.yarnpkg.com/next/-/next-13.4.12.tgz#809b21ea0aabbe88ced53252c88c4a5bd5af95df"
@@ -5195,6 +5237,14 @@ react-hot-toast@^2.4.1:
   dependencies:
     goober "^2.1.10"
 
+react-i18next@^14.1.2:
+  version "14.1.2"
+  resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-14.1.2.tgz#cd57a755f25a32a5fcc3dbe546cf3cc62b4f3ebd"
+  integrity sha512-FSIcJy6oauJbGEXfhUgVeLzvWBhIBIS+/9c6Lj4niwKZyGaGb4V4vUbATXSlsHJDXXB+ociNxqFNiFuV1gmoqg==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    html-parse-stringify "^3.0.1"
+
 react-image-file-resizer@^0.4.8:
   version "0.4.8"
   resolved "https://registry.yarnpkg.com/react-image-file-resizer/-/react-image-file-resizer-0.4.8.tgz#85f4ae4469fd2867d961568af660ef403d7a79af"
@@ -6176,6 +6226,11 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
+void-elements@3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09"
+  integrity sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==
+
 w3c-xmlserializer@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz#aebdc84920d806222936e3cdce408e32488a3073"