Implement Redesigned Three-Mode Navigation #3252
Description
Introduce a new navigation paradigm separating workflows into three distinct modes (Database, Diagnostics, SQL Editor) with a smooth user onboarding experience.
Changes
New Mode Switcher
Implement a three-button vertical switcher in the left sidebar. States: Collapsed (shows icons only) and Expanded (shows labels).
In collapsed state, show persistent tooltips on hover for all three icons. The icon under the cursor should visually move slightly towards the center (subtle highlight effect). In expanded state, tooltips are not needed.
Onboarding Highlight (First 2 weeks post-release)
Trigger a two-pulse highlight animation (lasting ~3 seconds) on the button group after the full interface has loaded and a 2-3 second delay.
Animation: Fade from brightest to dimmest state.
Alternative/Additional: Implement a gentle "shivering" or wiggle animation for the button group (similar to existing query notifications) after a 1-2 second post-load delay.
Informational Popover (One-time)
Show a one-time informational popover about the new navigation.
Logic: Display only once per user (check localStorage flag ydb_nav_v2_intro_shown). Trigger with a 300-500ms delay after the user's first potential interaction (e.g., hovering near the new navigation area). Position near the mode switcher without blocking critical UI (tree, tables, execute button). Close via: "Got it" button, click outside, Esc key, or 'X' icon in the popover.
Content Reorganization
Redistribute existing tabs and pages across the three new modes as shown in the provided screenshots (Database, Diagnostics, SQL Editor).
The schema tree should support collapsing/expanding independently within its relevant mode.
