ls display is responsive (#492)

src/Terminal/commands/ls.tsx

@@ -106,89 +106,69 @@ export function ls(args: (string | number | boolean)[], server: BaseServer): voi
   allMessages.sort();
   folders.sort();
 
-  interface ScriptRowProps {
+  function SegmentGrid(props: { colSize: string; children: React.ReactChild[] }): React.ReactElement {
-    scripts: ScriptFilePath[];
+    const classes = makeStyles({
+      segmentGrid: {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fill, var(--colSize))",
+      },
+    })();
+    const style = { ["--colSize"]: props.colSize } as React.CSSProperties;
+    return (
+      <span style={style} className={classes.segmentGrid}>
+        {props.children}
+      </span>
+    );
   }
-  function ClickableScriptRow({ scripts }: ScriptRowProps): React.ReactElement {
+  function ClickableScriptLink(props: { path: ScriptFilePath }): React.ReactElement {
     const classes = makeStyles((theme: Theme) =>
       createStyles({
-        scriptLinksWrap: {
+        link: {
-          display: "inline-flex",
-          color: theme.palette.warning.main,
-        },
-        scriptLink: {
           cursor: "pointer",
           textDecorationLine: "underline",
-          marginRight: "1.5em",
+          color: theme.palette.warning.main,
-          "&:last-child": { marginRight: 0 },
         },
       }),
     )();
-
+    const fullPath = combinePath(baseDirectory, props.path);
-    function onScriptLinkClick(filename: ScriptFilePath): void {
+    function onClick() {
-      const filePath = combinePath(baseDirectory, filename);
+      const code = server.scripts.get(props.path)?.content ?? "";
-      const code = server.scripts.get(filePath)?.content ?? "";
       const map = new Map<ContentFilePath, string>();
-      map.set(filePath, code);
+      map.set(fullPath, code);
       Router.toScriptEditor(map);
     }
-
     return (
-      <span className={classes.scriptLinksWrap}>
+      <span>
-        {scripts.map((script) => (
+        <span className={classes.link} onClick={onClick}>
-          <span key={script}>
+          {props.path}
-            <span className={classes.scriptLink} onClick={() => onScriptLinkClick(script)}>
+        </span>
-              {script}
-            </span>
-            <span></span>
-          </span>
-        ))}
       </span>
     );
   }
 
-  interface MessageRowProps {
+  function ClickableMessageLink(props: { path: FilePath }): React.ReactElement {
-    messages: FilePath[];
+    const classes = makeStyles({
-  }
+      link: {
-  function ClickableMessageRow({ messages }: MessageRowProps): React.ReactElement {
+        cursor: "pointer",
-    const classes = makeStyles((theme: Theme) =>
+        textDecorationLine: "underline",
-      createStyles({
+      },
-        linksWrap: {
+    })();
-          display: "inline-flex",
+    function onClick(): void {
-          color: theme.palette.primary.main,
-        },
-        link: {
-          cursor: "pointer",
-          textDecorationLine: "underline",
-          marginRight: "1.5em",
-          "&:last-child": { marginRight: 0 },
-        },
-      }),
-    )();
-
-    function onMessageLinkClick(filename: FilePath): void {
       if (!server.isConnectedTo) {
         return Terminal.error(`File is not on this server, connect to ${server.hostname} and try again`);
       }
-      // Message and lit files have no directories
+      // Message and lit files are always in root, no need to combine path with base directory
-
+      if (checkEnum(MessageFilename, props.path)) {
-      if (checkEnum(MessageFilename, filename)) {
+        showMessage(props.path);
-        showMessage(filename);
+      } else if (checkEnum(LiteratureName, props.path)) {
-      } else if (checkEnum(LiteratureName, filename)) {
+        showLiterature(props.path);
-        showLiterature(filename);
       }
     }
-
     return (
-      <span className={classes.linksWrap}>
+      <span>
-        {messages.map((message) => (
+        <span className={classes.link} onClick={onClick}>
-          <span key={message}>
+          {props.path}
-            <span className={classes.link} onClick={() => onMessageLinkClick(message)}>
+        </span>
-              {message}
-            </span>
-            <span></span>
-          </span>
-        ))}
       </span>
     );
   }
@@ -212,45 +192,28 @@ export function ls(args: (string | number | boolean)[], server: BaseServer): voi
     | { type: FileType.Script; segments: ScriptFilePath[] };
 
   function postSegments({ type, segments }: FileGroup, flags: LSFlags): void {
-    const maxLength = Math.max(...segments.map((s) => s.length)) + 1;
+    let segmentElements: React.ReactElement[];
-    const filesPerRow = flags["-l"] === true ? 1 : Math.ceil(80 / maxLength);
+    const colSize = flags["-l"]
-    const padLength = Math.max(maxLength + 2, 40);
+      ? "100%"
-    let i = 0;
+      : Math.ceil(Math.max(...segments.map((segment) => segment.length)) * 0.7) + "em";
-    if (type === FileType.Script) {
+    switch (type) {
-      while (i < segments.length) {
+      case FileType.Folder:
-        const scripts: ScriptFilePath[] = [];
+        segmentElements = segments.map((segment) => (
-        for (let col = 0; col < filesPerRow && i < segments.length; col++, i++) {
+          <span key={segment} style={{ color: "cyan" }}>
-          scripts.push(segments[i]);
+            {segment}
-        }
+          </span>
-        Terminal.printRaw(<ClickableScriptRow scripts={scripts} />);
+        ));
-      }
+        break;
-      return;
+      case FileType.Message:
-    }
+        segmentElements = segments.map((segment) => <ClickableMessageLink key={segment} path={segment} />);
-    if (type === FileType.Message) {
+        break;
-      while (i < segments.length) {
+      case FileType.Script:
-        const messages: FilePath[] = [];
+        segmentElements = segments.map((segment) => <ClickableScriptLink key={segment} path={segment} />);
-        for (let col = 0; col < filesPerRow && i < segments.length; col++, i++) {
+        break;
-          messages.push(segments[i]);
+      default:
-        }
+        segmentElements = segments.map((segment) => <span key={segment}>{segment}</span>);
-        Terminal.printRaw(<ClickableMessageRow messages={messages} />);
-      }
-      return;
-    }
-    while (i < segments.length) {
-      let row = "";
-      for (let col = 0; col < filesPerRow; col++, i++) {
-        if (!(i < segments.length)) break;
-        row += segments[i].padEnd(padLength);
-        i++;
-      }
-      switch (type) {
-        case FileType.Folder:
-          Terminal.printRaw(<span style={{ color: "cyan" }}>{row}</span>);
-          break;
-        default:
-          Terminal.print(row);
-      }
     }
+    Terminal.printRaw(<SegmentGrid colSize={colSize}>{segmentElements}</SegmentGrid>);
   }
 
   const groups: FileGroup[] = [

src/Terminal/ui/TerminalRoot.tsx

@@ -35,10 +35,12 @@ const useStyles = makeStyles((theme: Theme) =>
       whiteSpace: "pre-wrap",
       overflowWrap: "anywhere",
       margin: theme.spacing(0),
+      width: "100%",
     },
     list: {
       padding: theme.spacing(0),
       height: "100%",
+      width: "100%",
     },
   }),
 );