feat: hide transform when click title

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@fontsource-variable/jetbrains-mono": "^5.1.1",
     "@monaco-editor/react": "^4.6.0",
+    "@uidotdev/usehooks": "^2.4.1",
     "clsx": "^2.1.1",
     "framer-motion": "^11.11.10",
     "json5": "^2.2.3",

pnpm-lock.yaml

@@ -14,6 +14,9 @@ importers:
       '@monaco-editor/react':
         specifier: ^4.6.0
         version: 4.6.0(monaco-editor@0.52.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@uidotdev/usehooks':
+        specifier: ^2.4.1
+        version: 2.4.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
@@ -661,6 +664,13 @@ packages:
     resolution: {integrity: sha512-EaewX6lxSjRJnc+99+dqzTeoDZUfyrA52d2/HRrkI830kgovWsmIiTfmr0NZorzqic7ga+1bS60lRBUgR3n/Bw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@uidotdev/usehooks@2.4.1':
+    resolution: {integrity: sha512-1I+RwWyS+kdv3Mv0Vmc+p0dPYH0DTRAo04HLyXReYBL9AeseDWUJyi4THuksBJcu9F0Pih69Ak150VDnqbVnXg==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      react: '>=18.0.0'
+      react-dom: '>=18.0.0'
+
   '@vitejs/plugin-react-swc@3.7.1':
     resolution: {integrity: sha512-vgWOY0i1EROUK0Ctg1hwhtC3SdcDjZcdit4Ups4aPkDcB1jYhmo+RMYWY87cmXMhvtD5uf8lV89j2w16vkdSVg==}
     peerDependencies:
@@ -1840,6 +1850,11 @@ snapshots:
       '@typescript-eslint/types': 8.11.0
       eslint-visitor-keys: 3.4.3
 
+  '@uidotdev/usehooks@2.4.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   '@vitejs/plugin-react-swc@3.7.1(vite@5.4.10(@types/node@22.8.1)(sass-embedded@1.80.4))':
     dependencies:
       '@swc/core': 1.7.39

src/TransformGridItem/index.tsx

@@ -14,6 +14,7 @@ import {
   WrappedTransform,
   WrappedTransformResult
 } from "../Transforms/Transform";
+import { useLocalStorage } from "@uidotdev/usehooks";
 
 interface TransformGridItemProp {
   transform: WrappedTransform
@@ -22,6 +23,7 @@ interface TransformGridItemProp {
 export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
   const [value, setValue] = useRecoilState(EditorValueState)
   const [options, setOptions] = useState(transform.options)
+  const [closed, setClosed] = useLocalStorage(`transform_closed__${transform.name}`, false)
   const [result, setResult] = useState<WrappedTransformResult>({
     error: false,
     value: ''
@@ -90,13 +92,18 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
   }
 
   return (
-    <div className={style.item}>
+    <div className={clsx(style.item, closed && style.closed)}>
       <div className={style.toolbar}>
         <Button disabled={result.error} onClick={onForwardButtonPressed}>
           &lt;&lt;&lt;
         </Button>
         
-        <h2 className={style.name}>{transform.name}</h2>
+        <h2
+          onClick={() => setClosed(!closed)}
+          className={style.name}>
+
+          {transform.name}
+        </h2>
         
         <div className={style.options}>
           {[...options.values()]
@@ -162,11 +169,13 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
         </div>
       </div>
 
-      <TextArea
+      {!closed &&
-        readOnly
+        <TextArea
-        value={result.value}
+          readOnly
-        placeholder="(empty)"
+          value={result.value}
-        className={clsx(result.error && style.error)} />
+          placeholder="(empty)"
+          className={clsx(result.error && style.error)} />
+      }
     </div>
   )
 }

src/TransformGridItem/style.module.scss

@@ -6,6 +6,10 @@
   flex-direction: column;
   min-height: 250px;
 
+  &.closed {
+    min-height: inherit;
+  }
+
   .toolbar {
     display: flex;
     gap: 10px;
@@ -17,6 +21,11 @@
     .name {
       font-size: inherit;
       padding: 14px 6px;
+      cursor: pointer;
+
+      &:hover {
+        text-decoration: underline dotted;
+      }
     }
 
     .options {