Move about to the rules page

apps/web/app/(app)/[emailAccountId]/assistant/AboutSetting.tsx

@@ -21,7 +21,7 @@ export function AboutSetting() {
         <Dialog>
           <DialogTrigger asChild>
             <Button variant="outline" size="sm">
-              Configure
+              Edit
             </Button>
           </DialogTrigger>
           <DialogContent className="max-w-2xl">

apps/web/app/(app)/[emailAccountId]/assistant/Rules.tsx

@@ -66,6 +66,8 @@ export function Rules({ size = "md" }: { size?: "sm" | "md" }) {
   const ruleDialog = useDialogState<{ ruleId: string; editMode?: boolean }>();
   const coldEmailDialog = useDialogState();
 
+  const onCreateRule = () => ruleDialog.open();
+
   const { emailAccountId } = useAccount();
   const { createAssistantUrl } = useAssistantNavigation(emailAccountId);
   const { executeAsync: setRuleEnabled } = useAction(
@@ -170,7 +172,7 @@ export function Rules({ size = "md" }: { size?: "sm" | "md" }) {
   const hasRules = !!rules?.length;
 
   return (
-    <div className="pb-4">
+    <div>
       <Card>
         <LoadingContent loading={isLoading} error={error}>
           {hasRules ? (
@@ -189,7 +191,9 @@ export function Rules({ size = "md" }: { size?: "sm" | "md" }) {
                     </TableHead>
                   )} */}
                   <TableHead>
-                    <span className="sr-only">User Actions</span>
+                    <div className="flex justify-end">
+                      <AddRuleButton onClick={onCreateRule} />
+                    </div>
                   </TableHead>
                 </TableRow>
               </TableHeader>
@@ -273,7 +277,7 @@ export function Rules({ size = "md" }: { size?: "sm" | "md" }) {
                           </div>
                         </TableCell>
                       )} */}
-                      <TableCell>
+                      <TableCell className="text-center">
                         <DropdownMenu>
                           <DropdownMenuTrigger asChild>
                             <Button
@@ -410,23 +414,11 @@ export function Rules({ size = "md" }: { size?: "sm" | "md" }) {
               </TableBody>
             </Table>
           ) : (
-            <NoRules
-              onCreateRule={() => {
-                ruleDialog.open();
-              }}
-            />
+            <NoRules onCreateRule={onCreateRule} />
           )}
         </LoadingContent>
       </Card>
 
-      {hasRules && (
-        <AddRuleButton
-          onCreateRule={() => {
-            ruleDialog.open();
-          }}
-        />
-      )}
-
       <RuleDialog
         ruleId={ruleDialog.data?.ruleId}
         isOpen={ruleDialog.isOpen}
@@ -475,7 +467,7 @@ export function ActionBadges({
   );
 }
 
-function NoRules({ onCreateRule }: { onCreateRule?: () => void }) {
+function NoRules({ onCreateRule }: { onCreateRule: () => void }) {
   return (
     <>
       <CardHeader>
@@ -487,16 +479,16 @@ function NoRules({ onCreateRule }: { onCreateRule?: () => void }) {
         </CardDescription>
       </CardHeader>
       <CardContent>
-        <AddRuleButton onCreateRule={onCreateRule} />
+        <AddRuleButton onClick={onCreateRule} />
       </CardContent>
     </>
   );
 }
 
-function AddRuleButton({ onCreateRule }: { onCreateRule?: () => void }) {
+function AddRuleButton({ onClick }: { onClick: () => void }) {
   return (
     <div className="my-2">
-      <Button size="sm" onClick={onCreateRule}>
+      <Button size="sm" onClick={onClick}>
         <PlusIcon className="mr-2 hidden size-4 md:block" />
         Add Rule
       </Button>

apps/web/app/(app)/[emailAccountId]/assistant/RulesPrompt.tsx

@@ -380,7 +380,7 @@ function PureExamples({ onSelect }: { onSelect: (example: string) => void }) {
     <div>
       <SectionHeader className="text-xl">Examples</SectionHeader>
 
-      <ScrollArea className="mt-1.5 sm:h-[75vh] sm:max-h-[75vh]">
+      <ScrollArea className="mt-1.5 sm:h-[60vh] sm:max-h-[60vh]">
         <div className="grid grid-cols-1 gap-2">
           {examplePrompts.map((example) => {
             const { color } = getActionType(example);

apps/web/app/(app)/[emailAccountId]/assistant/SettingsTab.tsx

@@ -1,3 +1,4 @@
+import { AboutSetting } from "@/app/(app)/[emailAccountId]/assistant/AboutSetting";
 import { DraftReplies } from "@/app/(app)/[emailAccountId]/assistant/DraftReplies";
 import { Rules } from "@/app/(app)/[emailAccountId]/assistant/Rules";
 import { RulesPrompt } from "@/app/(app)/[emailAccountId]/assistant/RulesPrompt";
@@ -20,13 +21,16 @@ export function SettingsTab() {
         </div>
       </TabsContent>
       <TabsContent value="rules">
-        <div className="max-w-screen-lg space-y-2">
-          <DraftReplies />
-          {/* <AboutSetting />
-          <DigestSetting /> */}
+        <div className="max-w-screen-lg">
           <Rules />
+          {/* <DigestSetting /> */}
         </div>
       </TabsContent>
+
+      <div className="mt-8 max-w-screen-lg space-y-2">
+        <DraftReplies />
+        <AboutSetting />
+      </div>
     </Tabs>
   );
 }

apps/web/app/(app)/[emailAccountId]/settings/ApiKeysCreateForm.tsx

@@ -30,7 +30,9 @@ export function ApiKeysCreateButtonModal({ mutate }: { mutate: () => void }) {
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button>Create new secret key</Button>
+        <Button size="sm" variant="outline">
+          Create new secret key
+        </Button>
       </DialogTrigger>
       <DialogContent>
         <DialogHeader>

apps/web/app/(app)/[emailAccountId]/settings/DeleteSection.tsx

@@ -71,7 +71,9 @@ export function DeleteSection() {
       <div>
         <AlertDialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
           <AlertDialogTrigger asChild>
-            <Button variant="outline">Delete user</Button>
+            <Button variant="outline" size="sm">
+              Delete user
+            </Button>
           </AlertDialogTrigger>
           <AlertDialogContent>
             <AlertDialogHeader>

apps/web/app/(app)/[emailAccountId]/settings/ModelSection.tsx

@@ -38,7 +38,7 @@ export function ModelSection() {
     <FormSection>
       <FormSectionLeft
         title="AI Model"
-        description="Choose your AI model and use your own API key."
+        description="Use the default model at no cost, or choose a custom model with your own API key."
       />
 
       <LoadingContent loading={isLoading || isLoadingModels} error={error}>

apps/web/app/(app)/[emailAccountId]/settings/WebhookGenerate.tsx

@@ -31,7 +31,12 @@ export function RegenerateSecretButton({
   });
 
   return (
-    <Button variant="outline" loading={isExecuting} onClick={() => execute()}>
+    <Button
+      variant="outline"
+      size="sm"
+      loading={isExecuting}
+      onClick={() => execute()}
+    >
       {hasSecret ? "Regenerate Secret" : "Generate Secret"}
     </Button>
   );

apps/web/app/(app)/[emailAccountId]/settings/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { FormWrapper } from "@/components/Form";
+import { FormSection, FormWrapper } from "@/components/Form";
 import { DeleteSection } from "@/app/(app)/[emailAccountId]/settings/DeleteSection";
 import { ModelSection } from "@/app/(app)/[emailAccountId]/settings/ModelSection";
 import { MultiAccountSection } from "@/app/(app)/[emailAccountId]/settings/MultiAccountSection";
@@ -14,7 +14,7 @@ import { LoadingContent } from "@/components/LoadingContent";
 import { DigestMailFrequencySection } from "@/app/(app)/[emailAccountId]/settings/DigestMailFrequencySection";
 import { useDigestEnabled } from "@/hooks/useFeatureFlags";
 import { BillingSection } from "@/app/(app)/[emailAccountId]/settings/BillingSection";
-import { AboutSectionFull } from "@/app/(app)/[emailAccountId]/settings/AboutSectionForm";
+import { SectionDescription } from "@/components/Typography";
 
 export default function SettingsPage(_props: {
   params: Promise<{ emailAccountId: string }>;
@@ -23,24 +23,39 @@ export default function SettingsPage(_props: {
   const digestEnabled = useDigestEnabled();
 
   return (
-    <Tabs defaultValue="email">
+    <Tabs defaultValue="user">
       <TabsToolbar>
         <div className="w-full overflow-x-auto">
           <TabsList>
-            <TabsTrigger value="email">Email</TabsTrigger>
             <TabsTrigger value="user">User</TabsTrigger>
+            <TabsTrigger value="email">Email Account</TabsTrigger>
           </TabsList>
         </div>
       </TabsToolbar>
 
+      <TabsContent value="user">
+        <FormWrapper>
+          <MultiAccountSection />
+          <BillingSection />
+          <ModelSection />
+          <WebhookSection />
+          <ApiKeysSection />
+          <DeleteSection />
+        </FormWrapper>
+      </TabsContent>
+
       <TabsContent value="email" className="content-container mb-10">
         <LoadingContent loading={isLoading} error={error}>
           {data && (
             <FormWrapper>
-              <AboutSectionFull />
+              <FormSection className="py-4">
+                <SectionDescription>
+                  Settings for {data.email}
+                </SectionDescription>
+              </FormSection>
+
               {/* this is only used in Gmail when sending a new message. disabling for now. */}
               {/* <SignatureSectionForm signature={user.signature} /> */}
-              {/* <LabelsSection /> */}
               {/* <EmailUpdatesSection
                 summaryEmailFrequency={data?.summaryEmailFrequency}
                 mutate={mutate}
@@ -56,16 +71,6 @@ export default function SettingsPage(_props: {
           )}
         </LoadingContent>
       </TabsContent>
-      <TabsContent value="user">
-        <FormWrapper>
-          <ModelSection />
-          <MultiAccountSection />
-          <WebhookSection />
-          <ApiKeysSection />
-          <BillingSection />
-          <DeleteSection />
-        </FormWrapper>
-      </TabsContent>
     </Tabs>
   );
 }

version.txt

@@ -1 +1 @@
-v1.8.2
+v1.8.3