feat: Add settings layouts and pages

apps/api/src/locales/@vitnode/core/en.json

@@ -99,8 +99,11 @@
         }
       },
       "user_bar": {
+        "my_profile": "My Profile",
         "log_out": "Log out",
-        "admin_cp": "Admin CP"
+        "mod_cp": "Moderator CP",
+        "admin_cp": "Admin CP",
+        "settings": "Settings"
       }
     },
     "auth": {
@@ -204,6 +207,14 @@
           "title": "Password changed successfully",
           "desc": "You can now log in with your new password."
         }
+      },
+      "settings": {
+        "title": "Settings",
+        "desc": "Manage your profile, security, and account preferences.",
+        "nav": {
+          "overview": "Overview",
+          "security": "Security"
+        }
       }
     }
   },
@@ -264,8 +275,9 @@
         "user": "User",
         "createdAt": "Created At",
         "emailNotVerified": "Email Not Verified",
-        "view": "View profile",
+        "edit": "Edit profile",
         "roles": "Roles",
+        "email": "Email",
         "searchPlaceholder": "Search users by email or username...",
         "noResults": {
           "title": "No users found",
@@ -276,7 +288,26 @@
         "title": "User Profile",
         "joined": "Joined",
         "emailNotVerified": "Email Not Verified",
-        "coverPlaceholder": "No cover image"
+        "coverPlaceholder": "No cover image",
+        "editCover": "Edit cover image",
+        "editAvatar": "Edit avatar",
+        "editName": "Edit username",
+        "editEmail": "Edit email",
+        "uploadImage": "Upload image",
+        "removeImage": "Remove image",
+        "goToProfile": "Go to Public Profile",
+        "updateSuccess": "Profile updated.",
+        "editNameCode": "Edit name code",
+        "editNameCodeDesc": "The name code is the unique handle used in this user's profile URL and @mentions.",
+        "editNameCodeWarningTitle": "This change breaks existing links",
+        "editNameCodeWarning": "Changing the name code will break existing @mention links and change the public profile URL. Anyone visiting the old link will no longer reach this profile.",
+        "newNameCode": "New name code",
+        "confirmNameCode": "Type the <bold>current name code</bold> (<nameCode></nameCode>) to confirm",
+        "nameCodeInvalid": "Only letters, numbers, and hyphens are allowed.",
+        "nameCodeSame": "The new name code must be different from the current one.",
+        "nameCodeConfirmMismatch": "This does not match the current name code.",
+        "nameCodeExists": "This name code is already taken.",
+        "saveNameCode": "Change name code"
       },
       "verify_email": {
         "label": "Verify Email",

apps/docs/content/docs/ui/accordion.mdx

@@ -19,7 +19,7 @@ import {
 ```
 
 ```tsx
-<Accordion className="w-full" collapsible defaultValue="item-1" type="single">
+<Accordion className="w-full" defaultValue={['item-1']}>
   <AccordionItem value="item-1">
     <AccordionTrigger>Product Information</AccordionTrigger>
     <AccordionContent className="flex flex-col gap-4 text-balance">
@@ -67,4 +67,4 @@ import {
 
 ## API Reference
 
-[Radix UI - Accordion](https://www.radix-ui.com/primitives/docs/components/accordion#api-reference)
+[Base UI - Accordion](https://base-ui.com/react/components/accordion)

apps/docs/content/docs/ui/alert-dialog.mdx

@@ -3,6 +3,50 @@ title: Alert Dialog
 description: Display important messages to users in a modal dialog.
 ---
 
-<Callout type="warn" title="This documentation is under construction! 🚧">
-  We're working hard to bring you the best documentation experience.
-</Callout>
+A modal dialog that interrupts the user with important content and expects a
+response. Unlike a regular [Dialog](/docs/ui/dialog), it can only be dismissed
+through one of its actions.
+
+## Preview
+
+<Preview name="alert-dialog" />
+
+## Usage
+
+```ts
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@vitnode/core/components/ui/alert-dialog';
+import { Button } from '@vitnode/core/components/ui/button';
+```
+
+```tsx
+<AlertDialog>
+  <AlertDialogTrigger render={<Button variant="outline">Show Dialog</Button>} />
+  <AlertDialogContent>
+    <AlertDialogHeader>
+      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+      <AlertDialogDescription>
+        This action cannot be undone. This will permanently delete your account
+        and remove your data from our servers.
+      </AlertDialogDescription>
+    </AlertDialogHeader>
+    <AlertDialogFooter>
+      <AlertDialogCancel>Cancel</AlertDialogCancel>
+      <AlertDialogAction>Continue</AlertDialogAction>
+    </AlertDialogFooter>
+  </AlertDialogContent>
+</AlertDialog>
+```
+
+## API Reference
+
+[Base UI - Alert Dialog](https://base-ui.com/react/components/alert-dialog#api-reference)

apps/docs/content/docs/ui/button.mdx

@@ -21,6 +21,29 @@ import { Button } from "@vitnode/core/components/ui/button";
 </Button>
 ```
 
+## Link
+
+Use the `render` prop to swap the underlying element or compose the button with
+another component, such as a link. Set `nativeButton={false}` when the rendered
+element is not a native `<button>`.
+
+```tsx
+import Link from "next/link";
+
+<Button nativeButton={false} render={<Link href="/home" />}>
+  Home
+</Button>
+```
+
+## Loading
+
+Pass `isLoading` to render a spinner and disable the button while an action is
+in progress.
+
+```tsx
+<Button isLoading>Save changes</Button>
+```
+
 ## Props
 
 import { TypeTable } from "fumadocs-ui/components/type-table";
@@ -34,8 +57,27 @@ import { TypeTable } from "fumadocs-ui/components/type-table";
     },
     size: {
       description: "The size of the button.",
-      type: "default | sm | lg | icon",
+      type: "default | xs | sm | lg | icon | icon-xs | icon-sm | icon-lg",
       default: "default",
     },
+    isLoading: {
+      description: "Shows a loading spinner and disables the button.",
+      type: "boolean",
+    },
+    render: {
+      description:
+        "A React element to render in place of the default button element.",
+      type: "ReactElement",
+    },
+    nativeButton: {
+      description:
+        "Whether the rendered element is a native button. Set to false when using `render` with a non-button element.",
+      type: "boolean",
+      default: "true",
+    },
   }}
 />
+
+## API Reference
+
+[Base UI - Button](https://base-ui.com/react/components/button#api-reference)

apps/docs/content/docs/ui/checkbox.mdx

@@ -53,7 +53,7 @@ import { Checkbox } from '@vitnode/core/components/ui/checkbox';
 ```
 
 ```tsx
-<Checkbox onChange={onChange} checked={checked} />
+<Checkbox onCheckedChange={onCheckedChange} checked={checked} />
 ```
 
   </Tab>
@@ -79,3 +79,7 @@ import { TypeTable } from "fumadocs-ui/components/type-table";
     },
   }}
 />
+
+## API Reference
+
+[Base UI - Checkbox](https://base-ui.com/react/components/checkbox#api-reference)

apps/docs/content/docs/ui/dialog.mdx

@@ -3,6 +3,45 @@ title: Dialog
 description: Display content in a modal dialog.
 ---
 
-<Callout type="warn" title="This documentation is under construction! 🚧">
-  We're working hard to bring you the best documentation experience.
-</Callout>
+## Preview
+
+<Preview name="dialog" />
+
+## Usage
+
+```ts
+import { Button } from '@vitnode/core/components/ui/button';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@vitnode/core/components/ui/dialog';
+```
+
+```tsx
+<Dialog>
+  <DialogTrigger render={<Button variant="outline">Open</Button>} />
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Are you absolutely sure?</DialogTitle>
+      <DialogDescription>
+        This action cannot be undone. This will permanently delete your account
+        and remove your data from our servers.
+      </DialogDescription>
+    </DialogHeader>
+    <DialogFooter>
+      <DialogClose render={<Button variant="outline">Cancel</Button>} />
+      <Button variant="destructive">Yes, delete account</Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>
+```
+
+## API Reference
+
+[Base UI - Dialog](https://base-ui.com/react/components/dialog#api-reference)

apps/docs/content/docs/ui/dropdown-menu.mdx

@@ -16,7 +16,6 @@ import {
   DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuLabel,
-  DropdownMenuPortal,
   DropdownMenuSeparator,
   DropdownMenuShortcut,
   DropdownMenuSub,
@@ -28,8 +27,8 @@ import {
 
 ```tsx
 <DropdownMenu>
-  <DropdownMenuTrigger asChild>
-    <Button variant="outline">Open</Button>
+  <DropdownMenuTrigger render={<Button variant="outline" />}>
+    Open
   </DropdownMenuTrigger>
   <DropdownMenuContent className="w-56" align="start">
     <DropdownMenuLabel>My Account</DropdownMenuLabel>
@@ -56,14 +55,12 @@ import {
       <DropdownMenuItem>Team</DropdownMenuItem>
       <DropdownMenuSub>
         <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
-        <DropdownMenuPortal>
-          <DropdownMenuSubContent>
-            <DropdownMenuItem>Email</DropdownMenuItem>
-            <DropdownMenuItem>Message</DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem>More...</DropdownMenuItem>
-          </DropdownMenuSubContent>
-        </DropdownMenuPortal>
+        <DropdownMenuSubContent>
+          <DropdownMenuItem>Email</DropdownMenuItem>
+          <DropdownMenuItem>Message</DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>More...</DropdownMenuItem>
+        </DropdownMenuSubContent>
       </DropdownMenuSub>
       <DropdownMenuItem>
         New Team
@@ -85,4 +82,4 @@ import {
 
 ## API Reference
 
-[Radix UI - Dropdown Menu](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#api-reference)
+[Base UI - Menu](https://base-ui.com/react/components/menu#api-reference)

apps/docs/content/docs/ui/hover-card.mdx

@@ -28,4 +28,4 @@ import {
 
 ## API Reference
 
-[Radix UI - Hover Card](https://www.radix-ui.com/primitives/docs/components/hover-card#api-reference)
+[Base UI - Preview Card](https://base-ui.com/react/components/preview-card#api-reference)

apps/docs/content/docs/ui/popover.mdx

@@ -20,13 +20,11 @@ import {
 
 ```tsx
 <Popover>
-  <PopoverTrigger asChild>
-    <Button variant="outline">Open</Button>
-  </PopoverTrigger>
+  <PopoverTrigger render={<Button variant="outline">Open</Button>} />
   <PopoverContent>Place content for the popover here.</PopoverContent>
 </Popover>
 ```
 
 ## API Reference
 
-[Radix UI - Popover](https://www.radix-ui.com/primitives/docs/components/popover#api-reference)
+[Base UI - Popover](https://base-ui.com/react/components/popover#api-reference)

apps/docs/content/docs/ui/progress.mdx

@@ -19,4 +19,4 @@ import { Progress } from '@vitnode/core/components/ui/progress';
 
 ## API Reference
 
-[Radix UI - Progress](https://www.radix-ui.com/primitives/docs/components/progress#api-reference)
+[Base UI - Progress](https://base-ui.com/react/components/progress#api-reference)

apps/docs/content/docs/ui/scroll-area.mdx

@@ -37,4 +37,4 @@ export function ScrollAreaDemo() {
 
 ## API Reference
 
-[Radix UI - Scroll area](https://www.radix-ui.com/primitives/docs/components/scroll-area#api-reference)
+[Base UI - Scroll Area](https://base-ui.com/react/components/scroll-area#api-reference)

apps/docs/content/docs/ui/select.mdx

@@ -72,17 +72,28 @@ import {
 ```
 
 ```tsx
-<Select>
+const items = [
+  { label: "Option One", value: "option-one" },
+  { label: "Option Two", value: "option-two" },
+];
+
+<Select items={items}>
   <SelectTrigger>
     <SelectValue placeholder="Select example" />
   </SelectTrigger>
   <SelectContent>
-    <SelectItem value="option-one">Option One</SelectItem>
-    <SelectItem value="option-two">Option Two</SelectItem>
+    {items.map((item) => (
+      <SelectItem key={item.value} value={item.value}>
+        {item.label}
+      </SelectItem>
+    ))}
   </SelectContent>
 </Select>
 ```
 
+> Pass an `items` array to `Select` so `SelectValue` can render the selected
+> option's label. Without it, the raw `value` is displayed instead.
+
   </Tab>
 </Tabs>
 
@@ -121,4 +132,4 @@ import { TypeTable } from "fumadocs-ui/components/type-table";
 
 ## API Reference
 
-[Radix UI - Select](https://www.radix-ui.com/primitives/docs/components/select#api-reference)
+[Base UI - Select](https://base-ui.com/react/components/select#api-reference)

apps/docs/content/docs/ui/separator.mdx

@@ -16,7 +16,7 @@ import { Separator } from '@vitnode/core/components/ui/separator';
 ```tsx
 <div>
   <div className="space-y-1">
-    <h4 className="text-sm leading-none font-medium">Radix Primitives</h4>
+    <h4 className="text-sm leading-none font-medium">Base UI</h4>
     <p className="text-muted-foreground text-sm">
       An open-source UI component library.
     </p>
@@ -34,4 +34,4 @@ import { Separator } from '@vitnode/core/components/ui/separator';
 
 ## API Reference
 
-[Radix UI - Separator](https://www.radix-ui.com/primitives/docs/components/separator#api-reference)
+[Base UI - Separator](https://base-ui.com/react/components/separator#api-reference)