fix(ui): mobile command picker and DiscordEmbed label spacing#304
Draft
RedStar071 wants to merge 28 commits into
Draft
fix(ui): mobile command picker and DiscordEmbed label spacing#304RedStar071 wants to merge 28 commits into
RedStar071 wants to merge 28 commits into
Conversation
Match Discord mobile slash-command suggestions (horizontal app rail, uppercase app labels, pill input) and restore gaps after bold embed labels when values are DiscordMention/DiscordRole components. Co-authored-by: RedStar <redstar071@proton.me>
❌ 4 Tests Failed:
View the top 3 failed test(s) by shortest run time
To view more test analytics, go to the Test Analytics Dashboard |
Also apply oxfmt class-order and template formatting tweaks. Co-authored-by: RedStar <redstar071@proton.me>
This comment has been minimized.
This comment has been minimized.
Use an unscoped strong::after rule and explicit template spaces so Type, User, Reason, and logging fields keep a gap before text and mention chips. Co-authored-by: RedStar <redstar071@proton.me>
Restore the original desktop styles as defaults and scope Discord mobile layout/input tweaks to max-md instead of inverting the base cascade. Co-authored-by: RedStar <redstar071@proton.me>
Stop rendering the WolfStar group under Frequently Used, surface Staryl's first command in that slot instead, and size the picker to five visible rows. Co-authored-by: RedStar <redstar071@proton.me>
Compose WolfStar CommandsShowcase as a Discord-like workspace (header, welcome, chat, member list, message input) and cover it with SSR/a11y tests.
This comment has been minimized.
This comment has been minimized.
Move channel header/welcome under discord/channel/, rename MessageComposer to chat-message-composer, and align the composer toolbar with Discord icons.
Group slash-command UI, shared types/utils, and tests under chat-input-command, update auto-import names, and fix knip/composer SSR assertions that were failing CI.
Align header, composer, member list, slash picker, and string-select with Discord desktop/mobile patterns, use Discord-true oklch chrome, wire members toggle and support-server roster avatars, and simplify moderation reply text in the marketing showcase.
Import Message bar / toolbar SVGs from the Discord assets Figma pack and switch channel header plus composer attach controls to discord:* icons.
This comment has been minimized.
This comment has been minimized.
…ence Align the mockup closer to Discord with a plain attach control, composed slash chrome, short-channel welcome pinning, status icons, and SSR coverage.
…-picker-embed-spacing-1354 Co-authored-by: RedStar <redstar071@proton.me>
Satisfy the design-token guardrail for string-select hover and CommandsShowcase SurfaceCard chrome without changing the colors. Co-authored-by: RedStar <redstar071@proton.me>
Co-locate CSF stories for Discord mock UI (messages, embeds, chat input commands, channel chrome, and Components V2), with shared fixtures and a Discord dark chrome decorator for Chromatic snapshots. Co-authored-by: RedStar <redstar071@proton.me>
❌ Deploy Preview for wolfstar-rocks-et34281 failed.
|
Vue's compiler could not resolve the auto-imported base type when building chat-input-command stories; import it explicitly instead. Co-authored-by: RedStar <redstar071@proton.me>
Use a transparent track with a 4px muted pill thumb everywhere (including the command picker), and hide the chat scrollbar until hover or scroll. Co-authored-by: RedStar <redstar071@proton.me>
…ed-spacing-1354' into cursor/mobile-command-picker-embed-spacing-1354
…ed-spacing-1354' into cursor/mobile-command-picker-embed-spacing-1354
Overlay the picker on the chat, clear messages while slash mode is active (no short-channel scrollbar), and close the picker after execute so the bot response is revealed like Discord. Co-authored-by: RedStar <redstar071@proton.me>
Open Members/Media/Pins from the mobile channel title, flush composer/picker layout, Esc/slash idle send chrome, and reply connector spacing — with Storybook and Nuxt a11y/SSR coverage.
Add a Discord App Launcher, skyra-aligned embeds, upward select menus, desktop mention avatars, and channel chrome fixes for closer Discord parity.
|
Too many files changed for review. ( Bypass the limit by tagging |
This comment has been minimized.
This comment has been minimized.
Co-authored-by: Codesmith <codesmith-bot@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🔗 Linked issue
N/A — UI polish from Discord mobile/embed screenshots.
🧭 Context
Two showcase regressions on
/wolfstar:Type,User,Reason, logging fields) jammed into their values because Vue’s whitespace condensation drops spaces between tags, andDiscordMention/DiscordRoleare components rather than text nodes.📚 Description
mdviamax-md:/md:— no inverted mobile-first base cascade.strong::afterspace plus explicit template spaces so every embed caller keeps a gap before text and mention/role chips.Mobile command picker
Embed label spacing
Desktop command picker
Test plan
md: list on top, horizontal app rail below, pill input + sendmd+: original vertical left rail and desktop input toolspnpm lint:fix,pnpm typecheck,pnpm build:test,pnpm test:unit,pnpm test:nuxtTo show artifacts inline, enable in settings.
Need help on this PR? Tag
/codesmithwith what you need. Autofix is disabled.Confidence Score: 5/5
All changes are confined to Discord showcase UI components and their tests — no server routes, auth logic, or database access is touched.
The changes fix two purely cosmetic regressions (mobile command picker layout and embed label spacing) by adjusting CSS and Vue template whitespace. The new Discord chrome components follow the same patterns as existing ones. The formatSlashCommandDisplayName import removal is safe because Nuxt 4's shared/utils/ auto-import makes it available without an explicit import. Tests were updated to match the renamed component paths and new SSR behavior is covered.
No files require special attention. The unscoped style block in embed.vue is intentional and correctly scoped by the .discord-embed class selector.
Reviews (17): Last reviewed commit: "feat(discord): add mobile channel info a..." | Re-trigger Greptile
Context used: