explorer search box shouldn't move stuff

Author: williamstein

src/packages/frontend/project/call-to-support.tsx

@@ -1,10 +1,8 @@
 import { Alert, Typography } from "antd";
 import { join } from "path";
-
 import { A } from "@cocalc/frontend/components/A";
 import { appBasePath } from "@cocalc/frontend/customize/app-base-path";
-
-const { Paragraph, Text } = Typography;
+const { Paragraph } = Typography;
 export const BUY_A_LICENSE_URL = join(appBasePath, "/store/site-license");
 
 export function CallToSupport({ onClose }: { onClose? }) {

src/packages/frontend/project/explorer/explorer.tsx

@@ -8,7 +8,6 @@ import * as immutable from "immutable";
 import * as _ from "lodash";
 import React from "react";
 import { FormattedMessage } from "react-intl";
-
 import { UsersViewing } from "@cocalc/frontend/account/avatar/users-viewing";
 import { Button, ButtonGroup, Col, Row } from "@cocalc/frontend/antd-bootstrap";
 import {
@@ -48,8 +47,7 @@ import { ActionBar } from "./action-bar";
 import { ActionBox } from "./action-box";
 import { FetchDirectoryErrors } from "./fetch-directory-errors";
 import { FileListing } from "./file-listing";
-import { TerminalModeDisplay } from "./file-listing/terminal-mode-display";
-import { default_ext, TERM_MODE_CHAR } from "./file-listing/utils";
+import { default_ext } from "./file-listing/utils";
 import { MiscSideButtons } from "./misc-side-buttons";
 import { NewButton } from "./new-button";
 import { PathNavigator } from "./path-navigator";
@@ -685,11 +683,6 @@ const Explorer0 = rclass(
         />
       );
     }
-    render_terminal_mode() {
-      if (this.props.file_search[0] === TERM_MODE_CHAR) {
-        return <TerminalModeDisplay />;
-      }
-    }
 
     render() {
       let project_is_running: boolean,
@@ -753,7 +746,6 @@ const Explorer0 = rclass(
             {this.render_error()}
             {this.render_activity()}
             {this.render_control_row(visible_listing)}
-            {this.render_terminal_mode()}
             {this.props.ext_selection != null && (
               <AskNewFilename project_id={this.props.project_id} />
             )}

src/packages/frontend/project/explorer/file-listing/terminal-mode-display.tsx

@@ -8,13 +8,13 @@ import { useState } from "react";
 
 import { A } from "@cocalc/frontend/components/A";
 
-export function TerminalModeDisplay() {
+export function TerminalModeDisplay({ style }) {
   const [extra, setExtra] = useState<boolean>(false);
   return (
     <Alert
       banner
       type="info"
-      style={{ margin: "5px 0 15px 0" }}
+      style={style}
       message={
         <>
           You are in <a onClick={() => setExtra(!extra)}>terminal mode</a>.
@@ -26,9 +26,9 @@ export function TerminalModeDisplay() {
             Terminal mode is triggered by a leading <code>/</code> in the file
             filter box. If you would like to display all folders instead, enter
             a space in front of the <code>/</code>. Terminal mode allows you to
-            quickly use common commands like <code>mv</code> or <code>cp</code>{" "}
-            in the displayed directory without having to click on the file
-            listing UI. Start{" "}
+            quickly use common Linux commands like <code>mv</code> or{" "}
+            <code>cp</code> in the displayed directory without having to click
+            on the file listing UI. Start{" "}
             <A href="https://www.google.com/search?q=introduction+to+command+line">
               here
             </A>{" "}

src/packages/frontend/project/explorer/search-bar.tsx

@@ -6,7 +6,6 @@
 import { Alert, Flex } from "antd";
 import React from "react";
 import { useIntl } from "react-intl";
-
 import { CSS, redux } from "@cocalc/frontend/app-framework";
 import { Icon, SearchInput } from "@cocalc/frontend/components";
 import { ProjectActions } from "@cocalc/frontend/project_store";
@@ -15,6 +14,18 @@ import { path_to_file } from "@cocalc/util/misc";
 import { useProjectContext } from "../context";
 import { TERM_MODE_CHAR } from "./file-listing";
 import { ListingItem } from "./types";
+import { TerminalModeDisplay } from "@cocalc/frontend/project/explorer/file-listing/terminal-mode-display";
+
+const HelpStyle = {
+  wordWrap: "break-word",
+  top: "40px",
+  position: "absolute",
+  width: "100%",
+  height: "38",
+  boxShadow: "#999 6px 6px 6px",
+  zIndex: 100,
+  borderRadius: "15px",
+} as const;
 
 export const outputMinitermStyle: React.CSSProperties = {
   background: "white",
@@ -154,11 +165,10 @@ export const SearchBar = React.memo((props: Props) => {
   }
 
   function render_help_info(): React.JSX.Element | undefined {
-    if (
-      file_search.length > 0 &&
-      num_files_displayed > 0 &&
-      file_search[0] !== TERM_MODE_CHAR
-    ) {
+    if (file_search[0] == TERM_MODE_CHAR) {
+      return <TerminalModeDisplay style={HelpStyle} />;
+    }
+    if (file_search.length > 0 && num_files_displayed > 0) {
       let text;
       const firstFolderPosition = file_search.indexOf("/");
       if (file_search === " /") {
@@ -171,13 +181,7 @@ export const SearchBar = React.memo((props: Props) => {
       } else {
         text = `Showing files matching "${file_search}"`;
       }
-      return (
-        <Alert
-          style={{ wordWrap: "break-word", marginBottom: "10px" }}
-          type="info"
-          message={text}
-        />
-      );
+      return <Alert style={HelpStyle} type="info" message={text} />;
     }
   }
 
@@ -294,7 +298,7 @@ export const SearchBar = React.memo((props: Props) => {
   }
 
   return (
-    <Flex style={{ flex: "1 0 auto" }} vertical={true}>
+    <Flex style={{ flex: "1 0 auto", position: "relative" }} vertical={true}>
       <SearchInput
         autoFocus
         autoSelect