UI: Fix several issues with script editor tabs (#554) (#567)

src/ScriptEditor/ui/Tab.tsx

@@ -0,0 +1,100 @@
+import React, { useEffect, useRef } from "react";
+import { DraggableProvided } from "react-beautiful-dnd";
+
+import Button from "@mui/material/Button";
+import Tooltip from "@mui/material/Tooltip";
+
+import SyncIcon from "@mui/icons-material/Sync";
+import CloseIcon from "@mui/icons-material/Close";
+
+import { Settings } from "../../Settings/Settings";
+
+interface IProps {
+  provided: DraggableProvided;
+  title: string;
+  isActive: boolean;
+  isExternal: boolean;
+
+  onClick: () => void;
+  onClose: () => void;
+  onUpdate: () => void;
+}
+
+const tabMargin = 5;
+const tabIconWidth = 25;
+const tabIconHeight = 38.5;
+
+export function Tab({ provided, title, isActive, isExternal, onClick, onClose, onUpdate }: IProps) {
+  const colorProps = isActive
+    ? {
+        background: Settings.theme.button,
+        borderColor: Settings.theme.button,
+        color: Settings.theme.primary,
+      }
+    : {
+        background: Settings.theme.backgroundsecondary,
+        borderColor: Settings.theme.backgroundsecondary,
+        color: Settings.theme.secondary,
+      };
+
+  if (isExternal) {
+    colorProps.color = Settings.theme.info;
+  }
+  const iconButtonStyle = {
+    maxWidth: tabIconWidth,
+    minWidth: tabIconWidth,
+    minHeight: tabIconHeight,
+    maxHeight: tabIconHeight,
+    ...colorProps,
+  };
+
+  const tabRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (tabRef.current && isActive) {
+      tabRef.current?.scrollIntoView();
+    }
+  }, [isActive]);
+
+  return (
+    <div
+      ref={(element) => {
+        tabRef.current = element;
+        provided.innerRef(element);
+      }}
+      {...provided.draggableProps}
+      {...provided.dragHandleProps}
+      style={{
+        ...provided.draggableProps.style,
+        marginRight: tabMargin,
+        flexShrink: 0,
+        border: "1px solid " + Settings.theme.well,
+      }}
+    >
+      <Tooltip title={title}>
+        <Button
+          onClick={onClick}
+          onMouseDown={(e) => {
+            e.preventDefault();
+            if (e.button === 1) onClose();
+          }}
+          style={{
+            minHeight: tabIconHeight,
+            overflow: "hidden",
+            ...colorProps,
+          }}
+        >
+          <span style={{ overflow: "hidden", direction: "rtl", textOverflow: "ellipsis" }}>{title}</span>
+        </Button>
+      </Tooltip>
+      <Tooltip title="Overwrite editor content with saved file content">
+        <Button onClick={onUpdate} style={iconButtonStyle}>
+          <SyncIcon fontSize="small" />
+        </Button>
+      </Tooltip>
+      <Button onClick={onClose} style={iconButtonStyle}>
+        <CloseIcon fontSize="small" />
+      </Button>
+    </div>
+  );
+}

src/ScriptEditor/ui/Tabs.tsx

@@ -1,20 +1,24 @@
 import React, { useState } from "react";
-import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
+import { DragDropContext, Droppable, Draggable, DropResult } from "react-beautiful-dnd";
+
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import IconButton from "@mui/material/IconButton";
+import TextField from "@mui/material/TextField";
+import Tooltip from "@mui/material/Tooltip";
 
-import { Box, Button, TextField, Tooltip } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
 import SearchIcon from "@mui/icons-material/Search";
-import SyncIcon from "@mui/icons-material/Sync";
 
-import { useRerender } from "../../ui/React/hooks";
+import { useBoolean, useRerender } from "../../ui/React/hooks";
 import { Settings } from "../../Settings/Settings";
 
 import { dirty, reorder } from "./utils";
 import { OpenScript } from "./OpenScript";
+import { Tab } from "./Tab";
 
 const tabsMaxWidth = 1640;
