fix: QA from eldad

src/lib/components/avatarGroup.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">
-    import Avatar from './avatar.svelte';
-    export let avatars = [];
+    import AvatarInitials from './avatarInitials.svelte';
+
+    export let avatars: string[] = [];
     export let total = avatars.length;
     export let size = 40;
 </script>
 
 <ul class="avatars-group">
-    {#each avatars as av, index}
+    {#each avatars as name, index}
         {#if index < 2}
             <li class="avatars-group-item">
-                <Avatar {size} src={av.img} name={av.name} />
+                <AvatarInitials {size} {name} />
             </li>
         {/if}
     {/each}

src/lib/components/avatarInitials.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import Avatar from './avatar.svelte';
+
+    export let name: string;
+    export let size: number;
+
+    $: src = sdkForConsole.avatars.getInitials(name, size * 2, size * 2).toString();
+</script>
+
+<Avatar {name} {size} {src} />

src/lib/components/index.ts

@@ -22,6 +22,7 @@ export { default as CollapsibleItem } from './collapsibleItem.svelte';
 export { default as DropTabs } from './dropTabs.svelte';
 export { default as DropTabsItem } from './dropTabsItem.svelte';
 export { default as Avatar } from './avatar.svelte';
+export { default as AvatarInitials } from './avatarInitials.svelte';
 export { default as AvatarGroup } from './avatarGroup.svelte';
 export { default as Alert } from './alert.svelte';
 export { default as Box } from './box.svelte';

src/lib/components/permissions/team.svelte

@@ -3,7 +3,7 @@
     import { createEventDispatcher } from 'svelte';
     import { sdkForProject } from '$lib/stores/sdk';
     import { Query, type Models } from '@aw-labs/appwrite-console';
-    import { Avatar, Modal, Pagination } from '..';
+    import { AvatarInitials, Modal, Pagination } from '..';
     import type { Writable } from 'svelte/store';
     import type { Permission } from './permissions.svelte';
 
@@ -82,12 +82,7 @@
                                 </td>
                                 <td class="table-col" data-title="Team">
                                     <label class="u-flex u-cross-center u-gap-8" for={team.$id}>
-                                        <Avatar
-                                            src={sdkForProject.avatars
-                                                .getInitials(team.name, 64, 64)
-                                                .toString()}
-                                            size={32}
-                                            name={team.name} />
+                                        <AvatarInitials size={32} name={team.name} />
                                         <div class="u-line-height-1-5">
                                             <div class="body-text-2">{team.name}</div>
                                             <div class="u-x-small">{team.$id}</div>

src/lib/components/permissions/user.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { Button, Form, InputSearch } from '$lib/elements/forms';
     import { createEventDispatcher } from 'svelte';
-    import { Avatar, Modal, Pagination } from '..';
+    import { AvatarInitials, Modal, Pagination } from '..';
     import { sdkForProject } from '$lib/stores/sdk';
     import { Query, type Models } from '@aw-labs/appwrite-console';
     import type { Writable } from 'svelte/store';
@@ -82,12 +82,7 @@
                                 </td>
                                 <td class="table-col" data-title="User">
                                     <label class="u-flex u-cross-center u-gap-8" for={user.$id}>
-                                        <Avatar
-                                            src={sdkForProject.avatars
-                                                .getInitials(user.name, 64, 64)
-                                                .toString()}
-                                            size={32}
-                                            name={user.name} />
+                                        <AvatarInitials size={32} name={user.name} />
                                         <div class="u-line-height-1-5">
                                             <div class="body-text-2">{user.name}</div>
                                             <div class="u-x-small">{user.$id}</div>

src/lib/layout/header.svelte

@@ -2,9 +2,8 @@
     import { base } from '$app/paths';
     import { onMount } from 'svelte';
     import { Breadcrumbs } from '.';
-    import { Avatar, DropList, DropListItem, DropListLink } from '$lib/components';
+    import { AvatarInitials, DropList, DropListItem, DropListLink } from '$lib/components';
     import { app } from '$lib/stores/app';
-    import { sdkForConsole } from '$lib/stores/sdk';
     import { user } from '$lib/stores/user';
     import AppwriteLogo from '$lib/images/appwrite-gray-light.svg';
     import LightMode from '$lib/images/mode/light-mode.svg';
@@ -50,10 +49,7 @@
                 arrow={false}
                 scrollable={true}>
                 <button class="user-profile-button" on:click={() => (showDropdown = !showDropdown)}>
-                    <Avatar
-                        size={40}
-                        name={$user.name}
-                        src={sdkForConsole.avatars.getInitials($user.name, 40, 40).toString()} />
+                    <AvatarInitials size={40} name={$user.name} />
                     <span class="user-profile-info is-only-desktop">
                         <span class="name">{$user.name}</span>
                         {#if $organization}

src/lib/layout/shell.svelte

@@ -20,7 +20,6 @@
         newOrgModal,
         newMemberModal
     } from '$lib/stores/organization';
-    import { sdkForConsole } from '$lib/stores/sdk';
     import { base } from '$app/paths';
     import { user } from '$lib/stores/user';
     import { goto } from '$app/navigation';
@@ -43,12 +42,7 @@
     memberList.subscribe((value) => {
         if (value?.total > 0) {
             avatarsTotal = value.total;
-            avatars = value.memberships.map((team) => {
-                return {
-                    name: team.userName,
-                    img: sdkForConsole.avatars.getInitials(team.userName, 80, 80).toString()
-                };
-            });
+            avatars = value.memberships.map((team) => team.userName);
         }
     });
 

src/routes/console/+layout.svelte

@@ -34,7 +34,7 @@
 </script>
 
 <svelte:head>
-    <title>Appwrite - Console</title>
+    <title>Console - Appwrite</title>
 </svelte:head>
 
 <Shell

src/routes/console/account/+layout.svelte

@@ -42,7 +42,7 @@
 </script>
 
 <svelte:head>
-    <title>Appwrite - User</title>
+    <title>User - Appwrite</title>
 </svelte:head>
 
 <slot />

src/routes/console/account/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Button, Form, FormList, InputText, InputPassword } from '$lib/elements/forms';
-    import { CardGrid, Box, Avatar, Heading } from '$lib/components';
+    import { CardGrid, Box, Heading, AvatarInitials } from '$lib/components';
     import { Container } from '$lib/layout';
     import { onMount } from 'svelte';
     import { user } from '$lib/stores/user';
@@ -22,8 +22,6 @@
         email ??= $user.email;
     });
 
