feat: localisation and multi-lang support (#95)

* feat: setup localisation with lingui

* Fix hydration and locale issues

* Add missing translations and tweak selector styling

* Extend language support

* Update lang support

* Extend lang support

* Fix build and add dyanmic imports

apps/web/src/views/public/board/CardModal.tsx

@@ -1,8 +1,10 @@
-import { authClient } from "@kan/auth/client";
 import { useRouter } from "next/router";
+import { t } from "@lingui/core/macro";
 import { HiXMark } from "react-icons/hi2";
-import Editor from "~/components/Editor";
 
+import { authClient } from "@kan/auth/client";
+
+import Editor from "~/components/Editor";
 import { useModal } from "~/providers/modal";
 import { api } from "~/utils/api";
 import ActivityList from "~/views/card/components/ActivityList";
@@ -99,7 +101,7 @@ export function CardModal({
           )}
           <div className="border-t-[1px] border-light-600 pb-4 pt-12 dark:border-dark-400">
             <h2 className="text-md pb-4 font-medium text-light-900 dark:text-dark-1000">
-              Activity
+              {t`Activity`}
             </h2>
             <div>
               {cardPublicId && (

apps/web/src/views/public/board/index.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
+import { t } from "@lingui/core/macro";
 import { keepPreviousData } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
 import { HiLink } from "react-icons/hi2";
@@ -47,9 +48,9 @@ export default function PublicBoardView() {
           }
 
           showPopup({
-            header: "Link copied",
+            header: t`Link copied`,
             icon: "success",
-            message: "Board URL copied to clipboard",
+            message: t`Board URL copied to clipboard`,
           });
         }}
         className="rounded p-1.5 transition-all hover:bg-light-200 dark:hover:bg-dark-100"
@@ -82,7 +83,7 @@ export default function PublicBoardView() {
   return (
     <>
       <PageHead
-        title={`${data?.name ?? "Board"} | ${data?.workspace?.name ?? "Workspace"}`}
+        title={`${data?.name ?? "Board"} | ${data?.workspace.name ?? "Workspace"}`}
       />
       <style jsx global>{`
         html {
@@ -137,7 +138,7 @@ export default function PublicBoardView() {
                       {list.cards.map((card) => (
                         <Link
                           key={card.publicId}
-                          href={`/${data.workspace?.slug}/${data.slug}/${card.publicId}`}
+                          href={`/${data.workspace.slug}/${data.slug}/${card.publicId}`}
                           className={`mb-2 flex !cursor-pointer flex-col`}
                           shallow={true}
                           onClick={() => {
@@ -177,7 +178,7 @@ export default function PublicBoardView() {
       <Modal modalSize={"md"} positionFromTop={"sm"}>
         <CardModal
           cardPublicId={cardPublicId}
-          workspaceSlug={data?.workspace?.slug}
+          workspaceSlug={data?.workspace.slug}
           boardSlug={data?.slug}
         />
       </Modal>