chore(collections/board): basic multiline editing

apps/client/src/widgets/collections/board/card.tsx

@@ -82,6 +82,7 @@ export default function Card({
                         setTitle(newTitle);
                     }}
                     dismiss={() => api.dismissEditingTitle()}
+                    multiline
                 />
             )}
         </div>

apps/client/src/widgets/collections/board/index.css

@@ -175,9 +175,11 @@
   border-color: var(--main-text-color);
   display: flex;
   align-items: center;
+  padding: 0;
 }
 
-.board-view-container .board-note.editing input {
+.board-view-container .board-note.editing input,
+.board-view-container .board-note.editing textarea {
   background: transparent;
   border: none;
   outline: none;
@@ -185,7 +187,13 @@
   font-size: inherit;
   color: inherit;
   width: 100%;
-  padding: 0;
+  padding: 0.5em;
+}
+
+.board-view-container .board-note.editing textarea {
+  height: auto;
+  field-sizing: content;
+  resize: none;
 }
 
 .board-view-container .board-note .icon {

apps/client/src/widgets/collections/board/index.tsx

@@ -11,6 +11,7 @@ import { createContext } from "preact";
 import { onWheelHorizontalScroll } from "../../widget_utils";
 import Column from "./column";
 import BoardApi from "./api";
+import FormTextArea from "../../react/FormTextArea";
 
 export interface BoardViewData {
     columns?: BoardColumnData[];
@@ -256,22 +257,26 @@ function AddNewColumn({ viewConfig, saveConfig }: { viewConfig?: BoardViewData,
     )
 }
 
-export function TitleEditor({ currentValue, save, dismiss }: {
+export function TitleEditor({ currentValue, save, dismiss, multiline }: {
     currentValue: string,
     save: (newValue: string) => void,
-    dismiss: () => void
+    dismiss: () => void,
+    multiline?: boolean
 }) {
-    const inputRef = useRef<HTMLInputElement>(null);
+    const inputRef = useRef<any>(null);
 
     useEffect(() => {
         inputRef.current?.focus();
         inputRef.current?.select();
     }, [ inputRef ]);
 
+    const Element = multiline ? FormTextArea : FormTextBox;
+
     return (
-        <FormTextBox
+        <Element
             inputRef={inputRef}
             currentValue={currentValue}
+            rows={multiline ? 4 : undefined}
             onKeyDown={(e) => {
                 if (e.key === "Enter") {
                     const newValue = e.currentTarget.value;