feat(zbugs): Put limits on textareas too for UI feedback.

apps/zbugs/src/limits.ts

@@ -0,0 +1,8 @@
+// NOTE: These limits are also in the postgres schema. These here are just for
+// UI feedback.
+export const MAX_ISSUE_TITLE_LENGTH = 128;
+export const MAX_ISSUE_DESCRIPTION_LENGTH = 10 * 1024;
+
+// The launch post has a special maxLength because trolls.
+export const maxCommentLength = (issueID: string) =>
+  issueID === 'duuW9Nyj5cTNLlimp9Qje' ? 1024 : 64 * 1024;

apps/zbugs/src/pages/issue/comment-composer.tsx

@@ -4,6 +4,7 @@ import {Button} from '../../components/button.js';
 import {useLogin} from '../../hooks/use-login.js';
 import {useZero} from '../../hooks/use-zero.js';
 import {isCtrlEnter} from './is-ctrl-enter.js';
+import {maxCommentLength} from '../../limits.js';
 
 export function CommentComposer({
   id,
@@ -83,6 +84,8 @@ export function CommentComposer({
         onChange={handleChange}
         onKeyDown={handleKeyDown}
         className="comment-input autoResize"
+        /* The launch post has a speical maxLength because trolls */
+        maxLength={maxCommentLength(issueID)}
       />
       <Button
         className="secondary-button"

apps/zbugs/src/pages/issue/issue-composer.tsx

@@ -4,6 +4,10 @@ import {Button} from '../../components/button.js';
 import {Modal, ModalActions, ModalBody} from '../../components/modal.js';
 import {useZero} from '../../hooks/use-zero.js';
 import {isCtrlEnter} from './is-ctrl-enter.js';
+import {
+  MAX_ISSUE_DESCRIPTION_LENGTH,
+  MAX_ISSUE_TITLE_LENGTH,
+} from '../../limits.js';
 
 interface Props {
   /** If id is defined the issue created by the composer. */
@@ -103,6 +107,7 @@ export function IssueComposer({isOpen, onDismiss}: Props) {
             ref={focusInput} // Attach the inputRef to this input field
             onChange={e => setTitle(e.target.value)}
             onKeyDown={handleKeyDown}
+            maxLength={MAX_ISSUE_TITLE_LENGTH}
           />
         </div>
         <div className="w-full px-4">
@@ -112,6 +117,7 @@ export function IssueComposer({isOpen, onDismiss}: Props) {
             onChange={e => setDescription(e.target.value)}
             onKeyDown={handleKeyDown}
             placeholder="Add description..."
+            maxLength={MAX_ISSUE_DESCRIPTION_LENGTH}
           ></textarea>
         </div>
       </ModalBody>

apps/zbugs/src/pages/issue/issue-page.tsx

@@ -50,6 +50,10 @@ import {preload} from '../../zero-setup.js';
 import {CommentComposer} from './comment-composer.js';
 import {Comment} from './comment.js';
 import {isCtrlEnter} from './is-ctrl-enter.js';
+import {
+  MAX_ISSUE_DESCRIPTION_LENGTH,
+  MAX_ISSUE_TITLE_LENGTH,
+} from '../../limits.js';
 
 const emojiToastShowDuration = 3_000;
 
@@ -442,6 +446,7 @@ export function IssuePage({onReady}: {onReady: () => void}) {
                 autoFocus
                 onChange={e => setEdits({...edits, title: e.target.value})}
                 onKeyDown={e => isCtrlEnter(e) && save()}
+                maxLength={MAX_ISSUE_TITLE_LENGTH}
               />
             </div>
           )}
@@ -471,6 +476,7 @@ export function IssuePage({onReady}: {onReady: () => void}) {
                   setEdits({...edits, description: e.target.value})
                 }
                 onKeyDown={e => isCtrlEnter(e) && save()}
+                maxLength={MAX_ISSUE_DESCRIPTION_LENGTH}
               />
             </div>
           )}