From 7e2e51a079b898a8ce83247bde60edcc05fce98d Mon Sep 17 00:00:00 2001 From: Felix Kling Date: Fri, 22 Dec 2023 12:53:02 +0100 Subject: [PATCH] svelte: Add search query input to repo pages (#59185) This PR adds the search query input to the repo page header. I used a similar solution as GitHub, which renders a button that looks a bit like an input and opens a dialog with the real input. The input is prepopulated with a `repo:` filter for the current input. It has a tab/focus trap and closes on escape. Before settling on this solution I tried various other approaches: - Directly render the input in the header and make it expand on focus. That caused strange text selection because mousdown would expand the input and mouseup would happen at a different place in the input, causing text selection. - Using the `` element. It has some default styles/behavior that interfered with what I wanted to do. - I wanted to use the newly added `openFocus` option in `createDialog` to disable melt's autofocus behavior, but that didn't work. Happy to iterate on the design of the button, or on the behavior in general. I decided against introducing keyboard shortcuts in this PR, I think that warrants it's own PR. --- client/web-sveltekit/package.json | 2 +- client/web-sveltekit/src/lib/search/state.ts | 2 +- .../routes/[...repo=reporev]/+layout.svelte | 2 + .../[...repo=reporev]/RepoSearchInput.svelte | 80 +++++++++++++++++++ pnpm-lock.yaml | 22 ++++- 5 files changed, 102 insertions(+), 6 deletions(-) create mode 100644 client/web-sveltekit/src/routes/[...repo=reporev]/RepoSearchInput.svelte diff --git a/client/web-sveltekit/package.json b/client/web-sveltekit/package.json index 9e26b282f6d..b96401826ea 100644 --- a/client/web-sveltekit/package.json +++ b/client/web-sveltekit/package.json @@ -63,7 +63,7 @@ }, "type": "module", "dependencies": { - "@melt-ui/svelte": "^0.34.3", + "@melt-ui/svelte": "^0.66.2", "@popperjs/core": "^2.11.8", "@remix-run/router": "~1.3.3", "@sourcegraph/branded": "workspace:*", diff --git a/client/web-sveltekit/src/lib/search/state.ts b/client/web-sveltekit/src/lib/search/state.ts index 421b3d3968a..3909c50b79e 100644 --- a/client/web-sveltekit/src/lib/search/state.ts +++ b/client/web-sveltekit/src/lib/search/state.ts @@ -150,7 +150,7 @@ export function getQueryURL( queryState.searchMode ) - return 'search?' + searchQueryParameter + return '/search?' + searchQueryParameter } export function submitSearch( diff --git a/client/web-sveltekit/src/routes/[...repo=reporev]/+layout.svelte b/client/web-sveltekit/src/routes/[...repo=reporev]/+layout.svelte index 042791b1228..664def0d67e 100644 --- a/client/web-sveltekit/src/routes/[...repo=reporev]/+layout.svelte +++ b/client/web-sveltekit/src/routes/[...repo=reporev]/+layout.svelte @@ -18,6 +18,7 @@ import { computeFit } from '$lib/dom' import { writable } from 'svelte/store' import { getButtonClassName } from '@sourcegraph/wildcard' + import RepoSearchInput from './RepoSearchInput.svelte' export let data: LayoutData @@ -100,6 +101,7 @@ {/each} + diff --git a/client/web-sveltekit/src/routes/[...repo=reporev]/RepoSearchInput.svelte b/client/web-sveltekit/src/routes/[...repo=reporev]/RepoSearchInput.svelte new file mode 100644 index 00000000000..43a6026cfc2 --- /dev/null +++ b/client/web-sveltekit/src/routes/[...repo=reporev]/RepoSearchInput.svelte @@ -0,0 +1,80 @@ + + +{#if $open} +
+
+
+ +
+
+{:else} + +{/if} + + diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e7dcc47d6e9..9318be95f5e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1385,8 +1385,8 @@ importers: client/web-sveltekit: dependencies: '@melt-ui/svelte': - specifier: ^0.34.3 - version: 0.34.3(svelte@4.1.1) + specifier: ^0.66.2 + version: 0.66.2(svelte@4.1.1) '@popperjs/core': specifier: ^2.11.8 version: 2.11.8 @@ -5090,6 +5090,12 @@ packages: resolution: {integrity: sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==} dev: true + /@internationalized/date@3.5.1: + resolution: {integrity: sha512-LUQIfwU9e+Fmutc/DpRTGXSdgYZLBegi4wygCWDSVmUdLTaMHsQyASDiJtREwanwKuQLq0hY76fCJ9J/9I2xOQ==} + dependencies: + '@swc/helpers': 0.5.3 + dev: false + /@isaacs/cliui@8.0.2: resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==} engines: {node: '>=12'} @@ -5371,13 +5377,15 @@ packages: react: 18.2.0 dev: true - /@melt-ui/svelte@0.34.3(svelte@4.1.1): - resolution: {integrity: sha512-qJE0+7+8Q8h1UhdqpAWWSJx3vXSjlgAKkfjLC5wn6dtVY70Jkb6Hiu726isZ2yNbPilBmbaLrOzfoMTRurjKXw==} + /@melt-ui/svelte@0.66.2(svelte@4.1.1): + resolution: {integrity: sha512-ufIhgOYP11A/G3AvW+2Qw74UGudMBJQ2wK+sETpU51VkC63/5D2sctKgXzGl0OUEJBlPHku6LRSry9rIeAVkNw==} peerDependencies: svelte: '>=3 <5' dependencies: '@floating-ui/core': 1.4.1 '@floating-ui/dom': 1.5.1 + '@internationalized/date': 3.5.1 + dequal: 2.0.3 focus-trap: 7.5.2 nanoid: 4.0.2 svelte: 4.1.1 @@ -10579,6 +10587,12 @@ packages: - supports-color dev: true + /@swc/helpers@0.5.3: + resolution: {integrity: sha512-FaruWX6KdudYloq1AHD/4nU+UsMTdNE8CKyrseXWEcgjDAbvkwJg2QGPAnfIJLIWsjZOSPLOAykK6fuYp4vp4A==} + dependencies: + tslib: 2.1.0 + dev: false + /@szmarczak/http-timer@1.1.2: resolution: {integrity: sha512-XIB2XbzHTN6ieIjfIMV9hlVcfPU26s2vafYWQcZHWXHOxiaRZYEDKEwdl129Zyg50+foYV2jCgtrqSA6qNuNSA==} engines: {node: '>=6'}