agentik-desktop/sketches/006-groups-manage/1-list.html

<!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>