Svelte: implement preview panel (#61013)

This implements the basics of the preview panel in Svelte.

Author: camdencheek

client/web-sveltekit/src/lib/repo/blob.ts

@@ -157,7 +157,7 @@ interface BlobDataHandler extends Readable<CombinedBlobData> {
 
 /**
  * This store synchronizes the state of the blob data and the highlights. While new blob data is
- * loading, the old blob and highlighs data is still available. Once the blob data is loaded, the
+ * loading, the old blob and highlights data is still available. Once the blob data is loaded, the
  * highlights are updated.
  */
 export function createBlobDataHandler(): BlobDataHandler {

client/web-sveltekit/src/lib/search/input/SearchInput.svelte

@@ -3,22 +3,12 @@
     //  - History more
     //  - Default context support
     //  - Global keyboard shortcut
-    import { mdiCodeBrackets, mdiFormatLetterCase, mdiRegex } from '@mdi/js'
-
-    import { goto, invalidate } from '$app/navigation'
-    import { SearchPatternType } from '$lib/graphql-operations'
-    import Icon from '$lib/Icon.svelte'
-    import Tooltip from '$lib/Tooltip.svelte'
-
-    import { type QueryStateStore, getQueryURL, QueryState } from '../state'
-    import BaseCodeMirrorQueryInput from '$lib/search/BaseQueryInput.svelte'
-    import { createSuggestionsSource } from '$lib/web'
-    import { query, type DocumentInput } from '$lib/graphql'
-    import Suggestions from './Suggestions.svelte'
-    import { user } from '$lib/stores'
 
     import { EditorSelection, EditorState, Prec, type Extension } from '@codemirror/state'
     import { EditorView } from '@codemirror/view'
+    import { mdiCodeBrackets, mdiFormatLetterCase, mdiRegex } from '@mdi/js'
+
+    import { goto, invalidate } from '$app/navigation'
     import {
         type Option,
         type Action,
@@ -35,7 +25,18 @@
         onModeChange,
         setMode,
     } from '$lib/branded'
+    import { query, type DocumentInput } from '$lib/graphql'
+    import { SearchPatternType } from '$lib/graphql-operations'
+    import Icon from '$lib/Icon.svelte'
+    import BaseCodeMirrorQueryInput from '$lib/search/BaseQueryInput.svelte'
+    import { user } from '$lib/stores'
+    import Tooltip from '$lib/Tooltip.svelte'
+    import { createSuggestionsSource } from '$lib/web'
+
+    import { type QueryStateStore, getQueryURL, QueryState } from '../state'
+
     import { createRecentSearchesStore } from './recentSearches'
+    import Suggestions from './Suggestions.svelte'
 
     const placeholderText = 'Search for code or files...'
 
@@ -372,10 +373,6 @@
         cursor: pointer;
     }
 
-    button.mode {
-        clear: all;
-    }
-
     .mode-switcher {
         display: flex;
         align-items: center;

client/web-sveltekit/src/lib/search/state.ts

@@ -1,6 +1,5 @@
 import { writable, type Readable } from 'svelte/store'
 
-import { goto } from '$app/navigation'
 import { SearchPatternType } from '$lib/graphql-operations'
 import { buildSearchURLQuery, type Settings } from '$lib/shared'
 import { defaultSearchModeFromSettings, defaultPatternTypeFromSettings } from '$lib/web'

client/web-sveltekit/src/lib/shared.ts

@@ -48,6 +48,7 @@ export {
     type Progress,
     type Range,
     type Filter,
+    type SearchEvent,
 } from '@sourcegraph/shared/src/search/stream'
 export {
     type MatchItem,

client/web-sveltekit/src/lib/utils/promises.ts

@@ -81,3 +81,19 @@ export function createPromiseStore<D, E = Error>(): PromiseStore<D, E> {
         },
     }
 }
+
+/**
+ * Returns a store that publishes updates when the promise is resolved or rejected.
+ */
+export function toReadable<D, E = Error>(promise: PromiseLike<D>): Readable<Result<D, E>> {
+    const resultStore = writable<Result<D, E>>({ value: null, error: null, pending: true })
+    promise.then(
+        result => {
+            resultStore.set({ value: result, error: null, pending: false })
+        },
+        error => {
+            resultStore.set({ value: null, error: error, pending: false })
+        }
+    )
+    return resultStore
+}

client/web-sveltekit/src/lib/wildcard/menu/Menu.svelte

@@ -34,7 +34,7 @@
     } = createDropdownMenu({
         open,
     })
-    setContext({ item, trigger, separator, builders, open })
+    setContext({ item, trigger, separator, builders, $open })
 </script>
 
 <button {...$trigger} use:trigger class={triggerButtonClass} {...$$restProps}>

client/web-sveltekit/src/routes/[...repo=reporev]/(validrev)/(code)/-/blob/[...path]/+page.svelte

@@ -2,26 +2,25 @@
 
 <script lang="ts">
     import { mdiCodeBracesBox, mdiFileCodeOutline, mdiMapSearch } from '@mdi/js'
+    import { from } from 'rxjs'
 
+    import { goto } from '$app/navigation'
     import { page } from '$app/stores'
     import CodeMirrorBlob from '$lib/CodeMirrorBlob.svelte'
+    import { isErrorLike, type LineOrPositionOrRange } from '$lib/common'
+    import { toGraphQLResult } from '$lib/graphql'
     import Icon from '$lib/Icon.svelte'
     import LoadingSpinner from '$lib/LoadingSpinner.svelte'
+    import { updateSearchParamsWithLineInformation, createBlobDataHandler } from '$lib/repo/blob'
+    import FileDiff from '$lib/repo/FileDiff.svelte'
     import FileHeader from '$lib/repo/FileHeader.svelte'
     import Permalink from '$lib/repo/Permalink.svelte'
-
-    import FileDiff from '$lib/repo/FileDiff.svelte'
+    import { createCodeIntelAPI, parseQueryAndHash } from '$lib/shared'
+    import { Alert } from '$lib/wildcard'
 
     import type { PageData } from './$types'
     import FormatAction from './FormatAction.svelte'
     import WrapLinesAction, { lineWrap } from './WrapLinesAction.svelte'
-    import { createCodeIntelAPI, parseQueryAndHash } from '$lib/shared'
-    import { goto } from '$app/navigation'
-    import { updateSearchParamsWithLineInformation, createBlobDataHandler } from '$lib/repo/blob'
-    import { isErrorLike, type LineOrPositionOrRange } from '$lib/common'
-    import { from } from 'rxjs'
-    import { toGraphQLResult } from '$lib/graphql'
-    import { Alert } from '$lib/wildcard'
 
     export let data: PageData
 

client/web-sveltekit/src/routes/search/FileContentSearchResult.svelte

@@ -25,6 +25,7 @@
     import { settings } from '$lib/stores'
 
     import FileSearchResultHeader from './FileSearchResultHeader.svelte'
+    import PreviewButton from './PreviewButton.svelte'
     import RepoStars from './RepoStars.svelte'
     import SearchResult from './SearchResult.svelte'
     import { getSearchResultsContext } from './searchResultsContext'
@@ -97,6 +98,7 @@
         {#if result.repoStars}
             <RepoStars repoStars={result.repoStars} />
         {/if}
+        <PreviewButton {result} />
     </svelte:fragment>
 
     <div bind:this={root} use:observeIntersection on:intersecting={event => (visible = event.detail)} class="matches">

client/web-sveltekit/src/routes/search/FilePathSearchResult.svelte

@@ -5,6 +5,7 @@
     import type { PathMatch } from '$lib/shared'
 
     import FileSearchResultHeader from './FileSearchResultHeader.svelte'
+    import PreviewButton from './PreviewButton.svelte'
     import RepoStars from './RepoStars.svelte'
     import SearchResult from './SearchResult.svelte'
 
@@ -18,5 +19,6 @@
         {#if result.repoStars}
             <RepoStars repoStars={result.repoStars} />
         {/if}
+        <PreviewButton {result} />
     </svelte:fragment>
 </SearchResult>

client/web-sveltekit/src/routes/search/PreviewButton.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import type { ContentMatch, PathMatch, SymbolMatch } from '$lib/shared'
+    import { Button } from '$lib/wildcard'
+
+    import { getSearchResultsContext } from './searchResultsContext'
+
+    export let result: ContentMatch | SymbolMatch | PathMatch
+
+    const searchResultContext = getSearchResultsContext()
+</script>
+
+<div class="preview-button">
+    <Button variant="link" on:click={() => searchResultContext.setPreview(result)}>Preview</Button>
+</div>
+
+<style lang="scss">
+    // Override the padding of the button so it doesn't grow the header.
+    .preview-button :global(button) {
+        padding: 0;
+    }
+</style>