Merge branch 'main' into dependabot/npm_and_yarn/unocss-preset-primitives-0.0.2-beta.2

* chore: add tsparticles/react

* fix: imports and lint issues

* fix: imports and format

* feat: refactor settings and add LHD birthday celebration

* chore: lint and format

.editorconfig

@@ -8,5 +8,5 @@ trim_trailing_whitespace = true
 indent_size = 4
 indent_style = space
 
-[*.nix]
+[*.{nix,yaml,yml}]
 indent_size = 2

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,10 +1,9 @@
 ---
 name: Bug report
 about: Create a report to help us improve
-title: "[BUG] "
+title: '[BUG] '
 labels: ''
 assignees: ''
-
 ---
 
 **Pre-submission Checklist**
@@ -30,11 +29,11 @@ assignees: ''
 
 **Expected Behavior**
 
-<!-- A clear and concise description of what you expected to happen -->
+<!-- What you expected to happen -->
 
 **Current Behavior**
 
-<!-- A clear and concise description of what actually happened -->
+<!-- What actually happened -->
 
 **Screenshots**
 

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,10 +1,9 @@
 ---
 name: Feature Request
 about: Suggest an idea for this project
-title: "[FEATURE] "
+title: '[FEATURE] '
 labels: feature
 assignees: ''
-
 ---
 
 **Pre-submission Checklist**
@@ -17,18 +16,14 @@ assignees: ''
 - [ ] I have reviewed the documentation to confirm this feature doesn't exist
 - [ ] I have completed all sections below with detailed information
 
-**Feature Description**
+**Your Idea**
 
-<!-- A clear and concise description of the feature you'd like to see -->
+<!-- A clear and concise description of the feature you'd like to see, and how it would work -->
-
-**Proposed Solution**
-
-<!-- A clear and concise description of what you want to happen -->
 
 **UI/UX Considerations**
 
-<!-- If this feature involves UI changes, please describe the visual aspects -->
+<!-- If this feature involves UI changes (aka how it looks), please describe the visual aspects -->
 
-**Technical Implementation Details**
+**Other**
 
-<!-- If you have specific technical suggestions, list them here -->
+<!-- Any other comments you have can go here! -->

.github/ISSUE_TEMPLATE/updating-build-dependencies.md

@@ -4,7 +4,6 @@ about: Updating Build Dependencies
 title: ''
 labels: build, dependencies
 assignees: doprz, Razboy20
-
 ---
 
 - [ ] Updated Nix Flake

.github/dependabot.yml

@@ -15,7 +15,6 @@ updates:
       major-updates:
         update-types:
           - 'major'
-
     ignore:
       - dependency-name: '@crxjs/vite-plugin'
       - dependency-name: '@unocss/vite'

.github/workflows/best-practices.yml

@@ -1,43 +1,33 @@
 name: Best Practices
-
 on: [push, pull_request]
-
 jobs:
   lint:
     runs-on: ubuntu-latest
-
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
         with:
           fetch-depth: 0
-
       - name: Setup pnpm
         uses: pnpm/action-setup@v4
         with:
           version: 10
-
       - name: Install dependencies
         run: pnpm install
-
       - name: Run ESLint
         run: pnpm run lint
   format:
     runs-on: ubuntu-latest
-
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
         with:
           fetch-depth: 0
-
       - name: Setup pnpm
         uses: pnpm/action-setup@v4
         with:
           version: 10
-
       - name: Install dependencies
         run: pnpm install
-
       - name: Run Prettier
         run: pnpm run prettier

.github/workflows/check-types.yml

@@ -1,24 +1,18 @@
 name: Type Check
-
 on: [push, pull_request]
-
 jobs:
   type-check:
     runs-on: ubuntu-latest
-
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
         with:
           fetch-depth: 0
-
       - name: Setup pnpm
         uses: pnpm/action-setup@v4
         with:
           version: 10
-
       - name: Install dependencies
         run: pnpm install
-
       - name: Run tests
         run: pnpm run check-types

.github/workflows/chromatic.yml

@@ -1,7 +1,5 @@
 name: 'Chromatic'
-
 on: [push, pull_request]
-
 jobs:
   chromatic:
     runs-on: ubuntu-latest
@@ -14,10 +12,8 @@ jobs:
         uses: pnpm/action-setup@v4
         with:
           version: 10
-
       - name: Install dependencies
         run: pnpm install
-
       - name: Publish to Chromatic
         uses: chromaui/action@latest
         with:

.github/workflows/release.yml

@@ -15,7 +15,6 @@ jobs:
       - uses: actions/checkout@master
       - name: Get file permission
         run: chmod -R 777 .
-
       - name: Install dependencies
         run: npm ci
       - name: Release with semantic-release

.github/workflows/tests.yml

@@ -1,24 +1,18 @@
 name: Tests
-
 on: [push, pull_request]
-
 jobs:
   test:
     runs-on: ubuntu-latest
-
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
         with:
           fetch-depth: 0
-
       - name: Setup pnpm
         uses: pnpm/action-setup@v4
         with:
           version: 10
-
       - name: Install dependencies
         run: pnpm install
-
       - name: Run tests
         run: pnpm test

.github/workflows/validate-pr.yml

@@ -1,8 +1,6 @@
 name: Validate PR Title
-
 # thank you ben limmer for this workflow:
 # https://github.com/blimmer/semantic-release-demo-2/blob/main/.github/workflows/lint-pr.yml
-
 on:
   pull_request_target:
     types:
@@ -10,7 +8,6 @@ on:
       - reopened
       - edited
       - synchronize
-
 jobs:
   main:
     runs-on: ubuntu-latest

.gitignore

@@ -212,4 +212,9 @@ package-lock.json
 storybook-static/
 package/
 
-.direnv/
+# Nix
+result
+result-*
+
+# direnv
+.direnv

.vscode/launch.json

@@ -6,13 +6,9 @@
             "request": "launch",
             "name": "Run current script",
             "runtimeExecutable": "npx",
-            "runtimeArgs": [
+            "runtimeArgs": ["tsx"],
-                "tsx"
-            ],
             "program": "${file}",
-            "skipFiles": [
+            "skipFiles": ["<node_internals>/**"]
-                "<node_internals>/**"
-            ],
         }
     ]
 }

.vscode/settings.json

@@ -26,7 +26,7 @@
         "navigation": "Routes",
         "logging": "log",
         "popup": "Layout",
-        "storage": "Database",
+        "storage": "Database"
     },
     "material-icon-theme.files.associations": {
         "tsconfig.extension.json": "tsconfig",
@@ -36,5 +36,5 @@
     "[html]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
-    "typescript.tsdk": "node_modules/typescript/lib",
+    "typescript.tsdk": "node_modules/typescript/lib"
 }

CHANGELOG.md

