diff --git a/package.json b/package.json index 7c92140..151c787 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8716ebc..bd3d2b9 100644 --- a/pnpm-lock.yaml +++ b/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 diff --git a/src/TransformGridItem/index.tsx b/src/TransformGridItem/index.tsx index 11081da..cd7a4e0 100644 --- a/src/TransformGridItem/index.tsx +++ b/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 = ({ 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({ error: false, value: '' @@ -90,13 +92,18 @@ export const TransformGridItem: FC = ({ transform }) => { } return ( -
+
-

{transform.name}

+

setClosed(!closed)} + className={style.name}> + + {transform.name} +

{[...options.values()] @@ -162,11 +169,13 @@ export const TransformGridItem: FC = ({ transform }) => {
-