BuCodex · дизайн-разбор

Левый бар: тише, дороже, без дёрганья

Сейчас список тредов кричит тремя акцентами сразу и пульсирует по кругу. Ниже — что именно шумит, и три варианта спокойной подачи. Все примеры живые: наводи курсор, переключай плотность и моушен.

Что шумит сейчас

Замечания по скриншоту и по AiSidebarStyles.module.scss.

01
Три акцента конкурируют Янтарная рамка активного треда, бирюзовый «Thinking», бирюзовые SPLIT и аватар. Глазу негде отдохнуть, и непонятно, что здесь главное.
02
Бесконечная пульсация workspaceOpenInvite — 1.7s infinite с миганием рамки и внешнего свечения. Плюс threadThinkingSweep гоняет градиент по тексту. Два вечных цикла в поле зрения — самое дешёвое, что может делать интерфейс.
03
Призрачные лейблы наезжают на текст RAKETA-BEST и PATH лежат поверх названия треда — «claude-question-e2e-1788438…» читается сквозь «PATH». Выглядит как баг вёрстки, а не как приём.
04
Статус громче содержания «Completed 2m 59s» и «Thinking…» набраны жирным и цветом, а имя треда — обычным. Иерархия перевёрнута.
05
Смешанная сетка Первые три элемента — карточки с рамками, остальные — голые строки. Один список выглядит как два разных компонента.
06
Постоянный «…» на каждой строке Залитый круг висит в каждой строке и добавляет десять одинаковых пятен в колонку.

Было / стало

Слева — реконструкция текущего поведения, включая пульсацию. Справа — спокойный вариант.

Сейчас
Предложение
◎ BuCodex
тред2ai-code
Готово · 2:59 · 5 мин назад
тред1ai-code
Работает · 9:53
claude-question-e2e-178…test
Готово · 0:27 · 14 мин назад

Три варианта

Один и тот же список в трёх подачах. Переключай и смотри, что ближе.

Чем отличаются

А
РельсаСтроки без рамок. Активное состояние — короткая вертикальная рельса 2px и чуть более светлый фон. Максимум воздуха, минимум хрома. Лучше всего держит длинный список.
Б
Мягкие карточкиЕсли карточки принципиальны — они остаются, но без цветных рамок и свечения: заливка 2%, хэйрлайн 4.5%, активная просто светлее. Ближе к текущей вёрстке, дешевле в переделке.
В
EditorialРазделители-хэйрлайны вместо фонов, репозиторий уезжает в правый край мета-строки. Самый «журнальный» и спокойный, но требует дисциплины по длине названий.

Токены

Конкретные значения, которые дают эффект «дороже»: меньше насыщенности, меньше радиусов, короче и мягче переходы.

ЧтоБылоСталоЗачем
Акценты янтарь + бирюза + бирюза #93a4bd один, приглушённый Цвет = состояние, а не украшение. Один акцент, остальное — серая шкала.
Активный тред рамка 1px цветная + свечение рельса 2×18px + фон 5.5% Читается мгновенно, но не светится.
Пульсация 1.7s infinite рамка + тень 2.4s дыхание точки 5px, только у активной задачи Движение остаётся сигналом, но не периферийным раздражителем.
Hover translateY(-1px) + тень только фон 3.2%, 150ms Список перестаёт «прыгать» под курсором.
Радиус 11–12px на карточках 10px строка, 14px панель Мельче радиус — строже и взрослее.
Мета-текст bold, цветной, поверх названия 11.5px, tabular-nums, своя строка Ничего не наезжает, цифры не пляшут при тикающем таймере.
Капслок на кнопках, лейблах и метках только групповые заголовки, 10.5px Капслок работает, когда он редкий.
«…» всегда виден, залит появляется на hover и :focus-visible Минус десять одинаковых пятен в колонке.
bg 0a0b0c
panel 0e1011
active 5.5%
line 7%
accent
ok
live

Что менять в коде

1
Убрать workspaceOpenInviteБесконечный цикл заменить на статичную рельсу. Если нужен акцент на «позови меня» — разово, 1 проход, без повторов.
2
threadThinkingSweep → дыхание точкиГрадиентный свип по тексту убрать; оставить opacity-дыхание на точке 2.4s.
3
Вынести мету в свою строкуУбрать абсолютное позиционирование призрачных лейблов, поставить нормальный grid с text-overflow: ellipsis.
4
Единая сетка для всего спискаОдинаковая строка для активных и старых; разделение — заголовками групп, а не сменой типа элемента.
5
prefers-reduced-motionУже есть у одной анимации — распространить на все, включая hover-переходы.