Add banner explaining static openscad images

app/web/src/components/IdeWrapper/IdeWrapper.tsx

@@ -14,8 +14,6 @@ interface Props {
 }
 
 const IdeWrapper = ({ cadPackage }: Props) => {
-  const [shouldShowConstructionMessage, setShouldShowConstructionMessage] =
-    useState(true)
   const { state, project } = useIdeContext()
   const handleRender = useRender()
   const saveCode = useSaveCode()
@@ -34,26 +32,6 @@ const IdeWrapper = ({ cadPackage }: Props) => {
         <nav className="flex">
           <IdeHeader handleRender={onRender} />
         </nav>
-        {shouldShowConstructionMessage && (
-          <div className="py-1 md:py-2 bg-pink-200 flex">
-            <div className="flex-grow text-center text-xs md:text-base">
-              We're still working on this. Since you're here, have a look what{' '}
-              <OutBound
-                className="text-pink-700"
-                to="https://github.com/Irev-Dev/cadhub/discussions/212"
-              >
-                we've got planned
-              </OutBound>
-              .
-            </div>
-            <button
-              className="flex mr-3"
-              onClick={() => setShouldShowConstructionMessage(false)}
-            >
-              <Svg className="h-4 w-6 text-gray-500 items-center" name="x" />
-            </button>
-          </div>
-        )}
         <IdeContainer />
       </div>
     </div>

app/web/src/components/OpenscadStaticImageMessage/OpenscadStaticImageMessage.tsx

@@ -0,0 +1,14 @@
+import OutBound from 'src/components/OutBound/OutBound'
+import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
+
+const OpenscadStaticImageMessage = () => {
+  const { state } = useIdeContext()
+  if (state.ideType !== 'openscad' || state.objectData?.type !== 'png') {
+    return null
+  }
+  return (
+    <OutBound to="https://learn.cadhub.xyz/docs/general-cadhub/openscad-previews" className="text-ch-gray-300 border-ch-gray-300 rounded-md mr-12 px-2 py-1 text-xs">Why reload each camera move?</OutBound>
+  )
+}
+
+export default OpenscadStaticImageMessage

app/web/src/components/PanelToolbar/PanelToolbar.tsx

@@ -1,12 +1,13 @@
 import { useContext } from 'react'
 import { MosaicWindowContext } from 'react-mosaic-component'
 import Svg from 'src/components/Svg/Svg'
+import OpenscadStaticImageMessage from 'src/components/OpenscadStaticImageMessage/OpenscadStaticImageMessage'
 
 const PanelToolbar = ({
   panelName,
   showTopGradient,
 }: {
-  panelName: string
+  panelName: 'Viewer' | 'Console'
   showTopGradient?: boolean
 }) => {
   const { mosaicWindowActions } = useContext(MosaicWindowContext)
@@ -16,6 +17,7 @@ const PanelToolbar = ({
         <div className="absolute inset-x-0 top-0 h-10 bg-gradient-to-b from-ch-gray-800 to-transparent" />
       )}
       <div className="absolute top-0 right-0 flex items-center h-9">
+        {panelName === 'Viewer' && <OpenscadStaticImageMessage />}
         <button
           className="bg-ch-gray-760 text-ch-gray-300 px-3 rounded-bl-lg h-full cursor-not-allowed"
           aria-label={`${panelName} settings`}

app/web/src/components/ProjectProfile/ProjectProfile.tsx

@@ -16,6 +16,7 @@ import Gravatar from 'src/components/Gravatar/Gravatar'
 import { useIdeInit } from 'src/components/EncodedUrl/helpers'
 import ProfileViewer from '../ProfileViewer/ProfileViewer'
 import Svg from 'src/components/Svg/Svg'
+import OpenscadStaticImageMessage from 'src/components/OpenscadStaticImageMessage/OpenscadStaticImageMessage'
 
 const KeyValue = ({
   keyName,
@@ -133,6 +134,9 @@ const ProjectProfile = ({
             {/* Viewer */}
             <div className="md:col-start-2 w-full min-h-md relative">
               <ProfileViewer />
+              <div className="absolute right-0 top-0">
+                <OpenscadStaticImageMessage />
+              </div>
             </div>
 
             {/* Side panel */}