added desc preview when appropriate

Author: nushea

src/app/components/upload-card/UploadCardRenderer.tsx

@@ -1,5 +1,5 @@
 import { ReactNode, useEffect, useState } from 'react';
-import { Box, Chip, Icon, IconButton, Icons, Text, color, config, toRem } from 'folds';
+import { Box, Chip, Icon, IconButton, Icons, Text, Tooltip, color, config, toRem } from 'folds';
 import { UploadStatus, UploadSuccess, useBindUploadAtom } from '$state/upload';
 import { useMatrixClient } from '$hooks/useMatrixClient';
 import { TUploadContent } from '$utils/matrix';
@@ -216,12 +216,31 @@ export function UploadCardRenderer({
           )}
           {isDescribed && (
             <DescriptionEditor
-              value={fileItem.formatted_body || fileItem.body || fileItem.file.name || ''}
-              onSave={(htmlBio) => {
-                setDesc(fileItem, htmlBio, htmlBio);
+              value={fileItem.formatted_body || fileItem.body}
+              onSave={(plainText, htmlContent) => {
+                setDesc(fileItem, plainText, htmlContent);
+                setIsDescribed(false);
               }}
             />
           )}
+          {!isDescribed && fileItem.body && fileItem.body.length > 0 && (
+            <Tooltip
+              style={{
+                maxHeight: toRem(105),
+              }}
+            >
+              <Text
+                size="T200"
+                style={{
+                  overflow: 'scroll',
+                  height: '100%',
+                  wordBreak: 'break-word',
+                }}
+              >
+                {fileItem.body}
+              </Text>
+            </Tooltip>
+          )}
         </>
       }
     >

src/app/components/upload-card/UploadDescriptionEditor.css.tsx

@@ -1,28 +1,28 @@
 import { style, globalStyle } from '@vanilla-extract/css';
 import { config } from 'folds';
 
-export const BioEditorContainer = style({
+export const DescriptionEditorContainer = style({
   backgroundColor: 'var(--sable-bg-container)',
   borderRadius: config.radii.R400,
   overflow: 'hidden',
 });
 
-globalStyle(`${BioEditorContainer} div[class*="EditorTextarea"]`, {
+globalStyle(`${DescriptionEditorContainer} div[class*="EditorTextarea"]`, {
   backgroundColor: 'var(--sable-bg-container) !important',
   border: 'none !important',
 });
 
-globalStyle(`${BioEditorContainer} [class*="Toolbar"]`, {
+globalStyle(`${DescriptionEditorContainer} [class*="Toolbar"]`, {
   backgroundColor: 'var(--sable-bg-container) !important',
   padding: 'var(--space-S100) !important',
   borderTop: '1px solid var(--sable-outline-variant) !important',
 });
 
-globalStyle(`${BioEditorContainer} [class*="Toolbar"] button`, {
+globalStyle(`${DescriptionEditorContainer} [class*="Toolbar"] button`, {
   backgroundColor: 'transparent !important',
   boxShadow: 'none !important',
 });
 
-globalStyle(`${BioEditorContainer} [class*="Toolbar"] button:hover`, {
+globalStyle(`${DescriptionEditorContainer} [class*="Toolbar"] button:hover`, {
   backgroundColor: 'var(--sable-surface-variant) !important',
 });

src/app/components/upload-card/UploadDescriptionEditor.tsx

@@ -39,22 +39,26 @@ import { EmojiBoard } from '$components/emoji-board';
 import { mobileOrTablet } from '$utils/user-agent';
 import * as css from './UploadDescriptionEditor.css';
 
-type BioEditorProps = {
+type DescriptionEditorProps = {
   value?: string | any;
   isSaving?: boolean;
   imagePackRooms?: any[];
-  onSave: (htmlContent: string) => void;
+  onSave: (plaintext: string, htmlContent: string) => void;
 };
 
-export function DescriptionEditor({ value, isSaving, imagePackRooms, onSave }: BioEditorProps) {
+export function DescriptionEditor({
+  value,
+  isSaving,
+  imagePackRooms,
+  onSave,
+}: DescriptionEditorProps) {
   const editor = useEditor();
   const [enterForNewline] = useSetting(settingsAtom, 'enterForNewline');
   const [isMarkdown] = useSetting(settingsAtom, 'isMarkdown');
   const [toolbar, setToolbar] = useState(false);
 
   const [autocompleteQuery, setAutocompleteQuery] =
     useState<AutocompleteQuery<AutocompletePrefix>>();
-  const [hasChanged, setHasChanged] = useState(false);
 
   const prevValue = useRef(value);
   const initialized = useRef(false);
@@ -69,8 +73,7 @@ export function DescriptionEditor({ value, isSaving, imagePackRooms, onSave }: B
       })
     );
 
-    onSave(customHtml || plainText);
-    setHasChanged(false);
+    onSave(plainText, customHtml || plainText);
   }, [editor, isMarkdown, onSave]);
 
   useEffect(() => {
@@ -109,7 +112,6 @@ export function DescriptionEditor({ value, isSaving, imagePackRooms, onSave }: B
       Transforms.select(editor, Editor.start(editor, []));
 
       initialized.current = true;
-      setHasChanged(false);
     }
   }, [value, editor, isMarkdown]);
 
@@ -146,12 +148,15 @@ export function DescriptionEditor({ value, isSaving, imagePackRooms, onSave }: B
   const handleEmoticonSelect = (key: string, shortcode: string) => {
     editor.insertNode(createEmoticonElement(key, shortcode));
     moveCursor(editor);
-    setHasChanged(true);
   };
 
   return (
     <Box direction="Column" gap="100">
-      <Box className={css.BioEditorContainer} direction="Column" style={{ position: 'relative' }}>
+      <Box
+        className={css.DescriptionEditorContainer}
+        direction="Column"
+        style={{ position: 'relative' }}
+      >
         {autocompleteQuery?.prefix === AutocompletePrefix.Emoticon && (
           <EmoticonAutocomplete
             imagePackRooms={imagePackRooms || []}
@@ -176,19 +181,17 @@ export function DescriptionEditor({ value, isSaving, imagePackRooms, onSave }: B
                 gap="100"
               >
                 <Box gap="200" alignItems="Center">
-                  {hasChanged && (
-                    <Chip
-                      onClick={handleSave}
-                      variant="Primary"
-                      radii="Pill"
-                      outlined
-                      before={
-                        isSaving ? <Spinner variant="Primary" fill="Soft" size="100" /> : undefined
-                      }
-                    >
-                      <Text size="B300">{isSaving ? 'Saving' : 'Save'}</Text>
-                    </Chip>
-                  )}
+                  <Chip
+                    onClick={handleSave}
+                    variant="Primary"
+                    radii="Pill"
+                    outlined
+                    before={
+                      isSaving ? <Spinner variant="Primary" fill="Soft" size="100" /> : undefined
+                    }
+                  >
+                    <Text size="B300">{isSaving ? 'Saving' : 'Save'}</Text>
+                  </Chip>
                 </Box>
                 <Box gap="Inherit">
                   <IconButton