Add image converter and dynamic colour mode changer

Author: Thavarshan

.eslintrc.json

@@ -1,18 +1,34 @@
 {
+  "root": true,
   "env": {
     "browser": true,
     "es6": true,
-    "node": true
+    "node": true,
+    "jest": true
   },
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:import/recommended",
     "plugin:import/electron",
-    "plugin:import/typescript"
+    "plugin:import/typescript",
+    "prettier",
+    "@vue/eslint-config-typescript",
+    "plugin:vue/vue3-essential",
+    "plugin:vuejs-accessibility/recommended"
   ],
-  "parser": "@typescript-eslint/parser",
+  "plugins": [
+    "prettier",
+    "vuejs-accessibility",
+    "@typescript-eslint"
+  ],
+  "parser": "vue-eslint-parser",
+  "parserOptions": {
+    "parser": "@typescript-eslint/parser",
+    "ecmaVersion": 2020,
+    "sourceType": "module"
+  },
   "rules": {
     "indent": [
       "error",
@@ -35,8 +51,50 @@
           "error"
         ]
       }
+    ],
+    "comma-dangle": [
+      "error",
+      "always-multiline"
+    ],
+    "space-before-function-paren": [
+      "warn",
+      {
+        "anonymous": "ignore",
+        "named": "never",
+        "asyncArrow": "always"
+      }
+    ],
+    "prettier/prettier": [
+      "error",
+      {
+        "endOfLine": "auto"
+      }
+    ],
+    "vue/html-indent": [
+      "error",
+      2
+    ],
+    "vue/multiline-html-element-content-newline": "off",
+    "vue/multi-word-component-names": "off",
+    "vue/max-attributes-per-line": 0,
+    "vue/require-default-prop": 0,
+    "vue/no-multiple-template-root": 0,
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      {
+        "varsIgnorePattern": "^_$",
+        "argsIgnorePattern": "^_$"
+      }
     ]
   },
+  "settings": {
+    "import/resolver": {
+      "typescript": {
+        "alwaysTryTypes": true,
+        "project": "./tsconfig.json"
+      }
+    }
+  },
   "ignorePatterns": [
     "*.test.ts"
   ],
@@ -48,6 +106,14 @@
       "env": {
         "jest": true
       }
+    },
+    {
+      "files": [
+        "*.vue"
+      ],
+      "rules": {
+        "max-len": "off"
+      }
     }
   ]
 }

.npmrc

@@ -0,0 +1 @@
+auto-install-peers = true

.prettierrc

@@ -5,5 +5,6 @@
   "printWidth": 120,
   "tabWidth": 2,
   "useTabs": false,
-  "endOfLine": "auto"
+  "endOfLine": "auto",
+  "spaceBeforeFunctionParen": false
 }

forge.config.ts

@@ -33,12 +33,12 @@ const config: ForgeConfig = {
     appBundleId: 'com.thavarshan.comet',
     appCategoryType: 'public.app-category.video',
     asar: {
-      unpack: "**/node_modules/{ffmpeg-static,ffprobe-static}/**",
+      unpack: '**/node_modules/{ffmpeg-static,ffprobe-static}/**',
     },
     win32metadata: {
       CompanyName: author.name,
       OriginalFilename: productName,
-    }
+    },
   },
   rebuildConfig: {},
   makers: [
@@ -91,7 +91,7 @@ const config: ForgeConfig = {
       name: '@electron-forge/maker-rpm',
       platforms: ['linux'],
       config: commonLinuxConfig,
-    }
+    },
   ],
   plugins: [
     new VitePlugin({
@@ -143,10 +143,10 @@ const config: ForgeConfig = {
         prerelease: false,
         draft: true,
         force: true,
-        generateReleaseNotes: true
-      }
-    }
-  ]
+        generateReleaseNotes: true,
+      },
+    },
+  ],
 };
 
 export default config;

forge.env.d.ts

@@ -1,6 +1,6 @@
 import { ColorMode } from '@/types/theme';
 
-export { }; // Make this a module
+export {}; // Make this a module
 
 declare global {
   // This allows TypeScript to pick up the magic constants that's auto-generated by Forge's Vite

jest.config.ts

@@ -14,45 +14,28 @@ const config: Config = {
   collectCoverageFrom: ['src/**/*.{ts,tsx}', '!**/*.d.ts', '!**/*constants.ts'],
   coveragePathIgnorePatterns: ['/node_modules/', '/tests/.*\\.(ts|js)$'],
   coverageReporters: ['json', 'html', 'lcov'],
-  moduleFileExtensions: [
-    "js",
-    "mjs",
-    "cjs",
-    "jsx",
-    "ts",
-    "tsx",
-    "json",
-    "node",
-    "vue"
-  ],
+  moduleFileExtensions: ['js', 'mjs', 'cjs', 'jsx', 'ts', 'tsx', 'json', 'node', 'vue'],
   moduleNameMapper: {
-    "^@/(.*)$": "<rootDir>/src/$1",
-    "^@vue/test-utils": "<rootDir>/node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js",
-    "radix-vue": "<rootDir>/node_modules/radix-vue/dist/radix-vue.cjs.js",
+    '^@/(.*)$': '<rootDir>/src/$1',
+    '^@vue/test-utils': '<rootDir>/node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js',
+    'radix-vue': '<rootDir>/node_modules/radix-vue/dist/radix-vue.cjs.js',
     '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
-    "^.+\\.(svg|png|jpg|jpeg|gif)$": "jest-transform-stub",
-
+    '^.+\\.(svg|png|jpg|jpeg|gif)$': 'jest-transform-stub',
   },
   resetMocks: false,
   resetModules: true,
   setupFilesAfterEnv: ['<rootDir>/tests/setup.ts'],
-  testEnvironment: "jsdom",
+  testEnvironment: 'jsdom',
   testEnvironmentOptions: {
-    customExportConditions: ["node", "node-addons"]
+    customExportConditions: ['node', 'node-addons'],
   },
-  testMatch: [
-    "**/__tests__/**/*.[jt]s?(x)",
-    "**/tests/**/?(*.)+(spec|test).[tj]s?(x)"
-  ],
+  testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/tests/**/?(*.)+(spec|test).[tj]s?(x)'],
   testPathIgnorePatterns: ['/.tmp/'],
   transform: {
-    "^.+\\.vue$": "@vue/vue3-jest",
-    "^.+\\.ts?$": "ts-jest"
+    '^.+\\.vue$': '@vue/vue3-jest',
+    '^.+\\.ts?$': 'ts-jest',
   },
-  transformIgnorePatterns: [
-    "/node_modules/",
-    "\\.pnp\\.[^\\/]+$"
-  ],
+  transformIgnorePatterns: ['/node_modules/', '\\.pnp\\.[^\\/]+$'],
 };
 
 export default config;