-const tabMargin = 5;
+const searchWidth = 180;
-const tabIconWidth = 25;
 
 interface IProps {
   scripts: OpenScript[];
@@ -27,39 +31,78 @@ interface IProps {
 
 export function Tabs({ scripts, currentScript, onTabClick, onTabClose, onTabUpdate }: IProps) {
   const [filter, setFilter] = useState("");
+  const [isSearchTooltipOpen, { on: openSearchTooltip, off: closeSearchTooltip }] = useBoolean(false);
   const [searchExpanded, setSearchExpanded] = useState(false);
   const rerender = useRerender();
 
-  function onDragEnd(result: any): void {
+  const filteredScripts = Object.values(scripts)
+    .map((script, originalIndex) => ({ script, originalIndex }))
+    .filter(({ script }) => script.hostname.includes(filter) || script.path.includes(filter));
+
+  function onDragEnd(result: DropResult): void {
     // Dropped outside of the list
     if (!result.destination) return;
-    reorder(scripts, result.source.index, result.destination.index);
+    reorder(
+      scripts,
+      filteredScripts[result.source.index].originalIndex,
+      filteredScripts[result.destination.index].originalIndex,
+    );
     rerender();
   }
 
-  const filteredOpenScripts = Object.values(scripts).filter(
-    (script) => script.hostname.includes(filter) || script.path.includes(filter),
-  );
-
   function handleFilterChange(event: React.ChangeEvent<HTMLInputElement>): void {
     setFilter(event.target.value);
   }
 
-  function handleExpandSearch(): void {
+  function toggleSearch(): void {
     setFilter("");
     setSearchExpanded(!searchExpanded);
+    closeSearchTooltip();
+  }
+
+  function handleScroll(e: React.WheelEvent<HTMLDivElement>): void {
+    e.currentTarget.scrollLeft += e.deltaY;
   }
 
-  const tabMaxWidth = filteredOpenScripts.length ? tabsMaxWidth / filteredOpenScripts.length - tabMargin : 0;
-  const tabTextWidth = tabMaxWidth - tabIconWidth * 2;
   return (
+    <Box display="flex" flexGrow="0" flexDirection="row" alignItems="center">
+      <Tooltip
+        title={"Search Open Scripts"}
+        open={isSearchTooltipOpen}
+        onOpen={openSearchTooltip}
+        onClose={closeSearchTooltip}
+      >
+        <span style={{ marginRight: 5 }}>
+          {searchExpanded ? (
+            <TextField
+              value={filter}
+              onChange={handleFilterChange}
+              autoFocus
+              sx={{ minWidth: searchWidth, maxWidth: searchWidth }}
+              InputProps={{
+                startAdornment: <SearchIcon />,
+                spellCheck: false,
+                endAdornment: (
+                  <IconButton onClick={toggleSearch}>
+                    <CloseIcon />
+                  </IconButton>
+                ),
+              }}
+            />
+          ) : (
+            <Button onClick={toggleSearch}>
+              <SearchIcon />
+            </Button>
+          )}
+        </span>
+      </Tooltip>
       <DragDropContext onDragEnd={onDragEnd}>
         <Droppable droppableId="tabs" direction="horizontal">
           {(provided, snapshot) => (
             <Box
               maxWidth={`${tabsMaxWidth}px`}
               display="flex"
-            flexGrow="0"
+              flexGrow="1"
               flexDirection="row"
               alignItems="center"
               whiteSpace="nowrap"
@@ -71,108 +114,31 @@ export function Tabs({ scripts, currentScript, onTabClick, onTabClose, onTabUpda
                   : Settings.theme.backgroundprimary,
                 overflowX: "scroll",
               }}
+              onWheel={handleScroll}
             >
-            <Tooltip title={"Search Open Scripts"}>
+              {filteredScripts.map(({ script, originalIndex }, index) => {
-              {searchExpanded ? (
+                const { path: fileName, hostname } = script;
-                <TextField
+                const isActive = currentScript?.path === script.path && currentScript.hostname === script.hostname;
-                  value={filter}
-                  onChange={handleFilterChange}
-                  autoFocus
-                  InputProps={{
-                    startAdornment: <SearchIcon />,
-                    spellCheck: false,
-                    endAdornment: <CloseIcon onClick={handleExpandSearch} />,
-                    // TODO: reapply
-                    // sx: { minWidth: 200 },
-                  }}
-                />
-              ) : (
-                <Button onClick={handleExpandSearch}>
-                  <SearchIcon />
-                </Button>
-              )}
-            </Tooltip>
-            {filteredOpenScripts.map(({ path: fileName, hostname }, index) => {
-              const editingCurrentScript =
-                currentScript?.path === filteredOpenScripts[index].path &&
-                currentScript.hostname === filteredOpenScripts[index].hostname;
-              const externalScript = hostname !== "home";
-              const colorProps = editingCurrentScript
-                ? {
-                    background: Settings.theme.button,
-                    borderColor: Settings.theme.button,
-                    color: Settings.theme.primary,
-                  }
-                : {
-                    background: Settings.theme.backgroundsecondary,
-                    borderColor: Settings.theme.backgroundsecondary,
-                    color: Settings.theme.secondary,
-                  };
 
-              if (externalScript) {
+                const title = `${hostname}:~${fileName.startsWith("/") ? "" : "/"}${fileName} ${dirty(scripts, index)}`;
-                colorProps.color = Settings.theme.info;
-              }
-              const iconButtonStyle = {
-                maxWidth: `${tabIconWidth}px`,
-                minWidth: `${tabIconWidth}px`,
-                minHeight: "38.5px",
-                maxHeight: "38.5px",
-                ...colorProps,
-              };
-
-              const scriptTabText = `${hostname}:~${fileName.startsWith("/") ? "" : "/"}${fileName} ${dirty(
-                scripts,
-                index,
-              )}`;
 
                 return (
                   <Draggable
                     key={fileName + hostname}
                     draggableId={fileName + hostname}
                     index={index}
-                  disableInteractiveElementBlocking={true}
+                    disableInteractiveElementBlocking
                   >
                     {(provided) => (
-                    <div
+                      <Tab
-                      ref={provided.innerRef}
+                        provided={provided}
-                      {...provided.draggableProps}
+                        title={title}
-                      {...provided.dragHandleProps}
+                        isActive={isActive}
-                      style={{
+                        isExternal={hostname !== "home"}
-                        ...provided.draggableProps.style,
+                        onClick={() => onTabClick(originalIndex)}
-                        // maxWidth: `${tabMaxWidth}px`,
+                        onClose={() => onTabClose(originalIndex)}
-                        marginRight: `${tabMargin}px`,
+                        onUpdate={() => onTabUpdate(originalIndex)}
-                        flexShrink: 0,
+                      />
-                        border: "1px solid " + Settings.theme.well,
-                      }}
-                    >
-                      <Tooltip title={scriptTabText}>
-                        <Button
-                          onClick={() => onTabClick(index)}
-                          onMouseDown={(e) => {
-                            e.preventDefault();
-                            if (e.button === 1) onTabClose(index);
-                          }}
-                          style={{
-                            maxWidth: `${tabTextWidth}px`,
-                            minHeight: "38.5px",
-                            overflow: "hidden",
-                            ...colorProps,
-                          }}
-                        >
-                          <span style={{ overflow: "hidden", direction: "rtl", textOverflow: "ellipsis" }}>
-                            {scriptTabText}
-                          </span>
-                        </Button>
-                      </Tooltip>
-                      <Tooltip title="Overwrite editor content with saved file content">
-                        <Button onClick={() => onTabUpdate(index)} style={iconButtonStyle}>
-                          <SyncIcon fontSize="small" />
-                        </Button>
-                      </Tooltip>
-                      <Button onClick={() => onTabClose(index)} style={iconButtonStyle}>
-                        <CloseIcon fontSize="small" />
-                      </Button>
-                    </div>
                     )}
                   </Draggable>
                 );
@@ -182,5 +148,6 @@ export function Tabs({ scripts, currentScript, onTabClick, onTabClose, onTabUpda
           )}
         </Droppable>
       </DragDropContext>
+    </Box>
   );
 }