fix: more smooth logics when preview unavailable

package.json

@@ -20,6 +20,7 @@
     "normalize.css": "^8.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-tooltip": "^5.28.0",
     "recoil": "^0.7.7",
     "strtime": "^1.1.2",
     "styled-components": "^6.1.13",

pnpm-lock.yaml

@@ -38,6 +38,9 @@ importers:
       react-dom:
         specifier: ^18.3.1
         version: 18.3.1(react@18.3.1)
+      react-tooltip:
+        specifier: ^5.28.0
+        version: 5.28.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       recoil:
         specifier: ^0.7.7
         version: 0.7.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -283,6 +286,15 @@ packages:
     resolution: {integrity: sha512-HFZ4Mp26nbWk9d/BpvP0YNL6W4UoZF0VFcTw/aPPA8RpOxeFQgK+ClABGgAUXs9Y/RGX/l1vOmrqz1MQt9MNuw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@floating-ui/core@1.6.8':
+    resolution: {integrity: sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==}
+
+  '@floating-ui/dom@1.6.12':
+    resolution: {integrity: sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==}
+
+  '@floating-ui/utils@0.2.8':
+    resolution: {integrity: sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==}
+
   '@fontsource-variable/jetbrains-mono@5.1.1':
     resolution: {integrity: sha512-V+1aRFRvuZ66PpO30s8l/2aADKzpV9VRsO3kSZE+rTMvi4vab3cUcPHMN2z+wAvjkYJO71Yf+g3/Y6pSMmQpVQ==}
 
@@ -727,6 +739,9 @@ packages:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
 
+  classnames@2.5.1:
+    resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==}
+
   clsx@2.1.1:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
@@ -1091,6 +1106,12 @@ packages:
     peerDependencies:
       react: ^18.3.1
 
+  react-tooltip@5.28.0:
+    resolution: {integrity: sha512-R5cO3JPPXk6FRbBHMO0rI9nkUG/JKfalBSQfZedZYzmqaZQgq7GLzF8vcCWx6IhUCKg0yPqJhXIzmIO5ff15xg==}
+    peerDependencies:
+      react: '>=16.14.0'
+      react-dom: '>=16.14.0'
+
   react@18.3.1:
     resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
     engines: {node: '>=0.10.0'}
@@ -1535,6 +1556,17 @@ snapshots:
     dependencies:
       levn: 0.4.1
 
+  '@floating-ui/core@1.6.8':
+    dependencies:
+      '@floating-ui/utils': 0.2.8
+
+  '@floating-ui/dom@1.6.12':
+    dependencies:
+      '@floating-ui/core': 1.6.8
+      '@floating-ui/utils': 0.2.8
+
+  '@floating-ui/utils@0.2.8': {}
+
   '@fontsource-variable/jetbrains-mono@5.1.1': {}
 
   '@humanfs/core@0.19.0': {}
@@ -1909,6 +1941,8 @@ snapshots:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
 
+  classnames@2.5.1: {}
+
   clsx@2.1.1: {}
 
   color-convert@2.0.1:
@@ -2265,6 +2299,13 @@ snapshots:
       react: 18.3.1
       scheduler: 0.23.2
 
+  react-tooltip@5.28.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@floating-ui/dom': 1.6.12
+      classnames: 2.5.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   react@18.3.1:
     dependencies:
       loose-envify: 1.4.0

src/TransformGridItem/index.tsx

@@ -16,6 +16,7 @@ import {
 } from "../Transforms/Transform";
 import { useLocalStorage } from "@uidotdev/usehooks";
 import { AnimatePresence, motion } from "framer-motion";
+import { Tooltip } from 'react-tooltip'
 
 interface TransformGridItemProp {
   transform: WrappedTransform
@@ -45,7 +46,7 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
   }, [])
   
   useEffect(() => {
-    if (closed)
+    if (previewDisabled)
       return
 
     triggerTransform()
@@ -55,6 +56,10 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
     if (value.length > 30000) {
       setClosed(true)
       setPreviewDisabled(true)
+      setResult({
+        error: false,
+        value: ''
+      })
       return
     }
 
@@ -138,9 +143,18 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
   return (
     <div className={clsx(style.item, closed && style.closed)}>
       <div className={style.toolbar}>
-        <Button disabled={result.error} onClick={onForwardButtonPressed}>
-          &lt;&lt;&lt;
-        </Button>
+        <div data-tooltip-id={`${transform.name}-tooltip`}>
+          <Button
+            disabled={result.error}
+            onClick={onForwardButtonPressed}>
+
+            &lt;&lt;&lt;
+          </Button>
+        </div>
+
+        <Tooltip id={`${transform.name}-tooltip`} place="bottom">
+          {previewDisabled && result.error && result.value}
+        </Tooltip>
         
         <h2
           onClick={onLabelClicked}

src/TransformGridItem/style.module.scss

@@ -29,7 +29,7 @@
       padding: 14px 2px;
       gap: 10px;
       height: 100%;
-      overflow-x: scroll;
+      overflow-x: auto;
       scrollbar-width: thin;
       scrollbar-color: gray #323232;
       align-items: center;

src/main.tsx

@@ -1,7 +1,9 @@
 import { StrictMode } from 'react'
+import { RecoilRoot } from 'recoil'
 import { createRoot } from 'react-dom/client'
 
 import 'normalize.css/normalize.css'
+import 'react-tooltip/dist/react-tooltip.css'
 import '@fontsource-variable/jetbrains-mono/index.css'
 
 // ---
@@ -9,7 +11,6 @@ import '@fontsource-variable/jetbrains-mono/index.css'
 import './main.css'
 import { App } from './App'
 import { LandingAnimation } from './LandingAnimation'
-import { RecoilRoot } from 'recoil'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>