Merge pull request #46 from mayank1513/fix/45-remove-trails

Fix/45 remove trails

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Trello Kanban Board
 
+## 0.7.1
+
+### Patch Changes
+
+- 387ba59: Add option to hide mouse trails.
+
 ## 0.7.0
 
 ### Minor Changes

extension/interface.ts

@@ -26,4 +26,5 @@ export interface BoardType {
   columns: ColumnType[];
   tasks: { [key: string]: TaskType };
   scope: string;
+  hideTrails?: boolean;
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "trello-kanban-task-board",
   "private": true,
-  "version": "0.7.0",
+  "version": "0.7.1",
   "type": "module",
   "scripts": {
     "dev": "vite --port 3000",
@@ -25,7 +25,8 @@
     "react-toastify": "^9.1.3",
     "react-webgl-trails": "^0.0.4",
     "rehype-raw": "^7.0.0",
-    "remark-gfm": "^4.0.0"
+    "remark-gfm": "^4.0.0",
+    "webgl-generative-particles": "^0.0.1"
   },
   "devDependencies": {
     "@changesets/cli": "^2.27.1",

src/App.tsx

@@ -8,6 +8,7 @@ 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);
@@ -25,7 +26,12 @@ function App() {
       <ThemeSwitcher storage="localStorage" themeTransition="all .3s" />
       <Board />
       <ToastContainer position="bottom-right" />
-      <MouseTrail />
+      {!state.hideTrails && (
+        <>
+          <MouseTrail />
+          <Particles fullScreenOverlay />
+        </>
+      )}
     </GlobalContext.Provider>
   );
 }

src/components/drawer/drawer.module.scss

@@ -9,7 +9,8 @@
     padding: 0;
     list-style-type: none;
   }
-  a {
+  a,
+  label {
     padding: 20px;
     display: block;
     color: inherit;

src/components/drawer/index.tsx

@@ -1,6 +1,7 @@
 import { vscode } from "utils/vscode";
 import styles from "./drawer.module.scss";
 import { MouseEventHandler } from "react";
+import { useGlobalState } from "utils/context";
 
 const links = [
   {
@@ -26,10 +27,24 @@ const links = [
 ];
 
 export default function Drawer({ open, scope }: { open: boolean; scope: string }) {
+  const { state, setState } = useGlobalState();
+
   return (
     <aside className={[styles.drawer, open ? styles.open : ""].join(" ")}>
       <ul>
         {scope !== "Browser" && <ExtensionOnlyUI scope={scope} />}
+        <li>
+          <label htmlFor="trails">
+            <input
+              id="trails"
+              type="checkbox"
+              checked={!state?.hideTrails}
+              onChange={() => setState({ ...state, hideTrails: !state.hideTrails })}
+            />
+            {"  "}
+            Show mouse trails?
+          </label>
+        </li>
         {links.map(({ text, href }) => (
           <li key={href}>
             <a href={href} target="_blank">

vitest.setup.ts

@@ -21,4 +21,6 @@ Object.defineProperty(window, "matchMedia", {
 
 vi.mock("react-webgl-trails", () => ({ MouseTrail: () => null }));
 
+vi.mock("react-webgl-trails/react", () => ({ Particles: () => null }));
+
 vi.mock("react-color-palette", () => ({ ColorPicker: () => null, useColor: useState }));