feat: initial commit

src/lib/components/feedbackGeneral.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+    import { Form, FormList, InputTextarea, Button } from '$lib/elements/forms';
+    import { createEventDispatcher } from 'svelte';
+    import Card from './card.svelte';
+
+    export let show = false;
+
+    const dispatch = createEventDispatcher();
+
+    let feedback: string;
+    const handleSubmit = () => {
+        dispatch('feedback', feedback);
+    };
+</script>
+
+<Form on:action={handleSubmit}>
+    <Card>
+        <section class="u-flex common-section">
+            <h3 class="body-text-1"><slot name="title" /></h3>
+            <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>
+        </section>
+        <div class="common-section"><slot /></div>
+        <FormList>
+            <InputTextarea
+                id="feedback"
+                placeholder="Your message here"
+                showLabel={false}
+                label="Feedback"
+                bind:value={feedback} />
+        </FormList>
+
+        <div class="u-flex u-main-end u-gap-12">
+            <Button text on:click={() => (show = false)}>Cancel</Button>
+            <Button disabled={!feedback} secondary submit>Submit</Button>
+        </div>
+    </Card>
+</Form>

src/lib/components/index.ts

@@ -25,3 +25,4 @@ export { default as Box } from './box.svelte';
 export { default as Search } from './search.svelte';
 export { default as GridItem1 } from './gridItem1.svelte';
 export { default as EmptyGridItem } from './emptyGridItem.svelte';
+export { default as FeedbackGeneral } from './feedbackGeneral.svelte';

src/lib/layout/header.svelte

@@ -11,8 +11,10 @@
     import DarkMode from '$lib/images/mode/dark-mode.svg';
     import SystemMode from '$lib/images/mode/system-mode.svg';
     import { organizationList, organization, newOrgModal } from '$lib/stores/organization';
+    import { FeedbackGeneral } from '$lib/components';
 
     let showDropdown = false;
+    let showFeedback = true;
 
     onMount(async () => {
         await organizationList.load();
@@ -32,7 +34,17 @@
 
 <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>
+        <DropList bind:show={showFeedback} position="bottom" horizontal="right" scrollable={true}>
+            <button class="button is-small is-text" on:click={() => (showFeedback = !showFeedback)}>
+                <span class="text">Feedback</span>
+            </button>
+            <svelte:fragment slot="other">
+                <FeedbackGeneral bind:show={showFeedback}>
+                    <svelte:fragment slot="title">How can we improve</svelte:fragment>
+                    Your feedback is important to us. Please be honest and tell us what you think.
+                </FeedbackGeneral>
+            </svelte:fragment>
+        </DropList>
         <a
             href="https://appwrite.io/support"
             target="_blank"