Repository navigation
feat(ui): redesign the public commands page - #462
Conversation
|
3 findings · reviewed 🟠
|
Lunaria Status Overview🌕 This pull request will trigger status changes. Learn moreBy default, every PR changing files present in the Lunaria configuration's You can change this by adding one of the keywords present in the Tracked Files
Warnings reference
|
![pullfrog[bot]](https://avatars.githubusercontent.com/in/1768019?s=60&v=4){kind=small}
There was a problem hiding this comment.
ℹ️ No critical issues — a couple of minor rough edges.
Reviewed changes
Reviewed the full diff of the single commit (locale JSON files skipped as generated placeholders; en checked).
app/pages/commands.vue— Rebuilt layout with a custom search field, grouped categories, single-open state and Fuse-driven expansion while searching.CommandCategory/CommandItem— NewUCollapsiblecard and row components.CommandSubCategoryis removed; a grep confirms nothing else references it.CommandBase/CommandChips— Restyled details and badges, with every string moved tomarketing.commands.*. TheisSmallScreenbranches are gone.test/nuxt/pages/commands.spec.ts— New page spec covering default open category, single-open behaviour, search and retry.
One gap with no line to anchor to: the new components have no axe coverage. CLAUDE.md asks for axe assertions to be consolidated in test/nuxt/a11y.spec.ts. Adding the commands page there (with a category open and a command expanded) would cover the new UCollapsible buttons, the custom type="search" input and the badge lists.
I could not run the tests or the build in this environment, so the review is from reading the code only.
claude-sonnet-5-5 ｜ 𝕏
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
7c580aa to
a703fdf
Compare
c40a0c7 to
dedd1f3
Compare
Dismissed because a newer commit was pushed; Greptile will re-review the current head.
a703fdf to
8137a77
Compare
dedd1f3 to
47f6c7c
Compare
Dismissed because a newer commit was pushed; Greptile will re-review the current head.
8137a77 to
db936c2
Compare
47f6c7c to
90d5e3f
Compare
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## refactor/v3-profile #462 +/- ##
=======================================================
+ Coverage 38.84% 39.94% +1.09%
=======================================================
Files 356 357 +1
Lines 7324 7323 -1
Branches 1508 1509 +1
=======================================================
+ Hits 2845 2925 +80
+ Misses 3256 3178 -78
+ Partials 1223 1220 -3
Flags with carried forward coverage won't be shown. Click here to find out more.
🚀 New features to boost your workflow:
|
90d5e3f to
4b8b8b7
Compare
db936c2 to
297f4e8
Compare
Dismissed because a newer commit was pushed; Greptile will re-review the current head.
4b8b8b7 to
bbc0be1
Compare
297f4e8 to
0a58356
Compare
There was a problem hiding this comment.
ℹ️ No new issues in the latest commit. The earlier
hasDetails, copy andaria-labelnotes are addressed, and one gap from the first review remains.
Reviewed changes
Reviewed the delta since the last Pullfrog review: bbc0be1 plus the styling-only commits already seen.
- Shared chip logic —
app/utils/command-chips.tsnow ownscommandPermissionChip,isGuildOnlyCommandandhasCommandChips.Chips.vueandBase.vue#hasDetailscall the same helper, so the details panel can no longer be empty without its fallback note. Unit tests cover it. - Fallback copy —
no_detailsno longer claims the command "takes no arguments". - Category count a11y —
Category.vuehides the number from assistive tech and adds ansr-onlylabel, replacing thearia-labelon a role-lessspan. - Plural fallback —
config/i18n-plural.tsfixes thecs-CZindex map to four forms. A three-form string now returnsnull, so untranslated English sources use the built-in rule instead of showing "No …" for one match.docs/arch/i18n.mdandtest/unit/i18n/plural.test.tsare updated.
The new component specs still don't have axe coverage in test/nuxt/a11y.spec.ts, as CLAUDE.md asks (commands page with a category open and a command expanded). Nothing else is outstanding.
I couldn't resolve my earlier review threads in this run because get_review_comments hit a GraphQL rate limit. Treat the hasDetails, copy and aria-label threads as addressed.
The three-form guard means a real three-form ru-RU or uk-UA translation, which is common for those languages, would also fall to the built-in rule. The doc note says never to write them, so I'm not flagging it as a bug.
claude-sonnet-5-5 ｜ 𝕏
62c36f7 to
9b74885
Compare
Dismissed because a newer commit was pushed; Greptile will re-review the current head.
e2c0122 to
2f5731e
Compare
2f5731e to
d6a4885
Compare
ffd1038 to
b1fd293
Compare
Dismissed because a newer commit was pushed; Greptile will re-review the current head.
d6a4885 to
48fef07
Compare
Dismissed because a newer commit was pushed; Greptile will re-review the current head.
48fef07 to
97b21a5
Compare
09b7bd4 to
6d46917
Compare
Dismissed because a newer commit was pushed; Greptile will re-review the current head.
| "permission_staff": "Staff only", | ||
| "possible_formats": "Possible Formats", | ||
| "properties_label": "Command properties", | ||
| "refresh": "Refresh", |
There was a problem hiding this comment.
The new marketing.commands.refresh label is just “Refresh”. COPY.md requires button labels to name their object where space allows and bans bare verbs. Use “Refresh commands” for the visible label, matching the existing accessible label. This repository requirement must be satisfied before merging.
| "refresh": "Refresh", | |
| "refresh": "Refresh commands", |
Context Used: CLAUDE.md (source)
Prompt To Fix With AI
This is a comment left during a code review.
Path: i18n/locales/en/marketing.json
Line: 22
Comment:
**Refresh label omits its object**
The new `marketing.commands.refresh` label is just “Refresh”. `COPY.md` requires button labels to name their object where space allows and bans bare verbs. Use “Refresh commands” for the visible label, matching the existing accessible label. This repository requirement must be satisfied before merging.
```suggestion
"refresh": "Refresh commands",
```
**Context Used:** CLAUDE.md ([source](https://github.com/wolfstar-project/wolfstar.rocks/blob/main/CLAUDE.md))
---
For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
97b21a5 to
1c23565
Compare
Rebuild /commands on the Claude Design mockup: a centred heading, a search field beside the refresh button, a visible result count, and one panel of category cards that open one at a time (Moderation first, every match while searching). Each command is its own collapsible row with usage, extended help, explained usage, examples and pill badges. The page copy moves to the marketing locale file, and the container is lifted above the layout's top glow, which was veiling the heading.
Make the search field a single flat surface and give the refresh button the same 52px height and 12px radius, with a tinted border. Also finish aligning the page with the mockup: card and row radii, surface tones, inset blocks that stay readable in the light theme, and the Discord icon on the server-only badge.
… theme The Refresh button of the commands page and the header's Sign in button put the primary colour on a tinted dark surface, at about 3:1. Their labels use the highlighted text colour in the dark theme.
1c23565 to
a98bf3a
Compare
| :loading | ||
| <UCollapsible | ||
| :open | ||
| class="overflow-hidden rounded-[16px] border border-(--home-border-subtle) bg-base-100 theme-dark:bg-base-content/5" |
There was a problem hiding this comment.
The new category card uses rounded-[16px], but the repository design guide requires cards to use rounded-xl (12px), interactive blocks to use rounded-lg (8px), and pills to use rounded-full. The help blocks in Base.vue also use 10px corners, and the panel in commands.vue uses 16px corners. Use the required sizes throughout these new blocks. This repository requirement must be satisfied before merging.
Context Used: CLAUDE.md (source)
Prompt To Fix With AI
This is a comment left during a code review.
Path: app/components/command/Category.vue
Line: 4
Comment:
**Cards use different corners**
The new category card uses `rounded-[16px]`, but the repository design guide requires cards to use `rounded-xl` (12px), interactive blocks to use `rounded-lg` (8px), and pills to use `rounded-full`. The help blocks in `Base.vue` also use 10px corners, and the panel in `commands.vue` uses 16px corners. Use the required sizes throughout these new blocks. This repository requirement must be satisfied before merging.
**Context Used:** CLAUDE.md ([source](https://github.com/wolfstar-project/wolfstar.rocks/blob/main/CLAUDE.md))
---
For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
🔗 Linked issue
Part of the stack superseding #422. Depends on #461.
Stack: #451 foundation ← #452 header/footer ← #453 marketing ← #454
/appdashboard ← #455 V7 contract + ORM 8 only ← #457 auto-moderation rules ← #461 deprecate/profile← this PR🧭 Context
/commandswas the last public page still on the pre-redesign look: nested Nuxt UI accordions, heavy borders, and a heading that the layout's top glow painted over. This rebuilds it on the Claude Design mockup for the commands page.📚 Description
marketing.commands.*; the page was hardcoded English before. Other locales get empty placeholders, as usual.CommandSubCategoryis gone.CommandCategoryis one card,CommandItemis one command row,CommandBaserenders the details andCommandChipsthe badges.🧪 Verification
test/nuxt/pages/commands.spec.tscovers the default open category, single-open behaviour, search expansion and count, the no-match state and the retry state.build:testpass locally.base-100,base-contenttints,--home-*) rather than the mockup's hex values, so the cards sit on the page colour instead of one step lighter in the dark theme.The remaining concerns are explicit repository design and copy requirements; both must be satisfied before merging.
Summary
This PR rebuilds
/commandswith category cards, expandable command rows, visible search counts, and translated labels.The design and copy requirements must be satisfied before merging.
Reviews (15) · Last reviewed commit: "fix(ui): derive command details from the..." · Reviewed by Greptile