From 843bafd943de5789730fdac3037c8c3e36994562 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 31 Oct 2022 12:07:51 +0100
Subject: [PATCH 1/3] feat: hover list, row permission hover

---
 src/lib/components/dropList.svelte        |  10 +-
 src/lib/components/hoverList.svelte       | 141 ++++++++++++++++++++++
 src/lib/components/index.ts               |   2 +
 src/lib/components/output.svelte          |  17 +++
 src/lib/components/permissions/row.svelte |  52 +++++++-
 tests/unit/components/dropList.test.ts    |  10 --
 6 files changed, 220 insertions(+), 12 deletions(-)
 create mode 100644 src/lib/components/hoverList.svelte
 create mode 100644 src/lib/components/output.svelte

diff --git a/src/lib/components/dropList.svelte b/src/lib/components/dropList.svelte
index 2cf75c7da..393765cf8 100644
--- a/src/lib/components/dropList.svelte
+++ b/src/lib/components/dropList.svelte
@@ -75,7 +75,15 @@
     });
 
     const onBlur = (event: MouseEvent) => {
-        if (show && !(event.target === element || element.contains(event.target as Node))) {
+        if (
+            show &&
+            !(
+                event.target === element ||
+                element.contains(event.target as Node) ||
+                event.target === tooltip ||
+                tooltip.contains(event.target as Node)
+            )
+        ) {
             show = false;
         }
     };
diff --git a/src/lib/components/hoverList.svelte b/src/lib/components/hoverList.svelte
new file mode 100644
index 000000000..c0fb4bab3
--- /dev/null
+++ b/src/lib/components/hoverList.svelte
@@ -0,0 +1,141 @@
+<script lang="ts">
+    import { createPopper, type Instance } from '@popperjs/core';
+    import { onDestroy, onMount } from 'svelte';
+
+    export let show = false;
+    export let noArrow = false;
+    export let placement: Placement = 'bottom-start';
+    export let scrollable = false;
+    export let childStart = false;
+
+    type Placement = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+    let element: HTMLDivElement;
+    let tooltip: HTMLDivElement;
+    let instance: Instance;
+    let currentArrow: Placement;
+    let childHover = false;
+
+    $: [arrowHorizontal, arrowPosition] = applyArrow(currentArrow);
+
+    function applyArrow(value: Placement): [string: 'start' | 'end', string: 'top' | 'bottom'] {
+        switch (value) {
+            case 'bottom-start':
+                return ['start', 'bottom'];
+            case 'bottom-end':
+                return ['end', 'bottom'];
+            case 'top-start':
+                return ['start', 'top'];
+            case 'top-end':
+                return ['end', 'top'];
+            default:
+                return ['start', 'bottom'];
+        }
+    }
+
+    onMount(() => {
+        instance = createPopper(element, tooltip, {
+            placement,
+            onFirstUpdate(state) {
+                if (currentArrow !== state.placement) {
+                    currentArrow = state.placement as Placement;
+                }
+            },
+            modifiers: [
+                {
+                    name: 'offset',
+                    options: {
+                        offset: [0, noArrow ? 0 : 12]
+                    }
+                },
+                {
+                    name: 'flip',
+                    options: {
+                        fallbackPlacements: ['top-start', 'top-end', 'bottom-start', 'bottom-end']
+                    }
+                },
+                {
+                    name: 'placementLogger',
+                    enabled: true,
+                    phase: 'main',
+                    fn({ state }) {
+                        if (currentArrow !== state.placement) {
+                            currentArrow = state.placement as Placement;
+                        }
+                    }
+                }
+            ]
+        });
+    });
+
+    $: if (show) {
+        instance?.update();
+    }
+
+    onDestroy(() => {
+        instance?.destroy();
+    });
+
+    const onBlur = (event: MouseEvent) => {
+        if (
+            show &&
+            !(
+                event.target === element ||
+                element.contains(event.target as Node) ||
+                event.target === tooltip ||
+                tooltip.contains(event.target as Node)
+            )
+        ) {
+            show = false;
+        }
+    };
+
+    function enter() {
+        show = true;
+    }
+
+    function leave() {
+        setTimeout(() => {
+            if (!childHover) {
+                show = false;
+            }
+        }, 100);
+    }
+</script>
+
+<svelte:window on:click={onBlur} />
+
+<div
+    on:mouseover={enter}
+    on:focus={enter}
+    on:mouseout={leave}
+    on:blur={leave}
+    class:u-cross-child-start={childStart}
+    bind:this={element}>
+    <slot />
+    <div
+        on:mouseleave={() => (childHover = false)}
+        on:mouseenter={() => (childHover = true)}
+        bind:this={tooltip}
+        style="z-index: 10">
+        {#if show}
+            <div
+                class="drop"
+                style="position: revert"
+                class:is-no-arrow={noArrow}
+                class:is-arrow-start={arrowHorizontal === 'start'}
+                class:is-arrow-end={arrowHorizontal === 'end'}
+                class:is-block-start={arrowPosition === 'top'}
+                class:is-block-end={arrowPosition === 'bottom'}>
+                <section
+                    class:u-overflow-y-auto={scrollable}
+                    class:u-max-height-200={scrollable}
+                    class="drop-section ">
+                    <ul class="drop-list">
+                        <slot name="list" />
+                    </ul>
+                </section>
+                <slot name="other" />
+            </div>
+        {/if}
+    </div>
+</div>
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 1752e1a21..cf506b842 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -14,6 +14,7 @@ export { default as List } from './list.svelte';
 export { default as ListItem } from './listItem.svelte';
 export { default as Empty } from './empty.svelte';
 export { default as EmptySearch } from './emptySearch.svelte';
+export { default as HoverList } from './hoverList.svelte';
 export { default as DropList } from './dropList.svelte';
 export { default as DropListItem } from './dropListItem.svelte';
 export { default as DropListLink } from './dropListLink.svelte';
@@ -42,3 +43,4 @@ export { default as Tab } from './tab.svelte';
 export { default as EventModal } from './eventModal.svelte';
 export { default as Status } from './status.svelte';
 export { default as Heading } from './heading.svelte';
+export { default as Output } from './output.svelte';
diff --git a/src/lib/components/output.svelte b/src/lib/components/output.svelte
new file mode 100644
index 000000000..1430ef409
--- /dev/null
+++ b/src/lib/components/output.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+    import Copy from './copy.svelte';
+
+    export let value: string;
+</script>
+
+<Copy {value}>
+    <div class="interactive-text-output is-textarea">
+        <span class="text u-line-height-1-5 u-break-word"><slot /></span>
+
+        <div class="u-flex u-cross-child-start u-gap-8">
+            <button class="interactive-text-output-button" aria-label="copy text">
+                <span class="icon-duplicate" aria-hidden="true" />
+            </button>
+        </div>
+    </div>
+</Copy>
diff --git a/src/lib/components/permissions/row.svelte b/src/lib/components/permissions/row.svelte
index 2f23de52b..e72333f5a 100644
--- a/src/lib/components/permissions/row.svelte
+++ b/src/lib/components/permissions/row.svelte
@@ -1,5 +1,26 @@
 <script lang="ts">
+    import { sdkForProject } from '$lib/stores/sdk';
+    import type { Models } from '@aw-labs/appwrite-console';
+    import { AvatarInitials, HoverList } from '../';
+    import Output from '../output.svelte';
+
     export let role: string;
+    export let showDropdown = false;
+
+    async function getData(
+        permission: string
+    ): Promise<Partial<Models.User<Record<string, unknown>> & Models.Team>> {
+        const role = permission.split(':')[0];
+        const id = permission.split(':')[1].split('/')[0];
+        if (role === 'user') {
+            const user = await sdkForProject.users.get(id);
+            return user;
+        }
+        if (role === 'team') {
+            const team = await sdkForProject.teams.get(id);
+            return team;
+        }
+    }
 </script>
 
 <div class="u-flex u-cross-center u-gap-8">
@@ -11,7 +32,36 @@
         {:else if role === 'any'}
             <div>Any</div>
         {:else}
-            <div>{role}</div>
+            <HoverList bind:show={showDropdown} placement="bottom-start">
+                <div>
+                    {role}
+                </div>
+                <svelte:fragment slot="list">
+                    {#await getData(role) then data}
+                        <div class="u-flex u-cross-center u-gap-16">
+                            <AvatarInitials name={data.name} size={40} />
+                            <div>
+                                <p class="text body-text-1">
+                                    {data.name
+                                        ? data.name
+                                        : data?.email
+                                        ? data?.email
+                                        : data?.phone
+                                        ? data?.phone
+                                        : '-'}
+                                </p>
+                                <Output value={data.$id}>{role}</Output>
+                            </div>
+                        </div>
+                        {#if data?.email || data?.phone}
+                            <p class="text u-small">{data?.email}</p>
+                            <p class="text u-small">{data?.phone}</p>
+                        {:else if data?.total}
+                            <p class="text u-small">Members:{data?.total}</p>
+                        {/if}
+                    {/await}
+                </svelte:fragment>
+            </HoverList>
         {/if}
     </div>
 </div>
diff --git a/tests/unit/components/dropList.test.ts b/tests/unit/components/dropList.test.ts
index b69993317..96eaa12ad 100644
--- a/tests/unit/components/dropList.test.ts
+++ b/tests/unit/components/dropList.test.ts
@@ -1,5 +1,4 @@
 import '@testing-library/jest-dom';
-import { tick } from 'svelte';
 import { render, fireEvent } from '@testing-library/svelte';
 import { DropList } from '../../../src/lib/components';
 
@@ -29,12 +28,3 @@ test('hide drop list on wrapper click', async () => {
     await fireEvent.click(wrapper);
     expect(component.show).toStrictEqual(false);
 });
-
-test('hide drop list on list click', async () => {
-    const { container } = render(DropList, { ...data });
-    const dropList = container.querySelector('ul.drop-list');
-
-    await fireEvent.click(dropList);
-    await tick();
-    expect(dropList).not.toBeInTheDocument();
-});

From 224458dc9ca08e5ccc89f6dffe014ff012931366 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Fri, 11 Nov 2022 14:51:48 +0100
Subject: [PATCH 2/3] feat: refactor hover list

---
 src/lib/components/drop.svelte            | 114 +++++++++++++++++
 src/lib/components/dropList.svelte        | 109 ++---------------
 src/lib/components/hoverList.svelte       | 141 ----------------------
 src/lib/components/index.ts               |   2 +-
 src/lib/components/permissions/row.svelte | 135 ++++++++++++++++-----
 5 files changed, 224 insertions(+), 277 deletions(-)
 create mode 100644 src/lib/components/drop.svelte
 delete mode 100644 src/lib/components/hoverList.svelte

diff --git a/src/lib/components/drop.svelte b/src/lib/components/drop.svelte
new file mode 100644
index 000000000..84486418a
--- /dev/null
+++ b/src/lib/components/drop.svelte
@@ -0,0 +1,114 @@
+<script lang="ts" context="module">
+    export type Placement = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+</script>
+
+<script lang="ts">
+    import { createPopper, type Instance } from '@popperjs/core';
+    import { onDestroy, onMount } from 'svelte';
+
+    export let show = false;
+    export let noArrow = false;
+    export let placement: Placement = 'bottom-start';
+    export let childStart = false;
+
+    let element: HTMLDivElement;
+    let tooltip: HTMLDivElement;
+    let arrow: HTMLDivElement;
+    let instance: Instance;
+
+    onMount(() => {
+        instance = createPopper(element, tooltip, {
+            placement,
+            modifiers: [
+                {
+                    name: 'arrow',
+                    options: {
+                        element: arrow
+                    }
+                },
+                {
+                    name: 'offset',
+                    options: {
+                        offset: [0, noArrow ? 0 : 6]
+                    }
+                },
+                {
+                    name: 'flip',
+                    options: {
+                        fallbackPlacements: ['bottom-start', 'bottom-end', 'top-start', 'top-end']
+                    }
+                }
+            ]
+        });
+    });
+
+    $: if (show) {
+        instance?.update();
+    }
+
+    onDestroy(() => {
+        instance?.destroy();
+    });
+
+    const onBlur = (event: MouseEvent) => {
+        if (
+            show &&
+            !(
+                event.target === element ||
+                element.contains(event.target as Node) ||
+                event.target === tooltip ||
+                tooltip.contains(event.target as Node)
+            )
+        ) {
+            show = false;
+        }
+    };
+</script>
+
+<svelte:window on:click={onBlur} />
+
+<div class="drop-wrapper" class:u-cross-child-start={childStart} bind:this={element}>
+    <slot />
+</div>
+
+<div class="drop-tooltip" bind:this={tooltip} style="z-index: 10">
+    <div class="drop-arrow" class:u-hide={!show || (show && noArrow)} bind:this={arrow} />
+    {#if show}
+        <slot name="list" />
+    {/if}
+</div>
+
+<style global lang="scss">
+    .drop-tooltip[data-popper-placement^='top'] > .drop-arrow {
+        bottom: -4px;
+    }
+
+    .drop-tooltip[data-popper-placement^='bottom'] > .drop-arrow {
+        top: -4px;
+    }
+
+    .drop-tooltip[data-popper-placement^='left'] > .drop-arrow {
+        right: -4px;
+    }
+
+    .drop-tooltip[data-popper-placement^='right'] > .drop-arrow {
+        left: -4px;
+    }
+    .drop-arrow,
+    .drop-arrow::before {
+        position: absolute;
+        width: 8px;
+        height: 8px;
+        z-index: -1;
+    }
+
+    .drop-arrow::before {
+        content: '';
+        transform: rotate(45deg);
+        background: hsl(var(--color-neutral-200));
+
+        body.theme-light & {
+            background: hsl(var(--color-neutral-10));
+        }
+    }
+</style>
diff --git a/src/lib/components/dropList.svelte b/src/lib/components/dropList.svelte
index 54af40d47..f78139199 100644
--- a/src/lib/components/dropList.svelte
+++ b/src/lib/components/dropList.svelte
@@ -1,77 +1,17 @@
 <script lang="ts">
-    import { createPopper, type Instance } from '@popperjs/core';
-    import { onDestroy, onMount } from 'svelte';
+    import { Drop } from '.';
+    import type { Placement } from './drop.svelte';
 
     export let show = false;
-    export let noArrow = false;
     export let placement: Placement = 'bottom-start';
     export let scrollable = false;
     export let childStart = false;
-
-    type Placement = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
-    let element: HTMLDivElement;
-    let tooltip: HTMLDivElement;
-    let arrow: HTMLDivElement;
-    let instance: Instance;
-
-    onMount(() => {
-        instance = createPopper(element, tooltip, {
-            placement,
-            modifiers: [
-                {
-                    name: 'arrow',
-                    options: {
-                        element: arrow
-                    }
-                },
-                {
-                    name: 'offset',
-                    options: {
-                        offset: [0, noArrow ? 0 : 6]
-                    }
-                },
-                {
-                    name: 'flip',
-                    options: {
-                        fallbackPlacements: ['top-start', 'top-end', 'bottom-start', 'bottom-end']
-                    }
-                }
-            ]
-        });
-    });
-
-    $: if (show) {
-        instance?.update();
-    }
-
-    onDestroy(() => {
-        instance?.destroy();
-    });
-
-    const onBlur = (event: MouseEvent) => {
-        if (
-            show &&
-            !(
-                event.target === element ||
-                element.contains(event.target as Node) ||
-                event.target === tooltip ||
-                tooltip.contains(event.target as Node)
-            )
-        ) {
-            show = false;
-        }
-    };
+    export let noArrow = false;
 </script>
 
-<svelte:window on:click={onBlur} />
-
-<div class="drop-wrapper" class:u-cross-child-start={childStart} bind:this={element}>
+<Drop bind:show {placement} {childStart} {noArrow}>
     <slot />
-</div>
-
-<div class="drop-tooltip" bind:this={tooltip} style="z-index: 10">
-    <div class="drop-arrow" class:u-hide={!show} bind:this={arrow} />
-    {#if show}
+    <svelte:fragment slot="list">
         <div class="drop is-no-arrow" style="position: revert">
             <section
                 class:u-overflow-y-auto={scrollable}
@@ -83,40 +23,5 @@
             </section>
             <slot name="other" />
         </div>
-    {/if}
-</div>
-
-<style global lang="scss">
-    .drop-tooltip[data-popper-placement^='top'] > .drop-arrow {
-        bottom: -4px;
-    }
-
-    .drop-tooltip[data-popper-placement^='bottom'] > .drop-arrow {
-        top: -4px;
-    }
-
-    .drop-tooltip[data-popper-placement^='left'] > .drop-arrow {
-        right: -4px;
-    }
-
-    .drop-tooltip[data-popper-placement^='right'] > .drop-arrow {
-        left: -4px;
-    }
-    .drop-arrow,
-    .drop-arrow::before {
-        position: absolute;
-        width: 8px;
-        height: 8px;
-        z-index: -1;
-    }
-
-    .drop-arrow::before {
-        content: '';
-        transform: rotate(45deg);
-        background: hsl(var(--color-neutral-200));
-
-        body.theme-light & {
-            background: hsl(var(--color-neutral-10));
-        }
-    }
-</style>
+    </svelte:fragment>
+</Drop>
diff --git a/src/lib/components/hoverList.svelte b/src/lib/components/hoverList.svelte
deleted file mode 100644
index c0fb4bab3..000000000
--- a/src/lib/components/hoverList.svelte
+++ /dev/null
@@ -1,141 +0,0 @@
-<script lang="ts">
-    import { createPopper, type Instance } from '@popperjs/core';
-    import { onDestroy, onMount } from 'svelte';
-
-    export let show = false;
-    export let noArrow = false;
-    export let placement: Placement = 'bottom-start';
-    export let scrollable = false;
-    export let childStart = false;
-
-    type Placement = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
-    let element: HTMLDivElement;
-    let tooltip: HTMLDivElement;
-    let instance: Instance;
-    let currentArrow: Placement;
-    let childHover = false;
-
-    $: [arrowHorizontal, arrowPosition] = applyArrow(currentArrow);
-
-    function applyArrow(value: Placement): [string: 'start' | 'end', string: 'top' | 'bottom'] {
-        switch (value) {
-            case 'bottom-start':
-                return ['start', 'bottom'];
-            case 'bottom-end':
-                return ['end', 'bottom'];
-            case 'top-start':
-                return ['start', 'top'];
-            case 'top-end':
-                return ['end', 'top'];
-            default:
-                return ['start', 'bottom'];
-        }
-    }
-
-    onMount(() => {
-        instance = createPopper(element, tooltip, {
-            placement,
-            onFirstUpdate(state) {
-                if (currentArrow !== state.placement) {
-                    currentArrow = state.placement as Placement;
-                }
-            },
-            modifiers: [
-                {
-                    name: 'offset',
-                    options: {
-                        offset: [0, noArrow ? 0 : 12]
-                    }
-                },
-                {
-                    name: 'flip',
-                    options: {
-                        fallbackPlacements: ['top-start', 'top-end', 'bottom-start', 'bottom-end']
-                    }
-                },
-                {
-                    name: 'placementLogger',
-                    enabled: true,
-                    phase: 'main',
-                    fn({ state }) {
-                        if (currentArrow !== state.placement) {
-                            currentArrow = state.placement as Placement;
-                        }
-                    }
-                }
-            ]
-        });
-    });
-
-    $: if (show) {
-        instance?.update();
-    }
-
-    onDestroy(() => {
-        instance?.destroy();
-    });
-
-    const onBlur = (event: MouseEvent) => {
-        if (
-            show &&
-            !(
-                event.target === element ||
-                element.contains(event.target as Node) ||
-                event.target === tooltip ||
-                tooltip.contains(event.target as Node)
-            )
-        ) {
-            show = false;
-        }
-    };
-
-    function enter() {
-        show = true;
-    }
-
-    function leave() {
-        setTimeout(() => {
-            if (!childHover) {
-                show = false;
-            }
-        }, 100);
-    }
-</script>
-
-<svelte:window on:click={onBlur} />
-
-<div
-    on:mouseover={enter}
-    on:focus={enter}
-    on:mouseout={leave}
-    on:blur={leave}
-    class:u-cross-child-start={childStart}
-    bind:this={element}>
-    <slot />
-    <div
-        on:mouseleave={() => (childHover = false)}
-        on:mouseenter={() => (childHover = true)}
-        bind:this={tooltip}
-        style="z-index: 10">
-        {#if show}
-            <div
-                class="drop"
-                style="position: revert"
-                class:is-no-arrow={noArrow}
-                class:is-arrow-start={arrowHorizontal === 'start'}
-                class:is-arrow-end={arrowHorizontal === 'end'}
-                class:is-block-start={arrowPosition === 'top'}
-                class:is-block-end={arrowPosition === 'bottom'}>
-                <section
-                    class:u-overflow-y-auto={scrollable}
-                    class:u-max-height-200={scrollable}
-                    class="drop-section ">
-                    <ul class="drop-list">
-                        <slot name="list" />
-                    </ul>
-                </section>
-                <slot name="other" />
-            </div>
-        {/if}
-    </div>
-</div>
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index cf506b842..4c5913d7a 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -14,7 +14,7 @@ export { default as List } from './list.svelte';
 export { default as ListItem } from './listItem.svelte';
 export { default as Empty } from './empty.svelte';
 export { default as EmptySearch } from './emptySearch.svelte';
-export { default as HoverList } from './hoverList.svelte';
+export { default as Drop } from './drop.svelte';
 export { default as DropList } from './dropList.svelte';
 export { default as DropListItem } from './dropListItem.svelte';
 export { default as DropListLink } from './dropListLink.svelte';
diff --git a/src/lib/components/permissions/row.svelte b/src/lib/components/permissions/row.svelte
index 68bbfd447..39392d530 100644
--- a/src/lib/components/permissions/row.svelte
+++ b/src/lib/components/permissions/row.svelte
@@ -1,11 +1,15 @@
 <script lang="ts">
+    import { tooltip } from '$lib/actions/tooltip';
     import { sdkForProject } from '$lib/stores/sdk';
     import type { Models } from '@aw-labs/appwrite-console';
-    import { AvatarInitials, HoverList } from '../';
+    import { tick } from 'svelte';
+    import { AvatarInitials } from '../';
     import Output from '../output.svelte';
 
     export let role: string;
-    export let showDropdown = false;
+
+    let content: HTMLDivElement;
+    let data = null;
 
     async function getData(
         permission: string
@@ -23,7 +27,7 @@
     }
 </script>
 
-<div class="u-flex u-cross-center u-gap-8">
+<div class="u-flex u-cross-center u-gap-8 tippy-user">
     <div>
         {#if role === 'users'}
             <div>Users</div>
@@ -32,36 +36,101 @@
         {:else if role === 'any'}
             <div>Any</div>
         {:else}
-            <HoverList bind:show={showDropdown} placement="bottom-start">
-                <div class="u-trim-1">
-                    {role}
-                </div>
-                <svelte:fragment slot="list">
-                    {#await getData(role) then data}
-                        <div class="u-flex u-cross-center u-gap-16">
-                            <AvatarInitials name={data.name} size={40} />
-                            <div>
-                                <p class="text body-text-1">
-                                    {data.name
-                                        ? data.name
-                                        : data?.email
-                                        ? data?.email
-                                        : data?.phone
-                                        ? data?.phone
-                                        : '-'}
-                                </p>
-                                <Output value={data.$id}>{role}</Output>
-                            </div>
-                        </div>
-                        {#if data?.email || data?.phone}
-                            <p class="text u-small">{data?.email}</p>
-                            <p class="text u-small">{data?.phone}</p>
-                        {:else if data?.total}
-                            <p class="text u-small">Members:{data?.total}</p>
-                        {/if}
-                    {/await}
-                </svelte:fragment>
-            </HoverList>
+            <div
+                class="u-trim-1"
+                use:tooltip={{
+                    interactive: true,
+                    allowHTML: true,
+                    onTrigger(instance) {
+                        instance.hide();
+                        getData(role)
+                            .then((n) => {
+                                data = n;
+                            })
+                            .finally(() => {
+                                tick().then(() => {
+                                    instance.setContent(content.innerHTML);
+                                    instance.show();
+                                });
+                            });
+                    }
+                }}>
+                {role}
+            </div>
+            <div class="u-hide" bind:this={content}>
+                {#if data}
+                    <div class="user-profile">
+                        <AvatarInitials name={data.name} size={40} />
+                        <span class="user-profile-info is-only-desktop">
+                            <span class="name">
+                                {data.name
+                                    ? data.name
+                                    : data?.email
+                                    ? data?.email
+                                    : data?.phone
+                                    ? data?.phone
+                                    : '-'}
+                            </span>
+                            <Output value={data.$id}>{role}</Output>
+                        </span>
+
+                        <span class="user-profile-sep" />
+
+                        <span class="user-profile-empty-column" />
+                        <span class="user-profile-info is-only-desktop">
+                            {#if role.startsWith('user')}
+                                <p class="text u-x-small">{data?.email}</p>
+                                <p class="text u-x-small">{data?.phone}</p>
+                            {:else if role.startsWith('team')}
+                                <p class="text u-x-small">Members: {data?.total}</p>
+                            {/if}
+                        </span>
+                    </div>
+                {:else}
+                    Not found.
+                {/if}
+            </div>
         {/if}
     </div>
 </div>
+
+<style lang="scss" global>
+    .tippy-user .tippy-box {
+        --p-drop-bg-color: var(--color-neutral-500);
+        --p-drop-border-color: var(--color-neutral-200);
+
+        body.theme-light & {
+            --p-drop-bg-color: var(--color-neutral-0);
+            --p-drop-border-color: var(--color-neutral-10);
+        }
+
+        inset-inline-start: -0.625rem;
+        inset-block-end: calc(100% + 0.625rem);
+        background-color: hsl(var(--p-drop-bg-color));
+        border: solid 0.0625rem hsl(var(--p-drop-border-color));
+        border-radius: var(--border-radius-small);
+        box-shadow: var(--shadow-small);
+        font-size: var(--font-size-0);
+        color: hsl(var(--p-body-text-color));
+        max-inline-size: 32.5rem;
+        margin-inline: auto;
+        line-height: 1.5;
+
+        .tippy-content {
+            padding: 1rem;
+        }
+
+        &[data-placement^='top'] > .tippy-arrow::before {
+            border-top-color: hsl(var(--p-drop-bg-color));
+        }
+        &[data-placement^='bottom'] > .tippy-arrow::before {
+            border-bottom-color: hsl(var(--p-drop-bg-color));
+        }
+        &[data-placement^='left'] > .tippy-arrow::before {
+            border-left-color: hsl(var(--p-drop-bg-color));
+        }
+        &[data-placement^='right'] > .tippy-arrow::before {
+            border-right-color: hsl(var(--p-drop-bg-color));
+        }
+    }
+</style>

From 2d5c34767abbde6ee10546ecd786f4650da521ec Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Fri, 11 Nov 2022 15:27:22 +0100
Subject: [PATCH 3/3] fix: hover profile

---
 src/lib/components/permissions/row.svelte | 25 +++++++++++++----------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/lib/components/permissions/row.svelte b/src/lib/components/permissions/row.svelte
index 39392d530..406813dd0 100644
--- a/src/lib/components/permissions/row.svelte
+++ b/src/lib/components/permissions/row.svelte
@@ -59,6 +59,8 @@
             </div>
             <div class="u-hide" bind:this={content}>
                 {#if data}
+                    {@const isUser = role.startsWith('user')}
+                    {@const isTeam = role.startsWith('team')}
                     <div class="user-profile">
                         <AvatarInitials name={data.name} size={40} />
                         <span class="user-profile-info is-only-desktop">
@@ -73,18 +75,19 @@
                             </span>
                             <Output value={data.$id}>{role}</Output>
                         </span>
+                        {#if (isUser && (data?.email || data?.phone)) || isTeam}
+                            <span class="user-profile-sep" />
 
-                        <span class="user-profile-sep" />
-
-                        <span class="user-profile-empty-column" />
-                        <span class="user-profile-info is-only-desktop">
-                            {#if role.startsWith('user')}
-                                <p class="text u-x-small">{data?.email}</p>
-                                <p class="text u-x-small">{data?.phone}</p>
-                            {:else if role.startsWith('team')}
-                                <p class="text u-x-small">Members: {data?.total}</p>
-                            {/if}
-                        </span>
+                            <span class="user-profile-empty-column" />
+                            <span class="user-profile-info is-only-desktop">
+                                {#if isUser}
+                                    <p class="text u-x-small">{data?.email}</p>
+                                    <p class="text u-x-small">{data?.phone}</p>
+                                {:else if isTeam}
+                                    <p class="text u-x-small">Members: {data?.total}</p>
+                                {/if}
+                            </span>
+                        {/if}
                     </div>
                 {:else}
                     Not found.