Don’t use disabled Popover

We stop using the disabled `Popover` component. Instead of using the
disabled component it is simpler to just not use the component at all.
This also avoids issues where the toggle button of the `Popover` was
nested inside the button in `src/App/Header/Authenticate.svelte` which
in turn created problems with `.getByRole` selectors in tests.

Because of this change we can also drop the use of `NodeId` in places
where it simply displays the node ID and avatar.

Signed-off-by: Thomas Scholtes <geigerzaehler@axiom.fm>

src/App/Header/Authenticate.svelte

@@ -4,6 +4,7 @@
   import { closeFocused } from "@app/components/Popover.svelte";
   import { httpdStore } from "@app/lib/httpd";
 
+  import Avatar from "@app/components/Avatar.svelte";
   import Button from "@app/components/Button.svelte";
   import ConnectModal from "@app/modals/ConnectModal.svelte";
   import IconButton from "@app/components/IconButton.svelte";
@@ -24,14 +25,8 @@
     color: var(--color-fill-gray);
     text-align: left;
   }
-  .avatar {
-    height: 1.5rem;
-    color: var(--color-fill-secondary) !important;
+  .peer-info {
     display: flex;
-    gap: 0.5rem;
-    align-items: center;
-    justify-content: center;
-    font-weight: var(--font-weight-regular);
     font-family: var(--font-family-monospace);
   }
   .indicator {
@@ -59,12 +54,11 @@
       on:click={toggle}
       size="large"
       variant="secondary-toggle-on">
-      <div class="avatar">
-        <NodeId
-          large
-          disableTooltip
-          nodeId={$httpdStore.session.publicKey}
-          alias={$httpdStore.session.alias} />
+      <div class="peer-info">
+        <div style:height="1.25rem" style:margin-right="0.5rem">
+          <Avatar nodeId={$httpdStore.session.publicKey} />
+        </div>
+        {$httpdStore.session.alias}
       </div>
     </Button>
 

src/components/HoverPopover.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
   import debounce from "lodash/debounce";
 
-  export let disabled: boolean = false;
-
   export let onShow: () => void = () => {};
   export let stylePopoverPositionLeft: string | undefined = undefined;
   export let stylePopoverPositionTop: string | undefined = undefined;
@@ -11,11 +9,9 @@
   let visible: boolean = false;
 
   const setVisible = debounce((value: boolean) => {
-    if (!disabled) {
-      visible = value;
-      if (visible) {
-        onShow();
-      }
+    visible = value;
+    if (visible) {
+      onShow();
     }
   }, 150);
 </script>

src/components/NodeId.svelte

@@ -7,7 +7,6 @@
 
   export let nodeId: string;
   export let alias: string | undefined = undefined;
-  export let disableTooltip: boolean = false;
   export let large: boolean = false;
 </script>
 
@@ -43,7 +42,6 @@
 </style>
 
 <HoverPopover
-  disabled={disableTooltip}
   stylePopoverPositionLeft="-4.5rem"
   stylePopoverPadding="0.5rem 0.5rem 0.5rem 0.75rem"
   stylePopoverPositionTop="-4.5rem">

src/views/projects/Source/PeerSelector.svelte

@@ -14,6 +14,7 @@
   import IconSmall from "@app/components/IconSmall.svelte";
   import Link from "@app/components/Link.svelte";
   import Button from "@app/components/Button.svelte";
+  import Avatar from "@app/components/Avatar.svelte";
 
   export let peers: Array<{ remote: Remote; selected: boolean; route: Route }>;
 
@@ -60,10 +61,10 @@
         <DropdownListItem
           selected={item.selected}
           title={createTitle(item.remote)}>
-          <NodeId
-            disableTooltip
-            nodeId={item.remote.id}
-            alias={item.remote.alias} />
+          <Avatar nodeId={item.remote.id} />
+          <span style:font-family="var(--font-family-monospace)">
+            {item.remote.alias || formatNodeId(item.remote.id)}
+          </span>
           {#if item.remote.delegate}
             <div style:color="var(--color-fill-secondary)">
               <Badge size="tiny" variant="secondary">delegate</Badge>