Refactor setting pages to use consistent layout handling

apps/web/components/CenteredForm.tsx

@@ -1,4 +1,3 @@
-import useLocalSettingsStore from "@/store/localSettings";
 import Image from "next/image";
 import Link from "next/link";
 import React, { ReactNode } from "react";

apps/web/pages/auth/reset-password.tsx

@@ -1,6 +1,6 @@
 import { Button } from "@/components/ui/button";
 import TextInput from "@/components/TextInput";
-import CenteredForm from "@/layouts/CenteredForm";
+import CenteredForm from "@/components/CenteredForm";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { FormEvent, useState } from "react";

apps/web/pages/confirmation.tsx

@@ -1,4 +1,4 @@
-import CenteredForm from "@/layouts/CenteredForm";
+import CenteredForm from "@/components/CenteredForm";
 import { signIn } from "next-auth/react";
 import { useRouter } from "next/router";
 import { useState } from "react";

apps/web/pages/forgot.tsx

@@ -1,6 +1,6 @@
 import { Button } from "@/components/ui/button";
 import TextInput from "@/components/TextInput";
-import CenteredForm from "@/layouts/CenteredForm";
+import CenteredForm from "@/components/CenteredForm";
 import Link from "next/link";
 import { FormEvent, useState } from "react";
 import { toast } from "react-hot-toast";

apps/web/pages/login.tsx

@@ -1,6 +1,6 @@
 import { Button } from "@/components/ui/button";
 import TextInput from "@/components/TextInput";
-import CenteredForm from "@/layouts/CenteredForm";
+import CenteredForm from "@/components/CenteredForm";
 import { signIn } from "next-auth/react";
 import Link from "next/link";
 import React, { useState, FormEvent } from "react";

apps/web/pages/member-onboarding.tsx

@@ -1,6 +1,6 @@
 import { Button } from "@/components/ui/button";
 import TextInput from "@/components/TextInput";
-import CenteredForm from "@/layouts/CenteredForm";
+import CenteredForm from "@/components/CenteredForm";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { FormEvent, useState } from "react";

apps/web/pages/register.tsx

@@ -3,7 +3,7 @@ import React, { useState, FormEvent } from "react";
 import { toast } from "react-hot-toast";
 import { signIn } from "next-auth/react";
 import { useRouter } from "next/router";
-import CenteredForm from "@/layouts/CenteredForm";
+import CenteredForm from "@/components/CenteredForm";
 import TextInput from "@/components/TextInput";
 import { Button } from "@/components/ui/button";
 import { getLogins } from "./api/v1/logins";

apps/web/pages/settings/access-tokens.tsx

@@ -1,5 +1,5 @@
 import SettingsLayout from "@/layouts/SettingsLayout";
-import React, { useState } from "react";
+import React, { ReactElement, useState } from "react";
 import NewTokenModal from "@/components/ModalContent/NewTokenModal";
 import RevokeTokenModal from "@/components/ModalContent/RevokeTokenModal";
 import { AccessToken } from "@linkwarden/prisma/client";
@@ -14,8 +14,9 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { Separator } from "@/components/ui/separator";
+import { NextPageWithLayout } from "../_app";
 
-export default function AccessTokens() {
+const Page: NextPageWithLayout = () => {
   const [newTokenModal, setNewTokenModal] = useState(false);
   const [revokeTokenModal, setRevokeTokenModal] = useState(false);
   const [selectedToken, setSelectedToken] = useState<AccessToken | null>(null);
@@ -29,7 +30,7 @@ export default function AccessTokens() {
   const { data: tokens = [] } = useTokens();
 
   return (
-    <SettingsLayout>
+    <>
       <p className="capitalize text-3xl font-thin inline">
         {t("access_tokens")}
       </p>
@@ -124,8 +125,14 @@ export default function AccessTokens() {
           activeToken={selectedToken}
         />
       )}
-    </SettingsLayout>
+    </>
   );
-}
+};
+
+Page.getLayout = function getLayout(page: ReactElement) {
+  return <SettingsLayout>{page}</SettingsLayout>;
+};
+
+export default Page;
 
 export { getServerSideProps };

apps/web/pages/settings/account.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, ChangeEvent } from "react";
+import { useState, useEffect, ChangeEvent, ReactElement } from "react";
 import { AccountSettings } from "@linkwarden/types";
 import { toast } from "react-hot-toast";
 import SettingsLayout from "@/layouts/SettingsLayout";
@@ -25,8 +25,9 @@ import {
   DropdownMenuSeparator,
 } from "@/components/ui/dropdown-menu";
 import { Separator } from "@/components/ui/separator";
