---
title: "Віджети профілю облікового запису"
description: "Вкладка Professional у /profile — Organization через Davinci-droplist, хмари тегів Position/Skills і редактор My Curriculum Vitae у Markdown із мобільними повноекранними чернетками Save & Exit"
locale: "uk"
---
# Віджети профілю облікового запису

> **Info**
> Використовуйте вкладки **Founder** / **Developer** на бічній панелі документації, щоб відфільтрувати цю сторінку. Публічні поверхні `/{username}` є окремими — див. [Public Profile Pages](/docs/features/public-profile.md). Каталог сутностей, на якому працює Organization, описано в [Entities](/docs/features/entities.md).

Авторизовані учасники керують основними даними облікового запису на **`/profile`**. На вкладці **Professional** працюють три складені віджети з `components/profile/` (UI застосунку — **не** MDX ring-віджети):

| Віджет | Завдання |
|--------|-----|
| **OrganizationEntitySelect** | Вибір організації з усіх Entities через **Davinci-droplist** |
| **PositionTagCloud** / **SkillsTagCloud** | Хмари множинних тегів FsModal (спільний `ProfileTagCloud`) |
| **CurriculumVitaeWidget** | Редактор CV у Markdown + завантаження файлу `profile:cv` |

Людський каталог (із місцями виклику Davinci-droplist): `components/docs/WIDGETS-README.md` → **App UI profile widgets**. Машинний індекс: `AI-CONTEXT/concepts/ring-docs.nodus.json` → `ring_widgets.index.sections.app_ui_profile`.

### For founders

## Чому це важливо для вашого клону

Професійні поля перетворюють порожній обліковий запис на **обличчя, якому можна доручити найм або партнерство**: яку організацію представляє учасник, які ролі та навички заявляє, і яке CV може редагувати на телефоні без боротьби з відступами chrome.

Типові сценарії:

1. Учасник відкриває `/profile` → Professional → натискає **Organization** → бачить список сутностей із пошуком (FsModal) → вибір зберігається одразу.
2. Учасник додає теги **Position** / **Skills** із відомого каталогу або власний текст; вибрані чипи залишаються видимими **всередині** модального вікна вибору.
3. Учасник натискає **Edit** у **My Curriculum Vitae**, пише Markdown на весь екран мобільного пристрою, покладається на **автозбереження локальної чернетки**, а потім натискає **Save & Exit**, щоб зберегти зміни у профілі.

  
- **[Публічний профіль](/docs/features/public-profile.md)** — Після резервування імені користувача — публічне представлення довіри за адресою /{username}.

  
- **[Entities](/docs/features/entities.md)** — Список організацій у droplist читає той самий каталог Entities, до якого приєднуються та який демонструють учасники.

  
- **[Резервування імені користувача](/docs/features/username-reservation.md)** — @handle розташований на вкладці Messengers (над Telegram), а не в hero-блоці Professional.

### For developers

## Карта модулів (перевірено)

| Поверхня | Шлях |
|---------|------|
| Оболонка облікового запису | `features/auth/components/profile-content.tsx` |
| Organization | `components/profile/organization-entity-select.tsx` → `DavinciDroplist` → `GET /api/entities` |
| Хмари тегів | `components/profile/profile-tag-cloud.tsx` (+ `position-tag-cloud.tsx`, `skills-tag-cloud.tsx`) |
| Каталоги тегів | `features/auth/lib/profile-tags.ts`, `position-tags.ts`, `skill-tags.ts` |
| Віджет CV | `components/profile/curriculum-vitae-widget.tsx` |
| Редактор CV | динамічний `WikiRichEditor` (`features/wiki/components/wiki-rich-editor.tsx`) — SSOT Markdown |
| Збереження | Server Action `updateProfile` — `curriculumVitae` / `organization` / `position` / `skills` FormData |
| Завантаження | `POST /api/uploads`, призначення `profile:cv` (`lib/uploads/upload-types.ts`) |
| Форма сховища | `users.data.curriculumVitae` (`CurriculumVitae` у `features/auth/types.ts`) |
| Чернетки | ключ `useLocalStorage` `profile_cv_draft_{userId}` + `useDebounce` (той самий безпечний для hydration шаблон, що й у chat composer) |
| Оболонка | `FsModal` — мобільні `hideTitleOnMobile`, `closeClassName="max-sm:hidden"`, футер Close + Save & Exit |

### Розташування Davinci-droplist

`OrganizationEntitySelect` — **мігроване** місце виклику Davinci-droplist (theme enhancer §7 / DL11), поряд із `CountrySelect`, `TimezoneSelect`, `ProductRepSelect`, `VendorEntitySelect`. `ProfileTagCloud` повторно використовує `DavinciDroplistItem` + QuickSearchFilter усередині FsModal для підтвердження множинних тегів (не single-select із закриттям після натискання).

### Chrome мобільного редактора CV

```
max-sm: повний viewport, body padding 0, header прихований
footer: [Close] ············ [Save & Exit]
draft:  useLocalStorage autosave while open
action: Save & Exit → updateProfile → clear draft → close
```

На десктопі залишаються підписи Cancel + Save і стандартна кнопка `.modal-close-button` у правому верхньому куті.

### Підключіть Organization

Імпортуйте `OrganizationEntitySelect` у вкладку Professional; передайте поточний рядок `organization` і `onSaved`, щоб оновити локальний стан профілю після `updateProfile`.

### Підключіть Position / Skills

Використовуйте обгортки `PositionTagCloud` / `SkillsTagCloud` (або безпосередньо `ProfileTagCloud` із `field` + `knownTags`). Вибрані чипи відображаються і зовні, і всередині FsModal.

### Підключіть Curriculum Vitae

Змонтуйте `CurriculumVitaeWidget` із `value={user.curriculumVitae}`. Переконайтеся, що призначення завантаження `profile:cv` дозволене в upload-core, а `updateProfile` розбирає JSON `curriculumVitae` у `users.data`.

```ts
// Draft key SSOT (curriculum-vitae-widget.tsx)
const draftKey = userId ? `profile_cv_draft_${userId}` : 'profile_cv_draft'
const [storedDraft, setStoredDraft] = useLocalStorage(draftKey, '')
```

- [features/public-profile](/docs/features/public-profile.md) — Наступний крок: публічне /{username} як представлення довіри після заповнення Professional-полів.

- [features/entities](/docs/features/entities.md) — Залежність: OrganizationEntitySelect перелічує Entities через GET /api/entities.

- [features/authentication](/docs/features/authentication.md) — Той самий процес: основні дані /profile та Auth.js session.update після updateProfile.

- [features/scientific-editor](/docs/features/scientific-editor.md) — Див. також: публікації використовують useAutoSave для /api/publications; чернетки CV використовують натомість useLocalStorage.

- [features/doc-system](/docs/features/doc-system.md) — Поглиблення: App UI profile widgets у WIDGETS-README + секція ring-docs.nodus app_ui_profile.