# Raft Chat — Settings

> The Settings destination — the person's own row, the Personal, Workspace and Resources groups, and pushed settings pages such as Notifications.

Source: https://raft-design.botiverse.build/products/raft-chat/settings. Generated from the current release; where it differs from what you remember, this page is right.

Settings is a top-level page in the yellow frame, grouped into Personal, Workspace and Resources. Each setting opens a pushed page that covers the tab bar. The shared rules for settings (apply at once, no Save button) are in [Forms](https://raft-design.botiverse.build/patterns/forms.md#settings-that-apply-at-once).

## Structure

### Settings

1. **The frame**: the large title Settings, with no navigation row.
2. **The person**: their avatar, name and email; it opens Account.
3. **Three inset groups**:
   - Personal: Account, Language & Region, Appearance, Notifications.
   - Workspace: Server Profile, Computers, AI Providers, Plan & Billing, and more.
   - Resources: Documentation, Feedback, Release Notes.

Each row shows its current value and a chevron. Feedback shows a count when there is a new reply, and Settings on the tab bar shows an attention dot.

```tsx
import { useCallback, useState } from "react";
import { Bell, Moon } from "lucide-react";
import {
  ListRow,
  ListRowBody,
  ListRowChevron,
  ListRowDescription,
  ListRowGroup,
  ListRowIcon,
  ListRowTitle,
  ListRowValue,
  Switch,
} from "@botiverse/raft-ui";

const APPEARANCES = ["System", "Light", "Dark"] as const;

export function ListRowSettingsComposition() {
  const [appearance, setAppearance] = useState(0);
  const [agentsMerge, setAgentsMerge] = useState(false);
  const handleAppearance = useCallback(() => {
    setAppearance((current) => (current + 1) % APPEARANCES.length);
  }, []);

  return (
    <ListRowGroup className="w-full max-w-sm">
      <ListRow variant="plain" onClick={handleAppearance}>
        <ListRowIcon>
          <Moon />
        </ListRowIcon>
        <ListRowBody>
          <ListRowTitle>Appearance</ListRowTitle>
        </ListRowBody>
        <ListRowValue>{APPEARANCES[appearance]}</ListRowValue>
        <ListRowChevron />
      </ListRow>
      <ListRow variant="plain" interactive={false}>
        <ListRowIcon>
          <Bell />
        </ListRowIcon>
        <ListRowBody>
          <ListRowTitle id="list-row-agents-merge">Agents can merge to main</ListRowTitle>
          <ListRowDescription wrap>Off: a person approves every merge.</ListRowDescription>
        </ListRowBody>
        <Switch
          checked={agentsMerge}
          onCheckedChange={setAgentsMerge}
          aria-labelledby="list-row-agents-merge"
        />
      </ListRow>
    </ListRowGroup>
  );
}
```

### A pushed settings page: Notifications

A top bar with Back and no tab bar (whether the top bar is white or yellow is [still open](https://raft-design.botiverse.build/decisions/open-questions.md)). A radio group sets the notification scope, switches control the kinds of agent notifications, a select sets the quiet hours, and a last row lists the exceptions.

On desktop, the sidebar lists the same groups, and Account opens by default.

## Rules

- Put Sign Out in Account.
- Put deleting the workspace and deleting the account in the danger zone at the bottom of their page: a red button, then a dialog that asks for the name to be typed ([Forms](https://raft-design.botiverse.build/patterns/forms.md#danger-zone)).
- Make a setting's description state the result, not repeat the title: "Off: a person approves every merge".