mac: add new scripts and category for services

Fix the syntax error in the GitHub action script that was caused by
improper multi-line YAML notation. This correction ensures the action
can successfully parse and execute.

.editorconfig

@@ -5,3 +5,7 @@ end_of_line = lf
 trim_trailing_whitespace = true
 insert_final_newline = true
 max_line_length = 100
+
+[{Dockerfile}]
+indent_style = space
+indent_size = 4

.github/actions/npm-install-dependencies/action.yml

@@ -8,4 +8,5 @@ runs:
     -
       name: Run `npm ci` with retries
       shell: bash
-      run: npm run install-deps -- --ci --root-directory "${{ inputs.working-directory }}"
+      run: npm run install-deps -- --ci
+      working-directory: ${{ inputs.working-directory }}

.github/actions/setup-node/action.yml

@@ -3,6 +3,6 @@ runs:
   steps:
     -
       name: Setup node
-      uses: actions/setup-node@v2
+      uses: actions/setup-node@v3
       with:
         node-version: 16.x

.github/workflows/checks.build.yaml

@@ -1,4 +1,4 @@
-name: build-checks
+name: checks.build
 
 on:
   push:
@@ -21,7 +21,7 @@ jobs:
     steps:
       -
         name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
       -
         name: Setup node
         uses: ./.github/actions/setup-node
@@ -49,7 +49,7 @@ jobs:
     steps:
       -
         name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
       -
         name: Setup node
         uses: ./.github/actions/setup-node
@@ -68,3 +68,33 @@ jobs:
       -
         name: Verify bundled desktop build artifacts
         run: npm run check:verify-build-artifacts -- --electron-bundled
+
+  build-docker:
+    strategy:
+      matrix:
+        os: [ macos, ubuntu ] # Windows runners do not support Linux containers
+      fail-fast: false # Allows to see results from other combinations
+    runs-on: ${{ matrix.os }}-latest
+    steps:
+      -
+        name: Checkout
+        uses: actions/checkout@v4
+      -
+        name: Install Docker on macOS
+        if: matrix.os == 'macos' # macOS runner is missing Docker
+        run: |-
+          # Install Docker
+          brew install docker
+          # Docker on macOS misses daemon due to licensing, so install colima as runtime
+          brew install colima
+          # Start the daemon
+          colima start
+      -
+        name: Build Docker image
+        run: docker build -t undergroundwires/privacy.sexy:latest .
+      -
+        name: Run Docker image on port 8080
+        run: docker run -d -p 8080:80 --rm --name privacy.sexy undergroundwires/privacy.sexy:latest
+      -
+        name: Check server is up and returns HTTP 200
+        run: node ./scripts/verify-web-server-status.js --url http://localhost:8080

.github/workflows/checks.desktop-runtime-errors.yaml

@@ -15,7 +15,7 @@ jobs:
     steps:
       -
         name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
       -
         name: Setup node
         uses: ./.github/actions/setup-node

.github/workflows/checks.external-urls.yaml

@@ -10,7 +10,7 @@ jobs:
     steps:
       -
         name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
       -
         name: Setup node
         uses: ./.github/actions/setup-node

.github/workflows/checks.quality.yaml

@@ -18,7 +18,7 @@ jobs:
     steps:
       -
         name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
       -
         name: Setup node
         uses: ./.github/actions/setup-node

.github/workflows/checks.scripts.yaml

@@ -14,7 +14,7 @@ jobs:
     steps:
       -
         name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
       -
         name: Setup node
         uses: ./.github/actions/setup-node
@@ -42,7 +42,7 @@ jobs:
     steps:
       -
         name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
       -
         name: Setup node
         uses: ./.github/actions/setup-node

.github/workflows/checks.security.dependencies.yaml

@@ -1,4 +1,4 @@
-name: security-checks
+name: checks.security.dependencies
 
 on:
   push:
@@ -13,7 +13,7 @@ jobs:
     steps:
       -
         name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
       -
         name: Setup node
         uses: ./.github/actions/setup-node

.github/workflows/checks.security.sast.yaml

@@ -0,0 +1,42 @@
+name: checks.security.sast
+
+on:
+  push:
+  pull_request:
+  schedule:
+    - cron: '0 0 * * 0' # at 00:00 on every Sunday
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [
+          javascript # analyzes code written in JavaScript, TypeScript and both.
+        ]
+
+    steps:
+      -
+        name: Checkout
+        uses: actions/checkout@v4
+      -
+        name: Initialize CodeQL
+        uses: github/codeql-action/init@v2
+        with:
+          languages: ${{ matrix.language }}
+          queries: +security-and-quality
+      -
+        name: Autobuild
+        uses: github/codeql-action/autobuild@v2
+      -
+        name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v2
+        with:
+          category: "/language:${{ matrix.language }}"

.github/workflows/release.desktop.yaml

@@ -14,7 +14,7 @@ jobs:
     runs-on: ${{ matrix.os }}-latest
     steps:
       -
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           ref: master # otherwise it defaults to the version tag missing bump commit
           fetch-depth: 0 # fetch all history

.github/workflows/release.site.yaml

@@ -10,7 +10,7 @@ jobs:
     steps:
       -
         name: "Infrastructure: Checkout"
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           path: aws
           repository: undergroundwires/aws-static-site-with-cd
@@ -75,7 +75,7 @@ jobs:
         working-directory: aws
       -
         name: "App: Checkout"
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           path: app
           ref: master # otherwise we don't get version bump commit
@@ -102,7 +102,7 @@ jobs:
       -
         name: "App: Deploy to S3"
         shell: bash
-        run: >-
+        run: |-
           declare web_output_dir
           if ! web_output_dir=$(cd app && node scripts/print-dist-dir.js --web); then
             echo 'Error: Could not determine distribution directory.'

.github/workflows/tests.e2e.yaml

@@ -14,7 +14,7 @@ jobs:
     steps:
       -
         name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
       -
         name: Setup node
         uses: ./.github/actions/setup-node

.github/workflows/tests.integration.yaml

@@ -16,7 +16,7 @@ jobs:
     steps:
       -
         name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
       -
         name: Setup node
         uses: ./.github/actions/setup-node

.github/workflows/tests.unit.yaml

@@ -14,7 +14,7 @@ jobs:
     steps:
       -
         name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
       -
         name: Set-up node
         uses: ./.github/actions/setup-node

CHANGELOG.md

@@ -1,5 +1,45 @@
 # Changelog
 
