Move settings rows

src/components/settings/DeleteAccountDialog/DeleteAccountDialog.tsx → src/components/settings/DeleteAccountSetting/DeleteAccountSetting.tsx

@@ -1,20 +1,24 @@
 import { Button, Modal, ModalHeader } from "@/components/common";
+import { SettingsItem } from "@/components/settings";
 import { useAuthActions } from "@convex-dev/auth/react";
 import { api } from "@convex/_generated/api";
 import { useMutation } from "convex/react";
+import { Trash } from "lucide-react";
+import { useState } from "react";
 
-type DeleteAccountDialogProps = {
+type DeleteAccountModalProps = {
   isOpen: boolean;
   onOpenChange: (isOpen: boolean) => void;
   onSubmit: () => void;
 };
 
-export const DeleteAccountDialog = ({
+const DeleteAccountModal = ({
   isOpen,
   onOpenChange,
   onSubmit,
-}: DeleteAccountDialogProps) => {
+}: DeleteAccountModalProps) => {
   const { signOut } = useAuthActions();
+
   const clearLocalStorage = () => {
     localStorage.removeItem("theme");
   };
@@ -40,3 +44,24 @@ export const DeleteAccountDialog = ({
     </Modal>
   );
 };
+
+export const DeleteAccountSetting = () => {
+  const [isDeleteAccountModalOpen, setIsDeleteAccountModalOpen] =
+    useState(false);
+
+  return (
+    <SettingsItem
+      label="Delete account"
+      description="Permanently delete your Namesake account and data."
+    >
+      <Button onPress={() => setIsDeleteAccountModalOpen(true)} icon={Trash}>
+        Delete account
+      </Button>
+      <DeleteAccountModal
+        isOpen={isDeleteAccountModalOpen}
+        onOpenChange={setIsDeleteAccountModalOpen}
+        onSubmit={() => setIsDeleteAccountModalOpen(false)}
+      />
+    </SettingsItem>
+  );
+};

src/components/settings/DeleteAccountSetting/index.ts

@@ -0,0 +1 @@
+export * from "./DeleteAccountSetting";

src/components/settings/EditBirthplaceDialog/EditBirthplaceDialog.tsx → src/components/settings/EditBirthplaceSetting/EditBirthplaceSetting.tsx

@@ -1,22 +1,25 @@
 import { Button, Form, Modal, Select, SelectItem } from "@/components/common";
 import { api } from "@convex/_generated/api";
+import type { Doc } from "@convex/_generated/dataModel";
 import { JURISDICTIONS, type Jurisdiction } from "@convex/constants";
 import { useMutation } from "convex/react";
+import { Pencil } from "lucide-react";
 import { useState } from "react";
+import { SettingsItem } from "../SettingsItem";
 
-type EditBirthplaceDialogProps = {
+type EditBirthplaceModalProps = {
   defaultBirthplace: Jurisdiction;
   isOpen: boolean;
   onOpenChange: (isOpen: boolean) => void;
   onSubmit: () => void;
 };
 
-export const EditBirthplaceDialog = ({
+const EditBirthplaceModal = ({
   defaultBirthplace,
   isOpen,
   onOpenChange,
   onSubmit,
-}: EditBirthplaceDialogProps) => {
+}: EditBirthplaceModalProps) => {
   const updateBirthplace = useMutation(api.users.setBirthplace);
   const [birthplace, setBirthplace] = useState(defaultBirthplace);
 
@@ -55,3 +58,30 @@ export const EditBirthplaceDialog = ({
     </Modal>
   );
 };
+
+type EditBirthplaceSettingProps = {
+  user: Doc<"users">;
+};
+
+export const EditBirthplaceSetting = ({ user }: EditBirthplaceSettingProps) => {
+  const [isBirthplaceModalOpen, setIsBirthplaceModalOpen] = useState(false);
+
+  return (
+    <SettingsItem
+      label="Birthplace"
+      description="Where were you born? This location is used to select the forms for your birth certificate."
+    >
+      <Button icon={Pencil} onPress={() => setIsBirthplaceModalOpen(true)}>
+        {user?.birthplace
+          ? JURISDICTIONS[user.birthplace as Jurisdiction]
+          : "Set birthplace"}
+      </Button>
+      <EditBirthplaceModal
+        isOpen={isBirthplaceModalOpen}
+        onOpenChange={setIsBirthplaceModalOpen}
+        defaultBirthplace={user.birthplace as Jurisdiction}
+        onSubmit={() => setIsBirthplaceModalOpen(false)}
+      />
+    </SettingsItem>
+  );
+};

src/components/settings/EditBirthplaceSetting/index.ts

@@ -0,0 +1 @@
+export * from "./EditBirthplaceSetting";

src/components/settings/EditMinorSetting/EditMinorSetting.tsx

@@ -0,0 +1,28 @@
+import { Switch } from "@/components/common";
+import { SettingsItem } from "@/components/settings";
+import { api } from "@convex/_generated/api";
+import type { Doc } from "@convex/_generated/dataModel";
+import { useMutation } from "convex/react";
+
+type EditMinorSettingProps = {
+  user: Doc<"users">;
+};
+
+export const EditMinorSetting = ({ user }: EditMinorSettingProps) => {
+  const updateIsMinor = useMutation(api.users.setCurrentUserIsMinor);
+
+  return (
+    <SettingsItem
+      label="Under 18"
+      description="Are you under 18 years old or applying on behalf of someone who is?"
+    >
+      <Switch
+        name="isMinor"
+        isSelected={user.isMinor ?? false}
+        onChange={() => updateIsMinor({ isMinor: !user.isMinor })}
+      >
+        <span className="sr-only">Is minor</span>
+      </Switch>
+    </SettingsItem>
+  );
+};

src/components/settings/EditMinorSetting/index.ts

@@ -0,0 +1 @@
+export * from "./EditMinorSetting";

src/components/settings/EditNameDialog/EditNameDialog.tsx → src/components/settings/EditNameSetting/EditNameSetting.tsx

@@ -1,21 +1,24 @@
 import { Button, Form, Modal, TextField } from "@/components/common";
 import { api } from "@convex/_generated/api";
+import type { Doc } from "@convex/_generated/dataModel";
 import { useMutation } from "convex/react";
+import { Pencil } from "lucide-react";
 import { useState } from "react";
+import { SettingsItem } from "../SettingsItem";
 
-type EditNameDialogProps = {
+type EditNameModalProps = {
   defaultName: string;
   isOpen: boolean;
   onOpenChange: (isOpen: boolean) => void;
   onSubmit: () => void;
 };
 
-export const EditNameDialog = ({
+const EditNameModal = ({
   defaultName,
   isOpen,
   onOpenChange,
   onSubmit,
-}: EditNameDialogProps) => {
+}: EditNameModalProps) => {
   const updateName = useMutation(api.users.setName);
   const [name, setName] = useState(defaultName);
 
@@ -42,3 +45,28 @@ export const EditNameDialog = ({
     </Modal>
   );
 };
+
+type EditNameSettingProps = {
+  user: Doc<"users">;
+};
+
+export const EditNameSetting = ({ user }: EditNameSettingProps) => {
+  const [isNameModalOpen, setIsNameModalOpen] = useState(false);
+
+  return (
+    <SettingsItem
+      label="Name"
+      description="How should Namesake refer to you? This can be different from your legal name."
+    >
+      <Button icon={Pencil} onPress={() => setIsNameModalOpen(true)}>
+        {user?.name ?? "Set name"}
+      </Button>
+      <EditNameModal
+        isOpen={isNameModalOpen}
+        onOpenChange={setIsNameModalOpen}
+        defaultName={user.name ?? ""}
+        onSubmit={() => setIsNameModalOpen(false)}
+      />
+    </SettingsItem>
+  );
+};

src/components/settings/EditNameSetting/index.ts

@@ -0,0 +1 @@
+export * from "./EditNameSetting";

src/components/settings/EditResidenceDialog/EditResidenceDialog.tsx → src/components/settings/EditResidenceSetting/EditResidenceSetting.tsx

@@ -1,22 +1,32 @@
-import { Button, Form, Modal, Select, SelectItem } from "@/components/common";
+import {
+  Button,
+  Form,
+  Modal,
+  ModalHeader,
+  Select,
+  SelectItem,
+} from "@/components/common";
+import { SettingsItem } from "@/components/settings";
 import { api } from "@convex/_generated/api";
+import type { Doc } from "@convex/_generated/dataModel";
 import { JURISDICTIONS, type Jurisdiction } from "@convex/constants";
 import { useMutation } from "convex/react";
+import { Pencil } from "lucide-react";
 import { useState } from "react";
 
-type EditResidenceDialogProps = {
+type EditResidenceModalProps = {
   defaultResidence: Jurisdiction;
   isOpen: boolean;
   onOpenChange: (isOpen: boolean) => void;
   onSubmit: () => void;
 };
 
-export const EditResidenceDialog = ({
+const EditResidenceModal = ({
   defaultResidence,
   isOpen,
   onOpenChange,
   onSubmit,
-}: EditResidenceDialogProps) => {
+}: EditResidenceModalProps) => {
   const updateResidence = useMutation(api.users.setResidence);
   const [residence, setResidence] = useState(defaultResidence);
 
@@ -28,8 +38,8 @@ export const EditResidenceDialog = ({
 
   return (
     <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+      <ModalHeader title="Edit residence" />
       <Form onSubmit={handleSubmit} className="w-full">
-        Edit residence
         <Select
           aria-label="Residence"
           name="residence"
@@ -55,3 +65,30 @@ export const EditResidenceDialog = ({
     </Modal>
   );
 };
+
+type EditResidenceSettingProps = {
+  user: Doc<"users">;
+};
+
+export const EditResidenceSetting = ({ user }: EditResidenceSettingProps) => {
+  const [isResidenceModalOpen, setIsResidenceModalOpen] = useState(false);
+
+  return (
+    <SettingsItem
+      label="Residence"
+      description="Where do you live? This location is used to select the forms for your court order and state ID."
+    >
+      <Button icon={Pencil} onPress={() => setIsResidenceModalOpen(true)}>
+        {user?.residence
+          ? JURISDICTIONS[user.residence as Jurisdiction]
+          : "Set residence"}
+      </Button>
+      <EditResidenceModal
+        isOpen={isResidenceModalOpen}
+        onOpenChange={setIsResidenceModalOpen}
+        defaultResidence={user.residence as Jurisdiction}
+        onSubmit={() => setIsResidenceModalOpen(false)}
+      />
+    </SettingsItem>
+  );
+};

src/components/settings/EditResidenceSetting/index.ts

@@ -0,0 +1 @@
+export * from "./EditResidenceSetting";

src/components/settings/EditThemeSetting/EditThemeSetting.tsx

@@ -0,0 +1,25 @@
+import { ToggleButton, ToggleButtonGroup } from "@/components/common";
+import { useTheme } from "@/utils/useTheme";
+import { THEMES } from "@convex/constants";
+import { SettingsItem } from "../SettingsItem";
+
+export const EditThemeSetting = () => {
+  const { themeSelection, setTheme } = useTheme();
+
+  return (
+    <SettingsItem label="Theme" description="Adjust your display.">
+      <ToggleButtonGroup
+        selectionMode="single"
+        disallowEmptySelection
+        selectedKeys={themeSelection}
+        onSelectionChange={setTheme}
+      >
+        {Object.entries(THEMES).map(([theme, details]) => (
+          <ToggleButton key={theme} id={theme}>
+            {details.label}
+          </ToggleButton>
+        ))}
+      </ToggleButtonGroup>
+    </SettingsItem>
+  );
+};

src/components/settings/EditThemeSetting/index.ts

@@ -0,0 +1 @@
+export * from "./EditThemeSetting";

src/components/settings/index.ts

@@ -1,6 +1,8 @@
-export * from "./DeleteAccountDialog";
-export * from "./EditBirthplaceDialog";
-export * from "./EditNameDialog";
-export * from "./EditResidenceDialog";
+export * from "./DeleteAccountSetting";
+export * from "./EditBirthplaceSetting";
+export * from "./EditNameSetting";
+export * from "./EditMinorSetting";
+export * from "./EditResidenceSetting";
+export * from "./EditThemeSetting";
 export * from "./SettingsGroup";
 export * from "./SettingsItem";