feat: dynamic page title

src/components/PageHead.tsx

@@ -0,0 +1,9 @@
+import Head from "next/head";
+
+export const PageHead = ({ title }: { title: string }) => {
+  return (
+    <Head>
+      <title>{title}</title>
+    </Head>
+  );
+};

src/views/auth/login/index.tsx

@@ -1,6 +1,8 @@
 import { useState } from "react";
 // import { useRouter } from "next/navigation";
 import { Auth } from "~/components/AuthForm";
+import { PageHead } from "~/components/PageHead";
+
 // import { api } from "~/utils/api";
 
 export default function LoginPage() {
@@ -24,6 +26,8 @@ export default function LoginPage() {
   // if (data?.id) router.push("/boards");
 
   return (
+    <>
+      <PageHead title="Login | kan.bn" />
       <main className="h-screen bg-dark-50">
         <div className="flex h-full flex-col items-center justify-center">
           <h1 className="mb-6 text-lg font-bold tracking-tight text-dark-1000">
@@ -47,5 +51,6 @@ export default function LoginPage() {
           )}
         </div>
       </main>
+    </>
   );
 }

src/views/auth/signup/index.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 // import { useRouter } from "next/navigation";
 import { Auth } from "~/components/AuthForm";
+import { PageHead } from "~/components/PageHead";
 // import { api } from "~/utils/api";
 
 export default function SignupPage() {
@@ -24,6 +25,8 @@ export default function SignupPage() {
   // if (data?.id) router.push("/boards");
 
   return (
+    <>
+      <PageHead title="Signup | kan.bn" />
       <main className="h-screen bg-dark-50">
         <div className="flex h-full flex-col items-center justify-center">
           <h1 className="mb-6 text-lg font-bold tracking-tight text-dark-1000">
@@ -47,5 +50,6 @@ export default function SignupPage() {
           )}
         </div>
       </main>
+    </>
   );
 }

src/views/board/index.tsx

@@ -15,7 +15,9 @@ import { api } from "~/utils/api";
 import { formatToArray } from "~/utils/helpers";
 import { useBoard } from "~/providers/board";
 import { useModal } from "~/providers/modal";
+import { useWorkspace } from "~/providers/workspace";
 
+import { PageHead } from "~/components/PageHead";
 import Modal from "~/components/modal";
 import PatternedBackground from "~/components/PatternedBackground";
 