-    const getAvatar = (name: string) => sdkForConsole.avatars.getInitials(name, 96, 96).toString();
-
     async function updateName() {
         try {
             await sdkForConsole.account.updateName(name);
@@ -170,7 +168,7 @@
         <svelte:fragment slot="aside">
             <Box>
                 <svelte:fragment slot="image">
-                    <Avatar size={48} name={$user.name} src={getAvatar($user.name)} />
+                    <AvatarInitials size={48} name={$user.name} />
                 </svelte:fragment>
                 <svelte:fragment slot="title">
                     <h6 class="u-bold">{$user.name}</h6>

src/routes/console/account/organizations/+page.svelte

@@ -21,18 +21,9 @@
         await organizationList.load();
     });
 
-    const getAvatar = (name: string) => {
-        return sdkForConsole.avatars.getInitials(name, 80, 80).toString();
-    };
-
     const getMemberships = async (teamId: string) => {
         const memberships = await sdkForConsole.teams.listMemberships(teamId);
-        return memberships.memberships.map((team) => {
-            return {
-                name: team.userName,
-                img: getAvatar(team.userName)
-            };
-        });
+        return memberships.memberships.map((team) => team.userName);
     };
 
     let addOrganization = false;

src/routes/console/organization-[organization]/+layout.svelte

@@ -59,7 +59,7 @@
 </script>
 
 <svelte:head>
-    <title>Appwrite - Organizations</title>
+    <title>Organizations - Appwrite</title>
 </svelte:head>
 
 {#if $organization}

src/routes/console/organization-[organization]/members/+page.svelte

@@ -8,7 +8,7 @@
         TableCellText,
         TableRow
     } from '$lib/elements/table';
-    import { Avatar, Heading, Pagination } from '$lib/components';
+    import { AvatarInitials, Heading, Pagination } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
@@ -27,8 +27,6 @@
     const url = `${$page.url.origin}/console/`;
     const offset = createPersistentPagination($pageLimit);
 
