instantiate dummy popup

wip

minimize divs and simplify layout/css

wip fetching data not working

hacky solution to the fetching problem

design tweaks

css tweaks

popover stays visible when cursor moves toward or hovers over

design tweaks and performance improvement

fetch topics, not tags

add useDefaultBorder option to Popover; optimize RepoPopover layout/style

Popover content should control the border, not the popover itself

lint and make changes from review

use badges

fetch repo popover data from RepoRev component

remove interpunct between commit message and abbreviatedOID since it is not in the design spec

remove unused imports

lint

remove comment

revert popover changes

simplify repo popover component

remove duplicate border radius

simplify and link to commit

fix data loading behavior

do not display empty popover

add comment

add more comments

add delay

drop divider, fix alignmet

fix small

fix spacing and colors

delete redundant row nowrap

appease linter

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

@@ -1,8 +1,8 @@
 <script lang="ts">
     import type { Placement } from '@floating-ui/dom'
+    import type { Action } from 'svelte/action'
 
     import { popover, onClickOutside, portal } from './dom'
-    import type { Action } from 'svelte/action'
 
     export let placement: Placement = 'bottom'
     /**
@@ -105,9 +105,19 @@
         font-size: 0.875rem;
         background-clip: padding-box;
         background-color: var(--dropdown-bg);
-        border: 1px solid var(--dropdown-border-color);
-        border-radius: var(--popover-border-radius);
         color: var(--body-color);
         box-shadow: var(--popover-shadow);
+
+        border: 1px solid var(--dropdown-border-color);
+        border-radius: var(--popover-border-radius);
+        // Ensure child elements do not overflow the border radius
+        overflow: hidden;
+
+        // We always display the popover on hover, but there may not be anything
+        // inside until something we load something. This ensures we do not
+        // render an empty border if there is nothing to show.
+        &:empty {
+            display: none;
+        }
     }
 </style>

client/web-sveltekit/src/lib/repo/RepoPopover/RepoPopover.gql

@@ -1,31 +1,33 @@
-fragment RepoPopoverFields on Repository {
+query RepoPopoverQuery($repoName: String!){
+    repository(name: $repoName) {
+        ...RepoPopoverFragment
+    }
+}
+
+fragment RepoPopoverFragment on Repository {
     name
     description
     stars
     isPrivate
-    language
+    topics
     externalServices {
         totalCount
         nodes {
             kind
         }
     }
-    tags {
-        nodes {
-            name
-        }
-    }
 
     commit(rev: "HEAD") {
         id
-        oid
-        subject
-        canonicalURL
-        author {
-            date
-            person {
-                ...Avatar_Person
+            oid
+            abbreviatedOID
+            subject
+            canonicalURL
+            author {
+                date
+                    person {
+                        ...Avatar_Person
+                    }
             }
-        }
     }
 }

client/web-sveltekit/src/lib/repo/RepoPopover/RepoPopover.stories.svelte

@@ -2,7 +2,7 @@
     import { faker } from '@faker-js/faker'
     import { Story } from '@storybook/addon-svelte-csf'
 
-    import { type RepoPopoverFields, ExternalServiceKind } from '$testing/graphql-type-mocks'
+    import { type RepoPopoverFragment, ExternalServiceKind } from '$testing/graphql-type-mocks'
 
     import RepoPopover from './RepoPopover.svelte'
 
@@ -13,18 +13,18 @@
 
 <script lang="ts">
     faker.seed(1)
-    let repo: RepoPopoverFields = {
+    let repo: RepoPopoverFragment = {
         name: `${faker.lorem.word()} / ${faker.lorem.word()}`,
         description: faker.lorem.sentence(),
         stars: faker.datatype.number(),
-        tags: {
-            nodes: [
-                { name: faker.lorem.word() },
-                { name: faker.lorem.word() },
-                { name: faker.lorem.word() },
-                { name: faker.lorem.word() },
-            ],
-        },
+        topics: [
+            faker.lorem.word(),
+            faker.lorem.word(),
+            faker.lorem.word(),
+            faker.lorem.word(),
+            faker.lorem.word(),
+            faker.lorem.word(),
+        ],
         isPrivate: false,
         language: 'Go',
         externalServices: {
@@ -40,9 +40,11 @@
             subject: faker.lorem.sentence(),
             canonicalURL: faker.internet.url(),
             oid: '7b4d3ad230d9078a70219f2befa1be1fe00377a0',
+            abbreviatedOID: '7b4d3ad',
             author: {
                 date: new Date().toISOString(),
                 person: {
+                    __typename: 'Person',
                     displayName: `${faker.person.firstName()} ${faker.person.lastName()}`,
                     avatarURL: faker.internet.avatar(),
                     name: faker.internet.userName(),
@@ -54,9 +56,9 @@
 
 <Story name="Default">
     <h2>With header</h2>
-    <RepoPopover {repo} withHeader />
+    <RepoPopover data={repo} withHeader />
     <br />
     <br />
     <h2>Without header</h2>
-    <RepoPopover {repo} />
+    <RepoPopover data={repo} />
 </Story>