From 85c3c3a144dba1eb05217547acdfcc6f0ec01401 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Tue, 31 Dec 2024 14:10:39 +0100
Subject: [PATCH] more components

---
 src/lib/components/eventModal.svelte     | 24 +++++-----
 src/lib/components/trim.svelte           |  9 +---
 src/lib/elements/selectSearchItem.svelte | 25 +++++------
 src/lib/layout/containerButton.svelte    | 11 ++---
 src/lib/layout/navigation.svelte         | 57 +++++++++++-------------
 5 files changed, 57 insertions(+), 69 deletions(-)

diff --git a/src/lib/components/eventModal.svelte b/src/lib/components/eventModal.svelte
index 1b20dbb36..ee9cd11d0 100644
--- a/src/lib/components/eventModal.svelte
+++ b/src/lib/components/eventModal.svelte
@@ -13,7 +13,7 @@
         type EventResource,
         type EventService
     } from '$lib/constants';
-    import { tooltip } from '$lib/actions/tooltip';
+    import { Tooltip } from '@appwrite.io/pink-svelte';
     import { trackEvent } from '$lib/actions/analytics';
 
     // Props
@@ -352,16 +352,18 @@
             </div>
             <div class="options-list">
                 {#key copyParent}
-                    <button
-                        on:click={(e) => {
-                            customInput = inputValue;
-                            toggleShowInput(e);
-                        }}
-                        use:tooltip={{ content: 'Edit event', appendTo: copyParent }}
-                        class="options-list-button"
-                        aria-label="edit event">
-                        <span class="icon-pencil" aria-hidden="true" />
-                    </button>
+                    <Tooltip>
+                        <button
+                            on:click={(e) => {
+                                customInput = inputValue;
+                                toggleShowInput(e);
+                            }}
+                            class="options-list-button"
+                            aria-label="edit event">
+                            <span class="icon-pencil" aria-hidden="true" />
+                        </button>
+                        <div slot="tooltip">Edit event</div>
+                    </Tooltip>
                     <button
                         disabled={!inputValue}
                         class="options-list-button"
diff --git a/src/lib/components/trim.svelte b/src/lib/components/trim.svelte
index eb001c384..9a260832d 100644
--- a/src/lib/components/trim.svelte
+++ b/src/lib/components/trim.svelte
@@ -17,14 +17,7 @@
 
 <svelte:window on:resize={throttle(onResize, 250)} />
 
-<span
-    class={`text ${alternativeTrim ? 'u-trim-1' : 'u-trim'}`}
-    bind:this={container}
-    use:tooltip={{
-        disabled: !showTooltip,
-        content: container?.innerText ?? undefined,
-        maxWidth: '30rem'
-    }}>
+<span class={`text ${alternativeTrim ? 'u-trim-1' : 'u-trim'}`} bind:this={container}>
     <Tooltip inline={false}
         ><span class="text u-trim"><slot /></span><span slot="tooltip"
             >{container?.innerText ?? undefined}</span
diff --git a/src/lib/elements/selectSearchItem.svelte b/src/lib/elements/selectSearchItem.svelte
index 1317a4f15..0de9eed6a 100644
--- a/src/lib/elements/selectSearchItem.svelte
+++ b/src/lib/elements/selectSearchItem.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { tooltip } from '$lib/actions/tooltip';
+    import { Tooltip } from '@appwrite.io/pink-svelte';
 
     export let data: string[] = [];
 </script>
@@ -11,17 +11,16 @@
         <slot />
     </span>
     {#if data?.length}
-        <span
-            class="u-flex u-flex-1 u-trim-1 u-gap-4"
-            use:tooltip={{
-                content: data.map((e) => e ?? 'null').join(' | ')
-            }}>
-            {#each data as item, i}
-                {#if i}
-                    <span class="u-text-color-gray">|</span>
-                {/if}
-                <span class="text" style="white-space: nowrap" data-private>{item}</span>
-            {/each}
-        </span>
+        <Tooltip>
+            <span class="u-flex u-flex-1 u-trim-1 u-gap-4">
+                {#each data as item, i}
+                    {#if i}
+                        <span class="u-text-color-gray">|</span>
+                    {/if}
+                    <span class="text" style="white-space: nowrap" data-private>{item}</span>
+                {/each}
+            </span>
+            <div slot="tooltip">{data.map((e) => e ?? 'null').join(' | ')}</div>
+        </Tooltip>
     {/if}
 </div>
diff --git a/src/lib/layout/containerButton.svelte b/src/lib/layout/containerButton.svelte
index 631194688..8e288ee9b 100644
--- a/src/lib/layout/containerButton.svelte
+++ b/src/lib/layout/containerButton.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-    import { tooltip } from '$lib/actions/tooltip';
     import { BillingPlan } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
     import { tierToPlan } from '$lib/stores/billing';
     import { organization } from '$lib/stores/organization';
+    import { Tooltip } from '@appwrite.io/pink-svelte';
 
     export let title: string;
     export let tooltipContent =
@@ -22,11 +22,7 @@
     export let buttonType: 'primary' | 'secondary' | 'text' = 'primary';
 </script>
 
-<div
-    use:tooltip={{
-        content: tooltipContent,
-        disabled: !disabled
-    }}>
+<Tooltip {disabled}>
     <Button
         size="s"
         text={buttonType === 'text'}
@@ -40,4 +36,5 @@
         {/if}
         <span class="text">{buttonText}</span>
     </Button>
-</div>
+    <div slot="tooltip">{tooltipContent}</div>
+</Tooltip>
diff --git a/src/lib/layout/navigation.svelte b/src/lib/layout/navigation.svelte
index d48428f03..c275f1c7f 100644
--- a/src/lib/layout/navigation.svelte
+++ b/src/lib/layout/navigation.svelte
@@ -15,6 +15,7 @@
     import { showSupportModal } from '$routes/(console)/wizard/support/store';
     import { getContext } from 'svelte';
     import type { Writable } from 'svelte/store';
+    import { Tooltip } from '@appwrite.io/pink-svelte';
 
     export let isOpen = false;
 
@@ -63,38 +64,34 @@
                 <section class="drop-section">
                     <ul class="drop-list">
                         <li class="drop-list-item">
-                            <a
-                                class="drop-button"
-                                class:is-selected={$page.url.pathname.startsWith(
-                                    `${projectPath}/overview`
-                                )}
-                                on:click={() => trackEvent('click_menu_overview')}
-                                href={projectPath}
-                                use:tooltip={{
-                                    content: 'Overview',
-                                    placement: 'right',
-                                    disabled: !narrow
-                                }}>
-                                <span class="icon-chart-bar" aria-hidden="true" />
-                                <span class="text">Overview</span>
-                            </a>
+                            <Tooltip placement="right" disabled={!narrow} inline={false}>
+                                <a
+                                    class="drop-button"
+                                    class:is-selected={$page.url.pathname.startsWith(
+                                        `${projectPath}/overview`
+                                    )}
+                                    on:click={() => trackEvent('click_menu_overview')}
+                                    href={projectPath}>
+                                    <span class="icon-chart-bar" aria-hidden="true" />
+                                    <span class="text">Overview</span>
+                                </a>
+                                <div slot="tooltip">Overview</div>
+                            </Tooltip>
                         </li>
                         <li class="drop-list-item">
-                            <a
-                                class="drop-button"
-                                class:is-selected={$page.url.pathname.startsWith(
-                                    `${projectPath}/auth`
-                                )}
-                                on:click={() => trackEvent('click_menu_auth')}
-                                href={`${projectPath}/auth`}
-                                use:tooltip={{
-                                    content: 'Auth',
-                                    placement: 'right',
-                                    disabled: !narrow
-                                }}>
-                                <span class="icon-user-group" aria-hidden="true" />
-                                <span class="text">Auth</span>
-                            </a>
+                            <Tooltip placement="right" disabled={!narrow} inline={false}>
+                                <a
+                                    class="drop-button"
+                                    class:is-selected={$page.url.pathname.startsWith(
+                                        `${projectPath}/auth`
+                                    )}
+                                    on:click={() => trackEvent('click_menu_auth')}
+                                    href={`${projectPath}/auth`}>
+                                    <span class="icon-user-group" aria-hidden="true" />
+                                    <span class="text">Auth</span>
+                                </a>
+                                <div slot="tooltip">Auth</div>
+                            </Tooltip>
                         </li>
                         {#if $canSeeDatabases}
                             <li class="drop-list-item">