testeranto 0.202.0 → 0.203.0

package/src/components/pure/AppFrame.tsx

@@ -1,17 +1,24 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import React from 'react';
-import { Container, Nav, OverlayTrigger, Tooltip, Navbar } from 'react-bootstrap';
-import { NavLink } from 'react-router-dom';
-import { useLocation } from 'react-router-dom';
+import React, { useEffect, useState } from "react";
+import {
+  Container,
+  Nav,
+  OverlayTrigger,
+  Tooltip,
+  Navbar,
+} from "react-bootstrap";
+import { NavLink } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 
-import { useWebSocket, useTutorialMode, useAuth } from '../../App';
-import { UserProfile } from './UserProfile';
+import { useWebSocket, useTutorialMode, useAuth } from "../../App";
+import { UserProfile } from "./UserProfile";
+import { HelpoChatDrawer } from "./HelpoChatDrawer";
 
 type AppFrameProps = {
   children: React.ReactNode;
   className?: string;
   style?: React.CSSProperties;
-  'data-testid'?: string;
+  "data-testid"?: string;
   title?: string;
   rightContent?: React.ReactNode;
 };
@@ -21,75 +28,85 @@ export const AppFrame = ({ children, title, rightContent }: AppFrameProps) => {
   const { isConnected } = useWebSocket();
   const { tutorialMode } = useTutorialMode();
   const { isAuthenticated, logout } = useAuth();
+  const [hasAnimated, setHasAnimated] = useState(false);
+  const [isHelpoActive, setIsHelpoActive] = useState(false);
+
+  // Add CSS for the brand logo animation
+  const brandLogoStyle = `
+    .brand-logo:hover {
+      transform: scale(1.1);
+      transition: transform 0.3s ease;
+    }
+    .brand-logo:active {
+      transform: scale(0.95);
+    }
+  `;
+
+  useEffect(() => {
+    // Only animate on the first load
+    if (!hasAnimated) {
+      const timer = setTimeout(() => {
+        setHasAnimated(true);
+      }, 4000); // Stop animation after all links have animated (1s + 1.8s = 2.8s, rounded up)
+      return () => clearTimeout(timer);
+    }
+  }, [hasAnimated]);
 
   return (
-    <div className="d-flex min-vh-100" >
+    <div className="d-flex min-vh-100">
+      <style>{brandLogoStyle}</style>
       {/* Sidebar - Always 60px wide, full height */}
       <div
-        className="border-end d-flex flex-column"
+        className={`border-end d-flex flex-column ${!hasAnimated ? 'sidebar-attention' : ''}`}
         style={{
-          width: '60px',
-          height: '100vh',
-          position: 'sticky',
-          top: 0
+          flexBasis: "100px" /* Sets the initial fixed width */,
+          flexGrow: "0" /* Prevents the item from growing */,
+          flexShrink: "0",
+
+          height: "100vh",
+          position: "sticky",
+          top: 0,
         }}
       >
-        {/* Logo - Not clickable */}
-        {tutorialMode ? (
-          <OverlayTrigger
-            placement="right"
-            overlay={
-              <Tooltip id="logo-tooltip">
-                Welcome to Testeranto!
-              </Tooltip>
-            }
-          >
-            <div className="p-3 border-bottom d-flex align-items-center justify-content-center">
-              <img
-                src="/logo.svg"
-                alt="Testeranto Logo"
-                style={{
-                  width: '40px',
-                  height: '40px'
-                }}
-              />
-            </div>
-          </OverlayTrigger>
-        ) : (
-          <div className="p-3 border-bottom d-flex align-items-center justify-content-center">
-            <img
-              src="/logo.svg"
-              alt="Testeranto Logo"
-              style={{
-                width: '40px',
-                height: '40px'
-              }}
-            />
-          </div>
-        )}
 
         {/* Navigation */}
         <Nav variant="pills" className="flex-column p-2 flex-grow-1">
+
+          {/* Help Link - Always accessible */}
+          <Nav.Link
+            as={NavLink}
+            to="/helpo"
+            className={`${location.pathname === "/helpo" ? "active" : ""
+              } d-flex align-items-center justify-content-center ${!hasAnimated ? 'navbar-attention-1' : ''}`}
+          >
+            {tutorialMode ? (
+              <OverlayTrigger
+                placement="right"
+                overlay={<Tooltip id="help-tooltip">Chat with Helpo, the helpful robot.</Tooltip>}
+              >
+                <span>helpo</span>
+              </OverlayTrigger>
+            ) : (
+              <span>helpo</span>
+            )}
+          </Nav.Link>
+
           {/* Projects Link - Always clickable with hover, tutorial tooltip conditionally */}
           <Nav.Link
             as={NavLink}
-            to="/"
-            className={`${location.pathname === '/' ? 'active' : ''} d-flex align-items-center justify-content-center`}
-            style={{ height: '40px', width: '40px' }}
+            to="/projects"
+            className={`${location.pathname === "/projects" ? "active" : ""
+              } d-flex align-items-center justify-content-center ${!hasAnimated ? 'navbar-attention-2' : ''}`}
           >
             {tutorialMode ? (
               <OverlayTrigger
                 placement="right"
-                overlay={
-                  <Tooltip id="projects-tooltip">
-                    Projects
-                  </Tooltip>
-                }
+                overlay={<Tooltip id="projects-tooltip">Projects</Tooltip>}
               >
-                <span>📁</span>
+                <span>testo</span>
               </OverlayTrigger>
             ) : (
-              <span>📁</span>
+              <span>testo</span>
             )}
           </Nav.Link>
 
@@ -97,12 +114,12 @@ export const AppFrame = ({ children, title, rightContent }: AppFrameProps) => {
           <Nav.Link
             as={NavLink}
             to="/processes"
-            className={`${location.pathname.startsWith('/processes') ? 'active' : ''} d-flex align-items-center justify-content-center ${!isConnected || !isAuthenticated ? 'text-muted pe-none' : ''}`}
-            style={{
-              height: '40px',
-              width: '40px',
-              opacity: isConnected && isAuthenticated ? 1 : 0.6
-            }}
+            className={`${location.pathname.startsWith('/processes') ? 'active' : ''} d-flex align-items-center justify-content-center ${!hasAnimated ? 'navbar-attention-3' : ''}`}
+            // style={{
+            //   height: '40px',
+            //   width: '40px',
+            //   opacity: isConnected && isAuthenticated ? 1 : 0.6
+            // }}
             onClick={(e) => {
               if (!isConnected || !isAuthenticated) {
                 e.preventDefault();
@@ -114,14 +131,19 @@ export const AppFrame = ({ children, title, rightContent }: AppFrameProps) => {
                 placement="right"
                 overlay={
                   <Tooltip id="processes-tooltip">
-                    Processes {!isAuthenticated ? '(Sign in required)' : !isConnected ? '(WebSocket disconnected)' : ''}
+                    Processes{" "}
+                    {!isAuthenticated
+                      ? "(Sign in required)"
+                      : !isConnected
+                        ? "(WebSocket disconnected)"
+                        : ""}
                   </Tooltip>
                 }
               >
-                <span>📊</span>
+                <span>proĉo</span>
               </OverlayTrigger>
             ) : (
-              <span>📊</span>
+              <span>proĉo</span>
             )}
           </Nav.Link>
 
@@ -129,12 +151,14 @@ export const AppFrame = ({ children, title, rightContent }: AppFrameProps) => {
           <Nav.Link
             as={NavLink}
             to="/git"
-            className={`${location.pathname === '/git' ? 'active' : ''} d-flex align-items-center justify-content-center ${!isAuthenticated ? 'text-muted pe-none' : ''}`}
-            style={{
-              height: '40px',
-              width: '40px',
-              opacity: isAuthenticated ? 1 : 0.6
-            }}
+            className={`${location.pathname === "/git" ? "active" : ""
+              } d-flex align-items-center justify-content-center ${!isAuthenticated ? "text-muted pe-none" : ""
+              } ${!hasAnimated ? 'navbar-attention-4' : ''}`}
+            // style={{
+            //   height: '40px',
+            //   width: '40px',
+            //   opacity: isAuthenticated ? 1 : 0.6
+            // }}
             onClick={(e) => {
               if (!isAuthenticated) {
                 e.preventDefault();
@@ -146,96 +170,140 @@ export const AppFrame = ({ children, title, rightContent }: AppFrameProps) => {
                 placement="right"
                 overlay={
                   <Tooltip id="git-tooltip">
-                    Git Integration {!isAuthenticated ? '(Sign in required)' : ''}
+                    Git Integration{" "}
+                    {!isAuthenticated ? "(Sign in required)" : ""}
                   </Tooltip>
                 }
               >
-                <span>🐙</span>
+                <span>arbo</span>
               </OverlayTrigger>
             ) : (
-              <span>🐙</span>
+              <span>arbo</span>
             )}
           </Nav.Link>
 
-<<<<<<< HEAD
 
-          <Nav.Link
+          {/* <Nav.Link
             as={NavLink}
             to="/design-editor"
             className={`${location.pathname === '/design-editor' ? 'active' : ''} d-flex align-items-center justify-content-center`}
-=======
-          {/* SVG Editor Link - Darken if not authenticated */}
+          >
+            {tutorialMode ? (
+              <OverlayTrigger
+                placement="right"
+                overlay={<Tooltip id="design-editor-tooltip">
+                  Canvas editor
+                </Tooltip>
+                }
+              >
+                <span>kanvaso</span>
+              </OverlayTrigger>
+            ) : (
+              <span>kanvaso</span>
+            )}
+          </Nav.Link> */}
+
+
           <Nav.Link
             as={NavLink}
             to="/svg-editor"
-            className={`${location.pathname === '/svg-editor' ? 'active' : ''} d-flex align-items-center justify-content-center ${!isAuthenticated ? 'text-muted pe-none' : ''}`}
->>>>>>> 79d08b7b (svg editor)
-            style={{
-              height: '40px',
-              width: '40px',
-              opacity: isAuthenticated ? 1 : 0.6
-            }}
-            onClick={(e) => {
-              if (!isAuthenticated) {
-                e.preventDefault();
-              }
-            }}
+            className={`${location.pathname === '/svg-editor' ? 'active' : ''} d-flex align-items-center justify-content-center`}
           >
             {tutorialMode ? (
               <OverlayTrigger
                 placement="right"
-                overlay={
-<<<<<<< HEAD
-                  <Tooltip id="design-editor-tooltip">
-                    Canvas editor
-                  </Tooltip>
+                overlay={<Tooltip id="svg-editor-tooltip">
+                  svg editor
+                </Tooltip>
                 }
               >
-                <span>kanvaso</span>
+                <span>vektoro</span>
               </OverlayTrigger>
             ) : (
-              <span>kanvaso</span>
+              <span>vektoro</span>
+            )}
+          </Nav.Link>
+
+          <Nav.Link
+            as={NavLink}
+            to="/drato"
+            className={`${location.pathname === '/drato' ? 'active' : ''} d-flex align-items-center justify-content-center`}
+          >
+            {tutorialMode ? (
+              <OverlayTrigger
+                placement="right"
+                overlay={<Tooltip id="drato-tooltip">
+                  Bootstrap wireframing tool
+                </Tooltip>
+                }
+              >
+                <span>drato</span>
+              </OverlayTrigger>
+            ) : (
+              <span>drato</span>
             )}
           </Nav.Link>
 
+          <Nav.Link
+            as={NavLink}
+            to="/grafeo"
+            className={`${location.pathname === '/grafeo' ? 'active' : ''} d-flex align-items-center justify-content-center`}
+          >
+            {tutorialMode ? (
+              <OverlayTrigger
+                placement="right"
+                overlay={<Tooltip id="grafeo-tooltip">
+                  GraphML editor
+                </Tooltip>
+                }
+              >
+                <span>grafeo</span>
+              </OverlayTrigger>
+            ) : (
+              <span>grafeo</span>
+            )}
+          </Nav.Link>
 
-=======
-                  <Tooltip id="svg-editor-tooltip">
-                    SVG Editor {!isAuthenticated ? '(Sign in required)' : ''}
-                  </Tooltip>
+          <Nav.Link
+            as={NavLink}
+            to="/skribo"
+            className={`${location.pathname === '/skribo' ? 'active' : ''} d-flex align-items-center justify-content-center`}
+          >
+            {tutorialMode ? (
+              <OverlayTrigger
+                placement="right"
+                overlay={<Tooltip id="skribo-tooltip">
+                  Code editor
+                </Tooltip>
                 }
               >
-                <span>🎨</span>
+                <span>skribo</span>
               </OverlayTrigger>
             ) : (
-              <span>🎨</span>
+              <span>skribo</span>
             )}
           </Nav.Link>
 
->>>>>>> 79d08b7b (svg editor)
+
           {/* Settings Link - Always accessible */}
           <Nav.Link
             as={NavLink}
             to="/settings"
-            className={`${location.pathname === '/settings' ? 'active' : ''} d-flex align-items-center justify-content-center`}
-            style={{ height: '40px', width: '40px' }}
+            className={`${location.pathname === "/settings" ? "active" : ""
+              } d-flex align-items-center justify-content-center ${!hasAnimated ? 'navbar-attention-6' : ''}`}
+          // style={{ height: '40px', width: '40px' }}
           >
             {tutorialMode ? (
               <OverlayTrigger
                 placement="right"
-                overlay={
-                  <Tooltip id="settings-tooltip">
-                    Settings
-                  </Tooltip>
-                }
+                overlay={<Tooltip id="settings-tooltip">Settings</Tooltip>}
               >
-                <span>⚙️</span>
+                <span>konto</span>
               </OverlayTrigger>
             ) : (
-              <span>⚙️</span>
+              <span>konto</span>
             )}
           </Nav.Link>
-
         </Nav>
 
         {/* WebSocket Status Indicator - Always show normal tooltip */}
@@ -243,58 +311,100 @@ export const AppFrame = ({ children, title, rightContent }: AppFrameProps) => {
           placement="right"
           overlay={
             <Tooltip id="status-tooltip">
-              {isConnected ? 'Dev mode - Full access' : 'Static mode - Read only'}
+              {isConnected
+                ? "Dev mode - Full access"
+                : "Static mode - Read only"}
             </Tooltip>
           }
         >
           <div className="p-2 border-top d-flex align-items-center justify-content-center">
             <span
               className={`badge rounded-circle d-flex align-items-center justify-content-center`}
-              style={{
-                backgroundColor: isConnected ? '#198754' : '#6c757d',
-                width: '20px',
-                height: '20px',
-                fontSize: '12px'
-              }}
+            // style={{
+            //   backgroundColor: isConnected ? '#198754' : '#6c757d',
+            //   width: '20px',
+            //   height: '20px',
+            //   fontSize: '12px'
+            // }}
             >
-              {isConnected ? '🟢' : '🔴'}
+              {isConnected ? "🟢" : "🔴"}
             </span>
           </div>
         </OverlayTrigger>
 
-        {/* Footer - Always show normal tooltip */}
-        <OverlayTrigger
-          placement="right"
-          overlay={
-            <Tooltip id="footer-tooltip">
-              made with ❤️ and <a href="https://www.npmjs.com/package/testeranto">testeranto</a>
-            </Tooltip>
-          }
-        >
-          <div className="p-3 border-top text-center mt-auto">
-            <span className="text-muted">❤️</span>
-          </div>
-        </OverlayTrigger>
+        {/* Brand Logo */}
+        <div className="p-2 border-top d-flex align-items-center justify-content-center">
+          <button
+            onClick={() => setIsHelpoActive(!isHelpoActive)}
+            className="brand-logo btn p-0 border-0 bg-transparent"
+            style={{
+              display: 'block',
+              transition: 'transform 0.3s ease',
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.transform = 'scale(1.1)';
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.transform = 'scale(1)';
+            }}
+          >
+            <img
+              src="https://www.testeranto.com/logo.svg"
+              alt="Testeranto Logo"
+              style={{
+                height: '64px',
+                width: '64px',
+              }}
+            />
+          </button>
+        </div>
       </div>
 
-      {/* Main Content */}
-      <div className="flex-grow-1 d-flex flex-column" style={{ minHeight: '100vh' }}>
-        {/* Top Navigation Bar */}
-        {/* <Navbar className="border-bottom">
-          <Container fluid>
-            <Navbar.Brand>{title || 'Testeranto'}</Navbar.Brand>
-            <Navbar.Collapse className="justify-content-end">
-              <UserProfile />
-            </Navbar.Collapse>
-          </Container>
-        </Navbar> */}
+      {/* Helpo Drawer */}
+      <HelpoChatDrawer 
+        isActive={isHelpoActive} 
+        onToggle={() => setIsHelpoActive(!isHelpoActive)}
+      />
 
-        <main className="flex-grow-1 p-4" style={{ overflow: 'auto' }}>
-          <Container fluid style={{ height: '100%' }}>
-            {children}
+      {/* Main Content */}
+      <div
+        className="d-flex flex-column"
+        style={{
+          minHeight: "100vh",
+          minWidth: "0", // Allows the content to shrink below its initial size
+          flex: "1 1 auto", // Take up remaining space
+          overflow: "auto", // Enable scrolling
+        }}
+      >
+        <main className="flex-grow-1 p-4" style={{
+          minWidth: "fit-content", // Allow the content to be as wide as needed
+          width: "100%",
+        }}>
+          <Container fluid style={{
+            height: "100%",
+            minWidth: "fit-content", // Prevent the container from constraining width
+          }}>
+            {location.pathname === "/helpo" ? (
+              <div>
+                <h1>Helpo Documentation</h1>
+                <p>Welcome to the Helpo documentation. Here you can find information about using Testeranto.</p>
+                <h2>Getting Started</h2>
+                <p>Start by creating a project and writing your first test cases.</p>
+                <h2>Features</h2>
+                <ul>
+                  <li>Test automation</li>
+                  <li>Process management</li>
+                  <li>Git integration</li>
+                  <li>And much more...</li>
+                </ul>
+              </div>
+            ) : (
+              children
+            )}
           </Container>
         </main>
       </div>
+
     </div>
   );
 };