Add feedback form

packages/web/src/components/feedback-dialog.tsx

@@ -0,0 +1,64 @@
+import { useState } from 'react';
+import { sendFeedback } from '@/lib/utils';
+import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Textarea } from '@/components/ui/textarea';
+
+export default function FeedbackDialog({
+  open,
+  onOpenChange,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}) {
+  const [feedback, setFeedback] = useState('');
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-xl">
+        <DialogHeader>
+          <DialogTitle>Share Feedback</DialogTitle>
+          <DialogDescription asChild>
+            <div className="pt-4 flex flex-col gap-2">
+              <p>
+                We're always looking to improve Srcbook, and your feedback is invaluable.
+                <br />
+                You can open a public{' '}
+                <a
+                  href="https://github.com/srcbookdev/srcbook/issues/new"
+                  className="underline font-medium"
+                >
+                  GitHub issue
+                </a>{' '}
+                or use the form below.
+              </p>
+              <Textarea
+                placeholder="Share anonymous feedback"
+                value={feedback}
+                onChange={(e) => setFeedback(e.target.value)}
+              />
+              <Button
+                disabled={!feedback}
+                onClick={() => {
+                  sendFeedback(feedback);
+                  setFeedback('');
+                  toast.info('Thanks for the feedback!');
+                  onOpenChange(false);
+                }}
+                className="self-end"
+              >
+                Send
+              </Button>
+            </div>
+          </DialogDescription>
+        </DialogHeader>
+      </DialogContent>
+    </Dialog>
+  );
+}

packages/web/src/components/session-menu.tsx

@@ -6,15 +6,17 @@ import { useState } from 'react';
 import {
   Upload,
   Trash2,
-  MessageCircleQuestion,
+  MessageCircleMore,
   Circle,
   List,
   Settings,
   LoaderCircle,
+  Keyboard,
 } from 'lucide-react';
 import type { SessionType } from '../types';
 import type { CodeCellType, MarkdownCellType, TitleCellType } from '@srcbook/shared';
 import KeyboardShortcutsDialog from '@/components/keyboard-shortcuts-dialog';
+import FeedbackDialog from '@/components/feedback-dialog';
 import DeleteSrcbookModal from '@/components/delete-srcbook-dialog';
 import { ExportSrcbookModal } from '@/components/import-export-srcbook-modal';
 import {
@@ -65,6 +67,7 @@ export default function SessionMenu({
   openDepsInstallModal,
 }: Props) {
   const [showShortcuts, setShowShortcuts] = useState(false);
+  const [showFeedback, setShowFeedback] = useState(false);
   const [showDelete, setShowDelete] = useState(false);
   const [showSave, setShowSave] = useState(false);
 
@@ -140,9 +143,16 @@ export default function SessionMenu({
             onClick={() => setShowShortcuts(true)}
             className="flex items-center gap-2 hover:text-foreground cursor-pointer"
           >
-            <MessageCircleQuestion size={16} />
+            <Keyboard size={16} />
             Shortcuts
           </button>
+          <button
+            onClick={() => setShowFeedback(true)}
+            className="flex items-center gap-2 hover:text-foreground cursor-pointer"
+          >
+            <MessageCircleMore size={16} />
+            Feedback
+          </button>
         </div>
       </div>
     );
@@ -151,6 +161,7 @@ export default function SessionMenu({
   return (
     <>
       <KeyboardShortcutsDialog open={showShortcuts} onOpenChange={setShowShortcuts} />
+      <FeedbackDialog open={showFeedback} onOpenChange={setShowFeedback} />
       <DeleteSrcbookModal open={showDelete} onOpenChange={setShowDelete} session={session} />
       <ExportSrcbookModal open={showSave} onOpenChange={setShowSave} session={session} />
       <SettingsSheet

packages/web/src/lib/utils.ts

@@ -27,3 +27,18 @@ export function getTitleForSession(session: SessionType) {
   const titleCell = session.cells.find((cell: CellType) => cell.type === 'title') as TitleCellType;
   return titleCell?.text;
 }
+
+// POST feedback to Google Sheets
+// Because of CORS, we don't get a response here so this is a fire and forget.
+export async function sendFeedback(feedback: string) {
+  const url =
+    'https://script.google.com/macros/s/AKfycbxbNh5sEvmvuaYZyuNYY6vULEX1vyhkHrqoyfuUMBz3PG5RcekCVcuC4-ceboefxgF0FA/exec';
+
+  await fetch(url, {
+    method: 'POST',
+    redirect: 'follow',
+    mode: 'no-cors',
+    body: JSON.stringify({ feedback }),
+    headers: { 'Content-Type': 'text/plain;charset=utf-8' },
+  });
+}