UI: Warn player if they are editing and saving files on non-home servers (#1968)

src/ScriptEditor/ui/Tab.tsx

@@ -3,6 +3,7 @@ import { DraggableProvided } from "react-beautiful-dnd";
 
 import Button from "@mui/material/Button";
 import Tooltip from "@mui/material/Tooltip";
+import Typography from "@mui/material/Typography";
 
 import SyncIcon from "@mui/icons-material/Sync";
 import CloseIcon from "@mui/icons-material/Close";
@@ -11,9 +12,10 @@ import { Settings } from "../../Settings/Settings";
 
 interface IProps {
   provided: DraggableProvided;
-  title: string;
+  fullPath: string;
   isActive: boolean;
   isExternal: boolean;
+  isUnsaved: boolean;
 
   onClick: () => void;
   onClose: () => void;
@@ -24,7 +26,7 @@ const tabMargin = 5;
 const tabIconWidth = 25;
 const tabIconHeight = 38.5;
 
-export function Tab({ provided, title, isActive, isExternal, onClick, onClose, onUpdate }: IProps) {
+export function Tab({ provided, fullPath, isActive, isExternal, isUnsaved, onClick, onClose, onUpdate }: IProps) {
   const colorProps = isActive
     ? {
         background: Settings.theme.button,
@@ -37,8 +39,35 @@ export function Tab({ provided, title, isActive, isExternal, onClick, onClose, o
         color: Settings.theme.secondary,
       };
 
+  let tabTitle;
+  let tooltipTitle;
+  if (isUnsaved) {
+    // Show a blinking "*" character to notify the player that this file is dirtied.
+    tabTitle = (
+      <>
+        <Typography component="span" color={Settings.theme.warning}>
+          *{" "}
+        </Typography>
+        {fullPath}
+      </>
+    );
+  } else {
+    tabTitle = fullPath;
+  }
+
   if (isExternal) {
-    colorProps.color = Settings.theme.info;
+    colorProps.color = Settings.theme.warning;
+    // Show a warning message if this file is on a non-home server.
+    tooltipTitle = (
+      <Typography component="span" color={Settings.theme.warning}>
+        {tabTitle}
+        <br />
+        This file is on a non-home server. You will lose all files on non-home servers when they are deleted or
+        recreated (install augmentations, soft reset, deleted by NS APIs, etc.).
+      </Typography>
+    );
+  } else {
+    tooltipTitle = tabTitle;
   }
   const iconButtonStyle = {
     maxWidth: tabIconWidth,
@@ -71,12 +100,14 @@ export function Tab({ provided, title, isActive, isExternal, onClick, onClose, o
         border: "1px solid " + Settings.theme.well,
       }}
     >
-      <Tooltip title={title}>
+      <Tooltip title={tooltipTitle}>
         <Button
           onClick={onClick}
           onMouseDown={(e) => {
             e.preventDefault();
-            if (e.button === 1) onClose();
+            if (e.button === 1) {
+              onClose();
+            }
           }}
           style={{
             minHeight: tabIconHeight,
@@ -84,7 +115,7 @@ export function Tab({ provided, title, isActive, isExternal, onClick, onClose, o
             ...colorProps,
           }}
         >
-          <span style={{ overflow: "hidden", direction: "rtl", textOverflow: "ellipsis" }}>{title}</span>
+          <span style={{ overflow: "hidden", textOverflow: "ellipsis" }}>{tabTitle}</span>
         </Button>
       </Tooltip>
       <Tooltip title="Overwrite editor content with saved file content">