[recnet-web] Subscription setting UI

apps/recnet/src/app/Headerbar.tsx

@@ -17,6 +17,7 @@ import { useState, useRef, useEffect, useCallback } from "react";
 
 import { useAuth } from "@recnet/recnet-web/app/AuthContext";
 import { Avatar } from "@recnet/recnet-web/components/Avatar";
+import { useUserSettingDialogContext } from "@recnet/recnet-web/components/setting/UserSettingDialog";
 import { UserRole } from "@recnet/recnet-web/constant";
 import { logout, useGoogleLogin } from "@recnet/recnet-web/firebase/auth";
 import { cn } from "@recnet/recnet-web/utils/cn";
@@ -29,6 +30,8 @@ export function UserDropdown({ user }: { user: User }) {
     await logout();
     router.push("/");
   };
+  const { setOpen: setUserSettingDialogOpen } = useUserSettingDialogContext();
+
   return (
     <DropdownMenu.Root>
       <DropdownMenu.Trigger>
@@ -43,6 +46,9 @@ export function UserDropdown({ user }: { user: User }) {
         <DropdownMenu.Item asChild>
           <Link href={`/${user.handle}`}>Profile</Link>
         </DropdownMenu.Item>
+        <DropdownMenu.Item onClick={() => setUserSettingDialogOpen(true)}>
+          Settings
+        </DropdownMenu.Item>
         {user.role && user.role === UserRole.ADMIN ? (
           <DropdownMenu.Item asChild>
             <Link href={`/admin`}>Admin Panel</Link>

apps/recnet/src/app/[handle]/Profile.tsx

@@ -11,11 +11,10 @@ import { Avatar } from "@recnet/recnet-web/components/Avatar";
 import { FollowButton } from "@recnet/recnet-web/components/FollowButton";
 import { RecNetLink } from "@recnet/recnet-web/components/Link";
 import { Skeleton, SkeletonText } from "@recnet/recnet-web/components/Skeleton";
+import { useUserSettingDialogContext } from "@recnet/recnet-web/components/setting/UserSettingDialog";
 import { cn } from "@recnet/recnet-web/utils/cn";
 import { interleaveWithValue } from "@recnet/recnet-web/utils/interleaveWithValue";
 
-import { UserSettingDialog } from "./UserSettingDialog";
-
 function StatDivider() {
   return <div className="w-[1px] bg-gray-6 h-[18px] flex" />;
 }
@@ -28,6 +27,7 @@ export function Profile(props: { handle: string }) {
   });
   const { user: me } = useAuth();
   const isMe = !!me && !!data?.user && me.handle === data.user.handle;
+  const { setOpen: setUserSettingDialogOpen } = useUserSettingDialogContext();
 
   const userUrl = useMemo(
     () => (data?.user?.url ? new URL(data.user.url) : null),
@@ -184,7 +184,15 @@ export function Profile(props: { handle: string }) {
             </Flex>
             <Flex className="w-fit hidden md:flex">
               {isMe ? (
-                <UserSettingDialog handle={data.user.handle} />
+                <Button
+                  className="w-full cursor-pointer"
+                  variant="surface"
+                  onClick={() => {
+                    setUserSettingDialogOpen(true);
+                  }}
+                >
+                  Settings
+                </Button>
               ) : (
                 <FollowButton user={data.user} />
               )}
@@ -196,7 +204,15 @@ export function Profile(props: { handle: string }) {
       <div className="sm:hidden">{userInfo}</div>
       <Flex className="w-full md:hidden">
         {isMe ? (
-          <UserSettingDialog handle={data.user.handle} />
+          <Button
+            className="w-full cursor-pointer"
+            variant="surface"
+            onClick={() => {
+              setUserSettingDialogOpen(true);
+            }}
+          >
+            Settings
+          </Button>
         ) : (
           <FollowButton user={data.user} />
         )}

apps/recnet/src/app/layout.tsx

@@ -7,6 +7,7 @@ import { Toaster } from "sonner";
 import { Footer } from "@recnet/recnet-web/app/Footer";
 import { Headerbar } from "@recnet/recnet-web/app/Headerbar";
 import { clientEnv } from "@recnet/recnet-web/clientEnv";
+import { UserSettingDialogProvider } from "@recnet/recnet-web/components/setting/UserSettingDialog";
 import { getUserServerSide } from "@recnet/recnet-web/utils/getUserServerSide";
 
 import { ApiErrorBoundary } from "./ApiErrorBoundary";
@@ -43,15 +44,17 @@ export default async function RootLayout({
               <HistoryProvider>
                 <ThemeProvider attribute="class">
                   <Theme accentColor="blue">
-                    <Headerbar />
-                    <Toaster position="top-right" richColors offset={80} />
-                    <ApiErrorBoundary>
-                      <div className="min-h-[90svh] flex justify-center">
-                        {children}
-                      </div>
-                    </ApiErrorBoundary>
-                    <Footer />
-                    <MobileNavigator />
+                    <UserSettingDialogProvider>
+                      <Headerbar />
+                      <Toaster position="top-right" richColors offset={80} />
+                      <ApiErrorBoundary>
+                        <div className="min-h-[90svh] flex justify-center">
+                          {children}
+                        </div>
+                      </ApiErrorBoundary>
+                      <Footer />
+                      <MobileNavigator />
+                    </UserSettingDialogProvider>
                   </Theme>
                 </ThemeProvider>
               </HistoryProvider>

apps/recnet/src/components/setting/UserSettingDialog.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import {
+  PersonIcon,
+  Cross1Icon,
+  EnvelopeClosedIcon,
+} from "@radix-ui/react-icons";
+import { Dialog, Button, Text } from "@radix-ui/themes";
+import { Settings } from "lucide-react";
+import React, { useMemo, useState, createContext, useContext } from "react";
+
+import { useAuth } from "@recnet/recnet-web/app/AuthContext";
+import { cn } from "@recnet/recnet-web/utils/cn";
+
+import { AccountSetting } from "./account/AccountSetting";
+import { ProfileEditForm } from "./profile/ProfileEditForm";
+import { SubscriptionSetting } from "./subscription/SubscriptionSetting";
+
+const tabs = {
+  PROFILE: {
+    label: "Profile",
+    icon: <PersonIcon />,
+    component: ProfileEditForm,
+  },
+  ACCOUNT: {
+    label: "Account",
+    icon: <Settings className="w-[15px] h-[15px]" />,
+    component: AccountSetting,
+  },
+  SUBSCRIPTION: {
+    label: "Subscription",
+    icon: <EnvelopeClosedIcon />,
+    component: SubscriptionSetting,
+  },
+} as const;
+type TabKey = keyof typeof tabs;
+
+const UserSettingDialogContext = createContext<{
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  activeTab: TabKey;
+  setActiveTab: (tab: TabKey) => void;
+} | null>(null);
+
+export function useUserSettingDialogContext() {
+  const context = useContext(UserSettingDialogContext);
+  if (!context) {
+    throw new Error(
+      "useUserSettingDialog must be used within a UserSettingDialogProvider"
+    );
+  }
+  return context;
+}
+
+interface UserSettingDialogProps {
+  children: React.ReactNode;
+}
+
+export function UserSettingDialogProvider(props: UserSettingDialogProps) {
+  const { children } = props;
+  const { user } = useAuth();
+  const [open, setOpen] = useState(false);
+  const [activeTab, setActiveTab] = useState<TabKey>("PROFILE");
+
+  const TabComponent = useMemo(() => tabs[activeTab].component, [activeTab]);
+
+  if (!user) {
+    return children;
+  }
+
+  return (
+    <UserSettingDialogContext.Provider
+      value={{
+        open,
+        setOpen,
+        activeTab,
+        setActiveTab,
+      }}
+    >
+      <Dialog.Root open={open} onOpenChange={setOpen}>
+        <Dialog.Content
+          maxWidth={{
+            initial: "480px",
+            md: "640px",
+          }}
+          className="relative"
+        >
+          <Dialog.Close className="absolute top-6 right-4 hidden md:block">
+            <Button variant="soft" color="gray" className="cursor-pointer">
+              <Cross1Icon />
+            </Button>
+          </Dialog.Close>
+          <div className="flex flex-row gap-x-8 md:p-4">
+            <div className="w-fit md:w-[25%] flex flex-col gap-y-2">
+              {Object.entries(tabs).map(([key, { label }]) => (
+                <div
+                  key={key}
+                  className={cn(
+                    "py-1 px-4 rounded-2 flex gap-x-2 items-center cursor-pointer hover:bg-gray-4",
+                    {
+                      "bg-gray-5": key === activeTab,
+                    }
+                  )}
+                  onClick={() => setActiveTab(key as TabKey)}
+                >
+                  {tabs[key as TabKey].icon}
+                  <Text
+                    size={{
+                      initial: "1",
+                      md: "2",
+                    }}
+                  >
+                    {label}
+                  </Text>
+                </div>
+              ))}
+            </div>
+            <div className="w-full h-[600px] md:h-[750px] overflow-y-auto">
+              <TabComponent />
+            </div>
+          </div>
+        </Dialog.Content>
+      </Dialog.Root>
+      {children}
+    </UserSettingDialogContext.Provider>
+  );
+}

apps/recnet/src/components/setting/account/AccountSetting.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { Dialog, Button, Text } from "@radix-ui/themes";
+import { useRouter } from "next/navigation";
+
+import { trpc } from "@recnet/recnet-web/app/_trpc/client";
+import { DoubleConfirmButton } from "@recnet/recnet-web/components/DoubleConfirmButton";
+import { logout } from "@recnet/recnet-web/firebase/auth";
+
+export function AccountSetting() {
+  const deactivateMutation = trpc.deactivate.useMutation();
+  const router = useRouter();
+
+  return (
+    <div>
+      <Dialog.Title>Account Setting</Dialog.Title>
+      <Dialog.Description size="2" mb="4" className="text-gray-11">
+        Make changes to account settings.
+      </Dialog.Description>
+
+      <Text size="4" color="red" className="block">
+        Deactivate Account
+      </Text>
+      <Text size="1" className="text-gray-11 block">
+        {
+          "Your account will be deactivated and you will be logged out. You can reactivate your account by logging in again."
+        }
+        {
+          " While your account is deactivated, your profile will be hidden from other users. You will not receive any weekly digest emails."
+        }
+      </Text>
+      <div className="flex flex-row w-full mt-4">
+        <DoubleConfirmButton
+          onConfirm={async () => {
+            await deactivateMutation.mutateAsync();
+            await logout();
+            router.replace("/");
+          }}
+          title="Deactivate Account"
+          description="Are you sure you want to deactivate your account?"
+        >
+          <Button color="red" className="bg-red-10 cursor-pointer">
+            Deactivate Account
+          </Button>
+        </DoubleConfirmButton>
+      </div>
+    </div>
+  );
+}