added internationalization to pages [WIP]

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

@@ -42,6 +42,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,7 @@
 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";
 
 interface Props {
   text?: string;

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

next-i18next.config.js

@@ -4,4 +4,5 @@ module.exports = {
     defaultLocale: "en",
     locales: ["en"],
   },
+  reloadOnPrerender: process.env.NODE_ENV === "development",
 };

pages/admin.tsx

@@ -6,6 +6,7 @@ import Link from "next/link";
 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: {
@@ -64,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);
@@ -95,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 ? (
@@ -111,70 +112,4 @@ export default function Admin() {
   );
 }
 
-const UserListing = (
-  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>
-  );
-};
-
 export { getServerSideProps };

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

@@ -5,6 +5,8 @@ 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,7 +90,6 @@ export default function ResetPassword() {
                   }
                 />
               </div>
-
               <AccentSubmitButton
                 type="submit"
                 intent="accent"
@@ -101,16 +97,15 @@ export default function ResetPassword() {
                 size="full"
                 loading={submitLoader}
               >
-                Update Password
+                {t("update_password")}
               </AccentSubmitButton>
             </>
           ) : (
             <>
-              <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,11 +2,14 @@ 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();
 
   useEffect(() => {
+    const { t } = useTranslation();
     const token = router.query.token;
 
     if (!token || typeof token !== "string") {
@@ -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}
+          setSortBy={setSortBy}
+          editMode={
+            permissions === true ||
             permissions?.canUpdate ||
-                permissions?.canDelete) && (
+            permissions?.canDelete
-                <div
+              ? editMode
-                  role="button"
+              : undefined
-                  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
           }
-                />
+          setEditMode={
-                {selectedLinks.length > 0 ? (
+            permissions === true ||
-                  <span>
+            permissions?.canUpdate ||
-                    {selectedLinks.length}{" "}
+            permissions?.canDelete
-                    {selectedLinks.length === 1 ? "link" : "links"} selected
+              ? setEditMode
-                  </span>
+              : undefined
-                ) : (
-                  <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
+          <p>
-              </button>
+            {activeCollection?._count?.links === 1
-              <button
+              ? t("showing_count_result", {
-                onClick={(e) => {
+                  count: activeCollection?._count?.links,
-                  (document?.activeElement as HTMLElement)?.blur();
+                })
-                  e.shiftKey
+              : t("showing_count_results", {
-                    ? bulkDeleteLinks()
+                  count: activeCollection?._count?.links,
-                    : setBulkDeleteLinksModal(true);
+                })}
-                }}
+          </p>
-                className="btn btn-sm bg-red-500 hover:bg-red-400 text-white w-fit ml-auto"
+        </LinkListOptions>
-                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

@@ -4,12 +4,15 @@ 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
@@ -93,19 +93,16 @@ export default function Forgot() {
                 size="full"
                 loading={submitLoader}
               >
-                Send Login Link
+                {t("send_reset_link")}
               </AccentSubmitButton>
             </>
           ) : (
-            <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/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

@@ -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,7 +128,7 @@ export default function Login({
                   className="text-neutral font-semibold"
                   data-testid="forgot-password-link"
                 >
-                  Forgot Password?
+                  {t("forgot_password")}
                 </Link>
               </div>
             )}
@@ -124,11 +140,11 @@ export default function Login({
             data-testid="submit-login-button"
             loading={submitLoader}
           >
-            Login
+            {t("login")}
           </AccentSubmitButton>
 
           {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,11 +153,9 @@ 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}
-
           <AccentSubmitButton
             type="button"
             onClick={() => loginUserButton(value.method)}
@@ -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
-            <SearchBar
+            t={t}
-              placeholder={`Search ${collection._count?.links} Links`}
+            viewMode={viewMode}
-            />
+            setViewMode={setViewMode}
-
+            sortBy={sortBy}
-            <div className="flex gap-2 items-center w-fit">
+            setSortBy={setSortBy}
-              <FilterSearchDropdown
             searchFilter={searchFilter}
             setSearchFilter={setSearchFilter}
+          >
+            <SearchBar
+              placeholder={
+                collection._count?.links === 1
+                  ? t("search_count_link", {
+                      count: collection._count?.links,
+                    })
+                  : t("search_count_links", {
+                      count: collection._count?.links,
+                    })
+              }
             />
-
+          </LinkListOptions>
-              <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

@@ -7,7 +7,12 @@ import CenteredForm from "@/layouts/CenteredForm";
 import TextInput from "@/components/TextInput";
 import AccentSubmitButton 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,11 +122,9 @@ 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}
-
           <AccentSubmitButton
             type="button"
             onClick={() => loginUserButton(value.method)}
@@ -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,36 +249,27 @@ 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
+                    i18nKey="sign_up_agreement"
+                    components={[
                       <Link
                         href="https://linkwarden.app/tos"
-                    className="font-semibold underline"
+                        className="font-semibold"
                         data-testid="terms-of-service-link"
                       >
-                    Terms of Service
+                        Terms of Services
-                  </Link>{" "}
+                      </Link>,
-                  and{" "}
                       <Link
                         href="https://linkwarden.app/privacy-policy"
-                    className="font-semibold underline"
+                        className="font-semibold"
                         data-testid="privacy-policy-link"
                       >
                         Privacy Policy
-                  </Link>
+                      </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}
@@ -288,27 +281,97 @@ export default function Register({
               size="full"
               data-testid="register-button"
             >
-              Sign Up
+              {t("sign_up")}
             </AccentSubmitButton>
 
             {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">
+                <p className="w-fit text-neutral">{t("already_registered")}</p>
                 <Link
                   href={"/login"}
-                className="block font-bold"
+                  className="font-bold text-base-content"
                   data-testid="login-link"
                 >
-                Login
+                  {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>
       )}
     </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
-          <PageHeader icon={"bi-search"} title={"Search Results"} />
+          t={t}
-
-          <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}
-              />
+          viewMode={viewMode}
-              <SortDropdown sortBy={sortBy} setSort={setSortBy} />
+          setViewMode={setViewMode}
-              <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
+          sortBy={sortBy}
-            </div>
+          setSortBy={setSortBy}
-          </div>
+          editMode={editMode}
-        </div>
+          setEditMode={setEditMode}
-
-        {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
+          <PageHeader icon={"bi-search"} title={"Search Results"} />
-              </button>
+        </LinkListOptions>
-              <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

@@ -15,17 +15,16 @@ 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
@@ -45,6 +44,8 @@ export default function Account() {
         } as unknown as AccountSettings)
   );
 
+  const { t } = useTranslation();
+
   function objectIsEmpty(obj: object) {
     return Object.keys(obj).length === 0;
   }
@@ -68,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,
@@ -91,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);
   };
 
@@ -158,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>
 
@@ -175,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"
@@ -183,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"
@@ -201,9 +186,8 @@ export default function Account() {
                 />
               </div>
             ) : undefined}
-
             <div>
-              <p className="mb-2">Language</p>
+              <p className="mb-2">{t("language")}</p>
               <select
                 onChange={(e) => {
                   setUser({ ...user, locale: e.target.value });
@@ -221,12 +205,13 @@ export default function Account() {
                     ) || ""}
                   </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}
@@ -244,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"
@@ -272,7 +257,7 @@ export default function Account() {
                           })
                         }
                       >
-                        Remove Photo
+                        {t("remove_photo")}
                       </div>
                     </li>
                   )}
@@ -284,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)}
               />