-    const getAvatar = (name: string) =>
-        sdkForConsole.avatars.getInitials(name, 120, 120).toString();
     const deleted = () =>
         memberList.load(
             $organization.$id,
@@ -83,10 +81,7 @@
                     <TableRow>
                         <TableCell title="Name">
                             <div class="u-flex u-gap-12 u-cross-center">
-                                <Avatar
-                                    size={40}
-                                    src={getAvatar(member.userName)}
-                                    name={member.userName} />
+                                <AvatarInitials size={40} name={member.userName} />
                                 <span class="text u-trim">
                                     {member.userName ? member.userName : 'n/a'}
                                 </span>

src/routes/console/organization-[organization]/settings/+page.svelte

@@ -41,12 +41,7 @@
     memberList.subscribe((value) => {
         if (value?.total > 0) {
             avatarsTotal = value.total;
-            avatars = value.memberships.map((team) => {
-                return {
-                    name: team.userName,
-                    img: sdkForConsole.avatars.getInitials(team.userName, 120, 120).toString()
-                };
-            });
+            avatars = value.memberships.map((team) => team.userName);
         }
     });
 </script>

src/routes/console/project-[project]/authentication/+layout.svelte

@@ -48,7 +48,7 @@
 </script>
 
 <svelte:head>
-    <title>Appwrite - Users</title>
+    <title>Users - Appwrite</title>
 </svelte:head>
 
 {#if loaded}

src/routes/console/project-[project]/authentication/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { sdkForProject } from '$lib/stores/sdk';
-    import { Empty, EmptySearch, Pagination, Avatar, Copy, Search } from '$lib/components';
+    import { Empty, EmptySearch, Pagination, Copy, Search, AvatarInitials } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import {
         Table,
@@ -29,7 +28,6 @@
     const offset = createPersistentPagination($pageLimit);
 
     const project = $page.params.project;
-    const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 32, 32).toString();
     const userCreated = async (event: CustomEvent<Models.User<Record<string, unknown>>>) => {
         await goto(`${base}/console/project-${project}/authentication/user/${event.detail.$id}`);
     };
@@ -60,7 +58,7 @@
         <Table>
             <TableHeader>
                 <TableCellHead>Name</TableCellHead>
-                <TableCellHead>Identifier</TableCellHead>
+                <TableCellHead>Identifiers</TableCellHead>
                 <TableCellHead width={130}>Status</TableCellHead>
                 <TableCellHead width={100}>ID</TableCellHead>
                 <TableCellHead>Joined</TableCellHead>
@@ -73,10 +71,7 @@
                             <div class="u-flex u-gap-12 u-cross-center">
                                 {#if user.email || user.phone}
                                     {#if user.name}
-                                        <Avatar
-                                            size={32}
-                                            src={getAvatar(user.name)}
-                                            name={user.name} />
+                                        <AvatarInitials size={32} name={user.name} />
                                         <span class="text u-trim">{user.name}</span>
                                     {:else}
                                         <div class="avatar is-size-small ">
@@ -91,7 +86,7 @@
                                 {/if}
                             </div>
                         </TableCell>
-                        <TableCellText title="Identifier">
+                        <TableCellText title="Identifiers">
                             {user.email && user.phone
                                 ? [user.email, user.phone].join(',')
                                 : user.email || user.phone}

src/routes/console/project-[project]/authentication/security/+page.svelte

@@ -74,8 +74,8 @@
         <Heading tag="h2" size="6">Users Limit</Heading>
         <p>
             Limit new users from signing up for your project, regardless of authentication method.
-            You can still create users and team memberships from your Appwrite console. <b>
-                The maximum limit is 10,000 users.</b>
+            You can still create users and team memberships from your Appwrite console.
+            <b> The maximum limit is 10,000 users.</b>
         </p>
 
         <svelte:fragment slot="aside">
@@ -121,6 +121,7 @@
                             name="limit"
                             id="limit"
                             class="input-text"
+                            max="10000"
                             disabled={isLimited === 'unlimited'}
                             bind:value={newLimit} />
                     </div>

src/routes/console/project-[project]/authentication/teams/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { sdkForProject } from '$lib/stores/sdk';
     import {
         Table,
         TableHeader,
@@ -11,7 +10,7 @@
         TableCell
     } from '$lib/elements/table';
     import { Button } from '$lib/elements/forms';
-    import { Empty, EmptySearch, Pagination, Avatar, Search } from '$lib/components';
+    import { Empty, EmptySearch, Pagination, Search, AvatarInitials } from '$lib/components';
     import Create from '../_createTeam.svelte';
     import { goto } from '$app/navigation';
     import { event } from '$lib/actions/analytics';
@@ -28,7 +27,6 @@
     const offset = createPersistentPagination($pageLimit);
 
     const project = $page.params.project;
-    const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 32, 32).toString();
     const teamCreated = async (event: CustomEvent<Models.Team>) => {
         await goto(`${base}/console/project-${project}/authentication/teams/${event.detail.$id}`);
     };
@@ -68,7 +66,7 @@
                         href={`${base}/console/project-${project}/authentication/teams/${team.$id}`}>
                         <TableCell title="ID">
                             <div class="u-flex u-gap-12">
-                                <Avatar size={32} name={team.name} src={getAvatar(team.name)} />
+                                <AvatarInitials size={32} name={team.name} />
                                 <span class="text u-trim">{team.name}</span>
                             </div>
                         </TableCell>

src/routes/console/project-[project]/authentication/teams/[team]/+layout.svelte

@@ -51,7 +51,7 @@
 </script>
 
 <svelte:head>
-    <title>Appwrite - Team</title>
+    <title>Team - Appwrite</title>
 </svelte:head>
 
 {#if $team}