Feature: Floating feedback button

app/layout.tsx

@@ -1,11 +1,11 @@
-/* eslint-disable no-console */
-import '~/styles/globals.scss';
-import Providers from '../providers/Providers';
+import { revalidatePath, revalidateTag } from 'next/cache';
+import FeedbackButton from '~/components/FeedbackButton/FeedbackButton';
 import RedirectWrapper from '~/components/RedirectWrapper';
-import { getServerSession } from '~/utils/auth';
-import { api } from '~/trpc/server';
 import { Toaster } from '~/components/ui/toaster';
-import { revalidatePath, revalidateTag } from 'next/cache';
+import '~/styles/globals.scss';
+import { api } from '~/trpc/server';
+import { getServerSession } from '~/utils/auth';
+import Providers from '../providers/Providers';
 
 export const metadata = {
   title: 'Network Canvas Fresco',
@@ -35,6 +35,7 @@ async function RootLayout({ children }: { children: React.ReactNode }) {
         >
           <Providers initialSession={session}>{children}</Providers>
           <Toaster />
+          <FeedbackButton />
         </RedirectWrapper>
       </body>
     </html>

components/FeedbackButton/ButtonTooltip.tsx

@@ -0,0 +1,17 @@
+import { motion } from 'framer-motion';
+
+const ButtonTooltip = () => {
+  return (
+    <motion.p
+      initial={{ opacity: 0, y: 15 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: 15 }}
+      transition={{ duration: 0.5, delay: 1, ease: 'easeInOut' }}
+      className="rounded-md bg-slate-200 px-3 py-2 text-base"
+    >
+      Click here to report bugs!
+    </motion.p>
+  );
+};
+
+export default ButtonTooltip;

components/FeedbackButton/FeedbackButton.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { AnimatePresence, motion } from 'framer-motion';
+import ButtonTooltip from './ButtonTooltip';
+import { useEffect, useState } from 'react';
+import ClickUpFormModal from './FeedbackModal';
+
+const FeedbackButton = () => {
+  const [showTooltip, setShowTooltip] = useState(true);
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      setShowTooltip(false);
+    }, 10000); // tooltip disappears after 10 seconds
+
+    return () => clearTimeout(timeoutId);
+  }, []);
+
+  return (
+    <>
+      <ClickUpFormModal open={open} setOpen={setOpen} />
+      <motion.div
+        initial={{ opacity: 1 }}
+        animate={{ x: '25px', rotate: -60 }}
+        transition={{ delay: 12 }}
+        className="fixed bottom-16 right-10 z-50 h-[115px]"
+      >
+        <AnimatePresence>{showTooltip && <ButtonTooltip />}</AnimatePresence>
+        <motion.button
+          initial={{ opacity: 0, scale: 0.5 }}
+          animate={{ opacity: 1, scale: 1 }}
+          whileHover={{ scale: 1.1 }}
+          whileTap={{ scale: 0.9 }}
+          className="absolute bottom-0 right-1.5 w-fit cursor-pointer rounded-full p-4 text-4xl text-white"
+          onClick={() => setOpen(true)}
+        >
+          🤖
+        </motion.button>
+      </motion.div>
+    </>
+  );
+};
+
+export default FeedbackButton;

components/FeedbackButton/FeedbackModal.tsx

@@ -0,0 +1,31 @@
+import { type Dispatch, type SetStateAction } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '~/components/ui/dialog';
+
+type FeedbackModalProps = {
+  open: boolean;
+  setOpen: Dispatch<SetStateAction<boolean>>;
+};
+
+const FeedbackModal = ({ open, setOpen }: FeedbackModalProps) => {
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent className="max-w-[700px]">
+        <DialogHeader>
+          <DialogTitle>Your feedback below</DialogTitle>
+        </DialogHeader>
+        <iframe
+          className="h-[450px] w-full border"
+          title="Feedback form"
+          src="https://forms.clickup.com/3464225/f/39q11-6131/OIJSIULQV2EUZFLUOA"
+        ></iframe>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default FeedbackModal;