AIST.tech DS / Patterns / Settings

Настройки.

Левый sidebar с разделами, правая колонка — форма или таблица. Опасные действия — внизу, в Danger zone с красным border. Сохранение происходит по «Save» внутри секции, не по all-at-once кнопке.

01. Анатомия layout

Settings — это не одна большая форма. Это набор маленьких карт, каждая со своей кнопкой Save. Левый sidebar 200 px, правая колонка скроллится.

Sidebar 200 pxГруппы: Account / Organization / Developers / Danger. Левый-вертикальный.

Один экран = один разделProfile отдельно, Organization отдельно. Не смешивать.

Save на каждой секцииВнизу карточки. Изменили только аватар — нажали Save в Profile.

Danger zone снизу справаКрасный border. Всегда требует confirmation modal с type-to-confirm.

02. Profile (account)

Личные данные пользователя. Email менять нельзя — это identifier. Можно менять имя, аватар, пароль.

— Settings → Profile

Профиль

Ваши личные данные. Видны только администраторам организации.

Аватар и имя

Имя видно коллегам в истории чатов и комментариях.

АС

Имя

Фамилия

Email Email — ваш идентификатор, поменять можно только через поддержку.

03. Organization

Имя организации, логотип, контактный email, юр. адрес. Меняет только owner.

— Settings → Organization (admin-only view)

Организация

Настройки на уровне всей организации. Доступно только владельцам.

Профиль организации

ORG_ID · 0a8f3e

Имя видно во всех продуктах AIST.tech и в инвойсах.

Название

Юридическое название

Slug в URL

Контактный email

Лимиты и тариф

BUSINESS · год

Текущий тариф — Business. До конца периода 143 дня. Изменить тариф →

04. Team & roles

Таблица людей в организации с ролью и последним заходом. Кнопка пригласить — сверху справа.

— Settings → Team

Команда

12 человек, 1 приглашение в ожидании.

Участник	Роль	Последний вход
АС Анна Соколоваanna@kontur.ru · вы	Owner	Сейчас	···
ДК Дмитрий Куликовdmitry@kontur.ru	Admin	2 часа назад	···
ЕЛ Елена Лебедеваelena@kontur.ru	Member	Вчера	···
МП maxim@kontur.ruприглашение отправлено	Pending	—	···

05. Notifications

Список тогглов. Группировка по каналу (email / in-app). Описание поясняет, что конкретно отправляем.

— Settings → Notifications

Уведомления

Какие письма приходят на ваш email. In-app уведомления настраиваются отдельно в каждом продукте.

Email-рассылки

Готовые отчёты аналитика

Письмо, когда модель закончила длинный запрос (>2 минут).

Комментарии в отчётах

Когда коллега упомянул вас через @.

Еженедельный дайджест

По пятницам — что вы и команда сделали за неделю.

Продуктовые новости

Релизы, фичи, изменения. Не чаще раза в месяц.

06. API keys

Список ключей с именем, последними 4 символами, датой создания. Полный ключ показывается ровно один раз — при создании.

— Settings → API keys

API-ключи

Для интеграций с вашими системами. Полный ключ виден один раз — сохраните его.

production sk_prod_····························8a3f создан 14 ноя ···

staging sk_stg_····························c721 создан 02 ноя ···

read-only sk_ro_······························af09 создан 18 окт ···

07. Danger zone

Опасные действия: leave organization, transfer ownership, delete. Красный border, никогда не мелькает зелёным — только серьёзный тон.

— Settings → Danger zone

Опасная зона

Действия в этом разделе нельзя отменить. Доступно только владельцам.

Опасные действия

Эти операции необратимы. Каждая требует подтверждения.

Покинуть организацию

Вы потеряете доступ к Контур и всем его продуктам.

Передать владение

Передать роль owner другому администратору. Вы останетесь admin.

Удалить организацию

Удалятся все данные, отчёты, API-ключи. Восстановлению не подлежит.

08. Destructive confirm

Type-to-confirm: пользователь вводит имя объекта, чтобы убедиться, что знает, что удаляет. Кнопка disabled до точного совпадения.

— modal: type-to-confirm для опасных действий

Правила

Структура разделов

Account	Профиль, пароль, личные уведомления. Каждый юзер видит свой.
Organization	Имя, лого, юр. адрес, биллинг. Только owner. Members видят read-only.
Team	Таблица людей с ролями. Admin и выше может приглашать.
Developers	API-ключи, webhooks. Admin-only. Member не видит даже раздел.
Danger zone	Leave / transfer / delete. Только owner. Member видит только «leave».

Save-поведение

Per-section save	Каждая карточка — своя кнопка Save. Не одна общая внизу страницы.
Disabled до изменений	Кнопка Save должна быть disabled, пока форма не тронута. Активна — значит, есть что сохранять.
Optimistic UI для тогглов	Уведомления, флажки — меняются мгновенно, без Save. Тостер «Сохранено» в углу.
Destructive = confirm	Любое удаление, передача owner, leave org — через type-to-confirm modal.
Email нельзя поменять	Это identifier. Только через поддержку. Поле disabled с объяснением.

Do / Don't

DOМаленькие секции с ясными именами. «Аватар и имя» отдельно от «Email и пароль».

DON'TОдна гигантская форма на всё. Юзер прокручивает километр и боится ничего трогать.

DODanger zone — отдельный раздел. Внизу sidebar, красный текст, разделён зрительно от обычных настроек.

DON'TКнопка «Delete» где-то посредине Profile. Случайный клик — потеря данных.

DOType-to-confirm для destructive. «Введите имя организации» убирает 99% случайных удалений.

DON'T«Are you sure?» c кнопкой OK. Слишком легко нажать на автопилоте.

DOОписание каждой настройки. «Что именно отключится» в 1 строку под названием.

DON'TГолые тогглы без объяснения. «Email notifications [✓]» — а о чём конкретно?

Токены

Sidebar width	200 px	Меньше чем в app shell — здесь вторичная навигация
Sidebar item padding	7 20 px	font-size 0.875rem
Active item	bg rgba(0,72,178,0.06)	border-left 2 px primary
Section label	0.625rem mono caps	letter-spacing 0.08em, muted
Content padding	32 40 px
Block separator	1 px solid border	padding 24 0
Section h5	1rem heading 600
Input padding	9 12 px	radius 7
Toggle size	40 × 22 px	thumb 18 × 18
Danger zone border	1 px solid var(--destructive)	bg rgba(220,38,38,0.02), radius 12
Danger row separator	1 px rgba(220,38,38,0.15)
Confirm modal width	420 px max	radius 12, padding 24
API key value	mono 0.75rem muted	···· последние 4 символа