Arman educational

src/lib/components/avatar.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+    export let size: number;
+    export let src: string;
+</script>
+
+<img width={size} height={size} class="avatar" style="--size: {size}px" {src} alt="" />

src/lib/components/elementCount.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    export let count: number = 0;
+</script>
+
+<p>{count} <slot /> found</p>

src/lib/components/index.ts

@@ -13,3 +13,8 @@ export { default as DropList } from './dropList.svelte';
 export { default as DropListItem } from './dropListItem.svelte';
 export { default as DropListLink } from './dropListLink.svelte';
 export { default as Collapsible } from './collapsible.svelte';
+export { default as Avatar } from './avatar.svelte';
+export { default as SwitchBox } from './switchBox.svelte';
+export { default as SwitchBoxes } from './switchBoxes.svelte';
+export { default as ElementCount } from './elementCount.svelte';
+export { default as InfoSection } from './infoSection.svelte';

src/lib/components/infoSection.svelte

@@ -0,0 +1,4 @@
+<div>
+    <i class="icon-info-circled" />
+    <slot />
+</div>

src/lib/components/switchBox.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+    import { createEventDispatcher } from 'svelte';
+
+    type SwitchBox = {
+        label: string;
+        id: string;
+        src: string;
+        alt: string;
+        href: string;
+        linkText: string;
+        value: boolean;
+        required: boolean;
+        disabled: boolean;
+        wip: boolean;
+    };
+
+    export let box: SwitchBox;
+
+    let { label, id, src, alt, href, linkText, disabled, required, value, wip } = box;
+
+    const dispatch = createEventDispatcher();
+
+    //TODO: move SwitchBox type outside  component
+</script>
+
+<li class="card">
+    <label class="switch-box" for={id}>
+        <div class="switch-box-image">
+            <img height="50" width="50" src={src || 'https://via.placeholder.com/50'} {alt} />
+        </div>
+        <span class="switch-box-title">{label}</span>
+        {#if !wip}
+            <a {href} class="link" target="_blank">
+                <span class="text">{linkText || 'Docs'} </span>
+                <span class="icon-link-ext" aria-hidden="true" />
+            </a>
+            <input
+                {id}
+                {disabled}
+                {required}
+                type="checkbox"
+                class="switch"
+                role="switch"
+                bind:checked={value}
+                on:change={() => dispatch('updated', { value, id })} />
+        {/if}
+    </label>
+</li>

src/lib/components/switchBoxes.svelte

@@ -0,0 +1,13 @@
+<script>
+    import SwitchBox from './switchBox.svelte';
+    import { createEventDispatcher } from 'svelte';
+    const dispatch = createEventDispatcher();
+
+    export let boxes;
+</script>
+
+<ul class="grid-box">
+    {#each boxes as box}
+        <SwitchBox {box} on:updated={(e) => dispatch('updated', e.detail)} />
+    {/each}
+</ul>

src/lib/elements/forms/inputPassword.svelte

@@ -9,6 +9,7 @@
     export let required = false;
     export let disabled = false;
     export let autofocus = false;
+    export let meter = true;
 
     let element: HTMLInputElement;
 
@@ -33,14 +34,16 @@
             class="input-text"
             bind:value
             bind:this={element} />
-        <meter
-            value={strength > 100 ? 100 : strength}
-            min="0"
-            max="100"
-            class="password-meter"
-            class:is-weak={strength !== 0 && strength <= 33}
-            class:is-medium={strength > 33 && strength <= 66}
-            class:is-strong={strength > 66 && strength <= 100}
-            aria-label="Password strength week" />
+        {#if meter}
+            <meter
+                value={strength > 100 ? 100 : strength}
+                min="0"
+                max="100"
+                class="password-meter"
+                class:is-weak={strength !== 0 && strength <= 33}
+                class:is-medium={strength > 33 && strength <= 66}
+                class:is-strong={strength > 66 && strength <= 100}
+                aria-label="Password strength weak" />
+        {/if}
     </div>
 </FormItem>

src/lib/elements/forms/inputSearch.svelte

@@ -17,7 +17,7 @@
         }
     });
 
