From d59686189195080cc4c63264b2bb9e4ea7bbb42c Mon Sep 17 00:00:00 2001 From: Mohamed Boudra Date: Tue, 29 Sep 2026 12:02:38 +0100 Subject: [PATCH] feat(sidebar): make empty project actions clear and quiet (#5675) Use the shared button sizes and a bordered list card so the empty sidebar gives project setup actions a consistent visual hierarchy. --- docs/design.md | 2 +- .../after-compact.png | Bin 0 -> 53734 bytes .../sidebar-empty-state-card/after-dark.png | Bin 0 -> 137178 bytes .../sidebar-empty-state-card/after-light.png | Bin 0 -> 136950 bytes .../sidebar-empty-state-card/before-dark.png | Bin 0 -> 135541 bytes .../sidebar-empty-state-card/before-light.png | Bin 0 -> 136863 bytes .../src/components/sidebar/empty-states.tsx | 76 ++++++++++++------ 7 files changed, 53 insertions(+), 25 deletions(-) create mode 100644 docs/qa-evidence/sidebar-empty-state-card/after-compact.png create mode 100644 docs/qa-evidence/sidebar-empty-state-card/after-dark.png create mode 100644 docs/qa-evidence/sidebar-empty-state-card/after-light.png create mode 100644 docs/qa-evidence/sidebar-empty-state-card/before-dark.png create mode 100644 docs/qa-evidence/sidebar-empty-state-card/before-light.png diff --git a/docs/design.md b/docs/design.md index 541fe9c6f5..e0904d917e 100644 --- a/docs/design.md +++ b/docs/design.md @@ -193,7 +193,7 @@ Terminology: Loading is inline by default. `` sits next to the thing it relates to (`packages/app/src/screens/settings/providers-section.tsx:227-231`). Page-level loading is a centered `` (`packages/app/src/screens/sessions-screen.tsx:69-72`). Card-level loading is a single short line, not a spinner. In-row dropdown items use ``; the menu item handles its own pending state. -Empty states are short noun phrases. Centered, muted, one or two lines. Sessions screen pairs the empty noun with a single ghost button to navigate back (`packages/app/src/screens/sessions-screen.tsx:74-81`); that pairing is the maximum elaboration. Illustrations and CTAs disguised as empty states are wrong. +Screen-level empty states use a centered, muted noun phrase and at most one ghost button (`packages/app/src/screens/sessions-screen.tsx`). Sidebar list empty states use a quiet bordered card with a left-aligned `sm` title, a muted `sm` description, and `xs` ` - + ); } @@ -47,40 +71,44 @@ export function SidebarProjectEmptyState({ const { t } = useTranslation(); return ( - - {t("sidebar.project.empty.title")} - {t("sidebar.project.empty.description")} - - - + ); } const styles = StyleSheet.create((theme) => ({ - container: { - marginHorizontal: theme.spacing[2], - marginTop: theme.spacing[4], - paddingTop: theme.spacing[6], - paddingBottom: theme.spacing[4], - paddingHorizontal: theme.spacing[4], + card: { + marginTop: theme.spacing[3], + padding: theme.spacing[4], + borderWidth: 1, + borderColor: theme.colors.border, borderRadius: theme.borderRadius.lg, - backgroundColor: theme.colors.surface0, - alignItems: "center", - gap: theme.spacing[3], + }, + copy: { + gap: theme.spacing[1], + }, + actions: { + flexDirection: "row", + gap: theme.spacing[2], + marginTop: theme.spacing[4], }, title: { color: theme.colors.foreground, fontSize: theme.fontSize.sm, - fontWeight: theme.fontWeight.medium, - textAlign: "center", + fontWeight: theme.fontWeight.normal, }, description: { color: theme.colors.foregroundMuted, fontSize: theme.fontSize.sm, - textAlign: "center", }, }));