diff --git a/packages/views/layout/app-sidebar.tsx b/packages/views/layout/app-sidebar.tsx index 2fb5e9677e..9393b1261e 100644 --- a/packages/views/layout/app-sidebar.tsx +++ b/packages/views/layout/app-sidebar.tsx @@ -783,8 +783,11 @@ export function AppSidebar({ topSlot, searchSlot, headerClassName, headerStyle } - -
+ {/* One utility strip: the Discord link takes the leading space the + help trigger was leaving empty. `justify-end` keeps the trigger + right-aligned once the Discord link is dismissed. */} +
+
diff --git a/packages/views/layout/join-discord-card.tsx b/packages/views/layout/join-discord-card.tsx index 8143787709..b284d2d3d0 100644 --- a/packages/views/layout/join-discord-card.tsx +++ b/packages/views/layout/join-discord-card.tsx @@ -1,22 +1,28 @@ "use client"; -import { ArrowUpRight, X } from "lucide-react"; +import { X } from "lucide-react"; import { useAuthStore } from "@multica/core/auth"; import { DISCORD_URL, DiscordIcon } from "./discord"; import { useDiscordCardDismissed } from "./use-discord-card-dismissed"; import { useT } from "../i18n"; /** - * Dismissible "Join our Discord" entry pinned to the bottom of the left - * sidebar (above the help launcher). Once dismissed it stays hidden for - * that user on this browser — see {@link useDiscordCardDismissed}. + * Dismissible "Join our Discord" entry sharing the sidebar footer strip with + * the help launcher. Once dismissed it stays hidden for that user on this + * browser — see {@link useDiscordCardDismissed}. * * Deliberately shaped as a sidebar row, not a bordered card: it matches * SidebarMenuButton metrics (h-8 / rounded-md / gap-2 / text-body) and * carries no resting border or fill. A dismissible promo is the * lowest-priority item in the sidebar, so it must not be drawn heavier than - * the navigation above it. The external-link arrow mirrors the Help menu's - * outbound items. + * the navigation above it. + * + * No external-link arrow, unlike the Help menu's outbound items: sharing one + * 224px strip with the help trigger leaves 128px for the label, and the arrow + * plus the dismiss button together overflow that in en (109px) and zh (125px). + * The dismiss affordance wins because it is a user-facing capability and the + * arrow is only a hint — the Discord mark already signals the destination. + * `flex-1 min-w-0` makes the label truncate rather than push the trigger off. */ export function JoinDiscordCard() { const { t } = useT("layout"); @@ -26,7 +32,7 @@ export function JoinDiscordCard() { if (dismissed) return null; return ( -
+
{t(($) => $.sidebar.discord_card.title)} - {/* Revealed on hover/focus so the resting row stays quiet. Coarse pointers get no hover, so keep it permanently visible there. */}