mirror of
https://github.com/multica-ai/multica.git
synced 2026-08-02 10:05:41 +02:00
refactor(views): merge the Discord link into the help footer strip
The footer stacked a full-width Discord row above a right-aligned help trigger, leaving the trigger's leading two-thirds empty and the promo isolated in its own band. Put both on one strip: the link takes the free leading space and `justify-end` keeps the trigger right-aligned once the link is dismissed. Footer height drops 68px -> 48px. Sharing a 224px strip leaves 128px for the label, and the external-link arrow plus the dismiss button together overflow it (label is 109px in en and 125px in zh), so the two cannot coexist at the default sidebar width. Drop the arrow rather than the dismiss button: dismissal is a user-facing capability while the arrow is only a hint the Discord mark already carries. Measured in the running app -- no locale clips at the default width. Co-authored-by: multica-agent <github@multica.ai>
This commit is contained in:
@@ -783,8 +783,11 @@ export function AppSidebar({ topSlot, searchSlot, headerClassName, headerStyle }
|
||||
</SidebarContent>
|
||||
|
||||
<SidebarFooter className="p-2">
|
||||
<JoinDiscordCard />
|
||||
<div className="flex justify-end">
|
||||
{/* 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. */}
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
<JoinDiscordCard />
|
||||
<HelpLauncher />
|
||||
</div>
|
||||
</SidebarFooter>
|
||||
|
||||
@@ -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 (
|
||||
<div className="group/discord relative">
|
||||
<div className="group/discord relative min-w-0 flex-1">
|
||||
<a
|
||||
href={DISCORD_URL}
|
||||
target="_blank"
|
||||
@@ -37,7 +43,6 @@ export function JoinDiscordCard() {
|
||||
<span className="truncate">
|
||||
{t(($) => $.sidebar.discord_card.title)}
|
||||
</span>
|
||||
<ArrowUpRight className="size-3 shrink-0 text-muted-foreground/50" />
|
||||
</a>
|
||||
{/* Revealed on hover/focus so the resting row stays quiet. Coarse
|
||||
pointers get no hover, so keep it permanently visible there. */}
|
||||
|
||||
Reference in New Issue
Block a user