+import { NextPageWithLayout } from "../_app";
 
-export default function Account() {
+const Page: NextPageWithLayout = () => {
   const [emailChangeVerificationModal, setEmailChangeVerificationModal] =
     useState(false);
   const [submitLoader, setSubmitLoader] = useState(false);
@@ -145,7 +146,7 @@ export default function Account() {
   };
 
   return (
-    <SettingsLayout>
+    <>
       <p className="capitalize text-3xl font-thin inline">
         {t("accountSettings")}
       </p>
@@ -358,8 +359,14 @@ export default function Account() {
           newEmail={user.email || ""}
         />
       )}
-    </SettingsLayout>
+    </>
   );
-}
+};
+
+Page.getLayout = function getLayout(page: ReactElement) {
+  return <SettingsLayout>{page}</SettingsLayout>;
+};
+
+export default Page;
 
 export { getServerSideProps };

apps/web/pages/settings/billing.tsx

@@ -2,7 +2,7 @@ import SettingsLayout from "@/layouts/SettingsLayout";
 import { useRouter } from "next/router";
 import InviteModal from "@/components/ModalContent/InviteModal";
 import { User as U } from "@linkwarden/prisma/client";
-import { useEffect, useState } from "react";
+import { ReactElement, useEffect, useState } from "react";
 import { useTranslation } from "next-i18next";
 import getServerSideProps from "@/lib/client/getServerSideProps";
 import { useUsers } from "@linkwarden/router/users";
