fix: refactor and implement design

apps/web/src/app/(dashboard)/settings/profile/claim-profile-alert-dialog.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { useState } from 'react';
+
+import type { User } from '@documenso/prisma/client';
+import { cn } from '@documenso/ui/lib/utils';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+
+import { ClaimPublicProfileDialogForm } from '~/components/forms/public-profile-claim-dialog';
+
+export type ClaimProfileAlertDialogProps = {
+  className?: string;
+  user: User;
+};
+
+export const ClaimProfileAlertDialog = ({ className, user }: ClaimProfileAlertDialogProps) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Alert
+        className={cn(
+          'flex flex-col items-center justify-between gap-4 p-6 md:flex-row',
+          className,
+        )}
+        variant="neutral"
+      >
+        <div>
+          <AlertTitle>Claim your profile</AlertTitle>
+          <AlertDescription className="mr-2">
+            Profiles are coming soon! Claim your profile URL now to reserve your corner of the
+            signing revolution.
+          </AlertDescription>
+        </div>
+
+        <div className="flex-shrink-0">
+          <Button onClick={() => setOpen(true)}>Claim Now</Button>
+        </div>
+      </Alert>
+
+      <ClaimPublicProfileDialogForm open={open} onOpenChange={setOpen} user={user} />
+    </>
+  );
+};

apps/web/src/app/(dashboard)/settings/profile/page.tsx

@@ -5,6 +5,7 @@ import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-
 import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
 import { ProfileForm } from '~/components/forms/profile';
 
+import { ClaimProfileAlertDialog } from './claim-profile-alert-dialog';
 import { DeleteAccountDialog } from './delete-account-dialog';
 
 export const metadata: Metadata = {
@@ -18,9 +19,13 @@ export default async function ProfileSettingsPage() {
     <div>
       <SettingsHeader title="Profile" subtitle="Here you can edit your personal details." />
 
-      <ProfileForm className="max-w-xl" user={user} />
+      <ProfileForm className="mb-8 max-w-xl" user={user} />
 
-      <DeleteAccountDialog className="mt-8 max-w-xl" user={user} />
+      <ClaimProfileAlertDialog className="max-w-xl" user={user} />
+
+      <hr className="my-4 max-w-xl" />
+
+      <DeleteAccountDialog className="max-w-xl" user={user} />
     </div>
   );
 }

apps/web/src/app/(dashboard)/settings/public-profile/layout.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-
-export type PublicProfileSettingsLayout = {
-  children: React.ReactNode;
-};
-
-export default function PublicProfileSettingsLayout({ children }: PublicProfileSettingsLayout) {
-  return <div className="col-span-12 md:col-span-9">{children}</div>;
-}

apps/web/src/app/(dashboard)/settings/public-profile/page.tsx

@@ -1,30 +0,0 @@
-import * as React from 'react';
-
-import type { Metadata } from 'next';
-import Link from 'next/link';
-
-import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
-
-export const metadata: Metadata = {
-  title: 'Public Profile',
-};
-
-export default function PublicProfilePage() {
-  return (
-    <>
-      <SettingsHeader
-        title="Public profile"
-        subtitle=""
-        className="max-w-xl"
-        titleChildren={
-          <Link
-            href="#"
-            className="bg-primary dark:text-background ml-2 rounded-full px-2 py-1 text-xs font-semibold sm:px-3"
-          >
-            Coming soon!
-          </Link>
-        }
-      />
-    </>
-  );
-}