Refactor the TextItem component to consolidate expanded and collapsed states into a single header element

Author: robertpiosik

.prettierrc

@@ -1,5 +1,6 @@
 {
   "singleQuote": true,
   "trailingComma": "none",
+  "semi": false,
   "printWidth": 80
 }

packages/ui/src/components/editor/panel/ResponsePreview/components/TextItem.module.scss

@@ -1,3 +1,8 @@
+.container {
+  display: flex;
+  flex-direction: column;
+}
+
 .text {
   margin: var(--padding-6px) var(--padding-12px);
   word-wrap: break-word;
@@ -30,26 +35,28 @@
 
   &__collapse > span {
     cursor: pointer;
-    font-weight: 500;
+    font-style: italic;
     font-size: var(--font-size-12px);
+    color: var(--cwc-text-color-dimmed);
 
     &:hover {
       text-decoration: underline;
     }
   }
 }
 
-.hidden {
+.header {
   display: flex;
   align-items: center;
   margin: 0 var(--padding-12px);
   padding-right: var(--padding-9px);
   position: relative;
+  cursor: pointer;
 
   &:hover {
     color: var(--cwc-text-color);
 
-    & .hidden__line {
+    & .header__line {
       background-color: var(--cwc-border-color) !important;
     }
   }

packages/ui/src/components/editor/panel/ResponsePreview/components/TextItem.tsx

@@ -1,7 +1,6 @@
 import { FC, useRef } from 'react'
 import ReactMarkdown from 'react-markdown'
 import styles from './TextItem.module.scss'
-import cn from 'classnames'
 import { IconButton } from '../../IconButton'
 
 type Props = {
@@ -11,15 +10,32 @@ type Props = {
 }
 
 export const TextItem: FC<Props> = (props) => {
-  const ref = useRef<HTMLDivElement>(null)
+  const header_ref = useRef<HTMLDivElement>(null)
 
   return (
-    <>
-      {props.is_expanded ? (
+    <div className={styles.container}>
+      <div
+        ref={header_ref}
+        className={styles.header}
+        onClick={() =>
+          header_ref.current && props.on_toggle(header_ref.current)
+        }
+        title={props.content}
+      >
+        <IconButton
+          codicon_icon={props.is_expanded ? 'chevron-down' : 'chevron-right'}
+        />
+        <div className={styles.header__line} />
+        <span className={styles.header__tokens}>
+          {Math.floor(props.content.length * 0.25) || 1}
+        </span>
+      </div>
+      {props.is_expanded && (
         <div
-          ref={ref}
           className={styles.text}
-          onClick={() => ref.current && props.on_toggle(ref.current)}
+          onClick={() =>
+            header_ref.current && props.on_toggle(header_ref.current)
+          }
         >
           <ReactMarkdown disallowedElements={['hr']}>
             {props.content}
@@ -28,20 +44,7 @@ export const TextItem: FC<Props> = (props) => {
             <span>Show less</span>
           </div>
         </div>
-      ) : (
-        <div
-          ref={ref}
-          className={styles.hidden}
-          onClick={() => ref.current && props.on_toggle(ref.current)}
-          title={props.content}
-        >
-          <IconButton codicon_icon="chevron-right" />
-          <div className={styles.hidden__line} />
-          <span className={styles.hidden__tokens}>
-            {Math.floor(props.content.length * 0.25) || 1}
-          </span>
-        </div>
       )}
-    </>
+    </div>
   )
 }