From 61e7f58cd2676cb9d15a921829c21f4026a50034 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Tue, 28 Oct 2025 12:32:47 +0530
Subject: [PATCH] fix: more permissions ui improvements

---
 .../components/permissions/permissions.svelte | 27 +++++--------------
 src/lib/components/permissions/row.svelte     | 15 +++++++----
 src/lib/components/permissions/team.svelte    |  2 +-
 src/lib/components/permissions/user.svelte    |  4 +--
 4 files changed, 20 insertions(+), 28 deletions(-)

diff --git a/src/lib/components/permissions/permissions.svelte b/src/lib/components/permissions/permissions.svelte
index 135f1506d..46b6a9bb3 100644
--- a/src/lib/components/permissions/permissions.svelte
+++ b/src/lib/components/permissions/permissions.svelte
@@ -113,26 +113,12 @@
         }, []);
     }
 
-    function sortRoles([a]: [string, Permission], [b]: [string, Permission]) {
-        if ((a === 'any') !== (b === 'any')) {
-            return a === 'any' ? -1 : 1;
-        }
-        if ((a === 'users') !== (b === 'users')) {
-            return a === 'users' ? -1 : 1;
-        }
-        if ((a === 'guests') !== (b === 'guests')) {
-            return a === 'guests' ? -1 : 1;
-        }
-
-        return a.localeCompare(b);
-    }
-
     const columns: PinkColumn[] = [
-        { id: 'role', width: { min: 80 } },
-        { id: 'create', width: { min: 80 }, hide: !withCreate },
-        { id: 'read', width: { min: 80 } },
-        { id: 'update', width: { min: 80 } },
-        { id: 'delete', width: { min: 80 } },
+        { id: 'role', width: { min: 220 } },
+        { id: 'create', width: { min: 64 }, hide: !withCreate },
+        { id: 'read', width: { min: 64 } },
+        { id: 'update', width: { min: 64 } },
+        { id: 'delete', width: { min: 64 } },
         { id: 'action', width: 40 }
     ];
 </script>
@@ -150,13 +136,14 @@
                 <Table.Header.Cell column="delete" {root}>Delete</Table.Header.Cell>
                 <Table.Header.Cell column="action" {root} />
             </svelte:fragment>
-            {#each [...$groups].sort(sortRoles) as [role, permission] (role)}
+            {#each [...$groups] as [role, permission] (role)}
                 <Table.Row.Base {root}>
                     <Table.Cell column="role" {root}>
                         <Row {role} />
                     </Table.Cell>
                     <Table.Cell column="create" {root}>
                         <Selector.Checkbox
+                            size="s"
                             checked={permission.create}
                             on:change={() => togglePermission(role, 'create')} />
                     </Table.Cell>
diff --git a/src/lib/components/permissions/row.svelte b/src/lib/components/permissions/row.svelte
index dc2323849..a8c6b5080 100644
--- a/src/lib/components/permissions/row.svelte
+++ b/src/lib/components/permissions/row.svelte
@@ -140,6 +140,9 @@
 {:else}
     <Popover let:show let:hide {placement} portal>
         <button
+            type="button"
+            onclick={(e) => e.stopPropagation()}
+            onkeydown={(e) => e.stopPropagation()}
             onmouseenter={() => {
                 if (!$menuOpen) {
                     setTimeout(show, 150);
@@ -159,7 +162,7 @@
                         {:then data}
                             {formatName(
                                 data.name ?? data?.email ?? data?.phone ?? '-',
-                                $isSmallViewport ? 5 : 7
+                                $isSmallViewport ? 16 : 18
                             )}
                         {/await}
                     </Typography.Text>
@@ -200,7 +203,7 @@
                                     <Layout.Stack alignItems="flex-start" gap="xxs">
                                         <Layout.Stack style="padding-left: 0.25rem;">
                                             <Typography.Text
-                                                size="s"
+                                                size="m"
                                                 color="--fgcolor-neutral-primary">
                                                 {data.customName}
                                             </Typography.Text>
@@ -254,14 +257,14 @@
                                                     ? `${base}/project-${page.params.region}-${page.params.project}/auth/user-${id}`
                                                     : `${base}/project-${page.params.region}-${page.params.project}/auth/teams/team-${id}`}>
                                                 <Typography.Text
-                                                    size="s"
+                                                    size="m"
                                                     color="--fgcolor-neutral-primary">
                                                     {formatName(
                                                         data.name ??
                                                             data?.email ??
                                                             data?.phone ??
                                                             '-',
-                                                        $isSmallViewport ? 12 : 20
+                                                        $isSmallViewport ? 18 : 24
                                                     )}
                                                 </Typography.Text>
                                             </Link.Anchor>
@@ -276,10 +279,11 @@
 
                                 {#if isUser && (data.email || data.phone)}
                                     <Divider />
-                                    <Layout.Stack gap="xs" alignItems="flex-start">
+                                    <Layout.Stack gap="xxs" alignItems="flex-start">
                                         {#if data.email}
                                             <Typography.Text
                                                 size="xs"
+                                                variant="m-400"
                                                 color="--fgcolor-neutral-secondary">
                                                 Email: {data.email}
                                             </Typography.Text>
@@ -287,6 +291,7 @@
                                         {#if data.phone}
                                             <Typography.Text
                                                 size="xs"
+                                                variant="m-400"
                                                 color="--fgcolor-neutral-secondary">
                                                 Phone: {data.phone}
                                             </Typography.Text>
diff --git a/src/lib/components/permissions/team.svelte b/src/lib/components/permissions/team.svelte
index 02867a7fd..6f26a6270 100644
--- a/src/lib/components/permissions/team.svelte
+++ b/src/lib/components/permissions/team.svelte
@@ -141,7 +141,7 @@
         </div>
     {:else}
         <Card.Base padding="none">
-            <Empty title="You have no teams. Create a team to see them here." type="secondary">
+            <Empty title="No teams yet. Create a team to see it here." type="secondary">
                 <Typography.Text slot="description">
                     Need a hand? Learn more in our <Link.Anchor
                         href="https://appwrite.io/docs/products/auth/teams"
diff --git a/src/lib/components/permissions/user.svelte b/src/lib/components/permissions/user.svelte
index bf051e76d..cf37e71bb 100644
--- a/src/lib/components/permissions/user.svelte
+++ b/src/lib/components/permissions/user.svelte
@@ -176,10 +176,10 @@
         </div>
     {:else}
         <Card.Base padding="none">
-            <Empty title="You have no users. Create a user to see them here." type="secondary">
+            <Empty title="No users yet. Create a user to see it here." type="secondary">
                 <Typography.Text slot="description">
                     Need a hand? Learn more in our <Link.Anchor
-                        href="https://appwrite.io/docs/products/auth/quick-start"
+                        href="https://appwrite.io/docs/products/auth/users"
                         target="_blank"
                         rel="noopener noreferrer">
                         documentation</Link.Anchor