@@ -1,3 +1,18 @@
+## [2.3.0](https://github.com/Longhorn-Developers/UT-Registration-Plus/compare/v2.2.2...v2.3.0) (2026-01-07)
+
+### Features
+
+* add drag-and-drop import for schedules ([#661](https://github.com/Longhorn-Developers/UT-Registration-Plus/issues/661)) ([549c52a](https://github.com/Longhorn-Developers/UT-Registration-Plus/commit/549c52a39fee718f2bb07cfce33a294835a2246b)), closes [#446](https://github.com/Longhorn-Developers/UT-Registration-Plus/issues/446)
+* allow bypassing the 10-schedule limit ([#675](https://github.com/Longhorn-Developers/UT-Registration-Plus/issues/675)) ([6a67a32](https://github.com/Longhorn-Developers/UT-Registration-Plus/commit/6a67a32e4f50a5bdd20aa43789f199b822483e2d))
+* condense resourceLinks course schedule ([#676](https://github.com/Longhorn-Developers/UT-Registration-Plus/issues/676)) ([cee5f02](https://github.com/Longhorn-Developers/UT-Registration-Plus/commit/cee5f0284f09f39ca5ae64559d0b697646c77e74))
+* LHD birthday ([#717](https://github.com/Longhorn-Developers/UT-Registration-Plus/issues/717)) ([2d18553](https://github.com/Longhorn-Developers/UT-Registration-Plus/commit/2d18553f98c5146fa18699ae20462e7dcbc9d35c))
+* **nix:** add prettier-version-match check ([#713](https://github.com/Longhorn-Developers/UT-Registration-Plus/issues/713)) ([8ccf7fb](https://github.com/Longhorn-Developers/UT-Registration-Plus/commit/8ccf7fb37e769ba445f39c140ca9c1c4245cc1c1))
+* **nix:** build UTRP ([#714](https://github.com/Longhorn-Developers/UT-Registration-Plus/issues/714)) ([38bb29b](https://github.com/Longhorn-Developers/UT-Registration-Plus/commit/38bb29b20b97ed3cf8fd6511df16553fed1d58bb))
+
+### Bug Fixes
+
+* .editorconfig syntax for nix files ([b406d4d](https://github.com/Longhorn-Developers/UT-Registration-Plus/commit/b406d4dd244a25688c2b9621cf5d441228bd8913))
+* toSorted outdated chrome bug  ([#694](https://github.com/Longhorn-Developers/UT-Registration-Plus/issues/694)) ([4f5d8c6](https://github.com/Longhorn-Developers/UT-Registration-Plus/commit/4f5d8c6d20e3cfeb7b62520ba1819e297d2cc60f))
 ## [2.2.2](https://github.com/Longhorn-Developers/UT-Registration-Plus/compare/v2.2.1...v2.2.2) (2025-10-13)
 
 ### Features
@@ -6,6 +21,7 @@
 * automatically select new or duplicated schedules ([#583](https://github.com/Longhorn-Developers/UT-Registration-Plus/issues/583)) ([#589](https://github.com/Longhorn-Developers/UT-Registration-Plus/issues/589)) ([2a50f55](https://github.com/Longhorn-Developers/UT-Registration-Plus/commit/2a50f5580d3dbeb0d66546c23cf29bbb37d80da2))
 * **env:** add SENTRY env vars ([8f7e1bc](https://github.com/Longhorn-Developers/UT-Registration-Plus/commit/8f7e1bc0af6336549068e02b80df21d4e8f4ef9c))
 * export schedule button add to calendar ([#594](https://github.com/Longhorn-Developers/UT-Registration-Plus/issues/594)) ([5994ded](https://github.com/Longhorn-Developers/UT-Registration-Plus/commit/5994ded8be876cb55174d27d3fdb0832b21a0ff9))
+* **release:** v2.2.2 ([c21cbd7](https://github.com/Longhorn-Developers/UT-Registration-Plus/commit/c21cbd77f0764c03a711589ff4f957cb8c936eec))
 * search result shading ([#617](https://github.com/Longhorn-Developers/UT-Registration-Plus/issues/617)) ([be861b8](https://github.com/Longhorn-Developers/UT-Registration-Plus/commit/be861b823cb2cb7f6f4a1f266351eec3fc1c2f99))
 * show warning for courses of different semesters ([#570](https://github.com/Longhorn-Developers/UT-Registration-Plus/issues/570)) ([2e7dac1](https://github.com/Longhorn-Developers/UT-Registration-Plus/commit/2e7dac1e3eba757231ac07ac966231c08c703a16))
 * support summer grades, fix summer course parser ([#596](https://github.com/Longhorn-Developers/UT-Registration-Plus/issues/596)) ([2d92dd4](https://github.com/Longhorn-Developers/UT-Registration-Plus/commit/2d92dd47f00a44b7d48e92a8ffba94480e4e73f9))

README.md

@@ -205,7 +205,7 @@ Special thanks to the developers and contributors behind these amazing tools and
 
 ## Activity
 
-![UT-Registration-Plus Activity](https://repobeats.axiom.co/api/embed/47930fa3916ac1b475cd63a05948c449eb5ad502.svg "UT-Registration-Plus Repobeats analytics image")
+![UT-Registration-Plus Activity](https://repobeats.axiom.co/api/embed/47930fa3916ac1b475cd63a05948c449eb5ad502.svg 'UT-Registration-Plus Repobeats analytics image')
 
 ## Star History
 

default.nix

@@ -0,0 +1,10 @@
+(import (
+  let
+    rev = "v1.1.0";
+    sha256 = "sha256:19d2z6xsvpxm184m41qrpi1bplilwipgnzv9jy17fgw421785q1m";
+  in
+  fetchTarball {
+    inherit sha256;
+    url = "https://github.com/NixOS/flake-compat/archive/${rev}.tar.gz";
+  }
+) { src = ./.; }).defaultNix

docker-entrypoint.sh

@@ -24,7 +24,7 @@ else
 fi
 
 # Validate the mode
-if [[ ! " ${SUPPORTED_MODES[*]} " =~ " ${mode} " ]]; then
+if [[ ! " ${SUPPORTED_MODES[*]} " =~  ${mode}  ]]; then
     echo "Error: Invalid mode '${mode}'" >&2
     usage
 fi

flake.lock

@@ -1,30 +1,30 @@
 {
   "nodes": {
-    "flake-utils": {
+    "flake-parts": {
       "inputs": {
-        "systems": "systems"
+        "nixpkgs-lib": "nixpkgs-lib"
       },
       "locked": {
-        "lastModified": 1731533236,
+        "lastModified": 1767609335,
-        "narHash": "sha256-l0KFg5HjrsfsO/JpG+r7fRrqm12kzFHyUHqHCVpMMbI=",
+        "narHash": "sha256-feveD98mQpptwrAEggBQKJTYbvwwglSbOv53uCfH9PY=",
-        "owner": "numtide",
+        "owner": "hercules-ci",
-        "repo": "flake-utils",
+        "repo": "flake-parts",
-        "rev": "11707dc2f618dd54ca8739b309ec4fc024de578b",
+        "rev": "250481aafeb741edfe23d29195671c19b36b6dca",
         "type": "github"
       },
       "original": {
-        "owner": "numtide",
+        "owner": "hercules-ci",
-        "repo": "flake-utils",
+        "repo": "flake-parts",
         "type": "github"
       }
     },
     "nixpkgs": {
       "locked": {
-        "lastModified": 1759831965,
+        "lastModified": 1767640445,
-        "narHash": "sha256-vgPm2xjOmKdZ0xKA6yLXPJpjOtQPHfaZDRtH+47XEBo=",
+        "narHash": "sha256-UWYqmD7JFBEDBHWYcqE6s6c77pWdcU/i+bwD6XxMb8A=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "c9b6fb798541223bbb396d287d16f43520250518",
+        "rev": "9f0c42f8bc7151b8e7e5840fb3bd454ad850d8c5",
         "type": "github"
       },
       "original": {
@@ -34,24 +34,59 @@
         "type": "github"
       }
     },
-    "root": {
+    "nixpkgs-lib": {
-      "inputs": {
-        "flake-utils": "flake-utils",
-        "nixpkgs": "nixpkgs"
-      }
-    },
-    "systems": {
       "locked": {
-        "lastModified": 1681028828,
+        "lastModified": 1765674936,
-        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
+        "narHash": "sha256-k00uTP4JNfmejrCLJOwdObYC9jHRrr/5M/a/8L2EIdo=",
-        "owner": "nix-systems",
+        "owner": "nix-community",
-        "repo": "default",
+        "repo": "nixpkgs.lib",
-        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
+        "rev": "2075416fcb47225d9b68ac469a5c4801a9c4dd85",
         "type": "github"
       },
       "original": {
-        "owner": "nix-systems",
+        "owner": "nix-community",
-        "repo": "default",
+        "repo": "nixpkgs.lib",
+        "type": "github"
+      }
+    },
+    "nixpkgs_2": {
+      "locked": {
+        "lastModified": 1761236834,
+        "narHash": "sha256-+pthv6hrL5VLW2UqPdISGuLiUZ6SnAXdd2DdUE+fV2Q=",
+        "owner": "nixos",
+        "repo": "nixpkgs",
+        "rev": "d5faa84122bc0a1fd5d378492efce4e289f8eac1",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nixos",
+        "ref": "nixpkgs-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "flake-parts": "flake-parts",
+        "nixpkgs": "nixpkgs",
+        "treefmt-nix": "treefmt-nix"
+      }
+    },
+    "treefmt-nix": {
+      "inputs": {
+        "nixpkgs": "nixpkgs_2"
+      },
+      "locked": {
+        "lastModified": 1767468822,
+        "narHash": "sha256-MpffQxHxmjVKMiQd0Tg2IM/bSjjdQAM+NDcX6yxj7rE=",
+        "owner": "numtide",
+        "repo": "treefmt-nix",
+        "rev": "d56486eb9493ad9c4777c65932618e9c2d0468fc",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "treefmt-nix",
         "type": "github"
       }
     }

flake.nix

@@ -1,43 +1,33 @@
 {
   inputs = {
     nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";
-    flake-utils.url = "github:numtide/flake-utils";
+    flake-parts.url = "github:hercules-ci/flake-parts";
+    treefmt-nix.url = "github:numtide/treefmt-nix";
   };
 
   outputs =
-    {
+    inputs@{ flake-parts, ... }:
-      self,
+    flake-parts.lib.mkFlake { inherit inputs; } {
-      nixpkgs,
+      systems = inputs.nixpkgs.lib.systems.flakeExposed;
-      flake-utils,
-    }:
-    flake-utils.lib.eachDefaultSystem (
-      system:
-      let
-        pkgs = (import nixpkgs { inherit system; });
 
-        commonPackages = with pkgs; [
+      imports = [
-          nodejs_20 # v20.19.5
+        ./nix/packages.nix
-          pnpm_10 # v10.18.0
+        ./nix/devShells.nix
+        ./nix/treefmt.nix
       ];
 
-        additionalPackages = with pkgs; [
+      perSystem =
-          bun
+        { system, ... }:
-          nodePackages.conventional-changelog-cli
-          sentry-cli
-        ];
-      in
         {
-        formatter = pkgs.nixfmt-rfc-style;
+          _module.args.pkgs = import inputs.nixpkgs {
-
+            inherit system;
-        devShells.default = pkgs.mkShell {
+            overlays = [
-          name = "utrp-dev";
+              (final: prev: {
-          buildInputs = commonPackages;
+                nodejs = prev.nodejs_20; # v20.19.5
+              })
+            ];
+            config = { };
+          };
         };
-
-        devShells.full = pkgs.mkShell {
-          name = "utrp-dev-full";
-          buildInputs = commonPackages ++ additionalPackages;
     };
 }
-    );
-}

nix/devShells.nix

@@ -0,0 +1,30 @@
+{
+  perSystem =
+    {
+      pkgs,
+      ...
+    }:
+    let
+      commonPackages = with pkgs; [
+        nodejs # Defined in overlay
+        pnpm_10 # v10.18.2
+      ];
+
+      additionalPackages = with pkgs; [
+        bun
+        nodePackages.conventional-changelog-cli
+        sentry-cli
+      ];
+    in
+    {
+      devShells.default = pkgs.mkShell {
+        name = "utrp-dev";
+        packages = commonPackages;
+      };
+
+      devShells.full = pkgs.mkShell {
+        name = "utrp-dev-full";
+        packages = commonPackages ++ additionalPackages;
+      };
+    };
+}

nix/package.nix

@@ -0,0 +1,51 @@
+{
+  stdenv,
+  lib,
+  nodejs,
+  pnpm_10,
+  git,
+  version ? "dev",
+  gitRev ? "unknown",
+  gitBranch ? "unknown",
+  buildScript ? "build",
+}:
+
+stdenv.mkDerivation (finalAttrs: {
+  inherit version;
+  pname = "ut-registration-plus";
+
+  src = ../.;
+
+  nativeBuildInputs = [
+    nodejs
+    pnpm_10.configHook
+    git
+  ];
+
+  pnpmDeps = pnpm_10.fetchDeps {
+    inherit (finalAttrs) pname version src;
+    fetcherVersion = 2;
+    hash = "sha256-UqHymJWvlTV4glra/6DkxuCxbG5dpPkFcnvq3vuxsJ8=";
+  };
+
+  # Pass git info to the build
+  VITE_GIT_COMMIT = gitRev;
+  VITE_GIT_BRANCH = gitBranch;
+
+  buildPhase = ''
+    pnpm run ${buildScript}
+  '';
+
+  installPhase = ''
+    mkdir -p $out
+    cp -r dist/* $out/
+  '';
+
+  meta = {
+    description = "UT Registration Plus";
+    homepage = "https://github.com/Longhorn-Developers/UT-Registration-Plus";
+    license = lib.licenses.mit;
+    maintainers = lib.maintainers.doprz;
+    platforms = lib.platforms.unix;
+  };
+})

nix/packages.nix

@@ -0,0 +1,40 @@
+{ inputs, ... }:
+{
+  perSystem =
+    { pkgs, ... }:
+    let
+      packageJson = builtins.fromJSON (builtins.readFile ../package.json);
+      gitRev = inputs.self.shortRev or inputs.self.dirtyShortRev or "dev";
+      gitBranch = if inputs.self ? ref then inputs.self.ref else "unknown";
+      baseVersion = packageJson.version;
+
+      commonArgs = {
+        inherit gitRev gitBranch;
+      };
+
+      # Prod variant
+      ut-registration-plus = pkgs.callPackage ./package.nix (
+        commonArgs
+        // {
+          version = "${baseVersion}+git.${gitRev}";
+          buildScript = "build";
+        }
+      );
+
+      # Dev variant
+      ut-registration-plus-dev = pkgs.callPackage ./package.nix (
+        commonArgs
+        // {
+          version = "${baseVersion}-dev+git.${gitRev}";
+          buildScript = "build:dev";
+        }
+      );
+    in
+    {
+      packages = {
+        inherit ut-registration-plus ut-registration-plus-dev;
+        default = ut-registration-plus;
+        dev = ut-registration-plus-dev;
+      };
+    };
+}

nix/treefmt.nix

@@ -0,0 +1,63 @@
+{ inputs, ... }:
+{
+  imports = [
+    inputs.treefmt-nix.flakeModule
+  ];
+
+  perSystem =
+    { pkgs, ... }:
+    {
+      treefmt = {
+        projectRootFile = "flake.nix";
+        programs.nixfmt.enable = pkgs.lib.meta.availableOn pkgs.stdenv.buildPlatform pkgs.nixfmt-rfc-style.compiler;
+        programs.nixfmt.package = pkgs.nixfmt-rfc-style;
+
+        # NOTE: Make sure the prettier version in package.json and the one used by treefmt are the same for consistent results
+        programs.prettier.enable = true;
+        programs.shellcheck.enable = true;
+        programs.yamlfmt.enable = true;
+        programs.dockerfmt.enable = true;
+
+        settings.formatter.prettier.excludes = [ "pnpm-lock.yaml" ];
+        settings.formatter.shellcheck.excludes = [ ".envrc" ];
+        settings.formatter.yamlfmt.excludes = [ "pnpm-lock.yaml" ];
+      };
+
+      checks = {
+        prettier-version-match =
+          pkgs.runCommand "check-prettier-version"
+            {
+              buildInputs = [ pkgs.jq ];
+            }
+            ''
+              # Extract prettier version from package.json
+              packageJsonVersion=$(jq -r '.devDependencies.prettier // empty' ${../package.json})
+
+              if [ -z "$packageJsonVersion" ]; then
+                echo "Error: prettier not found in package.json devDependencies"
+                exit 1
+              fi
+
+              # Remove any semver prefix characters (^, ~, etc...)
+              packageJsonVersion=$(echo "$packageJsonVersion" | sed 's/^[\^~>=<]*//')
+
+              # Get prettier version from nixpkgs
+              nixVersion="${pkgs.nodePackages.prettier.version}"
+
+              if [ "$packageJsonVersion" != "$nixVersion" ]; then
+                echo ""
+                echo "ERROR: Prettier version mismatch!"
+                echo "  package.json: $packageJsonVersion"
+                echo "  nixpkgs:      $nixVersion"
+                echo ""
+                echo "Please update one of the following:"
+                echo "  - Update prettier in package.json to match nixpkgs: $nixVersion"
+                echo "  - Override prettier in your flake to match package.json"
+                exit 1
+              fi
+
+              touch $out
+            '';
+      };
+    };
+}

package.json

@@ -1,7 +1,7 @@
 {
     "name": "ut-registration-plus",
     "displayName": "UT Registration Plus",
-    "version": "2.2.2",
+    "version": "2.3.0",
     "description": "UT Registration Plus is a Chrome extension that allows students to easily register for classes.",
     "private": true,
     "homepage": "https://github.com/Longhorn-Developers/UT-Registration-Plus",
@@ -39,6 +39,9 @@
         "@phosphor-icons/react": "^2.1.7",
         "@sentry/react": "^8.55.0",
         "@tanstack/react-query": "^5.69.0",
+        "@tsparticles/engine": "^3.9.1",
+        "@tsparticles/react": "^3.0.0",
+        "@tsparticles/slim": "^3.9.1",
         "@unocss/vite": "^0.63.6",
         "@vitejs/plugin-react": "^4.3.4",
         "chrome-extension-toolkit": "^0.0.54",
@@ -136,13 +139,13 @@
         "gulp-zip": "^6.1.0",
         "path": "^0.12.7",
         "postcss": "^8.5.3",
-        "prettier": "^3.5.2",
+        "prettier": "3.6.2",
         "react-dev-utils": "^12.0.1",
         "semantic-release": "^24.2.3",
         "storybook": "^8.6.0",
         "typescript": "^5.7.3",
         "unocss": "^0.63.6",
-        "unocss-preset-primitives": "0.0.2-beta.1",
+        "unocss-preset-primitives": "0.0.2-beta.2",
         "unplugin-icons": "^0.19.3",
         "vite": "^5.4.20",
         "vite-plugin-inspect": "^0.8.9",
@@ -159,7 +162,10 @@
         },
         "overrides": {
             "es-module-lexer": "^1.5.4"
-        }
+        },
+        "onlyBuiltDependencies": [
+            "@tsparticles/engine"
+        ]
     },
     "volta": {
         "node": "20.19.4",

pnpm-lock.yaml

@@ -49,6 +49,15 @@ importers:
       '@tanstack/react-query':
         specifier: ^5.69.0
         version: 5.69.0(react@18.3.1)
+      '@tsparticles/engine':
+        specifier: ^3.9.1
+        version: 3.9.1
+      '@tsparticles/react':
+        specifier: ^3.0.0
+        version: 3.0.0(@tsparticles/engine@3.9.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@tsparticles/slim':
+        specifier: ^3.9.1
+        version: 3.9.1
       '@unocss/vite':
         specifier: ^0.63.6
         version: 0.63.6(patch_hash=9e2d2732a6e057a2ca90fba199730f252d8b4db8631b2c6ee0854fce7771bc95)(rollup@4.52.4)(typescript@5.7.3)(vite@5.4.20(@types/node@22.13.5)(sass@1.85.1)(terser@5.44.0))
@@ -154,25 +163,25 @@ importers:
         version: 8.55.0
       '@storybook/addon-designs':
         specifier: ^8.2.0
-        version: 8.2.0(@storybook/blocks@8.6.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.0(prettier@3.5.2)))(@storybook/components@8.6.0(storybook@8.6.0(prettier@3.5.2)))(@storybook/theming@8.6.0(storybook@8.6.0(prettier@3.5.2)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 8.2.0(@storybook/blocks@8.6.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.0(prettier@3.6.2)))(@storybook/components@8.6.0(storybook@8.6.0(prettier@3.6.2)))(@storybook/theming@8.6.0(storybook@8.6.0(prettier@3.6.2)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@storybook/addon-essentials':
         specifier: ^8.6.0
-        version: 8.6.0(@types/react@18.3.18)(storybook@8.6.0(prettier@3.5.2))
+        version: 8.6.0(@types/react@18.3.18)(storybook@8.6.0(prettier@3.6.2))
       '@storybook/addon-links':
         specifier: ^8.6.0
-        version: 8.6.0(react@18.3.1)(storybook@8.6.0(prettier@3.5.2))
+        version: 8.6.0(react@18.3.1)(storybook@8.6.0(prettier@3.6.2))
       '@storybook/blocks':
         specifier: ^8.6.0
-        version: 8.6.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.0(prettier@3.5.2))
+        version: 8.6.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.0(prettier@3.6.2))
       '@storybook/react':
         specifier: ^8.6.0
-        version: 8.6.0(@storybook/test@8.6.0(storybook@8.6.0(prettier@3.5.2)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.0(prettier@3.5.2))(typescript@5.7.3)
+        version: 8.6.0(@storybook/test@8.6.0(storybook@8.6.0(prettier@3.6.2)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.0(prettier@3.6.2))(typescript@5.7.3)
       '@storybook/react-vite':
         specifier: ^8.6.0
-        version: 8.6.0(@storybook/test@8.6.0(storybook@8.6.0(prettier@3.5.2)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.52.4)(storybook@8.6.0(prettier@3.5.2))(typescript@5.7.3)(vite@5.4.20(@types/node@22.13.5)(sass@1.85.1)(terser@5.44.0))
+        version: 8.6.0(@storybook/test@8.6.0(storybook@8.6.0(prettier@3.6.2)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.52.4)(storybook@8.6.0(prettier@3.6.2))(typescript@5.7.3)(vite@5.4.20(@types/node@22.13.5)(sass@1.85.1)(terser@5.44.0))
       '@storybook/test':
         specifier: ^8.6.0
-        version: 8.6.0(storybook@8.6.0(prettier@3.5.2))
+        version: 8.6.0(storybook@8.6.0(prettier@3.6.2))
       '@svgr/core':
         specifier: ^8.1.0
         version: 8.1.0(typescript@5.7.3)
@@ -298,7 +307,7 @@ importers:
         version: 50.6.3(eslint@8.57.1)
       eslint-plugin-prettier:
         specifier: ^5.2.3
-        version: 5.2.3(@types/eslint@9.6.1)(eslint-config-prettier@9.1.0(eslint@8.57.1))(eslint@8.57.1)(prettier@3.5.2)
+        version: 5.2.3(@types/eslint@9.6.1)(eslint-config-prettier@9.1.0(eslint@8.57.1))(eslint@8.57.1)(prettier@3.6.2)
       eslint-plugin-react:
         specifier: ^7.37.4
         version: 7.37.4(eslint@8.57.1)
@@ -336,8 +345,8 @@ importers:
         specifier: ^8.5.3
         version: 8.5.3
       prettier:
-        specifier: ^3.5.2
+        specifier: 3.6.2
-        version: 3.5.2
+        version: 3.6.2
       react-dev-utils:
         specifier: ^12.0.1
         version: 12.0.1(eslint@8.57.1)(typescript@5.7.3)(webpack@5.97.1(esbuild@0.25.10))
@@ -346,7 +355,7 @@ importers:
         version: 24.2.3(typescript@5.7.3)
       storybook:
         specifier: ^8.6.0
-        version: 8.6.0(prettier@3.5.2)
+        version: 8.6.0(prettier@3.6.2)
       typescript:
         specifier: ^5.7.3
         version: 5.7.3
@@ -354,8 +363,8 @@ importers:
         specifier: ^0.63.6
         version: 0.63.6(postcss@8.5.3)(rollup@4.52.4)(typescript@5.7.3)(vite@5.4.20(@types/node@22.13.5)(sass@1.85.1)(terser@5.44.0))
       unocss-preset-primitives:
-        specifier: 0.0.2-beta.1
+        specifier: 0.0.2-beta.2
-        version: 0.0.2-beta.1
+        version: 0.0.2-beta.2(@unocss/core@0.63.6)
       unplugin-icons:
         specifier: ^0.19.3
         version: 0.19.3(@svgr/core@8.1.0(typescript@5.7.3))(@vue/compiler-sfc@3.5.13)
@@ -2075,6 +2084,121 @@ packages:
     resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
     engines: {node: '>=10.13.0'}
 
+  '@tsparticles/basic@3.9.1':
+    resolution: {integrity: sha512-ijr2dHMx0IQHqhKW3qA8tfwrR2XYbbWYdaJMQuBo2CkwBVIhZ76U+H20Y492j/NXpd1FUnt2aC0l4CEVGVGdeQ==}
+
+  '@tsparticles/engine@3.9.1':
+    resolution: {integrity: sha512-DpdgAhWMZ3Eh2gyxik8FXS6BKZ8vyea+Eu5BC4epsahqTGY9V3JGGJcXC6lRJx6cPMAx1A0FaQAojPF3v6rkmQ==}
+
+  '@tsparticles/interaction-external-attract@3.9.1':
+    resolution: {integrity: sha512-5AJGmhzM9o4AVFV24WH5vSqMBzOXEOzIdGLIr+QJf4fRh9ZK62snsusv/ozKgs2KteRYQx+L7c5V3TqcDy2upg==}
+
+  '@tsparticles/interaction-external-bounce@3.9.1':
+    resolution: {integrity: sha512-bv05+h70UIHOTWeTsTI1AeAmX6R3s8nnY74Ea6p6AbQjERzPYIa0XY19nq/hA7+Nrg+EissP5zgoYYeSphr85A==}
+
+  '@tsparticles/interaction-external-bubble@3.9.1':
+    resolution: {integrity: sha512-tbd8ox/1GPl+zr+KyHQVV1bW88GE7OM6i4zql801YIlCDrl9wgTDdDFGIy9X7/cwTvTrCePhrfvdkUamXIribQ==}
+
+  '@tsparticles/interaction-external-connect@3.9.1':
+    resolution: {integrity: sha512-sq8YfUNsIORjXHzzW7/AJQtfi/qDqLnYG2qOSE1WOsog39MD30RzmiOloejOkfNeUdcGUcfsDgpUuL3UhzFUOA==}
+
+  '@tsparticles/interaction-external-grab@3.9.1':
+    resolution: {integrity: sha512-QwXza+sMMWDaMiFxd8y2tJwUK6c+nNw554+/9+tEZeTTk2fCbB0IJ7p/TH6ZGWDL0vo2muK54Njv2fEey191ow==}
+
+  '@tsparticles/interaction-external-pause@3.9.1':
+    resolution: {integrity: sha512-Gzv4/FeNir0U/tVM9zQCqV1k+IAgaFjDU3T30M1AeAsNGh/rCITV2wnT7TOGFkbcla27m4Yxa+Fuab8+8pzm+g==}
+
+  '@tsparticles/interaction-external-push@3.9.1':
+    resolution: {integrity: sha512-GvnWF9Qy4YkZdx+WJL2iy9IcgLvzOIu3K7aLYJFsQPaxT8d9TF8WlpoMlWKnJID6H5q4JqQuMRKRyWH8aAKyQw==}
+
+  '@tsparticles/interaction-external-remove@3.9.1':
+    resolution: {integrity: sha512-yPThm4UDWejDOWW5Qc8KnnS2EfSo5VFcJUQDWc1+Wcj17xe7vdSoiwwOORM0PmNBzdDpSKQrte/gUnoqaUMwOA==}
+
+  '@tsparticles/interaction-external-repulse@3.9.1':
+    resolution: {integrity: sha512-/LBppXkrMdvLHlEKWC7IykFhzrz+9nebT2fwSSFXK4plEBxDlIwnkDxd3FbVOAbnBvx4+L8+fbrEx+RvC8diAw==}
+
+  '@tsparticles/interaction-external-slow@3.9.1':
+    resolution: {integrity: sha512-1ZYIR/udBwA9MdSCfgADsbDXKSFS0FMWuPWz7bm79g3sUxcYkihn+/hDhc6GXvNNR46V1ocJjrj0u6pAynS1KQ==}
+
+  '@tsparticles/interaction-particles-attract@3.9.1':
+    resolution: {integrity: sha512-CYYYowJuGwRLUixQcSU/48PTKM8fCUYThe0hXwQ+yRMLAn053VHzL7NNZzKqEIeEyt5oJoy9KcvubjKWbzMBLQ==}
+
+  '@tsparticles/interaction-particles-collisions@3.9.1':
+    resolution: {integrity: sha512-ggGyjW/3v1yxvYW1IF1EMT15M6w31y5zfNNUPkqd/IXRNPYvm0Z0ayhp+FKmz70M5p0UxxPIQHTvAv9Jqnuj8w==}
+
+  '@tsparticles/interaction-particles-links@3.9.1':
+    resolution: {integrity: sha512-MsLbMjy1vY5M5/hu/oa5OSRZAUz49H3+9EBMTIOThiX+a+vpl3sxc9AqNd9gMsPbM4WJlub8T6VBZdyvzez1Vg==}
+
+  '@tsparticles/move-base@3.9.1':
+    resolution: {integrity: sha512-X4huBS27d8srpxwOxliWPUt+NtCwY+8q/cx1DvQxyqmTA8VFCGpcHNwtqiN+9JicgzOvSuaORVqUgwlsc7h4pQ==}
+
+  '@tsparticles/move-parallax@3.9.1':
+    resolution: {integrity: sha512-whlOR0bVeyh6J/hvxf/QM3DqvNnITMiAQ0kro6saqSDItAVqg4pYxBfEsSOKq7EhjxNvfhhqR+pFMhp06zoCVA==}
+
+  '@tsparticles/plugin-easing-quad@3.9.1':
+    resolution: {integrity: sha512-C2UJOca5MTDXKUTBXj30Kiqr5UyID+xrY/LxicVWWZPczQW2bBxbIbfq9ULvzGDwBTxE2rdvIB8YFKmDYO45qw==}
+
+  '@tsparticles/plugin-hex-color@3.9.1':
+    resolution: {integrity: sha512-vZgZ12AjUicJvk7AX4K2eAmKEQX/D1VEjEPFhyjbgI7A65eX72M465vVKIgNA6QArLZ1DLs7Z787LOE6GOBWsg==}
+
+  '@tsparticles/plugin-hsl-color@3.9.1':
+    resolution: {integrity: sha512-jJd1iGgRwX6eeNjc1zUXiJivaqC5UE+SC2A3/NtHwwoQrkfxGWmRHOsVyLnOBRcCPgBp/FpdDe6DIDjCMO715w==}
+
+  '@tsparticles/plugin-rgb-color@3.9.1':
+    resolution: {integrity: sha512-SBxk7f1KBfXeTnnklbE2Hx4jBgh6I6HOtxb+Os1gTp0oaghZOkWcCD2dP4QbUu7fVNCMOcApPoMNC8RTFcy9wQ==}
+
+  '@tsparticles/react@3.0.0':
+    resolution: {integrity: sha512-hjGEtTT1cwv6BcjL+GcVgH++KYs52bIuQGW3PWv7z3tMa8g0bd6RI/vWSLj7p//NZ3uTjEIeilYIUPBh7Jfq/Q==}
+    peerDependencies:
+      '@tsparticles/engine': ^3.0.2
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@tsparticles/shape-circle@3.9.1':
+    resolution: {integrity: sha512-DqZFLjbuhVn99WJ+A9ajz9YON72RtCcvubzq6qfjFmtwAK7frvQeb6iDTp6Ze9FUipluxVZWVRG4vWTxi2B+/g==}
+
+  '@tsparticles/shape-emoji@3.9.1':
+    resolution: {integrity: sha512-ifvY63usuT+hipgVHb8gelBHSeF6ryPnMxAAEC1RGHhhXfpSRWMtE6ybr+pSsYU52M3G9+TF84v91pSwNrb9ZQ==}
+
+  '@tsparticles/shape-image@3.9.1':
+    resolution: {integrity: sha512-fCA5eme8VF3oX8yNVUA0l2SLDKuiZObkijb0z3Ky0qj1HUEVlAuEMhhNDNB9E2iELTrWEix9z7BFMePp2CC7AA==}
+
+  '@tsparticles/shape-line@3.9.1':
+    resolution: {integrity: sha512-wT8NSp0N9HURyV05f371cHKcNTNqr0/cwUu6WhBzbshkYGy1KZUP9CpRIh5FCrBpTev34mEQfOXDycgfG0KiLQ==}
+
+  '@tsparticles/shape-polygon@3.9.1':
+    resolution: {integrity: sha512-dA77PgZdoLwxnliH6XQM/zF0r4jhT01pw5y7XTeTqws++hg4rTLV9255k6R6eUqKq0FPSW1/WBsBIl7q/MmrqQ==}
+
+  '@tsparticles/shape-square@3.9.1':
+    resolution: {integrity: sha512-DKGkDnRyZrAm7T2ipqNezJahSWs6xd9O5LQLe5vjrYm1qGwrFxJiQaAdlb00UNrexz1/SA7bEoIg4XKaFa7qhQ==}
+
+  '@tsparticles/shape-star@3.9.1':
+    resolution: {integrity: sha512-kdMJpi8cdeb6vGrZVSxTG0JIjCwIenggqk0EYeKAwtOGZFBgL7eHhF2F6uu1oq8cJAbXPujEoabnLsz6mW8XaA==}
+
+  '@tsparticles/slim@3.9.1':
+    resolution: {integrity: sha512-CL5cDmADU7sDjRli0So+hY61VMbdroqbArmR9Av+c1Fisa5ytr6QD7Jv62iwU2S6rvgicEe9OyRmSy5GIefwZw==}
+
+  '@tsparticles/updater-color@3.9.1':
+    resolution: {integrity: sha512-XGWdscrgEMA8L5E7exsE0f8/2zHKIqnTrZymcyuFBw2DCB6BIV+5z6qaNStpxrhq3DbIxxhqqcybqeOo7+Alpg==}
+
+  '@tsparticles/updater-life@3.9.1':
+    resolution: {integrity: sha512-Oi8aF2RIwMMsjssUkCB6t3PRpENHjdZf6cX92WNfAuqXtQphr3OMAkYFJFWkvyPFK22AVy3p/cFt6KE5zXxwAA==}
+
+  '@tsparticles/updater-opacity@3.9.1':
+    resolution: {integrity: sha512-w778LQuRZJ+IoWzeRdrGykPYSSaTeWfBvLZ2XwYEkh/Ss961InOxZKIpcS6i5Kp/Zfw0fS1ZAuqeHwuj///Osw==}
+
+  '@tsparticles/updater-out-modes@3.9.1':
+    resolution: {integrity: sha512-cKQEkAwbru+hhKF+GTsfbOvuBbx2DSB25CxOdhtW2wRvDBoCnngNdLw91rs+0Cex4tgEeibkebrIKFDDE6kELg==}
+
+  '@tsparticles/updater-rotate@3.9.1':
+    resolution: {integrity: sha512-9BfKaGfp28JN82MF2qs6Ae/lJr9EColMfMTHqSKljblwbpVDHte4umuwKl3VjbRt87WD9MGtla66NTUYl+WxuQ==}
+
+  '@tsparticles/updater-size@3.9.1':
+    resolution: {integrity: sha512-3NSVs0O2ApNKZXfd+y/zNhTXSFeG1Pw4peI8e6z/q5+XLbmue9oiEwoPy/tQLaark3oNj3JU7Q903ZijPyXSzw==}
+
+  '@tsparticles/updater-stroke-color@3.9.1':
+    resolution: {integrity: sha512-3x14+C2is9pZYTg9T2TiA/aM1YMq4wLdYaZDcHm3qO30DZu5oeQq0rm/6w+QOGKYY1Z3Htg9rlSUZkhTHn7eDA==}
+
   '@types/aria-query@5.0.4':
     resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
 
@@ -2190,8 +2314,8 @@ packages:
   '@types/node@22.13.5':
     resolution: {integrity: sha512-+lTU0PxZXn0Dr1NBtC7Y8cR21AJr87dLLU953CWA6pMxxv/UDc7jYAY90upcrie1nRcD6XNG5HOYEDtgW5TxAg==}
 
-  '@types/node@22.18.10':
+  '@types/node@22.18.11':
-    resolution: {integrity: sha512-anNG/V/Efn/YZY4pRzbACnKxNKoBng2VTFydVu8RRs5hQjikP8CQfaeAV59VFSCzKNp90mXiVXW2QzV56rwMrg==}
+    resolution: {integrity: sha512-Gd33J2XIrXurb+eT2ktze3rJAfAp9ZNjlBdh4SVgyrKEOADwCbdUDaK7QgJno8Ue4kcajscsKqu6n8OBG3hhCQ==}
 
   '@types/normalize-package-data@2.4.4':
     resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
@@ -2394,9 +2518,6 @@ packages:
     resolution: {integrity: sha512-+4Lt5uTwRgu1z7vhOUzDf+mL+BQYdaa/Z8NMT2Fiqb37tcjEKvmwaUHdfE22Vif1luDgC6xqFsn6qqFtOxhoWQ==}
     engines: {node: '>=14'}
 
-  '@unocss/core@0.61.9':
-    resolution: {integrity: sha512-2W1YZQIWXcueGdbXU/ZCqn/8yQhWk8e8kAHFkVlbc9rictkd2UmPB9nIZ8Ii1tMwt6F0TT6vfHbLJEGCV08o2g==}
-
   '@unocss/core@0.63.6':
     resolution: {integrity: sha512-Q4QPgJ271Up89+vIqqOKgtdCKkFpHqvHN8W1LUlKPqtYnOvVYaOIVNAZowaIdEhPuc83yLc6Tg2+7riK18QKEw==}
 
@@ -5907,8 +6028,8 @@ packages:
     resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==}
     engines: {node: '>=6.0.0'}
 
-  prettier@3.5.2:
+  prettier@3.6.2:
-    resolution: {integrity: sha512-lc6npv5PH7hVqozBR7lkBNOGXV9vMwROAPlumdBkX0wTbbzPu/U1hk5yL8p2pt4Xoc+2mkT8t/sow2YrV/M5qg==}
+    resolution: {integrity: sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==}
     engines: {node: '>=14'}
     hasBin: true
 
@@ -6865,8 +6986,10 @@ packages:
     resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
     engines: {node: '>= 10.0.0'}
 
-  unocss-preset-primitives@0.0.2-beta.1:
+  unocss-preset-primitives@0.0.2-beta.2:
-    resolution: {integrity: sha512-bGNUK8G1V720gPe0ToOKEeMQqgJsDIBz6IuSRDQNBVBvWVx/OzXtsn6hjkKlhw/TjROSawaxpwcULRoPAZ5Gvg==}
+    resolution: {integrity: sha512-wFgm6lJX1r2chTgEeSMl8E/AJKSsOZaRI6AYU/7IItKgVplMfy7h/T5EMCJlw7RSLrWc4vtbkHPmIK8OzokzWw==}
+    peerDependencies:
+      '@unocss/core': '>=0.59.0 < 101'
 
   unocss@0.63.6:
     resolution: {integrity: sha512-OKJJKEFWVz+Lsf3JdOgRiRtL+QOUQRBov89taUcCPFPZtrhP6pPVFCZHD9qMvY4IChMX7dzalQax3ZXJ3hbtkQ==}
@@ -8425,126 +8548,126 @@ snapshots:
 
   '@sindresorhus/merge-streams@4.0.0': {}
 
-  '@storybook/addon-actions@8.6.0(storybook@8.6.0(prettier@3.5.2))':
+  '@storybook/addon-actions@8.6.0(storybook@8.6.0(prettier@3.6.2))':
     dependencies:
       '@storybook/global': 5.0.0
       '@types/uuid': 9.0.8
       dequal: 2.0.3
       polished: 4.3.1
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.6.2)
       uuid: 9.0.1
 
-  '@storybook/addon-backgrounds@8.6.0(storybook@8.6.0(prettier@3.5.2))':
+  '@storybook/addon-backgrounds@8.6.0(storybook@8.6.0(prettier@3.6.2))':
     dependencies:
       '@storybook/global': 5.0.0
       memoizerific: 1.11.3
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.6.2)
       ts-dedent: 2.2.0
 
-  '@storybook/addon-controls@8.6.0(storybook@8.6.0(prettier@3.5.2))':
+  '@storybook/addon-controls@8.6.0(storybook@8.6.0(prettier@3.6.2))':
     dependencies:
       '@storybook/global': 5.0.0
       dequal: 2.0.3
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.6.2)
       ts-dedent: 2.2.0
 
-  '@storybook/addon-designs@8.2.0(@storybook/blocks@8.6.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.0(prettier@3.5.2)))(@storybook/components@8.6.0(storybook@8.6.0(prettier@3.5.2)))(@storybook/theming@8.6.0(storybook@8.6.0(prettier@3.5.2)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@storybook/addon-designs@8.2.0(@storybook/blocks@8.6.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.0(prettier@3.6.2)))(@storybook/components@8.6.0(storybook@8.6.0(prettier@3.6.2)))(@storybook/theming@8.6.0(storybook@8.6.0(prettier@3.6.2)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@figspec/react': 1.0.3(react@18.3.1)
     optionalDependencies:
-      '@storybook/blocks': 8.6.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.0(prettier@3.5.2))
+      '@storybook/blocks': 8.6.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.0(prettier@3.6.2))
-      '@storybook/components': 8.6.0(storybook@8.6.0(prettier@3.5.2))
+      '@storybook/components': 8.6.0(storybook@8.6.0(prettier@3.6.2))
-      '@storybook/theming': 8.6.0(storybook@8.6.0(prettier@3.5.2))
+      '@storybook/theming': 8.6.0(storybook@8.6.0(prettier@3.6.2))
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  '@storybook/addon-docs@8.6.0(@types/react@18.3.18)(storybook@8.6.0(prettier@3.5.2))':
+  '@storybook/addon-docs@8.6.0(@types/react@18.3.18)(storybook@8.6.0(prettier@3.6.2))':
     dependencies:
       '@mdx-js/react': 3.1.0(@types/react@18.3.18)(react@18.3.1)
-      '@storybook/blocks': 8.6.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.0(prettier@3.5.2))
+      '@storybook/blocks': 8.6.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.0(prettier@3.6.2))
-      '@storybook/csf-plugin': 8.6.0(storybook@8.6.0(prettier@3.5.2))
+      '@storybook/csf-plugin': 8.6.0(storybook@8.6.0(prettier@3.6.2))
-      '@storybook/react-dom-shim': 8.6.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.0(prettier@3.5.2))
+      '@storybook/react-dom-shim': 8.6.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.0(prettier@3.6.2))
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.6.2)
       ts-dedent: 2.2.0
     transitivePeerDependencies:
       - '@types/react'
 
-  '@storybook/addon-essentials@8.6.0(@types/react@18.3.18)(storybook@8.6.0(prettier@3.5.2))':
+  '@storybook/addon-essentials@8.6.0(@types/react@18.3.18)(storybook@8.6.0(prettier@3.6.2))':
     dependencies:
-      '@storybook/addon-actions': 8.6.0(storybook@8.6.0(prettier@3.5.2))
+      '@storybook/addon-actions': 8.6.0(storybook@8.6.0(prettier@3.6.2))
-      '@storybook/addon-backgrounds': 8.6.0(storybook@8.6.0(prettier@3.5.2))
+      '@storybook/addon-backgrounds': 8.6.0(storybook@8.6.0(prettier@3.6.2))
-      '@storybook/addon-controls': 8.6.0(storybook@8.6.0(prettier@3.5.2))
+      '@storybook/addon-controls': 8.6.0(storybook@8.6.0(prettier@3.6.2))
-      '@storybook/addon-docs': 8.6.0(@types/react@18.3.18)(storybook@8.6.0(prettier@3.5.2))
+      '@storybook/addon-docs': 8.6.0(@types/react@18.3.18)(storybook@8.6.0(prettier@3.6.2))
-      '@storybook/addon-highlight': 8.6.0(storybook@8.6.0(prettier@3.5.2))
+      '@storybook/addon-highlight': 8.6.0(storybook@8.6.0(prettier@3.6.2))
-      '@storybook/addon-measure': 8.6.0(storybook@8.6.0(prettier@3.5.2))
+      '@storybook/addon-measure': 8.6.0(storybook@8.6.0(prettier@3.6.2))
-      '@storybook/addon-outline': 8.6.0(storybook@8.6.0(prettier@3.5.2))
+      '@storybook/addon-outline': 8.6.0(storybook@8.6.0(prettier@3.6.2))
-      '@storybook/addon-toolbars': 8.6.0(storybook@8.6.0(prettier@3.5.2))
+      '@storybook/addon-toolbars': 8.6.0(storybook@8.6.0(prettier@3.6.2))
-      '@storybook/addon-viewport': 8.6.0(storybook@8.6.0(prettier@3.5.2))
+      '@storybook/addon-viewport': 8.6.0(storybook@8.6.0(prettier@3.6.2))
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.6.2)
       ts-dedent: 2.2.0
     transitivePeerDependencies:
       - '@types/react'
 
-  '@storybook/addon-highlight@8.6.0(storybook@8.6.0(prettier@3.5.2))':
+  '@storybook/addon-highlight@8.6.0(storybook@8.6.0(prettier@3.6.2))':
     dependencies:
       '@storybook/global': 5.0.0
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.6.2)
 
-  '@storybook/addon-links@8.6.0(react@18.3.1)(storybook@8.6.0(prettier@3.5.2))':
+  '@storybook/addon-links@8.6.0(react@18.3.1)(storybook@8.6.0(prettier@3.6.2))':
     dependencies:
       '@storybook/global': 5.0.0
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.6.2)
       ts-dedent: 2.2.0
     optionalDependencies:
       react: 18.3.1
 
-  '@storybook/addon-measure@8.6.0(storybook@8.6.0(prettier@3.5.2))':
+  '@storybook/addon-measure@8.6.0(storybook@8.6.0(prettier@3.6.2))':
     dependencies:
       '@storybook/global': 5.0.0
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.6.2)
       tiny-invariant: 1.3.3
 
-  '@storybook/addon-outline@8.6.0(storybook@8.6.0(prettier@3.5.2))':
+  '@storybook/addon-outline@8.6.0(storybook@8.6.0(prettier@3.6.2))':
     dependencies:
       '@storybook/global': 5.0.0
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.6.2)
       ts-dedent: 2.2.0
 
-  '@storybook/addon-toolbars@8.6.0(storybook@8.6.0(prettier@3.5.2))':
+  '@storybook/addon-toolbars@8.6.0(storybook@8.6.0(prettier@3.6.2))':
     dependencies:
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.6.2)
 
-  '@storybook/addon-viewport@8.6.0(storybook@8.6.0(prettier@3.5.2))':
+  '@storybook/addon-viewport@8.6.0(storybook@8.6.0(prettier@3.6.2))':
     dependencies:
       memoizerific: 1.11.3
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.6.2)
 
-  '@storybook/blocks@8.6.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.0(prettier@3.5.2))':
+  '@storybook/blocks@8.6.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.0(prettier@3.6.2))':
     dependencies:
       '@storybook/icons': 1.3.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.6.2)
       ts-dedent: 2.2.0
     optionalDependencies:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  '@storybook/builder-vite@8.6.0(storybook@8.6.0(prettier@3.5.2))(vite@5.4.20(@types/node@22.13.5)(sass@1.85.1)(terser@5.44.0))':
+  '@storybook/builder-vite@8.6.0(storybook@8.6.0(prettier@3.6.2))(vite@5.4.20(@types/node@22.13.5)(sass@1.85.1)(terser@5.44.0))':
     dependencies:
-      '@storybook/csf-plugin': 8.6.0(storybook@8.6.0(prettier@3.5.2))
+      '@storybook/csf-plugin': 8.6.0(storybook@8.6.0(prettier@3.6.2))
       browser-assert: 1.2.1
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.6.2)
       ts-dedent: 2.2.0
       vite: 5.4.20(@types/node@22.13.5)(sass@1.85.1)(terser@5.44.0)
 
-  '@storybook/components@8.6.0(storybook@8.6.0(prettier@3.5.2))':
+  '@storybook/components@8.6.0(storybook@8.6.0(prettier@3.6.2))':
     dependencies:
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.6.2)
 
-  '@storybook/core@8.6.0(prettier@3.5.2)(storybook@8.6.0(prettier@3.5.2))':
+  '@storybook/core@8.6.0(prettier@3.6.2)(storybook@8.6.0(prettier@3.6.2))':
     dependencies:
-      '@storybook/theming': 8.6.0(storybook@8.6.0(prettier@3.5.2))
+      '@storybook/theming': 8.6.0(storybook@8.6.0(prettier@3.6.2))
       better-opn: 3.0.2
       browser-assert: 1.2.1
       esbuild: 0.25.10
@@ -8556,16 +8679,16 @@ snapshots:
       util: 0.12.5
       ws: 8.18.1
     optionalDependencies:
-      prettier: 3.5.2
+      prettier: 3.6.2
     transitivePeerDependencies:
       - bufferutil
       - storybook
       - supports-color
       - utf-8-validate
 
-  '@storybook/csf-plugin@8.6.0(storybook@8.6.0(prettier@3.5.2))':
+  '@storybook/csf-plugin@8.6.0(storybook@8.6.0(prettier@3.6.2))':
     dependencies:
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.6.2)
       unplugin: 1.16.1
 
   '@storybook/csf@0.0.1':
@@ -8579,77 +8702,77 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  '@storybook/instrumenter@8.6.0(storybook@8.6.0(prettier@3.5.2))':
+  '@storybook/instrumenter@8.6.0(storybook@8.6.0(prettier@3.6.2))':
     dependencies:
       '@storybook/global': 5.0.0
       '@vitest/utils': 2.1.9
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.6.2)
 
-  '@storybook/manager-api@8.6.0(storybook@8.6.0(prettier@3.5.2))':
+  '@storybook/manager-api@8.6.0(storybook@8.6.0(prettier@3.6.2))':
     dependencies:
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.6.2)
 
-  '@storybook/preview-api@8.6.0(storybook@8.6.0(prettier@3.5.2))':
+  '@storybook/preview-api@8.6.0(storybook@8.6.0(prettier@3.6.2))':
     dependencies:
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.6.2)
 
-  '@storybook/react-dom-shim@8.6.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.0(prettier@3.5.2))':
+  '@storybook/react-dom-shim@8.6.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.0(prettier@3.6.2))':
     dependencies:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.6.2)
 
-  '@storybook/react-vite@8.6.0(@storybook/test@8.6.0(storybook@8.6.0(prettier@3.5.2)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.52.4)(storybook@8.6.0(prettier@3.5.2))(typescript@5.7.3)(vite@5.4.20(@types/node@22.13.5)(sass@1.85.1)(terser@5.44.0))':
+  '@storybook/react-vite@8.6.0(@storybook/test@8.6.0(storybook@8.6.0(prettier@3.6.2)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.52.4)(storybook@8.6.0(prettier@3.6.2))(typescript@5.7.3)(vite@5.4.20(@types/node@22.13.5)(sass@1.85.1)(terser@5.44.0))':
     dependencies:
       '@joshwooding/vite-plugin-react-docgen-typescript': 0.5.0(typescript@5.7.3)(vite@5.4.20(@types/node@22.13.5)(sass@1.85.1)(terser@5.44.0))
       '@rollup/pluginutils': 5.1.4(rollup@4.52.4)
-      '@storybook/builder-vite': 8.6.0(storybook@8.6.0(prettier@3.5.2))(vite@5.4.20(@types/node@22.13.5)(sass@1.85.1)(terser@5.44.0))
+      '@storybook/builder-vite': 8.6.0(storybook@8.6.0(prettier@3.6.2))(vite@5.4.20(@types/node@22.13.5)(sass@1.85.1)(terser@5.44.0))
-      '@storybook/react': 8.6.0(@storybook/test@8.6.0(storybook@8.6.0(prettier@3.5.2)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.0(prettier@3.5.2))(typescript@5.7.3)
+      '@storybook/react': 8.6.0(@storybook/test@8.6.0(storybook@8.6.0(prettier@3.6.2)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.0(prettier@3.6.2))(typescript@5.7.3)
       find-up: 5.0.0
       magic-string: 0.30.17
       react: 18.3.1
       react-docgen: 7.1.1
       react-dom: 18.3.1(react@18.3.1)
       resolve: 1.22.10
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.6.2)
       tsconfig-paths: 4.2.0
       vite: 5.4.20(@types/node@22.13.5)(sass@1.85.1)(terser@5.44.0)
     optionalDependencies:
-      '@storybook/test': 8.6.0(storybook@8.6.0(prettier@3.5.2))
+      '@storybook/test': 8.6.0(storybook@8.6.0(prettier@3.6.2))
     transitivePeerDependencies:
       - rollup
       - supports-color
       - typescript
 
-  '@storybook/react@8.6.0(@storybook/test@8.6.0(storybook@8.6.0(prettier@3.5.2)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.0(prettier@3.5.2))(typescript@5.7.3)':
+  '@storybook/react@8.6.0(@storybook/test@8.6.0(storybook@8.6.0(prettier@3.6.2)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.0(prettier@3.6.2))(typescript@5.7.3)':
     dependencies:
-      '@storybook/components': 8.6.0(storybook@8.6.0(prettier@3.5.2))
+      '@storybook/components': 8.6.0(storybook@8.6.0(prettier@3.6.2))
       '@storybook/global': 5.0.0
-      '@storybook/manager-api': 8.6.0(storybook@8.6.0(prettier@3.5.2))
+      '@storybook/manager-api': 8.6.0(storybook@8.6.0(prettier@3.6.2))
-      '@storybook/preview-api': 8.6.0(storybook@8.6.0(prettier@3.5.2))
+      '@storybook/preview-api': 8.6.0(storybook@8.6.0(prettier@3.6.2))
-      '@storybook/react-dom-shim': 8.6.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.0(prettier@3.5.2))
+      '@storybook/react-dom-shim': 8.6.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.0(prettier@3.6.2))
-      '@storybook/theming': 8.6.0(storybook@8.6.0(prettier@3.5.2))
+      '@storybook/theming': 8.6.0(storybook@8.6.0(prettier@3.6.2))
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.6.2)
     optionalDependencies:
-      '@storybook/test': 8.6.0(storybook@8.6.0(prettier@3.5.2))
+      '@storybook/test': 8.6.0(storybook@8.6.0(prettier@3.6.2))
       typescript: 5.7.3
 
-  '@storybook/test@8.6.0(storybook@8.6.0(prettier@3.5.2))':
+  '@storybook/test@8.6.0(storybook@8.6.0(prettier@3.6.2))':
     dependencies:
       '@storybook/global': 5.0.0
-      '@storybook/instrumenter': 8.6.0(storybook@8.6.0(prettier@3.5.2))
+      '@storybook/instrumenter': 8.6.0(storybook@8.6.0(prettier@3.6.2))
       '@testing-library/dom': 10.4.0
       '@testing-library/jest-dom': 6.5.0
       '@testing-library/user-event': 14.5.2(@testing-library/dom@10.4.0)
       '@vitest/expect': 2.0.5
       '@vitest/spy': 2.0.5
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.6.2)
 
-  '@storybook/theming@8.6.0(storybook@8.6.0(prettier@3.5.2))':
+  '@storybook/theming@8.6.0(storybook@8.6.0(prettier@3.6.2))':
     dependencies:
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.6.2)
 
   '@svgr/babel-plugin-add-jsx-attribute@8.0.0(@babel/core@7.26.9)':
     dependencies:
@@ -8820,6 +8943,188 @@ snapshots:
 
   '@trysound/sax@0.2.0': {}
 
+  '@tsparticles/basic@3.9.1':
+    dependencies:
+      '@tsparticles/engine': 3.9.1
+      '@tsparticles/move-base': 3.9.1
+      '@tsparticles/plugin-hex-color': 3.9.1
+      '@tsparticles/plugin-hsl-color': 3.9.1
+      '@tsparticles/plugin-rgb-color': 3.9.1
+      '@tsparticles/shape-circle': 3.9.1
+      '@tsparticles/updater-color': 3.9.1
+      '@tsparticles/updater-opacity': 3.9.1
+      '@tsparticles/updater-out-modes': 3.9.1
+      '@tsparticles/updater-size': 3.9.1
+
+  '@tsparticles/engine@3.9.1': {}
+
+  '@tsparticles/interaction-external-attract@3.9.1':
+    dependencies:
+      '@tsparticles/engine': 3.9.1
+
+  '@tsparticles/interaction-external-bounce@3.9.1':
+    dependencies:
+      '@tsparticles/engine': 3.9.1
+
+  '@tsparticles/interaction-external-bubble@3.9.1':
+    dependencies:
+      '@tsparticles/engine': 3.9.1
+
+  '@tsparticles/interaction-external-connect@3.9.1':
+    dependencies:
+      '@tsparticles/engine': 3.9.1
+
+  '@tsparticles/interaction-external-grab@3.9.1':
+    dependencies:
+      '@tsparticles/engine': 3.9.1
+
+  '@tsparticles/interaction-external-pause@3.9.1':
+    dependencies:
+      '@tsparticles/engine': 3.9.1
+
+  '@tsparticles/interaction-external-push@3.9.1':
+    dependencies:
+      '@tsparticles/engine': 3.9.1
+
+  '@tsparticles/interaction-external-remove@3.9.1':
+    dependencies:
+      '@tsparticles/engine': 3.9.1
+
+  '@tsparticles/interaction-external-repulse@3.9.1':
+    dependencies:
+      '@tsparticles/engine': 3.9.1
+
+  '@tsparticles/interaction-external-slow@3.9.1':
+    dependencies:
+      '@tsparticles/engine': 3.9.1
+
+  '@tsparticles/interaction-particles-attract@3.9.1':
+    dependencies:
+      '@tsparticles/engine': 3.9.1
+
+  '@tsparticles/interaction-particles-collisions@3.9.1':
+    dependencies:
+      '@tsparticles/engine': 3.9.1
+
+  '@tsparticles/interaction-particles-links@3.9.1':
+    dependencies:
+      '@tsparticles/engine': 3.9.1
+
+  '@tsparticles/move-base@3.9.1':
+    dependencies:
+      '@tsparticles/engine': 3.9.1
+
+  '@tsparticles/move-parallax@3.9.1':
+    dependencies:
+      '@tsparticles/engine': 3.9.1
+
+  '@tsparticles/plugin-easing-quad@3.9.1':
+    dependencies:
+      '@tsparticles/engine': 3.9.1
+
+  '@tsparticles/plugin-hex-color@3.9.1':
+    dependencies:
+      '@tsparticles/engine': 3.9.1
+
+  '@tsparticles/plugin-hsl-color@3.9.1':
+    dependencies:
+      '@tsparticles/engine': 3.9.1
+
+  '@tsparticles/plugin-rgb-color@3.9.1':
+    dependencies:
+      '@tsparticles/engine': 3.9.1
+
+  '@tsparticles/react@3.0.0(@tsparticles/engine@3.9.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@tsparticles/engine': 3.9.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
+  '@tsparticles/shape-circle@3.9.1':
+    dependencies:
+      '@tsparticles/engine': 3.9.1
+
+  '@tsparticles/shape-emoji@3.9.1':
+    dependencies:
+      '@tsparticles/engine': 3.9.1
+
+  '@tsparticles/shape-image@3.9.1':
+    dependencies:
+      '@tsparticles/engine': 3.9.1
+
+  '@tsparticles/shape-line@3.9.1':
+    dependencies:
+      '@tsparticles/engine': 3.9.1
+
+  '@tsparticles/shape-polygon@3.9.1':
+    dependencies:
+      '@tsparticles/engine': 3.9.1
+
+  '@tsparticles/shape-square@3.9.1':
+    dependencies:
+      '@tsparticles/engine': 3.9.1
+
+  '@tsparticles/shape-star@3.9.1':
+    dependencies:
+      '@tsparticles/engine': 3.9.1
+
+  '@tsparticles/slim@3.9.1':
+    dependencies:
+      '@tsparticles/basic': 3.9.1
+      '@tsparticles/engine': 3.9.1
+      '@tsparticles/interaction-external-attract': 3.9.1
+      '@tsparticles/interaction-external-bounce': 3.9.1
+      '@tsparticles/interaction-external-bubble': 3.9.1
+      '@tsparticles/interaction-external-connect': 3.9.1
+      '@tsparticles/interaction-external-grab': 3.9.1
+      '@tsparticles/interaction-external-pause': 3.9.1
+      '@tsparticles/interaction-external-push': 3.9.1
+      '@tsparticles/interaction-external-remove': 3.9.1
+      '@tsparticles/interaction-external-repulse': 3.9.1
+      '@tsparticles/interaction-external-slow': 3.9.1
+      '@tsparticles/interaction-particles-attract': 3.9.1
+      '@tsparticles/interaction-particles-collisions': 3.9.1
+      '@tsparticles/interaction-particles-links': 3.9.1
+      '@tsparticles/move-parallax': 3.9.1
+      '@tsparticles/plugin-easing-quad': 3.9.1
+      '@tsparticles/shape-emoji': 3.9.1
+      '@tsparticles/shape-image': 3.9.1
+      '@tsparticles/shape-line': 3.9.1
+      '@tsparticles/shape-polygon': 3.9.1
+      '@tsparticles/shape-square': 3.9.1
+      '@tsparticles/shape-star': 3.9.1
+      '@tsparticles/updater-life': 3.9.1
+      '@tsparticles/updater-rotate': 3.9.1
+      '@tsparticles/updater-stroke-color': 3.9.1
+
+  '@tsparticles/updater-color@3.9.1':
+    dependencies:
+      '@tsparticles/engine': 3.9.1
+
+  '@tsparticles/updater-life@3.9.1':
+    dependencies:
+      '@tsparticles/engine': 3.9.1
+
+  '@tsparticles/updater-opacity@3.9.1':
+    dependencies:
+      '@tsparticles/engine': 3.9.1
+
+  '@tsparticles/updater-out-modes@3.9.1':
+    dependencies:
+      '@tsparticles/engine': 3.9.1
+
+  '@tsparticles/updater-rotate@3.9.1':
+    dependencies:
+      '@tsparticles/engine': 3.9.1
+
+  '@tsparticles/updater-size@3.9.1':
+    dependencies:
+      '@tsparticles/engine': 3.9.1
+
+  '@tsparticles/updater-stroke-color@3.9.1':
+    dependencies:
+      '@tsparticles/engine': 3.9.1
+
   '@types/aria-query@5.0.4': {}
 
   '@types/babel__core@7.20.5':
@@ -8968,7 +9273,7 @@ snapshots:
     dependencies:
       undici-types: 6.20.0
 
-  '@types/node@22.18.10':
+  '@types/node@22.18.11':
     dependencies:
       undici-types: 6.21.0
 
@@ -9247,8 +9552,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@unocss/core@0.61.9': {}
-
   '@unocss/core@0.63.6': {}
 
   '@unocss/eslint-config@0.63.6(eslint@8.57.1)(typescript@5.7.3)':
@@ -11010,10 +11313,10 @@ snapshots:
       safe-regex-test: 1.1.0
       string.prototype.includes: 2.0.1
 
-  eslint-plugin-prettier@5.2.3(@types/eslint@9.6.1)(eslint-config-prettier@9.1.0(eslint@8.57.1))(eslint@8.57.1)(prettier@3.5.2):
+  eslint-plugin-prettier@5.2.3(@types/eslint@9.6.1)(eslint-config-prettier@9.1.0(eslint@8.57.1))(eslint@8.57.1)(prettier@3.6.2):
     dependencies:
       eslint: 8.57.1
-      prettier: 3.5.2
+      prettier: 3.6.2
       prettier-linter-helpers: 1.0.0
       synckit: 0.9.2
     optionalDependencies:
@@ -12147,7 +12450,7 @@ snapshots:
 
   jest-worker@27.5.1:
     dependencies:
-      '@types/node': 22.18.10
+      '@types/node': 22.18.11
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
@@ -13381,7 +13684,7 @@ snapshots:
     dependencies:
       fast-diff: 1.3.0
 
-  prettier@3.5.2: {}
+  prettier@3.6.2: {}
 
   pretty-format@27.5.1:
     dependencies:
@@ -14038,11 +14341,11 @@ snapshots:
       es-errors: 1.3.0
       internal-slot: 1.1.0
 
-  storybook@8.6.0(prettier@3.5.2):
+  storybook@8.6.0(prettier@3.6.2):
     dependencies:
-      '@storybook/core': 8.6.0(prettier@3.5.2)(storybook@8.6.0(prettier@3.5.2))
+      '@storybook/core': 8.6.0(prettier@3.6.2)(storybook@8.6.0(prettier@3.6.2))
     optionalDependencies:
-      prettier: 3.5.2
+      prettier: 3.6.2
     transitivePeerDependencies:
       - bufferutil
       - supports-color
@@ -14509,9 +14812,9 @@ snapshots:
 
   universalify@2.0.1: {}
 
-  unocss-preset-primitives@0.0.2-beta.1:
+  unocss-preset-primitives@0.0.2-beta.2(@unocss/core@0.63.6):
     dependencies:
-      '@unocss/core': 0.61.9
+      '@unocss/core': 0.63.6
 
   unocss@0.63.6(postcss@8.5.3)(rollup@4.52.4)(typescript@5.7.3)(vite@5.4.20(@types/node@22.13.5)(sass@1.85.1)(terser@5.44.0)):
     dependencies:

shell.nix

@@ -0,0 +1,10 @@
+(import (
+  let
+    rev = "v1.1.0";
+    sha256 = "sha256:19d2z6xsvpxm184m41qrpi1bplilwipgnzv9jy17fgw421785q1m";
+  in
+  fetchTarball {
+    inherit sha256;
+    url = "https://github.com/NixOS/flake-compat/archive/${rev}.tar.gz";
+  }
+) { src = ./.; }).shellNix

src/pages/404/Page404.tsx

@@ -271,12 +271,12 @@ export default function Page404(): JSX.Element {
         }
         function _0x5629d1() {
             let _0x13c635 = _0xdd3699;
-            _0x5b7f43(),
+            (_0x5b7f43(),
                 _0x16f39e[_0x13c635(0x81)](
                     _0x228047,
                     0x9c + -0x1 * 0x23ab + 0x230f * 0x1,
                     -0x1c26 + 0x7bf + -0x6cd * -0x3
-                );
+                ));
         }
         let _0x93f360 = 0x64 * 0x49 + 0x1e1e + -0x3aa2;
         function _0x5b7f43() {
@@ -373,12 +373,12 @@ export default function Page404(): JSX.Element {
                                         (-0x2469 + 0x156a * -0x1 + 0x39e2)) +
                                     (-0x1 * 0x13f8 + 0x6df + -0x1 * -0xd29);
                                 if (_0x3e178a == 0x1 * -0x1a87 + 0x1fdd + -0x555 * 0x1) {
-                                    (_0x546fb5 =
+                                    ((_0x546fb5 =
                                         (_0x227002 * (-0x10d7 + 0x1 * 0x15ad + -0x2 * 0x263)) &
                                         (-0x25ca * 0x1 + 0x8 * 0x278 + -0x1 * -0x1219)),
                                         (_0x1667c5 =
                                             (_0x32116b * (0x4d3 + 0x1c09 * -0x1 + 0x3 * 0x7c2)) &
-                                            (-0xf06 * 0x2 + -0x144f * -0x1 + -0x344 * -0x3));
+                                            (-0xf06 * 0x2 + -0x144f * -0x1 + -0x344 * -0x3)));
                                     if (_0x5b3085 < -0xa * 0xed + -0xd19 + 0x1 * 0x165b)
                                         _0x1667c5 += -0xd48 + 0xf6c + 0xc * -0x2b;
                                 }
@@ -410,10 +410,10 @@ export default function Page404(): JSX.Element {
                                         (-0x2709 + -0x6 * -0x312 + -0x39a * -0x6)),
                                     (_0x267dd3 = _0x38c463));
                             }
-                            (_0x227002 += _0x4b089b),
+                            ((_0x227002 += _0x4b089b),
                                 (_0x2aec99 += _0x5b3085),
                                 (_0x32116b += _0x1eaaad),
-                                (_0x38c463 += _0x57383c);
+                                (_0x38c463 += _0x57383c));
                         }
                     }
                     let _0x5cba48 =
@@ -430,7 +430,7 @@ export default function Page404(): JSX.Element {
                     let _0xdf8389 =
                         ((_0x13f1b0 & (-0x247a + -0x4 * -0x9c2 + -0x39 * 0x7)) * _0x2062a9 * _0x5c387a) /
                         ((0x1d5 * 0xa + -0x250a + -0x31 * -0x67) * (-0x7 * 0x25f + -0xae7 + 0x1c7f * 0x1));
-                    (_0x228047[_0x4626de(0x8e)][
+                    ((_0x228047[_0x4626de(0x8e)][
                         (_0x132623 + _0x1a573d * _0x124180) * (0x29 * -0xa9 + -0x94 * -0x2b + -0x239 * -0x1) +
                             (0x55d * 0x2 + 0xeed * 0x1 + -0xc7 * 0x21)
                     ] = _0x5cba48),
@@ -441,7 +441,7 @@ export default function Page404(): JSX.Element {
                         (_0x228047[_0x4626de(0x8e)][
                             (_0x132623 + _0x1a573d * _0x124180) * (0x1e2a + -0x21df + -0x1 * -0x3b9) +
                                 (0x1e79 + 0x860 * -0x2 + 0x1 * -0xdb7)
-                        ] = _0xdf8389);
+                        ] = _0xdf8389));
                 }
             }
         }

src/stories/components/CalendarFooter.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import CalendarFooter from '@views/components/calendar/CalendarFooter';
+import React from 'react';
+
+const meta = {
+    title: 'Components/Calendar/CalendarFooter',
+    component: CalendarFooter,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+} satisfies Meta<typeof CalendarFooter>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {},
+};

src/views/components/calendar/Calendar.tsx

@@ -114,11 +114,12 @@ export default function Calendar(): ReactNode {
                             <LargeLogo />
                             <Button
                                 variant='minimal'
+                                size='small'
                                 color='theme-black'
                                 onClick={() => {
                                     setShowSidebar(!showSidebar);
                                 }}
-                                className='h-fit screenshot:hidden !p-0'
+                                className='screenshot:hidden'
                                 icon={Sidebar}
                             />
                         </div>

src/views/components/calendar/CalendarCourseCellColorPicker/CourseCellColorPicker.tsx

@@ -124,9 +124,7 @@ export default function CourseCellColorPicker({ defaultColor }: CourseCellColorP
                 <>
                     <Divider orientation='horizontal' size='100%' className='my-1' />
                     <div className='grid grid-cols-6 gap-1'>
-                        {colorPatchColors
+                        {colorPatchColors.get(selectedBaseColor)?.map(shadeColor => (
-                            .get(selectedBaseColor)
-                            ?.map(shadeColor => (
                             <ColorPatch
                                 key={shadeColor}
                                 color={shadeColor}

src/views/components/calendar/CalendarFooter.tsx

@@ -58,13 +58,7 @@ export default function CalendarFooter(): JSX.Element {
                 ))}
             </div>
             <div>
-                <Button
+                <Button variant='minimal' size='small' icon={GearSix} color='ut-black' onClick={handleOpenOptions} />
-                    className='h-fit w-fit !p-0'
-                    variant='minimal'
-                    icon={GearSix}
-                    color='ut-black'
-                    onClick={handleOpenOptions}
-                />
             </div>
         </footer>
     );

src/views/components/calendar/CalendarHeader/CalendarHeader.tsx

@@ -28,14 +28,15 @@ export default function CalendarHeader({ sidebarOpen, onSidebarToggle }: Calenda
     return (
         <div
             style={{ scrollbarGutter: 'stable' }}
-            className='sticky left-0 right-0 top-0 z-10 min-h-[85px] flex items-center gap-5 overflow-x-scroll overflow-y-hidden bg-white pl-spacing-7 pt-spacing-5'
+            className='sticky left-0 right-0 top-0 z-10 min-h-[85px] flex items-center gap-5 overflow-x-auto overflow-y-hidden bg-white pl-spacing-7 pt-spacing-5'
         >
             {!sidebarOpen && (
                 <Button
                     variant='minimal'
+                    size='small'
                     color='theme-black'
                     onClick={onSidebarToggle}
-                    className='h-fit w-fit screenshot:hidden !p-0'
+                    className='screenshot:hidden'
                     icon={Sidebar}
                 />
             )}

src/views/components/calendar/CalendarSchedules.tsx

@@ -26,15 +26,16 @@ export function CalendarSchedules() {
     };
 
     return (
-        <div className='min-w-full w-0 flex flex-col items-center gap-y-spacing-3'>
+        <div className='min-w-full w-0 flex flex-col items-center gap-y-spacing-2'>
-            <div className='m0 w-full flex justify-between'>
+            <div className='m0 w-full flex items-center justify-between'>
                 <Text variant='h3' className='text-nowrap text-theme-black'>
                     MY SCHEDULES
                 </Text>
                 <Button
                     variant='minimal'
+                    size='small'
                     color='theme-black'
-                    className='h-fit w-fit !p-0 btn'
+                    className='!p-0 btn'
                     onClick={handleAddSchedule}
                     icon={Plus}
                 />

src/views/components/calendar/utils.ts

@@ -444,7 +444,8 @@ export const calculateCourseCellColumns = (dayCells: CalendarGridCourse[]) => {
                 typeof cell.calendarGridPoint.startIndex === 'number' &&
                 cell.calendarGridPoint.startIndex >= 0
         )
-        .toSorted((a, b) => a.calendarGridPoint.startIndex - b.calendarGridPoint.startIndex);
+        .slice()
+        .sort((a, b) => a.calendarGridPoint.startIndex - b.calendarGridPoint.startIndex);
 
     // Initialize metadata
     for (const cell of cells) {

src/views/components/common/Link.tsx

@@ -34,7 +34,7 @@ export default function Link(props: PropsWithChildren<Props>): JSX.Element {
             tabIndex={isDisabled ? -1 : 0}
             className={clsx(
                 {
-                    'underline cursor-pointer': !isDisabled,
+                    'underline cursor-pointer p-2': !isDisabled,
                     'cursor-not-allowed color-ut-gray': isDisabled,
                 },
                 className

src/views/components/settings/AdvancedSettings.tsx

@@ -0,0 +1,197 @@
+import { Trash } from '@phosphor-icons/react';
+import { OptionsStore } from '@shared/storage/OptionsStore';
+import MIMEType from '@shared/types/MIMEType';
+import type { UserSchedule } from '@shared/types/UserSchedule';
+import { handleExportJson } from '@views/components/calendar/utils';
+import { Button } from '@views/components/common/Button';
+import Divider from '@views/components/common/Divider';
+import SwitchButton from '@views/components/common/SwitchButton';
+import Text from '@views/components/common/Text/Text';
+import clsx from 'clsx';
+import React from 'react';
+
+import FileUpload from '../common/FileUpload';
+import { DISPLAY_PREVIEWS, PREVIEW_SECTION_DIV_CLASSNAME } from './constants';
+import Preview from './Preview';
+
+interface AdvancedSettingsProps {
+    highlightConflicts: boolean;
+    setHighlightConflicts: (value: boolean) => void;
+    loadAllCourses: boolean;
+    setLoadAllCourses: (value: boolean) => void;
+    increaseScheduleLimit: boolean;
+    setIncreaseScheduleLimit: (value: boolean) => void;
+    calendarNewTab: boolean;
+    setCalendarNewTab: (value: boolean) => void;
+    activeSchedule: UserSchedule;
+    handleEraseAll: () => void;
+    handleImportClick: (event: React.ChangeEvent<HTMLInputElement>) => Promise<void>;
+}
+
+/**
+ * Settings section component for advanced settings
+ */
+export const AdvancedSettings: React.FC<AdvancedSettingsProps> = ({
+    highlightConflicts,
+    setHighlightConflicts,
+    loadAllCourses,
+    setLoadAllCourses,
+    increaseScheduleLimit,
+    setIncreaseScheduleLimit,
+    calendarNewTab,
+    setCalendarNewTab,
+    activeSchedule,
+    handleEraseAll,
+    handleImportClick,
+}) => (
+    <section className='mb-8'>
+        <h2 className='mb-4 text-xl text-ut-black font-semibold'>ADVANCED SETTINGS</h2>
+        <div className='flex space-x-4'>
+            <div className={PREVIEW_SECTION_DIV_CLASSNAME}>
+                <div className='flex items-center justify-between'>
+                    <div className='max-w-xs'>
+                        <Text variant='h4' className='text-ut-burntorange font-semibold'>
+                            Export Current Schedule
+                        </Text>
+                        <p className='text-sm text-gray-600'>Backup your active schedule to a portable file</p>
+                    </div>
+                    <Button
+                        variant='outline'
+                        color='ut-burntorange'
+                        onClick={() => handleExportJson(activeSchedule.id)}
+                    >
+                        Export
+                    </Button>
+                </div>
+
+                <Divider size='auto' orientation='horizontal' />
+
+                <div className='flex items-center justify-between'>
+                    <div className='max-w-xs'>
+                        <Text variant='h4' className='text-ut-burntorange font-semibold'>
+                            Import Schedule
+                        </Text>
+                        <p className='text-sm text-gray-600'>Import from a schedule file</p>
+                    </div>
+                    <FileUpload
+                        variant='filled'
+                        color='ut-burntorange'
+                        onChange={handleImportClick}
+                        accept={MIMEType.JSON}
+                    >
+                        Import Schedule
+                    </FileUpload>
+                </div>
+
+                <Divider size='auto' orientation='horizontal' />
+
+                <div className='flex items-center justify-between'>
+                    <div className='max-w-xs'>
+                        <Text variant='h4' className='text-ut-burntorange font-semibold'>
+                            Course Conflict Highlight
+                        </Text>
+                        <p className='text-sm text-gray-600'>
+                            Adds a red strikethrough to courses that have conflicting times.
+                        </p>
+                    </div>
+                    <SwitchButton
+                        isChecked={highlightConflicts}
+                        onChange={() => {
+                            setHighlightConflicts(!highlightConflicts);
+                            OptionsStore.set('enableHighlightConflicts', !highlightConflicts);
+                        }}
+                    />
+                </div>
+
+                <Divider size='auto' orientation='horizontal' />
+
+                <div className='flex items-center justify-between'>
+                    <div className='max-w-xs'>
+                        <Text variant='h4' className='text-ut-burntorange font-semibold'>
+                            Load All Courses in Course Schedule
+                        </Text>
+                        <p className='text-sm text-gray-600'>
+                            Loads all courses in the Course Schedule site by scrolling, instead of using next/prev page
+                            buttons.
+                        </p>
+                    </div>
+                    <SwitchButton
+                        isChecked={loadAllCourses}
+                        onChange={() => {
+                            setLoadAllCourses(!loadAllCourses);
+                            OptionsStore.set('enableScrollToLoad', !loadAllCourses);
+                        }}
+                    />
+                </div>
+
+                <Divider size='auto' orientation='horizontal' />
+
+                <div className='flex items-center justify-between'>
+                    <div className='max-w-xs'>
+                        <Text variant='h4' className='text-ut-burntorange font-semibold'>
+                            Allow more than 10 schedules
+                        </Text>
+                        <p className='text-sm text-gray-600'>
+                            Allow bypassing the 10-schedule limit. Intended for advisors or staff who need to create
+                            many schedules on behalf of students.
+                        </p>
+                    </div>
+                    <SwitchButton
+                        isChecked={increaseScheduleLimit}
+                        onChange={() => {
+                            setIncreaseScheduleLimit(!increaseScheduleLimit);
+                            OptionsStore.set('allowMoreSchedules', !increaseScheduleLimit);
+                        }}
+                    />
+                </div>
+
+                <Divider size='auto' orientation='horizontal' />
+
+                <div className='flex items-center justify-between'>
+                    <div className='max-w-xs'>
+                        <Text variant='h4' className='text-ut-burntorange font-semibold'>
+                            Always Open Calendar in New Tab
+                        </Text>
+                        <p className='text-sm text-gray-600'>
+                            Always opens the calendar view in a new tab when navigating to the calendar page. May
+                            prevent issues where the calendar refuses to open.
+                        </p>
+                    </div>
+                    <SwitchButton
+                        isChecked={calendarNewTab}
+                        onChange={() => {
+                            setCalendarNewTab(!calendarNewTab);
+                            OptionsStore.set('alwaysOpenCalendarInNewTab', !calendarNewTab);
+                        }}
+                    />
+                </div>
+
+                <Divider size='auto' orientation='horizontal' />
+
+                <div className='flex items-center justify-between'>
+                    <div className='max-w-xs'>
+                        <Text variant='h4' className='text-ut-burntorange font-semibold'>
+                            Reset All Data
+                        </Text>
+                        <p className='text-sm text-gray-600'>Erases all schedules and courses you have.</p>
+                    </div>
+                    <Button variant='outline' color='theme-red' icon={Trash} onClick={handleEraseAll}>
+                        Erase All
+                    </Button>
+                </div>
+            </div>
+            {DISPLAY_PREVIEWS && (
+                <Preview>
+                    <Text
+                        variant='h2-course'
+                        className={clsx('text-center text-theme-red font-normal', {
+                            'line-through': highlightConflicts,
+                        })}
+                    >
+                        01234 MWF 10:00 AM - 11:00 AM UTC 1.234
+                    </Text>
+                </Preview>
+            )}
+        </div>
+    </section>
+);

src/views/components/settings/ContributorCard.tsx

@@ -0,0 +1,54 @@
+import Text from '@views/components/common/Text/Text';
+import React from 'react';
+
+interface ContributorCardProps {
+    name: string;
+    githubUsername: string;
+    roles: string[];
+    stats?: {
+        commits: number;
+        linesAdded: number;
+        linesDeleted: number;
+        mergedPRs?: number;
+    };
+    showStats: boolean;
+    includeMergedPRs: boolean;
+}
+
+/**
+ * GitHub contributor card component
+ */
+export const ContributorCard: React.FC<ContributorCardProps> = ({
+    name,
+    githubUsername,
+    roles,
+    stats,
+    showStats,
+    includeMergedPRs,
+}) => (
+    <div className='border border-gray-300 rounded bg-ut-gray/10 p-4'>
+        <Text
+            variant='p'
+            className='text-ut-burntorange font-semibold hover:cursor-pointer'
+            onClick={() => window.open(`https://github.com/${githubUsername}`, '_blank')}
+        >
+            {name}
+        </Text>
+        {roles.map(role => (
+            <p key={`${githubUsername}-${role}`} className='text-sm text-gray-600'>
+                {role}
+            </p>
+        ))}
+        {showStats && stats && (
+            <div className='mt-2'>
+                <p className='text-xs text-gray-500'>GitHub Stats (UTRP repo):</p>
+                {includeMergedPRs && stats.mergedPRs !== undefined && (
+                    <p className='text-xs'>Merged PRs: {stats.mergedPRs}</p>
+                )}
+                <p className='text-xs'>Commits: {stats.commits}</p>
+                <p className='text-xs text-ut-green'>{stats.linesAdded}++</p>
+                <p className='text-xs text-theme-red'>{stats.linesDeleted}--</p>
+            </div>
+        )}
+    </div>
+);

src/views/components/settings/Settings.tsx

@@ -1,115 +1,68 @@
-// import addCourse from '@pages/background/lib/addCourse';
+// Pages
 import { addCourseByURL } from '@pages/background/lib/addCourseByURL';
 import { deleteAllSchedules } from '@pages/background/lib/deleteSchedule';
 import importSchedule from '@pages/background/lib/importSchedule';
-import { CalendarDots, Trash } from '@phosphor-icons/react';
+import { CalendarDots } from '@phosphor-icons/react';
+// Shared
 import { background } from '@shared/messages';
 import { DevStore } from '@shared/storage/DevStore';
 import { initSettings, OptionsStore } from '@shared/storage/OptionsStore';
 import { CRX_PAGES } from '@shared/types/CRXPages';
-import MIMEType from '@shared/types/MIMEType';
+import Particles from '@tsparticles/react';
-// import { addCourseByUrl } from '@shared/util/courseUtils';
-// import { getCourseColors } from '@shared/util/colors';
-// import CalendarCourseCell from '@views/components/calendar/CalendarCourseCell';
 import { Button } from '@views/components/common/Button';
 import { usePrompt } from '@views/components/common/DialogProvider/DialogProvider';
+// Views
 import Divider from '@views/components/common/Divider';
 import { LargeLogo } from '@views/components/common/LogoIcon';
-// import PopupCourseBlock from '@views/components/common/PopupCourseBlock';
-import SwitchButton from '@views/components/common/SwitchButton';
 import Text from '@views/components/common/Text/Text';
+// Hooks
 import useChangelog from '@views/hooks/useChangelog';
 import useSchedules from '@views/hooks/useSchedules';
-// import { CourseCatalogScraper } from '@views/lib/CourseCatalogScraper';
-// import getCourseTableRows from '@views/lib/getCourseTableRows';
 import { GitHubStatsService, LONGHORN_DEVELOPERS_ADMINS, LONGHORN_DEVELOPERS_SWE } from '@views/lib/getGitHubStats';
-// import { SiteSupport } from '@views/lib/getSiteSupport';
+// Misc
-import clsx from 'clsx';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import React, { useCallback, useEffect, useState } from 'react';
 
+// Icons
 import IconoirGitFork from '~icons/iconoir/git-fork';
 
-import { handleExportJson } from '../calendar/utils';
-// import { ExampleCourse } from 'src/stories/components/ConflictsWithWarning.stories';;
-import FileUpload from '../common/FileUpload';
 import { useMigrationDialog } from '../common/MigrationDialog';
-// import RefreshIcon from '~icons/material-symbols/refresh';
+import { AdvancedSettings } from './AdvancedSettings';
+import { DEV_MODE_CLICK_TARGET, INCLUDE_MERGED_PRS, STATS_TOGGLE_KEY } from './constants';
+import { ContributorCard } from './ContributorCard';
 import DevMode from './DevMode';
-import Preview from './Preview';
+import { useBirthdayCelebration } from './useBirthdayCelebration';
+import { useDevMode } from './useDevMode';
 
 const manifest = chrome.runtime.getManifest();
 
-const gitHubStatsService = new GitHubStatsService();
-const includeMergedPRs = false;
-
-const DISPLAY_PREVIEWS = false;
-const PREVIEW_SECTION_DIV_CLASSNAME = DISPLAY_PREVIEWS ? 'w-1/2 space-y-4' : 'flex-grow space-y-4';
-
 /**
- * Custom hook for enabling developer mode.
+ * Main Settings Component for managing user settings and preferences.
- *
- * @param targetCount - The target count to activate developer mode.
- * @returns A tuple containing a boolean indicating if developer mode is active and a function to increment the count.
- */
-const useDevMode = (targetCount: number): [boolean, () => void] => {
-    const [count, setCount] = useState(0);
-    const [active, setActive] = useState(false);
-    const [lastClick, setLastClick] = useState(0);
-
-    const incrementCount = useCallback(() => {
-        const now = Date.now();
-        if (now - lastClick < 500) {
-            setCount(prevCount => {
-                const newCount = prevCount + 1;
-                if (newCount === targetCount) {
-                    setActive(true);
-                }
-                return newCount;
-            });
-        } else {
-            setCount(1);
-        }
-        setLastClick(now);
-    }, [lastClick, targetCount]);
-
-    useEffect(() => {
-        const timer = setTimeout(() => setCount(0), 3000);
-        return () => clearTimeout(timer);
-    }, [count]);
-
-    return [active, incrementCount];
-};
-
-/**
- * Component for managing user settings and preferences.
  *
  * @returns The Settings component.
  */
 export default function Settings(): JSX.Element {
-    const [_enableCourseStatusChips, setEnableCourseStatusChips] = useState<boolean>(false);
+    const gitHubStatsService = useMemo(() => new GitHubStatsService(), []);
-    // const [_showTimeLocation, setShowTimeLocation] = useState<boolean>(false);
-    const [highlightConflicts, setHighlightConflicts] = useState<boolean>(false);
-    const [loadAllCourses, setLoadAllCourses] = useState<boolean>(false);
-    const [_enableDataRefreshing, setEnableDataRefreshing] = useState<boolean>(false);
-    const [calendarNewTab, setCalendarNewTab] = useState<boolean>(false);
-    const [increaseScheduleLimit, setIncreaseScheduleLimit] = useState<boolean>(false);
 
-    const showMigrationDialog = useMigrationDialog();
+    // State
-
+    const [highlightConflicts, setHighlightConflicts] = useState(false);
-    // Toggle GitHub stats when the user presses the 'S' key
+    const [loadAllCourses, setLoadAllCourses] = useState(false);
-    const [showGitHubStats, setShowGitHubStats] = useState<boolean>(false);
+    const [calendarNewTab, setCalendarNewTab] = useState(false);
+    const [increaseScheduleLimit, setIncreaseScheduleLimit] = useState(false);
+    const [showGitHubStats, setShowGitHubStats] = useState(false);
     const [githubStats, setGitHubStats] = useState<Awaited<
         ReturnType<typeof gitHubStatsService.fetchGitHubStats>
     > | null>(null);
+    const [isDeveloper, setIsDeveloper] = useState(false);
 
     const [activeSchedule] = useSchedules();
-    // const [isRefreshing, setIsRefreshing] = useState<boolean>(false);
-
-    const [isDeveloper, setIsDeveloper] = useState<boolean>(false);
-
     const showDialog = usePrompt();
     const handleChangelogOnClick = useChangelog();
+    const showMigrationDialog = useMigrationDialog();
 
+    const [devMode, toggleDevMode] = useDevMode(DEV_MODE_CLICK_TARGET);
+    const { showParticles, particlesInit, particlesOptions, triggerCelebration, isBirthday } = useBirthdayCelebration();
+
+    // Initialize settings and listeners
     useEffect(() => {
         const fetchGitHubStats = async () => {
             try {
@@ -121,19 +74,10 @@ export default function Settings(): JSX.Element {
         };
 
         const initAndSetSettings = async () => {
-            const {
+            const { enableHighlightConflicts, enableScrollToLoad, alwaysOpenCalendarInNewTab, allowMoreSchedules } =
-                enableCourseStatusChips,
+                await initSettings();
-                enableHighlightConflicts,
-                enableScrollToLoad,
-                enableDataRefreshing,
-                alwaysOpenCalendarInNewTab,
-                allowMoreSchedules,
-            } = await initSettings();
-            setEnableCourseStatusChips(enableCourseStatusChips);
-            // setShowTimeLocation(enableTimeAndLocationInPopup);
             setHighlightConflicts(enableHighlightConflicts);
             setLoadAllCourses(enableScrollToLoad);
-            setEnableDataRefreshing(enableDataRefreshing);
             setCalendarNewTab(alwaysOpenCalendarInNewTab);
             setIncreaseScheduleLimit(allowMoreSchedules);
         };
@@ -143,79 +87,50 @@ export default function Settings(): JSX.Element {
             setIsDeveloper(isDev);
         };
 
+        const handleKeyPress = (event: KeyboardEvent) => {
+            if (event.key === STATS_TOGGLE_KEY || event.key === STATS_TOGGLE_KEY.toUpperCase()) {
+                setShowGitHubStats(prev => !prev);
+            }
+        };
+
+        // Listeners
         const ds_l1 = DevStore.listen('isDeveloper', async ({ newValue }) => {
             setIsDeveloper(newValue);
         });
 
+        const l1 = OptionsStore.listen('enableHighlightConflicts', async ({ newValue }) => {
+            setHighlightConflicts(newValue);
+        });
+
+        const l2 = OptionsStore.listen('enableScrollToLoad', async ({ newValue }) => {
+            setLoadAllCourses(newValue);
+        });
+
+        const l3 = OptionsStore.listen('alwaysOpenCalendarInNewTab', async ({ newValue }) => {
+            setCalendarNewTab(newValue);
+        });
+
+        const l4 = OptionsStore.listen('allowMoreSchedules', async ({ newValue }) => {
+            setIncreaseScheduleLimit(newValue);
+        });
+
+        window.addEventListener('keydown', handleKeyPress);
+
         initDS();
         fetchGitHubStats();
         initAndSetSettings();
 
-        const handleKeyPress = (event: KeyboardEvent) => {
-            if (event.key === 'S' || event.key === 's') {
-                setShowGitHubStats(prev => !prev);
-            }
-        };
-
-        window.addEventListener('keydown', handleKeyPress);
-
-        // Listen for changes in the settings
-        const l1 = OptionsStore.listen('enableCourseStatusChips', async ({ newValue }) => {
-            setEnableCourseStatusChips(newValue);
-            // console.log('enableCourseStatusChips', newValue);
-        });
-
-        // const l2 = OptionsStore.listen('enableTimeAndLocationInPopup', async ({ newValue }) => {
-        //     setShowTimeLocation(newValue);
-        //     // console.log('enableTimeAndLocationInPopup', newValue);
-        // });
-
-        const l2 = OptionsStore.listen('enableHighlightConflicts', async ({ newValue }) => {
-            setHighlightConflicts(newValue);
-            // console.log('enableHighlightConflicts', newValue);
-        });
-
-        const l3 = OptionsStore.listen('enableScrollToLoad', async ({ newValue }) => {
-            setLoadAllCourses(newValue);
-            // console.log('enableScrollToLoad', newValue);
-        });
-
-        const l4 = OptionsStore.listen('enableDataRefreshing', async ({ newValue }) => {
-            setEnableDataRefreshing(newValue);
-            // console.log('enableDataRefreshing', newValue);
-        });
-
-        const l5 = OptionsStore.listen('alwaysOpenCalendarInNewTab', async ({ newValue }) => {
-            setCalendarNewTab(newValue);
-            // console.log('alwaysOpenCalendarInNewTab', newValue);
-        });
-
-        const l6 = OptionsStore.listen('alwaysOpenCalendarInNewTab', async ({ newValue }) => {
-            setCalendarNewTab(newValue);
-            // console.log('alwaysOpenCalendarInNewTab', newValue);
-        });
-
-        const l7 = OptionsStore.listen('allowMoreSchedules', async ({ newValue }) => {
-            setIncreaseScheduleLimit(newValue);
-        });
-
-        // Remove listeners when the component is unmounted
         return () => {
             OptionsStore.removeListener(l1);
             OptionsStore.removeListener(l2);
             OptionsStore.removeListener(l3);
             OptionsStore.removeListener(l4);
-            OptionsStore.removeListener(l5);
-            OptionsStore.removeListener(l6);
-            OptionsStore.removeListener(l7);
-
             DevStore.removeListener(ds_l1);
-
             window.removeEventListener('keydown', handleKeyPress);
         };
-    }, []);
+    }, [gitHubStatsService]);
 
-    const handleEraseAll = () => {
+    const handleEraseAll = useCallback(() => {
         showDialog({
             title: 'Erase All Course/Schedule Data',
             description: (
@@ -242,9 +157,9 @@ export default function Settings(): JSX.Element {
                 </Button>
             ),
         });
-    };
+    }, [showDialog]);
 
-    const handleImportClick = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const handleImportClick = useCallback(async (event: React.ChangeEvent<HTMLInputElement>) => {
         const file = event.target.files?.[0];
         if (!file) return;
 
@@ -257,16 +172,30 @@ export default function Settings(): JSX.Element {
             console.error('Error importing schedule:', error);
             alert('Failed to import schedule. Make sure the file is a valid .json format.');
         }
-    };
+    }, []);
-    // const handleAddCourseByLink = async () => {
-    //     // todo: Use a proper modal instead of a prompt
-    //     const link: string | null = prompt('Enter course link');
-    //     // Exit if the user cancels the prompt
-    //     if (link === null) return;
-    //     await addCourseByUrl(link, activeSchedule);
-    // };
 
-    const [devMode, toggleDevMode] = useDevMode(10);
+    const sortedContributors = useMemo(() => {
+        if (!githubStats) return LONGHORN_DEVELOPERS_SWE;
+        return [...LONGHORN_DEVELOPERS_SWE].sort(
+            (a, b) =>
+                (githubStats.userGitHubStats[b.githubUsername]?.commits ?? 0) -
+                (githubStats.userGitHubStats[a.githubUsername]?.commits ?? 0)
+        );
+    }, [githubStats]);
+
+    const additionalContributors = useMemo(() => {
+        if (!githubStats) return [];
+        return Object.keys(githubStats.userGitHubStats)
+            .filter(
+                username =>
+                    !LONGHORN_DEVELOPERS_ADMINS.some(admin => admin.githubUsername === username) &&
+                    !LONGHORN_DEVELOPERS_SWE.some(swe => swe.githubUsername === username)
+            )
+            .sort(
+                (a, b) =>
+                    (githubStats.userGitHubStats[b]?.commits ?? 0) - (githubStats.userGitHubStats[a]?.commits ?? 0)
+            );
+    }, [githubStats]);
 
     if (devMode) {
         DevStore.set('isDeveloper', true);
@@ -274,13 +203,32 @@ export default function Settings(): JSX.Element {
     }
 
     return (
-        <div>
+        <div className='relative'>
+            {particlesInit && showParticles && (
+                <Particles
+                    id='birthday-particles'
+                    options={particlesOptions}
+                    className='pointer-events-none absolute inset-0 z-50'
+                />
+            )}
+
             <header className='flex items-center gap-5 overflow-x-auto overflow-y-hidden border-b border-ut-offwhite px-7 py-4 md:overflow-x-hidden'>
                 <LargeLogo />
                 <Divider className='mx-2 self-center md:mx-4' size='2.5rem' orientation='vertical' />
-                <Text variant='h1' className='flex-1 text-ut-burntorange normal-case!'>
+                <div className='flex flex-1 items-center gap-2'>
+                    <Text variant='h1' className='text-ut-burntorange normal-case'>
                         Settings and Credits
                     </Text>
+                    {isBirthday && (
+                        <span
+                            onClick={triggerCelebration}
+                            className='cursor-pointer px-4 text-sm text-ut-burntorange transition-transform hover:scale-110'
+                            title='Click to celebrate!'
+                        >
+                            🎉 Happy Birthday LHD! 🎉
+                        </span>
+                    )}
+                </div>
                 <div className='hidden flex-row items-center justify-end gap-6 screenshot:hidden lg:flex'>
                     <Button variant='minimal' color='theme-black' onClick={handleChangelogOnClick}>
                         <IconoirGitFork className='h-6 w-6 text-ut-gray' />
@@ -301,238 +249,19 @@ export default function Settings(): JSX.Element {
 
             <div className='p-6 lg:flex'>
                 <div className='mr-4 lg:w-1/2 xl:w-xl'>
-                    {/* <section className='mb-8'>
+                    <AdvancedSettings
-                        <h2 className='mb-4 text-xl text-ut-black font-semibold'>CUSTOMIZATION OPTIONS</h2>
+                        highlightConflicts={highlightConflicts}
-                        <div className='flex space-x-4'>
+                        setHighlightConflicts={setHighlightConflicts}
-                            <div className='w-1/2 space-y-4'>
+                        loadAllCourses={loadAllCourses}
-                                <div className='flex items-center justify-between'>
+                        setLoadAllCourses={setLoadAllCourses}
-                                    <div className='max-w-xs'>
+                        increaseScheduleLimit={increaseScheduleLimit}
-                                        <h3 className='text-ut-burntorange font-semibold'>Show Course Status</h3>
+                        setIncreaseScheduleLimit={setIncreaseScheduleLimit}
-                                        <p className='text-sm text-gray-600'>
+                        calendarNewTab={calendarNewTab}
-                                            Shows an indicator for waitlisted, cancelled, and closed courses.
+                        setCalendarNewTab={setCalendarNewTab}
-                                        </p>
+                        activeSchedule={activeSchedule}
-                                    </div>
+                        handleEraseAll={handleEraseAll}
-                                    <SwitchButton
+                        handleImportClick={handleImportClick}
-                                        isChecked={enableCourseStatusChips}
-                                        onChange={() => {
-                                            setEnableCourseStatusChips(!enableCourseStatusChips);
-                                            OptionsStore.set('enableCourseStatusChips', !enableCourseStatusChips);
-                                        }}
                     />
-                                </div>
-
-                                <Divider size='auto' orientation='horizontal' />
-
-                                <div className='flex items-center justify-between'>
-                                    <div className='max-w-xs'>
-                                        <h3 className='text-ut-burntorange font-semibold'>
-                                            Show Time & Location in Popup
-                                        </h3>
-                                        <p className='text-sm text-gray-600'>
-                                            Shows the course&apos;s time and location in the extension&apos;s popup.
-                                        </p>
-                                    </div>
-                                    <SwitchButton
-                                        isChecked={showTimeLocation}
-                                        onChange={() => {
-                                            setShowTimeLocation(!showTimeLocation);
-                                            OptionsStore.set('enableTimeAndLocationInPopup', !showTimeLocation);
-                                        }}
-                                    />
-                                </div>
-                            </div>
-                            {DISPLAY_PREVIEWS && (
-                                <Preview>
-                                    <CalendarCourseCell
-                                        colors={getCourseColors('orange')}
-                                        courseDeptAndInstr={ExampleCourse.department}
-                                        className={ExampleCourse.number}
-                                        status={ExampleCourse.status}
-                                        timeAndLocation={ExampleCourse.schedule.meetings[0]!.getTimeString({
-                                            separator: '-',
-                                        })}
-                                    />
-                                    <PopupCourseBlock colors={getCourseColors('orange')} course={ExampleCourse} />
-                                </Preview>
-                            )}
-                        </div>
-                    </section>
-
-                    <Divider size='auto' orientation='horizontal' /> */}
-
-                    <section className='mb-8'>
-                        <h2 className='mb-4 text-xl text-ut-black font-semibold'>ADVANCED SETTINGS</h2>
-                        <div className='flex space-x-4'>
-                            <div className={PREVIEW_SECTION_DIV_CLASSNAME}>
-                                {/* <div className='flex items-center justify-between'>
-                                    <div className='max-w-xs'>
-                                        <h3 className='text-ut-burntorange font-semibold'>Refresh Data</h3>
-                                        <p className='text-sm text-gray-600'>
-                                            Refreshes waitlist, course status, and other info with the latest data from
-                                            UT&apos;s site.
-                                        </p>
-                                    </div>
-                                    <Button
-                                        variant='outline'
-                                        color='ut-black'
-                                        icon={RefreshIcon}
-                                        onClick={() => console.log('Refresh clicked')}
-                                        disabled={!enableDataRefreshing}
-                                    >
-                                        Refresh
-                                    </Button>
-                                </div>
-
-                                <Divider size='auto' orientation='horizontal' /> */}
-
-                                <div className='flex items-center justify-between'>
-                                    <div className='max-w-xs'>
-                                        <Text variant='h4' className='text-ut-burntorange font-semibold'>
-                                            Export Current Schedule
-                                        </Text>
-                                        <p className='text-sm text-gray-600'>
-                                            Backup your active schedule to a portable file
-                                        </p>
-                                    </div>
-                                    <Button
-                                        variant='outline'
-                                        color='ut-burntorange'
-                                        onClick={() => handleExportJson(activeSchedule.id)}
-                                    >
-                                        Export
-                                    </Button>
-                                </div>
-
-                                <Divider size='auto' orientation='horizontal' />
-
-                                <div className='flex items-center justify-between'>
-                                    <div className='max-w-xs'>
-                                        <Text variant='h4' className='text-ut-burntorange font-semibold'>
-                                            Import Schedule
-                                        </Text>
-                                        <p className='text-sm text-gray-600'>Import from a schedule file</p>
-                                    </div>
-                                    <FileUpload
-                                        variant='filled'
-                                        color='ut-burntorange'
-                                        onChange={handleImportClick}
-                                        accept={MIMEType.JSON}
-                                    >
-                                        Import Schedule
-                                    </FileUpload>
-                                </div>
-
-                                <Divider size='auto' orientation='horizontal' />
-
-                                <div className='flex items-center justify-between'>
-                                    <div className='max-w-xs'>
-                                        <Text variant='h4' className='text-ut-burntorange font-semibold'>
-                                            Course Conflict Highlight
-                                        </Text>
-                                        <p className='text-sm text-gray-600'>
-                                            Adds a red strikethrough to courses that have conflicting times.
-                                        </p>
-                                    </div>
-                                    <SwitchButton
-                                        isChecked={highlightConflicts}
-                                        onChange={() => {
-                                            setHighlightConflicts(!highlightConflicts);
-                                            OptionsStore.set('enableHighlightConflicts', !highlightConflicts);
-                                        }}
-                                    />
-                                </div>
-
-                                <Divider size='auto' orientation='horizontal' />
-
-                                <div className='flex items-center justify-between'>
-                                    <div className='max-w-xs'>
-                                        <Text variant='h4' className='text-ut-burntorange font-semibold'>
-                                            Load All Courses in Course Schedule
-                                        </Text>
-                                        <p className='text-sm text-gray-600'>
-                                            Loads all courses in the Course Schedule site by scrolling, instead of using
-                                            next/prev page buttons.
-                                        </p>
-                                    </div>
-                                    <SwitchButton
-                                        isChecked={loadAllCourses}
-                                        onChange={() => {
-                                            setLoadAllCourses(!loadAllCourses);
-                                            OptionsStore.set('enableScrollToLoad', !loadAllCourses);
-                                        }}
-                                    />
-                                </div>
-
-                                <div className='flex items-center justify-between'>
-                                    <div className='max-w-xs'>
-                                        <Text variant='h4' className='text-ut-burntorange font-semibold'>
-                                            Allow more than 10 schedules
-                                        </Text>
-                                        <p className='text-sm text-gray-600'>
-                                            Allow bypassing the 10-schedule limit. Intended for advisors or staff who
-                                            need to create many schedules on behalf of students.
-                                        </p>
-                                    </div>
-                                    <SwitchButton
-                                        isChecked={increaseScheduleLimit}
-                                        onChange={() => {
-                                            setIncreaseScheduleLimit(!increaseScheduleLimit);
-                                            OptionsStore.set('allowMoreSchedules', !increaseScheduleLimit);
-                                        }}
-                                    />
-                                </div>
-
-                                <Divider size='auto' orientation='horizontal' />
-
-                                <div className='flex items-center justify-between'>
-                                    <div className='max-w-xs'>
-                                        <Text variant='h4' className='text-ut-burntorange font-semibold'>
-                                            Always Open Calendar in New Tab
-                                        </Text>
-                                        <p className='text-sm text-gray-600'>
-                                            Always opens the calendar view in a new tab when navigating to the calendar
-                                            page. May prevent issues where the calendar refuses to open.
-                                        </p>
-                                    </div>
-                                    <SwitchButton
-                                        isChecked={calendarNewTab}
-                                        onChange={() => {
-                                            setCalendarNewTab(!calendarNewTab);
-                                            OptionsStore.set('alwaysOpenCalendarInNewTab', !calendarNewTab);
-                                        }}
-                                    />
-                                </div>
-
-                                <Divider size='auto' orientation='horizontal' />
-
-                                <div className='flex items-center justify-between'>
-                                    <div className='max-w-xs'>
-                                        <Text variant='h4' className='text-ut-burntorange font-semibold'>
-                                            Reset All Data
-                                        </Text>
-                                        <p className='text-sm text-gray-600'>
-                                            Erases all schedules and courses you have.
-                                        </p>
-                                    </div>
-                                    <Button variant='outline' color='theme-red' icon={Trash} onClick={handleEraseAll}>
-                                        Erase All
-                                    </Button>
-                                </div>
-                            </div>
-                            {DISPLAY_PREVIEWS && (
-                                <Preview>
-                                    <Text
-                                        variant='h2-course'
-                                        className={clsx('text-center text-theme-red !font-normal', {
-                                            'line-through': highlightConflicts,
-                                        })}
-                                    >
-                                        01234 MWF 10:00 AM - 11:00 AM UTC 1.234
-                                    </Text>
-                                </Preview>
-                            )}
-                        </div>
-                    </section>
 
                     <Divider size='auto' orientation='horizontal' />
 
@@ -593,17 +322,21 @@ export default function Settings(): JSX.Element {
                                         Open Debug Page
                                     </Button>
                                 </div>
-                            </>
-                        )}
 
                                 <Divider size='auto' orientation='horizontal' />
 
-                        <Button variant='filled' color='ut-black' onClick={() => addCourseByURL(activeSchedule)}>
+                                <Button
+                                    variant='filled'
+                                    color='ut-black'
+                                    onClick={() => addCourseByURL(activeSchedule)}
+                                >
                                     Add course by link
                                 </Button>
                                 <Button variant='filled' color='ut-burntorange' onClick={showMigrationDialog}>
                                     Show Migration Dialog
                                 </Button>
+                            </>
+                        )}
                     </section>
                 </div>
 
@@ -616,143 +349,43 @@ export default function Settings(): JSX.Element {
                         </h2>
                         <div className='grid grid-cols-2 gap-4 2xl:grid-cols-4 md:grid-cols-3'>
                             {LONGHORN_DEVELOPERS_ADMINS.map(admin => (
-                                <div
+                                <ContributorCard
                                     key={admin.githubUsername}
-                                    className='border border-gray-300 rounded bg-ut-gray/10 p-4'
+                                    name={admin.name}
-                                >
+                                    githubUsername={admin.githubUsername}
-                                    <Text
+                                    roles={admin.role}
-                                        variant='p'
+                                    stats={githubStats?.adminGitHubStats[admin.githubUsername]}
-                                        className='text-ut-burntorange font-semibold hover:cursor-pointer'
+                                    showStats={showGitHubStats}
-                                        onClick={() =>
+                                    includeMergedPRs={INCLUDE_MERGED_PRS}
-                                            window.open(`https://github.com/${admin.githubUsername}`, '_blank')
+                                />
-                                        }
-                                    >
-                                        {admin.name}
-                                    </Text>
-                                    {admin.role.map(role => (
-                                        <p key={admin.githubUsername} className='text-sm text-gray-600'>
-                                            {role}
-                                        </p>
-                                    ))}
-                                    {showGitHubStats && githubStats && (
-                                        <div className='mt-2'>
-                                            <p className='text-xs text-gray-500'>GitHub Stats (UTRP repo):</p>
-                                            {includeMergedPRs && (
-                                                <p className='text-xs'>
-                                                    Merged PRS:{' '}
-                                                    {githubStats.adminGitHubStats[admin.githubUsername]?.mergedPRs}
-                                                </p>
-                                            )}
-                                            <p className='text-xs'>
-                                                Commits: {githubStats.adminGitHubStats[admin.githubUsername]?.commits}
-                                            </p>
-                                            <p className='text-xs text-ut-green'>
-                                                {githubStats.adminGitHubStats[admin.githubUsername]?.linesAdded} ++
-                                            </p>
-                                            <p className='text-xs text-theme-red'>
-                                                {githubStats.adminGitHubStats[admin.githubUsername]?.linesDeleted} --
-                                            </p>
-                                        </div>
-                                    )}
-                                </div>
                             ))}
                         </div>
                     </section>
+
                     <section className='my-8'>
                         <h2 className='mb-4 text-xl text-ut-black font-semibold'>UTRP CONTRIBUTORS</h2>
                         <div className='grid grid-cols-2 gap-4 2xl:grid-cols-4 md:grid-cols-3 xl:grid-cols-3'>
-                            {LONGHORN_DEVELOPERS_SWE.sort(
+                            {sortedContributors.map(swe => (
-                                (a, b) =>
+                                <ContributorCard
-                                    (githubStats?.userGitHubStats[b.githubUsername]?.commits ?? 0) -
-                                    (githubStats?.userGitHubStats[a.githubUsername]?.commits ?? 0)
-                            ).map(swe => (
-                                <div
                                     key={swe.githubUsername}
-                                    className='border border-gray-300 rounded bg-ut-gray/10 p-4'
+                                    name={swe.name}
-                                >
+                                    githubUsername={swe.githubUsername}
-                                    <Text
+                                    roles={swe.role}
-                                        variant='p'
+                                    stats={githubStats?.userGitHubStats[swe.githubUsername]}
-                                        className='text-ut-burntorange font-semibold hover:cursor-pointer'
+                                    showStats={showGitHubStats}
-                                        onClick={() =>
+                                    includeMergedPRs={INCLUDE_MERGED_PRS}
-                                            window.open(`https://github.com/${swe.githubUsername}`, '_blank')
+                                />
-                                        }
-                                    >
-                                        {swe.name}
-                                    </Text>
-                                    {swe.role.map(role => (
-                                        <p key={swe.githubUsername} className='text-sm text-gray-600'>
-                                            {role}
-                                        </p>
                             ))}
-                                    {showGitHubStats && githubStats && (
+                            {additionalContributors.map(username => (
-                                        <div className='mt-2'>
+                                <ContributorCard
-                                            <p className='text-xs text-gray-500'>GitHub Stats (UTRP repo):</p>
-                                            {includeMergedPRs && (
-                                                <p className='text-xs'>
-                                                    Merged PRS:{' '}
-                                                    {githubStats.userGitHubStats[swe.githubUsername]?.mergedPRs}
-                                                </p>
-                                            )}
-                                            <p className='text-xs'>
-                                                Commits: {githubStats.userGitHubStats[swe.githubUsername]?.commits}
-                                            </p>
-                                            <p className='text-xs text-ut-green'>
-                                                {githubStats.userGitHubStats[swe.githubUsername]?.linesAdded} ++
-                                            </p>
-                                            <p className='text-xs text-theme-red'>
-                                                {githubStats.userGitHubStats[swe.githubUsername]?.linesDeleted} --
-                                            </p>
-                                        </div>
-                                    )}
-                                </div>
-                            ))}
-                            {githubStats &&
-                                Object.keys(githubStats.userGitHubStats)
-                                    .filter(
-                                        username =>
-                                            !LONGHORN_DEVELOPERS_ADMINS.some(
-                                                admin => admin.githubUsername === username
-                                            ) && !LONGHORN_DEVELOPERS_SWE.some(swe => swe.githubUsername === username)
-                                    )
-                                    .sort(
-                                        (a, b) =>
-                                            (githubStats.userGitHubStats[b]?.commits ?? 0) -
-                                            (githubStats.userGitHubStats[a]?.commits ?? 0)
-                                    )
-                                    .map(username => (
-                                        <div
                                     key={username}
-                                            className='overflow-clip border border-gray-300 rounded bg-ut-gray/10 p-4'
+                                    name={githubStats!.names[username] || username}
-                                        >
+                                    githubUsername={username}
-                                            <Text
+                                    roles={['Contributor']}
-                                                variant='p'
+                                    stats={githubStats!.userGitHubStats[username]}
-                                                className='text-ut-burntorange font-semibold hover:cursor-pointer'
+                                    showStats={showGitHubStats}
-                                                onClick={() => window.open(`https://github.com/${username}`, '_blank')}
+                                    includeMergedPRs={INCLUDE_MERGED_PRS}
-                                            >
+                                />
-                                                {githubStats.names[username]}
-                                            </Text>
-                                            <p className='text-sm text-gray-600'>Contributor</p>
-                                            {showGitHubStats && (
-                                                <div className='mt-2'>
-                                                    <p className='text-xs text-gray-500'>GitHub Stats (UTRP repo):</p>
-                                                    {includeMergedPRs && (
-                                                        <p className='text-xs'>
-                                                            Merged PRs:{' '}
-                                                            {githubStats.userGitHubStats[username]?.mergedPRs}
-                                                        </p>
-                                                    )}
-                                                    <p className='text-xs'>
-                                                        Commits: {githubStats.userGitHubStats[username]?.commits}
-                                                    </p>
-                                                    <p className='text-xs text-ut-green'>
-                                                        {githubStats.userGitHubStats[username]?.linesAdded} ++
-                                                    </p>
-                                                    <p className='text-xs text-theme-red'>
-                                                        {githubStats.userGitHubStats[username]?.linesDeleted} --
-                                                    </p>
-                                                </div>
-                                            )}
-                                        </div>
                             ))}
                         </div>
                     </section>

src/views/components/settings/constants.ts

@@ -0,0 +1,13 @@
+export const DISPLAY_PREVIEWS = false;
+export const PREVIEW_SECTION_DIV_CLASSNAME = DISPLAY_PREVIEWS ? 'w-1/2 space-y-4' : 'flex-grow space-y-4';
+
+export const STATS_TOGGLE_KEY = 's';
+export const INCLUDE_MERGED_PRS = false;
+export const DEV_MODE_CLICK_TARGET = 5;
+export const DEV_MODE_CLICK_TIMEOUT = 5000;
+export const DEV_MODE_CLICK_INTERVAL = 500;
+
+// LHD Birthday: January 9th, 2025
+export const LHD_BIRTHDAY = { month: 0, day: 9 };
+export const BIRTHDAY_CELEBRATION_DURATION = 5000;
+export const BIRTHDAY_CELEBRATION_DEBOUNCE = 2000;

src/views/components/settings/useBirthdayCelebration.ts

@@ -0,0 +1,140 @@
+import type { Engine, ISourceOptions } from '@tsparticles/engine';
+import { initParticlesEngine } from '@tsparticles/react';
+import { loadSlim } from '@tsparticles/slim';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { BIRTHDAY_CELEBRATION_DEBOUNCE, BIRTHDAY_CELEBRATION_DURATION, LHD_BIRTHDAY } from './constants';
+
+/**
+ * Custom hook for birthday celebration particles
+ */
+export const useBirthdayCelebration = () => {
+    const [showParticles, setShowParticles] = useState(false);
+    const [particlesInit, setParticlesInit] = useState(false);
+    const [lastCelebration, setLastCelebration] = useState(0);
+
+    const isBirthday = useMemo(() => {
+        const today = new Date();
+        return today.getMonth() === LHD_BIRTHDAY.month && today.getDate() === LHD_BIRTHDAY.day;
+    }, []);
+
+    useEffect(() => {
+        initParticlesEngine(async (engine: Engine) => {
+            await loadSlim(engine);
+        }).then(() => {
+            setParticlesInit(true);
+        });
+    }, []);
+
+    const triggerCelebration = useCallback(() => {
+        if (!isBirthday) return;
+
+        const now = Date.now();
+        // Debounce: prevent triggering again within BIRTHDAY_CELEBRATION_DEBOUNCE ms
+        if (now - lastCelebration < BIRTHDAY_CELEBRATION_DEBOUNCE) return;
+
+        setLastCelebration(now);
+        setShowParticles(true);
+        setTimeout(() => setShowParticles(false), BIRTHDAY_CELEBRATION_DURATION);
+    }, [isBirthday, lastCelebration]);
+
+    const particlesOptions: ISourceOptions = useMemo(
+        () => ({
+            fullScreen: { enable: true, zIndex: 1 },
+            particles: {
+                color: { value: ['#BF5700', '#333F48', '#FFFFFF'] }, // UT colors
+                move: {
+                    direction: 'bottom',
+                    enable: true,
+                    outModes: {
+                        default: 'out',
+                    },
+                    size: true,
+                    speed: {
+                        min: 1,
+                        max: 3,
+                    },
+                },
+                number: {
+                    value: 500,
+                    density: {
+                        enable: true,
+                        area: 800,
+                    },
+                },
+                opacity: {
+                    value: 1,
+                    animation: {
+                        enable: false,
+                        startValue: 'max',
+                        destroy: 'min',
+                        speed: 0.3,
+                        sync: true,
+                    },
+                },
+                rotate: {
+                    value: {
+                        min: 0,
+                        max: 360,
+                    },
+                    direction: 'random',
+                    move: true,
+                    animation: {
+                        enable: true,
+                        speed: 60,
+                    },
+                },
+                tilt: {
+                    direction: 'random',
+                    enable: true,
+                    move: true,
+                    value: {
+                        min: 0,
+                        max: 360,
+                    },
+                    animation: {
+                        enable: true,
+                        speed: 60,
+                    },
+                },
+                shape: {
+                    type: ['circle', 'square'],
+                    options: {},
+                },
+                size: {
+                    value: {
+                        min: 2,
+                        max: 4,
+                    },
+                },
+                roll: {
+                    darken: {
+                        enable: true,
+                        value: 30,
+                    },
+                    enlighten: {
+                        enable: true,
+                        value: 30,
+                    },
+                    enable: true,
+                    speed: {
+                        min: 15,
+                        max: 25,
+                    },
+                },
+                wobble: {
+                    distance: 30,
+                    enable: true,
+                    move: true,
+                    speed: {
+                        min: -15,
+                        max: 15,
+                    },
+                },
+            },
+        }),
+        []
+    );
+
+    return { showParticles, particlesInit, particlesOptions, triggerCelebration, isBirthday };
+};

src/views/components/settings/useDevMode.ts

@@ -0,0 +1,35 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { DEV_MODE_CLICK_INTERVAL, DEV_MODE_CLICK_TIMEOUT } from './constants';
+
+/**
+ * Custom hook for enabling developer mode via rapid clicking
+ */
+export const useDevMode = (targetCount: number): [boolean, () => void] => {
+    const [count, setCount] = useState(0);
+    const [active, setActive] = useState(false);
+    const [lastClick, setLastClick] = useState(0);
+
+    const incrementCount = useCallback(() => {
+        const now = Date.now();
+        if (now - lastClick < DEV_MODE_CLICK_INTERVAL) {
+            setCount(prevCount => {
+                const newCount = prevCount + 1;
+                if (newCount === targetCount) {
+                    setActive(true);
+                }
+                return newCount;
+            });
+        } else {
+            setCount(1);
+        }
+        setLastClick(now);
+    }, [lastClick, targetCount]);
+
+    useEffect(() => {
+        const timer = setTimeout(() => setCount(0), DEV_MODE_CLICK_TIMEOUT);
+        return () => clearTimeout(timer);
+    }, [count]);
+
+    return [active, incrementCount];
+};

vite.config.ts

@@ -88,6 +88,31 @@ const fixManifestOptionsPage = (): Plugin => ({
     },
 });
 
+function getGitInfo() {
+    // Try environment variables first (for Nix builds)
+    if (process.env.VITE_GIT_BRANCH && process.env.VITE_GIT_COMMIT) {
+        return {
+            gitBranch: process.env.VITE_GIT_BRANCH,
+            gitCommit: process.env.VITE_GIT_COMMIT,
+        };
+    }
+
+    // Fall back to git commands (for local development)
+    try {
+        return {
+            gitBranch: execSync('git rev-parse --abbrev-ref HEAD').toString().trim(),
+            gitCommit: execSync('git rev-parse --short HEAD').toString().trim(),
+        };
+    } catch {
+        return {
+            gitBranch: 'unknown',
+            gitCommit: 'unknown',
+        };
+    }
+}
+
+const gitInfo = getGitInfo();
+
 let config: ResolvedConfig;
 let server: ViteDevServer;
 
@@ -180,12 +205,14 @@ export default defineConfig({
                 'PROD',
                 'VITE_SENTRY_ENVIRONMENT',
                 'VITE_BETA_BUILD',
+                'VITE_GIT_BRANCH',
+                'VITE_GIT_COMMIT',
             ],
             includeTimestamp: true,
             includeBuildTime: true,
             customMetadata: {
-                gitBranch: () => execSync('git rev-parse --abbrev-ref HEAD').toString().trim(),
+                gitBranch: () => gitInfo.gitBranch,
-                gitCommit: () => execSync('git rev-parse --short HEAD').toString().trim(),
+                gitCommit: () => gitInfo.gitCommit,
                 nodeVersion: () => process.version,
             },
         }),