fix(ui): mobile command picker and DiscordEmbed label spacing

[RedStar071]

🔗 Linked issue

N/A — UI polish from Discord mobile/embed screenshots.

🧭 Context

Two showcase regressions on /wolfstar:

1. The slash-command picker on small viewports still used the desktop left rail instead of Discord mobile’s horizontal app bar under the list.
2. Bold embed labels (Type, User, Reason, logging fields) jammed into their values because Vue’s whitespace condensation drops spaces between tags, and DiscordMention/DiscordRole are components rather than text nodes.

📚 Description

• Command picker: desktop styles stay the default; Discord mobile layout (column + bottom rail, uppercase labels, pill input) is applied only below md via max-md: / md: — no inverted mobile-first base cascade.
• DiscordEmbed spacing: unscoped strong::after space plus explicit template spaces so every embed caller keeps a gap before text and mention/role chips.
• DiscordMention / DiscordRole: small leading margin so chip components don’t sit flush against prior text when whitespace is stripped.
• Showcase templates + Nuxt SSR tests updated.

Mobile command picker
Embed label spacing
Desktop command picker

Test plan

• Below md: list on top, horizontal app rail below, pill input + send
• md+: original vertical left rail and desktop input tools
• Embeds: space after Type/User/Reason and logging labels next to mentions
• pnpm lint:fix, pnpm typecheck, pnpm build:test, pnpm test:unit, pnpm test:nuxt

_{To show artifacts inline, enable in settings.}

  

---

^{Need help on this PR? Tag /codesmith with what you need. Autofix is disabled.}

Confidence Score: 4/5

This PR needs one contained type-check fix before merging.

The UI changes are mostly component and style updates, but app/types/discord.ts now references an unimported type and breaks type checking.

app/types/discord.ts

T-Rex Logs

What T-Rex did

• I reproduced the missing type import by running a focused TypeScript check against app/types/discord.ts using the generated Nuxt app tsconfig path mappings.
• I examined the TypeScript diagnostic output and confirmed the error cannot find name 'SlashCommandDisplayInput' at app/types/discord.ts(7,4).
• I reviewed the WolfStar Storybook and Playwright logs to understand UI capture behavior, noting a 60-second timeout waiting for domcontentloaded, Storybook readiness followed by exit due to runtime dependencies, and a narrow capture failing because the iframe connection was refused.

_{Ran code and verified through T-Rex}

Prompt To Fix All With AI

Fix the following 1 code review issue. Work through them one at a time, proposing concise fixes.

---

### Issue 1 of 1
app/types/discord.ts:1-4
**Restore missing type import**
`MessageReplyProps` still extends `SlashCommandDisplayInput`, but this PR removed the only import for that type. In this file it is referenced on line 7 with no local import or declaration, so `vue-tsc` and Nuxt type checking fail with `Cannot find name 'SlashCommandDisplayInput'`. Add the type import from the new `#shared/types/chat-input-command` module.

```suggestion
import type { SlashCommandDisplayInput } from "#shared/types/chat-input-command";
import type { ProfileName } from "@/utils/constants";

// #region Message Reply
type MessageReplyKind = "command" | "message";
```

_{Reviews (16): Last reviewed commit: "fix(discord): hide channel messages unde..." | Re-trigger Greptile}

[codspeed-hq]

Merging this PR will not alter performance

✅ 44 untouched benchmarks

---

_{Comparing cursor/mobile-command-picker-embed-spacing-1354 (3909c9c) with main (8718987)}

[codecov]

Codecov Report

❌ Patch coverage is 66.25387% with 109 lines in your changes missing coverage. Please review.
✅ Project coverage is 70.98%. Comparing base (8718987) to head (3909c9c).
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
...rketing)/wolfstar/@components/CommandsShowcase.vue	66.44%	30 Missing and 20 partials ⚠️
app/components/discord/chat-message-composer.vue	33.33%	13 Missing and 9 partials ⚠️
app/components/discord/member-list.vue	73.33%	0 Missing and 12 partials ⚠️
app/components/discord/scrollbar.vue	44.44%	7 Missing and 3 partials ⚠️
shared/utils/chat-input-command.ts	33.33%	0 Missing and 6 partials ⚠️
...ponents/discord/chat-input-command/suggestions.vue	73.33%	3 Missing and 1 partial ⚠️
...omponents/discord/v2/string-select-menu-option.vue	76.92%	0 Missing and 3 partials ⚠️
app/components/discord/channel/header.vue	95.23%	0 Missing and 1 partial ⚠️
...eting)/wolfstar/@components/ModerationShowcase.vue	83.33%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #304      +/-   ##
==========================================
- Coverage   71.53%   70.98%   -0.56%     
==========================================
  Files         167      169       +2     
  Lines        3302     3553     +251     
  Branches      702      762      +60     
==========================================
+ Hits         2362     2522     +160     
- Misses        447      493      +46     
- Partials      493      538      +45     

Flag	Coverage Δ
component	65.64% <65.32%> (-0.46%)	⬇️
unit	67.67% <33.33%> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
app/components/discord/channel/welcome.vue	100.00% <100.00%> (ø)
...components/discord/chat-input-command/app-icon.vue	100.00% <ø> (ø)
...pp/components/discord/chat-input-command/group.vue	50.00% <ø> (ø)
...pp/components/discord/chat-input-command/index.vue	93.33% <ø> (ø)
.../components/discord/chat-input-command/matched.vue	72.72% <ø> (ø)
...mponents/discord/chat-input-command/suggestion.vue	68.75% <100.00%> (ø)
app/components/discord/chat.vue	100.00% <100.00%> (ø)
app/components/discord/embed.vue	100.00% <ø> (ø)
app/components/discord/message-reply.vue	81.25% <ø> (ø)
app/components/discord/message.vue	100.00% <100.00%> (ø)
... and 14 more

... and 1 file with indirect coverage changes

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[netlify]

❌ Deploy Preview for wolfstar-rocks-et34281 failed.

Name	Link
🔨 Latest commit	3909c9c
🔍 Latest deploy log	https://app.netlify.com/projects/wolfstar-rocks-et34281/deploys/6a5f5d539f763300091bef7d