From 634103205da54f356cfdbb028c8590e19d67dffa Mon Sep 17 00:00:00 2001
From: jjspace <8007967+jjspace@users.noreply.github.com>
Date: Fri, 1 Aug 2025 16:29:00 -0400
Subject: [PATCH 1/2] update page title, track dirty state, prevent navigation
 when dirty

---
 packages/sandcastle/index.html        |  2 +-
 packages/sandcastle/src/App.tsx       | 82 +++++++++++++++++++++++----
 packages/sandcastle/src/main.tsx      |  7 ---
 packages/sandcastle/vite.config.ci.ts |  2 +
 4 files changed, 75 insertions(+), 18 deletions(-)

diff --git a/packages/sandcastle/index.html b/packages/sandcastle/index.html
index b3a80d2f3bb1..eb448a45a870 100644
--- a/packages/sandcastle/index.html
+++ b/packages/sandcastle/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Sandcastle Reborn</title>
+    <title>Cesium Sandcastle</title>
     <style>
       /* Load fonts for itwin-ui */
       @font-face {
diff --git a/packages/sandcastle/src/App.tsx b/packages/sandcastle/src/App.tsx
index 9c0eb0cfd28f..d52108d7eeec 100644
--- a/packages/sandcastle/src/App.tsx
+++ b/packages/sandcastle/src/App.tsx
@@ -51,6 +51,10 @@ const defaultHtmlCode = `<style>
 `;
 
 const GALLERY_BASE = __GALLERY_BASE_URL__;
+const cesiumVersion = __CESIUM_VERSION__;
+const versionString = __COMMIT_SHA__
+  ? `Commit: ${__COMMIT_SHA__.substring(0, 7)} - ${cesiumVersion}`
+  : cesiumVersion;
 
 type RightSideRef = {
   toggleExpanded: () => void;
@@ -164,6 +168,7 @@ function AppBarButton({
 
 export type SandcastleAction =
   | { type: "reset" }
+  | { type: "resetDirty" }
   | { type: "setCode"; code: string }
   | { type: "setHtml"; html: string }
   | { type: "runSandcastle" }
@@ -178,9 +183,6 @@ function App() {
   const consoleCollapsedHeight = 26;
   const [consoleExpanded, setConsoleExpanded] = useState(false);
 
-  const cesiumVersion = __CESIUM_VERSION__;
-  const versionString = __COMMIT_SHA__ ? `Commit: ${__COMMIT_SHA__}` : "";
-
   const startOnEditor = !!(window.location.search || window.location.hash);
   const [leftPanel, setLeftPanel] = useState<"editor" | "gallery">(
     startOnEditor ? "editor" : "gallery",
@@ -196,6 +198,7 @@ function App() {
     committedCode: string;
     committedHtml: string;
     runNumber: number;
+    dirty: boolean;
   };
 
   const initialState: CodeState = {
@@ -204,6 +207,7 @@ function App() {
     committedCode: defaultJsCode,
     committedHtml: defaultHtmlCode,
     runNumber: 0,
+    dirty: false,
   };
 
   const [codeState, dispatch] = useReducer(function reducer(
@@ -218,12 +222,14 @@ function App() {
         return {
           ...state,
           code: action.code,
+          dirty: true,
         };
       }
       case "setHtml": {
         return {
           ...state,
           html: action.html,
+          dirty: true,
         };
       }
       case "runSandcastle": {
@@ -241,11 +247,46 @@ function App() {
           committedCode: action.code ?? state.code,
           committedHtml: action.html ?? state.html,
           runNumber: state.runNumber + 1,
+          dirty: false,
+        };
+      }
+      case "resetDirty": {
+        return {
+          ...state,
+          dirty: false,
         };
       }
     }
   }, initialState);
 
+  useEffect(() => {
+    const host = window.location.host;
+    let envString = "";
+    if (host.includes("localhost") && host !== "localhost:8080") {
+      // this helps differentiate tabs for local sandcastle development or other testing
+      envString = `${host.replace("localhost:", "")} `;
+    }
+
+    const baseTitle = "Cesium Sandcastle";
+    const dirtyIndicator = codeState.dirty ? "*" : "";
+    if (title !== "") {
+      document.title = `${envString}${title}${dirtyIndicator} | ${baseTitle}`;
+    } else {
+      document.title = `${envString}${baseTitle}`;
+    }
+  }, [title, codeState.dirty]);
+
+  const confirmLeave = useCallback(() => {
+    if (!codeState.dirty) {
+      return true;
+    }
+
+    /* eslint-disable-next-line no-alert */
+    return window.confirm(
+      "You have unsaved changes. Are you sure you want to navigate away from this demo?",
+    );
+  }, [codeState.dirty]);
+
   const [legacyIdMap, setLegacyIdMap] = useState<Record<string, string>>({});
   const [galleryItems, setGalleryItems] = useState<GalleryItem[]>([]);
   const [galleryLoaded, setGalleryLoaded] = useState(false);
@@ -277,6 +318,9 @@ function App() {
   }
 
   function resetSandcastle() {
+    if (!confirmLeave()) {
+      return;
+    }
     dispatch({ type: "reset" });
 
     window.history.pushState({}, "", getBaseUrl());
@@ -292,6 +336,7 @@ function App() {
 
     const shareUrl = `${getBaseUrl()}#c=${base64String}`;
     window.history.replaceState({}, "", shareUrl);
+    dispatch({ type: "resetDirty" });
   }
 
   function openStandalone() {
@@ -407,12 +452,27 @@ function App() {
   useEffect(() => {
     // Listen to browser forward/back navigation and try to load from URL
     // this is necessary because of the pushState used for faster gallery loading
-    function pushStateListener() {
-      loadFromUrl();
+    function popStateListener() {
+      if (confirmLeave()) {
+        loadFromUrl();
+      }
     }
-    window.addEventListener("popstate", pushStateListener);
-    return () => window.removeEventListener("popstate", pushStateListener);
-  }, [loadFromUrl]);
+    window.addEventListener("popstate", popStateListener);
+    return () => window.removeEventListener("popstate", popStateListener);
+  }, [loadFromUrl, confirmLeave]);
+
+  useEffect(() => {
+    // if the code has been edited listen for navigation away and warn
+    if (codeState.dirty) {
+      function beforeUnloadListener(e: BeforeUnloadEvent) {
+        e.preventDefault();
+        return ""; // modern browsers ignore the contents of this string
+      }
+      window.addEventListener("beforeunload", beforeUnloadListener);
+      return () =>
+        window.removeEventListener("beforeunload", beforeUnloadListener);
+    }
+  }, [codeState.dirty]);
 
   return (
     <Root
@@ -443,8 +503,7 @@ function App() {
         </Button>
         <div className="flex-spacer"></div>
         <div className="version">
-          {versionString && <pre>{versionString.substring(0, 7)} - </pre>}
-          <pre>{cesiumVersion}</pre>
+          {versionString && <pre>{versionString}</pre>}
         </div>
       </header>
       <div className="application-bar">
@@ -505,6 +564,9 @@ function App() {
             hidden={leftPanel !== "gallery"}
             galleryItems={galleryItems}
             loadDemo={(item, switchToCode) => {
+              if (!confirmLeave()) {
+                return;
+              }
               // Load the gallery item every time it's clicked
               loadGalleryItem(item.id);
 
diff --git a/packages/sandcastle/src/main.tsx b/packages/sandcastle/src/main.tsx
index a5356fe03e57..37a25dd3daff 100644
--- a/packages/sandcastle/src/main.tsx
+++ b/packages/sandcastle/src/main.tsx
@@ -3,13 +3,6 @@ import { createRoot } from "react-dom/client";
 import "./reset.css"; // TODO: this may not be needed with itwin-ui
 import App from "./App.tsx";
 
-const host = window.location.host;
-if (host.includes("localhost")) {
-  document.title = `${host.replace("localhost:", "")} ${document.title}`;
-} else if (host.includes("ci")) {
-  document.title = `CI ${document.title}`;
-}
-
 createRoot(document.getElementById("app-container")!).render(
   <StrictMode>
     <App />
diff --git a/packages/sandcastle/vite.config.ci.ts b/packages/sandcastle/vite.config.ci.ts
index 48ef5b48cdf4..e52a994c0fdd 100644
--- a/packages/sandcastle/vite.config.ci.ts
+++ b/packages/sandcastle/vite.config.ci.ts
@@ -1,5 +1,6 @@
 import { defineConfig, UserConfig } from "vite";
 import { viteStaticCopy } from "vite-plugin-static-copy";
+import { env } from "process";
 
 import baseConfig, { cesiumPathReplace } from "./vite.config.ts";
 
@@ -22,6 +23,7 @@ export default defineConfig(() => {
     ...config.define,
     __PAGE_BASE_URL__: JSON.stringify(process.env.BASE_URL),
     __GALLERY_BASE_URL__: JSON.stringify(`${config.base}/gallery`),
+    __COMMIT_SHA__: JSON.stringify(env.GITHUB_SHA),
   };
 
   const copyPlugin = viteStaticCopy({

From 2a07bc93d080e2c0ec9c49cbb2b0298a29dc06e3 Mon Sep 17 00:00:00 2001
From: jjspace <8007967+jjspace@users.noreply.github.com>
Date: Mon, 25 Aug 2025 18:08:34 -0400
Subject: [PATCH 2/2] Simplify title

---
 packages/sandcastle/index.html  | 2 +-
 packages/sandcastle/src/App.tsx | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/sandcastle/index.html b/packages/sandcastle/index.html
index eb448a45a870..cc518b2571ef 100644
--- a/packages/sandcastle/index.html
+++ b/packages/sandcastle/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Cesium Sandcastle</title>
+    <title>Sandcastle | CesiumJS</title>
     <style>
       /* Load fonts for itwin-ui */
       @font-face {
diff --git a/packages/sandcastle/src/App.tsx b/packages/sandcastle/src/App.tsx
index d52108d7eeec..2174a1a589c3 100644
--- a/packages/sandcastle/src/App.tsx
+++ b/packages/sandcastle/src/App.tsx
@@ -267,12 +267,12 @@ function App() {
       envString = `${host.replace("localhost:", "")} `;
     }
 
-    const baseTitle = "Cesium Sandcastle";
     const dirtyIndicator = codeState.dirty ? "*" : "";
-    if (title !== "") {
-      document.title = `${envString}${title}${dirtyIndicator} | ${baseTitle}`;
+    if (title === "" || title === "New Sandcastle") {
+      // No need to clutter the window/tab with a name if not viewing a named gallery demo
+      document.title = `${envString}Sandcastle${dirtyIndicator} | CesiumJS`;
     } else {
-      document.title = `${envString}${baseTitle}`;
+      document.title = `${envString}${title}${dirtyIndicator} | Sandcastle | CesiumJS`;
     }
   }, [title, codeState.dirty]);