Merge pull request #113 from atomly/docs/better-auth-ui-upgrade

docs: Better Auth UI Upgrade Documentation

Author: rmolinamir

.env.example

@@ -16,11 +16,6 @@ AUTH_SECRET='<YOUR_AUTH_SECRET>'
 AUTH_GOOGLE_ID='<AUTH_GOOGLE_ID>'
 AUTH_GOOGLE_SECRET='<AUTH_GOOGLE_SECRET>'
 
-# Pre-configured Discord OAuth provider, works out-of-the-box.
-# @see https://www.better-auth.com/docs/authentication/discord
-AUTH_DISCORD_ID='<AUTH_DISCORD_ID>'
-AUTH_DISCORD_SECRET='<AUTH_DISCORD_SECRET>'
-
 # Pre-configured GitHub OAuth provider, works out-of-the-box.
 # @see https://www.better-auth.com/docs/authentication/github
 AUTH_GITHUB_ID='<AUTH_GITHUB_ID>'

apps/web/package.json

@@ -30,7 +30,7 @@
     "@blocknote/react": "~0.39.1",
     "@blocknote/server-util": "~0.39.1",
     "@blocknote/xl-ai": "~0.39.1",
-    "@daveyplate/better-auth-ui": "~2.1.11",
+    "@daveyplate/better-auth-ui": "~3.2.5",
     "@hookform/resolvers": "~5.0.1",
     "@mantine/core": "~8.1.3",
     "@mastra/core": "~0.15.2",

apps/web/src/app/(app)/@appSidebar/_components/app-sidebar-pages.tsx

@@ -3,7 +3,6 @@
 import type { Page } from "@acme/db/schema";
 import { useQuery } from "@tanstack/react-query";
 import { BookOpen, ChevronRight } from "lucide-react";
-import { usePathname } from "next/navigation";
 import { useState } from "react";
 import {
   Collapsible,
@@ -20,20 +19,22 @@ import { AppSidebarPageItem } from "./app-sidebar-page-item";
 import { CreatePageButton } from "./create-page-button";
 
 type AppSidebarPagesProps = {
-  pages: Page[];
+  initialPages: Page[];
+  defaultOpen?: boolean;
 };
 
-export const AppSidebarPages = (props: AppSidebarPagesProps) => {
+export const AppSidebarPages = ({
+  initialPages,
+  defaultOpen = true,
+}: AppSidebarPagesProps) => {
   const trpc = useTRPC();
-  const pathname = usePathname();
   const { state, setOpen } = useSidebar();
 
   const { data: pages } = useQuery({
     ...trpc.pages.getByUser.queryOptions(),
-    initialData: props.pages,
+    initialData: initialPages,
   });
 
-  const defaultOpen = pathname.includes("/pages/");
   const [isOpen, setIsOpen] = useState(defaultOpen);
 
   const handlePagesClick = (e: React.MouseEvent) => {

apps/web/src/app/(app)/@appSidebar/_components/app-sidebar-user-settings.tsx

@@ -15,7 +15,7 @@ export function AppSidebarUserSettings() {
 
     // Add a small delay to allow the dropdown to close before navigation
     requestAnimationFrame(() => {
-      router.push("/auth/settings");
+      router.push("/account/settings");
     });
   };
 

apps/web/src/app/(app)/@appSidebar/default.tsx

@@ -21,7 +21,7 @@ import { AppSidebarUserSkeleton } from "./_components/app-sidebar-user-skeleton"
 
 async function SuspendedAppSidebarPages() {
   const pages = await api.pages.getByUser();
-  return <AppSidebarPages pages={pages} />;
+  return <AppSidebarPages initialPages={pages} />;
 }
 
 export default function AppSidebar() {

apps/web/src/app/(app)/@billingModal/_components/billing-error-boundary.tsx

@@ -6,9 +6,9 @@ import {
 } from "~/components/ui/dialog";
 import { api } from "~/trpc/server";
 import { SubscriptionView } from "../../../(dashboard)/subscription/_components/subscription-view";
-import { SubscriptionModal } from "./_components/subscription-modal";
+import { SubscriptionModal } from "../_components/subscription-modal";
 
-export default async function SubscriptionBillingModalPage() {
+export default async function SubscriptionModalPage() {
   const subscription = await api.subscription.getSubscription();
   if (!subscription) {
     return redirect("/journal");

apps/web/src/app/(app)/@billingModal/default.tsx

@@ -4,24 +4,20 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { Dialog } from "~/components/ui/dialog";
 
-export const SubscriptionModal = ({
-  children,
-}: {
-  children: React.ReactNode;
-}) => {
+export function SubscriptionModal({ children }: { children: React.ReactNode }) {
   const router = useRouter();
   const [isOpen, setIsOpen] = useState(true);
 
-  const handleOpenChange = (open: boolean) => {
+  function handleOpenChange(open: boolean) {
     if (!open) {
       setIsOpen(false);
       router.back();
     }
-  };
+  }
 
   return (
     <Dialog open={isOpen} onOpenChange={handleOpenChange}>
       {children}
     </Dialog>
   );
-};
+}

apps/web/src/app/(app)/@billingModal/(.)subscription/page.tsx renamed to apps/web/src/app/(app)/@subscriptionModal/(.)subscription/page.tsx

@@ -0,0 +1,3 @@
+export default function DefaultSubscriptionModalPage() {
+  return null;
+}