add feedback

dashboard/components/dialog/Feedback.vue

@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+
+const { createAlert } = useAlert();
+const { close } = useModal()
+
+const text = ref<string>("");
+
+async function sendFeedback() {
+    if (text.value.length < 5) return;
+    try {
+
+        const res = await $fetch('/api/feedback/add', {
+            headers: useComputedHeaders({
+                useSnapshotDates: false,
+                custom: { 'Content-Type': 'application/json' }
+            }).value,
+            method:'POST',
+            body: JSON.stringify({ text: text.value })
+        });
+
+        createAlert('Success', 'Feedback sent successfully.', 'far fa-circle-check', 5000);
+
+        close();
+    } catch (ex) {
+        console.error(ex);
+        createAlert('Error', 'Error sending feedback. Please try again later', 'far fa-triangle-exclamation', 5000);
+    }
+}
+
+</script>
+
+<template>
+    <UModal :ui="{
+        strategy: 'override',
+        overlay: {
+            background: 'bg-lyx-background/85'
+        },
+        background: 'bg-lyx-widget',
+        ring: 'border-solid border-[1px] border-[#262626]'
+    }">
+        <div class="h-full flex flex-col gap-2 p-4">
+
+            <div class="flex flex-col gap-3">
+                <div> Share everything with us. </div>
+                <textarea v-model="text" placeholder="Leave your feedback"
+                    class="p-2 w-full h-[8rem] resize-none rounded-md outline outline-[2px] outline-[#3a3f47]"></textarea>
+                <div class="flex justify-between items-center">
+                    <div>Need help ? Check the docs <a href="https://docs.litlyx.com" target="_blank"
+                            class="text-blue-500">here</a> </div>
+                    <LyxUiButton :disabled="text.length < 5" @click="sendFeedback()" type="primary"> Send </LyxUiButton>
+                </div>
+            </div>
+        </div>
+    </UModal>
+
+</template>

dashboard/layouts/dashboard.vue

@@ -3,10 +3,13 @@
 import type { Section } from '~/components/CVerticalNavigation.vue';
 
 import { Lit } from 'litlyx-js';
+import { DialogFeedback } from '#components';
 
 const { userRoles, isLogged } = useLoggedUser();
 const { project } = useProject();
 
+const modal = useModal();
+
 const selfhosted = useSelfhosted();
 
 const sections: Section[] = [
@@ -25,7 +28,13 @@ const sections: Section[] = [
             { label: 'Settings', to: '/settings', icon: 'fal fa-gear' },
             {
                 grow: true,
-                label: 'Docs', to: 'https://docs.litlyx.com', icon: 'fal fa-book', external: true,
+                label: 'Leave a Feedback', icon: 'fal fa-message',
+                action() {
+                    modal.open(DialogFeedback, {});
+                },
+            },
+            {
+                label: 'Documentation', to: 'https://docs.litlyx.com', icon: 'fal fa-book', external: true,
                 action() { Lit.event('docs_clicked') },
             },
             {