Skip to content

fix(web): optimize channel tag aggregate card layout (QuantumNous#5640)#5771

Draft
zhangzhichaolove wants to merge 3 commits into
QuantumNous:mainfrom
zhangzhichaolove:codex/fix-5640-channel-tag-badge
Draft

fix(web): optimize channel tag aggregate card layout (QuantumNous#5640)#5771
zhangzhichaolove wants to merge 3 commits into
QuantumNous:mainfrom
zhangzhichaolove:codex/fix-5640-channel-tag-badge

Conversation

@zhangzhichaolove

@zhangzhichaolove zhangzhichaolove commented Jun 27, 2026

Copy link
Copy Markdown
Contributor

⚠️ 提交说明 / PR Notice

Important

  • 请提供人工撰写的简洁摘要,避免直接粘贴未经整理的 AI 输出。

📝 变更描述 / Description

优化渠道列表中“标签聚合”行的展示布局。标签聚合卡片现在会让标签名称区域占满左侧可用宽度,避免长标签名把“1 个渠道”等计数徽标挤到过早换行的位置;同时标签聚合行不再展示无意义的 ID 单元格。

这次也把标签聚合行的渠道数量和状态计数文案改为 i18n 文案,并补充 en、zh、fr、ja、ru、vi 的翻译键,确保表格视图和卡片视图在多语言环境下保持一致。

🚀 变更类型 / Type of change

  • 🐛 Bug 修复 (Bug fix) - 请关联对应 Issue,避免将设计取舍、理解偏差或预期不一致直接归类为 bug
  • ✨ 新功能 (New feature) - 重大特性建议先通过 Issue 沟通
  • ⚡ 性能优化 / 重构 (Refactor)
  • 📝 文档更新 (Documentation)

🔗 关联任务 / Related Issue

✅ 提交前检查项 / Checklist

  • 人工确认: 我已亲自整理并撰写此描述,没有直接粘贴未经处理的 AI 输出。
  • 非重复提交: 我已搜索现有的 IssuesPRs,确认不是重复提交。
  • Bug fix 说明: 若此 PR 标记为 Bug fix,我已提交或关联对应 Issue,且不会将设计取舍、预期不一致或理解偏差直接归类为 bug。
  • 变更理解: 我已理解这些更改的工作原理及可能影响。
  • 范围聚焦: 本 PR 未包含任何与当前任务无关的代码改动。
  • 本地验证: 已在本地运行并通过测试或手动验证,维护者可以据此复核结果。
  • 安全合规: 代码中无敏感凭据,且符合项目代码规范。

📸 运行证明 / Proof of Work

bun run build无错误

image image

Summary by CodeRabbit

  • New Features

    • Improved tag-group row layout in the channel list, including refined badge sizing/spacing and tag-row header/expander presentation.
    • Status and channel-count labels are now built from translations to show localized “status + count” text.
    • Expanded channel-count i18n coverage with singular/plural variants across supported languages.
  • Bug Fixes

    • Tag-group/aggregate rows no longer render an ID value in the ID column.
    • Tag-row content and badges now follow consistent width/overflow behavior to prevent clipping and misalignment.

- let tag aggregate cards use the full left content width so the channel count badge can sit beside long tag names
- hide the meaningless ID cell for tag aggregate rows and keep aggregate badges from being clipped in card view
- localize tag channel count and aggregate status labels across supported frontend locales
@coderabbitai

coderabbitai Bot commented Jun 27, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 060cc67d-9ede-47cd-8642-7802ecb1dac0

📥 Commits

Reviewing files that changed from the base of the PR and between 5112deb and dd84cc3.

📒 Files selected for processing (8)
  • web/default/src/features/channels/components/channel-card.tsx
  • web/default/src/features/channels/components/channels-columns.tsx
  • web/default/src/i18n/locales/en.json
  • web/default/src/i18n/locales/fr.json
  • web/default/src/i18n/locales/ja.json
  • web/default/src/i18n/locales/ru.json
  • web/default/src/i18n/locales/vi.json
  • web/default/src/i18n/locales/zh.json
✅ Files skipped from review due to trivial changes (2)
  • web/default/src/i18n/locales/vi.json
  • web/default/src/i18n/locales/en.json
🚧 Files skipped from review as they are similar to previous changes (2)
  • web/default/src/features/channels/components/channel-card.tsx
  • web/default/src/features/channels/components/channels-columns.tsx

Walkthrough

Tag aggregate channel cards and table rows now use translated count/status labels, hide the aggregate ID cell, and apply tag-row-specific card wrapper sizing. Matching locale keys were added across supported languages.

Changes

Channel tag aggregate labels

Layer / File(s) Summary
i18n keys and locale strings
web/default/src/i18n/static-keys.ts, web/default/src/i18n/locales/*.json
Adds channel count forms, {{status}} ({{count}}), and Inactive translations.
Tag row cell renderers
web/default/src/features/channels/components/channels-columns.tsx
Hides the tag aggregate ID cell and renders translated count/status badges for aggregate rows.
Card row wrappers
web/default/src/features/channels/components/channel-card.tsx
Adjusts the type-cell and left-column wrappers with tag-row-specific width and overflow classes.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related issues

Suggested reviewers

  • seefs001

Poem

A bunny peeks at channel rows,
and nods as each new label grows.
No more clipped tags in card-view light,
just counts and statuses rendered right.
Hop hop — the badges read just fine. 🐇

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly summarizes the channel tag aggregate card layout fix.
Linked Issues check ✅ Passed The PR addresses #5640 by adjusting card layout and badge rendering so tag aggregate labels are readable.
Out of Scope Changes check ✅ Passed The i18n and static-key updates support the localized card-label fix and stay within the reported scope.
Docstring Coverage ✅ Passed Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🧹 Nitpick comments (1)
web/default/src/features/channels/components/channels-columns.tsx (1)

565-568: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Plural selection edge case for zero count.

childrenCount === 1 ? '{{count}} channel' : '{{count}} channels' routes count === 0 to the plural form. While correct for English, this is fragile for locales with different zero/plural rules (e.g. French treats 0 as singular). Consider relying on i18next's built-in plural resolution (t('{{count}} channel', { count }) with _plural/CLDR plural keys) instead of manual selection. Minor, since a tag row realistically always has ≥1 child.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@web/default/src/features/channels/components/channels-columns.tsx` around
lines 565 - 568, The channel count label in the channels columns rendering uses
manual singular/plural चयन with childrenCount === 1, which is fragile for zero
and non-English locale rules. Update the label generation in the channel row
logic to rely on i18next plural resolution in the existing t call instead of
choosing the string manually, so the translation layer handles 0/1/many
correctly across locales.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@web/default/src/features/channels/components/channels-columns.tsx`:
- Around line 818-822: The status label in the channels aggregate row uses
t('Inactive'), but that key is not registered or translated anywhere, so
localized UIs will fall back to English. Update the channels-columns.tsx logic
around statusLabel/aggregateStatusLabel and add the missing "Inactive" entry to
the i18n registration and all relevant locale files, matching how "Active" is
handled so both states localize consistently.

In `@web/default/src/i18n/locales/ru.json`:
- Around line 29-35: The channel-count label in channels-columns.tsx still uses
a hardcoded singular/other split for "{{count}} channel(s)", so Russian plural
rules are not applied correctly. Update the label in the channels-columns
component to use locale-aware plural handling instead of a two-form fallback,
and add the matching Russian plural forms in the ru.json translations for the
channel-count messages so counts like 2, 3, 4, and 22 resolve correctly.

---

Nitpick comments:
In `@web/default/src/features/channels/components/channels-columns.tsx`:
- Around line 565-568: The channel count label in the channels columns rendering
uses manual singular/plural चयन with childrenCount === 1, which is fragile for
zero and non-English locale rules. Update the label generation in the channel
row logic to rely on i18next plural resolution in the existing t call instead of
choosing the string manually, so the translation layer handles 0/1/many
correctly across locales.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: f864a741-118d-4563-84cb-714df53506ea

📥 Commits

Reviewing files that changed from the base of the PR and between 626dadb and 54add6a.

📒 Files selected for processing (9)
  • web/default/src/features/channels/components/channel-card.tsx
  • web/default/src/features/channels/components/channels-columns.tsx
  • web/default/src/i18n/locales/en.json
  • web/default/src/i18n/locales/fr.json
  • web/default/src/i18n/locales/ja.json
  • web/default/src/i18n/locales/ru.json
  • web/default/src/i18n/locales/vi.json
  • web/default/src/i18n/locales/zh.json
  • web/default/src/i18n/static-keys.ts

Comment thread web/default/src/features/channels/components/channels-columns.tsx
Comment thread web/default/src/i18n/locales/ru.json
- use i18next plural resolution for tag aggregate channel counts
- add plural forms for channel count labels across supported locales
- add missing Inactive translation key for aggregate status badges

Refs QuantumNous#5640
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Channel tag aggregate label is truncated in card view

1 participant