Svelte: more welcome banner behavior updates (#64311)

This makes some requested changes to the welcome banner. 

Notably:
- We no longer show the dialog unless the user switches into the svelte
version from react
- We don't show the dialog on every switch
- The dialog is accessible in the React via the "Learn more" button in
the menu
- Copy is updated to be less verbose
- The request for feedback is only shown once when switching out of the
svelte webapp

Author: camdencheek

client/shared/src/settings/temporary/TemporarySettings.ts

@@ -98,7 +98,9 @@ export interface TemporarySettingsSchema {
     'openCodeGraph.annotations.visible': boolean
 
     'webNext.welcomeOverlay.dismissed': boolean
+    'webNext.welcomeOverlay.show': boolean
     'webNext.departureMessage.dismissed': boolean
+    'webNext.departureMessage.show': boolean
 }
 
 /**
@@ -165,7 +167,9 @@ const TEMPORARY_SETTINGS: Record<keyof TemporarySettings, null> = {
     'cody.onboarding.completed': null,
     'openCodeGraph.annotations.visible': null,
     'webNext.welcomeOverlay.dismissed': null,
+    'webNext.welcomeOverlay.show': null,
     'webNext.departureMessage.dismissed': null,
+    'webNext.departureMessage.show': null,
 }
 
 export const TEMPORARY_SETTINGS_KEYS = Object.keys(TEMPORARY_SETTINGS) as readonly (keyof TemporarySettings)[]

client/web-sveltekit/src/lib/navigation/FeedbackDialog.svelte

@@ -13,13 +13,7 @@
         {/if}
     </div>
     <div class="section">
-        <p class="m0">
-            You're currently on the new, faster Code Search user experience. It's in beta, and is our effort to rebuild
-            the tool from the ground up for performance.
-        </p>
-    </div>
-    <div class="section">
-        <p>Got feedback for us on the beta? We'd love to hear from you.</p>
+        <p>Have feedback for us on the beta? We’d love to hear from you.</p>
         <a
             class={getButtonClassName({ variant: 'secondary' })}
             href="https://community.sourcegraph.com/c/code-search/9"

client/web-sveltekit/src/lib/navigation/GlobalHeader.svelte

@@ -125,21 +125,14 @@
 
     <div class="web-next-notice">
         <ProductStatusBadge status="beta" />
-        <a
-            class={getButtonClassName({ variant: 'secondary', size: 'sm' })}
-            href="https://community.sourcegraph.com/c/code-search/9"
-            target="_blank"
-            rel="noreferrer noopener"
-        >
-            Feedback
-        </a>
         <Popover let:registerTrigger let:toggle placement="bottom-end">
             <button
                 use:registerTrigger
                 class={getButtonClassName({ variant: 'secondary', size: 'sm' })}
                 on:click={() => toggle()}
             >
-                <Icon icon={ILucideEllipsis} inline />
+                New UI Feedback
+                <Icon icon={ILucideChevronDown} inline />
             </button>
             <FeedbackDialog slot="content" {handleOptOut} />
         </Popover>

client/web-sveltekit/src/routes/+layout.svelte

@@ -83,17 +83,11 @@
     $: handleOptOut = currentUserID
         ? async (): Promise<void> => {
               // Show departure message after switching off
-              $temporarySettingsStorage.set('webNext.departureMessage.dismissed', false)
+              $temporarySettingsStorage.set('webNext.departureMessage.show', true)
               await data.disableSvelteFeatureFlags(currentUserID)
               window.location.reload()
           }
         : undefined
-
-    $: welcomeOverlayDismissed = $temporarySettingsStorage.get('webNext.welcomeOverlay.dismissed', false)
-    $: showWelcomeOverlay = !($welcomeOverlayDismissed ?? true)
-    function handleDismissWelcomeOverlay() {
-        $temporarySettingsStorage.set('webNext.welcomeOverlay.dismissed', true)
-    }
 </script>
 
 <svelte:head>
@@ -112,7 +106,7 @@
     <slot />
 </main>
 
-<WelcomeOverlay show={showWelcomeOverlay} handleDismiss={handleDismissWelcomeOverlay} />
+<WelcomeOverlay />
 
 <FuzzyFinderContainer />
 

client/web-sveltekit/src/routes/WelcomeOverlay.svelte

@@ -2,18 +2,24 @@
     import { allHotkey } from '$lib/fuzzyfinder/keys'
     import Icon from '$lib/Icon.svelte'
     import KeyboardShortcut from '$lib/KeyboardShortcut.svelte'
+    import { temporarySetting } from '$lib/temporarySettings'
     import { isLightTheme } from '$lib/theme'
     import Button from '$lib/wildcard/Button.svelte'
     import ProductStatusBadge from '$lib/wildcard/ProductStatusBadge.svelte'
 
     import WelcomeOverlayScreenshotDark from './WelcomeOverlayScreenshotDark.svelte'
     import WelcomeOverlayScreenshotLight from './WelcomeOverlayScreenshotLight.svelte'
 
-    export let show: boolean
-    export let handleDismiss: () => void
-
     let dialog: HTMLDialogElement | undefined
     let inner: HTMLDivElement | undefined
+
+    $: activated = temporarySetting('webNext.welcomeOverlay.show', false)
+    $: dismissed = temporarySetting('webNext.welcomeOverlay.dismissed', false)
+    $: show = !$activated.loading && $activated.data && !$dismissed.loading && !$dismissed.data
+
+    function handleDismiss() {
+        dismissed.setValue(true)
+    }
     function handleClickOutside(event: MouseEvent) {
         // Use an inner div because the whole backdrop registers as part of the dialog
         if (inner && !inner.contains(event.target as Node)) {

client/web/BUILD.bazel

@@ -1651,6 +1651,7 @@ ts_project(
         "src/storm/pages/SearchPageWrapper/SearchPageWrapper.tsx",
         "src/storm/pages/SearchPageWrapper/index.ts",
         "src/storm/routes.tsx",
+        "src/sveltekit/LearnMoreOverlay.tsx",
         "src/sveltekit/SvelteKitNavItem.tsx",
         "src/sveltekit/WebNextAwareLink.tsx",
         "src/sveltekit/routes.ts",