Неделю назад я рассказывал про Klark + Klara: корпоративный мессенджер и таск‑менеджер, которые живут на нашем сервере. В той статье было про устройство: каналы, звонки, расшифровку голосовых, связку «задача из сообщения». Эта статья расскажет вам более подробно о том как продукт выглядит " сейчас " и что в дальнейшей перспективе мы планируем реализовать.

При разработке приложения ключевой фактор который мы преследовали - это удобная связка приложений для закрытия наших задач, но со временем мы начали апгрейдить его в самых разных частях, где-то стикеры кастомные добавили, где-то внедрили кастомную анимацию, и так далее. Я не знаю как простым языком описать то чувство, когда ты делаешь продукт и видишь то, что он на набросках визуально отличается от того что я рисовал на эскизах и представлял в голове, но это чувство не давало мне покоя, поэтому я собрался с мыслями и переделал интерфейс в то, как оно выглядит в моей голове. Новое оформление со стеклом и «жидкими» подсветками, панель эмодзи и стикеров, своя картинка фона и шапка профиля.Ну и традиционный раздел про то, что сломалось по дороге: самые глупые баги всё ещё живут дольше всех.

В комментариях спрашивали:

«На чём собран интерфейс?» React 18 и Vite. Никакого UI‑кита и библиотеки состояния: стили свои, на CSS‑переменных, иконки - lucide, шрифты отдаёт наш же сервер, без Google Fonts. Из зависимостей во фронте помимо React только клиент LiveKit для звонков, генератор QR и плагины Capacitor. На телефоне этот же код живёт внутри Capacitor, на компьютере - внутри Electron.

«А где посмотреть?» Публичного демо пока нет. Klark ставится на сервер компании, и показывать рабочий стенд с перепиской коллег мы не можем. Пока - скриншоты ниже, снятые на тестовых данных. Сейчас мы всеми силами стараемся как можно скорее запустить наш проект на рынок, но могу сказать от себя что это дело трудоемкое и занимает определенный пул времени.

«Сколько стоит и как лицензируется?» Разворачивание только on‑premise, без облачных сервисов посередине. Моделей оплаты будет несколько, в том числе помесячная подписка; когда условия будут готовы, расскажу отдельно. Спасибо всем, кто оставил контакты.

И спасибо за «красивый интерфейс» - на этой неделе мы вложились в него сильнее всего.

Неделя в одной таблице

За неделю — около сорока коммитов, две миграции схемы и 125 тестов бэкенда, которые гоняются на настоящих PostgreSQL и Redis, без моков.

Оформление 1.5: стекло только там, где оно парит

Мы сделали три макета: стеклянная навигация поверх старого интерфейса, Liquid Glass на весь экран и гибрид. Второй был самым эффектным на скриншоте, но в мессенджере люди читают по восемь часов в день, и длинный текст на полупрозрачном фоне утомляет. Выбрали гибрид: раскладка и плотность старого Klark, сплошные поверхности для чтения, а стекло - только у того, что парит: панель разделов слева, всплывающие окна, нижняя панель на телефоне.

Тёмная и светлая тема. Стекло - только у панели разделов слева, переписка лежит на сплошных пузырях. Фон переписки здесь это своя картинка, о ней ниже.

Старые стили мы не переписывали. Новое оформление лежит отдельным слоем поверх: на компьютере панели получили зазор 10 px и скругление 22 px, за ними появился спокойный фон. Если что‑то пойдёт не так, слой можно откатить, не трогая остальное.

Капля

Выбранный раздел и папка подсвечиваются одной плашкой на всю группу. При переключении она переезжает к новому пункту и по дороге вытягивается, как капля. Плашка сама следит за классом is-active, поэтому разметку экранов менять не пришлось. Подсветка под курсором в списке чатов устроена так же: она одна на список и перетекает от строки к строке, а не мигает у каждой.

У выбранного чата появилась анимация пружина. Первая версия перелетала пропорционально расстоянию, и при прыжке через весь список подсветка заезжала на соседей. Теперь перелёт не больше 5 px при любом расстоянии.

Линза по краю панели

Панель разделов слева не просто размывает фон, а преломляет его у края, как стекло. В Chromium backdrop-filter понимает ссылку на SVG‑фильтр, а фильтр feDisplacementMap сдвигает пиксели по карте. Карту мы рисуем на canvas под размер панели: у самого края сдвиг сильный, к середине сходит на нет. Красный канал карты - сдвиг по X, зелёный - по Y.

Safari и Firefox такой фильтр в backdrop-filter не поддерживают, и там остаётся обычное размытие из CSS. Ничего не ломается, просто стекло чуть проще. Приложение на компьютере - это Electron, то есть тот же Chromium, и линза там есть.

Фон и «Меньше эффектов»

Фон за панелями неподвижный. Он рисуется на canvas и перерисовывается только при смене размера окна, темы или уровня эффектов: мессенджер открыт весь день, и греть ноутбук анимацией на фоне не хотелось.

Для слабых компьютеров и для тех, кого движение отвлекает, есть Настройки - Оформление - «Меньше эффектов». Оно убирает стекло, фон и пружины. Если в системе включено «Уменьшить движение» (prefers-reduced-motion), то же самое включается само.

На телефоне нижняя навигация стала капсулой, поле ввода - «пилюлей». И поле больше не обрезается, если в Android включён крупный системный шрифт.

Эмодзи и стикеры: Собрали из желаний сотрудников.

