From f7d95848f2ad0b247cb497076d803555a1f050ad Mon Sep 17 00:00:00 2001 From: Garry Tan Date: Thu, 2 Apr 2026 19:11:45 -0700 Subject: [PATCH] feat: right-pointing arrow hint for sidebar on welcome page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace invisible text fallback with visible amber bubble + animated right arrow (→) pointing toward where the sidebar opens. Always correct regardless of window size (unlike the old up arrow at toolbar chrome). --- browse/src/welcome.html | 33 ++++++++++++++++++++------------- browse/test/sidebar-ux.test.ts | 7 ++++--- 2 files changed, 24 insertions(+), 16 deletions(-) diff --git a/browse/src/welcome.html b/browse/src/welcome.html index ac07f5d1..7f03eb77 100644 --- a/browse/src/welcome.html +++ b/browse/src/welcome.html @@ -39,32 +39,38 @@ } .page { width: 100%; max-width: 860px; padding: 0 40px; } - /* Sidebar prompt */ + /* Sidebar prompt — points RIGHT toward where sidebar opens */ .sidebar-prompt { position: fixed; - top: 6px; - right: 95px; + top: 50%; + right: 20px; + transform: translateY(-50%); z-index: 100; display: flex; - flex-direction: column; align-items: center; + gap: 10px; transition: opacity 300ms ease-out; } - @keyframes bob { - 0%, 100% { transform: translateY(0); } - 50% { transform: translateY(-5px); } - } .sidebar-prompt .bubble { background: var(--amber-500); color: #000; - font-size: 12px; + font-size: 13px; font-weight: 600; - padding: 8px 14px; - border-radius: 8px; - max-width: 200px; + padding: 10px 16px; + border-radius: 10px; + max-width: 220px; text-align: left; line-height: 1.4; } + .sidebar-prompt .arrow-right { + font-size: 28px; + color: var(--amber-500); + animation: nudge 1.5s ease-in-out infinite; + } + @keyframes nudge { + 0%, 100% { transform: translateX(0); } + 50% { transform: translateX(6px); } + } .sidebar-prompt.hidden { opacity: 0; pointer-events: none; } /* Hero */ @@ -159,7 +165,8 @@
diff --git a/browse/test/sidebar-ux.test.ts b/browse/test/sidebar-ux.test.ts index ad4a7bb7..2765e1e9 100644 --- a/browse/test/sidebar-ux.test.ts +++ b/browse/test/sidebar-ux.test.ts @@ -1213,10 +1213,11 @@ describe('welcome page', () => { expect(welcomeSrc).toContain('sidebar-prompt'); }); - test('welcome page does NOT have a misaligned arrow', () => { - // Arrow was removed because it can never align with browser chrome + test('welcome page points RIGHT toward sidebar (not UP at toolbar)', () => { + // Up arrow can never align with browser chrome. Right arrow always + // points toward the sidebar area regardless of window size. expect(welcomeSrc).not.toContain('arrow-up'); - expect(welcomeSrc).not.toContain('↑'); + expect(welcomeSrc).toContain('arrow-right'); }); test('welcome page has left-aligned text (no center-align on headings)', () => {