fresh settings layout

app/settings/pages/settings.tsx

@@ -1,63 +0,0 @@
-import type { BlitzPage } from "blitz";
-import { Routes, useMutation } from "blitz";
-import { IoCardOutline, IoPersonCircleOutline } from "react-icons/io5";
-
-import Layout from "../../core/layouts/layout";
-
-import appLogger from "../../../integrations/logger";
-import useRequireOnboarding from "../../core/hooks/use-require-onboarding";
-import logout from "../../auth/mutations/logout";
-
-const logger = appLogger.child({ page: "/settings" });
-
-/* eslint-disable react/display-name */
-const navigation = [
-	{
-		name: "Account",
-		href: "/settings/account",
-		icon: ({ className = "w-8 h-8" }) => <IoPersonCircleOutline className={className} />,
-	},
-	{
-		name: "Billing",
-		href: "/settings/billing",
-		icon: ({ className = "w-8 h-8" }) => <IoCardOutline className={className} />,
-	},
-];
-/* eslint-enable react/display-name */
-
-const Settings: BlitzPage = () => {
-	useRequireOnboarding();
-	const [logoutMutation] = useMutation(logout);
-
-	return (
-		<>
-			<div className="flex flex-col space-y-6 p-6">
-				<h2 className="text-3xl font-bold">Settings</h2>
-			</div>
-			<div className="flex flex-col space-y-6 p-6">
-				<aside className="py-6 lg:col-span-3">
-					<nav className="space-y-1">
-						{navigation.map((item) => (
-							<a
-								key={item.name}
-								href={item.href}
-								className="border-transparent text-gray-900 hover:bg-gray-50 hover:text-gray-900 group border-l-4 px-3 py-2 flex items-center text-sm font-medium"
-							>
-								<item.icon className="text-gray-400 group-hover:text-gray-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6" />
-								<span className="truncate">{item.name}</span>
-							</a>
-						))}
-					</nav>
-				</aside>
-
-				<button onClick={() => logoutMutation()}>Log out</button>
-			</div>
-		</>
-	);
-};
-
-Settings.getLayout = (page) => <Layout title="Settings">{page}</Layout>;
-
-Settings.authenticate = { redirectTo: Routes.SignIn() };
-
-export default Settings;

app/settings/pages/settings/billing.tsx

@@ -14,9 +14,13 @@ const logger = appLogger.child({ page: "/account/settings/billing" });
 const Billing: BlitzPage = () => {
 	/*
 	TODO: I want to be able to
-		- renew subscription (after pause/cancel for example) (message like "your subscription expired, would you like to renew ?")
-		- know when is the last time I paid and for how much
+		- subscribe
+		- cancel my sub
+		- upgrade to yearly
+		- downgrade to monthly
+		- resubscribe (after pause/cancel for example) (message like "your subscription expired, would you like to renew ?")
 		- know when is the next time I will pay and for how much
+		- have access to my past invoices
 	*/
 
 	useRequireOnboarding();

app/settings/pages/settings/index.tsx

@@ -12,7 +12,7 @@ const Account: BlitzPage = () => {
 	useRequireOnboarding();
 
 	return (
-		<div className="flex flex-col space-y-6 p-6">
+		<div className="flex flex-col space-y-6">
 			<ProfileInformations />
 
 			<div className="hidden lg:block">

app/settings/pages/settings/notifications.tsx

@@ -0,0 +1,14 @@
+import type { BlitzPage } from "blitz";
+import { Routes } from "blitz";
+
+import SettingsLayout from "../../components/settings-layout";
+
+const Notifications: BlitzPage = () => {
+	return <div>Coming soon</div>;
+};
+
+Notifications.getLayout = (page) => <SettingsLayout>{page}</SettingsLayout>;
+
+Notifications.authenticate = { redirectTo: Routes.SignIn() };
+
+export default Notifications;