UserMenu refactoring (#2374)

* Refactor out user menu to it's own component with menu slot

* Updated user menu

* Smaller gaps

* Remove py-2 to keep icons nice and square

* Consistent disabled class

* Add tooltip to Namespace switcher. Make bottom namespace nav items better

* Remove tooltip from mobile nav

* Move back navigation item css

Author: Alex-Tideman

pnpm-lock.yaml

@@ -8,7 +8,7 @@
 
 {#if open}
   <div
-    class="flex h-full flex-col flex-col-reverse justify-start gap-8 overflow-auto px-4 py-8"
+    class="flex h-full flex-col flex-col-reverse justify-start gap-6 overflow-auto px-4 py-8"
   >
     {#each linkList as item}
       {#if item.divider}

src/lib/components/bottom-nav-links.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import Input from '$lib/holocene/input/input.svelte';
+  import { lastUsedNamespace } from '$lib/stores/namespaces';
   import type { NamespaceListItem } from '$lib/types/global';
 
   export let open = false;
@@ -30,11 +31,22 @@
     />
     {#each namespaces as { namespace, onClick }}
       <button
-        class="w-full text-left"
+        class="namespace"
+        class:selected={namespace === $lastUsedNamespace}
         on:click|preventDefault|stopPropagation={() => onClick(namespace)}
       >
         {namespace}
       </button>
     {/each}
   </div>
 {/if}
+
+<style lang="postcss">
+  .namespace {
+    @apply w-full cursor-pointer rounded border border-transparent text-left text-sm font-medium hover:surface-interactive-secondary focus-visible:surface-interactive-secondary focus-visible:border-inverse focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/70 dark:focus-visible:border-interactive;
+
+    &.selected {
+      @apply text-brand;
+    }
+  }
+</style>

src/lib/components/bottom-nav-namespaces.svelte

@@ -4,17 +4,13 @@
   import DataEncoderSettings from '$lib/components/data-encoder-settings.svelte';
   import TimezoneSelect from '$lib/components/timezone-select.svelte';
   import NavigationButton from '$lib/holocene/navigation/navigation-button.svelte';
-  import NavigationItem from '$lib/holocene/navigation/navigation-item.svelte';
   import { translate } from '$lib/i18n/translate';
-  import { authUser } from '$lib/stores/auth-user';
   import { dataEncoder } from '$lib/stores/data-encoder';
   import { useDarkMode } from '$lib/utilities/dark-mode';
 
   import { viewDataEncoderSettings } from './data-encoder-settings.svelte';
 
   export let open = false;
-  export let logout: () => void;
-  export let userEmaiLink = '';
 
   $: hasCodecServer = $dataEncoder?.endpoint;
 
@@ -28,7 +24,7 @@
 </script>
 
 {#if open}
-  <div class="flex h-full flex-col justify-end gap-8 overflow-auto px-4 py-8">
+  <div class="flex h-full flex-col justify-end gap-6 overflow-auto px-4 py-8">
     <TimezoneSelect position="left" />
     {#if $dataEncoder.hasError}
       <p class="text-red-400">{translate('data-encoder.codec-server-error')}</p>
@@ -49,22 +45,6 @@
       label={$useDarkMode ? translate('common.night') : translate('common.day')}
       icon={$useDarkMode ? 'moon' : 'sun'}
     />
-    {#if $authUser.accessToken}
-      <div class="border-b-2 border-subtle" />
-      <NavigationItem
-        link={userEmaiLink}
-        disabled={!userEmaiLink}
-        tooltip={$authUser.email}
-        label={$authUser.email}
-        data-testid="email"
-      />
-      <NavigationButton
-        onClick={logout}
-        tooltip={translate('common.log-out')}
-        label={translate('common.log-out')}
-        icon="exit"
-        data-testid="log-out"
-      />
-    {/if}
+    <slot />
   </div>
 {/if}

src/lib/components/bottom-nav-settings.svelte

@@ -19,9 +19,7 @@
   import BottomNavNamespaces from './bottom-nav-namespaces.svelte';
   import BottomNavSettings from './bottom-nav-settings.svelte';
 
-  export let logout: () => void;
   export let namespaceList: NamespaceListItem[] = [];
-  export let userEmaiLink = '';
   export let linkList: NavLinkListItem[];
   export let isCloud = false;
 
@@ -85,7 +83,9 @@
   >
     <BottomNavLinks open={viewLinks} {linkList} />
     <BottomNavNamespaces open={viewNamespaces} {namespaceList} />
-    <BottomNavSettings open={viewSettings} {logout} {userEmaiLink} />
+    <BottomNavSettings open={viewSettings}>
+      <slot />
+    </BottomNavSettings>
   </div>
 {/if}
 <nav

src/lib/components/bottom-nav.svelte

@@ -5,22 +5,13 @@
   import TimezoneSelect from '$lib/components/timezone-select.svelte';
   import Button from '$lib/holocene/button.svelte';
   import Combobox from '$lib/holocene/combobox/combobox.svelte';
-  import {
-    Menu,
-    MenuButton,
-    MenuContainer,
-    MenuItem,
-  } from '$lib/holocene/menu';
   import { translate } from '$lib/i18n/translate';
-  import { authUser } from '$lib/stores/auth-user';
   import { dataEncoder } from '$lib/stores/data-encoder';
   import { lastUsedNamespace } from '$lib/stores/namespaces';
   import type { NamespaceListItem } from '$lib/types/global';
   import { routeForNamespace } from '$lib/utilities/route-for';
 
-  export let logout: () => void;
   export let namespaceList: NamespaceListItem[] = [];
-  export let userEmaiLink = '';
 
   let screenWidth: number;
 
@@ -37,12 +28,6 @@
     (namespaceListItem) => namespaceListItem.namespace === namespace,
   );
 
-  let showProfilePic = true;
-
-  function fixImage() {
-    showProfilePic = false;
-  }
-
   const handleNamespaceSelect = (
     event: CustomEvent<{ value: NamespaceListItem }>,
   ) => {
@@ -53,7 +38,6 @@
 </script>
 
 <svelte:window bind:innerWidth={screenWidth} />
-
 <nav
   class="surface-primary sticky top-0 z-40 flex hidden w-full flex-col items-center justify-end border-b border-subtle p-1 px-4 md:flex md:flex-row md:px-8"
   data-testid="top-nav"
@@ -73,6 +57,7 @@
       optionValueKey="namespace"
       on:change={handleNamespaceSelect}
       minSize={32}
+      actionTooltip={translate('namespaces.go-to-namespace')}
     >
       <Button
         slot="action"
@@ -87,34 +72,6 @@
   <div class="flex items-center gap-2">
     <TimezoneSelect position={screenWidth < 768 ? 'left' : 'right'} />
     <DataEncoderStatus />
-    {#if $authUser.accessToken}
-      <MenuContainer>
-        <MenuButton variant="ghost" hasIndicator controls="user-menu">
-          <img
-            src={$authUser?.picture}
-            alt={$authUser?.profile ?? translate('common.user-profile')}
-            class="h-[24px] w-[24px] cursor-pointer rounded-md"
-            on:error={fixImage}
-            class:hidden={!showProfilePic}
-          />
-          <div
-            class="aspect-square h-full w-[24px] rounded-md bg-blue-200 p-0.5"
-            class:hidden={showProfilePic}
-          >
-            {#if $authUser?.name}
-              <div class="text-center text-sm text-black">
-                {$authUser?.name.trim().charAt(0)}
-              </div>
-            {/if}
-          </div>
-        </MenuButton>
-        <Menu id="user-menu" position="right">
-          <MenuItem href={userEmaiLink} disabled={!userEmaiLink}>
-            {$authUser.email}
-          </MenuItem>
-          <MenuItem on:click={logout}>{translate('common.log-out')}</MenuItem>
-        </Menu>
-      </MenuContainer>
-    {/if}
+    <slot />
   </div>
 </nav>

src/lib/components/top-nav.svelte

@@ -15,6 +15,7 @@
   import type { IconName } from '../icon';
   import Icon from '../icon/icon.svelte';
   import MenuDivider from '../menu/menu-divider.svelte';
+  import Tooltip from '../tooltip.svelte';
 
   type T = $$Generic;
 
@@ -44,6 +45,7 @@
     'data-testid'?: string;
     error?: string;
     valid?: boolean;
+    actionTooltip?: string;
   }
 
   type MultiSelectProps = {
@@ -108,6 +110,8 @@
   export let selectAllLabel = 'Select All';
   export let deselectAllLabel = 'Deselect All';
   export let removeChipLabel = 'Remove Option';
+  export let actionTooltip = '';
+
   export let numberOfItemsSelectedLabel = (count: number) =>
     `${count} option${count > 1 ? 's' : ''} selected`;
 
@@ -392,7 +396,13 @@
     </div>
     {#if $$slots.action}
       <div class="ml-1 flex h-full items-center border-l-2 border-subtle p-0.5">
-        <slot name="action" />
+        {#if actionTooltip}
+          <Tooltip text={actionTooltip} right>
+            <slot name="action" />
+          </Tooltip>
+        {:else}
+          <slot name="action" />
+        {/if}
       </div>
     {/if}
   </div>

src/lib/holocene/combobox/combobox.svelte

@@ -137,6 +137,7 @@
     class:destructive
     class:disabled
     class:selected
+    class:hoverable
     aria-hidden={disabled ? 'true' : 'false'}
     aria-disabled={disabled}
     tabindex={disabled ? -1 : 0}

src/lib/holocene/menu/menu-item.svelte

@@ -3,12 +3,13 @@
 
   import Icon from '../icon/icon.svelte';
 
-  export let onClick: () => void;
+  export let onClick: () => void = () => {};
   export let label: string;
   export let icon: IconName | undefined = undefined;
   export let tooltip = label;
   export let animate = false;
   export let active = false;
+  export let disabled = false;
 </script>
 
 <div
@@ -17,17 +18,24 @@
   on:keypress={onClick}
   tabindex="0"
   data-testid={$$props['data-testid']}
+  class:disabled
   class="relative mb-1 flex items-center whitespace-nowrap rounded-lg p-1 pl-2 text-sm font-medium hover:bg-white hover:text-black group-[.surface-primary]:hover:bg-black group-[.surface-primary]:hover:text-white group-[.surface-primary]:dark:hover:bg-white group-[.surface-primary]:dark:hover:text-black"
 >
-  <div
-    class="flex h-6 w-6 items-center after:absolute after:left-[calc(100%_+_1.5rem)] after:top-0 after:hidden after:h-8 after:items-center after:rounded-md after:bg-slate-800 after:p-1 after:px-2 after:text-xs after:text-white after:content-[attr(data-tooltip)] group-data-[nav=closed]:hover:after:flex"
-    data-tooltip={tooltip}
-  >
-    {#if icon}
+  {#if icon}
+    <div
+      class="flex h-6 w-6 items-center after:absolute after:left-[calc(100%_+_1.5rem)] after:top-0 after:hidden after:h-8 after:items-center after:rounded-md after:bg-slate-800 after:p-1 after:px-2 after:text-xs after:text-white after:content-[attr(data-tooltip)] group-data-[nav=closed]:hover:after:flex"
+      data-tooltip={tooltip}
+    >
       <Icon name={icon} {animate} {active} />
-    {/if}
-  </div>
+    </div>
+  {/if}
   <div class="opacity-0 transition-opacity group-data-[nav=open]:opacity-100">
     {label}
   </div>
 </div>
+
+<style lang="postcss">
+  .disabled {
+    @apply pointer-events-none cursor-not-allowed text-subtle;
+  }
+</style>

src/lib/holocene/navigation/navigation-button.svelte

@@ -37,14 +37,14 @@
     class="mb-1 flex items-center whitespace-nowrap rounded-lg p-1 pl-2 text-sm font-medium"
     class:text-disabled={disabled}
   >
-    <div
-      class="flex h-6 w-6 items-center after:absolute after:left-[calc(100%_+_1.5rem)] after:top-0 after:hidden after:h-8 after:items-center after:rounded-md after:bg-slate-800 after:p-1 after:px-2 after:text-xs after:text-white after:content-[attr(data-tooltip)] group-data-[nav=closed]:hover:after:flex"
-      data-tooltip={tooltip}
-    >
-      {#if icon}
+    {#if icon}
+      <div
+        class="flex h-6 w-6 items-center after:absolute after:left-[calc(100%_+_1.5rem)] after:top-0 after:hidden after:h-8 after:items-center after:rounded-md after:bg-slate-800 after:p-1 after:px-2 after:text-xs after:text-white after:content-[attr(data-tooltip)] group-data-[nav=closed]:hover:after:flex"
+        data-tooltip={tooltip}
+      >
         <Icon name={icon} {animate} />
-      {/if}
-    </div>
+      </div>
+    {/if}
     <div
       class="opacity-0 transition-opacity group-data-[nav=open]:opacity-100"
       class:pointer-events-none={!$navOpen}
@@ -55,12 +55,12 @@
 </div>
 
 <style lang="postcss">
-  a.disabled {
-    @apply pointer-events-none cursor-not-allowed opacity-50;
-  }
-
   a:hover,
   a.active {
     @apply bg-white text-black group-[.surface-primary]:bg-black group-[.surface-primary]:text-white group-[.surface-primary]:dark:bg-white group-[.surface-primary]:dark:text-black;
   }
+
+  a.disabled {
+    @apply pointer-events-none cursor-not-allowed text-subtle;
+  }
 </style>

src/lib/holocene/navigation/navigation-item.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import NavigationButton from '$lib/holocene/navigation/navigation-button.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import { authUser } from '$lib/stores/auth-user';
+
+  export let logout: () => void;
+</script>
+
+{#if $authUser.accessToken}
+  <div class="border-b-2 border-subtle" />
+  <NavigationButton
+    tooltip={$authUser.email}
+    label={$authUser.email}
+    icon="astronaut"
+    data-testid="email"
+    disabled
+  />
+  <NavigationButton
+    onClick={logout}
+    tooltip={translate('common.log-out')}
+    label={translate('common.log-out')}
+    icon="exit"
+    data-testid="log-out"
+  />
+{/if}