refac: Tooltips, sidebar toggles

svelte-app/package.json

@@ -21,6 +21,7 @@
     "lint": "pnpm format && pnpm eslint --fix \"./src/**/*.{ts,svelte}\" \"./types/**/*.ts\""
   },
   "devDependencies": {
+    "@floating-ui/dom": "^1.6.11",
     "@playwright/test": "1.44.1",
     "@portabletext/svelte": "2.1.11",
     "@portabletext/toolkit": "2.0.15",

svelte-app/src/components/code-block.svelte

@@ -83,10 +83,11 @@
 </script>
 
 <div
-  class="relative mx-7 my-5 overflow-hidden rounded-lg bg-neutral-200/50 transition-colors dark:bg-neutral-700"
+  class="mx-7 my-5 rounded-lg bg-neutral-200/50 transition-colors dark:bg-neutral-700"
   role="group"
   aria-label={$t('Code block')}
   aria-labelledby={filename ? `${id}-filename` : undefined}
+  style="content-visibility: auto"
 >
   {#if filename}
     <div
@@ -99,7 +100,7 @@
     <Divider margin="my-0"></Divider>
   {/if}
 
-  <Tooltip text={$t('Copy to clipboard')} position="top">
+  <Tooltip content={$t('Copy to clipboard')} placement="left">
     <button
       class="focus-outline-sm absolute right-0 z-[2] mr-2.5 mt-2 cursor-pointer rounded-md px-2 py-1.5 font-mono text-xs text-dark/80 transition-colors hover:bg-neutral-300/50 hover:text-dark focus-visible:bg-neutral-300/50 focus-visible:text-dark dark:text-light/80 hover:dark:bg-neutral-500 hover:dark:text-light focus-visible:dark:bg-neutral-500 focus-visible:dark:text-light"
       class:top-1={!filename}

svelte-app/src/components/controls/base-toggle.svelte

@@ -7,13 +7,18 @@
     click: MouseEvent | KeyboardEvent;
   }>();
 
+  type Option = {
+    label: string;
+    value: string;
+    selected: boolean;
+  };
+
   // eslint-disable-next-line @typescript-eslint/ban-types
-  export let icon: typeof SvelteComponent<{}>,
-    options: { label: string; value: string; selected: boolean }[];
+  export let icon: typeof SvelteComponent<{}>, options: [Option, Option];
 </script>
 
 <button
-  class="focus-outline group flex h-10 flex-1 flex-row items-center rounded-lg py-1.5 pl-4 pr-0 text-sm"
+  class="focus-outline group flex flex-1 flex-row items-center justify-center gap-x-3 rounded-lg bg-neutral-200/50 px-4 py-2.5 text-center text-sm text-neutral-800 transition-colors hover:bg-neutral-200 focus-visible:bg-neutral-200 dark:bg-neutral-700 dark:text-neutral-100 dark:hover:bg-neutral-800 dark:focus-visible:bg-neutral-800"
   tabindex="0"
   on:click={(e) => dispatch('click', e)}
   on:mouseup={(e) => {
@@ -25,29 +30,10 @@
   aria-label={$$props['aria-label']}
 >
   <svelte:component this={icon} />
-  <div
-    class="relative ml-2.5 mr-1.5 flex h-full w-full flex-1 flex-row items-center justify-around text-neutral-800 transition-colors dark:text-neutral-100"
+  <span class="block group-hover:hidden group-focus-visible:hidden"
+    >{options.find((option) => option.selected)?.label}</span
+  >
+  <span class="hidden group-hover:block group-focus-visible:block"
+    >{options.find((option) => !option.selected)?.label}</span
   >
-    <span class="peer/0 z-10 block flex-1" aria-selected={options[0].selected}>
-      <span class="mx-auto block w-full">
-        {options[0].label}
-      </span>
-    </span>
-    <span class="peer/1 z-10 block flex-1" aria-selected={options[1].selected}>
-      <span class="mx-auto block w-full">
-        {options[1].label}
-      </span>
-    </span>
-    <span
-      class="slider absolute bottom-0 left-0 top-0 z-0 block w-[45%] rounded-md bg-neutral-200/50 group-hover:bg-neutral-200 group-focus:bg-neutral-200 peer-aria-selected/0:translate-x-[6%] peer-aria-selected/1:translate-x-[116%] group-focus-within:peer-aria-selected/0:translate-x-[12%] group-focus-within:peer-aria-selected/1:translate-x-[110%] group-hover:peer-aria-selected/0:translate-x-[11%] group-hover:peer-aria-selected/1:translate-x-[110%] dark:bg-neutral-800 group-hover:dark:bg-neutral-700 group-focus:dark:bg-neutral-700"
-    ></span>
-  </div>
 </button>
-
-<style lang="scss">
-  .slider {
-    transition:
-      background-color 150ms ease,
-      transform 250ms cubic-bezier(0.47, 1.64, 0.41, 0.8);
-  }
-</style>

svelte-app/src/components/document/content/header.svelte

@@ -76,7 +76,7 @@
   class="flex w-full flex-row flex-wrap justify-between gap-2 p-2 text-sm text-neutral-700 dark:text-neutral-100"
 >
   <div class="flex flex-row gap-2">
-    <Tooltip text={$formatDate(data.date, 'days') ?? $t('Unknown date')}>
+    <Tooltip content={$formatDate(data.date, 'days') ?? $t('Unknown date')}>
       <p
         class="cursor-default rounded-lg bg-neutral-200/50 px-2.5 py-2 transition-colors dark:bg-neutral-700"
         aria-label="Published date"
@@ -85,7 +85,7 @@
       </p>
     </Tooltip>
     <Tooltip
-      text={$t('{length} words', {
+      content={$t('{length} words', {
         length: (data.estimatedWordCount ?? 0).toLocaleString($currentLang)
       })}
     >

svelte-app/src/components/experiments/gol.svelte

@@ -136,7 +136,7 @@
     <Divider></Divider>
   </header>
 
-  <Tooltip text={running ? 'Pause' : 'Resume'}>
+  <Tooltip content={running ? 'Pause' : 'Resume'}>
     <button
       class="focus-outline absolute right-4 top-4 rounded-lg p-2 font-mono text-sm transition-colors hover:bg-violet-100/80 hover:text-orange-light/90 focus-visible:bg-violet-100/80 focus-visible:text-orange-light/90 dark:hover:bg-violet-700/80 dark:focus-visible:bg-violet-700/80"
       on:click={running ? stopGame : startGame}

svelte-app/src/components/experiments/mag-cursor.svelte

@@ -35,8 +35,8 @@
       <div class="flex flex-row gap-x-6">
         <CursorTarget distance={40} let:active let:offset>
           <Tooltip
-            position="top"
-            text={useOffset ? "Disable 'pulling' targets" : "Enable 'pulling' targets"}
+            placement="top"
+            content={useOffset ? "Disable 'pulling' targets" : "Enable 'pulling' targets"}
           >
             <button
               class="-m-2 h-fit w-fit cursor-none p-2 font-mono text-sm hover:text-orange-light/90 focus-visible:text-orange-light/90 {active

svelte-app/src/components/images/image.svelte

@@ -143,10 +143,10 @@
 
 <ImageModal bind:dialog bind:show={showImageModal}>
   <img
-    class="mx-auto h-full select-none rounded-md"
+    class="mx-auto box-border max-h-full max-w-full select-none rounded-md"
     src={fullSrc}
     alt={_key}
-    style="max-width: {imgDimensions.width}px; max-height: {imgDimensions.height}px; aspect-ratio: {imgDimensions.width} / {imgDimensions.height};"
+    style="object-fit: contain; aspect-ratio: {imgDimensions.width} / {imgDimensions.height};"
     in:receive={{ key: _key, duration: BASE_ANIMATION_DURATION }}
     out:send={{ key: _key, duration: BASE_ANIMATION_DURATION }}
   />

svelte-app/src/components/link.svelte

@@ -5,7 +5,9 @@
 
   import Tooltip from '$components/tooltips/tooltip.svelte';
 
-  export let tooltipPosition: 'top' | 'bottom' = 'bottom',
+  import type { Placement } from '@floating-ui/dom';
+
+  export let tooltipPlacement: Placement = 'bottom',
     tooltipText: string | undefined = undefined,
     newtab = false;
 
@@ -28,13 +30,12 @@
 </script>
 
 <Tooltip
-  text={tooltipText ?? isMailLink
+  content={tooltipText ?? isMailLink
     ? $t('Copy {value}', { value: `'${mailAddress}'` })
     : link && link.length > 50
       ? `${link.slice(0, 50 - 3)}...`
       : link ?? $t('Visit')}
-  position={tooltipPosition}
-  inDelay={500}
+  placement={tooltipPlacement}
 >
   <svelte:element
     this={type}

svelte-app/src/components/portable-text/footnote.svelte

@@ -38,7 +38,7 @@
 
 <span>
   <slot />&nbsp;
-  <Tooltip text={$t('Go to footnote')}>
+  <Tooltip content={$t('Go to footnote')}>
     <sup
       ><a
         href={`#note-${portableText.value._key}`}

svelte-app/src/components/portable-text/portable-text.svelte

@@ -147,7 +147,7 @@
               <li class="list-item">
                 <span class="inline-flex flex-row items-start break-all">
                   <svelte:self text={note.note} plaintext />
-                  <Tooltip text={$t('Go to footnote source')} position="top">
+                  <Tooltip content={$t('Go to footnote source')} position="top">
                     <a
                       class="focus-outline-sm group ml-2 rounded-xs px-2 py-1 text-sm transition-colors hover:bg-neutral-light dark:hover:bg-neutral-dark"
                       href={`#src-${note._key}`}

svelte-app/src/components/sidebar.svelte

@@ -12,8 +12,8 @@
   import GlobeAsiaAustraliaSmall from '$components/icons/globe-asia-australia-small.svelte';
   import BaseContainer from '$components/layouts/base-container.svelte';
   import Link from '$components/link.svelte';
-  import HeaderLink from '$components/nav/header-link.svelte';
   import SidebarBlock from '$components/sidebar/sidebar-block.svelte';
+  import SidebarLink from '$components/sidebar/sidebar-link.svelte';
   import ToruWidget from '$components/sidebar/toru.svelte';
 
   import type { ToruData } from '$components/sidebar/toru';
@@ -34,8 +34,8 @@
 
   $: pfp =
     $theme === APP_THEMES.DARK
-      ? '/assets/avi/standard.png'
-      : '/assets/avi/line_sunglases.png';
+      ? '/assets/avi/standard_transparent.png'
+      : '/assets/avi/line_sunglasses_transparent.png';
 </script>
 
 <div
@@ -46,7 +46,7 @@
   >
     <div class="flex w-full flex-shrink-0 flex-row items-center justify-start gap-x-4">
       <img
-        class="p-0d aspect-square h-14 w-14 flex-shrink-0 select-none rounded-lg bg-orange-light/60"
+        class="aspect-square h-14 w-14 flex-shrink-0 select-none rounded-lg bg-neutral-300/50 p-0 dark:bg-neutral-100/50"
         src={pfp}
         alt="kio.dev"
       />
@@ -86,7 +86,7 @@
                 class="mt-px group-hover:hidden group-focus-visible:hidden"
               />
               <EnvelopeOpenSmall
-                class="mt-px hidden group-hover:block group-focus-visible:block"
+                class="hidden group-hover:block group-focus-visible:block"
               />
             {:else}
               <GlobeAmericasSmall
@@ -116,15 +116,15 @@
       >
         {#each NAV_LINKS as link}
           <li class="h-fit w-full">
-            <HeaderLink {link} />
+            <SidebarLink {link} />
           </li>
         {/each}
       </ul>
     </nav>
   </BaseContainer>
 
   <BaseContainer
-    class="group/container order-1 flex flex-row gap-2 p-2 group-first/container:border-r-2 lg:order-2 print:hidden"
+    class="group/container order-1 flex flex-row gap-2 p-2 px-3 group-first/container:border-r-2 lg:order-2 print:hidden"
   >
     <LangToggle />
     <ThemeToggle />
@@ -138,12 +138,12 @@
 
   {#if APP_VERSION?.length}
     <div
-      class="order-5 mt-auto flex w-full flex-row items-center justify-center gap-x-2 p-2 text-sm"
+      class="order-5 mt-auto hidden w-full flex-row items-center justify-center gap-x-2 p-2 text-sm lg:flex"
     >
       <span class="text-neutral-600/30 dark:text-neutral-200/40"
         ><a
           href={`${BASE_GIT_URL}/commit/${APP_VERSION}`}
-          class="font-medium hover:underline"
+          class="focus-outline-sm rounded-xs font-medium hover:underline"
           target="_blank"
           rel="noopener noreferrer">#{APP_VERSION.slice(0, 6)}</a
         ></span