+## 0.12.5 (2023-10-13)
+
+* Fix Docker build and improve checks #220 | [7669985](https://github.com/undergroundwires/privacy.sexy/commit/7669985f8e1446e726a95626ecf35b3ce6b60a16)
+* Add SAST security checks with SECURITY.md #178 | [3e5239f](https://github.com/undergroundwires/privacy.sexy/commit/3e5239f7d35e57749c01adf3dbbcd365aebb39c8)
+* Add Scoop download instructions #174 | [cf55ca9](https://github.com/undergroundwires/privacy.sexy/commit/cf55ca9e28b064fa7a516077a9da23e3a8e3f534)
+* win: fix and improve temp dir cleanup #176, #89 | [d457504](https://github.com/undergroundwires/privacy.sexy/commit/d45750428cca010daf2721b33a8ae3a01b28813b)
+* win, linux: improve VSCode setting robustness #196 | [e8a52f7](https://github.com/undergroundwires/privacy.sexy/commit/e8a52f717dc799b34ceeb1c27c2b8219391dff6a)
+* linux: fix obsolete Firefox DPI script #239 | [e5f6edf](https://github.com/undergroundwires/privacy.sexy/commit/e5f6edf405bcec7c29ea4d7932d1910620fa15f8)
+* win: add removal of Edge assocations #64 | [888c916](https://github.com/undergroundwires/privacy.sexy/commit/888c9166fc66a2094137fa8be739cc21bafef5f6)
+* win: improve Edge & OneDrive shortcut removal #73 | [8501495](https://github.com/undergroundwires/privacy.sexy/commit/8501495c170af61913288a63dbd369db5bbc5003)
+* win: relocate and document SecHealthUI #190 | [2862951](https://github.com/undergroundwires/privacy.sexy/commit/286295128d0179358e0c6b7b6415d752175a1aed)
+* Add developer toolkit UI component | [2147eae](https://github.com/undergroundwires/privacy.sexy/commit/2147eae687b82d05bc43bb4605d9068f148bb92a)
+* win: fix and improve network data usage reset #265 | [5e359c2](https://github.com/undergroundwires/privacy.sexy/commit/5e359c2fb82a08e6acf7159b70ca86a8234b359b)
+* win: improve app reversion and docs #260 | [a3f11df](https://github.com/undergroundwires/privacy.sexy/commit/a3f11dff187c821a00910c20dac05e285cda9073)
+* Fix working directory in CI/CD web release | [698b570](https://github.com/undergroundwires/privacy.sexy/commit/698b570ee6e300d6703015464f4345b5e706f1cb)
+* Implement new UI component for icons #230 | [48730bc](https://github.com/undergroundwires/privacy.sexy/commit/48730bca0506120bca4bf3a23545d59f2b1a9009)
+* win: fix and improve AppCompat disabling #255 | [bab6316](https://github.com/undergroundwires/privacy.sexy/commit/bab6316e7625230cf4a4cf67c3aca417347db75c)
+* win, linux, mac: fix typos and improve naming | [67c3677](https://github.com/undergroundwires/privacy.sexy/commit/67c3677621b201525a813e8a26f07d607176e89b)
+
+[compare](https://github.com/undergroundwires/privacy.sexy/compare/0.12.4...0.12.5)
+
+## 0.12.4 (2023-09-25)
+
+* win: fix Windows spotlight revert, docs, recommend | [659fea7](https://github.com/undergroundwires/privacy.sexy/commit/659fea7afcabcd0ea273cfdcc8c4bae190c126f3)
+* win: fix Edge telemetry disabling for v116+ #242 | [6d301f9](https://github.com/undergroundwires/privacy.sexy/commit/6d301f99616ed49975876803d0098eafe4d3cb2e)
+* win: fix, improve disabling automatic updates #252 | [6e9b65d](https://github.com/undergroundwires/privacy.sexy/commit/6e9b65d8b1b481c1471dde90876c37838b4ac4e5)
+* win: refactor `update.mode` key for VSCode #215 | [c27172c](https://github.com/undergroundwires/privacy.sexy/commit/c27172c32e7c316b7cb0f44cab611eed89ca034e)
+* Fix wrong action path in website CI deployment | [a1f2497](https://github.com/undergroundwires/privacy.sexy/commit/a1f24973813ccbdd7e1f06c64e1912a991a6bb64)
+* Fix compiler bug with nested optional arguments | [53222fd](https://github.com/undergroundwires/privacy.sexy/commit/53222fd83c2846089746a217482195806f960d18)
+* Fix no spacing after lists in documentation text | [f810ed0](https://github.com/undergroundwires/privacy.sexy/commit/f810ed0c147c2a46cae3b70b635ed81128646fff)
+* Rewrite tooltip UI for efficiency and Vue 3.0 #230 | [8b930fc](https://github.com/undergroundwires/privacy.sexy/commit/8b930fc57c8ee6691ed6165bcb27d97e64a1a0c0)
+* win: fix uninstallation of newer Edge #236 | [60dde11](https://github.com/undergroundwires/privacy.sexy/commit/60dde11311a2409537f5965f370b0daaaec53339)
+* win: fix delivery optimization side-effects #173 | [203daeb](https://github.com/undergroundwires/privacy.sexy/commit/203daeb4a2fca0a0295cbc2a736394f9f87725e6)
+* win: fix Defender scan artifacts removal #246 | [cb21a97](https://github.com/undergroundwires/privacy.sexy/commit/cb21a970b6b867e1476a5eb8a72b9a7fdd53a744)
+* Fix outdated and broken links in README #161 | [0303ef2](https://github.com/undergroundwires/privacy.sexy/commit/0303ef2fd98b36306523e2a0c5f5ae812a4c6c99)
+* Fix loss of tree node state when switching views | [8f188ac](https://github.com/undergroundwires/privacy.sexy/commit/8f188acd3c2d93e40c89569c74bc5cff992f0052)
+* Fix slow appearance of nodes on tree view | [bd2082e](https://github.com/undergroundwires/privacy.sexy/commit/bd2082e8c574db065bb4462f30ea3ace2cb028cb)
+
+[compare](https://github.com/undergroundwires/privacy.sexy/compare/0.12.3...0.12.4)
+
 ## 0.12.3 (2023-09-09)
 
 * linux: use user.js over prefs.js for Firefox #232 | [dae6d11](https://github.com/undergroundwires/privacy.sexy/commit/dae6d114daab6857d773071211eb57619b136281)

Dockerfile

@@ -1,13 +1,16 @@
 # Build
-FROM node:lts-alpine as build-stage
+FROM node:lts-alpine AS build-stage
 WORKDIR /app
-COPY package*.json ./
-RUN npm install
 COPY . .
-RUN npm run build
+RUN npm run install-deps
+RUN npm run build \
+    && npm run check:verify-build-artifacts -- --web
+RUN mkdir /dist \
+    && dist_directory=$(node 'scripts/print-dist-dir.js' --web) \
+    && cp -a "${dist_directory}/." '/dist'
 
 # Production stage
-FROM nginx:stable-alpine as production-stage
+FROM nginx:stable-alpine AS production-stage
-COPY --from=build-stage /app/dist /usr/share/nginx/html
+COPY --from=build-stage /dist /usr/share/nginx/html
 EXPOSE 80
-CMD ["nginx", "-g", "daemon off;"]
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -16,14 +16,6 @@
       src="https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat"
     />
   </a>
-  <!-- Code quality -->
-  <br />
-  <a href="https://lgtm.com/projects/g/undergroundwires/privacy.sexy/context:javascript" target="_blank" rel="noopener noreferrer">
-    <img
-      alt="Language grade: JavaScript/TypeScript"
-      src="https://img.shields.io/lgtm/grade/javascript/g/undergroundwires/privacy.sexy.svg?logo=lgtm&logoWidth=18"
-    />
-  </a>
   <a href="https://codeclimate.com/github/undergroundwires/privacy.sexy/maintainability" target="_blank" rel="noopener noreferrer">
     <img
       alt="Maintainability"
@@ -50,6 +42,20 @@
       src="https://github.com/undergroundwires/privacy.sexy/workflows/e2e-tests/badge.svg"
     />
   </a>
+  <!-- Security checks -->
+  <br />
+  <a href="https://github.com/undergroundwires/privacy.sexy/actions/workflows/checks.security.sast.yaml" target="_blank" rel="noopener noreferrer">
+    <img
+      alt="Status of dependency security checks"
+      src="https://github.com/undergroundwires/privacy.sexy/workflows/checks.security.sast/badge.svg"
+    />
+  </a>
+  <a href="https://github.com/undergroundwires/privacy.sexy/actions/workflows/checks.security.dependencies.yaml" target="_blank" rel="noopener noreferrer">
+    <img
+      alt="Status of Static Analysis Security Testing (SAST)"
+      src="https://github.com/undergroundwires/privacy.sexy/workflows/checks.security.dependencies/badge.svg"
+    />
+  </a>
   <!-- Checks -->
   <br />
   <a href="https://github.com/undergroundwires/privacy.sexy/actions/workflows/checks.quality.yaml" target="_blank" rel="noopener noreferrer">
@@ -58,16 +64,10 @@
       src="https://github.com/undergroundwires/privacy.sexy/workflows/quality-checks/badge.svg"
     />
   </a>
-  <a href="https://github.com/undergroundwires/privacy.sexy/actions/workflows/checks.security.yaml" target="_blank" rel="noopener noreferrer">
-    <img
-      alt="Security checks status"
-      src="https://github.com/undergroundwires/privacy.sexy/workflows/security-checks/badge.svg"
-    />
-  </a>
   <a href="https://github.com/undergroundwires/privacy.sexy/actions/workflows/checks.build.yaml" target="_blank" rel="noopener noreferrer">
     <img
-      alt="Build checks status"
+      alt="Status of build checks"
-      src="https://github.com/undergroundwires/privacy.sexy/workflows/build-checks/badge.svg"
+      src="https://github.com/undergroundwires/privacy.sexy/workflows/checks.build/badge.svg"
     />
   </a>
   <a href="https://github.com/undergroundwires/privacy.sexy/actions/workflows/checks.desktop-runtime-errors.yaml" target="_blank" rel="noopener noreferrer">
@@ -122,7 +122,7 @@
 ## Get started
 
 - 🌍️ **Online**: [https://privacy.sexy](https://privacy.sexy).
-- 🖥️ **Offline**: Check [releases page](https://github.com/undergroundwires/privacy.sexy/releases), or download directly for: [Windows](https://github.com/undergroundwires/privacy.sexy/releases/download/0.12.3/privacy.sexy-Setup-0.12.3.exe), [macOS](https://github.com/undergroundwires/privacy.sexy/releases/download/0.12.3/privacy.sexy-0.12.3.dmg), [Linux](https://github.com/undergroundwires/privacy.sexy/releases/download/0.12.3/privacy.sexy-0.12.3.AppImage).
+- 🖥️ **Offline**: Download directly for: [Windows](https://github.com/undergroundwires/privacy.sexy/releases/download/0.12.5/privacy.sexy-Setup-0.12.5.exe), [macOS](https://github.com/undergroundwires/privacy.sexy/releases/download/0.12.5/privacy.sexy-0.12.5.dmg), [Linux](https://github.com/undergroundwires/privacy.sexy/releases/download/0.12.5/privacy.sexy-0.12.5.AppImage). For more options, see [here](#additional-install-options).
 
 Online version does not require to run any software on your computer. Offline version has more functions such as running the scripts directly.
 
@@ -150,6 +150,16 @@ Online version does not require to run any software on your computer. Offline ve
 
 **Contribute 👷**. Contributions of any type are welcome. See [CONTRIBUTING.md](./CONTRIBUTING.md) as the starting point. It includes useful information like [how to add new scripts](./CONTRIBUTING.md#extend-scripts).
 
+## Additional Install Options
+
+- Check the [releases page](https://github.com/undergroundwires/privacy.sexy/releases) for all available versions.
+- Using [Scoop](https://scoop.sh/#/apps?q=privacy.sexy&s=2&d=1&o=true) package manager on Windows:
+
+  ```powershell
+    scoop bucket add extras
+    scoop install privacy.sexy
+  ```
+
 ## Development
 
 Refer to [development.md](./docs/development.md) for Docker usage and reading more about setting up your development environment.
@@ -157,3 +167,7 @@ Refer to [development.md](./docs/development.md) for Docker usage and reading mo
 Check [architecture.md](./docs/architecture.md) for an overview of design and how different parts and layers work together. You can refer to [application.md](./docs/application.md) for a closer look at application layer codebase and [presentation.md](./docs/presentation.md) for code related to GUI layer. [collection-files.md](./docs/collection-files.md) explains the YAML files that are the core of the application and [templating.md](./docs/templating.md) documents how to use templating language in those files. In [ci-cd.md](./docs/ci-cd.md), you can read more about the pipelines that automates maintenance tasks and ensures you get what see.
 
 [docs/](./docs/) folder includes all other documentation.
+
+## Security
+
+Security is a top priority at privacy.sexy. An extensive commitment to security verification ensures this priority. For any security concerns or vulnerabilities, please consult the [Security Policy](./SECURITY.md).

SECURITY.md

@@ -0,0 +1,31 @@
+# Security Policy
+
+privacy.sexy takes security seriously. Commitment is made to address all security issues with urgency. Responsible reporting of any discovered vulnerabilities in the project is highly encouraged.
+
+## Reporting a Vulnerability
+
+Efforts to responsibly disclose findings are greatly appreciated. To report a security vulnerability, follow these steps:
+
+- For general vulnerabilities, [open an issue](https://github.com/undergroundwires/privacy.sexy/issues/new/choose) using the bug report template.
+- For sensitive matters, [contact the developer directly](https://undergroundwires.dev).
+
+## Security Report Handling
+
+Upon receipt of a security report, the following actions will be taken:
+
+- The report will be confirmed, identifying the affected components.
+- The impact and severity of the issue will be assessed.
+- Work on a fix and plan a release to address the vulnerability will be initiated.
+- The reporter will be kept updated about the progress.
+
+## Testing
+
+Regular and extensive testing is conducted to ensure robust security in the project. Information about testing practices can be found in the [Testing Documentation](./docs/tests.md).
+
+## Support
+
+For additional assistance or any unanswered questions, [submit a GitHub issue](https://github.com/undergroundwires/privacy.sexy/issues/new/choose). Security concerns are a priority, and necessary support to address them is assured.
+
+---
+
+Active contribution to the safety and security of privacy.sexy is thanked. This collaborative effort keeps the project resilient and trustworthy for all.

cypress.config.ts

@@ -6,7 +6,10 @@ const CYPRESS_BASE_DIR = 'tests/e2e/';
 export default defineConfig({
   fixturesFolder: `${CYPRESS_BASE_DIR}/fixtures`,
   screenshotsFolder: `${CYPRESS_BASE_DIR}/screenshots`,
+
+  video: true,
   videosFolder: `${CYPRESS_BASE_DIR}/videos`,
+
   e2e: {
     baseUrl: `http://localhost:${ViteConfig.server.port}/`,
     specPattern: `${CYPRESS_BASE_DIR}/**/*.cy.{js,jsx,ts,tsx}`, // Default: cypress/e2e/**/*.cy.{js,jsx,ts,tsx}

docs/collection-files.md

@@ -174,3 +174,19 @@
 - `endCode:` *`string`* (**required**)
   - Code that'll be inserted at the end of user created script.
   - Global variables such as `$homepage`, `$version`, `$date` can be used using [parameter substitution](./templating.md#parameter-substitution) code syntax such as `Welcome to {{ $homepage }}!`
+
+## Naming guidelines
+
+- Prioritize consistency throughout all names.
+- Use an instruction format like "do this, do that" for clear, direct guidance. This approach reduces potential confusion and offers easy-to-follow steps. It provides specific, unambiguous instructions.
+- Ensure brand names adhere to their official casing.
+- Choose clear and uncomplicated language.
+- Favor the terms:
+  - "Disable" over "Turn off"
+  - "Configure" over "Set up"
+  - "Clear" over "Erase" or "Clean"
+  - "Minimize" over "Limit" or "Reduce" (when it enhances clarity)
+  - "Remove" over "Uninstall"
+- Structure your phrases for clarity.
+  - For instance, "Disable XX telemetry" or "Clear XX data" are preferred over "Clear data from XX", "Disable telemetry in XX", or "Clear data of XX".
+- Use sentence case rather than Title Case.

docs/development.md

@@ -60,6 +60,7 @@ See [ci-cd.md](./ci-cd.md) for more information.
 
 1. Build: `docker build -t undergroundwires/privacy.sexy:latest .`
 2. Run: `docker run -it -p 8080:80 --rm --name privacy.sexy undergroundwires/privacy.sexy:latest`
+3. Application should be available at [`http://localhost:8080`](http://localhost:8080)
 
 ### Building
 
@@ -81,11 +82,12 @@ See [ci-cd.md](./ci-cd.md) for more information.
 
 #### Automation scripts
 
-- [**`node scripts/print-dist-dir.js [-- <options>]`**](../scripts/print-dist-dir.js):
+- [**`node scripts/print-dist-dir.js [<options>]`**](../scripts/print-dist-dir.js):
   - Determines the absolute path of a distribution directory based on CLI arguments and outputs its absolute path.
-  - Primarily used by automation scripts.
 - [**`npm run check:verify-build-artifacts [-- <options>]`**](../scripts/verify-build-artifacts.js):
   - Verifies the existence and content of build artifacts. Useful for ensuring that the build process is generating the expected output.
+- [**`node scripts/verify-web-server-status.js --url [URL]`**](../scripts/verify-web-server-status.js):
+  - Checks if a specified server is up with retries and returns an HTTP 200 status code.
 
 ## Recommended extensions
 

docs/tests.md

@@ -56,6 +56,11 @@ These checks validate various qualities like runtime execution, building process
 - Use [various tools](./../package.json) and [scripts](./../scripts).
 - Are automatically executed as [GitHub workflows](./../.github/workflows).
 
+### Security checks
+
+- [`checks.security.sast`](./../.github/workflows/checks.security.sast.yaml): Utilizes CodeQL to conduct Static Analysis Security Testing (SAST) to ensure the secure integrity of the codebase.
+- [`checks.security.dependencies`](./../.github/workflows/checks.security.dependencies.yaml): Performs audits on third-party dependencies to identify and mitigate potential vulnerabilities, safeguarding the project from exploitable weaknesses.
+
 ## Tests structure
 
 - [`package.json`](./../package.json): Defines test commands and includes tools used in tests.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "privacy.sexy",
-  "version": "0.12.3",
+  "version": "0.12.5",
   "private": true,
   "slogan": "Now you have the choice",
   "description": "Enforce privacy & security best-practices on Windows, macOS and Linux, because privacy is sexy 🍑🍆",
@@ -35,24 +35,20 @@
   },
   "dependencies": {
     "@floating-ui/vue": "^1.0.2",
-    "@fortawesome/fontawesome-svg-core": "^6.4.0",
-    "@fortawesome/free-brands-svg-icons": "^6.4.0",
-    "@fortawesome/free-regular-svg-icons": "^6.4.0",
-    "@fortawesome/free-solid-svg-icons": "^6.4.0",
-    "@fortawesome/vue-fontawesome": "^2.0.9",
     "@juggle/resize-observer": "^3.4.0",
-    "ace-builds": "^1.23.4",
+    "ace-builds": "^1.30.0",
     "cross-fetch": "^4.0.0",
+    "electron-log": "^4.4.8",
     "electron-progressbar": "^2.1.0",
+    "electron-updater": "^6.1.4",
     "file-saver": "^2.0.5",
-    "markdown-it": "^13.0.1",
+    "markdown-it": "^13.0.2",
-    "npm": "^9.8.1",
     "vue": "^2.7.14"
   },
   "devDependencies": {
     "@modyfi/vite-plugin-yaml": "^1.0.4",
-    "@rushstack/eslint-patch": "^1.3.2",
+    "@rushstack/eslint-patch": "^1.5.1",
-    "@types/ace": "^0.0.48",
+    "@types/ace": "^0.0.49",
     "@types/file-saver": "^2.0.5",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
@@ -61,47 +57,42 @@
     "@vue/eslint-config-airbnb-with-typescript": "^7.0.0",
     "@vue/eslint-config-typescript": "^11.0.3",
     "@vue/test-utils": "^1.3.6",
-    "autoprefixer": "^10.4.15",
+    "autoprefixer": "^10.4.16",
-    "cypress": "^12.17.2",
+    "cypress": "^13.3.1",
-    "electron": "^25.3.2",
+    "electron": "^27.0.0",
-    "electron-builder": "^24.6.3",
+    "electron-builder": "^24.6.4",
     "electron-devtools-installer": "^3.2.0",
     "electron-icon-builder": "^2.0.1",
-    "electron-log": "^4.4.8",
-    "electron-updater": "^6.1.4",
     "electron-vite": "^1.0.27",
-    "eslint": "^8.46.0",
+    "eslint": "^8.51.0",
-    "eslint-plugin-cypress": "^2.14.0",
+    "eslint-plugin-cypress": "^2.15.1",
-    "eslint-plugin-vue": "^9.6.0",
+    "eslint-plugin-vue": "^9.17.0",
-    "eslint-plugin-vuejs-accessibility": "^1.2.0",
+    "eslint-plugin-vuejs-accessibility": "^2.2.0",
-    "icon-gen": "^3.0.1",
+    "icon-gen": "^4.0.0",
     "jsdom": "^22.1.0",
-    "markdownlint-cli": "^0.35.0",
+    "markdownlint-cli": "^0.37.0",
-    "postcss": "^8.4.28",
+    "postcss": "^8.4.31",
-    "remark-cli": "^11.0.0",
+    "remark-cli": "^12.0.0",
     "remark-lint-no-dead-urls": "^1.1.0",
     "remark-preset-lint-consistent": "^5.1.2",
-    "remark-validate-links": "^12.1.1",
+    "remark-validate-links": "^13.0.0",
-    "sass": "^1.64.1",
+    "sass": "^1.69.3",
-    "start-server-and-test": "^2.0.0",
+    "start-server-and-test": "^2.0.1",
     "svgexport": "^0.4.2",
-    "terser": "^5.19.2",
+    "terser": "^5.21.0",
-    "tslib": "~2.4.0",
+    "tslib": "^2.6.2",
-    "typescript": "~4.6.2",
+    "typescript": "^5.2.2",
-    "vite": "^4.4.9",
+    "vite": "^4.4.11",
-    "vitest": "^0.34.2",
+    "vitest": "^0.34.6",
-    "vue-tsc": "^1.8.8",
+    "vue-tsc": "^1.8.19",
     "yaml-lint": "^1.7.0"
   },
   "//devDependencies": {
     "terser": "Used by @vitejs/plugin-legacy for minification",
-    "typescript": [
+    "@rushstack/eslint-patch": "Needed by @vue/eslint-config-typescript",
-      "Cannot upgrade to 5.X.X due to unmaintained @vue/cli-plugin-typescript, https://github.com/vuejs/vue-cli/issues/7401",
+    "@vue/eslint-config-typescript": "Cannot upgrade to 12.X.X due to @vue/eslint-config-airbnb-with-typescript, https://github.com/vuejs/eslint-config-airbnb/issues/58",
-      "Cannot upgrade to > 4.6.X otherwise unit tests do not work, https://github.com/evanw/node-source-map-support/issues/252"
+    "@typescript-eslint/eslint-plugin": "Cannot upgrade to 6.X.X due to @vue/eslint-config-airbnb-with-typescript, https://github.com/vuejs/eslint-config-airbnb/issues/58",
-    ],
+    "@typescript-eslint/parser": "Cannot upgrade to 6.X.X due to @vue/eslint-config-airbnb-with-typescript, https://github.com/vuejs/eslint-config-airbnb/issues/58"
-    "tslib": "Cannot upgrade to > 2.4.X otherwise unit tests do not work, https://github.com/evanw/node-source-map-support/issues/252",
-    "@typescript-eslint/eslint-plugin": "Cannot upgrade to 6.X.X due to @vue/eslint-config-typescript, https://github.com/vuejs/eslint-config-typescript/pull/60",
-    "@typescript-eslint/parser": "Cannot upgrade to 6.X.X due to @vue/eslint-config-typescript, https://github.com/vuejs/eslint-config-typescript/pull/60"
   },
   "homepage": "https://privacy.sexy",
   "repository": {

scripts/verify-web-server-status.js

@@ -0,0 +1,62 @@
+/**
+ * Description:
+ *   This script checks if a server, provided as a CLI argument, is up
+ *   and returns an HTTP 200 status code.
+ *   It is designed to provide easy verification of server availability
+ *   and will retry a specified number of times.
+ *
+ * Usage:
+ *   node ./scripts/verify-web-server-status.js --url [URL]
+ *
+ * Options:
+ *   --url   URL of the server to check
+ */
+
+import { get } from 'http';
+
+const MAX_RETRIES = 30;
+const RETRY_DELAY_IN_SECONDS = 3;
+const URL_PARAMETER_NAME = '--url';
+
+function checkServer(currentRetryCount = 1) {
+  const serverUrl = getServerUrl();
+  console.log(`Requesting ${serverUrl}...`);
+  get(serverUrl, (res) => {
+    if (res.statusCode === 200) {
+      console.log('🎊 Success: The server is up and returned HTTP 200.');
+      process.exit(0);
+    } else {
+      console.log(`Server returned HTTP status code ${res.statusCode}.`);
+      retry(currentRetryCount);
+    }
+  }).on('error', (err) => {
+    console.error('Error making the request:', err);
+    retry(currentRetryCount);
+  });
+}
+
+function retry(currentRetryCount) {
+  console.log(`Attempt ${currentRetryCount}/${MAX_RETRIES}:`);
+  console.log(`Retrying in ${RETRY_DELAY_IN_SECONDS} seconds.`);
+
+  const remainingTime = (MAX_RETRIES - currentRetryCount) * RETRY_DELAY_IN_SECONDS;
+  console.log(`Time remaining before timeout: ${remainingTime}s`);
+
+  if (currentRetryCount < MAX_RETRIES) {
+    setTimeout(() => checkServer(currentRetryCount + 1), RETRY_DELAY_IN_SECONDS * 1000);
+  } else {
+    console.log('Failure: The server at did not return HTTP 200 within the allocated time. Exiting.');
+    process.exit(1);
+  }
+}
+
+function getServerUrl() {
+  const urlIndex = process.argv.indexOf(URL_PARAMETER_NAME);
+  if (urlIndex === -1 || urlIndex === process.argv.length - 1) {
+    console.error(`Parameter "${URL_PARAMETER_NAME}" is not provided.`);
+    process.exit(1);
+  }
+  return process.argv[urlIndex + 1];
+}
+
+checkServer();

src/presentation/assets/icons/battery-full.svg

@@ -0,0 +1 @@
+<!-- Source: Font Awesome 6 --><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M464 160c8.8 0 16 7.2 16 16V336c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V176c0-8.8 7.2-16 16-16H464zM80 96C35.8 96 0 131.8 0 176V336c0 44.2 35.8 80 80 80H464c44.2 0 80-35.8 80-80V320c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32V176c0-44.2-35.8-80-80-80H80zm368 96H96V320H448V192z"/></svg>

src/presentation/assets/icons/battery-half.svg

@@ -0,0 +1 @@
+<!-- Source: Font Awesome 6 --><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M464 160c8.8 0 16 7.2 16 16V336c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V176c0-8.8 7.2-16 16-16H464zM80 96C35.8 96 0 131.8 0 176V336c0 44.2 35.8 80 80 80H464c44.2 0 80-35.8 80-80V320c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32V176c0-44.2-35.8-80-80-80H80zm208 96H96V320H288V192z"/></svg>

src/presentation/assets/icons/circle-info.svg

@@ -0,0 +1 @@
+<!-- Source: Font Awesome 6 --><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>

src/presentation/assets/icons/copy.svg

@@ -0,0 +1 @@
+<!-- Source: Font Awesome 6 --><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M208 0H332.1c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9V336c0 26.5-21.5 48-48 48H208c-26.5 0-48-21.5-48-48V48c0-26.5 21.5-48 48-48zM48 128h80v64H64V448H256V416h64v48c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V176c0-26.5 21.5-48 48-48z"/></svg>

src/presentation/assets/icons/desktop.svg

@@ -0,0 +1 @@
+<!-- Source: Font Awesome 6 --><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M64 0C28.7 0 0 28.7 0 64V352c0 35.3 28.7 64 64 64H240l-10.7 32H160c-17.7 0-32 14.3-32 32s14.3 32 32 32H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H346.7L336 416H512c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H64zM512 64V288H64V64H512z"/></svg>

src/presentation/assets/icons/face-smile.svg

@@ -0,0 +1 @@
+<!-- Source: Font Awesome 6 --><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm177.6 62.1C192.8 334.5 218.8 352 256 352s63.2-17.5 78.4-33.9c9-9.7 24.2-10.4 33.9-1.4s10.4 24.2 1.4 33.9c-22 23.8-60 49.4-113.6 49.4s-91.7-25.5-113.6-49.4c-9-9.7-8.4-24.9 1.4-33.9s24.9-8.4 33.9 1.4zM144.4 208a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm192-32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>

src/presentation/assets/icons/file-arrow-down.svg

@@ -0,0 +1 @@
+<!-- Source: Font Awesome 6 --><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM216 232V334.1l31-31c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-72 72c-9.4 9.4-24.6 9.4-33.9 0l-72-72c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l31 31V232c0-13.3 10.7-24 24-24s24 10.7 24 24z"/></svg>

src/presentation/assets/icons/floppy-disk.svg

@@ -0,0 +1 @@
+<!-- Source: Font Awesome 6 --><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V173.3c0-17-6.7-33.3-18.7-45.3L352 50.7C340 38.7 323.7 32 306.7 32H64zm0 96c0-17.7 14.3-32 32-32H288c17.7 0 32 14.3 32 32v64c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V128zM224 288a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/></svg>

src/presentation/assets/icons/folder-open.svg

@@ -0,0 +1 @@
+<!-- Source: Font Awesome 6 --><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M384 480h48c11.4 0 21.9-6 27.6-15.9l112-192c5.8-9.9 5.8-22.1 .1-32.1S555.5 224 544 224H144c-11.4 0-21.9 6-27.6 15.9L48 357.1V96c0-8.8 7.2-16 16-16H181.5c4.2 0 8.3 1.7 11.3 4.7l26.5 26.5c21 21 49.5 32.8 79.2 32.8H416c8.8 0 16 7.2 16 16v32h48V160c0-35.3-28.7-64-64-64H298.5c-17 0-33.3-6.7-45.3-18.7L226.7 50.7c-12-12-28.3-18.7-45.3-18.7H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H87.7 384z"/></svg>

src/presentation/assets/icons/folder.svg

@@ -0,0 +1 @@
+<!-- Source: Font Awesome 6 --><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0 96C0 60.7 28.7 32 64 32H196.1c19.1 0 37.4 7.6 50.9 21.1L289.9 96H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM64 80c-8.8 0-16 7.2-16 16V416c0 8.8 7.2 16 16 16H448c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16H286.6c-10.6 0-20.8-4.2-28.3-11.7L213.1 87c-4.5-4.5-10.6-7-17-7H64z"/></svg>

src/presentation/assets/icons/github.svg

@@ -0,0 +1 @@
+<!-- Source: Font Awesome 6 --><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>

src/presentation/assets/icons/globe.svg

@@ -0,0 +1 @@
+<!-- Source: Font Awesome 6 --><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M352 256c0 22.2-1.2 43.6-3.3 64H163.3c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64H348.7c2.2 20.4 3.3 41.8 3.3 64zm28.8-64H503.9c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64H380.8c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32H376.7c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0H167.7c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.6 26 20.9 58.2 27 94.7zm-209 0H18.6C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160zM8.1 192H131.2c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64H8.1C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zM194.7 446.6c-11.6-26-20.9-58.2-27-94.6H344.3c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3 352c10 63.9 29.8 117.4 55.3 151.6C112.2 482.9 48.6 426.1 18.6 352H135.3zm358.1 0c-30 74.1-93.6 130.9-171.9 151.6c25.5-34.2 45.2-87.7 55.3-151.6H493.4z"/></svg>

src/presentation/assets/icons/left-right.svg

@@ -0,0 +1 @@
+<!-- Source: Font Awesome 6 --><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M504.3 273.6c4.9-4.5 7.7-10.9 7.7-17.6s-2.8-13-7.7-17.6l-112-104c-7-6.5-17.2-8.2-25.9-4.4s-14.4 12.5-14.4 22l0 56-192 0 0-56c0-9.5-5.7-18.2-14.4-22s-18.9-2.1-25.9 4.4l-112 104C2.8 243 0 249.3 0 256s2.8 13 7.7 17.6l112 104c7 6.5 17.2 8.2 25.9 4.4s14.4-12.5 14.4-22l0-56 192 0 0 56c0 9.5 5.7 18.2 14.4 22s18.9 2.1 25.9-4.4l112-104z"/></svg>

src/presentation/assets/icons/magnifying-glass.svg

@@ -0,0 +1 @@
+<!-- Source: Font Awesome 6 --><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>

src/presentation/assets/icons/play.svg

@@ -0,0 +1 @@
+<!-- Source: Font Awesome 6 --><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/></svg>

src/presentation/assets/icons/tag.svg

@@ -0,0 +1 @@
+<!-- Source: Font Awesome 6 --><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M0 80V229.5c0 17 6.7 33.3 18.7 45.3l176 176c25 25 65.5 25 90.5 0L418.7 317.3c25-25 25-65.5 0-90.5l-176-176c-12-12-28.3-18.7-45.3-18.7H48C21.5 32 0 53.5 0 80zm112 32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>

src/presentation/assets/icons/user-secret.svg

@@ -0,0 +1 @@
+<!-- Source: Font Awesome 6 --><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224 16c-6.7 0-10.8-2.8-15.5-6.1C201.9 5.4 194 0 176 0c-30.5 0-52 43.7-66 89.4C62.7 98.1 32 112.2 32 128c0 14.3 25 27.1 64.6 35.9c-.4 4-.6 8-.6 12.1c0 17 3.3 33.2 9.3 48H45.4C38 224 32 230 32 237.4c0 1.7 .3 3.4 1 5l38.8 96.9C28.2 371.8 0 423.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7c0-58.5-28.2-110.4-71.7-143L415 242.4c.6-1.6 1-3.3 1-5c0-7.4-6-13.4-13.4-13.4H342.7c6-14.8 9.3-31 9.3-48c0-4.1-.2-8.1-.6-12.1C391 155.1 416 142.3 416 128c0-15.8-30.7-29.9-78-38.6C324 43.7 302.5 0 272 0c-18 0-25.9 5.4-32.5 9.9c-4.8 3.3-8.8 6.1-15.5 6.1zm56 208H267.6c-16.5 0-31.1-10.6-36.3-26.2c-2.3-7-12.2-7-14.5 0c-5.2 15.6-19.9 26.2-36.3 26.2H168c-22.1 0-40-17.9-40-40V169.6c28.2 4.1 61 6.4 96 6.4s67.8-2.3 96-6.4V184c0 22.1-17.9 40-40 40zm-88 96l16 32L176 480 128 288l64 32zm128-32L272 480 240 352l16-32 64-32z"/></svg>

src/presentation/assets/icons/xmark.svg

@@ -0,0 +1 @@
+<!-- Source: Font Awesome 6 --><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>

src/presentation/bootstrapping/ApplicationBootstrapper.ts

@@ -1,4 +1,3 @@
-import { IconBootstrapper } from './Modules/IconBootstrapper';
 import { VueConstructor, IVueBootstrapper } from './IVueBootstrapper';
 import { VueBootstrapper } from './Modules/VueBootstrapper';
 import { RuntimeSanityValidator } from './Modules/RuntimeSanityValidator';
@@ -14,7 +13,6 @@ export class ApplicationBootstrapper implements IVueBootstrapper {
 
   private static getAllBootstrappers(): IVueBootstrapper[] {
     return [
-      new IconBootstrapper(),
       new VueBootstrapper(),
       new RuntimeSanityValidator(),
       new AppInitializationLogger(),

src/presentation/bootstrapping/Modules/IconBootstrapper.ts

@@ -1,38 +0,0 @@
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { faGithub } from '@fortawesome/free-brands-svg-icons';
-/** BRAND ICONS (PREFIX: fab) */
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-/** REGULAR ICONS (PREFIX: far) */
-import { faFolderOpen, faFolder, faSmile } from '@fortawesome/free-regular-svg-icons';
-/** SOLID ICONS (PREFIX: fas (default)) */
-import {
-  faTimes, faFileDownload, faCopy, faSearch, faInfoCircle, faUserSecret, faDesktop, faTag, faGlobe,
-  faSave, faBatteryFull, faBatteryHalf, faPlay, faArrowsAltH,
-} from '@fortawesome/free-solid-svg-icons';
-import { IVueBootstrapper, VueConstructor } from '../IVueBootstrapper';
-
-export class IconBootstrapper implements IVueBootstrapper {
-  public bootstrap(vue: VueConstructor): void {
-    library.add(
-      faGithub,
-      faUserSecret,
-      faSmile,
-      faDesktop,
-      faGlobe,
-      faTag,
-      faFolderOpen,
-      faFolder,
-      faTimes,
-      faFileDownload,
-      faSave,
-      faCopy,
-      faPlay,
-      faSearch,
-      faBatteryFull,
-      faBatteryHalf,
-      faInfoCircle,
-      faArrowsAltH,
-    );
-    vue.component('font-awesome-icon', FontAwesomeIcon);
-  }
-}

src/presentation/components/App.vue

@@ -7,11 +7,12 @@
       <TheCodeButtons class="app__row app__code-buttons" />
       <TheFooter />
     </div>
+    <OptionalDevToolkit />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineAsyncComponent, defineComponent } from 'vue';
 import TheHeader from '@/presentation/components/TheHeader.vue';
 import TheFooter from '@/presentation/components/TheFooter/TheFooter.vue';
 import TheCodeButtons from '@/presentation/components/Code/CodeButtons/TheCodeButtons.vue';
@@ -22,6 +23,10 @@ import { provideDependencies } from '../bootstrapping/DependencyProvider';
 
 const singletonAppContext = await buildContext();
 
+const OptionalDevToolkit = process.env.NODE_ENV !== 'production'
+  ? defineAsyncComponent(() => import('@/presentation/components/DevToolkit/DevToolkit.vue'))
+  : null;
+
 export default defineComponent({
   components: {
     TheHeader,
@@ -29,6 +34,7 @@ export default defineComponent({
     TheScriptArea,
     TheSearchBar,
     TheFooter,
+    OptionalDevToolkit,
   },
   setup() {
     provideDependencies(singletonAppContext); // In Vue 3.0 we can move it to main.ts
@@ -59,5 +65,4 @@ export default defineComponent({
     }
   }
 }
-
 </style>

src/presentation/components/Code/CodeButtons/IconButton.vue

@@ -4,30 +4,30 @@
     type="button"
     @click="onClicked"
   >
-    <font-awesome-icon
+    <AppIcon
       class="button__icon"
-      :icon="[iconPrefix, iconName]"
+      :icon="iconName"
-      size="2x"
     />
     <div class="button__text">{{text}}</div>
   </button>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, PropType } from 'vue';
+import { IconName } from '@/presentation/components/Shared/Icon/IconName';
+import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
 
 export default defineComponent({
+  components: {
+    AppIcon,
+  },
   props: {
     text: {
       type: String,
       required: true,
     },
-    iconPrefix: {
-      type: String,
-      required: true,
-    },
     iconName: {
-      type: String,
+      type: String as PropType<IconName>,
       required: true,
     },
   },
@@ -64,6 +64,10 @@ export default defineComponent({
   box-shadow: 0 3px 9px $color-primary-darkest;
   border-radius: 4px;
 
+  &__icon {
+    font-size: 2em;
+  }
+
   @include clickable;
 
   width: 10%;

src/presentation/components/Code/CodeButtons/Instructions/CodeInstruction.vue

@@ -3,9 +3,9 @@
     <span class="dollar">$</span>
     <code><slot /></code>
     <TooltipWrapper>
-      <font-awesome-icon
+      <AppIcon
         class="copy-button"
-        :icon="['fas', 'copy']"
+        icon="copy"
         @click="copyCode"
       />
       <template v-slot:tooltip>
@@ -19,10 +19,12 @@
 import { defineComponent, useSlots } from 'vue';
 import { Clipboard } from '@/infrastructure/Clipboard';
 import TooltipWrapper from '@/presentation/components/Shared/TooltipWrapper.vue';
+import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
 
 export default defineComponent({
   components: {
     TooltipWrapper,
+    AppIcon,
   },
   setup() {
     const slots = useSlots();

src/presentation/components/Code/CodeButtons/Instructions/InstructionList.vue

@@ -14,7 +14,7 @@
     <p>
       <strong>2. The hard (manual) alternative</strong>. This requires you to do additional manual
       steps. If you are unsure how to follow the instructions, hover on information
-      (<font-awesome-icon :icon="['fas', 'info-circle']" />)
+      (<AppIcon icon="circle-info" />)
       icons near the steps, or follow the easy alternative described above.
     </p>
     <p>
@@ -27,9 +27,9 @@
           <div class="step__action">
             <span>{{ step.action.instruction }}</span>
             <TooltipWrapper v-if="step.action.details">
-              <font-awesome-icon
+              <AppIcon
                 class="explanation"
-                :icon="['fas', 'info-circle']"
+                icon="circle-info"
               />
               <template v-slot:tooltip>
                 <div v-html="step.action.details" />
@@ -39,9 +39,9 @@
           <div v-if="step.code" class="step__code">
             <CodeInstruction>{{ step.code.instruction }}</CodeInstruction>
             <TooltipWrapper v-if="step.code.details">
-              <font-awesome-icon
+              <AppIcon
                 class="explanation"
-                :icon="['fas', 'info-circle']"
+                icon="circle-info"
               />
               <template v-slot:tooltip>
                 <div v-html="step.code.details" />
@@ -62,6 +62,7 @@ import {
 import { InjectionKeys } from '@/presentation/injectionSymbols';
 import { OperatingSystem } from '@/domain/OperatingSystem';
 import TooltipWrapper from '@/presentation/components/Shared/TooltipWrapper.vue';
+import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
 import CodeInstruction from './CodeInstruction.vue';
 import { IInstructionListData } from './InstructionListData';
 
@@ -69,6 +70,7 @@ export default defineComponent({
   components: {
     CodeInstruction,
     TooltipWrapper,
+    AppIcon,
   },
   props: {
     data: {

src/presentation/components/Code/CodeButtons/TheCodeButtons.vue

@@ -4,19 +4,16 @@
       v-if="canRun"
       text="Run"
       v-on:click="executeCode"
-      icon-prefix="fas"
       icon-name="play"
     />
     <IconButton
       :text="isDesktopVersion ? 'Save' : 'Download'"
       v-on:click="saveCode"
-      icon-prefix="fas"
+      :icon-name="isDesktopVersion ? 'floppy-disk' : 'file-arrow-down'"
-      :icon-name="isDesktopVersion ? 'save' : 'file-download'"
     />
     <IconButton
       text="Copy"
       v-on:click="copyCode"
-      icon-prefix="fas"
       icon-name="copy"
     />
     <ModalDialog v-if="instructions" v-model="areInstructionsVisible">

src/presentation/components/DevToolkit/DevToolkit.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="dev-toolkit">
+    <div class="title">
+      Tools
+    </div>
+    <hr />
+    <button
+      v-for="action in devActions"
+      @click="action.handler"
+      :key="action.name"
+      type="button">
+      {{ action.name }}
+    </button>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { dumpNames } from './DumpNames';
+
+export default defineComponent({
+  setup() {
+    const devActions: readonly DevAction[] = [
+      {
+        name: 'Log script/category names',
+        handler: async () => {
+          const names = await dumpNames();
+          console.log(names);
+        },
+      },
+    ];
+    return {
+      devActions,
+    };
+  },
+});
+
+interface DevAction {
+  readonly name: string;
+  readonly handler: () => void | Promise<void>;
+}
+</script>
+
+<style scoped lang="scss">
+@use "@/presentation/assets/styles/main" as *;
+
+.dev-toolkit {
+  position: fixed;
+  top: 0;
+  right: 0;
+  background-color: rgba($color-on-surface, 0.5);
+  color: $color-on-primary;
+  padding: 10px;
+  z-index: 10000;
+
+  .title {
+    font-weight: bold;
+    text-align: center;
+  }
+
+  button {
+    display: block;
+    margin-bottom: 10px;
+    padding: 5px 10px;
+    background-color: $color-primary;
+    color: $color-on-primary;
+    border: none;
+    cursor: pointer;
+  }
+}
+</style>

src/presentation/components/DevToolkit/DumpNames.ts

@@ -0,0 +1,35 @@
+import { IApplication } from '@/domain/IApplication';
+import { ApplicationFactory } from '@/application/ApplicationFactory';
+
+export async function dumpNames(): Promise<string> {
+  const application = await ApplicationFactory.Current.getApp();
+  const names = collectNames(application);
+  const output = names.join('\n');
+  return output;
+}
+
+function collectNames(application: IApplication): string[] {
+  const { collections } = application;
+
+  const allNames = [
+    ...collections.flatMap((collection) => collection.getAllCategories().map((c) => c.name)),
+    ...collections.flatMap((collection) => collection.getAllScripts().map((c) => c.name)),
+  ];
+
+  const uniqueNames = [...new Set(allNames)];
+
+  return shuffle(uniqueNames);
+}
+
+/*
+  Shuffle an array of strings, returning a new array with elements in random order.
+  Uses the Fisher-Yates (or Durstenfeld) algorithm.
+*/
+function shuffle(array: readonly string[]): string[] {
+  const shuffledArray = [...array];
+  for (let i = array.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [shuffledArray[i], shuffledArray[j]] = [shuffledArray[j], shuffledArray[i]];
+  }
+  return shuffledArray;
+}

src/presentation/components/Scripts/Slider/SliderHandle.vue

@@ -4,9 +4,9 @@
     :style="{ cursor: cursorCssValue }"
     @mousedown="startResize">
     <div class="line" />
-    <font-awesome-icon
+    <AppIcon
       class="icon"
-      :icon="['fas', 'arrows-alt-h']"
+      icon="left-right"
     />
     <div class="line" />
   </div>
@@ -14,8 +14,12 @@
 
 <script lang="ts">
 import { defineComponent, onUnmounted } from 'vue';
+import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
 
 export default defineComponent({
+  components: {
+    AppIcon,
+  },
   emits: {
     /* eslint-disable @typescript-eslint/no-unused-vars */
     resized: (displacementX: number) => true,

src/presentation/components/Scripts/View/Cards/CardListItem.vue

@@ -17,18 +17,18 @@
       </span>
       <span v-else>Oh no 😢</span>
       <!-- Expand icon -->
-      <font-awesome-icon
+      <AppIcon
         class="card__inner__expand-icon"
-        :icon="['far', isExpanded ? 'folder-open' : 'folder']"
+        :icon="isExpanded ? 'folder-open' : 'folder'"
       />
       <!-- Indeterminate and full states -->
       <div class="card__inner__state-icons">
-        <font-awesome-icon
+        <AppIcon
-          :icon="['fa', 'battery-half']"
+          icon="battery-half"
           v-if="isAnyChildSelected && !areAllChildrenSelected"
         />
-        <font-awesome-icon
+        <AppIcon
-          :icon="['fa', 'battery-full']"
+          icon="battery-full"
           v-if="areAllChildrenSelected"
         />
       </div>
@@ -38,8 +38,8 @@
         <ScriptsTree :categoryId="categoryId" />
       </div>
       <div class="card__expander__close-button">
-        <font-awesome-icon
+        <AppIcon
-          :icon="['fas', 'times']"
+          icon="xmark"
           v-on:click="collapse()"
         />
       </div>
@@ -52,6 +52,7 @@ import {
   defineComponent, ref, watch, computed,
   inject,
 } from 'vue';
+import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
 import { InjectionKeys } from '@/presentation/injectionSymbols';
 import ScriptsTree from '@/presentation/components/Scripts/View/Tree/ScriptsTree.vue';
 import { sleep } from '@/infrastructure/Threading/AsyncSleep';
@@ -59,6 +60,7 @@ import { sleep } from '@/infrastructure/Threading/AsyncSleep';
 export default defineComponent({
   components: {
     ScriptsTree,
+    AppIcon,
   },
   props: {
     categoryId: {

src/presentation/components/Scripts/View/TheScriptsView.vue

@@ -18,7 +18,7 @@
             class="search__query__close-button"
             v-on:click="clearSearchQuery()"
           >
-            <font-awesome-icon :icon="['fas', 'times']" />
+            <AppIcon icon="xmark" />
           </div>
         </div>
         <div v-if="!searchHasMatches" class="search-no-matches">
@@ -41,6 +41,7 @@ import {
   defineComponent, PropType, ref, computed,
   inject,
 } from 'vue';
+import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
 import { InjectionKeys } from '@/presentation/injectionSymbols';
 import ScriptsTree from '@/presentation/components/Scripts/View/Tree/ScriptsTree.vue';
 import CardList from '@/presentation/components/Scripts/View/Cards/CardList.vue';
@@ -52,6 +53,7 @@ export default defineComponent({
   components: {
     ScriptsTree,
     CardList,
+    AppIcon,
   },
   props: {
     currentView: {

src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/ToggleDocumentationButton.vue

@@ -6,14 +6,18 @@
     v-on:click.stop
     v-on:click="toggle()"
   >
-    <font-awesome-icon :icon="['fas', 'info-circle']" />
+    <AppIcon icon="circle-info" />
   </a>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
+import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
 
 export default defineComponent({
+  components: {
+    AppIcon,
+  },
   emits: [
     'show',
     'hide',
@@ -52,5 +56,4 @@ export default defineComponent({
     color: $color-primary-light;
   }
 }
-
 </style>

src/presentation/components/Scripts/View/Tree/TreeView/Rendering/Ordering/CollapseDepthOrderer.ts

@@ -1,29 +0,0 @@
-import { ReadOnlyTreeNode } from '../../Node/TreeNode';
-import { RenderQueueOrderer } from './RenderQueueOrderer';
-
-export class CollapseDepthOrderer implements RenderQueueOrderer {
-  public orderNodes(nodes: Iterable<ReadOnlyTreeNode>): ReadOnlyTreeNode[] {
-    return orderNodes(nodes);
-  }
-}
-
-function orderNodes(nodes: Iterable<ReadOnlyTreeNode>): ReadOnlyTreeNode[] {
-  return [...nodes]
-    .sort((a, b) => {
-      const [aCollapseStatus, bCollapseStatus] = [isNodeCollapsed(a), isNodeCollapsed(b)];
-      if (aCollapseStatus !== bCollapseStatus) {
-        return (aCollapseStatus ? 1 : 0) - (bCollapseStatus ? 1 : 0);
-      }
-      return a.hierarchy.depthInTree - b.hierarchy.depthInTree;
-    });
-}
-
-function isNodeCollapsed(node: ReadOnlyTreeNode): boolean {
-  if (!node.state.current.isExpanded) {
-    return true;
-  }
-  if (node.hierarchy.parent) {
-    return isNodeCollapsed(node.hierarchy.parent);
-  }
-  return false;
-}

src/presentation/components/Scripts/View/Tree/TreeView/Rendering/Ordering/CollapsedParentOrderer.ts

@@ -0,0 +1,35 @@
+import { ReadOnlyTreeNode } from '../../Node/TreeNode';
+import { RenderQueueOrderer } from './RenderQueueOrderer';
+
+export class CollapsedParentOrderer implements RenderQueueOrderer {
+  public orderNodes(nodes: Iterable<ReadOnlyTreeNode>): ReadOnlyTreeNode[] {
+    return orderNodes(nodes);
+  }
+}
+
+function orderNodes(nodes: Iterable<ReadOnlyTreeNode>): ReadOnlyTreeNode[] {
+  return [...nodes]
+    .map((node, index) => ({ node, index }))
+    .sort((a, b) => {
+      const [
+        isANodeOfCollapsedParent,
+        isBNodeOfCollapsedParent,
+      ] = [isParentCollapsed(a.node), isParentCollapsed(b.node)];
+      if (isANodeOfCollapsedParent !== isBNodeOfCollapsedParent) {
+        return (isANodeOfCollapsedParent ? 1 : 0) - (isBNodeOfCollapsedParent ? 1 : 0);
+      }
+      return a.index - b.index;
+    })
+    .map(({ node }) => node);
+}
+
+function isParentCollapsed(node: ReadOnlyTreeNode): boolean {
+  const parentNode = node.hierarchy.parent;
+  if (parentNode) {
+    if (!parentNode.state.current.isExpanded) {
+      return true;
+    }
+    return isParentCollapsed(parentNode);
+  }
+  return false;
+}

src/presentation/components/Scripts/View/Tree/TreeView/Rendering/UseGradualNodeRendering.ts

@@ -9,7 +9,7 @@ import { NodeRenderingStrategy } from './Scheduling/NodeRenderingStrategy';
 import { DelayScheduler } from './DelayScheduler';
 import { TimeoutDelayScheduler } from './Scheduling/TimeoutDelayScheduler';
 import { RenderQueueOrderer } from './Ordering/RenderQueueOrderer';
-import { CollapseDepthOrderer } from './Ordering/CollapseDepthOrderer';
+import { CollapsedParentOrderer } from './Ordering/CollapsedParentOrderer';
 
 /**
  * Renders tree nodes gradually to prevent UI freeze when loading large amounts of nodes.
@@ -21,7 +21,7 @@ export function useGradualNodeRendering(
   scheduler: DelayScheduler = new TimeoutDelayScheduler(),
   initialBatchSize = 30,
   subsequentBatchSize = 5,
-  orderer: RenderQueueOrderer = new CollapseDepthOrderer(),
+  orderer: RenderQueueOrderer = new CollapsedParentOrderer(),
 ): NodeRenderingStrategy {
   const nodesToRender = new Set<ReadOnlyTreeNode>();
   const nodesBeingRendered = shallowRef(new Set<ReadOnlyTreeNode>());

src/presentation/components/Shared/Icon/AppIcon.vue

@@ -0,0 +1,40 @@
+<template>
+  <div v-html="svgContent" class="inline-icon" />
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  PropType,
+  inject,
+} from 'vue';
+import { useSvgLoader } from './UseSvgLoader';
+import { IconName } from './IconName';
+
+export default defineComponent({
+  props: {
+    icon: {
+      type: String as PropType<IconName>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const useSvgLoaderHook = inject('useSvgLoaderHook', useSvgLoader);
+    const { svgContent } = useSvgLoaderHook(() => props.icon);
+    return { svgContent };
+  },
+});
+
+</script>
+
+<style lang="scss" scoped>
+.inline-icon {
+  display: inline-block;
+  ::v-deep svg { // using ::v-deep because when v-html is used the content doesn't go through Vue's template compiler.
+    display: inline-block;
+    height: 1em;
+    overflow: visible;
+    vertical-align: -0.125em;
+  }
+}
+</style>

src/presentation/components/Shared/Icon/IconName.ts

@@ -0,0 +1,22 @@
+export const IconNames = [
+  'magnifying-glass',
+  'copy',
+  'circle-info',
+  'user-secret',
+  'tag',
+  'github',
+  'face-smile',
+  'globe',
+  'desktop',
+  'xmark',
+  'battery-half',
+  'battery-full',
+  'folder',
+  'folder-open',
+  'left-right',
+  'file-arrow-down',
+  'floppy-disk',
+  'play',
+] as const;
+
+export type IconName = typeof IconNames[number];

src/presentation/components/Shared/Icon/UseSvgLoader.ts

@@ -0,0 +1,92 @@
+import {
+  WatchSource, readonly, ref, watch,
+} from 'vue';
+import { AsyncLazy } from '@/infrastructure/Threading/AsyncLazy';
+import { IconName } from './IconName';
+
+export function useSvgLoader(
+  iconWatcher: WatchSource<IconName>,
+  loaders: FileLoaders = RawSvgLoaders,
+) {
+  const svgContent = ref<string>('');
+
+  watch(iconWatcher, async (iconName) => {
+    svgContent.value = await lazyLoadSvg(iconName, loaders);
+  }, { immediate: true });
+
+  return {
+    svgContent: readonly(svgContent),
+  };
+}
+
+export function clearIconCache() {
+  LazyIconCache.clear();
+}
+
+export type FileLoaders = Record<string, () => Promise<string>>;
+
+const LazyIconCache = new Map<IconName, AsyncLazy<string>>();
+
+async function lazyLoadSvg(name: IconName, loaders: FileLoaders): Promise<string> {
+  let iconLoader = LazyIconCache.get(name);
+  if (!iconLoader) {
+    iconLoader = new AsyncLazy<string>(() => loadSvg(name, loaders));
+    LazyIconCache.set(name, iconLoader);
+  }
+  const icon = await iconLoader.getValue();
+  return icon;
+}
+
+async function loadSvg(name: IconName, loaders: FileLoaders): Promise<string> {
+  const iconPath = `/assets/icons/${name}.svg`;
+  const loader = loaders[iconPath];
+  if (!loader) {
+    throw new Error(`missing icon for "${name}" in "${iconPath}"`);
+  }
+  const svgContent = await loader();
+  const modifiedContent = modifySvg(svgContent);
+  return modifiedContent;
+}
+
+const RawSvgLoaders = import.meta.glob('@/presentation/assets/icons/**/*.svg', {
+  as: 'raw', // This will load the SVG file content as a string.
+  /*
+    Using `eager: true` to preload all icons.
+    Pros:
+      - Speed: Icons are instantly accessible post-initial load.
+    Cons:
+      - Increased initial load time due to preloading of all icons.
+      - Increased bundle size.
+  */
+  eager: false,
+});
+
+function modifySvg(svgSource: string): string {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(svgSource, 'image/svg+xml');
+  let svgRoot = doc.documentElement;
+  svgRoot = removeSvgComments(svgRoot);
+  svgRoot = fillSvgCurrentColor(svgRoot);
+  return new XMLSerializer()
+    .serializeToString(svgRoot);
+}
+
+function removeSvgComments(svgRoot: HTMLElement): HTMLElement {
+  const comments = Array.from(svgRoot.childNodes).filter(
+    (node) => node.nodeType === Node.COMMENT_NODE,
+  );
+  for (const comment of comments) {
+    svgRoot.removeChild(comment);
+  }
+  Array.from(svgRoot.children).forEach((child) => {
+    removeSvgComments(child as HTMLElement);
+  });
+  return svgRoot;
+}
+
+function fillSvgCurrentColor(svgRoot: HTMLElement): HTMLElement {
+  svgRoot.querySelectorAll('path').forEach((el: Element) => {
+    el.setAttribute('fill', 'currentColor');
+  });
+  return svgRoot;
+}

src/presentation/components/Shared/Modal/ModalDialog.vue

@@ -10,9 +10,7 @@
         class="dialog__close-button"
         @click="hide"
       >
-        <font-awesome-icon
+        <AppIcon icon="xmark" />
-          :icon="['fas', 'times']"
-        />
       </div>
     </div>
   </ModalContainer>
@@ -20,11 +18,13 @@
 
 <script lang="ts">
 import { defineComponent, computed } from 'vue';
+import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
 import ModalContainer from './ModalContainer.vue';
 
 export default defineComponent({
   components: {
     ModalContainer,
+    AppIcon,
   },
   emits: {
     /* eslint-disable @typescript-eslint/no-unused-vars */

src/presentation/components/TheFooter/DownloadUrlList.vue

@@ -6,7 +6,7 @@
       'container-supported': hasCurrentOsDesktopVersion,
     }">
     <span class="description">
-      <font-awesome-icon class="description__icon" :icon="['fas', 'desktop']" />
+      <AppIcon class="description__icon" icon="desktop" />
       <span class="description__text">For desktop:</span>
     </span>
     <span class="urls">
@@ -21,6 +21,7 @@
 import { defineComponent, inject } from 'vue';
 import { OperatingSystem } from '@/domain/OperatingSystem';
 import { InjectionKeys } from '@/presentation/injectionSymbols';
+import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
 import DownloadUrlListItem from './DownloadUrlListItem.vue';
 
 const supportedOperativeSystems: readonly OperatingSystem[] = [
@@ -32,6 +33,7 @@ const supportedOperativeSystems: readonly OperatingSystem[] = [
 export default defineComponent({
   components: {
     DownloadUrlListItem,
+    AppIcon,
   },
   setup() {
     const { os: currentOs } = inject(InjectionKeys.useRuntimeEnvironment);

src/presentation/components/TheFooter/TheFooter.vue

@@ -3,7 +3,7 @@
     <div class="footer">
       <div class="footer__section">
         <span v-if="isDesktop" class="footer__section__item">
-          <font-awesome-icon class="icon" :icon="['fas', 'globe']" />
+          <AppIcon class="icon" icon="globe" />
           <span>
             Online version at <a :href="homepageUrl" target="_blank" rel="noopener noreferrer">{{ homepageUrl }}</a>
           </span>
@@ -15,24 +15,24 @@
       <div class="footer__section">
         <div class="footer__section__item">
           <a :href="feedbackUrl" target="_blank" rel="noopener noreferrer">
-            <font-awesome-icon class="icon" :icon="['far', 'smile']" />
+            <AppIcon class="icon" icon="face-smile" />
             <span>Feedback</span>
           </a>
         </div>
         <div class="footer__section__item">
           <a :href="repositoryUrl" target="_blank" rel="noopener noreferrer">
-            <font-awesome-icon class="icon" :icon="['fab', 'github']" />
+            <AppIcon class="icon" icon="github" />
             <span>Source Code</span>
           </a>
         </div>
         <div class="footer__section__item">
           <a :href="releaseUrl" target="_blank" rel="noopener noreferrer">
-            <font-awesome-icon class="icon" :icon="['fas', 'tag']" />
+            <AppIcon class="icon" icon="tag" />
             <span>v{{ version }}</span>
           </a>
         </div>
         <div class="footer__section__item">
-          <font-awesome-icon class="icon" :icon="['fas', 'user-secret']" />
+          <AppIcon class="icon" icon="user-secret" />
           <a @click="showPrivacyDialog()">Privacy</a>
         </div>
       </div>
@@ -48,6 +48,7 @@ import {
   defineComponent, ref, computed, inject,
 } from 'vue';
 import ModalDialog from '@/presentation/components/Shared/Modal/ModalDialog.vue';
+import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
 import { InjectionKeys } from '@/presentation/injectionSymbols';
 import DownloadUrlList from './DownloadUrlList.vue';
 import PrivacyPolicy from './PrivacyPolicy.vue';
@@ -57,6 +58,7 @@ export default defineComponent({
     ModalDialog,
     PrivacyPolicy,
     DownloadUrlList,
+    AppIcon,
   },
   setup() {
     const { info } = inject(InjectionKeys.useApplication);

src/presentation/components/TheHeader.vue

@@ -22,6 +22,7 @@ export default defineComponent({
     };
   },
 });
+
 </script>
 
 <style scoped lang="scss">

src/presentation/components/TheSearchBar.vue

@@ -7,7 +7,7 @@
       v-model="searchQuery"
     >
     <div class="icon-wrapper">
-      <font-awesome-icon :icon="['fas', 'search']" />
+      <AppIcon icon="magnifying-glass" />
     </div>
   </div>
 </template>
@@ -19,11 +19,13 @@ import {
 } from 'vue';
 import { InjectionKeys } from '@/presentation/injectionSymbols';
 import { NonCollapsing } from '@/presentation/components/Scripts/View/Cards/NonCollapsingDirective';
+import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
 import { IReadOnlyUserFilter } from '@/application/Context/State/Filter/IUserFilter';
 import { IFilterResult } from '@/application/Context/State/Filter/IFilterResult';
 import { IEventSubscription } from '@/infrastructure/Events/IEventSource';
 
 export default defineComponent({
+  components: { AppIcon },
   directives: {
     NonCollapsing,
   },

tests/integration/presentation/components/Scripts/View/Tree/Shared/Icon/UseSvgLoader.spec.ts

@@ -0,0 +1,20 @@
+import {
+  describe, it, expect,
+} from 'vitest';
+import { IconNames } from '@/presentation/components/Shared/Icon/IconName';
+import { useSvgLoader } from '@/presentation/components/Shared/Icon/UseSvgLoader';
+import { waitForValueChange } from '@tests/shared/WaitForValueChange';
+
+describe('useSvgLoader', () => {
+  describe('can load all SVGs', () => {
+    for (const iconName of IconNames) {
+      it(iconName, async () => {
+        // act
+        const { svgContent } = useSvgLoader(() => iconName);
+        await waitForValueChange(svgContent);
+        // assert
+        expect(svgContent.value).toBeTruthy();
+      });
+    }
+  });
+});

tests/shared/WaitForValueChange.ts

@@ -0,0 +1,17 @@
+import { WatchSource, watch } from 'vue';
+
+export function waitForValueChange<T>(valueWatcher: WatchSource<T>, timeoutMs = 2000): Promise<T> {
+  return new Promise<T>((resolve, reject) => {
+    const unwatch = watch(valueWatcher, (newValue, oldValue) => {
+      if (newValue !== oldValue) {
+        unwatch();
+        resolve(newValue);
+      }
+    }, { immediate: false });
+
+    setTimeout(() => {
+      unwatch();
+      reject(new Error('Timeout waiting for value to change.'));
+    }, timeoutMs);
+  });
+}

tests/unit/domain/Script.spec.ts

@@ -59,7 +59,7 @@ describe('Script', () => {
     describe('level', () => {
       it('cannot construct with invalid wrong value', () => {
         // arrange
-        const invalidValue: RecommendationLevel = 55;
+        const invalidValue: RecommendationLevel = 55 as never;
         const expectedError = 'invalid level';
         // act
         const construct = () => new ScriptBuilder()

tests/unit/domain/ScriptingDefinition.spec.ts

@@ -22,7 +22,7 @@ describe('ScriptingDefinition', () => {
     });
     it('throws if unknown', () => {
       // arrange
-      const unknownValue: ScriptingLanguage = 666;
+      const unknownValue: ScriptingLanguage = 666 as never;
       const errorMessage = `unsupported language: ${unknownValue}`;
       // act
       const act = () => new ScriptingDefinitionBuilder()

tests/unit/presentation/components/Scripts/View/Tree/TreeView/Rendering/Ordering/CollapseDepthOrderer.spec.ts

@@ -1,93 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { TreeNode } from '@/presentation/components/Scripts/View/Tree/TreeView/Node/TreeNode';
-import { CollapseDepthOrderer } from '@/presentation/components/Scripts/View/Tree/TreeView/Rendering/Ordering/CollapseDepthOrderer';
-import { HierarchyAccessStub } from '@tests/unit/shared/Stubs/HierarchyAccessStub';
-import { TreeNodeStateAccessStub } from '@tests/unit/shared/Stubs/TreeNodeStateAccessStub';
-import { TreeNodeStateDescriptorStub } from '@tests/unit/shared/Stubs/TreeNodeStateDescriptorStub';
-import { TreeNodeStub } from '@tests/unit/shared/Stubs/TreeNodeStub';
-
-describe('CollapseDepthOrderer', () => {
-  describe('orderNodes', () => {
-    it('should order by collapsed state and then by depth in', () => {
-      // arrange
-      const node1 = createNodeForOrder({
-        isExpanded: false,
-        depthInTree: 1,
-      });
-      const node2 = createNodeForOrder({
-        isExpanded: true,
-        depthInTree: 2,
-      });
-      const node3 = createNodeForOrder({
-        isExpanded: false,
-        depthInTree: 3,
-      });
-      const node4 = createNodeForOrder({
-        isExpanded: false,
-        depthInTree: 4,
-      });
-      const nodes = [node1, node2, node3, node4];
-      const expectedOrder = [node2, node1, node3, node4];
-      // act
-      const orderer = new CollapseDepthOrderer();
-      const orderedNodes = orderer.orderNodes(nodes);
-      // assert
-      expect(orderedNodes.map((node) => node.id)).to.deep
-        .equal(expectedOrder.map((node) => node.id));
-    });
-    it('should handle parent collapsed state', () => {
-      // arrange
-      const collapsedParent = createNodeForOrder({
-        isExpanded: false,
-        depthInTree: 0,
-      });
-      const childWithCollapsedParent = createNodeForOrder({
-        isExpanded: true,
-        depthInTree: 1,
-        parent: collapsedParent,
-      });
-      const deepExpandedNode = createNodeForOrder({
-        isExpanded: true,
-        depthInTree: 3,
-      });
-      const nodes = [childWithCollapsedParent, collapsedParent, deepExpandedNode];
-      const expectedOrder = [
-        deepExpandedNode, // comes first due to collapse parent of child
-        collapsedParent,
-        childWithCollapsedParent,
-      ];
-      // act
-      const orderer = new CollapseDepthOrderer();
-      const orderedNodes = orderer.orderNodes(nodes);
-      // assert
-      expect(orderedNodes.map((node) => node.id)).to.deep
-        .equal(expectedOrder.map((node) => node.id));
-    });
-  });
-});
-
-function createNodeForOrder(options: {
-  readonly isExpanded: boolean;
-  readonly depthInTree: number;
-  readonly parent?: TreeNode;
-}): TreeNode {
-  return new TreeNodeStub()
-    .withId([
-      `isExpanded: ${options.isExpanded}`,
-      `depthInTree: ${options.depthInTree}`,
-      ...(options.parent ? [`parent: ${options.parent.id}`] : []),
-    ].join(', '))
-    .withState(
-      new TreeNodeStateAccessStub()
-        .withCurrent(
-          new TreeNodeStateDescriptorStub()
-            .withVisibility(true)
-            .withExpansion(options.isExpanded),
-        ),
-    )
-    .withHierarchy(
-      new HierarchyAccessStub()
-        .withDepthInTree(options.depthInTree)
-        .withParent(options.parent),
-    );
-}

tests/unit/presentation/components/Scripts/View/Tree/TreeView/Rendering/Ordering/CollapsedParentOrderer.spec.ts

@@ -0,0 +1,165 @@
+import { describe, it, expect } from 'vitest';
+import { TreeNode } from '@/presentation/components/Scripts/View/Tree/TreeView/Node/TreeNode';
+import { CollapsedParentOrderer } from '@/presentation/components/Scripts/View/Tree/TreeView/Rendering/Ordering/CollapsedParentOrderer';
+import { HierarchyAccessStub } from '@tests/unit/shared/Stubs/HierarchyAccessStub';
+import { TreeNodeStateAccessStub } from '@tests/unit/shared/Stubs/TreeNodeStateAccessStub';
+import { TreeNodeStateDescriptorStub } from '@tests/unit/shared/Stubs/TreeNodeStateDescriptorStub';
+import { TreeNodeStub } from '@tests/unit/shared/Stubs/TreeNodeStub';
+
+describe('CollapsedParentOrderer', () => {
+  describe('orderNodes', () => {
+    const scenarios: ReadonlyArray<{
+      readonly description: string;
+      readonly nodes: TreeNode[];
+      readonly expectedOrderedNodes: TreeNode[];
+    }> = [
+      {
+        description: 'handles empty nodes list',
+        nodes: [],
+        expectedOrderedNodes: [],
+      },
+      (() => {
+        const expectedNode = createNodeForOrder({
+          isExpanded: false,
+        });
+        return {
+          description: 'handles single node list',
+          nodes: [expectedNode],
+          expectedOrderedNodes: [expectedNode],
+        };
+      })(),
+      (() => {
+        const node1 = createNodeForOrder({
+          isExpanded: false,
+        });
+        const node2 = createNodeForOrder({
+          isExpanded: true,
+        });
+        const node3 = createNodeForOrder({
+          isExpanded: true,
+        });
+        const node4 = createNodeForOrder({
+          isExpanded: false,
+        });
+        return {
+          description: 'orders by index ignoring self collapsed state',
+          nodes: [node1, node2, node3, node4],
+          expectedOrderedNodes: [node1, node2, node3, node4],
+        };
+      })(),
+      (() => {
+        const node1 = createNodeForOrder({
+          isExpanded: false,
+          parent: createNodeForOrder({ isExpanded: true }),
+        });
+        const node2 = createNodeForOrder({
+          isExpanded: true,
+          parent: createNodeForOrder({ isExpanded: true }),
+        });
+        const node3 = createNodeForOrder({
+          isExpanded: true,
+          parent: createNodeForOrder({ isExpanded: true }),
+        });
+        const node4 = createNodeForOrder({
+          isExpanded: false,
+          parent: createNodeForOrder({ isExpanded: true }),
+        });
+        return {
+          description: 'orders by index if all parents are expanded',
+          nodes: [node1, node2, node3, node4],
+          expectedOrderedNodes: [node1, node2, node3, node4],
+        };
+      })(),
+      (() => {
+        const node1 = createNodeForOrder({
+          isExpanded: true,
+          parent: createNodeForOrder({ isExpanded: false }),
+        });
+        const node2 = createNodeForOrder({
+          isExpanded: true,
+          parent: createNodeForOrder({ isExpanded: true }),
+        });
+        const node3 = createNodeForOrder({
+          isExpanded: true,
+        });
+        const node4 = createNodeForOrder({
+          isExpanded: true,
+          parent: createNodeForOrder({ isExpanded: false }),
+        });
+        return {
+          description: 'order by parent collapsed state then by index',
+          nodes: [node1, node2, node3, node4],
+          expectedOrderedNodes: [node2, node3, node1, node4],
+        };
+      })(),
+      (() => {
+        const collapsedNode = createNodeForOrder({
+          isExpanded: false,
+        });
+        const collapsedNodeChild = createNodeForOrder({
+          isExpanded: true,
+          parent: collapsedNode,
+        });
+        const collapsedNodeNestedChild = createNodeForOrder({
+          isExpanded: true,
+          parent: collapsedNodeChild,
+        });
+        const expandedNode = createNodeForOrder({
+          isExpanded: true,
+        });
+        const expandedNodeChild = createNodeForOrder({
+          isExpanded: true,
+          parent: expandedNode,
+        });
+        const expandedNodeNestedChild = createNodeForOrder({
+          isExpanded: true,
+          parent: expandedNodeChild,
+        });
+        return {
+          description: 'should handle deep parent collapsed state',
+          nodes: [
+            collapsedNode, collapsedNodeChild, collapsedNodeNestedChild,
+            expandedNode, expandedNodeChild, expandedNodeNestedChild,
+          ],
+          expectedOrderedNodes: [
+            collapsedNode, expandedNode, expandedNodeChild,
+            expandedNodeNestedChild, collapsedNodeChild, collapsedNodeNestedChild,
+          ],
+        };
+      })(),
+    ];
+    scenarios.forEach(({ description, nodes, expectedOrderedNodes }) => {
+      it(description, () => {
+        // act
+        const orderer = new CollapsedParentOrderer();
+        const orderedNodes = orderer.orderNodes(nodes);
+        // assert
+        expect(orderedNodes.map((node) => node.id)).to.deep
+          .equal(expectedOrderedNodes.map((node) => node.id));
+      });
+    });
+  });
+});
+
+function createNodeForOrder(options: {
+  readonly isExpanded: boolean;
+  readonly parent?: TreeNode;
+}): TreeNode {
+  return new TreeNodeStub()
+    .withId([
+      `isExpanded: ${options.isExpanded}`,
+      ...(options.parent ? [`parent: ${options.parent.id}`] : []),
+    ].join(', '))
+    .withState(
+      new TreeNodeStateAccessStub()
+        .withCurrent(
+          new TreeNodeStateDescriptorStub()
+            .withVisibility(true)
+            .withExpansion(options.isExpanded),
+        ),
+    )
+    .withHierarchy(
+      new HierarchyAccessStub()
+        .withParent(options.parent),
+    );
+}

tests/unit/presentation/components/Scripts/View/Tree/TreeView/Rendering/Scheduling/TimeoutDelayScheduler.spec.ts

@@ -1,6 +1,7 @@
 import { describe, it, expect } from 'vitest';
 import { TimeFunctions, TimeoutDelayScheduler } from '@/presentation/components/Scripts/View/Tree/TreeView/Rendering/Scheduling/TimeoutDelayScheduler';
 import { StubWithObservableMethodCalls } from '@tests/unit/shared/Stubs/StubWithObservableMethodCalls';
+import { createMockTimeout } from '@tests/unit/shared/Stubs/TimeoutStub';
 
 describe('TimeoutDelayScheduler', () => {
   describe('scheduleNext', () => {
@@ -56,7 +57,8 @@ describe('TimeoutDelayScheduler', () => {
         expect(setTimeoutCalls.length).toBe(2);
         const clearTimeoutCalls = timerStub.callHistory.filter((c) => c.methodName === 'clearTimeout');
         expect(clearTimeoutCalls.length).toBe(1);
-        const [actualId] = clearTimeoutCalls[0].args;
+        const [timeout] = clearTimeoutCalls[0].args;
+        const actualId = Number(timeout);
         expect(actualId).toBe(idOfFirstSetTimeoutCall);
       });
     });
@@ -78,6 +80,7 @@ class TimeFunctionsStub
       methodName: 'setTimeout',
       args: [callback, delayInMs],
     });
-    return this.callHistory.filter((c) => c.methodName === 'setTimeout').length as unknown as ReturnType<typeof setTimeout>;
+    const id = this.callHistory.filter((c) => c.methodName === 'setTimeout').length;
+    return createMockTimeout(id);
   }
 }

tests/unit/presentation/components/Shared/Icon/AppIcon.spec.ts

@@ -0,0 +1,100 @@
+import {
+  describe, it, expect,
+} from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
+import { IconName } from '@/presentation/components/Shared/Icon/IconName';
+import { UseSvgLoaderStub } from '@tests/unit/shared/Stubs/UseSvgLoaderStub';
+
+describe('AppIcon.vue', () => {
+  it('renders the correct SVG content based on the icon prop', async () => {
+    // arrange
+    const expectedIconName: IconName = 'magnifying-glass';
+    const expectedIconContent = '<svg id="expected-svg" />';
+    const svgLoaderStub = new UseSvgLoaderStub();
+    svgLoaderStub.withSvgIcon(expectedIconName, expectedIconContent);
+
+    // act
+    const wrapper = mountComponent({
+      iconPropValue: expectedIconName,
+      loader: svgLoaderStub,
+    });
+    await nextTick();
+
+    // assert
+    const actualSvg = extractAndNormalizeSvg(wrapper.html());
+    const expectedSvg = extractAndNormalizeSvg(expectedIconContent);
+    expect(actualSvg).to.equal(
+      expectedSvg,
+      `Expected:\n\n${expectedSvg}\n\nActual:\n\n${actualSvg}`,
+    );
+  });
+  it('updates the SVG content when the icon prop changes', async () => {
+    // arrange
+    const initialIconName: IconName = 'magnifying-glass';
+    const updatedIconName: IconName = 'copy';
+    const updatedIconContent = '<svg id="updated-svg" />';
+    const svgLoaderStub = new UseSvgLoaderStub();
+    svgLoaderStub.withSvgIcon(initialIconName, '<svg id="initial-svg" />');
+    svgLoaderStub.withSvgIcon(updatedIconName, updatedIconContent);
+
+    // act
+    const wrapper = mountComponent({
+      iconPropValue: initialIconName,
+      loader: svgLoaderStub,
+    });
+    await wrapper.setProps({ icon: updatedIconName });
+    await nextTick();
+
+    // assert
+    const actualSvg = extractAndNormalizeSvg(wrapper.html());
+    const expectedSvg = extractAndNormalizeSvg(updatedIconContent);
+    expect(actualSvg).to.equal(
+      expectedSvg,
+      `Expected:\n\n${expectedSvg}\n\nActual:\n\n${actualSvg}`,
+    );
+  });
+});
+
+function mountComponent(options: {
+  readonly iconPropValue: IconName,
+  readonly loader: UseSvgLoaderStub,
+}) {
+  return shallowMount(AppIcon, {
+    propsData: {
+      icon: options.iconPropValue,
+    },
+    provide: {
+      useSvgLoaderHook: options.loader.get(),
+    },
+  });
+}
+
+function extractAndNormalizeSvg(svgString: string): string {
+  const svg = extractSvg(svgString);
+  return normalizeSvg(svg);
+}
+
+function extractSvg(svgString: string): string {
+  const svgMatches = svgString.match(/<svg[\s\S]*?(<\/svg>|\/>)/g);
+  if (!svgMatches || svgMatches.length === 0) {
+    throw new Error(`No SVG found in: ${svgString}`);
+  }
+  if (svgMatches.length > 1) {
+    throw new Error(`Multiple SVGs found in: ${svgString}`);
+  }
+  const svgContent = svgMatches[0];
+  return svgContent;
+}
+
+function normalizeSvg(svgString: string): string {
+  return svgString
+    .replace(/\n/g, '') // Remove newlines
+    .replace(/\s+/g, ' ') // Replace all whitespace sequences with a single space
+    .replace(/> </g, '><') // Remove spaces between tags
+    .replace(/ <\//g, '</') // Remove spaces before closing tags
+    .replace(/\s+\/>/g, '/>') // Remove spaces before self-closing tag end
+    .replace(/<(\w+)([^>]*)><\/\1>/g, '<$1$2/>') // Convert to self-closing SVG tags
+    .trim(); // Remove leading and trailing spaces
+}

tests/unit/presentation/components/Shared/Icon/UseSvgLoader.spec.ts

@@ -0,0 +1,160 @@
+import {
+  describe, it, expect, beforeEach,
+} from 'vitest';
+import { ref } from 'vue';
+import { IconName } from '@/presentation/components/Shared/Icon/IconName';
+import { FileLoaders, clearIconCache, useSvgLoader } from '@/presentation/components/Shared/Icon/UseSvgLoader';
+import { waitForValueChange } from '@tests/shared/WaitForValueChange';
+
+describe('useSvgLoader', () => {
+  beforeEach(() => {
+    clearIconCache();
+  });
+  describe('SVG loading', () => {
+    it('renders initial SVG content based on icon name', async () => {
+      // arrange
+      const expectedIconName: IconName = 'magnifying-glass';
+      const expectedIconContent = '<svg id="expected-content"/>';
+      const { loaders, addIcon } = useSvgMock();
+      addIcon(expectedIconName, expectedIconContent);
+
+      // act
+      const { svgContent } = useSvgLoader(() => expectedIconName, loaders);
+      await waitForValueChange(svgContent);
+
+      // assert
+      expect(svgContent.value).to.equal(expectedIconContent);
+    });
+    it('updates SVG content when icon name changes', async () => {
+      // arrange
+      const initialIconName: IconName = 'magnifying-glass';
+      const iconName = ref<IconName>(initialIconName);
+      const initialIconContent = '<svg id="initial"/>';
+      const updatedIconName: IconName = 'copy';
+      const updatedIconContent = '<svg id="updated"/>';
+      const { addIcon, loaders } = useSvgMock();
+      addIcon(initialIconName, initialIconContent);
+      addIcon(updatedIconName, updatedIconContent);
+
+      // act
+      const { svgContent } = useSvgLoader(() => iconName.value, loaders);
+      await waitForValueChange(svgContent);
+      iconName.value = updatedIconName;
+      await waitForValueChange(svgContent);
+
+      // assert
+      expect(svgContent.value).to.equal(updatedIconContent);
+    });
+    it('lazy loads SVG icons and does not preload', async () => {
+      // arrange
+      const expectedIconName: IconName = 'magnifying-glass';
+      const unexpectedIconName: IconName = 'copy';
+      const { addIcon, getSvgFetchCount, loaders } = useSvgMock();
+      addIcon(expectedIconName);
+      addIcon(unexpectedIconName);
+
+      // act
+      const { svgContent } = useSvgLoader(() => expectedIconName, loaders);
+      await waitForValueChange(svgContent);
+
+      // assert
+      expect(getSvgFetchCount(expectedIconName)).to.equal(1);
+      expect(getSvgFetchCount(unexpectedIconName)).to.equal(0);
+    });
+    it('avoids loading same SVG content multiple times for concurrent calls', async () => {
+      // arrange
+      const expectedIconName: IconName = 'magnifying-glass';
+      const { addIcon, getSvgFetchCount, loaders } = useSvgMock();
+      addIcon(expectedIconName);
+
+      // act
+      const { svgContent: svgContent1 } = useSvgLoader(() => expectedIconName, loaders);
+      const { svgContent: svgContent2 } = useSvgLoader(() => expectedIconName, loaders);
+      await Promise.all([
+        waitForValueChange(svgContent1),
+        waitForValueChange(svgContent2),
+      ]);
+
+      // assert
+      expect(getSvgFetchCount(expectedIconName)).to.equal(1);
+    });
+  });
+  describe('SVG content manipulation', () => {
+    it('sets path fill color to currentColor', async () => {
+      // arrange
+      const expectedIconName: IconName = 'magnifying-glass';
+      const { addIcon, loaders } = useSvgMock();
+      addIcon(expectedIconName, '<svg id="svg-with-paths"><path /><path /></svg>');
+
+      // act
+      const { svgContent } = useSvgLoader(() => expectedIconName, loaders);
+      await waitForValueChange(svgContent);
+
+      // assert
+      const svgElement = new DOMParser().parseFromString(svgContent.value, 'image/svg+xml');
+      const pathElements = Array.from(svgElement.querySelectorAll('path'));
+      expect(pathElements).to.have.lengthOf(2, svgContent.value);
+      const fillAttributeValues = pathElements.map((el: Element) => el.getAttribute('fill'));
+      expect(fillAttributeValues).to.have.members(['currentColor', 'currentColor']);
+    });
+    it('removes comments from loaded SVG', async () => {
+      // arrange
+      const commentLine = '<!-- This is a comment -->';
+      const expectedIconName: IconName = 'magnifying-glass';
+      const { addIcon, loaders } = useSvgMock();
+      addIcon(expectedIconName, `<svg>${commentLine}<path></path></svg>`);
+
+      // act
+      const { svgContent } = useSvgLoader(() => expectedIconName, loaders);
+      await waitForValueChange(svgContent);
+
+      // assert
+      expect(svgContent.value).not.to.include(commentLine);
+    });
+  });
+  describe('icon cache management', () => {
+    it('reloads SVG content after clearing cache', async () => {
+      // arrange
+      const expectedIconName: IconName = 'magnifying-glass';
+      const { addIcon, getSvgFetchCount, loaders } = useSvgMock();
+      addIcon(expectedIconName);
+
+      // act
+      const { svgContent } = useSvgLoader(() => expectedIconName, loaders);
+      await waitForValueChange(svgContent);
+      expect(getSvgFetchCount(expectedIconName)).to.equal(1);
+      clearIconCache();
+      const { svgContent: newSvgContent } = useSvgLoader(() => expectedIconName, loaders);
+      await waitForValueChange(newSvgContent);
+
+      // assert
+      expect(getSvgFetchCount(expectedIconName)).to.equal(2);
+    });
+  });
+});
+
+function useSvgMock() {
+  const ICON_PATH_PREFIX = '/assets/icons/';
+  function getPath(iconName: IconName) {
+    return `${ICON_PATH_PREFIX}${iconName}.svg`;
+  }
+  const svgFetchCount = {} as Record<IconName, number>;
+  const loaders = {} as FileLoaders;
+  function addIcon(iconName: IconName, svgContent = '<svg id="stub" />') {
+    const path = getPath(iconName);
+    svgFetchCount[iconName] = 0;
+    loaders[path] = () => {
+      svgFetchCount[iconName] += 1;
+      return Promise.resolve(svgContent);
+    };
+  }
+  function getSvgFetchCount(iconName: IconName): number {
+    return svgFetchCount[iconName];
+  }
+  return {
+    loaders,
+    getSvgFetchCount,
+    getPath,
+    addIcon,
+  };
+}

tests/unit/presentation/components/Shared/Throttle.spec.ts

@@ -3,6 +3,7 @@ import { throttle, ITimer, TimeoutType } from '@/presentation/components/Shared/
 import { EventSource } from '@/infrastructure/Events/EventSource';
 import { IEventSubscription } from '@/infrastructure/Events/IEventSource';
 import { getAbsentObjectTestCases, itEachAbsentObjectValue } from '@tests/unit/shared/TestCases/AbsentTests';
+import { createMockTimeout } from '@tests/unit/shared/Stubs/TimeoutStub';
 
 describe('throttle', () => {
   describe('validates parameters', () => {
@@ -153,7 +154,7 @@ class TimerMock implements ITimer {
     });
     this.subscriptions.push(subscription);
     const id = this.subscriptions.length - 1;
-    return TimerMock.mockTimeout(id);
+    return createMockTimeout(id);
   }
 
   public clearTimeout(timeoutId: TimeoutType): void {
@@ -172,15 +173,4 @@ class TimerMock implements ITimer {
     this.currentTime = ms;
     this.timeChanged.notify(this.currentTime);
   }
-
-  private static mockTimeout(subscriptionId: number): TimeoutType {
-    const throwNodeSpecificCode = () => { throw new Error('node specific code'); };
-    return {
-      [Symbol.toPrimitive]: () => subscriptionId,
-      hasRef: throwNodeSpecificCode,
-      refresh: throwNodeSpecificCode,
-      ref: throwNodeSpecificCode,
-      unref: throwNodeSpecificCode,
-    };
-  }
 }

tests/unit/shared/Assertions/ExpectThrowsAsync.ts

@@ -4,12 +4,13 @@ export async function expectThrowsAsync(
   method: () => Promise<unknown>,
   errorMessage: string,
 ) {
-  let error: Error;
+  let error: Error | undefined;
   try {
     await method();
   } catch (err) {
     error = err;
   }
+  expect(error).toBeDefined();
   expect(error).to.be.an(Error.name);
   if (errorMessage) {
     expect(error.message).to.equal(errorMessage);

tests/unit/shared/Stubs/TimeoutStub.ts

@@ -0,0 +1,13 @@
+export function createMockTimeout(timerId: number): ReturnType<typeof setTimeout> {
+  const throwErrorForNodeOperation = () => {
+    throw new Error('node specific operation was called');
+  };
+  return {
+    [Symbol.toPrimitive]: () => timerId,
+    [Symbol.dispose]: throwErrorForNodeOperation, // Cancels the timeout in node
+    hasRef: throwErrorForNodeOperation,
+    refresh: throwErrorForNodeOperation,
+    ref: throwErrorForNodeOperation,
+    unref: throwErrorForNodeOperation,
+  };
+}

tests/unit/shared/Stubs/UseSvgLoaderStub.ts

@@ -0,0 +1,31 @@
+import {
+  WatchSource, computed, ref, watch,
+} from 'vue';
+import { IconName } from '@/presentation/components/Shared/Icon/IconName';
+import { useSvgLoader } from '@/presentation/components/Shared/Icon/UseSvgLoader';
+
+export class UseSvgLoaderStub {
+  private readonly icons = new Map<IconName, string>();
+
+  public withSvgIcon(name: IconName, svgContent: string): this {
+    this.icons.set(name, svgContent);
+    return this;
+  }
+
+  public get(): typeof useSvgLoader {
+    return (iconWatcher: WatchSource<IconName>) => {
+      const iconName = ref<IconName | undefined>();
+      watch(iconWatcher, (newIconName) => {
+        iconName.value = newIconName;
+      }, { immediate: true });
+      return {
+        svgContent: computed<string>(() => {
+          if (!iconName.value) {
+            return '';
+          }
+          return this.icons.get(iconName.value) || '';
+        }),
+      };
+    };
+  }
+}

tst.sh

@@ -0,0 +1,18 @@
+echo '--- Disable Location-Based Suggestions for Siri'
+if $(csrutil status | grep 'enabled'); then
+    echo 'SIP must be disabled'
+    exit 1
+fi
+
+original_file='/System/Library/LaunchAgents/com.apple.parsecd.plist'
+backup_file="/Users/tst/aq.disabled"
+if [ -f "$original_file" ]; then
+    sudo launchctl unload -w "$original_file" 2> /dev/null
+    if sudo mv "$original_file" "$backup_file"; then
+        echo 'Disabled successfully'
+    else
+        >&2 echo 'Failed to disable'
+    fi
+else
+    echo 'Already disabled'
+fi