approved/006-groups-manage: одобренные модалки групп; подписи-заметки из макетов убраны

This commit is contained in:
Porfiry
2026-09-19 15:09:05 +03:00
parent 3152471bab
commit 159f8d1355
8 changed files with 42 additions and 30 deletions
-301
View File
@@ -1,301 +0,0 @@
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Группы — список</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #121218; --panel: #17212B; --panel2: #1C2733; --line: #232B36;
--fg: #EBEBEB; --dim: #768C9E; --accent: #6AB2F2; --badge: #5EB5F7;
--err: #EC3942; --ok: #63C88A; --user-bubble: #2B5278; --bot-bubble: #1C2733;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-webkit-font-smoothing: antialiased;
background: #0A0A0F; color: var(--fg); line-height: 1.45;
display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px;
}
/* ============ окно клиента на фоне ============ */
.window {
width: 1180px; height: 740px; background: var(--bg); border-radius: 12px;
display: flex; overflow: hidden; border: 1px solid var(--line); position: relative;
box-shadow: 0 24px 80px rgba(0,0,0,.6);
}
.sidebar { width: 320px; background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.sb-head { padding: 14px 16px 10px; }
.sb-title { font-size: 17px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; }
.icon-btn { width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent;
color: var(--dim); cursor: pointer; display: grid; place-items: center; font-size: 17px; }
.icon-btn:hover { background: var(--panel2); color: var(--fg); }
.search {
margin: 0 16px 10px; padding: 8px 11px; border-radius: 9px; border: 1px solid transparent;
background: var(--panel2); color: var(--fg); font-size: 13px; outline: none; font-family: inherit;
}
.search::placeholder { color: var(--dim); }
/* ── лента групп ── */
.folders { display: flex; gap: 6px; padding: 0 16px 10px; overflow-x: auto; }
.folder {
padding: 5px 11px; border-radius: 14px; font-size: 12px; color: var(--dim);
background: var(--panel2); cursor: pointer; white-space: nowrap; border: 1px solid transparent;
}
.folder.active { color: var(--fg); border-color: var(--accent); background: rgba(106,178,242,.12); }
.folder .cnt { color: var(--badge); font-weight: 600; margin-left: 4px; }
/* кнопка «Группы» — не папка, а действие: справа, отдельно от чипов */
.folder.act { margin-left: auto; background: transparent; color: var(--dim);
display: grid; place-items: center; padding: 5px 9px; font-size: 13px; }
.folder.act:hover { color: var(--fg); background: var(--panel2); }
.chat-row { display: flex; gap: 11px; padding: 9px 10px; border-radius: 10px; cursor: pointer; align-items: flex-start; }
.chat-row:hover { background: var(--panel2); }
.chat-row.active { background: #233040; }
.chat-list { flex: 1; overflow-y: auto; padding: 2px 8px 12px; }
.avatar {
width: 42px; height: 42px; border-radius: 50%; flex: 0 0 42px; display: grid; place-items: center;
font-size: 15px; font-weight: 600; color: #0F1922; background: var(--accent);
}
.avatar.g2 { background: #86C99A; }
.avatar.g3 { background: #C9A886; }
.avatar.g4 { background: #B79AE0; }
.chat-mid { flex: 1; min-width: 0; }
.chat-name { font-size: 14px; font-weight: 500; display: flex; justify-content: space-between; gap: 8px; }
.chat-time { font-size: 11px; color: var(--dim); font-weight: 400; }
.chat-prev { font-size: 12.5px; color: var(--dim); white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; margin-top: 2px; }
.badge { background: var(--badge); color: #0F1922; font-size: 11px; font-weight: 700;
border-radius: 10px; padding: 1px 7px; }
.main { flex: 1; display: flex; flex-direction: column; }
.chat-head { height: 58px; flex: 0 0 58px; border-bottom: 1px solid var(--line); display: flex;
align-items: center; gap: 11px; padding: 0 16px; }
.chat-head .avatar { width: 36px; height: 36px; flex: 0 0 36px; font-size: 13px; }
.head-name { font-size: 14.5px; font-weight: 600; }
.head-sub { font-size: 11.5px; color: var(--dim); }
.head-sub .dot { color: var(--ok); }
.messages { flex: 1; overflow-y: auto; padding: 18px 24px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 74%; padding: 9px 13px; border-radius: 13px; font-size: 13.5px; }
.msg.user { align-self: flex-end; background: var(--user-bubble); border-bottom-right-radius: 4px; }
.msg.bot { align-self: flex-start; background: var(--bot-bubble); border-bottom-left-radius: 4px; }
/* ============ затемнение и модалка ============ */
.scrim { position: absolute; inset: 0; background: rgba(0,0,0,.62); z-index: 100; }
.layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 150; }
.dialog {
width: 520px; min-width: 520px; flex: 0 0 auto; max-height: 600px; background: var(--panel);
border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column;
overflow: hidden; box-shadow: 0 26px 80px rgba(0,0,0,.7);
}
.d-head { display: flex; align-items: center; gap: 11px; padding: 16px 18px 14px; border-bottom: 1px solid var(--line); }
.d-head h2 { font-size: 16px; font-weight: 600; flex: 1; }
.x-btn { width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent;
color: var(--dim); cursor: pointer; font-size: 17px; }
.x-btn:hover { background: var(--panel2); color: var(--fg); }
.d-body { flex: 1; overflow-y: auto; padding: 14px 18px 8px; }
.d-foot { padding: 13px 18px 16px; border-top: 1px solid var(--line); display: flex; gap: 9px; }
/* ── строка группы ── */
.grp {
display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 11px;
background: var(--panel2); margin-bottom: 9px; border: 1px solid transparent;
}
.grp:hover { border-color: var(--line); }
.grp .mid { flex: 1; min-width: 0; }
.grp .nm { font-size: 14px; font-weight: 550; }
.grp .sub { font-size: 11.5px; color: var(--dim); margin-top: 3px; }
.grp .acts { display: flex; gap: 4px; flex: 0 0 auto; }
.mini-ic { width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent;
color: var(--dim); cursor: pointer; font-size: 14px; }
.mini-ic:hover { background: var(--panel); color: var(--fg); }
.mini-ic.del:hover { color: var(--err); }
/* служебная группа — «Все чаты»: не правится и не удаляется */
.grp.sys { background: transparent; border: 1px dashed var(--line); }
.grp.sys .nm { color: var(--fg); }
.grp .lock { font-size: 11px; color: var(--dim); flex: 0 0 auto; }
.btn { border-radius: 10px; padding: 10px 17px; font-size: 13px; cursor: pointer; border: 1px solid var(--line);
background: transparent; color: var(--fg); font-family: inherit; white-space: nowrap; }
.btn:hover { border-color: var(--dim); }
.btn.prim { background: var(--accent); border-color: var(--accent); color: #0F1922; font-weight: 650; }
.btn.dang { color: var(--err); border-color: rgba(236,57,66,.4); }
.btn.dang:hover { border-color: var(--err); background: rgba(236,57,66,.09); }
.btn.dang.solid { background: var(--err); border-color: var(--err); color: #FFF; font-weight: 650; }
.btn.sm { padding: 8px 13px; font-size: 12.5px; }
.btn.wide { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
border-style: dashed; color: var(--dim); }
.btn.wide:hover { color: var(--fg); border-color: var(--dim); }
/* ── форма ── */
.field { margin-bottom: 15px; }
.field label { display: block; font-size: 12px; color: var(--dim); margin-bottom: 6px; }
.field input {
width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line);
background: var(--bg); color: var(--fg); font-size: 13.5px; outline: none; font-family: inherit;
}
.field input:focus { border-color: var(--accent); }
.field .note { font-size: 11px; color: var(--dim); margin-top: 6px; }
/* ── предупреждение ── */
.warn {
display: flex; gap: 9px; align-items: flex-start; margin-bottom: 15px; padding: 11px 13px;
border-radius: 10px; background: rgba(236,57,66,.09); border: 1px solid rgba(236,57,66,.32);
font-size: 12px; color: #F0A6AA; line-height: 1.5;
}
.warn .i { flex: 0 0 auto; font-size: 13px; }
.info {
display: flex; gap: 9px; align-items: flex-start; margin-top: 4px; padding: 11px 13px;
border-radius: 10px; background: var(--bg); border: 1px solid var(--line);
font-size: 11.5px; color: var(--dim); line-height: 1.5;
}
.danger-zone { margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--line); }
.danger-zone .lbl { font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
color: var(--dim); font-weight: 700; margin-bottom: 9px; }
/* подпись под макетом — не часть интерфейса */
.caption { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%);
font-size: 12px; color: var(--dim); background: rgba(23,33,43,.96); border: 1px solid var(--line);
border-radius: 9px; padding: 7px 13px; z-index: 400; }
@media (max-height: 820px) { body { padding: 8px; } .window { transform: scale(.82); } }
</style>
</head>
<body>
<div class="window">
<aside class="sidebar">
<div class="sb-head">
<div class="sb-title">
<span>Диалоги</span>
<button class="icon-btn" title="Новый диалог">+</button>
</div>
</div>
<input class="search" placeholder="Поиск диалога…">
<div class="folders">
<div class="folder active">Все чаты <span class="cnt">3</span></div>
<div class="folder">Работа</div>
<div class="folder">Дом</div>
<div class="folder">Учёба</div>
<div class="folder">Личное</div>
<div class="folder act" title="Группы: добавить, изменить, удалить">✎</div>
</div>
<div class="chat-list">
<div class="chat-row active">
<div class="avatar">АГ</div>
<div class="chat-mid">
<div class="chat-name"><span>agentik · рабочий</span><span class="chat-time">14:22</span></div>
<div class="chat-prev">Собрал отчёт, жду правок</div>
</div>
<div class="row-tail"><span class="badge">2</span></div>
</div>
<div class="chat-row">
<div class="avatar g2">ОЧ</div>
<div class="chat-mid">
<div class="chat-name"><span>Отчёт за квартал</span><span class="chat-time">12:05</span></div>
<div class="chat-prev">Файл лежит на диске</div>
</div>
</div>
<div class="chat-row">
<div class="avatar g3">РЗ</div>
<div class="chat-mid">
<div class="chat-name"><span>Разбор логов nginx</span><span class="chat-time">вчера</span></div>
<div class="chat-prev">Нашёл 3 ошибки 502</div>
</div>
</div>
<div class="chat-row">
<div class="avatar g4">ПО</div>
<div class="chat-mid">
<div class="chat-name"><span>Помощь по Solana</span><span class="chat-time">вчера</span></div>
<div class="chat-prev">Девайт-нет стартовал</div>
</div>
</div></div>
</aside>
<main class="main">
<header class="chat-head">
<div class="avatar">АГ</div>
<div>
<div class="head-name">agentik · рабочий</div>
<div class="head-sub"><span class="dot">●</span> на связи</div>
</div>
</header>
<div class="messages">
<div class="msg user">Проверь, почему падает CI</div>
<div class="msg bot">Нашёл: длинное тире в именах тестов ломает сборку. Починил, CI зелёный.</div>
</div>
</main>
<div class="scrim"></div>
<div class="layer">
<div class="dialog">
<div class="d-head">
<h2>Группы</h2>
<button class="x-btn">✕</button>
</div>
<div class="d-body">
<div class="grp sys">
<div class="mid">
<div class="nm">Все чаты</div>
<div class="sub">Показывает все диалоги, из любой группы</div>
</div>
<div class="lock">встроенная</div>
</div>
<div class="grp">
<div class="mid">
<div class="nm">Работа</div>
<div class="sub">12 диалогов</div>
</div>
<div class="acts">
<button class="mini-ic" title="Изменить">✎</button>
<button class="mini-ic del" title="Удалить">🗑</button>
</div>
</div>
<div class="grp">
<div class="mid">
<div class="nm">Дом</div>
<div class="sub">4 диалога</div>
</div>
<div class="acts">
<button class="mini-ic" title="Изменить">✎</button>
<button class="mini-ic del" title="Удалить">🗑</button>
</div>
</div>
<div class="grp">
<div class="mid">
<div class="nm">Учёба</div>
<div class="sub">2 диалога</div>
</div>
<div class="acts">
<button class="mini-ic" title="Изменить">✎</button>
<button class="mini-ic del" title="Удалить">🗑</button>
</div>
</div>
<div class="grp">
<div class="mid">
<div class="nm">Личное</div>
<div class="sub">пустая</div>
</div>
<div class="acts">
<button class="mini-ic" title="Изменить">✎</button>
<button class="mini-ic del" title="Удалить">🗑</button>
</div>
</div>
<button class="btn wide">+ Добавить группу</button>
</div>
<div class="d-foot">
<button class="btn prim" style="flex:1">Готово</button>
</div>
</div>
</div>
</div>
<div class="caption">1. Список групп: изменить, удалить, добавить</div>
</body>
</html>
-260
View File
@@ -1,260 +0,0 @@
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Группы — новая</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #121218; --panel: #17212B; --panel2: #1C2733; --line: #232B36;
--fg: #EBEBEB; --dim: #768C9E; --accent: #6AB2F2; --badge: #5EB5F7;
--err: #EC3942; --ok: #63C88A; --user-bubble: #2B5278; --bot-bubble: #1C2733;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-webkit-font-smoothing: antialiased;
background: #0A0A0F; color: var(--fg); line-height: 1.45;
display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px;
}
/* ============ окно клиента на фоне ============ */
.window {
width: 1180px; height: 740px; background: var(--bg); border-radius: 12px;
display: flex; overflow: hidden; border: 1px solid var(--line); position: relative;
box-shadow: 0 24px 80px rgba(0,0,0,.6);
}
.sidebar { width: 320px; background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.sb-head { padding: 14px 16px 10px; }
.sb-title { font-size: 17px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; }
.icon-btn { width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent;
color: var(--dim); cursor: pointer; display: grid; place-items: center; font-size: 17px; }
.icon-btn:hover { background: var(--panel2); color: var(--fg); }
.search {
margin: 0 16px 10px; padding: 8px 11px; border-radius: 9px; border: 1px solid transparent;
background: var(--panel2); color: var(--fg); font-size: 13px; outline: none; font-family: inherit;
}
.search::placeholder { color: var(--dim); }
/* ── лента групп ── */
.folders { display: flex; gap: 6px; padding: 0 16px 10px; overflow-x: auto; }
.folder {
padding: 5px 11px; border-radius: 14px; font-size: 12px; color: var(--dim);
background: var(--panel2); cursor: pointer; white-space: nowrap; border: 1px solid transparent;
}
.folder.active { color: var(--fg); border-color: var(--accent); background: rgba(106,178,242,.12); }
.folder .cnt { color: var(--badge); font-weight: 600; margin-left: 4px; }
/* кнопка «Группы» — не папка, а действие: справа, отдельно от чипов */
.folder.act { margin-left: auto; background: transparent; color: var(--dim);
display: grid; place-items: center; padding: 5px 9px; font-size: 13px; }
.folder.act:hover { color: var(--fg); background: var(--panel2); }
.chat-row { display: flex; gap: 11px; padding: 9px 10px; border-radius: 10px; cursor: pointer; align-items: flex-start; }
.chat-row:hover { background: var(--panel2); }
.chat-row.active { background: #233040; }
.chat-list { flex: 1; overflow-y: auto; padding: 2px 8px 12px; }
.avatar {
width: 42px; height: 42px; border-radius: 50%; flex: 0 0 42px; display: grid; place-items: center;
font-size: 15px; font-weight: 600; color: #0F1922; background: var(--accent);
}
.avatar.g2 { background: #86C99A; }
.avatar.g3 { background: #C9A886; }
.avatar.g4 { background: #B79AE0; }
.chat-mid { flex: 1; min-width: 0; }
.chat-name { font-size: 14px; font-weight: 500; display: flex; justify-content: space-between; gap: 8px; }
.chat-time { font-size: 11px; color: var(--dim); font-weight: 400; }
.chat-prev { font-size: 12.5px; color: var(--dim); white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; margin-top: 2px; }
.badge { background: var(--badge); color: #0F1922; font-size: 11px; font-weight: 700;
border-radius: 10px; padding: 1px 7px; }
.main { flex: 1; display: flex; flex-direction: column; }
.chat-head { height: 58px; flex: 0 0 58px; border-bottom: 1px solid var(--line); display: flex;
align-items: center; gap: 11px; padding: 0 16px; }
.chat-head .avatar { width: 36px; height: 36px; flex: 0 0 36px; font-size: 13px; }
.head-name { font-size: 14.5px; font-weight: 600; }
.head-sub { font-size: 11.5px; color: var(--dim); }
.head-sub .dot { color: var(--ok); }
.messages { flex: 1; overflow-y: auto; padding: 18px 24px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 74%; padding: 9px 13px; border-radius: 13px; font-size: 13.5px; }
.msg.user { align-self: flex-end; background: var(--user-bubble); border-bottom-right-radius: 4px; }
.msg.bot { align-self: flex-start; background: var(--bot-bubble); border-bottom-left-radius: 4px; }
/* ============ затемнение и модалка ============ */
.scrim { position: absolute; inset: 0; background: rgba(0,0,0,.62); z-index: 100; }
.layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 150; }
.dialog {
width: 520px; min-width: 520px; flex: 0 0 auto; max-height: 600px; background: var(--panel);
border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column;
overflow: hidden; box-shadow: 0 26px 80px rgba(0,0,0,.7);
}
.d-head { display: flex; align-items: center; gap: 11px; padding: 16px 18px 14px; border-bottom: 1px solid var(--line); }
.d-head h2 { font-size: 16px; font-weight: 600; flex: 1; }
.x-btn { width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent;
color: var(--dim); cursor: pointer; font-size: 17px; }
.x-btn:hover { background: var(--panel2); color: var(--fg); }
.d-body { flex: 1; overflow-y: auto; padding: 14px 18px 8px; }
.d-foot { padding: 13px 18px 16px; border-top: 1px solid var(--line); display: flex; gap: 9px; }
/* ── строка группы ── */
.grp {
display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 11px;
background: var(--panel2); margin-bottom: 9px; border: 1px solid transparent;
}
.grp:hover { border-color: var(--line); }
.grp .mid { flex: 1; min-width: 0; }
.grp .nm { font-size: 14px; font-weight: 550; }
.grp .sub { font-size: 11.5px; color: var(--dim); margin-top: 3px; }
.grp .acts { display: flex; gap: 4px; flex: 0 0 auto; }
.mini-ic { width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent;
color: var(--dim); cursor: pointer; font-size: 14px; }
.mini-ic:hover { background: var(--panel); color: var(--fg); }
.mini-ic.del:hover { color: var(--err); }
/* служебная группа — «Все чаты»: не правится и не удаляется */
.grp.sys { background: transparent; border: 1px dashed var(--line); }
.grp.sys .nm { color: var(--fg); }
.grp .lock { font-size: 11px; color: var(--dim); flex: 0 0 auto; }
.btn { border-radius: 10px; padding: 10px 17px; font-size: 13px; cursor: pointer; border: 1px solid var(--line);
background: transparent; color: var(--fg); font-family: inherit; white-space: nowrap; }
.btn:hover { border-color: var(--dim); }
.btn.prim { background: var(--accent); border-color: var(--accent); color: #0F1922; font-weight: 650; }
.btn.dang { color: var(--err); border-color: rgba(236,57,66,.4); }
.btn.dang:hover { border-color: var(--err); background: rgba(236,57,66,.09); }
.btn.dang.solid { background: var(--err); border-color: var(--err); color: #FFF; font-weight: 650; }
.btn.sm { padding: 8px 13px; font-size: 12.5px; }
.btn.wide { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
border-style: dashed; color: var(--dim); }
.btn.wide:hover { color: var(--fg); border-color: var(--dim); }
/* ── форма ── */
.field { margin-bottom: 15px; }
.field label { display: block; font-size: 12px; color: var(--dim); margin-bottom: 6px; }
.field input {
width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line);
background: var(--bg); color: var(--fg); font-size: 13.5px; outline: none; font-family: inherit;
}
.field input:focus { border-color: var(--accent); }
.field .note { font-size: 11px; color: var(--dim); margin-top: 6px; }
/* ── предупреждение ── */
.warn {
display: flex; gap: 9px; align-items: flex-start; margin-bottom: 15px; padding: 11px 13px;
border-radius: 10px; background: rgba(236,57,66,.09); border: 1px solid rgba(236,57,66,.32);
font-size: 12px; color: #F0A6AA; line-height: 1.5;
}
.warn .i { flex: 0 0 auto; font-size: 13px; }
.info {
display: flex; gap: 9px; align-items: flex-start; margin-top: 4px; padding: 11px 13px;
border-radius: 10px; background: var(--bg); border: 1px solid var(--line);
font-size: 11.5px; color: var(--dim); line-height: 1.5;
}
.danger-zone { margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--line); }
.danger-zone .lbl { font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
color: var(--dim); font-weight: 700; margin-bottom: 9px; }
/* подпись под макетом — не часть интерфейса */
.caption { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%);
font-size: 12px; color: var(--dim); background: rgba(23,33,43,.96); border: 1px solid var(--line);
border-radius: 9px; padding: 7px 13px; z-index: 400; }
@media (max-height: 820px) { body { padding: 8px; } .window { transform: scale(.82); } }
</style>
</head>
<body>
<div class="window">
<aside class="sidebar">
<div class="sb-head">
<div class="sb-title">
<span>Диалоги</span>
<button class="icon-btn" title="Новый диалог">+</button>
</div>
</div>
<input class="search" placeholder="Поиск диалога…">
<div class="folders">
<div class="folder active">Все чаты <span class="cnt">3</span></div>
<div class="folder">Работа</div>
<div class="folder">Дом</div>
<div class="folder">Учёба</div>
<div class="folder">Личное</div>
<div class="folder act" title="Группы: добавить, изменить, удалить">✎</div>
</div>
<div class="chat-list">
<div class="chat-row active">
<div class="avatar">АГ</div>
<div class="chat-mid">
<div class="chat-name"><span>agentik · рабочий</span><span class="chat-time">14:22</span></div>
<div class="chat-prev">Собрал отчёт, жду правок</div>
</div>
<div class="row-tail"><span class="badge">2</span></div>
</div>
<div class="chat-row">
<div class="avatar g2">ОЧ</div>
<div class="chat-mid">
<div class="chat-name"><span>Отчёт за квартал</span><span class="chat-time">12:05</span></div>
<div class="chat-prev">Файл лежит на диске</div>
</div>
</div>
<div class="chat-row">
<div class="avatar g3">РЗ</div>
<div class="chat-mid">
<div class="chat-name"><span>Разбор логов nginx</span><span class="chat-time">вчера</span></div>
<div class="chat-prev">Нашёл 3 ошибки 502</div>
</div>
</div>
<div class="chat-row">
<div class="avatar g4">ПО</div>
<div class="chat-mid">
<div class="chat-name"><span>Помощь по Solana</span><span class="chat-time">вчера</span></div>
<div class="chat-prev">Девайт-нет стартовал</div>
</div>
</div></div>
</aside>
<main class="main">
<header class="chat-head">
<div class="avatar">АГ</div>
<div>
<div class="head-name">agentik · рабочий</div>
<div class="head-sub"><span class="dot">●</span> на связи</div>
</div>
</header>
<div class="messages">
<div class="msg user">Проверь, почему падает CI</div>
<div class="msg bot">Нашёл: длинное тире в именах тестов ломает сборку. Починил, CI зелёный.</div>
</div>
</main>
<div class="scrim"></div>
<div class="layer">
<div class="dialog">
<div class="d-head">
<h2>Новая группа</h2>
<button class="x-btn">✕</button>
</div>
<div class="d-body">
<div class="field">
<label>Название</label>
<input type="text" value="Учёба" placeholder="как назвать группу">
<div class="note">Так группа будет называться в ленте над списком диалогов.</div>
</div>
<div class="info">
<span>ℹ</span>
<span>Диалоги в группу попадают потом — из самого диалога. Здесь группа
только создаётся, диалог в неё не переносится.</span>
</div>
</div>
<div class="d-foot">
<button class="btn" style="flex:1">Отмена</button>
<button class="btn prim" style="flex:1">Создать группу</button>
</div>
</div>
</div>
</div>
<div class="caption">2. Новая группа: только название</div>
</body>
</html>
-265
View File
@@ -1,265 +0,0 @@
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Группы — изменение</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #121218; --panel: #17212B; --panel2: #1C2733; --line: #232B36;
--fg: #EBEBEB; --dim: #768C9E; --accent: #6AB2F2; --badge: #5EB5F7;
--err: #EC3942; --ok: #63C88A; --user-bubble: #2B5278; --bot-bubble: #1C2733;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-webkit-font-smoothing: antialiased;
background: #0A0A0F; color: var(--fg); line-height: 1.45;
display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px;
}
/* ============ окно клиента на фоне ============ */
.window {
width: 1180px; height: 740px; background: var(--bg); border-radius: 12px;
display: flex; overflow: hidden; border: 1px solid var(--line); position: relative;
box-shadow: 0 24px 80px rgba(0,0,0,.6);
}
.sidebar { width: 320px; background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.sb-head { padding: 14px 16px 10px; }
.sb-title { font-size: 17px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; }
.icon-btn { width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent;
color: var(--dim); cursor: pointer; display: grid; place-items: center; font-size: 17px; }
.icon-btn:hover { background: var(--panel2); color: var(--fg); }
.search {
margin: 0 16px 10px; padding: 8px 11px; border-radius: 9px; border: 1px solid transparent;
background: var(--panel2); color: var(--fg); font-size: 13px; outline: none; font-family: inherit;
}
.search::placeholder { color: var(--dim); }
/* ── лента групп ── */
.folders { display: flex; gap: 6px; padding: 0 16px 10px; overflow-x: auto; }
.folder {
padding: 5px 11px; border-radius: 14px; font-size: 12px; color: var(--dim);
background: var(--panel2); cursor: pointer; white-space: nowrap; border: 1px solid transparent;
}
.folder.active { color: var(--fg); border-color: var(--accent); background: rgba(106,178,242,.12); }
.folder .cnt { color: var(--badge); font-weight: 600; margin-left: 4px; }
/* кнопка «Группы» — не папка, а действие: справа, отдельно от чипов */
.folder.act { margin-left: auto; background: transparent; color: var(--dim);
display: grid; place-items: center; padding: 5px 9px; font-size: 13px; }
.folder.act:hover { color: var(--fg); background: var(--panel2); }
.chat-row { display: flex; gap: 11px; padding: 9px 10px; border-radius: 10px; cursor: pointer; align-items: flex-start; }
.chat-row:hover { background: var(--panel2); }
.chat-row.active { background: #233040; }
.chat-list { flex: 1; overflow-y: auto; padding: 2px 8px 12px; }
.avatar {
width: 42px; height: 42px; border-radius: 50%; flex: 0 0 42px; display: grid; place-items: center;
font-size: 15px; font-weight: 600; color: #0F1922; background: var(--accent);
}
.avatar.g2 { background: #86C99A; }
.avatar.g3 { background: #C9A886; }
.avatar.g4 { background: #B79AE0; }
.chat-mid { flex: 1; min-width: 0; }
.chat-name { font-size: 14px; font-weight: 500; display: flex; justify-content: space-between; gap: 8px; }
.chat-time { font-size: 11px; color: var(--dim); font-weight: 400; }
.chat-prev { font-size: 12.5px; color: var(--dim); white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; margin-top: 2px; }
.badge { background: var(--badge); color: #0F1922; font-size: 11px; font-weight: 700;
border-radius: 10px; padding: 1px 7px; }
.main { flex: 1; display: flex; flex-direction: column; }
.chat-head { height: 58px; flex: 0 0 58px; border-bottom: 1px solid var(--line); display: flex;
align-items: center; gap: 11px; padding: 0 16px; }
.chat-head .avatar { width: 36px; height: 36px; flex: 0 0 36px; font-size: 13px; }
.head-name { font-size: 14.5px; font-weight: 600; }
.head-sub { font-size: 11.5px; color: var(--dim); }
.head-sub .dot { color: var(--ok); }
.messages { flex: 1; overflow-y: auto; padding: 18px 24px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 74%; padding: 9px 13px; border-radius: 13px; font-size: 13.5px; }
.msg.user { align-self: flex-end; background: var(--user-bubble); border-bottom-right-radius: 4px; }
.msg.bot { align-self: flex-start; background: var(--bot-bubble); border-bottom-left-radius: 4px; }
/* ============ затемнение и модалка ============ */
.scrim { position: absolute; inset: 0; background: rgba(0,0,0,.62); z-index: 100; }
.layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 150; }
.dialog {
width: 520px; min-width: 520px; flex: 0 0 auto; max-height: 600px; background: var(--panel);
border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column;
overflow: hidden; box-shadow: 0 26px 80px rgba(0,0,0,.7);
}
.d-head { display: flex; align-items: center; gap: 11px; padding: 16px 18px 14px; border-bottom: 1px solid var(--line); }
.d-head h2 { font-size: 16px; font-weight: 600; flex: 1; }
.x-btn { width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent;
color: var(--dim); cursor: pointer; font-size: 17px; }
.x-btn:hover { background: var(--panel2); color: var(--fg); }
.d-body { flex: 1; overflow-y: auto; padding: 14px 18px 8px; }
.d-foot { padding: 13px 18px 16px; border-top: 1px solid var(--line); display: flex; gap: 9px; }
/* ── строка группы ── */
.grp {
display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 11px;
background: var(--panel2); margin-bottom: 9px; border: 1px solid transparent;
}
.grp:hover { border-color: var(--line); }
.grp .mid { flex: 1; min-width: 0; }
.grp .nm { font-size: 14px; font-weight: 550; }
.grp .sub { font-size: 11.5px; color: var(--dim); margin-top: 3px; }
.grp .acts { display: flex; gap: 4px; flex: 0 0 auto; }
.mini-ic { width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent;
color: var(--dim); cursor: pointer; font-size: 14px; }
.mini-ic:hover { background: var(--panel); color: var(--fg); }
.mini-ic.del:hover { color: var(--err); }
/* служебная группа — «Все чаты»: не правится и не удаляется */
.grp.sys { background: transparent; border: 1px dashed var(--line); }
.grp.sys .nm { color: var(--fg); }
.grp .lock { font-size: 11px; color: var(--dim); flex: 0 0 auto; }
.btn { border-radius: 10px; padding: 10px 17px; font-size: 13px; cursor: pointer; border: 1px solid var(--line);
background: transparent; color: var(--fg); font-family: inherit; white-space: nowrap; }
.btn:hover { border-color: var(--dim); }
.btn.prim { background: var(--accent); border-color: var(--accent); color: #0F1922; font-weight: 650; }
.btn.dang { color: var(--err); border-color: rgba(236,57,66,.4); }
.btn.dang:hover { border-color: var(--err); background: rgba(236,57,66,.09); }
.btn.dang.solid { background: var(--err); border-color: var(--err); color: #FFF; font-weight: 650; }
.btn.sm { padding: 8px 13px; font-size: 12.5px; }
.btn.wide { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
border-style: dashed; color: var(--dim); }
.btn.wide:hover { color: var(--fg); border-color: var(--dim); }
/* ── форма ── */
.field { margin-bottom: 15px; }
.field label { display: block; font-size: 12px; color: var(--dim); margin-bottom: 6px; }
.field input {
width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line);
background: var(--bg); color: var(--fg); font-size: 13.5px; outline: none; font-family: inherit;
}
.field input:focus { border-color: var(--accent); }
.field .note { font-size: 11px; color: var(--dim); margin-top: 6px; }
/* ── предупреждение ── */
.warn {
display: flex; gap: 9px; align-items: flex-start; margin-bottom: 15px; padding: 11px 13px;
border-radius: 10px; background: rgba(236,57,66,.09); border: 1px solid rgba(236,57,66,.32);
font-size: 12px; color: #F0A6AA; line-height: 1.5;
}
.warn .i { flex: 0 0 auto; font-size: 13px; }
.info {
display: flex; gap: 9px; align-items: flex-start; margin-top: 4px; padding: 11px 13px;
border-radius: 10px; background: var(--bg); border: 1px solid var(--line);
font-size: 11.5px; color: var(--dim); line-height: 1.5;
}
.danger-zone { margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--line); }
.danger-zone .lbl { font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
color: var(--dim); font-weight: 700; margin-bottom: 9px; }
/* подпись под макетом — не часть интерфейса */
.caption { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%);
font-size: 12px; color: var(--dim); background: rgba(23,33,43,.96); border: 1px solid var(--line);
border-radius: 9px; padding: 7px 13px; z-index: 400; }
@media (max-height: 820px) { body { padding: 8px; } .window { transform: scale(.82); } }
</style>
</head>
<body>
<div class="window">
<aside class="sidebar">
<div class="sb-head">
<div class="sb-title">
<span>Диалоги</span>
<button class="icon-btn" title="Новый диалог">+</button>
</div>
</div>
<input class="search" placeholder="Поиск диалога…">
<div class="folders">
<div class="folder">Все чаты <span class="cnt">3</span></div>
<div class="folder active">Работа</div>
<div class="folder">Дом</div>
<div class="folder">Учёба</div>
<div class="folder">Личное</div>
<div class="folder act" title="Группы: добавить, изменить, удалить">✎</div>
</div>
<div class="chat-list">
<div class="chat-row active">
<div class="avatar">АГ</div>
<div class="chat-mid">
<div class="chat-name"><span>agentik · рабочий</span><span class="chat-time">14:22</span></div>
<div class="chat-prev">Собрал отчёт, жду правок</div>
</div>
<div class="row-tail"><span class="badge">2</span></div>
</div>
<div class="chat-row">
<div class="avatar g2">ОЧ</div>
<div class="chat-mid">
<div class="chat-name"><span>Отчёт за квартал</span><span class="chat-time">12:05</span></div>
<div class="chat-prev">Файл лежит на диске</div>
</div>
</div>
<div class="chat-row">
<div class="avatar g3">РЗ</div>
<div class="chat-mid">
<div class="chat-name"><span>Разбор логов nginx</span><span class="chat-time">вчера</span></div>
<div class="chat-prev">Нашёл 3 ошибки 502</div>
</div>
</div>
<div class="chat-row">
<div class="avatar g4">ПО</div>
<div class="chat-mid">
<div class="chat-name"><span>Помощь по Solana</span><span class="chat-time">вчера</span></div>
<div class="chat-prev">Девайт-нет стартовал</div>
</div>
</div></div>
</aside>
<main class="main">
<header class="chat-head">
<div class="avatar">АГ</div>
<div>
<div class="head-name">agentik · рабочий</div>
<div class="head-sub"><span class="dot">●</span> на связи</div>
</div>
</header>
<div class="messages">
<div class="msg user">Проверь, почему падает CI</div>
<div class="msg bot">Нашёл: длинное тире в именах тестов ломает сборку. Починил, CI зелёный.</div>
</div>
</main>
<div class="scrim"></div>
<div class="layer">
<div class="dialog">
<div class="d-head">
<h2>Группа «Работа»</h2>
<button class="x-btn">✕</button>
</div>
<div class="d-body">
<div class="field">
<label>Название</label>
<input type="text" value="Работа" placeholder="как назвать группу">
<div class="note">Так группа будет называться в ленте над списком диалогов.</div>
</div>
<div class="info">
<span>ℹ</span>
<span>В группе сейчас 12 диалогов. Переименование их не затрагивает —
это только название группы.</span>
</div>
<div class="danger-zone">
<div class="lbl">Опасное</div>
<button class="btn dang" style="width:100%">Удалить группу</button>
</div>
</div>
<div class="d-foot">
<button class="btn" style="flex:1">Отмена</button>
<button class="btn prim" style="flex:1">Сохранить</button>
</div>
</div>
</div>
</div>
<div class="caption">3. Изменение группы: переименование и удаление</div>
</body>
</html>
-272
View File
@@ -1,272 +0,0 @@
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Группы — удаление</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #121218; --panel: #17212B; --panel2: #1C2733; --line: #232B36;
--fg: #EBEBEB; --dim: #768C9E; --accent: #6AB2F2; --badge: #5EB5F7;
--err: #EC3942; --ok: #63C88A; --user-bubble: #2B5278; --bot-bubble: #1C2733;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-webkit-font-smoothing: antialiased;
background: #0A0A0F; color: var(--fg); line-height: 1.45;
display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px;
}
/* ============ окно клиента на фоне ============ */
.window {
width: 1180px; height: 740px; background: var(--bg); border-radius: 12px;
display: flex; overflow: hidden; border: 1px solid var(--line); position: relative;
box-shadow: 0 24px 80px rgba(0,0,0,.6);
}
.sidebar { width: 320px; background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.sb-head { padding: 14px 16px 10px; }
.sb-title { font-size: 17px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; }
.icon-btn { width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent;
color: var(--dim); cursor: pointer; display: grid; place-items: center; font-size: 17px; }
.icon-btn:hover { background: var(--panel2); color: var(--fg); }
.search {
margin: 0 16px 10px; padding: 8px 11px; border-radius: 9px; border: 1px solid transparent;
background: var(--panel2); color: var(--fg); font-size: 13px; outline: none; font-family: inherit;
}
.search::placeholder { color: var(--dim); }
/* ── лента групп ── */
.folders { display: flex; gap: 6px; padding: 0 16px 10px; overflow-x: auto; }
.folder {
padding: 5px 11px; border-radius: 14px; font-size: 12px; color: var(--dim);
background: var(--panel2); cursor: pointer; white-space: nowrap; border: 1px solid transparent;
}
.folder.active { color: var(--fg); border-color: var(--accent); background: rgba(106,178,242,.12); }
.folder .cnt { color: var(--badge); font-weight: 600; margin-left: 4px; }
/* кнопка «Группы» — не папка, а действие: справа, отдельно от чипов */
.folder.act { margin-left: auto; background: transparent; color: var(--dim);
display: grid; place-items: center; padding: 5px 9px; font-size: 13px; }
.folder.act:hover { color: var(--fg); background: var(--panel2); }
.chat-row { display: flex; gap: 11px; padding: 9px 10px; border-radius: 10px; cursor: pointer; align-items: flex-start; }
.chat-row:hover { background: var(--panel2); }
.chat-row.active { background: #233040; }
.chat-list { flex: 1; overflow-y: auto; padding: 2px 8px 12px; }
.avatar {
width: 42px; height: 42px; border-radius: 50%; flex: 0 0 42px; display: grid; place-items: center;
font-size: 15px; font-weight: 600; color: #0F1922; background: var(--accent);
}
.avatar.g2 { background: #86C99A; }
.avatar.g3 { background: #C9A886; }
.avatar.g4 { background: #B79AE0; }
.chat-mid { flex: 1; min-width: 0; }
.chat-name { font-size: 14px; font-weight: 500; display: flex; justify-content: space-between; gap: 8px; }
.chat-time { font-size: 11px; color: var(--dim); font-weight: 400; }
.chat-prev { font-size: 12.5px; color: var(--dim); white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; margin-top: 2px; }
.badge { background: var(--badge); color: #0F1922; font-size: 11px; font-weight: 700;
border-radius: 10px; padding: 1px 7px; }
.main { flex: 1; display: flex; flex-direction: column; }
.chat-head { height: 58px; flex: 0 0 58px; border-bottom: 1px solid var(--line); display: flex;
align-items: center; gap: 11px; padding: 0 16px; }
.chat-head .avatar { width: 36px; height: 36px; flex: 0 0 36px; font-size: 13px; }
.head-name { font-size: 14.5px; font-weight: 600; }
.head-sub { font-size: 11.5px; color: var(--dim); }
.head-sub .dot { color: var(--ok); }
.messages { flex: 1; overflow-y: auto; padding: 18px 24px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 74%; padding: 9px 13px; border-radius: 13px; font-size: 13.5px; }
.msg.user { align-self: flex-end; background: var(--user-bubble); border-bottom-right-radius: 4px; }
.msg.bot { align-self: flex-start; background: var(--bot-bubble); border-bottom-left-radius: 4px; }
/* ============ затемнение и модалка ============ */
.scrim { position: absolute; inset: 0; background: rgba(0,0,0,.62); z-index: 100; }
.layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 150; }
.dialog {
width: 520px; min-width: 520px; flex: 0 0 auto; max-height: 600px; background: var(--panel);
border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column;
overflow: hidden; box-shadow: 0 26px 80px rgba(0,0,0,.7);
}
.d-head { display: flex; align-items: center; gap: 11px; padding: 16px 18px 14px; border-bottom: 1px solid var(--line); }
.d-head h2 { font-size: 16px; font-weight: 600; flex: 1; }
.x-btn { width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent;
color: var(--dim); cursor: pointer; font-size: 17px; }
.x-btn:hover { background: var(--panel2); color: var(--fg); }
.d-body { flex: 1; overflow-y: auto; padding: 14px 18px 8px; }
.d-foot { padding: 13px 18px 16px; border-top: 1px solid var(--line); display: flex; gap: 9px; }
/* ── строка группы ── */
.grp {
display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 11px;
background: var(--panel2); margin-bottom: 9px; border: 1px solid transparent;
}
.grp:hover { border-color: var(--line); }
.grp .mid { flex: 1; min-width: 0; }
.grp .nm { font-size: 14px; font-weight: 550; }
.grp .sub { font-size: 11.5px; color: var(--dim); margin-top: 3px; }
.grp .acts { display: flex; gap: 4px; flex: 0 0 auto; }
.mini-ic { width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent;
color: var(--dim); cursor: pointer; font-size: 14px; }
.mini-ic:hover { background: var(--panel); color: var(--fg); }
.mini-ic.del:hover { color: var(--err); }
/* служебная группа — «Все чаты»: не правится и не удаляется */
.grp.sys { background: transparent; border: 1px dashed var(--line); }
.grp.sys .nm { color: var(--fg); }
.grp .lock { font-size: 11px; color: var(--dim); flex: 0 0 auto; }
.btn { border-radius: 10px; padding: 10px 17px; font-size: 13px; cursor: pointer; border: 1px solid var(--line);
background: transparent; color: var(--fg); font-family: inherit; white-space: nowrap; }
.btn:hover { border-color: var(--dim); }
.btn.prim { background: var(--accent); border-color: var(--accent); color: #0F1922; font-weight: 650; }
.btn.dang { color: var(--err); border-color: rgba(236,57,66,.4); }
.btn.dang:hover { border-color: var(--err); background: rgba(236,57,66,.09); }
.btn.dang.solid { background: var(--err); border-color: var(--err); color: #FFF; font-weight: 650; }
.btn.sm { padding: 8px 13px; font-size: 12.5px; }
.btn.wide { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
border-style: dashed; color: var(--dim); }
.btn.wide:hover { color: var(--fg); border-color: var(--dim); }
/* ── форма ── */
.field { margin-bottom: 15px; }
.field label { display: block; font-size: 12px; color: var(--dim); margin-bottom: 6px; }
.field input {
width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line);
background: var(--bg); color: var(--fg); font-size: 13.5px; outline: none; font-family: inherit;
}
.field input:focus { border-color: var(--accent); }
.field .note { font-size: 11px; color: var(--dim); margin-top: 6px; }
/* ── предупреждение ── */
.warn {
display: flex; gap: 9px; align-items: flex-start; margin-bottom: 15px; padding: 11px 13px;
border-radius: 10px; background: rgba(236,57,66,.09); border: 1px solid rgba(236,57,66,.32);
font-size: 12px; color: #F0A6AA; line-height: 1.5;
}
.warn .i { flex: 0 0 auto; font-size: 13px; }
.info {
display: flex; gap: 9px; align-items: flex-start; margin-top: 4px; padding: 11px 13px;
border-radius: 10px; background: var(--bg); border: 1px solid var(--line);
font-size: 11.5px; color: var(--dim); line-height: 1.5;
}
.danger-zone { margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--line); }
.danger-zone .lbl { font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
color: var(--dim); font-weight: 700; margin-bottom: 9px; }
/* подпись под макетом — не часть интерфейса */
.caption { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%);
font-size: 12px; color: var(--dim); background: rgba(23,33,43,.96); border: 1px solid var(--line);
border-radius: 9px; padding: 7px 13px; z-index: 400; }
@media (max-height: 820px) { body { padding: 8px; } .window { transform: scale(.82); } }
</style>
</head>
<body>
<div class="window">
<aside class="sidebar">
<div class="sb-head">
<div class="sb-title">
<span>Диалоги</span>
<button class="icon-btn" title="Новый диалог">+</button>
</div>
</div>
<input class="search" placeholder="Поиск диалога…">
<div class="folders">
<div class="folder">Все чаты <span class="cnt">3</span></div>
<div class="folder active">Работа</div>
<div class="folder">Дом</div>
<div class="folder">Учёба</div>
<div class="folder">Личное</div>
<div class="folder act" title="Группы: добавить, изменить, удалить">✎</div>
</div>
<div class="chat-list">
<div class="chat-row active">
<div class="avatar">АГ</div>
<div class="chat-mid">
<div class="chat-name"><span>agentik · рабочий</span><span class="chat-time">14:22</span></div>
<div class="chat-prev">Собрал отчёт, жду правок</div>
</div>
<div class="row-tail"><span class="badge">2</span></div>
</div>
<div class="chat-row">
<div class="avatar g2">ОЧ</div>
<div class="chat-mid">
<div class="chat-name"><span>Отчёт за квартал</span><span class="chat-time">12:05</span></div>
<div class="chat-prev">Файл лежит на диске</div>
</div>
</div>
<div class="chat-row">
<div class="avatar g3">РЗ</div>
<div class="chat-mid">
<div class="chat-name"><span>Разбор логов nginx</span><span class="chat-time">вчера</span></div>
<div class="chat-prev">Нашёл 3 ошибки 502</div>
</div>
</div>
<div class="chat-row">
<div class="avatar g4">ПО</div>
<div class="chat-mid">
<div class="chat-name"><span>Помощь по Solana</span><span class="chat-time">вчера</span></div>
<div class="chat-prev">Девайт-нет стартовал</div>
</div>
</div></div>
</aside>
<main class="main">
<header class="chat-head">
<div class="avatar">АГ</div>
<div>
<div class="head-name">agentik · рабочий</div>
<div class="head-sub"><span class="dot">●</span> на связи</div>
</div>
</header>
<div class="messages">
<div class="msg user">Проверь, почему падает CI</div>
<div class="msg bot">Нашёл: длинное тире в именах тестов ломает сборку. Починил, CI зелёный.</div>
</div>
</main>
<div class="scrim"></div>
<div class="layer">
<div class="dialog">
<div class="d-head">
<h2>Удалить группу?</h2>
<button class="x-btn">✕</button>
</div>
<div class="d-body">
<div class="warn">
<span class="i">⚠</span>
<span>Группа <b>«Работа»</b> исчезнет из ленты. <b>Диалоги не удалятся</b> —
они останутся и будут видны в «Все чаты». Вернуть группу можно, создав её
заново, но диалоги придётся разложить руками.</span>
</div>
<div class="field">
<label>Что сделать с диалогами группы</label>
<div class="grp" style="margin-bottom:9px">
<div class="mid">
<div class="nm">Оставить без группы</div>
<div class="sub">12 диалогов вернутся в «Все чаты»</div>
</div>
<div class="lock">✓</div>
</div>
</div>
<div class="info">
<span>ℹ</span>
<span>Другого пути нет: диалог обязан быть где-то виден. Отдельной
«корзины» у диалогов нет — удаляются только диалоги, и не отсюда.</span>
</div>
</div>
<div class="d-foot">
<button class="btn" style="flex:1">Отмена</button>
<button class="btn dang solid" style="flex:1">Удалить группу</button>
</div>
</div>
</div>
</div>
<div class="caption">4. Удаление группы: диалоги остаются</div>
</body>
</html>
-100
View File
@@ -1,100 +0,0 @@
# 006 — Управление группами
**Иконка в ленте.** Над списком диалогов, справа от чипов групп, стоит **карандаш**
(✎) — вместо прежнего «+». Он означает **«Группы»**: открывает окно, где группы
можно добавить, переименовать и удалить. Раньше там был «+» — он читался как
«создать диалог», хотя диалог создаётся кнопкой в шапке списка.
Почему карандаш: рядом стоят чипы самих групп, и **всё, что похоже на «+», рядом
с ними читается как «добавить группу»**, а не «управлять ими». Карандаш говорит:
«здесь правят список групп целиком». Кнопка стоит отдельно от чипов — прижата
к правому краю, чтобы её не приняли за шестую группу.
---
## Файлы — по состояниям, без интерактивности
Интерактивность решено не делать: вместо неё **отдельный файл на каждое состояние**.
Открываются по одному, каждый показывает ровно одно окно.
| Файл | Что показывает |
|---|---|
| `1-list.html` | Список групп: каждая строка с «изменить» и «удалить», внизу «+ Добавить группу» |
| `2-add.html` | Новая группа: только название |
| `3-edit.html` | Изменение группы: переименование и удаление |
| `4-delete.html` | Удаление группы: что станет с диалогами |
---
## Окно «Группы» (1-list)
Строка группы: **название**, под ним — **сколько диалогов**, справа кнопки
**изменить (✎)** и **удалить (🗑)**. Внизу пунктирная **«+ Добавить группу»**.
**«Все чаты» — встроенная группа.** Она есть всегда, показана пунктирной рамкой
и помечена «встроенная»: её нельзя переименовать или удалить. Она нужна как
надежное место, где видно все диалоги сразу, — иначе при удалении группы диалоги
могли бы пропасть из виду. Кнопок правки у неё нет — не потому что забыли,
а потому что нечего править.
**Пустая группа не запрещена** — «Личное» в макете пустая, помечена словом
«пустая». Группу можно создать заранее и разложить диалоги потом.
---
## Новая группа (2-add)
**Одно поле — название.** Никаких настроек: цвет группы, порядок, значки —
не выдумываем, пока не попросили.
Под полем честная подсказка: **диалоги в группу попадают потом, из самого диалога.**
Здесь группа только создаётся — диалог в неё не переносится. Иначе пользователь
ждёт, что после создания в группе что-то появится, и не понимает, почему пусто.
---
## Изменение группы (3-edit)
**Переименование** — то же поле, что при создании, плюс подсказка, сколько
диалогов в группе сейчас (**переименование диалогов не касается**).
**Удаление — внизу, отдельным блоком «ОПАСНОЕ».** Так сделано нарочно: удаление
не должно стоять в одном ряду с «Сохранить», иначе промахнуться легко. Кнопка
красная, но не залитая — заливка появляется на следующем шаге, где спрашивают
подтверждение.
---
## Удаление группы (4-delete)
**Главное, что говорит окно: диалоги не удалятся.** Группа исчезнет из ленты,
диалоги останутся и будут видны в «Все чаты». Это первое, что написано
в предупреждении, — потому что именно этого боятся, нажимая «удалить».
Отдельный вопрос — **что сделать с диалогами**: оставить без группы (вернутся
в «Все чаты»). Другого пути нет: диалог обязан быть где-то виден, «корзины»
у диалогов не существует. Так и написано в окне — чтобы не выглядело, будто
выбор есть, а его нет.
Кнопка подтверждения — **красная залитая**, в тексте прямо «Удалить группу».
---
## Что решено и почему
- **Карандаш вместо «+».** Иначе две кнопки подряд означают «создать» — и в шапке
списка, и в ленте групп.
- **«Все чаты» не удаляется.** Нужна точка опоры, где собран весь список.
- **Диалоги не удаляются вместе с группой.** Иначе одно нажатие стирает работу.
- **Группа без диалогов допустима.** Создать заранее — нормальный сценарий.
- **Никаких настроек у группы, кроме названия.** Цвет, значок, порядок — не
просили, не делаем.
## Открытые вопросы
- **Куда диалог кладётся при создании** — в текущую открытую группу или без
группы? Сейчас в макете не показано.
- **Можно ли диалог быть в нескольких группах** (как ярлык в почте) или только
в одной? От этого зависит, что писать в удалении.
- **Порядок групп** — по алфавиту, по времени создания или перетаскиванием?
- **Что если удалить группу, в которой открыт диалог.** Сейчас не показано.