feat: new id component

src/lib/components/id.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+    import { Copy } from '.';
+
+    export let value: string;
+    export let event: string = null;
+
+    let element: HTMLSpanElement;
+
+    const isOverflowing = (elem: HTMLSpanElement, iterator = 1) => {
+        let parent = elem?.parentElement;
+        if (
+            elem &&
+            elem.scrollWidth + 10 >
+                (parent.clientWidth ? parent.clientWidth : parent.parentElement.clientWidth)
+        )
+            trimText(iterator);
+        else return;
+    };
+
+    function trimText(iterator: number) {
+        if (iterator > 3) {
+            element.childNodes[element.childElementCount].textContent = '…';
+        } else {
+            let text = element.childNodes[element.childElementCount].textContent;
+            element.childNodes[element.childElementCount].textContent =
+                '…' + text.slice(-14 + iterator * 2);
+            isOverflowing(element, iterator + 1);
+        }
+    }
+
+    $: isOverflowing(element);
+</script>
+
+<Copy {value} {event}>
+    <div class="interactive-text-output" style:min-inline-size="0" style:display="inline-flex">
+        <span style:white-space="nowrap" class="text u-line-height-1-5" bind:this={element}>
+            <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>

src/lib/components/index.ts

@@ -53,3 +53,4 @@ export { default as Limit } from './limit.svelte';
 export { default as PaginationWithLimit } from './paginationWithLimit.svelte';
 export { default as ClickableList } from './clickableList.svelte';
 export { default as ClickableListItem } from './clickableListItem.svelte';
+export { default as ID } from './id.svelte';

src/lib/elements/pill.svelte

@@ -9,34 +9,6 @@
     export let submit = false;
     export let external = false;
     export let href: string = null;
-    export let trim = false;
-
-    let element: HTMLButtonElement;
-
-    const isOverflowing = (elem: HTMLButtonElement, iterator = 1) => {
-        let parent = elem?.parentElement;
-        if (
-            trim &&
-            elem &&
-            elem.scrollWidth + 10 >
-                (parent.clientWidth ? parent.clientWidth : parent.parentElement.clientWidth)
-        )
-            trimText(iterator);
-        else return;
-    };
-
-    function trimText(iterator: number) {
-        if (iterator > 3) {
-            element.childNodes[element.childElementCount].textContent = '...';
-        } else {
-            let text = element.childNodes[element.childElementCount].textContent;
-            element.childNodes[element.childElementCount].textContent =
-                text.slice(0, 3) + '...' + text.slice(-9 + iterator * 2);
-            isOverflowing(element, iterator + 1);
-        }
-    }
-
-    $: isOverflowing(element);
 </script>
 
 {#if href}
@@ -55,7 +27,6 @@
     </a>
 {:else if button}
     <button
-        bind:this={element}
         on:click
         {disabled}
         type={submit ? 'submit' : 'button'}

src/lib/elements/table/cellHead.svelte

@@ -5,7 +5,7 @@
 </script>
 
 <div
-    style={width ? `--p-col-width:${width?.toString()}` : ''}
+    style:--p-col-width={width?.toString()}
     class:is-only-desktop={onlyDesktop}
     class="table-thead-col"
     role="columnheader">

src/lib/elements/table/cellText.svelte

@@ -3,10 +3,12 @@
     export let title: string;
     export let showOverflow = false;
     export let onlyDesktop = false;
+    export let width: number = null;
 </script>
 
 <div
     class="table-col"
+    style:--p-col-width={width?.toString() ?? ''}
     class:is-only-desktop={onlyDesktop}
     class:u-overflow-visible={showOverflow}
     data-title={title}

src/routes/console/project-[project]/auth/teams/team-[team]/header.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { Copy, Tab, Tabs } from '$lib/components';
-    import { Pill } from '$lib/elements';
+    import { ID, Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover, CoverTitle } from '$lib/layout';
     import { team } from './store';
@@ -35,12 +34,7 @@
         <CoverTitle href={`/console/project-${projectId}/auth/teams`}>
             {$team?.name}
         </CoverTitle>
-        <Copy value={$team?.$id} event="team">
-            <Pill button>
-                <span class="icon-duplicate" aria-hidden="true" />
-                Team ID
-            </Pill>
-        </Copy>
+        <ID value={$team?.$id} event="team">{$team?.$id}</ID>
     </svelte:fragment>
 
     <Tabs>

src/routes/console/project-[project]/auth/user-[user]/header.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { Copy, Tab, Tabs } from '$lib/components';
-    import { Pill } from '$lib/elements';
+    import { ID, Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover, CoverTitle } from '$lib/layout';
     import { user } from './store';
@@ -39,12 +38,7 @@
         <CoverTitle href={`/console/project-${projectId}/auth`}>
             {$user.name ? $user.name : '-'}
         </CoverTitle>
-        <Copy value={$user.$id} event="user">
-            <Pill button>
-                <span class="icon-duplicate" aria-hidden="true" />
-                User ID
-            </Pill>
-        </Copy>
+        <ID value={$user.$id} event="user">{$user.$id}</ID>
     </svelte:fragment>
 
     <Tabs>

src/routes/console/project-[project]/databases/database-[database]/[[page]]/store.ts

@@ -8,7 +8,7 @@ export type Column = {
 };
 
 export const columns = writable<Column[]>([
-    { id: '$id', title: 'Database ID', show: true, width: 50 },
+    { id: '$id', title: 'Database ID', show: true, width: 150 },
     { id: 'name', title: 'Name', show: true, width: 120 },
     { id: '$createdAt', title: 'Created', show: true, width: 120 },
     { id: '$updatedAt', title: 'Updated', show: true, width: 120 }

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/header.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { Copy, Tab, Tabs } from '$lib/components';
-    import { Pill } from '$lib/elements';
+    import { ID, Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover, CoverTitle } from '$lib/layout';
     import { doc } from './store';
@@ -38,12 +37,7 @@
             href={`/console/project-${projectId}/databases/database-${databaseId}/collection-${collectionId}`}>
             {$doc?.$id}
         </CoverTitle>
-        <Copy value={$doc.$id} event="document">
-            <Pill button>
-                <span class="icon-duplicate" aria-hidden="true" />
-                Document ID
-            </Pill>
-        </Copy>
+        <ID value={$doc?.$id} event="document">Document ID</ID>
     </svelte:fragment>
 
     <Tabs>

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/header.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { Copy, Tab, Tabs } from '$lib/components';
-    import { Pill } from '$lib/elements';
+    import { ID, Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover, CoverTitle } from '$lib/layout';
     import { collection } from './store';
@@ -52,12 +51,7 @@
         <CoverTitle href={`/console/project-${projectId}/databases/database-${databaseId}`}>
             {$collection?.name}
         </CoverTitle>
-        <Copy value={$collection?.$id}>
-            <Pill button>
-                <span class="icon-duplicate" aria-hidden="true" />
-                Collection ID
-            </Pill>
-        </Copy>
+        <ID value={$collection?.$id}>{$collection?.$id}</ID>
     </svelte:fragment>
 
     <Tabs>

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte

@@ -3,8 +3,7 @@
     import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { tooltip } from '$lib/actions/tooltip';
-    import { Copy } from '$lib/components';
-    import { Pill } from '$lib/elements';
+    import { ID } from '$lib/components';
     import {
         TableBody,
         TableCell,
@@ -98,13 +97,10 @@
         {#each data.documents.documents as document}
             <TableRowLink
                 href={`${base}/console/project-${projectId}/databases/database-${databaseId}/collection-${$collection.$id}/document-${document.$id}`}>
-                <TableCell>
-                    <Copy value={document.$id}>
-                        <Pill button trim>
-                            <span class="icon-duplicate" aria-hidden="true" />
-                            <span class="text">{document.$id}</span>
-                        </Pill>
-                    </Copy>
+                <TableCell width={150}>
+                    <ID value={document.$id}>
+                        {document.$id}
+                    </ID>
                 </TableCell>
 
                 {#each $columns as column}

src/routes/console/project-[project]/databases/database-[database]/grid.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { CardContainer, Copy, GridItem1 } from '$lib/components';
+    import { CardContainer, GridItem1, ID } from '$lib/components';
     import { Pill } from '$lib/elements';
     import type { PageData } from './$types';
     export let data: PageData;
@@ -23,9 +23,7 @@
                     <Pill>disabled</Pill>
                 {/if}</svelte:fragment>
 
-            <Copy value={collection.$id}>
-                <Pill button><i class="icon-duplicate" />Collection ID</Pill>
-            </Copy>
+            <ID value={collection.$id}>{collection.$id}</ID>
         </GridItem1>
     {/each}
 </CardContainer>

src/routes/console/project-[project]/databases/database-[database]/header.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { Copy, Tab, Tabs } from '$lib/components';
-    import { Pill } from '$lib/elements';
+    import { ID, Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover, CoverTitle } from '$lib/layout';
     import { database } from './store';
@@ -35,12 +34,7 @@
         <CoverTitle href={`/console/project-${projectId}/databases`}>
             {$database.name}
         </CoverTitle>
-        <Copy value={$database.$id}>
-            <Pill button>
-                <span class="icon-duplicate" aria-hidden="true" />
-                Database ID
-            </Pill>
-        </Copy>
+        <ID value={$database.$id}>{$database.$id}</ID>
     </svelte:fragment>
 
     <Tabs>

src/routes/console/project-[project]/databases/database-[database]/store.ts

@@ -7,7 +7,7 @@ export const database = derived(page, ($page) => $page.data.database as Models.D
 export const showCreate = writable(false);
 
 export const columns = writable<Column[]>([
-    { id: '$id', title: 'Collection ID', show: true, width: 50 },
+    { id: '$id', title: 'Collection ID', show: true, width: 150 },
     { id: 'name', title: 'Name', show: true, width: 120 },
     { id: '$createdAt', title: 'Created', show: true, width: 120 },
     { id: '$updatedAt', title: 'Updated', show: true, width: 120 }

src/routes/console/project-[project]/databases/database-[database]/table.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { Copy } from '$lib/components';
-    import { Pill } from '$lib/elements';
+    import { ID } from '$lib/components';
     import {
         Table,
         TableBody,
@@ -37,21 +36,16 @@
                     {#if column.show}
                         {#if column.id === '$id'}
                             {#key $columns}
-                                <TableCell title={column.title}>
-                                    <Copy value={collection.$id}>
-                                        <Pill button trim>
-                                            <span class="icon-duplicate" aria-hidden="true" />
-                                            <span class="text u-trim">{collection.$id}</span>
-                                        </Pill>
-                                    </Copy>
+                                <TableCell title={column.title} width={column.width}>
+                                    <ID value={collection.$id}>{collection.$id}</ID>
                                 </TableCell>
                             {/key}
                         {:else if column.id === 'name'}
-                            <TableCellText title={column.title}>
+                            <TableCellText title={column.title} width={column.width}>
                                 {collection.name}
                             </TableCellText>
                         {:else}
-                            <TableCellText title={column.title}>
+                            <TableCellText title={column.title} width={column.width}>
                                 {toLocaleDateTime(collection[column.id])}
                             </TableCellText>
                         {/if}

src/routes/console/project-[project]/databases/grid.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { CardContainer, Copy, GridItem1 } from '$lib/components';
-    import { Pill } from '$lib/elements';
+    import { CardContainer, GridItem1, ID } from '$lib/components';
     import type { PageData } from './$types';
     export let data: PageData;
     export let showCreate = false;
@@ -13,10 +12,7 @@
     {#each data.databases.databases as database}
         <GridItem1 href={`${base}/console/project-${project}/databases/database-${database.$id}`}>
             <svelte:fragment slot="title">{database.name}</svelte:fragment>
-
-            <Copy value={database.$id}>
-                <Pill button><i class="icon-duplicate" />Database ID</Pill>
-            </Copy>
+            <ID value={database.$id}>{database.$id}</ID>
         </GridItem1>
     {/each}
     <svelte:fragment slot="empty">

src/routes/console/project-[project]/databases/store.ts

@@ -2,7 +2,7 @@ import type { Column } from '$lib/components/viewSelector.svelte';
 import { writable } from 'svelte/store';
 
 export const columns = writable<Column[]>([
-    { id: '$id', title: 'Database ID', show: true, width: 50 },
+    { id: '$id', title: 'Database ID', show: true, width: 150 },
     { id: 'name', title: 'Name', show: true, width: 120 },
     { id: '$createdAt', title: 'Created', show: true, width: 120 },
     { id: '$updatedAt', title: 'Updated', show: true, width: 120 }