new tool timer & alert revamp

website/src/features/toolboxes/ToolboxPages.jsx

@@ -3,6 +3,7 @@ import React, { useEffect, useRef, useState } from "react";
 import { Icon } from "../../components/Icon.jsx";
 import { ImportButton } from "../../components/ImportButton.jsx";
 import { StorageQuota } from "../../components/StorageQuota.jsx";
+import { ToastPositionSwitch } from "../../components/ToastPositionSwitch.jsx";
 import { usePointerReorder } from "../../hooks/usePointerReorder.js";
 import { compressImage } from "../../utils/imageCompression.js";
 import { getSetting as dbGetSetting, setSetting as dbSetSetting } from "../../utils/indexedDbStorage.js";
@@ -16,6 +17,7 @@ import {
   normalizeCountersData,
   normalizeImageAnnotationData,
   normalizeLinksData,
+  normalizeTimerData,
   normalizeUrl,
   uid
 } from "./storage/toolboxStorage.js";
@@ -31,7 +33,7 @@ async function copyText(value) {
   }
 }
 
-export function ToolboxesPage({ siteContent, toolboxes, getToolboxGame, actions, storageUsage }) {
+export function ToolboxesPage({ siteContent, toolboxes, getToolboxGame, actions, storageUsage, toastPosition, setToastPosition }) {
   const content = siteContent.toolboxes;
   const {
     draggingId: draggingToolboxId,
@@ -71,6 +73,21 @@ export function ToolboxesPage({ siteContent, toolboxes, getToolboxGame, actions,
           <ImportButton className="import-button" label={content.importAll} onFile={actions.importAllToolboxes} />
         </div>
       </section>
+      <section className="toolbox-preferences-row" aria-label={content.preferencesLabel}>
+        <div>
+          <p className="eyebrow">{content.preferencesLabel}</p>
+          <strong>{content.toastPositionLabel}</strong>
+        </div>
+        <ToastPositionSwitch
+          position={toastPosition}
+          onChange={setToastPosition}
+          labels={{
+            title: content.toastPositionLabel,
+            left: content.toastPositionLeft,
+            right: content.toastPositionRight
+          }}
+        />
+      </section>
       <section className="cards">
         <StorageHelpCard help={content.storageHelp} />
         {toolboxes.length ? toolboxes.map((toolbox) => (
@@ -128,6 +145,7 @@ function ToolboxView({ siteContent, toolbox, toolboxGame, embedded, actions, sto
     normalizeCountersData,
     normalizeCalculatorData,
     normalizeImageAnnotationData,
+    normalizeTimerData,
     normalizeUrl,
     hostnameFromUrl,
     copyText,