-    const onKeyUp = (event: KeyboardEvent) => {
+    const valueChange = (event: Event) => {
         clearTimeout(timer);
         timer = setTimeout(() => {
             const target = event.target as HTMLInputElement;
@@ -32,5 +32,5 @@
     {required}
     type="search"
     class="input-text"
-    on:keyup={onKeyUp}
+    on:input={valueChange}
     bind:this={element} />

src/lib/elements/forms/inputText.svelte

@@ -9,6 +9,7 @@
     export let required = false;
     export let disabled = false;
     export let autofocus = false;
+    export let autocomplete = true;
     export let maxlength: number = null;
 
     let element: HTMLInputElement;
@@ -29,6 +30,7 @@
             {disabled}
             {required}
             {maxlength}
+            {autocomplete}
             type="text"
             class="input-text"
             bind:value

src/lib/layout/footer.svelte

@@ -4,7 +4,7 @@
             <li class="inline-links-item">
                 <a class="link" href="https://github.com/appwrite/appwrite" target="_blank">
                     <span class="icon-github-circled" aria-hidden="true" />
-                    <span class="text">GitHun</span>
+                    <span class="text">GitHub</span>
                 </a>
             </li>
             <li class="inline-links-item">

src/lib/layout/header.svelte

@@ -2,7 +2,7 @@
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { DropList, DropListItem, DropListLink } from '$lib/components';
+    import { DropList, DropListItem, DropListLink, Avatar } from '$lib/components';
     import { app } from '$lib/stores/app';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { user } from '$lib/stores/user';
@@ -46,12 +46,9 @@
             <DropList bind:show={showDropdown} position="bottom" horizontal="left">
                 <button class="transparent-button" on:click={() => (showDropdown = !showDropdown)}>
                     <span class="is-only-desktop">{$user.name}</span>
-                    <img
-                        width="40"
-                        height="40"
-                        class="user-image"
-                        src={sdkForConsole.avatars.getInitials($user.name, 40, 40).toString()}
-                        alt="" />
+                    <Avatar
+                        size={50}
+                        src={sdkForConsole.avatars.getInitials($user.name, 50, 50).toString()} />
                 </button>
                 <svelte:fragment slot="list">
                     <DropListLink href="/console/$me" icon="user">Your Account</DropListLink>

src/lib/layout/index.ts

@@ -6,3 +6,4 @@ export { default as Navigation } from './navigation.svelte';
 export { default as Notification } from './notification.svelte';
 export { default as Notifications } from './notifications.svelte';
 export { default as Shell } from './shell.svelte';
+export { default as PageTransition } from './pageTransition.svelte';

src/lib/layout/pageTransition.svelte

@@ -0,0 +1,10 @@
+<script>
+    import { page } from '$app/stores';
+    import { fade } from 'svelte/transition';
+</script>
+
+{#key $page.url.pathname}
+    <section in:fade>
+        <slot />
+    </section>
+{/key}

src/routes/console/[project]/database/__layout.svelte

@@ -1,5 +1,6 @@
 <script>
     import { base } from '$app/paths';
+    import { fade } from 'svelte/transition';
 
     import { page } from '$app/stores';
     import { Back } from '$lib/components';
@@ -22,4 +23,8 @@
         <Tabs />
     </Cover>
 {/if}
-<slot />
+{#key $page.url.pathname}
+    <section in:fade>
+        <slot />
+    </section>
+{/key}

src/routes/console/[project]/database/collection/[collection]/index.svelte

@@ -9,7 +9,7 @@
         TableCellHead,
         TableCellLink
     } from '$lib/elements/table';
-    import { Empty, Pagination } from '$lib/components';
+    import { Empty, Pagination, ElementCount } from '$lib/components';
     import { collection } from './store';
     import { Container } from '$lib/layout';
     import { Button } from '$lib/elements/forms';
@@ -36,6 +36,7 @@
         <div aria-busy="true" />
     {:then response}
         {#if response.total}
+            <ElementCount count={response.total}>documents</ElementCount>
             <Table>
                 <TableHeader>
                     {#each columns as column}

src/routes/console/[project]/functions/__layout.svelte

@@ -1,9 +1,8 @@
 <script>
     import { base } from '$app/paths';
-
     import { page } from '$app/stores';
     import { Back } from '$lib/components';
-    import { Cover } from '$lib/layout';
+    import { Cover, PageTransition } from '$lib/layout';
     import Tabs from './_tabs.svelte';
 
     const project = $page.params.project;
@@ -21,4 +20,6 @@
         <Tabs />
     </Cover>
 {/if}
-<slot />
+<PageTransition>
+    <slot />
+</PageTransition>

src/routes/console/[project]/functions/index.svelte

@@ -2,7 +2,7 @@
     import { page } from '$app/stores';
     import { sdkForProject } from '$lib/stores/sdk';
     import { Button, InputSearch } from '$lib/elements/forms';
-    import { Card, Empty, Pagination, Tile, Tiles } from '$lib/components';
+    import { Card, Empty, Pagination, Tile, Tiles, ElementCount } from '$lib/components';
     import Create from './_create.svelte';
     import { Container } from '$lib/layout';
     import { base } from '$app/paths';
@@ -28,6 +28,7 @@
         <div aria-busy="true" />
     {:then response}
         {#if response.total}
+            <ElementCount count={response.total}>functions</ElementCount>
             <Tiles>
                 {#each response.functions as func}
                     <Tile

src/routes/console/[project]/keys/__layout.svelte

@@ -1,10 +1,8 @@
 <script>
     import { base } from '$app/paths';
-
     import { page } from '$app/stores';
-
     import { Back } from '$lib/components';
-    import { Cover } from '$lib/layout';
+    import { Cover, PageTransition } from '$lib/layout';
     const projectId = $page.params.project;
 </script>
 
@@ -14,4 +12,6 @@
     </svelte:fragment>
     <svelte:fragment slot="title">API Keys</svelte:fragment>
 </Cover>
-<slot />
+<PageTransition>
+    <slot />
+</PageTransition>

src/routes/console/[project]/settings/__layout.svelte

@@ -1,9 +1,8 @@
 <script>
     import { base } from '$app/paths';
-
     import { page } from '$app/stores';
     import { Back } from '$lib/components';
-    import { Cover } from '$lib/layout';
+    import { Cover, PageTransition } from '$lib/layout';
     import Tabs from './_tabs.svelte';
 
     const project = $page.params.project;
@@ -20,5 +19,6 @@
     <svelte:fragment slot="title">Settings</svelte:fragment>
     <Tabs />
 </Cover>
-
-<slot />
+<PageTransition>
+    <slot />
+</PageTransition>

src/routes/console/[project]/storage/__layout.svelte

@@ -3,7 +3,7 @@
 
     import { page } from '$app/stores';
     import { Back } from '$lib/components';
-    import { Cover } from '$lib/layout';
+    import { Cover, PageTransition } from '$lib/layout';
     import Tabs from './_tabs.svelte';
 
     const project = $page.params.project;
@@ -22,4 +22,6 @@
     </Cover>
 {/if}
 
-<slot />
+<PageTransition>
+    <slot />
+</PageTransition>

src/routes/console/[project]/storage/bucket/[bucket]/index.svelte

@@ -2,7 +2,7 @@
     import { page } from '$app/stores';
     import { sdkForProject } from '$lib/stores/sdk';
     import { Button, InputSearch } from '$lib/elements/forms';
-    import { Card, Empty, Pagination } from '$lib/components';
+    import { Card, Empty, Pagination, ElementCount } from '$lib/components';
     import type { Models } from 'src/sdk';
     import Create from './_create.svelte';
     import Update from './_update.svelte';
@@ -47,6 +47,8 @@
         <div aria-busy="true" />
     {:then response}
         {#if response.total}
+            <ElementCount count={response.total}>files</ElementCount>
+
             <Table>
                 <TableHeader>
                     <TableCellHead width={30} />

src/routes/console/[project]/users/__layout.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
     import { base } from '$app/paths';
-
     import { page } from '$app/stores';
     import { Back } from '$lib/components';
-    import { Cover } from '$lib/layout';
+    import { Cover, PageTransition } from '$lib/layout';
     import Tabs from './_tabs.svelte';
 
     const project = $page.params.project;
@@ -21,5 +20,6 @@
         <Tabs />
     </Cover>
 {/if}
-
-<slot />
+<PageTransition>
+    <slot />
+</PageTransition>