[F8-03] Карточка приказа: читаемость #46
Reference in New Issue
Block a user
Delete Branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Подзадача полировки UI (этап F8), родительский #43.
Цель: Сделать карточку приказа читаемой: перенос текста, статус — цветом карточки, всегда видимый крестик удаления.
Пункты из #43:
Порядок обработки: F8-03 из 12. Создано в рамках #43; зонтичный issue остаётся открытым до закрытия всех подзадач.
Working log (issue-agent) — click to expand
State: done
Updated: 2026-05-26T06:40:00Z
Branch / PR:
feature/issue-46-order-card-readability→ PR #58 → merged intodevelopment(merge commit793b709d).Confirmed (final):
2294d8b3was fresh, non-stale, non-dismissed; earlier REQUEST_CHANGES review #8 was dismissed and stale (covered the previous head5ca30df3).2294d8b3:ui-test.yamlonpull_request(run #371) →success. The push-trigger run #370 was auto-cancelled by the parallelpull_requestrun, which is the routine supersede behaviour and not merge-gating. Combined commit/statusreadsfailuredue to that stale cancellation — confirmed via per-run conclusions instead, as documented in the reference_gitea-actions-api memory.dev-deploy.yamlon this feature branch (run #372) for a live preview —conclusion=success. The next push intodevelopment(this merge) will overwrite that idempotently via the auto-deploy.Decisions:
Closes #46auto-closed the issue on merge.claude/done; the exclusiveclaude/scope clearedclaude/in-reviewautomatically.default_delete_branch_after_merge: true.Next: none — F8-03 shipped. Umbrella #43 stays open for the remaining F8 subtasks.
@owner — PR #58 готов к ревью.
Что поменялось в
order-tab.svelte:overflow-wrap: anywhere) вместо обрезки многоточием;applied→--color-success-subtle(лёгкий зелёный);invalid/rejected/conflict→--color-danger-subtle(красноватый);draft/valid/submitting→--color-warning-subtle(желтоватый — «ещё не подтверждено сервером», в том числе оффлайн);.sr-only— это сохраняет совместимость со скринридерами и со всеми существующими тестами наorder-command-status-N;✕в рамке в правом верхнем углу карточки, спозиционирован абсолютно, виден всегда (не только при ховере); снабжёнaria-labelчерез ключgame.sidebar.order.command_delete, без новых i18n-строк.Палитру и токены не трогала, store/сеть/синхронизация и протокол приказов не затронуты — это чисто визуальная полировка
Order-вкладки.Файлы:
ui/frontend/src/lib/sidebar/order-tab.svelte— шаблон карточки и scoped CSS;ui/frontend/tests/order-tab.test.ts— два регрессионных ассерта (status-invalidнаliиaria-labelна кнопке удаления);ui/docs/order-composer.md— параграф «Visual encoding on the order tab», описывает новую раскраску.Локальные проверки:
vitest run tests/order-tab.test.ts— 8/8 pass;npm run check(svelte-check) — 0 errors / 0 warnings.CI:
ui-test.yamlна PR-триггере (run #368) — зелёный, включая весьe2e/order-composer.spec.ts. Параллельный push-trigger run #367 упал на флейке в неродственномe2e/report-sections.spec.ts:229(«every TOC anchor lands its section in view» — стандартный таймаут наwindow.__galaxyNavв чужой спеке) — он не блокирует merge-gate PR'а.Каверзы и нюансы:
--color-border-subtle, чтобы не дублировать сигнал.draftиvalidсгруппированы сsubmittingв одну «жёлтую» группу — все три значат «ещё не accepted сервером».✕использует U+2715 (тот же глиф, что и в кнопке закрытия сайдбара).:focus-visible), чтобы клавиатура подсвечивала рамку так же, как ховер.Если понравилось — оставь approve, и на следующем заходе я сделаю merge через Merge-gate. Если хочется покрутить — какие именно тона/паддинги/глиф поправить?
Давай размер шрифта в карточке сделаем поменьше, как текст в calculator - думаю, будет идеально. А крестик удаления команды сделаем совсем маленьким, так, чтобы он помещался в правый верхний угол без отступа, т.е. был прилипшим к границе карточки, а размер крестика вмещался в padding-space между границей карточки и её текстом. Надеюсь, так получится?
Ну и упавший ui-test попробуй починить, он до этого PR работал же. Может и не твоими изменениями был спровоцирован, но если всплыла техдолг-ошибка, давай сразу править, не откладывать. :)
@owner — поправила обе замечания одним коммитом (
2294d8b) поверх PR #58.Размер текста в карточке. Заглянула в
calculator-tab.svelte— там основной размер тела0.8rem(это.label,.hint,.planet-name,.planet-stats dtи т.п., см.ui/frontend/src/lib/sidebar/calculator-tab.svelte:794–882). Поставилаfont-size: 0.8rem; line-height: 1.3на.command, чтобы и сам текст команды, и нумерация слева (.index) унаследовали один и тот же размер. Заодно подтянула паддинги карточки до0.3rem 1.1rem 0.3rem 0.5rem, чтобы плотность совпадала с новым шрифтом — без этого выглядело бы как «маленький текст, плавающий в большом боксе».Крестик. Сделала маленький —
0.95rem × 0.95rem, сам глиф0.65rem. Прилипший к правому-верхнему углу буквально:top: 0; right: 0;, без отступа от границы. Рамочка тонкая —1px solid --color-border-subtle,border-radius: 0 3px 0 3px(округлён только верхний-правый угол + диагональный нижний-левый — чтобы повторял внешний радиус карточки, а внутрь смотрит острыми углами). Зарезервированный под него правый паддинг в самой карточке —1.1rem, ровно столько, чтобы крестик помещался в padding-space и текст под ним не пробегал. Текст уже не пересекается с крестиком по горизонтали даже приoverflow-wrap: anywhere.Упавший
report-sections— это техдолг, давно тлеющий. Покопалась в логах: предыдущий зелёный ran наdevelopment(#366, до моего PR) тоже падал на той же спекеreport-sections › every TOC anchor lands its section in viewдважды и проходил только на retry #2. Мой PR-овский ран #367 просто исчерпал все 5 ретраев и упал суммарно. Корень —scrollIntoView({behavior: "smooth"})не успевает доехать до конечной позиции за 5 секундtoBeInViewport()под нагрузкой act-раннера, особенно на нижних секциях после ~17 кликов подряд. Прод-код это уже умеет —report-toc.svelteпереключается наbehavior: "auto", когдаprefers-reduced-motion: reduceактивен. Я добавила вplaywright.config.tsглобальноcontextOptions: { reducedMotion: "reduce" }— теперь весь e2e-набор гоняется в этом режиме, скролл становится синхронным и детерминированным. Прод не трогала, vitest-покрытие вtests/report-toc.test.tsпроверяет обе ветки media-query'я, так что регрессии на «обычного юзера со smooth-скроллом» не появится.Файлы:
ui/frontend/src/lib/sidebar/order-tab.svelte— шрифт + паддинги + размеры крестика;ui/frontend/playwright.config.ts—contextOptions.reducedMotion;ui/docs/order-composer.md— параграф «Visual encoding on the order tab» доуточнила про новый шрифт и flush-угол крестика.Проверки:
npm run check— 0 errors / 0 warnings;vitest run tests/order-tab.test.ts— 8/8 pass;playwright test report-sections.spec.ts— 6/6 pass (на всех четырёх проектах);playwright test order-composer.spec.ts— 12/12 pass;ui-test.yamlран #371 на head2294d8b3—success.report-sections › every TOC anchor lands its section in viewбольше не появляется в списке retries (там остались толькоmap-togglesиsciences-map-regresswebkit-флейки, не из моего PR).Перезапросила review на тебя на новый head. Если визуально пропорции крестика/шрифта теперь нравятся — оставь approve, и на следующем заходе сделаю merge через Merge-gate. Если ещё крутить — на сколько именно подвинуть? :)
Очень красиво получилось, спасибо! :) Апрувнул.