fix(svelte): Fix and cleanup compare page (#63928)

I just noticed that the revision pickers on the compare page don't work.
That's because I made a last minute change to rename the parameter but
forgot to acutally update the parameter when constructing the URL.

This also makes two additional changes:
- Remove `{@debug ...}` expression that was accidentally left in (I feel
like Svelte should remove this in prod builds).
- Adds a `display` prop to button group, and the rev picker, which works
the same as in `Button`. Setting `width: 100%` as done previously causes
wrapping on the compare page. I don't think inline elements should be
set to 100% width. But without it the button doesn't stretch in the
sidebar. This new prop allows the caller to influence this behavior.

| Before | After |
|--------|--------|
|
![2024-07-19_00-59](https://github.com/user-attachments/assets/53b9942d-ebf9-4677-8c65-21cd38e78e44)
|
![2024-07-19_01-05](https://github.com/user-attachments/assets/c38ee133-7ee7-4923-ae22-caad9e2472f1)
|

## Test plan

Tested the compare page and verified that the revision picker stretches
in the sidebar.

Author: fkling

client/web-sveltekit/src/lib/Avatar.svelte

@@ -32,7 +32,7 @@
 {#if avatarURL}
     <img src={avatarURL} role="presentation" aria-hidden="true" alt="Avatar of {name}" data-avatar />
 {:else}
-    <div data-avatar title="{name}">
+    <div data-avatar title={name}>
         <span>{getInitials(name)}</span>
     </div>
 {/if}

client/web-sveltekit/src/lib/repo/GitReferencesTable.svelte

@@ -259,7 +259,6 @@
                 display: flex;
                 gap: 0.25rem;
 
-
                 li:not(:first-child)::before {
                     content: '•';
                     padding-right: 0.25rem;

client/web-sveltekit/src/lib/repo/RepositoryRevPicker.svelte

@@ -44,24 +44,27 @@
 
     import Picker from './Picker.svelte'
     import RepositoryRevPickerItem from './RepositoryRevPickerItem.svelte'
+    import type { ComponentProps } from 'svelte'
 
     type $$Props = HTMLButtonAttributes & {
         repoURL: string
         revision?: string
         commitID?: string
         defaultBranch: string
+        display?: ComponentProps<ButtonGroup>['display']
         placement?: Placement
         onSelect?: (revision: string) => void
         getRepositoryTags: (query: string) => PromiseLike<RepositoryTags>
         getRepositoryCommits: (query: string) => PromiseLike<RepositoryCommits>
         getRepositoryBranches: (query: string) => PromiseLike<RepositoryBranches>
     }
 
-    export let repoURL: string
-    export let revision: string | undefined = undefined
-    export let commitID: string | undefined = undefined
-    export let defaultBranch: string
-    export let placement: Placement = 'right-start'
+    export let repoURL: $$Props['repoURL']
+    export let revision: $$Props['revision'] = undefined
+    export let commitID: $$Props['commitID'] = undefined
+    export let defaultBranch: $$Props['defaultBranch']
+    export let placement: $$Props['placement'] = 'right-start'
+    export let display: $$Props['display'] = undefined
     /**
      * Optional handler for revision selection.
      * If not provided, the default handler will replace the revision in the current URL.
@@ -87,7 +90,7 @@
 
 <Popover let:registerTrigger let:registerTarget let:toggle {placement}>
     <span use:registerTarget data-repo-rev-picker-trigger>
-        <ButtonGroup>
+        <ButtonGroup {display}>
             <button use:registerTrigger class="{buttonClass} rev-name" on:click={() => toggle()} {...$$restProps}>
                 @{revisionLabel}
             </button>
@@ -190,11 +193,6 @@
 </Popover>
 
 <style lang="scss">
-    span[data-repo-rev-picker-trigger] > :global(*) {
-        width: 100%;
-        height: 100%;
-    }
-
     .rev-name {
         overflow: hidden;
         white-space: nowrap;

client/web-sveltekit/src/lib/wildcard/Button.module.scss

@@ -408,6 +408,10 @@
         position: relative;
         flex: 1 1 auto;
     }
+
+    &.btn-block {
+        display: flex;
+    }
 }
 
 .btn-group {

client/web-sveltekit/src/lib/wildcard/ButtonGroup.svelte

@@ -1,13 +1,20 @@
 <script lang="ts">
     import classNames from 'classnames'
 
+    import { getButtonDisplay, type BUTTON_DISPLAY } from './Button'
+
     import styles from './Button.module.scss'
 
     const BUTTON_GROUP_DIRECTION = ['vertical', 'horizontal'] as const
 
     export let direction: typeof BUTTON_GROUP_DIRECTION[number] = 'horizontal'
+    export let display: typeof BUTTON_DISPLAY[number] | undefined = undefined
 
-    $: buttonClass = classNames(styles.btnGroup, direction === 'vertical' && styles.btnGroupVertical)
+    $: buttonClass = classNames(
+        styles.btnGroup,
+        direction === 'vertical' && styles.btnGroupVertical,
+        display && getButtonDisplay({ display })
+    )
 </script>
 
 <slot name="custom" role="group" {buttonClass}>

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

@@ -63,6 +63,7 @@
     import { fetchSidebarFileTree } from '$lib/repo/api/tree'
     import HistoryPanel from '$lib/repo/HistoryPanel.svelte'
     import LastCommit from '$lib/repo/LastCommit.svelte'
+    import RepositoryRevPicker from '$lib/repo/RepositoryRevPicker.svelte'
     import { rightSidePanelOpen, fileTreeSidePanel } from '$lib/repo/stores'
     import { isViewportMobile } from '$lib/stores'
     import TabPanel from '$lib/TabPanel.svelte'
@@ -72,8 +73,6 @@
     import { Alert, PanelGroup, Panel, PanelResizeHandle, Button } from '$lib/wildcard'
     import { getButtonClassName } from '$lib/wildcard/Button'
 
-    import RepositoryRevPicker from '$lib/repo/RepositoryRevPicker.svelte'
-
     import type { LayoutData, Snapshot } from './$types'
     import FileTree from './FileTree.svelte'
     import { createFileTreeStore } from './fileTreeStore'
@@ -211,6 +210,7 @@
                 </Tooltip>
 
                 <RepositoryRevPicker
+                    display="block"
                     repoURL={data.repoURL}
                     revision={data.revision}
                     commitID={data.resolvedRevision.commitID}

client/web-sveltekit/src/routes/[...repo=reporev]/-/branches/all/+page.svelte

@@ -60,9 +60,7 @@
                     Unable to load branches: {$branchesQuery.error.message}
                 </Alert>
             {:else if !branches || branches.nodes.length === 0}
-                <Alert variant="info">
-                    No branches found
-                </Alert>
+                <Alert variant="info">No branches found</Alert>
             {/if}
         </div>
     </div>

client/web-sveltekit/src/routes/[...repo=reporev]/-/compare/[...rangeSpec]/+page.svelte

@@ -43,7 +43,7 @@
         goto(
             resolveRoute('/[...repo=reporev]/-/compare/[...rangeSpec]', {
                 repo: $page.params.repo,
-                spec: `${baseRevision}...${headRevision}`,
+                rangeSpec: `${baseRevision}...${headRevision}`,
             })
         )
     }
@@ -184,7 +184,6 @@
             {/if}
 
             {#if !data.error}
-                {@debug diffs}
                 {#if diffs}
                     <ul class="diffs">
                         {#each diffs as node, index (index)}

client/web-sveltekit/src/routes/[...repo=reporev]/-/tags/+page.svelte

@@ -58,9 +58,7 @@
                         Unable to load tags: {$tagsQuery.error.message}
                     </Alert>
                 {:else if !tags || tags.nodes.length === 0}
-                    <Alert variant="info">
-                        No tags found
-                    </Alert>
+                    <Alert variant="info">No tags found</Alert>
                 {/if}
             </div>
         </div>