@@ -319,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>
 
@@ -334,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}
@@ -345,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">
@@ -354,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"
@@ -374,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"
@@ -394,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"
@@ -414,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>
@@ -428,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>
 
@@ -459,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);
   };
@@ -65,25 +64,16 @@ export default function Delete() {
         </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>
-            <p className="mb-2">Confirm Your Password</p>
+          <p className="mb-2">{t("confirm_password")}</p>
-
           <TextInput
             value={password}
             onChange={(e) => setPassword(e.target.value)}
@@ -92,44 +82,43 @@ export default function Delete() {
             type="password"
           />
         </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 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,24 @@ 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"
+              components={[
+                <a
+                  className="font-semibold"
+                  href="mailto:support@linkwarden.app"
+                >
                   support@linkwarden.app
-            </a>{" "}
+                </a>,
-            in case of any issue.
+              ]}
+            />
           </p>
         </div>
 
@@ -57,7 +80,7 @@ export default function Subscribe() {
                 : "hover:opacity-80"
             }`}
           >
-            <p>Monthly</p>
+            <p>{t("monthly")}</p>
           </button>
 
           <button
@@ -68,10 +91,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,18 +106,25 @@ 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>
 
@@ -103,16 +135,18 @@ export default function Subscribe() {
           onClick={submit}
           loading={submitLoader}
         >
-          Complete Subscription!
+          {t("complete_subscription")}
         </AccentSubmitButton>
 
         <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 };

public/locales/en/common.json

@@ -1,3 +1,211 @@
 {
-  "user_administration": "User Administration"
+  "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/> 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",
+  "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)"
 }