@@ -20,6 +20,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
+import { NextPageWithLayout } from "../_app";
 
 interface User extends U {
   subscriptions: {
@@ -34,7 +35,7 @@ type UserModal = {
 
 const TRIAL_PERIOD_DAYS = process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS || 14;
 
-export default function Billing() {
+const Page: NextPageWithLayout = () => {
   const router = useRouter();
   const { t } = useTranslation();
 
@@ -74,7 +75,7 @@ export default function Billing() {
   const [inviteModal, setInviteModal] = useState(false);
 
   return (
-    <SettingsLayout>
+    <>
       <p className="capitalize text-3xl font-thin inline">
         {t("billing_settings")}
       </p>
@@ -289,8 +290,14 @@ export default function Billing() {
           userId={deleteUserModal.userId}
         />
       )}
-    </SettingsLayout>
+    </>
   );
-}
+};
+
+Page.getLayout = function getLayout(page: ReactElement) {
+  return <SettingsLayout>{page}</SettingsLayout>;
+};
+
+export default Page;
 
 export { getServerSideProps };

apps/web/pages/settings/delete.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { toast } from "react-hot-toast";
 import TextInput from "@/components/TextInput";
-import CenteredForm from "@/layouts/CenteredForm";
+import CenteredForm from "@/components/CenteredForm";
 import { signOut, useSession } from "next-auth/react";
 import Link from "next/link";
 import { Button } from "@/components/ui/button";

apps/web/pages/settings/password.tsx

@@ -1,5 +1,5 @@
 import SettingsLayout from "@/layouts/SettingsLayout";
-import { useState } from "react";
+import { ReactElement, useState } from "react";
 import { toast } from "react-hot-toast";
 import TextInput from "@/components/TextInput";
 import { useTranslation } from "next-i18next";
@@ -7,8 +7,9 @@ import getServerSideProps from "@/lib/client/getServerSideProps";
 import { useUpdateUser, useUser } from "@linkwarden/router/user";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
+import { NextPageWithLayout } from "../_app";
 
-export default function Password() {
+const Page: NextPageWithLayout = () => {
   const { t } = useTranslation();
 
   const [oldPassword, setOldPassword] = useState("");
@@ -52,7 +53,7 @@ export default function Password() {
   };
 
   return (
-    <SettingsLayout>
+    <>
       <p className="capitalize text-3xl font-thin inline">
         {t("change_password")}
       </p>
@@ -90,8 +91,14 @@ export default function Password() {
           {t("save_changes")}
         </Button>
       </div>
-    </SettingsLayout>
+    </>
   );
-}
+};
+
+Page.getLayout = function getLayout(page: ReactElement) {
+  return <SettingsLayout>{page}</SettingsLayout>;
+};
+
+export default Page;
 
 export { getServerSideProps };

apps/web/pages/settings/preference.tsx

@@ -1,5 +1,5 @@
 import SettingsLayout from "@/layouts/SettingsLayout";
-import { useState, useEffect } from "react";
+import { useState, useEffect, ReactElement } from "react";
 import { toast } from "react-hot-toast";
 import Checkbox from "@/components/Checkbox";
 import useLocalSettingsStore from "@/store/localSettings";
@@ -24,8 +24,9 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { Separator } from "@/components/ui/separator";
+import { NextPageWithLayout } from "../_app";
 
-export default function Preference() {
+const Page: NextPageWithLayout = () => {
   const { t } = useTranslation();
   const { settings, updateSettings } = useLocalSettingsStore();
   const updateUserPreference = useUpdateUserPreference();
@@ -187,7 +188,7 @@ export default function Preference() {
   };
 
   return (
-    <SettingsLayout>
+    <>
       <p className="capitalize text-3xl font-thin inline">{t("preference")}</p>
 
       <Separator className="my-3" />
@@ -613,8 +614,14 @@ export default function Preference() {
           {t("save_changes")}
         </Button>
       </div>
-    </SettingsLayout>
+    </>
   );
-}
+};
+
+Page.getLayout = function getLayout(page: ReactElement) {
+  return <SettingsLayout>{page}</SettingsLayout>;
+};
+
+export default Page;
 
 export { getServerSideProps };

apps/web/pages/settings/rss-subscriptions.tsx

@@ -3,14 +3,15 @@ import { useTranslation } from "next-i18next";
 import getServerSideProps from "@/lib/client/getServerSideProps";
 import { useRssSubscriptions } from "@linkwarden/router/rss";
 import DeleteRssSubscriptionModal from "@/components/ModalContent/DeleteRssSubscriptionModal";
-import { useState } from "react";
+import { ReactElement, useState } from "react";
 import { RssSubscription } from "@linkwarden/prisma/client";
 import NewRssSubscriptionModal from "@/components/ModalContent/NewRssSubscriptionModal";
 import { useConfig } from "@linkwarden/router/config";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
+import { NextPageWithLayout } from "../_app";
 
-export default function RssSubscriptions() {
+const Page: NextPageWithLayout = () => {
   const { t } = useTranslation();
   const { data: rssSubscriptions = [] } = useRssSubscriptions();
 
@@ -27,7 +28,7 @@ export default function RssSubscriptions() {
   const { data: config } = useConfig();
 
   return (
-    <SettingsLayout>
+    <>
       <p className="capitalize text-3xl font-thin inline">
         {t("rss_subscriptions")}
       </p>
@@ -96,8 +97,14 @@ export default function RssSubscriptions() {
           }}
         />
       )}
-    </SettingsLayout>
+    </>
   );
-}
+};
+
+Page.getLayout = function getLayout(page: ReactElement) {
+  return <SettingsLayout>{page}</SettingsLayout>;
+};
+
+export default Page;
 
 export { getServerSideProps };

apps/web/pages/settings/worker.tsx

@@ -1,15 +1,16 @@
 import SettingsLayout from "@/layouts/SettingsLayout";
 import { useTranslation } from "next-i18next";
 import getServerSideProps from "@/lib/client/getServerSideProps";
-import { useEffect, useState } from "react";
+import { ReactElement, useEffect, useState } from "react";
 import ConfirmationModal from "@/components/ConfirmationModal";
 import { LinkArchiveActionSchemaType } from "@linkwarden/lib/schemaValidation";
 import toast from "react-hot-toast";
 import { useArchiveAction } from "@linkwarden/router/links";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
+import { NextPageWithLayout } from "../_app";
 
-export default function Worker() {
+const Page: NextPageWithLayout = () => {
   const { t } = useTranslation();
   const archiveAction = useArchiveAction();
   const [showModal, setShowModal] = useState(false);
@@ -52,7 +53,7 @@ export default function Worker() {
   };
 
   return (
-    <SettingsLayout>
+    <>
       <p className="capitalize text-3xl font-thin inline">{t("worker")}</p>
 
       <Separator className="my-3" />
@@ -114,8 +115,14 @@ export default function Worker() {
           </div>
         </ConfirmationModal>
       )}
-    </SettingsLayout>
+    </>
   );
-}
+};
+
+Page.getLayout = function getLayout(page: ReactElement) {
+  return <SettingsLayout>{page}</SettingsLayout>;
+};
+
+export default Page;
 
 export { getServerSideProps };

apps/web/pages/subscribe.tsx

@@ -2,7 +2,7 @@ import { signOut, useSession } from "next-auth/react";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useRouter } from "next/router";
-import CenteredForm from "@/layouts/CenteredForm";
+import CenteredForm from "@/components/CenteredForm";
 import { Plan } from "@linkwarden/types";
 import { Button } from "@/components/ui/button";
 import getServerSideProps from "@/lib/client/getServerSideProps";