feat: longer descriptions

closes #182

src/element/stream-editor/index.tsx

@@ -168,17 +168,16 @@ export function StreamEditor({ ev, onFinish, options }: StreamEditorProps) {
       )}
       {(options?.canSetSummary ?? true) && (
         <StreamInput label={<FormattedMessage defaultMessage="Summary" />}>
-          <input
-            type="text"
-            placeholder={formatMessage({ defaultMessage: "A short description of the content" })}
+          <textarea
+            rows={5}
+            placeholder={formatMessage({ defaultMessage: "A description of the stream" })}
             value={summary}
-            onChange={e => setSummary(e.target.value)}
-          />
+            onChange={e => setSummary(e.target.value)} />
         </StreamInput>
       )}
       {(options?.canSetImage ?? true) && (
         <StreamInput label={<FormattedMessage defaultMessage="Cover Image" />}>
-          {image && <img src={image} className="mb-2 aspect-video object-cover rounded-xl" />}
+          {image && <img src={image} className="mb-2 aspect-video object-cover rounded-xl max-h-[200px] mx-auto" />}
           <div className="flex gap-2">
             <input type="text" placeholder="https://" value={image} onChange={e => setImage(e.target.value)} />
             <FileUploader onResult={v => setImage(v ?? "")} onError={e => setError(e.toString())} />

src/element/stream/summary.tsx

@@ -1,24 +1,38 @@
 import { useState } from "react";
 import { FormattedMessage } from "react-intl";
+import { Text } from "../text";
 
 export function StreamSummary({ text }: { text: string }) {
   const [expand, setExpand] = useState(false);
 
-  const cutOff = 100;
+  const cutOff = Math.min(100, [...text].reduce((acc, v, i) => {
+    if (v === '\n' && acc[0] < 3) {
+      acc[0] += 1;
+      acc[1] = i;
+    }
+    return acc;
+  }, [0, 0])[1]);
   const shouldExpand = text.length > cutOff;
   return (
     <div className="whitespace-pre text-pretty">
-      {shouldExpand && !expand ? text.slice(0, cutOff) : text}
-      {shouldExpand && (
+      {shouldExpand && !expand ? text.slice(0, cutOff) : <Text content={text} tags={[]} />}
+      {shouldExpand && <>
         <span
           className="text-primary text-bold cursor-pointer"
           onClick={() => {
             setExpand(x => !x);
           }}>
-          {expand && <FormattedMessage defaultMessage="Hide" />}
+          &nbsp;
           {!expand && <FormattedMessage defaultMessage="...more" />}
         </span>
-      )}
+        {expand && <div className="text-primary text-bold cursor-pointer"
+          onClick={() => {
+            setExpand(x => !x);
+          }}>
+          <FormattedMessage defaultMessage="Hide" />
+        </div>}
+      </>
+      }
     </div>
   );
 }