@@ -36,6 +38,7 @@ export default function BoardPage() {
   const params = useParams();
   const router = useRouter();
   const { boardData, setBoardData, updateCard, updateList } = useBoard();
+  const { workspace } = useWorkspace();
   const { openModal, modalContentType } = useModal();
   const [selectedPublicListId, setSelectedPublicListId] =
     useState<PublicListId>("");
@@ -135,6 +138,10 @@ export default function BoardPage() {
   };
 
   return (
+    <>
+      <PageHead
+        title={`${boardData?.name ?? "Board"} | ${workspace?.name ?? "Workspace"}`}
+      />
       <div className="relative flex h-full flex-col">
         <PatternedBackground />
         <div className="z-10 flex w-full justify-between p-8">
@@ -221,7 +228,9 @@ export default function BoardPage() {
                                     <Link
                                       onClick={(e) => {
                                         if (
-                                        card.publicId.startsWith("PLACEHOLDER")
+                                          card.publicId.startsWith(
+                                            "PLACEHOLDER",
+                                          )
                                         )
                                           e.preventDefault();
                                       }}
@@ -311,5 +320,6 @@ export default function BoardPage() {
           {modalContentType === "NEW_WORKSPACE" && <NewWorkspaceForm />}
         </Modal>
       </div>
+    </>
   );
 }

src/views/boards/index.tsx

@@ -2,16 +2,21 @@ import { HiArrowDownTray, HiOutlinePlusSmall } from "react-icons/hi2";
 import { BoardsList } from "./components/BoardsList";
 
 import { useModal } from "~/providers/modal";
+import { useWorkspace } from "~/providers/workspace";
 import Modal from "~/components/modal";
 
+import { PageHead } from "~/components/PageHead";
 import { ImportBoardsForm } from "./components/ImportBoardsForm";
 import { NewBoardForm } from "./components/NewBoardForm";
 import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
 
 export default function BoardsPage() {
   const { openModal, modalContentType } = useModal();
+  const { workspace } = useWorkspace();
 
   return (
+    <>
+      <PageHead title={`Boards | ${workspace?.name ?? "Workspace"}`} />
       <div className="p-8">
         <div className="mb-8 flex w-full justify-between">
           <h1 className="font-medium tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
@@ -24,7 +29,10 @@ export default function BoardsPage() {
               onClick={() => openModal("IMPORT_BOARDS")}
             >
               <div className="flex h-5 w-5 items-center">
-              <HiArrowDownTray className="-mr-0.5 h-4 w-4" aria-hidden="true" />
+                <HiArrowDownTray
+                  className="-mr-0.5 h-4 w-4"
+                  aria-hidden="true"
+                />
               </div>
               Import
             </button>
@@ -54,5 +62,6 @@ export default function BoardsPage() {
           <BoardsList />
         </div>
       </div>
+    </>
   );
 }

src/views/card/index.tsx

@@ -15,6 +15,7 @@ import { LabelForm } from "./components/LabelForm";
 import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
 import NewCommentForm from "./components/NewCommentForm";
 
+import { PageHead } from "~/components/PageHead";
 import Modal from "~/components/modal";
 import { useModal } from "~/providers/modal";
 import { usePopup } from "~/providers/popup";
@@ -112,6 +113,10 @@ export default function CardPage() {
   if (!cardId) return <></>;
 
   return (
+    <>
+      <PageHead
+        title={`${data?.title ?? "Card"} | ${board?.name ?? "Board"}`}
+      />
       <div className="flex h-full flex-1 flex-row">
         <div className="flex h-full w-full flex-col overflow-hidden">
           <div className="h-full max-h-[calc(100vh-4rem)] overflow-y-auto p-8">
@@ -235,5 +240,6 @@ export default function CardPage() {
           {modalContentType === "NEW_WORKSPACE" && <NewWorkspaceForm />}
         </Modal>
       </div>
+    </>
   );
 }

src/views/members/index.tsx

@@ -3,6 +3,8 @@ import { twMerge } from "tailwind-merge";
 
 import { useModal } from "~/providers/modal";
 import { useWorkspace } from "~/providers/workspace";
+
+import { PageHead } from "~/components/PageHead";
 import Modal from "~/components/modal";
 
 import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
@@ -136,6 +138,8 @@ export default function MembersPage() {
   };
 
   return (
+    <>
+      <PageHead title={`Members | ${workspace?.name ?? "Workspace"}`} />
       <div className="px-28 py-12">
         <div className="mb-8 flex w-full justify-between">
           <h1 className="font-medium tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
@@ -213,5 +217,6 @@ export default function MembersPage() {
           {modalContentType === "REMOVE_MEMBER" && <DeleteMemberConfirmation />}
         </Modal>
       </div>
+    </>
   );
 }

src/views/settings/index.tsx

@@ -1,6 +1,7 @@
 import Modal from "~/components/modal";
 import Button from "~/components/Button";
 
+import { PageHead } from "~/components/PageHead";
 import { DeleteWorkspaceConfirmation } from "./components/DeleteWorkspaceConfirmation";
 import UpdateWorkspaceNameForm from "./components/UpdateWorkspaceNameForm";
 
@@ -12,6 +13,8 @@ export default function SettingsPage() {
   const { workspace } = useWorkspace();
 
   return (
+    <>
+      <PageHead title={`Settings | ${workspace?.name ?? "Workspace"}`} />
       <div className="px-28 py-12">
         <div className="mb-8 flex w-full justify-between">
           <h1 className="font-medium tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
@@ -37,7 +40,10 @@ export default function SettingsPage() {
             Once you delete your workspace, there is no going back. Please be
             certain.
           </p>
-        <Button variant="primary" onClick={() => openModal("DELETE_WORKSPACE")}>
+          <Button
+            variant="primary"
+            onClick={() => openModal("DELETE_WORKSPACE")}
+          >
             Delete workspace
           </Button>
         </div>
@@ -48,5 +54,6 @@ export default function SettingsPage() {
           )}
         </Modal>
       </div>
+    </>
   );
 }