Welcomewrap shortened, terminal got help command

Author: htdguide

src/webOS/components/WelcomeWrap/WelcomeWrap.jsx

@@ -1,33 +1,40 @@
 // =================================================================================
-// Chapter 1: Imports & Dependencies
+// Area 1: Constants, Imports & Dependencies
 // =================================================================================
 
+// 1.1: Timing constants
+// how long each welcome message displays (in milliseconds)
+const MESSAGE_DISPLAY_MS = 1800;
+// delay before first message appears (in seconds)
+const INITIAL_DELAY_SEC = 1;
+
 import React, { useEffect, useState } from 'react';
 import messages from './messages';
 import './WelcomeWrap.css';
 import { useStateManager } from '../../stores/StateManager/StateManager';
 
 // =================================================================================
-// Chapter 2: Component Definition & State Manager Setup
+// Area 2: Component Definition & State Setup
 // =================================================================================
 
 const WelcomeWrap = () => {
-  // Initialize state manager hooks
+  // 2.1: State manager hooks
   const { state, editStateValue, refreshState } = useStateManager();
 
-  // Determine if welcome screen is enabled in global state
+  // 2.2: Check if welcome screen is enabled
   const welcomeEnabledStr =
     state.groups.welcomeWrap && state.groups.welcomeWrap.welcomeEnabled;
   const welcomeEnabled = welcomeEnabledStr === "false" ? false : true;
   if (!welcomeEnabled) return null;
 
-  // Timing configuration for messages and animations
-  const totalDuration = 10;
-  const initialDelay = 1;
+  // 2.3: Timing configuration
   const messageCount = messages.length;
-  const messageDuration = (totalDuration - initialDelay) / messageCount;
+  // 2.3.1: per-message duration in seconds
+  const messageDuration = MESSAGE_DISPLAY_MS / 1000;
+  // 2.3.2: total seconds until switching to loading
+  const totalDuration = INITIAL_DELAY_SEC + messageCount * messageDuration;
 
-  // Local UI state
+  // 2.4: Local UI state flags
   const [showWelcome, setShowWelcome] = useState(true);
   const [showLoading, setShowLoading] = useState(false);
   const [messageIndex, setMessageIndex] = useState(-1);
@@ -36,80 +43,79 @@ const WelcomeWrap = () => {
   const [fadeHello, setFadeHello] = useState(false);
 
   // =================================================================================
-  // Chapter 3: Mount Effect: Hide UI on Mount
+  // Area 3: Mount Effect: Hide UI on Mount
   // =================================================================================
 
   useEffect(() => {
-    // Hide dock, desktop icons, and menubar immediately
+    // 3.1: Hide dock, icons, menubar immediately
     editStateValue("dock", "dockVisible", "false");
     editStateValue("desktop", "iconVisible", "false");
     editStateValue("desktop", "menubarVisible", "false");
     refreshState();
   }, []);
 
   // =================================================================================
-  // Chapter 4: Effect: Show Loading and Fade Welcome
+  // Area 4: Effect: Show Loading and Fade Welcome
   // =================================================================================
 
   useEffect(() => {
-    // After totalDuration seconds, transition to loading screen
+    // 4.1: After totalDuration (sec), show loading and fade out welcome
     const t = setTimeout(() => {
       setShowLoading(true);
       setFadeWelcome(true);
-      // Remove welcome screen after fade-out
+      // remove welcome after fade completes (1s)
       setTimeout(() => setShowWelcome(false), 1000);
     }, totalDuration * 1000);
     return () => clearTimeout(t);
   }, [totalDuration]);
 
   // =================================================================================
-  // Chapter 5: Effect: Cycle Welcome Messages
+  // Area 5: Effect: Cycle Welcome Messages
   // =================================================================================
 
   useEffect(() => {
     if (!showWelcome) return;
-    // Start cycling messages after initial delay
+    // 5.1: first message after INITIAL_DELAY_SEC
     if (messageIndex === -1) {
-      const t = setTimeout(() => setMessageIndex(0), initialDelay * 1000);
+      const t = setTimeout(() => setMessageIndex(0), INITIAL_DELAY_SEC * 1000);
       return () => clearTimeout(t);
     }
-    // Advance to next message until all shown
+    // 5.2: advance until the last message
     if (messageIndex < messageCount - 1) {
       const t = setTimeout(
         () => setMessageIndex(i => i + 1),
         messageDuration * 1000
       );
       return () => clearTimeout(t);
     }
-  }, [showWelcome, messageIndex, messageCount, messageDuration, initialDelay]);
+  }, [showWelcome, messageIndex, messageCount, messageDuration]);
 
   // =================================================================================
-  // Chapter 6: Handler: Hello Animation End and Restore UI
+  // Area 6: Handler: Hello Animation End and Restore UI
   // =================================================================================
 
   const handleHelloAnimationEnd = () => {
-    // Trigger fade-out of the SVG “hello”
     setFadeHello(true);
+    // 6.1: wait 1s, restore UI, then fade loading
     setTimeout(() => {
-      // Restore dock, desktop icons, and menubar
       editStateValue("dock", "dockVisible", "true");
       editStateValue("desktop", "iconVisible", "true");
       editStateValue("desktop", "menubarVisible", "true");
-      // Disable further welcome screens
-      editStateValue("welcomeWrap", "welcomeEnabled", "false");
       refreshState();
-
-      // Fade out loading screen and then hide it
       setFadeLoading(true);
-      setTimeout(() => setShowLoading(false), 1000);
+      // 6.2: after fade, hide loading & disable future welcomes
+      setTimeout(() => {
+        setShowLoading(false);
+        editStateValue("welcomeWrap", "welcomeEnabled", "false");
+        refreshState();
+      }, 1000);
     }, 1000);
   };
 
