Контекст
28 января. Всё работает: сервер крутится, клиент переподключается, JWT обновляется автоматически. Самое время заняться тем, что видит пользователь — интерфейсом GUI-клиента. Проблема: первый дизайн, сделанный 25 декабря за пару часов, выглядел соответственно. Стандартный тёмный UI, никакой индивидуальности. Мог быть интерфейсом чего угодно. А хочется, чтобы открываешь fxTunnel — и сразу понимаешь, что это fxTunnel.
Почему не стыдно переделывать
Первый дизайн был правильным решением на тот момент — главное было выпустить. Но теперь, когда продукт работает, можно сделать нормально. Переделка с нуля — это не признак ошибки. Это признак того, что ты лучше понимаешь продукт и пользователя. В первый раз ты не знаешь, что окажется важным. Во второй — знаешь.
Cyber-industrial тема
Выбрал направление: - Electric Lime (#BFFF00) — основной цвет. Яркий, запоминающийся, ассоциируется с терминалом - Vivid Purple — акцентный цвет для контраста - Glass morphism — полупрозрачные карточки с размытием фона - Animated borders — градиентные рамки с анимацией - Grid pattern — фоновая сетка как в чертежах - Unbounded — шрифт для заголовков, Onest — для текста По сути это дизайн-система — набор правил, которым следуешь во всех экранах. Один раз настроил — дальше просто применяешь.
Масштаб переделки
Три коммита за день: Коммит 1 — фундамент (758fe35): цвета, шрифты, CSS-утилиты. 218 новых строк стилей. Коммит 2 — полная переделка всех экранов (39bb251): 1277 строк добавлено, 673 удалено. Все 8 экранов: - Layout — сворачиваемый сайдбар с градиентным лого - Auth — анимированные орбы, стеклянные карточки - Dashboard — статистика с цветами по протоколу (HTTP = зелёный, TCP = синий, UDP = фиолетовый) - Bundles — градиентные карточки с анимированными рамками - Domains — карточки доменов с glow-эффектами - History — таблица с бейджами и иконками - Logs — терминальный стиль с цветами по уровню - Settings — карточки для каждой секции Коммит 3 — полировка (33fc4de): компактность, фиксы. 408 добавлено, 760 удалено — третий коммит уменьшил код. Убрал лишнее, сделал плотнее. Иногда «улучшить» = «убрать».
Что изменилось для пользователя
До: стандартное тёмное приложение. Серые карточки, синие кнопки. Как тысяча других. После: открываешь — и видишь характер. Неоновый зелёный на тёмном фоне, анимированные рамки, стеклянные эффекты. Не просто утилита — инструмент с лицом. Главное улучшение — компактность. Первая версия тратила кучу места на отступы. Вторая — информация плотнее, навигация быстрее. Сайдбар сворачивается в иконки. Карточки меньше, но информативнее.
Грабли
Tooltip при свёрнутом сайдбаре. Когда сайдбар сворачивается в иконки, нужны tooltip'ы. Но они показывались и при развёрнутом — глупо. Фикс: показывать только когда collapsed = true.
Длинные URL. Домены типа my-very-long-subdomain.tunnel.example.com вылезали за карточку. break-all решает, но ломает обычный текст. Применил только к URL-элементам.
Glass morphism и производительность. backdrop-filter: blur() — тяжёлая операция. На слабых машинах может лагать. Пока оставил — это технический долг.
Итог
28 января — полный редизайн за день: - Уникальная cyber-industrial тема - Все 8 экранов переработаны - Компактнее, информативнее, приятнее - Дизайн-система для будущих фич
758fe35 feat(gui): redesign to cyber-industrial theme
39bb251 feat(gui): complete redesign with cyber-industrial theme
33fc4de fix(gui): improve layout compactness and fix UI issues
В следующей части: безопасность за один день. Rate limiting, CORS, security-заголовки и защита от фишинга через туннели.