docs(changeset): fix: hideMousetrail option resetting when focus is l…

…ost.

.changeset/selfish-boxes-speak.md

@@ -0,0 +1,5 @@
+---
+"trello-kanban-task-board": patch
+---
+
+fix: hideMousetrail option resetting when focus is lost.

package.json

@@ -9,7 +9,8 @@
     "build:all": "npm run build && npm run build:extension",
     "test": "vitest run --coverage",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview",
+    "preview": "vite preview --port 3000",
+    "start": "npm run preview",
     "build:extension": "tsc -p tsconfig.extension.json && node createPackageJSON.js",
     "deploy": "npm run build:all && cd dist && vsce publish"
   },

src/App.tsx

@@ -7,8 +7,6 @@ import { GlobalContext } from "utils/context";
 import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import { ThemeSwitcher } from "nextjs-themes";
-import { MouseTrail } from "react-webgl-trails";
-import { Particles } from "webgl-generative-particles/react";
 
 function App() {
   const [state, _setState] = useState<BoardType>(defaultBoard);
@@ -26,12 +24,6 @@ function App() {
       <ThemeSwitcher storage="localStorage" themeTransition="all .3s" />
       <Board />
       <ToastContainer position="bottom-right" />
-      {!state.hideTrails && (
-        <>
-          <MouseTrail />
-          <Particles fullScreenOverlay />
-        </>
-      )}
     </GlobalContext.Provider>
   );
 }

src/components/board.tsx

@@ -9,6 +9,8 @@ import { useState } from "react";
 import Drawer from "./drawer";
 import { handleDragEnd } from "utils/drag";
 import { ColorSwitch } from "nextjs-themes";
+import { MouseTrail } from "react-webgl-trails";
+import { Particles } from "webgl-generative-particles/react";
 
 export default function Board() {
   const { state, setState } = useGlobalState();
@@ -32,6 +34,13 @@ export default function Board() {
         </main>
         {state.scope === "Browser" && <BrowserOnlyUI />}
       </div>
+
+      {!state.hideTrails && (
+        <>
+          <MouseTrail />
+          <Particles fullScreenOverlay />
+        </>
+      )}
     </DragDropContext>
   );
 }

src/utils/data.ts

@@ -4,6 +4,7 @@ import { nanoid } from "nanoid";
 export const taskId = "task-" + nanoid();
 export const defaultBoard: BoardType = {
   scope: "",
+  hideTrails: true,
   tasks: {
     [taskId]: {
       id: taskId,