Раньше на телефоне это выглядело так: панель эмодзи открывалась поверх клавиатуры, стикеры - ещё одним окном, а нижняя навигация наезжала на поле ввода. Сотрудники которые пользуются нашим софтом часто говорили мне что это жутко неудобно, и нужно реализовать систему проще и приятнее для взора.

Теперь это одна панель. Внизу - вкладки «Эмодзи | Стикеры». Сверху - лента: для эмодзи это разделы значками и «Недавние», текущий раздел подсвечен при прокрутке; для стикеров - иконки наборов. Настройки набора спрятаны за шестерёнкой. Последняя вкладка и набор запоминаются.

На телефоне панель встаёт на место клавиатуры: открыто что‑то одно. Кнопка смайла превращается в кнопку клавиатуры и обратно. Выбор эмодзи и поиск по ним больше не дёргают клавиатуру. А внутри открытой переписки нижней навигации больше нет - как и во всех привычных мессенджерах.

На компьютере панель стала всплывающим окном у кнопки. Оно выплывает при наведении и так же плавно уходит, когда мышь убрали. Вся тонкость в двух задержках:

• 90 мс на открытие, чтобы окно не выскакивало, когда курсор просто пролетает мимо кнопки;

• 280 мс на закрытие, отсчитываются, только когда мышь ушла и с кнопки, и с окна. Иначе окно закрывалось бы, пока курсор едет от кнопки к нему через зазор.

Пока открыты настройки набора, окно само не уходит. Клик по кнопке тоже работает — для тех, кто привык кликать.

Свой фон и шапка профиля

Рабочий мессенджер не обязан быть серым. К готовым фонам переписки добавили две вещи.

Своя картинка фона. Настройки - Оформление - «Своя картинка». Два ползунка: затемнение от 0 до 90 % и размытие от 0 до 20 px, чтобы любая фотка с отпуска не мешала читать. Перед загрузкой картинка уменьшается прямо в клиенте до 2560 px по длинной стороне. Фон один на все чаты и синхронизируется между устройствами: поставил на компьютере - он же на телефоне. Картинку видит только владелец, сервер отдаёт её только ему.

Шапка профиля. Цветная подложка под аватаркой и узор из значков кольцами вокруг неё. Цветов 14, включая двухцветные «Закат», «Сияние» и «Ягода», узоров 22. Можно цвет без узора и наоборот. Выбирается в Профиль - «Оформление профиля» и сохраняется сразу. Шапку видят все: в карточке сотрудника и в сведениях личного чата. Набор цветов и узоров закрытый и проверяется на сервере, так что произвольный CSS в чужой профиль не протащить.

Переписка: мелочи, которые замечаешь каждый день

Чат открывается на первом непрочитанном. Раньше открытие чата отмечало прочитанным всё сразу и прыгало в конец. Теперь лента встаёт на плашку «Новые сообщения», а прочитанным считается только то, что вы прокрутили. Счётчик убывает по мере чтения. Ответили в чат - значит, прочитали всё. Указатель прочтения на сервере двигается только вперёд, чтобы телефон с устаревшим состоянием не «разчитал» переписку обратно.

Переход к дате. Календарь в переписке показывает только те дни, где есть сообщения. День считается по часам пользователя, а не сервера: часовой пояс приходит с запросом и сверяется со списком поясов PostgreSQL, прежде чем попасть в SQL. Иначе сообщение, написанное в полночь, легко оказывается во вчерашнем дне.

Шапка переписки. Длинное имя больше не распирает панель: одна строка с многоточием, эмодзи‑статус сразу за именем. На телефоне в шапке остались звонок, видео и «⋮», остальное уехало в меню.

Вибрацию можно выключить. В прошлой статье я хвастался тактильным откликом. Теперь его можно выключить: Настройки - Эффекты - «Тактильный отклик». Как оказалось, не все любят и одобряют вибрации в приложении. Пункт есть только в приложении на телефоне, выбор хранится на устройстве.

Подпись к файлу больше не теряется. Набрали текст, потом выбрали картинку - текст становится подписью к ней.

Расшифровка голосовых по кнопке. Нажали «A» у голосового - под ним появился текст, а буква подсветилась. Нажали ещё раз или закрыли чат - текст спрятался. Раньше открытая расшифровка висела навсегда. Распознавание попрежнему идёт на нашем сервере, в отдельном контейнере с Whisper.

Видео в историях играет везде. Сервер при публикации проверяет кодек и при необходимости перекодирует ролик в H.264. Почему это понадобилось, - в разделе про поломки.

Подводя итоги.

Когда я садился за этот редизайн, задача была простая: сделать так, чтобы Klark наконец выглядел так же, как у меня в голове. Сейчас могу сказать, что это получилось. Но многое из того, что вошло в эту версию, придумал не я, а сотрудники, которые каждый день пользуются нашим софтом: неудобная панель стикеров, вибрация, которая нравится не всем, длинные имена, которые ломали шапку. Оказалось, что красивый интерфейс - это не только стекло и «капли», но и десятки мелочей, которые замечаешь, только когда живёшь в приложении весь рабочий день.

Работы впереди ещё много, и выход на рынок - дело небыстрое. Но каждую неделю Klark становится немного ближе к тому, каким он должен быть. Если вам есть что подсказать по интерфейсу или чего-то не хватает в рабочем мессенджере - пишите в комментариях, это самый полезный отзыв.

И отдельно про Klara. В этой статье я почти не касался таск-менеджера, хотя он - вторая половина всей связки. Про Klara будет отдельная статья: подробно расскажу про задачи и приёмку, недельные спринты, базу знаний и про то, как всё это работает вместе с Klark.