draft: feedback widget

src/lib/components/dropList.svelte

@@ -7,20 +7,29 @@
     export let scrollable = false;
     export let childStart = false;
     export let noArrow = false;
+    export let width: string = null;
 </script>
 
 <Drop bind:show {placement} {childStart} {noArrow}>
     <slot />
     <svelte:fragment slot="list">
-        <div class="drop is-no-arrow" style="position: revert">
-            <section
-                class:u-overflow-y-auto={scrollable}
-                class:u-max-height-200={scrollable}
-                class="drop-section ">
-                <ul class="drop-list">
-                    <slot name="list" />
-                </ul>
-            </section>
+        <div
+            class="drop is-no-arrow"
+            style={`${
+                width
+                    ? `--drop-width-size-desktop:${width}rem; position:relative`
+                    : ' position:relative'
+            }`}>
+            {#if $$slots.list}
+                <section
+                    class:u-overflow-y-auto={scrollable}
+                    class:u-max-height-200={scrollable}
+                    class="drop-section ">
+                    <ul class="drop-list">
+                        <slot name="list" />
+                    </ul>
+                </section>
+            {/if}
             <slot name="other" />
         </div>
     </svelte:fragment>

src/lib/components/evaluation.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { clickOnEnter } from '$lib/helpers/a11y';
+
+    export let value: number = null;
+</script>
+
+<fieldset class="u-margin-block-start-8">
+    <legend class="label is-required u-margin-0 u-line-height-1-5 u-bold">
+        <slot />
+    </legend>
+    <ul class="u-flex u-main-space-between u-margin-block-start-16">
+        {#each Array(10) as _, i}
+            <li on:keyup={clickOnEnter} on:click={() => (value = i)}>
+                <input
+                    type="radio"
+                    name="recommend"
+                    class="radio-button"
+                    data-text={i}
+                    checked={value === i} />
+            </li>
+        {/each}
+    </ul>
+    <div class="u-flex u-main-space-between u-margin-block-start-8">
+        <span>Not at all likely</span>
+        <span>Extremely likely</span>
+    </div>
+</fieldset>

src/lib/components/feedbackGeneral.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+    import {
+        Form,
+        FormList,
+        InputTextarea,
+        Button,
+        InputText,
+        InputEmail
+    } from '$lib/elements/forms';
+    import { feedback } from '$lib/stores/app';
+    import { addNotification } from '$lib/stores/notifications';
+
+    export let show = false;
+
+    let message: string;
+    let name: string;
+    let email: string;
+    async function handleSubmit() {
+        try {
+            await feedback.submitFeedback(
+                undefined,
+                email,
+                message,
+                ['general'],
+                [{ firstname: name }]
+            );
+            show = false;
+        } catch (error) {
+            show = false;
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    }
+</script>
+
+<section class="drop-section">
+    <header class="u-flex u-main-space-between u-gap-16">
+        <h4 class="body-text-1">How can we improve?</h4>
+        <button
+            type="button"
+            class="x-button u-margin-inline-start-auto"
+            aria-label="Close Modal"
+            title="Close Modal"
+            on:click={() => (show = false)}>
+            <span class="icon-x" aria-hidden="true" />
+        </button>
+    </header>
+    <div class="u-margin-block-start-8 u-line-height-1-5">
+        Your feedback is important to us. Please be honest and tell us what you think.
+    </div>
+
+    <Form on:submit={handleSubmit}>
+        <FormList>
+            <InputText
+                label="name"
+                id="name"
+                bind:value={name}
+                placeholder="Enter name"
+                showLabel={false} />
+            <InputEmail
+                label="email"
+                id="email"
+                bind:value={email}
+                placeholder="Enter email"
+                showLabel={false} />
+            <InputTextarea
+                id="feedback"
+                placeholder="Your message here"
+                showLabel={false}
+                label="Feedback"
+                required
+                bind:value={message} />
+        </FormList>
+
+        <div class="u-flex u-main-end u-gap-16 u-margin-block-start-24">
+            <Button text on:click={() => (show = false)}>Cancel</Button>
+            <Button secondary submit>Submit</Button>
+        </div>
+    </Form>
+</section>

src/lib/components/feedbackNPS.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+    import {
+        Form,
+        FormList,
+        InputTextarea,
+        Button,
+        InputText,
+        InputEmail
+    } from '$lib/elements/forms';
+    import { feedback } from '$lib/stores/app';
+    import { addNotification } from '$lib/stores/notifications';
+    import Evaluation from './evaluation.svelte';
+
+    export let show = false;
+
+    let value: number = null;
+    let message: string;
+    let email: string;
+    let name: string;
+    async function handleSubmit() {
+        try {
+            await feedback.submitFeedback(undefined, email, message, ['npm'], [{ value, name }]);
+            console.log(value, message);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    }
+</script>
+
+<section class="drop-section">
+    <header class="u-flex u-main-space-between u-gap-16">
+        <h4 class="body-text-1">How are we doing?</h4>
+        <button
+            type="button"
+            class="x-button u-margin-inline-start-auto"
+            aria-label="Close Modal"
+            title="Close Modal"
+            on:click={() => (show = false)}>
+            <span class="icon-x" aria-hidden="true" />
+        </button>
+    </header>
+    <div class="u-margin-block-start-8 u-line-height-1-5">
+        At Appwrite, we value the feedback of our users. That means you! We'd love to hear what you
+        think.
+    </div>
+
+    <Form on:submit={handleSubmit}>
+        <Evaluation bind:value>
+            How likely are you to recommend Appwrite to a friend or colleague?
+        </Evaluation>
+        {#if value}
+            <FormList>
+                <InputTextarea
+                    id="feedback"
+                    placeholder="Your message here"
+                    label="Feedback"
+                    required
+                    bind:value={message}
+                    showLabel={false} />
+                <InputText
+                    label="name"
+                    id="name"
+                    bind:value={name}
+                    placeholder="Enter name"
+                    showLabel={false} />
+                <InputEmail
+                    label="email"
+                    id="email"
+                    bind:value={email}
+                    placeholder="Enter email"
+                    showLabel={false} />
+            </FormList>
+        {/if}
+        <div class="u-flex u-main-end u-gap-16 u-margin-block-start-24">
+            <Button text on:click={() => (show = false)}>No thanks</Button>
+            <Button disabled={!value} secondary submit>Submit</Button>
+        </div>
+    </Form>
+</section>

src/lib/components/index.ts

@@ -31,6 +31,9 @@ export { default as Box } from './box.svelte';
 export { default as Search } from './search.svelte';
 export { default as SearchQuery } from './searchQuery.svelte';
 export { default as GridItem1 } from './gridItem1.svelte';
+export { default as FeedbackGeneral } from './feedbackGeneral.svelte';
+export { default as FeedbackNPS } from './feedbackNPS.svelte';
+export { default as Evaluation } from './evaluation.svelte';
 export { default as Steps } from './steps.svelte';
 export { default as Step } from './step.svelte';
 export { default as Code } from './code.svelte';

src/lib/constants.ts

@@ -1,5 +1,7 @@
 export const PAGE_LIMIT = 12; // default page limit
 export const CARD_LIMIT = 6; // default card limit
+export const INTERVAL = 5 * 60000; // default interval to check for feedback
+
 export enum Dependencies {
     ORGANIZATION = 'dependency:organization',
     PROJECT = 'dependency:project',

src/lib/layout/header.svelte

@@ -1,27 +1,44 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { AvatarInitials, DropListItem, DropListLink } from '$lib/components';
-    import { app } from '$lib/stores/app';
+    import {
+        AvatarInitials,
+        DropList,
+        DropListItem,
+        DropListLink,
+        FeedbackGeneral
+    } from '$lib/components';
+    import { app, feedback } from '$lib/stores/app';
     import { user } from '$lib/stores/user';
     import { organizationList, organization, newOrgModal } from '$lib/stores/organization';
     import AppwriteLogo from '$lib/images/appwrite-gray-light.svg';
     import LightMode from '$lib/images/mode/light-mode.svg';
     import DarkMode from '$lib/images/mode/dark-mode.svg';
     import SystemMode from '$lib/images/mode/system-mode.svg';
+    import { FeedbackNPS } from '$lib/components';
+
+    let showFeedback = false;
     import { slide } from 'svelte/transition';
     import { page } from '$app/stores';
 
     let showDropdown = false;
     let droplistElement: HTMLDivElement;
 
-    const onBlur = (event: MouseEvent) => {
+    function toggleFeedback() {
+        showFeedback = !showFeedback;
+        if ($feedback.notification) {
+            feedback.toggleNotification();
+            feedback.addVisualization();
+        }
+    }
+
+    function onBlur(event: MouseEvent) {
         if (
             showDropdown &&
             !(event.target === droplistElement || droplistElement.contains(event.target as Node))
         ) {
             showDropdown = false;
         }
-    };
+    }
 </script>
 
 <svelte:window on:click={onBlur} />
@@ -38,7 +55,23 @@
 
 <div class="main-header-end">
     <nav class="u-flex is-only-desktop">
-        <button class="button is-small is-text"><span class="text">Feedback</span></button>
+        {#if $feedback.notification}
+            <div class="u-flex u-cross-center">
+                <div class="pulse-notification" />
+            </div>
+        {/if}
+        <DropList width="28" bind:show={showFeedback} scrollable={true}>
+            <button class="button is-small is-text" on:click={toggleFeedback}>
+                <span class="text">Feedback</span>
+            </button>
+            <svelte:fragment slot="other">
+                {#if $feedback.notification}
+                    <FeedbackNPS bind:show={showFeedback} />
+                {:else}
+                    <FeedbackGeneral bind:show={showFeedback} />
+                {/if}
+            </svelte:fragment>
+        </DropList>
         <a
             href="https://appwrite.io/support"
             target="_blank"

src/lib/mock/drop.test.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+    import { DropList } from '$lib/components';
+
+    export let show = false;
+</script>
+
+<DropList bind:show>
+    <button id="button" on:click={() => (show = !show)}>test</button>
+
+    <svelte:fragment slot="list"><li id="list">list</li></svelte:fragment>
+    <svelte:fragment slot="other"><span id="other">other</span></svelte:fragment>
+</DropList>