-  // Prevent pointer-events during welcome/loading phases
   const isBlocking = showWelcome || showLoading;
 
   // =================================================================================
-  // Chapter 7: Rendering: Conditional Screens and Animations
+  // Area 7: Rendering
   // =================================================================================
 
   return (
@@ -127,12 +133,11 @@ const WelcomeWrap = () => {
           )}
         </div>
       )}
-
       {showLoading && (
         <div className={`loading-screen ${fadeLoading ? 'fade-out' : ''}`}>
           <div className="loading-animation">
             <div className={`hello__div ${fadeHello ? 'fade-out' : ''}`}>
-              <svg
+<svg
                 className="hello__svg"
                 viewBox="0 0 1230.94 414.57"
                 onAnimationEnd={handleHelloAnimationEnd}

src/webOS/components/WelcomeWrap/messages.js

@@ -2,8 +2,7 @@
 const messages = [
     "Kia Ora",
     "webOS is here",
-    "developed by Nikita Mogilevskii",
-    "Have fun!"
+    "developed by Nikita Mogilevskii"
   ];
 
   export default messages;

src/webOS/initialapps/Noterminal/apps/Help/Help.jsx

@@ -0,0 +1,67 @@
+// src/apps/Help/Help.jsx
+
+/* ====================================================
+   Area 1: Imports & Utilities
+   ==================================================== */
+
+// 1.1: React imports for component, refs, and effects
+import React, { forwardRef, useImperativeHandle, useEffect } from "react";
+
+// 1.2: Import the apps registry to list their commands/descriptions
+import { apps } from "../../components/AppsList";
+
+/* ====================================================
+   Area 2: Component Definition
+   ==================================================== */
+
+const Help = forwardRef(({ output, setAutocompleteCommands }, ref) => {
+  // 2.1: Helper to write a line to the terminal
+  const writeln = (msg = "") => {
+    if (output?.current?.writeln) {
+      output.current.writeln(msg);
+    }
+  };
+
+  // 2.2: On mount, list all registered commands with descriptions
+  useEffect(() => {
+    writeln("");
+    writeln("Available Commands:");
+    writeln("-------------------");
+    apps.forEach(({ commands, description }) => {
+      const cmdList = Array.isArray(commands) ? commands.join(", ") : commands;
+      writeln(`  • ${cmdList}`);
+      writeln(`      ${description}`);
+    });
+    writeln("");
+  }, []);
+
+  // 2.3: Stub for processing further input (no-op)
+  const processInput = (input) => {
+    // No additional commands beyond initial help listing
+  };
+
+  // 2.4: Stub for autocomplete suggestions (none needed)
+  const getAutocompleteSuggestions = () => {
+    return [];
+  };
+
+  // 2.5: Expose methods to the terminal host
+  useImperativeHandle(ref, () => ({
+    processInput,
+    getAutocompleteSuggestions,
+  }));
+
+  // 2.6: Render minimal placeholder UI
+  return (
+    <div className="help-app">
+      <h3>Use CTRL + C to exit an app</h3>
+    </div>
+  );
+});
+
+/* ====================================================
+   Area 3: Export
+   ==================================================== */
+
+// 3.1: Export the component as default
+export default Help;

src/webOS/initialapps/Noterminal/components/AppsList.jsx

@@ -1,26 +1,42 @@
-// Wherever your AppsList is defined (e.g., src/configs/AppsList.jsx or similar),
-// add the Logger terminal entry. Example:
+// src/configs/AppsList.jsx
 
-import StateEditor from "../apps/StateEditor/StateEditor";
+/* ====================================================
+   Area 1: Imports
+   ==================================================== */
+
+// 1.1: Import application components
+import Help from "../apps/Help/Help.jsx";
 import TerminalSettingsEditor from "../apps/TerminalSettingsEditor/TerminalSettingsEditor";
+import StateEditor from "../apps/StateEditor/StateEditor";
 import LoggerTerminal from "../apps/Logger/LoggerTerminal";
 
+/* ====================================================
+   Area 2: Apps Array
+   ==================================================== */
+
 export const apps = [
+  // 2.1: Help app invoked by "help", lists all commands
+  {
+    name: "help",
+    description: "List available commands with their descriptions.",
+    commands: ["help"],
+    component: Help,
+  },
   {
     name: "Terminal Settings Editor",
     description: "Edit terminal font, color, and design settings.",
-    commands: ["terminal settings editor", "tse"],
+    commands: ["tse"],
     component: TerminalSettingsEditor,
   },
   {
     name: "State Editor",
     description: "Edit states and state groups.",
-    commands: ["state editor", "stedit"],
+    commands: ["stedit"],
     component: StateEditor,
   },
   {
     name: "Logger",
-    description: "Inspect and control the logger—view registered components/groups, mute/unmute, toggle global logging.",
+    description: "Inspect and control the logs",
     commands: ["logger", "logapp"],
     component: LoggerTerminal,
   },