added discussion page examples, fixed hotkey for discussion input

Author: conradkoh

apps/webapp/src/app/test/discussion/page.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { Discussion } from '@/modules/discussion/discussion';
+
+export default function DiscussionTestPage() {
+  return (
+    <div className="container mx-auto py-8 px-4">
+      <h1 className="text-3xl font-bold mb-6">Discussion Test Page</h1>
+
+      <div className="space-y-8">
+        {/* Basic Discussion Example */}
+        <div>
+          <h2 className="text-xl font-semibold mb-4">Basic Discussion</h2>
+          <div className="max-w-md">
+            <Discussion title="Team Feedback" discussionKey="test-team-feedback" />
+          </div>
+        </div>
+
+        {/* Project Planning Discussion */}
+        <div>
+          <h2 className="text-xl font-semibold mb-4">Project Planning</h2>
+          <div className="max-w-md">
+            <Discussion title="Q4 Planning Session" discussionKey="test-q4-planning" />
+          </div>
+        </div>
+
+        {/* Feature Discussion */}
+        <div>
+          <h2 className="text-xl font-semibold mb-4">Feature Discussion</h2>
+          <div className="max-w-md">
+            <Discussion title="New Feature Ideas" discussionKey="test-feature-ideas" />
+          </div>
+        </div>
+
+        {/* Side-by-side Layout Example */}
+        <div>
+          <h2 className="text-xl font-semibold mb-4">Multiple Discussions</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div>
+              <h3 className="text-lg font-medium mb-2">Technical Discussion</h3>
+              <Discussion title="Architecture Review" discussionKey="test-architecture-review" />
+            </div>
+            <div>
+              <h3 className="text-lg font-medium mb-2">General Discussion</h3>
+              <Discussion title="Open Forum" discussionKey="test-open-forum" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/webapp/src/modules/discussion/discussion-form.tsx

@@ -4,7 +4,7 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
-import { useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 interface DiscussionFormProps {
   initialName?: string;
@@ -16,26 +16,40 @@ export function DiscussionForm({ initialName = '', onSubmit, onCancel }: Discuss
   const [name, setName] = useState(initialName);
   const [message, setMessage] = useState('');
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const formRef = useRef<HTMLFormElement>(null);
 
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
+  const handleSubmit = useCallback(
+    async (e?: React.FormEvent) => {
+      if (e) {
+        e.preventDefault();
+      }
 
-    if (!name.trim() || !message.trim()) return;
+      if (!name.trim() || !message.trim() || isSubmitting) return;
 
-    setIsSubmitting(true);
-    try {
-      const success = await onSubmit(name, message);
-      if (success) {
-        // Clear message but keep name for future submissions
-        setMessage('');
+      setIsSubmitting(true);
+      try {
+        const success = await onSubmit(name, message);
+        if (success) {
+          // Clear message but keep name for future submissions
+          setMessage('');
+        }
+      } finally {
+        setIsSubmitting(false);
       }
-    } finally {
-      setIsSubmitting(false);
+    },
+    [name, message, onSubmit, isSubmitting]
+  );
+
+  const handleTextareaKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    // Cmd/Ctrl + Enter to submit the form
+    if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+      e.preventDefault();
+      handleSubmit();
     }
   };
 
   return (
-    <form onSubmit={handleSubmit} className="space-y-4">
+    <form onSubmit={handleSubmit} className="space-y-4" ref={formRef}>
       <div className="space-y-2">
         <Label htmlFor="name">Your Name</Label>
         <Input
@@ -56,6 +70,7 @@ export function DiscussionForm({ initialName = '', onSubmit, onCancel }: Discuss
           placeholder="Share your thoughts..."
           value={message}
           onChange={(e) => setMessage(e.target.value)}
+          onKeyDown={handleTextareaKeyDown}
           required
           disabled={isSubmitting}
           className="w-full min-h-[100px]"