Add reset button to Sandbox

src/pages/sandbox.css

@@ -127,6 +127,12 @@
     background-color: var(--bg-blur-color);
     box-shadow: 0 0 0 1px var(--outline-color);
 
+    header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
     h2 {
       margin-top: 0;
       padding-top: 0;

src/pages/sandbox.jsx

@@ -291,11 +291,8 @@ const MOCK_STATUS = ({ toggles = {} } = {}) => {
   return base;
 };
 
-export default function Sandbox() {
-  useTitle('Sandbox', '/_sandbox');
-
-  // Consolidated state for all toggles
-  const [toggleState, setToggleState] = useState({
+// Initial state
+const INITIAL_STATE = {
   loading: false,
   mediaFirst: false,
   hasContent: true,
@@ -317,7 +314,13 @@ export default function Sandbox() {
   mediaPreference: 'default',
   expandWarnings: false,
   contextType: 'none', // Default context type
-  });
+};
+
+export default function Sandbox() {
+  useTitle('Sandbox', '/_sandbox');
+
+  // Consolidated state for all toggles
+  const [toggleState, setToggleState] = useState(INITIAL_STATE);
 
   // Update function with view transitions
   const updateToggles = (updates) => {
@@ -674,6 +677,28 @@ export default function Sandbox() {
     updateToggles({ filters: newFilters });
   };
 
+  // Function to check if the current state is different from the initial state
+  const hasChanges = () => {
+    return Object.keys(INITIAL_STATE).some((key) => {
+      if (Array.isArray(INITIAL_STATE[key])) {
+        if (INITIAL_STATE[key].length !== toggleState[key].length) return true;
+        return INITIAL_STATE[key].some((val, i) => val !== toggleState[key][i]);
+      }
+      return INITIAL_STATE[key] !== toggleState[key];
+    });
+  };
+
+  // Function to reset state to initial values
+  const resetToInitialState = () => {
+    if (document.startViewTransition) {
+      document.startViewTransition(() => {
+        setToggleState({ ...INITIAL_STATE });
+      });
+    } else {
+      setToggleState({ ...INITIAL_STATE });
+    }
+  };
+
   return (
     <main id="sandbox">
       <header>
@@ -729,7 +754,17 @@ export default function Sandbox() {
         </FilterContext.Provider>
       </div>
       <form class="sandbox-toggles" onSubmit={(e) => e.preventDefault()}>
+        <header>
           <h2>Post Controls</h2>
+          <button
+            type="button"
+            onClick={resetToInitialState}
+            class="reset-button small plain6"
+            hidden={!hasChanges()}
+          >
+            Reset
+          </button>
+        </header>
         <ul>
           <li>
             <b>Miscellaneous</b>