fix(ui): remove the Account badge and version line from the account menu (#12818)
## Thinking Path > - Paperclip is the open source app people use to manage AI agents for work > - The web UI has a sidebar account menu that opens from the user's name in the lower left > - The menu header shows an "Account"/"Local" badge and a "Paperclip <sha>" (or "Paperclip v<version>") build line next to the user's identity > - These labels add noise to the header and repeat information that is available elsewhere: the email line already shows the sign-in state, and the opt-in "Server" debug section in the same menu shows the running commit > - This pull request removes the badge and the build line so the header shows only the user's name and email > - The benefit is a cleaner account menu that shows only identity information ## Linked Issues or Issue Description No existing issue. Related: #9637 (closed) added the source-sha rendering that this PR removes from the menu header. Description follows the enhancement template: **What existing behavior does this improve?** The sidebar account menu popover. Its header shows the user's name, an "Account" or "Local" badge, the email, and a build identifier line ("Paperclip <short sha>" with branch/commit links for source builds, or "Paperclip v<version>" for release builds). **Current behavior** The popover header mixes identity information with deployment and build metadata. The badge and the version line take space and do not help daily use. **Proposed behavior** The popover header shows only the user's name and email. Build information stays available in the "Server" section at the bottom of the same menu when the server-info debug view is enabled in experimental instance settings. **Reason and benefit** Less visual noise in a menu that users open often. No information is lost: sign-in state is clear from the email line, and the running commit remains visible through the server-info debug view. **Breaking changes** None. The `SidebarAccountMenu` components no longer accept the `serverGit` and `version` props; both call sites in the two `Layout` variants are updated in this PR. ## What Changed - `ui/src/components/SidebarAccountMenu.tsx` and `SidebarAccountMenu.production.tsx`: remove the "Account"/"Local" badge and the full version block (source-build branch/commit links and the release-version fallback); drop the now-unused `serverGit`/`version` props, the sha-parsing helper, and the `Badge` import - `ui/src/components/Layout.tsx` and `Layout.production.tsx`: stop passing the removed props at all four call sites - `ui/src/components/SidebarAccountMenu.test.tsx`: delete the source-build sha test; the sign-out test now pins that the popover contains neither "Account" nor "Paperclip v" - `ui/storybook/stories/navigation-layout.stories.tsx`: stop passing the removed `version` prop in the account-menu story ## Verification - `pnpm vitest run ui/src/components/SidebarAccountMenu.test.tsx ui/src/components/Layout.test.tsx` — 36 tests pass - `tsc --noEmit` for the `ui` package passes - Manual: open the app, click your name in the lower left. The popover header shows only name and email. ## Risks - Low risk. UI-only removal with no data or API changes. - Users who relied on the header sha to identify a source build must enable the experimental server-info debug view to see the running commit in the same menu. > For core feature work, check [`ROADMAP.md`](ROADMAP.md) first and discuss it in `#dev` before opening the PR. Feature PRs that overlap with planned core work may need to be redirected — check the roadmap first. See `CONTRIBUTING.md`. ## Model Used - Claude (Anthropic), Claude Fable 5, model ID `claude-fable-5`, extended thinking enabled, via Claude Code CLI with tool use (file edit, shell, test runner) ## Checklist - [x] I have included a thinking path that traces from project context to this change - [x] I have specified the model used (with version and capability details) - [x] I have checked ROADMAP.md and confirmed this PR does not duplicate planned core work - [x] I have searched GitHub for duplicate or related PRs and linked them above - [x] I have either (a) linked existing issues with `Fixes: #` / `Closes #` / `Refs #` OR (b) described the issue in-PR following the relevant issue template - [x] I have not referenced internal/instance-local Paperclip issues or links (only public GitHub `#NNN` / `github.com/paperclipai/paperclip` URLs) - [x] My branch name describes the change (e.g. `docs/...`, `fix/...`) and contains no internal Paperclip ticket id or instance-derived details - [x] I have run tests locally and they pass - [x] I have added or updated tests where applicable - [x] I have updated relevant documentation to reflect my changes - [x] I have considered and documented any risks above - [ ] All Paperclip CI gates are green - [ ] Greptile is 5/5 with no open P2s, recommendations, or follow-ups - [x] I will address all Greptile and reviewer comments before requesting merge
This commit is contained in:
Devin Foley
GitHub
parent
1a74719309
commit
c38b59484c
|
|
@ -604,8 +604,6 @@ export function Layout() {
|
|||
</div>
|
||||
<SidebarAccountMenu
|
||||
deploymentMode={health?.deploymentMode}
|
||||
serverGit={health?.serverInfo?.git}
|
||||
version={health?.version}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
|
|
@ -624,8 +622,6 @@ export function Layout() {
|
|||
</div>
|
||||
<SidebarAccountMenu
|
||||
deploymentMode={health?.deploymentMode}
|
||||
serverGit={health?.serverInfo?.git}
|
||||
version={health?.version}
|
||||
/>
|
||||
</SidebarShell>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -659,8 +659,6 @@ export function Layout() {
|
|||
</div>
|
||||
<SidebarAccountMenu
|
||||
deploymentMode={health?.deploymentMode}
|
||||
serverGit={health?.serverInfo?.git}
|
||||
version={health?.version}
|
||||
forceExpanded={replacesPrimarySidebar}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -684,8 +682,6 @@ export function Layout() {
|
|||
</div>
|
||||
<SidebarAccountMenu
|
||||
deploymentMode={health?.deploymentMode}
|
||||
serverGit={health?.serverInfo?.git}
|
||||
version={health?.version}
|
||||
forceExpanded={replacesPrimarySidebar}
|
||||
/>
|
||||
</SidebarShell>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import {
|
|||
UserRound,
|
||||
UserRoundPen,
|
||||
} from "lucide-react";
|
||||
import type { DeploymentMode, ServerGitInfo } from "@paperclipai/shared";
|
||||
import type { DeploymentMode } from "@paperclipai/shared";
|
||||
import { Link } from "@/lib/router";
|
||||
import { authApi } from "@/api/auth";
|
||||
import { queryKeys } from "@/lib/queryKeys";
|
||||
|
|
@ -20,20 +20,15 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|||
import { cn, SIDEBAR_RAIL_HIDDEN_LABEL } from "../lib/utils";
|
||||
import { ThemeToggle } from "./ThemeToggle";
|
||||
import { SidebarServerInfo } from "./SidebarServerInfo";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
|
||||
const PROFILE_SETTINGS_PATH = "/company/settings/instance/profile";
|
||||
const DOCS_URL = "https://docs.paperclip.ing/";
|
||||
const FEEDBACK_URL = "https://paperclip.ing/feedback";
|
||||
const SOURCE_REPOSITORY_URL = "https://github.com/paperclipai/paperclip";
|
||||
const SOURCE_VERSION_RE = /\+\d+\.git\.([0-9a-f]{7,40})(?:\.dirty)?$/i;
|
||||
|
||||
interface SidebarAccountMenuProps {
|
||||
deploymentMode?: DeploymentMode;
|
||||
open?: boolean;
|
||||
onOpenChange?: (open: boolean) => void;
|
||||
serverGit?: ServerGitInfo;
|
||||
version?: string | null;
|
||||
}
|
||||
|
||||
interface MenuActionProps {
|
||||
|
|
@ -67,11 +62,6 @@ function deriveUserSlug(name: string | null | undefined, email: string | null |
|
|||
return "me";
|
||||
}
|
||||
|
||||
function sourceVersionSha(version: string): string | null {
|
||||
const sourceVersion = version.match(SOURCE_VERSION_RE);
|
||||
return sourceVersion?.[1] ?? null;
|
||||
}
|
||||
|
||||
function MenuAction({ label, description, icon: Icon, onClick, href, external = false }: MenuActionProps) {
|
||||
const className =
|
||||
"flex w-full items-start gap-3 rounded-xl px-3 py-3 text-left transition-colors hover:bg-accent/60";
|
||||
|
|
@ -115,8 +105,6 @@ export function SidebarAccountMenu({
|
|||
deploymentMode,
|
||||
open: controlledOpen,
|
||||
onOpenChange,
|
||||
serverGit,
|
||||
version,
|
||||
}: SidebarAccountMenuProps) {
|
||||
const [internalOpen, setInternalOpen] = useState(false);
|
||||
const { isMobile, setSidebarOpen, collapsed, peeking } = useSidebar();
|
||||
|
|
@ -134,15 +122,8 @@ export function SidebarAccountMenu({
|
|||
const displayName = session?.user.name?.trim() || "Board";
|
||||
const secondaryLabel =
|
||||
session?.user.email?.trim() || (deploymentMode === "authenticated" ? "Signed in" : "Local workspace board");
|
||||
const accountBadge = deploymentMode === "authenticated" ? "Account" : "Local";
|
||||
const initials = deriveInitials(displayName);
|
||||
const profileHref = `/u/${deriveUserSlug(session?.user.name, session?.user.email, session?.user.id)}`;
|
||||
const sourceSha = version ? sourceVersionSha(version) : null;
|
||||
const sourceFullSha =
|
||||
sourceSha && serverGit?.available && serverGit.fullSha.toLowerCase().startsWith(sourceSha.toLowerCase())
|
||||
? serverGit.fullSha
|
||||
: sourceSha;
|
||||
const sourceBranch = sourceSha && serverGit?.available ? serverGit.branchName : null;
|
||||
|
||||
function closeNavigationChrome() {
|
||||
setOpen(false);
|
||||
|
|
@ -189,40 +170,8 @@ export function SidebarAccountMenu({
|
|||
</Avatar>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1 pt-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<h2 className="truncate text-base font-semibold text-foreground">{displayName}</h2>
|
||||
<Badge variant="ghost" className="bg-accent text-(length:--text-nano) font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
{accountBadge}
|
||||
</Badge>
|
||||
</div>
|
||||
<h2 className="truncate text-base font-semibold text-foreground">{displayName}</h2>
|
||||
<p className="truncate text-sm text-muted-foreground">{secondaryLabel}</p>
|
||||
{sourceSha && sourceFullSha ? (
|
||||
<div className="mt-1 text-xs text-muted-foreground">
|
||||
{sourceBranch ? (
|
||||
<a
|
||||
href={`${SOURCE_REPOSITORY_URL}/tree/${encodeURIComponent(sourceBranch)}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="block truncate transition-colors hover:text-foreground"
|
||||
>
|
||||
{sourceBranch}
|
||||
</a>
|
||||
) : null}
|
||||
<p>
|
||||
Paperclip{" "}
|
||||
<a
|
||||
href={`${SOURCE_REPOSITORY_URL}/commit/${sourceFullSha}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="transition-colors hover:text-foreground"
|
||||
>
|
||||
{sourceSha.slice(0, 7)}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
) : version ? (
|
||||
<p className="mt-1 text-xs text-muted-foreground">Paperclip v{version}</p>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -196,10 +196,7 @@ describe("SidebarAccountMenu", () => {
|
|||
root.render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<TooltipProvider>
|
||||
<SidebarAccountMenu
|
||||
deploymentMode="authenticated"
|
||||
version="1.2.3"
|
||||
/>
|
||||
<SidebarAccountMenu deploymentMode="authenticated" />
|
||||
</TooltipProvider>
|
||||
</QueryClientProvider>,
|
||||
);
|
||||
|
|
@ -233,7 +230,9 @@ describe("SidebarAccountMenu", () => {
|
|||
const themePos = menuText.indexOf("Switch to");
|
||||
expect(docsPos).toBeLessThan(themePos);
|
||||
|
||||
expect(document.body.textContent).toContain("Paperclip v1.2.3");
|
||||
// The popover header stays down to name + email: no "Account" badge, no version line.
|
||||
expect(popover?.textContent).not.toContain("Account");
|
||||
expect(popover?.textContent).not.toContain("Paperclip v");
|
||||
expect(document.body.textContent).toContain("jane@example.com");
|
||||
expect(document.body.querySelector('[data-slot="popover-content"]')?.className)
|
||||
.toContain("w-(--sz-277px)");
|
||||
|
|
@ -331,53 +330,4 @@ describe("SidebarAccountMenu", () => {
|
|||
});
|
||||
});
|
||||
|
||||
it("shows the short commit sha instead of a version for source builds", async () => {
|
||||
const root = createRoot(container);
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: { queries: { retry: false } },
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
root.render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<TooltipProvider>
|
||||
<SidebarAccountMenu
|
||||
deploymentMode="authenticated"
|
||||
version="2026.626.0+58.git.518fc71ce"
|
||||
serverGit={{
|
||||
available: true,
|
||||
fullSha: "518fc71ce1234567890abcdef1234567890abcde",
|
||||
shortSha: "518fc71",
|
||||
branchName: "feature/source-build-label",
|
||||
subject: "Show source build label",
|
||||
committedAt: "2026-06-26T00:00:00.000Z",
|
||||
localChanges: {
|
||||
available: true,
|
||||
hasLocalChanges: false,
|
||||
stagedFileCount: 0,
|
||||
unstagedFileCount: 0,
|
||||
untrackedFileCount: 0,
|
||||
},
|
||||
}}
|
||||
open
|
||||
/>
|
||||
</TooltipProvider>
|
||||
</QueryClientProvider>,
|
||||
);
|
||||
});
|
||||
await flushReact();
|
||||
|
||||
expect(document.body.textContent).toContain("feature/source-build-labelPaperclip 518fc71");
|
||||
expect(document.body.textContent).not.toContain("2026.626.0+58.git.518fc71ce");
|
||||
expect(document.body.querySelector('a[href="https://github.com/paperclipai/paperclip/tree/feature%2Fsource-build-label"]')?.textContent).toBe(
|
||||
"feature/source-build-label",
|
||||
);
|
||||
expect(document.body.querySelector('a[href="https://github.com/paperclipai/paperclip/commit/518fc71ce1234567890abcdef1234567890abcde"]')?.textContent).toBe(
|
||||
"518fc71",
|
||||
);
|
||||
|
||||
await act(async () => {
|
||||
root.unmount();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import {
|
|||
UserRound,
|
||||
UserRoundPen,
|
||||
} from "lucide-react";
|
||||
import type { DeploymentMode, ServerGitInfo } from "@paperclipai/shared";
|
||||
import type { DeploymentMode } from "@paperclipai/shared";
|
||||
import { Link } from "@/lib/router";
|
||||
import { authApi } from "@/api/auth";
|
||||
import { queryKeys } from "@/lib/queryKeys";
|
||||
|
|
@ -21,20 +21,15 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|||
import { cn, SIDEBAR_RAIL_HIDDEN_LABEL } from "../lib/utils";
|
||||
import { ThemeToggle } from "./ThemeToggle";
|
||||
import { SidebarServerInfo } from "./SidebarServerInfo";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
|
||||
const PROFILE_SETTINGS_PATH = "/company/settings/instance/profile";
|
||||
const DOCS_URL = "https://docs.paperclip.ing/";
|
||||
const FEEDBACK_URL = "https://paperclip.ing/feedback";
|
||||
const SOURCE_REPOSITORY_URL = "https://github.com/paperclipai/paperclip";
|
||||
const SOURCE_VERSION_RE = /\+\d+\.git\.([0-9a-f]{7,40})(?:\.dirty)?$/i;
|
||||
|
||||
interface SidebarAccountMenuProps {
|
||||
deploymentMode?: DeploymentMode;
|
||||
open?: boolean;
|
||||
onOpenChange?: (open: boolean) => void;
|
||||
serverGit?: ServerGitInfo;
|
||||
version?: string | null;
|
||||
/** Contextual navigation occupies a full sidebar even if the saved global nav mode is collapsed. */
|
||||
forceExpanded?: boolean;
|
||||
}
|
||||
|
|
@ -70,11 +65,6 @@ function deriveUserSlug(name: string | null | undefined, email: string | null |
|
|||
return "me";
|
||||
}
|
||||
|
||||
function sourceVersionSha(version: string): string | null {
|
||||
const sourceVersion = version.match(SOURCE_VERSION_RE);
|
||||
return sourceVersion?.[1] ?? null;
|
||||
}
|
||||
|
||||
function MenuAction({ label, description, icon: Icon, onClick, href, external = false }: MenuActionProps) {
|
||||
const className =
|
||||
"flex w-full items-start gap-3 rounded-xl px-3 py-3 text-left transition-colors hover:bg-accent/60";
|
||||
|
|
@ -118,8 +108,6 @@ export function SidebarAccountMenu({
|
|||
deploymentMode,
|
||||
open: controlledOpen,
|
||||
onOpenChange,
|
||||
serverGit,
|
||||
version,
|
||||
forceExpanded = false,
|
||||
}: SidebarAccountMenuProps) {
|
||||
const [internalOpen, setInternalOpen] = useState(false);
|
||||
|
|
@ -138,15 +126,8 @@ export function SidebarAccountMenu({
|
|||
const displayName = session?.user.name?.trim() || "Board";
|
||||
const secondaryLabel =
|
||||
session?.user.email?.trim() || (deploymentMode === "authenticated" ? "Signed in" : "Local workspace board");
|
||||
const accountBadge = deploymentMode === "authenticated" ? "Account" : "Local";
|
||||
const initials = deriveInitials(displayName);
|
||||
const profileHref = `/u/${deriveUserSlug(session?.user.name, session?.user.email, session?.user.id)}`;
|
||||
const sourceSha = version ? sourceVersionSha(version) : null;
|
||||
const sourceFullSha =
|
||||
sourceSha && serverGit?.available && serverGit.fullSha.toLowerCase().startsWith(sourceSha.toLowerCase())
|
||||
? serverGit.fullSha
|
||||
: sourceSha;
|
||||
const sourceBranch = sourceSha && serverGit?.available ? serverGit.branchName : null;
|
||||
|
||||
function closeNavigationChrome() {
|
||||
setOpen(false);
|
||||
|
|
@ -193,40 +174,8 @@ export function SidebarAccountMenu({
|
|||
</Avatar>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1 pt-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<h2 className="truncate text-base font-semibold text-foreground">{displayName}</h2>
|
||||
<Badge variant="ghost" className="bg-accent text-(length:--text-nano) font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
{accountBadge}
|
||||
</Badge>
|
||||
</div>
|
||||
<h2 className="truncate text-base font-semibold text-foreground">{displayName}</h2>
|
||||
<p className="truncate text-sm text-muted-foreground">{secondaryLabel}</p>
|
||||
{sourceSha && sourceFullSha ? (
|
||||
<div className="mt-1 text-xs text-muted-foreground">
|
||||
{sourceBranch ? (
|
||||
<a
|
||||
href={`${SOURCE_REPOSITORY_URL}/tree/${encodeURIComponent(sourceBranch)}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="block truncate transition-colors hover:text-foreground"
|
||||
>
|
||||
{sourceBranch}
|
||||
</a>
|
||||
) : null}
|
||||
<p>
|
||||
Paperclip{" "}
|
||||
<a
|
||||
href={`${SOURCE_REPOSITORY_URL}/commit/${sourceFullSha}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="transition-colors hover:text-foreground"
|
||||
>
|
||||
{sourceSha.slice(0, 7)}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
) : version ? (
|
||||
<p className="mt-1 text-xs text-muted-foreground">Paperclip v{version}</p>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -256,7 +256,6 @@ function NavigationLayoutStories() {
|
|||
deploymentMode="authenticated"
|
||||
open
|
||||
onOpenChange={() => undefined}
|
||||
version="0.3.1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue