Merge pull request #2559 from appwrite/fix-SER-414-more-permissions-ui-issues

Fix: few permissions UI improvements

Author: Meldiron

src/lib/components/permissions/permissions.svelte

@@ -20,6 +20,7 @@
     import { IconPlus, IconX } from '@appwrite.io/pink-icons-svelte';
     import type { PinkColumn } from '$lib/helpers/types';
     import { Card } from '$lib/components';
+    import { TableScroll } from '$lib/elements/table';
 
     export let withCreate = false;
     export let permissions: string[] = [];
@@ -124,7 +125,7 @@
 </script>
 
 {#if [...$groups]?.length}
-    <div class="table-wrapper">
+    <TableScroll>
         <Table.Root {columns} let:root>
             <svelte:fragment slot="header" let:root>
                 <Table.Header.Cell column="role" {root}>Role</Table.Header.Cell>
@@ -139,7 +140,7 @@
             {#each [...$groups] as [role, permission] (role)}
                 <Table.Row.Base {root}>
                     <Table.Cell column="role" {root}>
-                        <Row {role} />
+                        <Row {role} onNotFound={() => deleteRole(role)} />
                     </Table.Cell>
                     <Table.Cell column="create" {root}>
                         <Selector.Checkbox
@@ -174,7 +175,7 @@
                 </Table.Row.Base>
             {/each}
         </Table.Root>
-    </div>
+    </TableScroll>
 
     <div>
         <Actions
@@ -210,14 +211,3 @@
         </Layout.Stack>
     </Card>
 {/if}
-
-<style lang="scss">
-    .table-wrapper {
-        scrollbar-width: none;
-        -ms-overflow-style: none;
-
-        &::-webkit-scrollbar {
-            display: none;
-        }
-    }
-</style>

src/lib/components/permissions/row.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { type ComponentProps, type Snippet } from 'svelte';
+    import { type ComponentProps, type Snippet, onMount } from 'svelte';
     import { sdk } from '$lib/stores/sdk';
     import type { Models } from '@appwrite.io/console';
     import { AvatarInitials } from '../';
@@ -34,9 +34,10 @@
         role: string;
         placement?: ComponentProps<Popover>['placement'];
         children?: Snippet;
+        onNotFound?: (role: string) => void;
     }
 
-    let { role, placement = 'bottom-start', children }: Props = $props();
+    let { role, placement = 'bottom-start', children, onNotFound }: Props = $props();
 
     type ParsedPermission = {
         type: 'user' | 'team' | 'other';
@@ -111,6 +112,21 @@
         return fetchPromise;
     }
 
+    async function verifyExistence() {
+        try {
+            const data = await getData(role);
+            if (data?.notFound) {
+                onNotFound?.(role);
+            }
+        } catch {
+            // Intentionally ignore fetch/parse errors; UI handles missing data state
+        }
+    }
+
+    onMount(() => {
+        verifyExistence();
+    });
+
     let isMouseOverTooltip = $state(false);
     function hidePopover(hideTooltip: () => void, timeout = true) {
         if (!timeout) {
@@ -162,7 +178,7 @@
                         {:then data}
                             {formatName(
                                 data.name ?? data?.email ?? data?.phone ?? '-',
-                                $isSmallViewport ? 16 : 18
+                                $isSmallViewport ? 16 : 20
                             )}
                         {/await}
                     </Typography.Text>
@@ -281,20 +297,21 @@
                                     <Divider />
                                     <Layout.Stack gap="xxs" alignItems="flex-start">
                                         {#if data.email}
-                                            <Typography.Text
-                                                size="xs"
-                                                variant="m-400"
+                                            <Typography.Caption
+                                                variant="400"
                                                 color="--fgcolor-neutral-secondary">
-                                                Email: {data.email}
-                                            </Typography.Text>
+                                                Email: {formatName(
+                                                    data.email,
+                                                    $isSmallViewport ? 24 : 32
+                                                )}
+                                            </Typography.Caption>
                                         {/if}
                                         {#if data.phone}
-                                            <Typography.Text
-                                                size="xs"
-                                                variant="m-400"
+                                            <Typography.Caption
+                                                variant="400"
                                                 color="--fgcolor-neutral-secondary">
                                                 Phone: {data.phone}
-                                            </Typography.Text>
+                                            </Typography.Caption>
                                         {/if}
                                     </Layout.Stack>
                                 {/if}