remove nginx config - replaced by caddy

* On every route change, update local variables from query params

* ResultSection is keyed to query to force re-render

* Resolved lint warnings

* replace webpack w/ vite

* update all imports with alias @ and scss

* vite environment variables, also typed

* upgraded eslint, defined new rules & added ignore comments

* resolved linting issues

* moved index.html to project root

* updated dockerfile w/ build stage before runtime image definition

* sign drone config

.drone.yml

@@ -25,7 +25,7 @@ steps:
         path: /cache
 
   - name: Frontend install
-    image: node:18.2.0
+    image: node:24.13.1
     commands:
       - node -v
       - yarn --version
@@ -42,8 +42,14 @@ steps:
       - name: cache
         path: /cache
 
+  - name: Lint project using eslint
+    image: node:24.13.1
+    commands:
+      - yarn lint
+    failure: ignore
+
   - name: Frontend build
-    image: node:18.2.0
+    image: node:24.13.1
     commands:
       - yarn build
     environment:
@@ -56,12 +62,6 @@ steps:
       SEASONED_DOMAIN:
         from_secret: SEASONED_DOMAIN
 
-  - name: Lint project using eslint
-    image: node:18.2.0
-    commands:
-      - yarn lint
-    failure: ignore
-
   - name: Build and publish docker image
     image: plugins/docker
     settings:
@@ -105,3 +105,8 @@ trigger:
     include:
       - push
       # - pull_request
+---
+kind: signature
+hmac: 6f10b2871d2bd6b5cd26ddf72796325991ba211ba1eb62b657baf993e9d549c8
+
+...

.env.example

@@ -1,4 +1,3 @@
-SEASONED_API=
-ELASTIC=
-ELASTIC_INDEX=shows,movies
-SEASONED_DOMAIN=
+SEASONED_API=http://localhost:31459
+ELASTIC_URL=http://elastic.local:9200/tmdb-movies-shows
+ELASTIC_API_KEY=

.eslintrc

@@ -1,31 +0,0 @@
-{
-  "root": true,
-  "parser": "vue-eslint-parser",
-  "parserOptions": {
-    "parser": "@typescript-eslint/parser",
-    "sourceType": "module"
-  },
-  "plugins": [
-    "@typescript-eslint"
-  ],
-  "extends": [
-    "@vue/eslint-config-airbnb",
-    "plugin:vue/recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:prettier/recommended",
-  ],
-  "rules": {
-    "vue/no-v-model-argument": "off",
-    "no-underscore-dangle": "off",
-    "vue/multi-word-component-names": "off",
-    "no-shadow": "off",
-    "@typescript-eslint/no-shadow": ["error"],
-  },
-  "settings": {
-    "import/resolver": {
-      webpack: {
-        config: "./webpack.config.js"
-      }
-    }
-  }
-}

.gitignore

@@ -4,6 +4,7 @@ src/config.json
 
 # Build directory
 dist/
+lib/
 
 # Node packages
 node_modules/

Caddyfile

@@ -0,0 +1,31 @@
+{
+	# Disable automatic HTTPS
+	auto_https off
+}
+
+:8080 {
+    root * {$DIST_PATH:/usr/share/caddy}
+
+    file_server
+
+    encode gzip zstd
+
+    try_files {path} {path}/ /index.html
+
+    # Cache favicons aggressively
+    @favicons path /favicons/*
+    header @favicons Cache-Control "public, max-age=31536000, immutable"
+
+    # Cache static assets based on MIME type
+    @static {
+        header Content-Type application/javascript*
+        header Content-Type text/css*
+        header Content-Type image/*
+        header Content-Type font/*
+        header Content-Type application/font-*
+        header Content-Type application/woff*
+        header Content-Type application/json*
+    }
+
+    header @static Cache-Control "public, max-age=2592000, immutable"
+}

Dockerfile

@@ -1,11 +1,38 @@
-FROM nginx:latest
+FROM node:24.13.1 AS build
 
-COPY public /usr/share/nginx/html
-COPY nginx.conf /etc/nginx/conf.d/default.conf.template
-COPY docker-entrypoint.sh /docker-entrypoint.d/05-docker-entrypoint.sh
+# Set the working directory for the build stage
+WORKDIR /app
 
-RUN chmod +x /docker-entrypoint.d/05-docker-entrypoint.sh
+# Install dependencies
+COPY package.json yarn.lock .
+RUN yarn install --frozen-lockfile
 
-EXPOSE 5000
+# Copy source files that the build depends on
+COPY index.html .
+COPY public/ public/
+COPY src/ src/
+COPY tsconfig.json vite.config.ts .
+
+ARG SEASONED_API=http://localhost:31459
+ENV VITE_SEASONED_API=$SEASONED_API
+
+ARG ELASTIC_URL=http://elastic.local:9200/tmdb-movies-shows
+ENV VITE_ELASTIC_URL=$ELASTIC_URL
+ARG ELASTIC_API_KEY=
+ENV VITE_ELASTIC_API_KEY=$ELASTIC_API_KEY
+
+RUN yarn build
+
+FROM caddy:2.11-alpine
+
+COPY Caddyfile /etc/caddy/Caddyfile
+
+# Copy static files
+COPY public /usr/share/caddy
+
+# Copy the static build from the previous stage
+COPY --from=build /app/dist /usr/share/caddy
+
+EXPOSE 8080
 
 LABEL org.opencontainers.image.source https://github.com/kevinmidboe/seasoned

docker-entrypoint.sh

@@ -1,9 +0,0 @@
-#!/bin/sh
-set -eu
-
-export SEASONED_API=${SEASONED_API:-http://localhost:31459}
-export SEASONED_DOMAIN=${SEASONED_DOMAIN:-localhost}
-
-envsubst '$SEASONED_API,$SEASONED_DOMAIN' < /etc/nginx/conf.d/default.conf.template > /etc/nginx/conf.d/default.conf
-
-exec "$@"

eslint.config.mjs

@@ -0,0 +1,67 @@
+import path from "node:path";
+
+import { includeIgnoreFile } from "@eslint/compat";
+import js from "@eslint/js";
+import { defineConfig } from "eslint/config";
+import { configs, plugins } from "eslint-config-airbnb-extended";
+import { rules as prettierConfigRules } from "eslint-config-prettier";
+import prettierPlugin from "eslint-plugin-prettier";
+
+const CUSTOM_RULES = {
+  "vue/no-v-model-argument": "off",
+  "no-underscore-dangle": "off",
+  "vue/multi-word-component-names": "off",
+  "no-shadow": "off",
+  "@typescript-eslint/no-shadow": ["error"]
+};
+
+const gitignorePath = path.resolve(".", ".gitignore");
+
+// ESLint recommended config
+const jsConfig = defineConfig([
+  {
+    name: "js/config",
+    ...js.configs.recommended
+  },
+  plugins.stylistic,
+  plugins.importX,
+  ...configs.base.recommended // Airbnb base recommended config
+]);
+
+// Node & Airbnb recommended config
+const nodeConfig = defineConfig([plugins.node, ...configs.node.recommended]);
+
+// Typescript & Airbnb base TS config
+const typescriptConfig = defineConfig([
+  plugins.typescriptEslint,
+  ...configs.base.typescript
+]);
+
+// Prettier config
+const prettierConfig = defineConfig([
+  {
+    name: "prettier/plugin/config",
+    plugins: {
+      prettier: prettierPlugin
+    }
+  },
+  {
+    name: "prettier/config",
+    rules: {
+      ...prettierConfigRules,
+      "prettier/prettier": "error"
+    }
+  }
+]);
+
+export default defineConfig([
+  // Ignore files and folders listed in .gitignore
+  includeIgnoreFile(gitignorePath),
+  ...jsConfig,
+  ...nodeConfig,
+  ...typescriptConfig,
+  ...prettierConfig,
+  {
+    rules: CUSTOM_RULES
+  }
+]);

index.html

@@ -24,7 +24,9 @@
     <meta name="theme-color" content="#081c24" />
   </head>
   <body>
-    <div id="entry"></div>
+    <div id="app"></div>
+
+    <script type="module" src="/src/main.ts"></script>
   </body>
 
   <script

nginx.conf

@@ -1,30 +0,0 @@
-server {
-  listen 5000 default_server;
-  listen [::]:5000 default_server;
-
-  server_name $SEASONED_DOMAIN;
-  root /usr/share/nginx/html;
-
-  gzip on;
-  gzip_types application/javascript;
-  gzip_min_length 1000;
-  gzip_static on;
-
-  location /favicons {
-    autoindex on;
-  }
-
-  location /dist {
-    add_header Content-Type application/javascript;
-    try_files $uri =404;
-  }
-
-  location /api {
-    proxy_pass $SEASONED_API;
-  }
-
-  location / {
-    try_files $uri $uri/ /index.html;
-    index index.html;
-  }
-}

package.json

@@ -5,57 +5,31 @@
   "author": "Kevin Midboe",
   "private": true,
   "scripts": {
-    "dev": "NODE_ENV=development webpack server",
-    "build": "yarn build:ts && yarn build:webpack",
-    "build:ts": "tsc --project tsconfig.json",
-    "build:webpack": "NODE_ENV=production webpack-cli build --progress",
-    "postbuild": "cp public/dist/index.html public/index.html",
-    "clean": "rm -r public/dist 2> /dev/null; rm public/index.html 2> /dev/null; rm -r lib 2> /dev/null",
+    "dev": "NODE_ENV=development vite",
+    "build": "yarn vite build",
+    "clean": "rm -r dist 2> /dev/null; rm public/index.html 2> /dev/null; rm -r lib 2> /dev/null",
     "start": "echo 'Start using docker, consult README'",
     "lint": "eslint src --ext .ts,.vue",
     "docs": "documentation build src/api.ts -f html -o docs/api && documentation build src/api.ts -f md -o docs/api.md"
   },
   "dependencies": {
     "chart.js": "3.9.1",
-    "connect-history-api-fallback": "2.0.0",
-    "dotenv": "^16.0.1",
-    "express": "4.18.1",
-    "vue": "3.2.37",
-    "vue-router": "4.1.3",
-    "vuex": "4.0.2"
+    "vue": "3.5.28",
+    "vue-router": "5.0.3",
+    "vuex": "4.1.0"
   },
   "devDependencies": {
-    "@babel/core": "7.18.10",
-    "@babel/plugin-transform-runtime": "7.18.10",
-    "@babel/preset-env": "7.18.10",
-    "@babel/runtime": "7.18.9",
-    "@types/express": "4.17.13",
-    "@types/node": "18.6.1",
-    "@typescript-eslint/eslint-plugin": "5.33.0",
-    "@typescript-eslint/parser": "5.33.0",
-    "@vue/cli": "5.0.8",
-    "@vue/cli-service": "5.0.8",
-    "@vue/eslint-config-airbnb": "6.0.0",
-    "babel-loader": "8.2.5",
-    "css-loader": "6.7.1",
-    "documentation": "13.2.5",
-    "eslint": "8.21.0",
-    "eslint-config-prettier": "8.5.0",
-    "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-vue": "9.3.0",
-    "eslint-plugin-vuejs-accessibility": "1.2.0",
-    "file-loader": "6.2.0",
-    "html-webpack-plugin": "5.5.0",
-    "prettier": "2.7.1",
+    "@eslint/compat": "^2.0.2",
+    "@eslint/js": "^10.0.1",
+    "@types/node": "^25.3.0",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "eslint": "^10.0.1",
+    "eslint-config-airbnb-extended": "^3.0.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.5",
+    "prettier": "^3.8.1",
     "sass": "1.54.3",
-    "sass-loader": "13.0.2",
-    "terser-webpack-plugin": "5.3.3",
-    "ts-loader": "9.3.1",
-    "typescript": "4.7.4",
-    "vue-loader": "17.0.0",
-    "webpack": "5.74.0",
-    "webpack-cli": "4.10.0",
-    "webpack-dev-server": "4.9.3"
+    "typescript": "5.9.3",
+    "vite": "^6.0.3"
   }
 }

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="app">
+  <div id="content">
     <!-- Header and hamburger navigation -->
     <NavigationHeader class="header" />
 
@@ -28,13 +28,13 @@
 </script>
 
 <style lang="scss">
-  @import "src/scss/main";
-  @import "src/scss/media-queries";
+  @import "scss/main";
+  @import "scss/media-queries";
 
-  #app {
+  #content {
     display: grid;
     grid-template-rows: var(--header-size);
-    grid-template-columns: var(--header-size) 1fr;
+    grid-template-columns: var(--header-size) 100%;
 
     @include mobile {
       grid-template-columns: 1fr;
@@ -58,6 +58,7 @@
 
     .content {
       display: grid;
+      width: calc(100% - var(--header-size));
       grid-column: 2 / 3;
       grid-row: 2;
       z-index: 5;

src/api.ts

@@ -1,11 +1,13 @@
+/* eslint-disable n/no-unsupported-features/node-builtins */
 import { IList, IMediaCredits, IPersonCredits } from "./interfaces/IList";
 import type {
   IRequestStatusResponse,
   IRequestSubmitResponse
 } from "./interfaces/IRequestResponse";
 
-const { ELASTIC, ELASTIC_INDEX } = process.env;
-const API_HOSTNAME = window.location.origin;
+const API_HOSTNAME = import.meta.env.VITE_SEASONED_API;
+const ELASTIC_URL = import.meta.env.VITE_ELASTIC_URL;
+const ELASTIC_API_KEY = import.meta.env.VITE_ELASTIC_API_KEY;
 
 // - - - TMDB - - -
 
@@ -334,7 +336,11 @@ const register = (username, password) => {
     });
 };
 
-const login = (username, password, throwError = false) => {
+const login = async (
+  username: string,
+  password: string,
+  throwError = false
+) => {
   const url = new URL("/api/v1/user/login", API_HOSTNAME);
   const options = {
     method: "POST",
@@ -351,7 +357,7 @@ const login = (username, password, throwError = false) => {
   });
 };
 
-const logout = (throwError = false) => {
+const logout = async (throwError = false) => {
   const url = new URL("/api/v1/user/logout", API_HOSTNAME);
   const options = { method: "POST" };
 
@@ -430,9 +436,13 @@ const unlinkPlexAccount = () => {
 
 // - - - User graphs - - -
 
-const fetchGraphData = (urlPath, days, chartType) => {
+const fetchGraphData = async (
+  urlPath: string,
+  days: number,
+  chartType: string
+) => {
   const url = new URL(`/api/v1/user/${urlPath}`, API_HOSTNAME);
-  url.searchParams.append("days", days);
+  url.searchParams.append("days", String(days));
   url.searchParams.append("y_axis", chartType);
 
   return fetch(url.href).then(resp => {
@@ -447,7 +457,7 @@ const fetchGraphData = (urlPath, days, chartType) => {
 
 // - - - Random emoji - - -
 
-const getEmoji = () => {
+const getEmoji = async () => {
   const url = new URL("/api/v1/emoji", API_HOSTNAME);
 
   return fetch(url.href)
@@ -468,33 +478,59 @@ const getEmoji = () => {
  * @param {string} query
  * @returns {object} List of movies and shows matching query
  */
+
 const elasticSearchMoviesAndShows = (query, count = 22) => {
-  const url = new URL(`${ELASTIC_INDEX}/_search`, ELASTIC);
+  const url = new URL(`${ELASTIC_URL}/_search`);
 
   const body = {
     sort: [{ popularity: { order: "desc" } }, "_score"],
+    size: count,
     query: {
-      bool: {
-        should: [
-          {
-            match_phrase_prefix: {
-              original_name: query
-            }
-          },
-          {
-            match_phrase_prefix: {
-              original_title: query
-            }
-          }
-        ]
+      multi_match: {
+        query,
+        fields: ["name", "original_title", "original_name"],
+        type: "phrase_prefix",
+        tie_breaker: 0.3
       }
     },
-    size: count
+    suggest: {
+      text: query,
+      "person-suggest": {
+        prefix: query,
+        completion: {
+          field: "name.completion",
+          fuzzy: {
+            fuzziness: "AUTO"
+          }
+        }
+      },
+      "movie-suggest": {
+        prefix: query,
+        completion: {
+          field: "original_title.completion",
+          fuzzy: {
+            fuzziness: "AUTO"
+          }
+        }
+      },
+      "show-suggest": {
+        prefix: query,
+        completion: {
+          field: "original_name.completion",
+          fuzzy: {
+            fuzziness: "AUTO"
+          }
+        }
+      }
+    }
   };
 
   const options = {
     method: "POST",
-    headers: { "Content-Type": "application/json" },
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `ApiKey ${ELASTIC_API_KEY}`
+    },
     body: JSON.stringify(body)
   };
 

src/components/CastList.vue

@@ -12,7 +12,7 @@
 
 <script setup lang="ts">
   import { defineProps } from "vue";
-  import CastListItem from "src/components/CastListItem.vue";
+  import CastListItem from "@/components/CastListItem.vue";
   import type {
     IMovie,
     IShow,

src/components/CastListItem.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script setup lang="ts">
-  import { defineProps, computed } from "vue";
+  import { computed } from "vue";
   import { useStore } from "vuex";
   import type { ICast, ICrew, IMovie, IShow } from "../interfaces/IList";
 

src/components/Graph.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, defineProps, onMounted, watch } from "vue";
+  import { ref, onMounted, watch } from "vue";
   import {
     Chart,
     LineElement,

src/components/LandingBanner.vue

@@ -100,8 +100,8 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
+  @import "scss/variables";
+  @import "scss/media-queries";
 
   header {
     width: 100%;

src/components/PageHeader.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script setup lang="ts">
-  import { defineProps, computed } from "vue";
+  import { computed } from "vue";
 
   interface Props {
     title: string;
@@ -47,9 +47,9 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
-  @import "src/scss/main";
+  @import "scss/variables";
+  @import "scss/media-queries";
+  @import "scss/main";
 
   header {
     width: 100%;

src/components/Popup.vue

@@ -46,7 +46,7 @@
     let _type: MediaTypes;
 
     const params = new URLSearchParams(window.location.search);
-    params.forEach((value, key) => {
+    params.forEach((_, key) => {
       if (
         key !== MediaTypes.Movie &&
         key !== MediaTypes.Show &&
@@ -90,8 +90,8 @@
 </script>
 
 <style lang="scss">
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
+  @import "scss/variables";
+  @import "scss/media-queries";
 
   .movie-popup {
     position: fixed;

src/components/ResultsList.vue

@@ -17,7 +17,6 @@
 </template>
 
 <script setup lang="ts">
-  import { defineProps } from "vue";
   import ResultsListItem from "@/components/ResultsListItem.vue";
   import type { ListResults } from "../interfaces/IList";
 
@@ -35,8 +34,8 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/media-queries";
-  @import "src/scss/main";
+  @import "scss/media-queries";
+  @import "scss/main";
 
   .no-results {
     width: 100%;

src/components/ResultsListItem.vue

@@ -35,7 +35,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, computed, defineProps, onMounted } from "vue";
+  import { ref, computed, onMounted } from "vue";
   import { useStore } from "vuex";
   import type { Ref } from "vue";
   import type { IMovie, IShow, IPerson } from "../interfaces/IList";
@@ -111,9 +111,9 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
-  @import "src/scss/main";
+  @import "scss/variables";
+  @import "scss/media-queries";
+  @import "scss/main";
 
   .movie-item {
     padding: 15px;

src/components/ResultsSection.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script setup lang="ts">
-  import { defineProps, ref, computed, onMounted } from "vue";
+  import { ref, computed, onMounted } from "vue";
   import PageHeader from "@/components/PageHeader.vue";
   import ResultsList from "@/components/ResultsList.vue";
   import SeasonedButton from "@/components/ui/SeasonedButton.vue";
@@ -172,7 +172,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/media-queries";
+  @import "scss/media-queries";
 
   .resultSection {
     background-color: var(--background-color);

src/components/header/AutocompleteDropdown.vue

@@ -10,6 +10,7 @@
       >
         <IconMovie v-if="result.type == 'movie'" class="type-icon" />
         <IconShow v-if="result.type == 'show'" class="type-icon" />
+        <IconPerson v-if="result.type == 'person'" class="type-icon" />
         <span class="title">{{ result.title }}</span>
       </li>
 
@@ -23,18 +24,24 @@
   </transition>
 </template>
 
+<!--
+Searches Elasticsearch for results based on changes to `query`.
+-->
+
 <script setup lang="ts">
+  import type { Ref } from "vue";
   import { ref, watch, defineProps } from "vue";
   import { useStore } from "vuex";
-  import IconMovie from "@/icons/IconMovie.vue";
-  import IconShow from "@/icons/IconShow.vue";
-  import type { Ref } from "vue";
+  import IconMovie from "../../icons/IconMovie.vue";
+  import IconShow from "../../icons/IconShow.vue";
   import { elasticSearchMoviesAndShows } from "../../api";
   import { MediaTypes } from "../../interfaces/IList";
-  import { Index } from "../../interfaces/IAutocompleteSearch";
   import type {
     IAutocompleteResult,
-    IAutocompleteSearchResults
+    IAutocompleteSearchResults,
+    Hit,
+    Option,
+    Source
   } from "../../interfaces/IAutocompleteSearch";
 
   interface Props {
@@ -48,6 +55,7 @@
   }
 
   const numberOfResults = 10;
+  let timeoutId = null;
   const props = defineProps<Props>();
   const emit = defineEmits<Emit>();
   const store = useStore();
@@ -55,23 +63,9 @@
   const searchResults: Ref<Array<IAutocompleteResult>> = ref([]);
   const keyboardNavigationIndex: Ref<number> = ref(0);
 
-  watch(
-    () => props.query,
-    newQuery => {
-      if (newQuery?.length > 0)
-        fetchAutocompleteResults(); /* eslint-disable-line no-use-before-define */
-    }
-  );
-
-  function openPopup(result) {
-    if (!result.id || !result.type) return;
-
-    store.dispatch("popup/open", { ...result });
-  }
-
-  function removeDuplicates(_searchResults) {
+  function removeDuplicates(_searchResults: Array<IAutocompleteResult>) {
     const filteredResults = [];
-    _searchResults.forEach(result => {
+    _searchResults.forEach((result: IAutocompleteResult) => {
       if (result === undefined) return;
       const numberOfDuplicates = filteredResults.filter(
         filterItem => filterItem.id === result.id
@@ -86,34 +80,43 @@
     return filteredResults;
   }
 
-  function elasticIndexToMediaType(index: Index): MediaTypes {
-    if (index === Index.Movies) return MediaTypes.Movie;
-    if (index === Index.Shows) return MediaTypes.Show;
+  function convertMediaType(type: string | null): MediaTypes | null {
+    if (type === "movie") return MediaTypes.Movie;
+
+    if (type === "tv_series") return MediaTypes.Show;
+
+    if (type === "person") return MediaTypes.Person;
 
     return null;
   }
 
   function parseElasticResponse(elasticResponse: IAutocompleteSearchResults) {
-    const data = elasticResponse.hits.hits;
+    const elasticResults = elasticResponse.hits.hits;
+    const suggestResults = elasticResponse.suggest["movie-suggest"][0].options;
+
+    let data: Array<Source> = elasticResults.map((el: Hit) => el._source);
+    data = data.concat(suggestResults.map((el: Option) => el._source));
+
+    //    data = data.concat(elasticResponse['suggest']['person-suggest'][0]['options'])
+    //    data = data.concat(elasticResponse['suggest']['show-suggest'][0]['options'])
+    data = data.sort((a, b) => (a.popularity < b.popularity ? 1 : -1));
 
     const results: Array<IAutocompleteResult> = [];
 
     data.forEach(item => {
-      if (!Object.values(Index).includes(item._index)) {
-        return;
-      }
-
       results.push({
-        title: item._source?.original_name || item._source.original_title,
-        id: item._source.id,
-        adult: item._source.adult,
-        type: elasticIndexToMediaType(item._index)
+        title: item?.original_name || item?.original_title || item?.name,
+        id: item.id,
+        adult: item.adult,
+        type: convertMediaType(item?.type)
       });
     });
 
-    return removeDuplicates(results).map((el, index) => {
-      return { ...el, index };
-    });
+    return removeDuplicates(results)
+      .map((el, index) => {
+        return { ...el, index };
+      })
+      .slice(0, 10);
   }
 
   function fetchAutocompleteResults() {
@@ -123,20 +126,43 @@
     elasticSearchMoviesAndShows(props.query, numberOfResults)
       .then(elasticResponse => parseElasticResponse(elasticResponse))
       .then(_searchResults => {
+        console.log(_searchResults);
         emit("update:results", _searchResults);
         searchResults.value = _searchResults;
       });
   }
 
+  const debounce = (callback: () => void, wait: number) => {
+    window.clearTimeout(timeoutId);
+    timeoutId = window.setTimeout(() => {
+      callback();
+    }, wait);
+  };
+
+  watch(
+    () => props.query,
+    newQuery => {
+      if (newQuery?.length > 0) {
+        debounce(fetchAutocompleteResults, 150);
+      }
+    }
+  );
+
+  function openPopup(result: IAutocompleteResult) {
+    if (!result.id || !result.type) return;
+
+    store.dispatch("popup/open", { ...result });
+  }
+
   // on load functions
   fetchAutocompleteResults();
   // end on load functions
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
-  @import "src/scss/main";
+  @import "scss/variables";
+  @import "scss/media-queries";
+  @import "scss/main";
   $sizes: 22;
 
   @for $i from 0 through $sizes {
@@ -214,7 +240,9 @@
     cursor: pointer;
     white-space: nowrap;
 
-    transition: color 0.1s ease, fill 0.4s ease;
+    transition:
+      color 0.1s ease,
+      fill 0.4s ease;
 
     span {
       overflow-x: hidden;

src/components/header/NavigationHeader.vue

@@ -61,8 +61,8 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
+  @import "scss/variables";
+  @import "scss/media-queries";
 
   .spacer {
     @include mobile-only {

src/components/header/NavigationIcon.vue

@@ -16,7 +16,7 @@
 
 <script setup lang="ts">
   import { useStore } from "vuex";
-  import { computed, defineProps } from "vue";
+  import { computed } from "vue";
   import type INavigationIcon from "../../interfaces/INavigationIcon";
 
   interface Props {
@@ -37,7 +37,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/media-queries";
+  @import "scss/media-queries";
 
   .navigation-link {
     display: grid;
@@ -47,8 +47,13 @@
     padding: 1rem 0.15rem;
     text-align: center;
     background-color: var(--background-color-secondary);
-    transition: transform 0.3s ease, color 0.3s ease, stoke 0.3s ease,
-      fill 0.3s ease, background-color 0.5s ease;
+    transition:
+      transform 0.3s ease,
+      color 0.3s ease,
+      stoke 0.3s ease,
+      fill 0.3s ease,
+      background-color 0.5s ease;
+    transition: all 0.3s ease;
 
     &:hover {
       transform: scale(1.05);

src/components/header/NavigationIcons.vue

@@ -77,7 +77,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/media-queries";
+  @import "scss/media-queries";
 
   .navigation-icons {
     display: grid;

src/components/header/SearchInput.vue

@@ -42,15 +42,28 @@
   </div>
 </template>
 
+<!-- Handles constructing markup and state for dropdown.
+
+Markup:
+Consist of: search icon, input & close button.
+
+State:
+State is passing input variable `query` to dropdown and carrying state
+of selected dropdown element as variable `index`. This is because
+index is manipulated based on arrow key events from same input as
+the `query`.
+-->
+
 <script setup lang="ts">
+  import type { Ref } from "vue";
   import { ref, computed } from "vue";
   import { useStore } from "vuex";
   import { useRouter, useRoute } from "vue-router";
-  import AutocompleteDropdown from "@/components/header/AutocompleteDropdown.vue";
-  import IconSearch from "@/icons/IconSearch.vue";
-  import IconClose from "@/icons/IconClose.vue";
-  import type { Ref } from "vue";
+  import AutocompleteDropdown from "./AutocompleteDropdown.vue";
+  import IconSearch from "../../icons/IconSearch.vue";
+  import IconClose from "../../icons/IconClose.vue";
   import type { MediaTypes } from "../../interfaces/IList";
+import { IAutocompleteResult } from "../../interfaces/IAutocompleteSearch";
 
   interface ISearchResult {
     title: string;
@@ -66,7 +79,7 @@
   const query: Ref<string> = ref(null);
   const disabled: Ref<boolean> = ref(false);
   const dropdownIndex: Ref<number> = ref(-1);
-  const dropdownResults: Ref<ISearchResult[]> = ref([]);
+  const dropdownResults: Ref<IAutocompleteResult[]> = ref([]);
   const inputIsActive: Ref<boolean> = ref(false);
   const inputElement: Ref<HTMLInputElement> = ref(null);
 
@@ -85,8 +98,9 @@
     query.value = decodeURIComponent(params.get("query"));
   }
 
-  const { ELASTIC } = process.env;
-  if (ELASTIC === undefined || ELASTIC === "") {
+  const ELASTIC_URL = import.meta.env.VITE_ELASTIC_URL;
+  const ELASTIC_API_KEY = import.meta.env.VITE_ELASTIC_API_KEY;
+  if (!ELASTIC_URL || !ELASTIC_API_KEY) {
     disabled.value = true;
   }
 
@@ -145,6 +159,7 @@
   function handleSubmit() {
     if (!query.value || query.value.length === 0) return;
 
+    // if index is set, navigation has happened. Open popup else search
     if (dropdownIndex.value >= 0) {
       const resultItem = dropdownResults.value[dropdownIndex.value];
 
@@ -165,9 +180,9 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
-  @import "src/scss/main";
+  @import "scss/variables";
+  @import "scss/media-queries";
+  @import "scss/main";
 
   .close-icon {
     position: absolute;

src/components/popup/ActionButton.vue

@@ -10,8 +10,6 @@
 </template>
 
 <script setup lang="ts">
-  import { defineProps, defineEmits } from "vue";
-
   interface Props {
     active?: boolean;
     disabled?: boolean;
@@ -26,7 +24,7 @@
 </script>
 
 <style lang="scss">
-  @import "src/scss/media-queries";
+  @import "scss/media-queries";
 
   li.sidebar-list-element {
     display: flex;

src/components/popup/Description.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, defineProps, onMounted } from "vue";
+  import { ref, onMounted } from "vue";
   import type { Ref } from "vue";
   import IconArrowDown from "../../icons/IconArrowDown.vue";
 
@@ -27,7 +27,6 @@
   const overflow: Ref<boolean> = ref(false);
   const descriptionElement: Ref<HTMLElement> = ref(null);
 
-  // eslint-disable-next-line no-undef
   function removeElements(elems: NodeListOf<Element>) {
     elems.forEach(el => el.remove());
   }
@@ -67,7 +66,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/media-queries";
+  @import "scss/media-queries";
 
   .movie-description {
     font-weight: 300;

src/components/popup/Detail.vue

@@ -8,8 +8,6 @@
 </template>
 
 <script setup lang="ts">
-  import { defineProps } from "vue";
-
   interface Props {
     title: string;
     detail?: string | number;
@@ -19,7 +17,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/media-queries";
+  @import "scss/media-queries";
 
   .movie-detail {
     margin-bottom: 20px;

src/components/popup/Movie.vue

@@ -165,25 +165,24 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, computed, defineProps, onMounted } from "vue";
+  import { ref, computed, onMounted } from "vue";
   import { useStore } from "vuex";
 
   // import img from "@/directives/v-image";
-  import IconProfile from "@/icons/IconProfile.vue";
-  import IconThumbsUp from "@/icons/IconThumbsUp.vue";
-  import IconThumbsDown from "@/icons/IconThumbsDown.vue";
-  import IconInfo from "@/icons/IconInfo.vue";
-  import IconRequest from "@/icons/IconRequest.vue";
-  import IconRequested from "@/icons/IconRequested.vue";
-  import IconBinoculars from "@/icons/IconBinoculars.vue";
-  import IconPlay from "@/icons/IconPlay.vue";
-  import TorrentList from "@/components/torrent/TruncatedTorrentResults.vue";
-  import CastList from "@/components/CastList.vue";
-  import Detail from "@/components/popup/Detail.vue";
-  import ActionButton from "@/components/popup/ActionButton.vue";
-  import Description from "@/components/popup/Description.vue";
-  import LoadingPlaceholder from "@/components/ui/LoadingPlaceholder.vue";
-  import type { Ref } from "vue";
+  import IconProfile from "../../icons/IconProfile.vue";
+  import IconThumbsUp from "../../icons/IconThumbsUp.vue";
+  import IconThumbsDown from "../../icons/IconThumbsDown.vue";
+  import IconInfo from "../../icons/IconInfo.vue";
+  import IconRequest from "../../icons/IconRequest.vue";
+  import IconRequested from "../../icons/IconRequested.vue";
+  import IconBinoculars from "../../icons/IconBinoculars.vue";
+  import IconPlay from "../../icons/IconPlay.vue";
+  import TorrentList from "../torrent/TruncatedTorrentResults.vue";
+  import CastList from "../CastList.vue";
+  import Detail from "./Detail.vue";
+  import ActionButton from "./ActionButton.vue";
+  import Description from "./Description.vue";
+  import LoadingPlaceholder from "../ui/LoadingPlaceholder.vue";
   import type {
     IMovie,
     IShow,
@@ -342,10 +341,10 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/loading-placeholder";
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
-  @import "src/scss/main";
+  @import "scss/loading-placeholder";
+  @import "scss/variables";
+  @import "scss/media-queries";
+  @import "scss/main";
 
   header {
     $duration: 0.2s;

src/components/popup/Person.vue

@@ -70,7 +70,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, computed, defineProps } from "vue";
+  import { ref, computed } from "vue";
   import CastList from "@/components/CastList.vue";
   import Detail from "@/components/popup/Detail.vue";
   import Description from "@/components/popup/Description.vue";
@@ -165,10 +165,10 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/loading-placeholder";
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
-  @import "src/scss/main";
+  @import "scss/loading-placeholder";
+  @import "scss/variables";
+  @import "scss/media-queries";
+  @import "scss/main";
 
   section.person {
     overflow: hidden;

src/components/profile/ChangePassword.vue

@@ -85,7 +85,7 @@
     try {
       validate();
     } catch (error) {
-      console.log("not valid!"); // eslint-disable-line no-console
+      console.log("not valid! error:", error); // eslint-disable-line no-console
     }
 
     // const body: ResetPasswordPayload = {

src/components/profile/LinkPlexAccount.vue

@@ -43,7 +43,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, computed, defineEmits } from "vue";
+  import { ref, computed } from "vue";
   import { useStore } from "vuex";
   import seasonedInput from "@/components/ui/SeasonedInput.vue";
   import SeasonedButton from "@/components/ui/SeasonedButton.vue";

src/components/torrent/TorrentSearchResults.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, watch, inject, defineProps } from "vue";
+  import { ref, watch, inject } from "vue";
   import { useStore } from "vuex";
   import Loader from "@/components/ui/Loader.vue";
   import TorrentTable from "@/components/torrent/TorrentTable.vue";
@@ -102,9 +102,9 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
-  @import "src/scss/elements";
+  @import "scss/variables";
+  @import "scss/media-queries";
+  @import "scss/elements";
 
   h2 {
     font-size: 20px;
@@ -115,13 +115,8 @@
     margin: 1rem 0;
   }
 
-  .container {
-    background-color: $background-color;
-  }
-
   .no-results {
     display: flex;
-    padding-bottom: 2rem;
     justify-content: center;
     flex-direction: column;
     width: 100%;

src/components/torrent/TorrentTable.vue

@@ -52,7 +52,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, defineProps, defineEmits } from "vue";
+  import { ref } from "vue";
   import IconMagnet from "@/icons/IconMagnet.vue";
   import type { Ref } from "vue";
   import { sortableSize } from "../../utils";
@@ -155,9 +155,9 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
-  @import "src/scss/elements";
+  @import "scss/variables";
+  @import "scss/media-queries";
+  @import "scss/elements";
 
   table {
     border-spacing: 0;

src/components/torrent/TruncatedTorrentResults.vue

@@ -25,8 +25,8 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, defineProps } from "vue";
   import { useRouter } from "vue-router";
+  import { ref, defineProps, computed } from "vue";
   import TorrentSearchResults from "@/components/torrent/TorrentSearchResults.vue";
   import SeasonedButton from "@/components/ui/SeasonedButton.vue";
   import IconArrowDown from "@/icons/IconArrowDown.vue";

src/components/ui/Hamburger.vue

@@ -23,7 +23,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/media-queries";
+  @import "scss/media-queries";
 
   .nav__hamburger {
     display: block;

src/components/ui/Loader.vue

@@ -12,7 +12,6 @@
 --></template>
 
 <script setup lang="ts">
-  import { defineProps } from "vue";
   import LoaderHeightType from "../../interfaces/ILoader";
 
   interface Props {
@@ -23,7 +22,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
+  @import "scss/variables";
 
   .loader {
     display: flex;

src/components/ui/LoadingPlaceholder.vue

@@ -10,8 +10,6 @@
 </template>
 
 <script setup lang="ts">
-  import { defineProps } from "vue";
-
   interface Props {
     count?: number;
     lineClass?: string;
@@ -22,5 +20,5 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/loading-placeholder";
+  @import "scss/loading-placeholder";
 </style>

src/components/ui/SeasonedButton.vue

@@ -9,8 +9,6 @@
 </template>
 
 <script setup lang="ts">
-  import { defineProps, defineEmits } from "vue";
-
   interface Props {
     active?: boolean;
     fullWidth?: boolean;
@@ -25,8 +23,8 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
+  @import "scss/variables";
+  @import "scss/media-queries";
 
   button {
     display: inline-block;
@@ -44,7 +42,10 @@
     background: $background-color-secondary;
     cursor: pointer;
     outline: none;
-    transition: background 0.5s ease, color 0.5s ease, border-color 0.5s ease;
+    transition:
+      background 0.5s ease,
+      color 0.5s ease,
+      border-color 0.5s ease;
 
     @include desktop {
       font-size: 0.8rem;

src/components/ui/SeasonedInput.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, computed, defineProps, defineEmits } from "vue";
+  import { ref, computed } from "vue";
   import IconKey from "@/icons/IconKey.vue";
   import IconEmail from "@/icons/IconEmail.vue";
   import IconBinoculars from "@/icons/IconBinoculars.vue";
@@ -74,8 +74,8 @@
   }
 </script>
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
+  @import "scss/variables";
+  @import "scss/media-queries";
 
   .group {
     display: flex;

src/components/ui/SeasonedMessages.vue

@@ -22,7 +22,6 @@
 </template>
 
 <script setup lang="ts">
-  import { defineProps, defineEmits } from "vue";
   import type {
     ErrorMessageTypes,
     IErrorMessage
@@ -65,8 +64,8 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
+  @import "scss/variables";
+  @import "scss/media-queries";
 
   .fade-active {
     transition: opacity 0.4s;

src/components/ui/ToggleButton.vue

@@ -13,8 +13,6 @@
 </template>
 
 <script setup lang="ts">
-  import { defineProps, defineEmits } from "vue";
-
   interface Props {
     options: string[];
     selected?: string;
@@ -35,7 +33,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
+  @import "scss/variables";
 
   $background: $background-ui;
   $background-selected: $background-color-secondary;

src/directives/v-formatDate.js

@@ -1,3 +1,4 @@
+/*
 let setValue = function(el, binding) {
   let value = binding.value;
   let dateArray = value.split('-');
@@ -13,3 +14,4 @@ module.exports = {
     setValue(el, binding);
   }
 }
+*/

src/directives/v-image.js

@@ -1,5 +1,6 @@
-let setValue = function(el, binding) {
-  let img = new Image();
+/*
+const setValue = function(el, binding) {
+  const img = new Image();
   img.src = binding.value;
 
   img.onload = function() {
@@ -10,10 +11,11 @@ let setValue = function(el, binding) {
 
 module.exports = {
   isLiteral: true,
-  bind(el, binding){
+  bind(el, binding) {
     setValue(el, binding);
   },
-  update(el, binding){
+  update(el, binding) {
     setValue(el, binding);
   }
-}
+};
+*/

src/interfaces/IAutocompleteSearch.ts

@@ -1,4 +1,3 @@
-/* eslint-disable no-use-before-define */
 import { MediaTypes } from "./IList";
 
 export interface IAutocompleteResult {
@@ -13,6 +12,7 @@ export interface IAutocompleteSearchResults {
   timed_out: boolean;
   _shards: Shards;
   hits: Hits;
+  suggest: Suggest;
 }
 
 export interface Shards {
@@ -37,6 +37,27 @@ export interface Hit {
   sort: number[];
 }
 
+export interface Suggest {
+  "movie-suggest": SuggestOptions[];
+  "person-suggest": SuggestOptions[];
+  "show-suggest": SuggestOptions[];
+}
+
+export interface SuggestOptions {
+  text: string;
+  offset: number;
+  length: number;
+  options: Option[];
+}
+
+export interface Option {
+  text: string;
+  _index: string;
+  _id: string;
+  _score: number;
+  _source: Source;
+}
+
 export enum Index {
   Movies = "movies",
   Shows = "shows"
@@ -57,6 +78,8 @@ export interface Source {
   agent: Agent;
   original_title: string;
   original_name?: string;
+  name?: string;
+  type?: MediaTypes;
 }
 
 export interface Agent {

src/interfaces/IGraph.ts

@@ -1,5 +1,3 @@
-/* eslint-disable no-use-before-define */
-
 export enum GraphTypes {
   Plays = "plays",
   Duration = "duration"
@@ -12,12 +10,12 @@ export enum GraphValueTypes {
 
 export interface IGraphDataset {
   name: string;
-  data: Array<number>;
+  data: number[];
 }
 
 export interface IGraphData {
-  labels: Array<string>;
-  series: Array<IGraphDataset>;
+  labels: string[];
+  series: IGraphDataset[];
 }
 
 export interface IGraphResponse {

src/interfaces/IList.ts

@@ -67,7 +67,7 @@ export interface IMovie {
   backdrop: string;
   release_date: string | Date;
   rating: number;
-  genres: Array<MovieGenres>;
+  genres: MovieGenres[];
   production_status: MovieProductionStatus;
   tagline: string;
   runtime: number;
@@ -88,9 +88,9 @@ export interface IShow {
   seasons?: number;
   episodes?: number;
   popularity?: number;
-  genres?: Array<ShowGenres>;
+  genres?: ShowGenres[];
   production_status?: string;
-  runtime?: Array<number>;
+  runtime?: number[];
   exists_in_plex?: boolean;
   type: MediaTypes.Show;
 }
@@ -135,19 +135,19 @@ export interface ICrew {
 }
 
 export interface IMediaCredits {
-  cast: Array<ICast>;
-  crew: Array<ICrew>;
+  cast: ICast[];
+  crew: ICrew[];
   id: number;
 }
 
 export interface IPersonCredits {
-  cast: Array<IMovie | IShow>;
-  crew: Array<ICrew>;
+  cast: (IMovie | IShow)[];
+  crew: ICrew[];
   id: number;
   type?: string;
 }
 
-export type ListResults = Array<IMovie | IShow | IPerson | IRequest>;
+export type ListResults = (IMovie | IShow | IPerson | IRequest)[];
 
 export interface IList {
   results: ListResults;

src/interfaces/INavigationIcon.ts

@@ -1,7 +1,7 @@
 export default interface INavigationIcon {
   title: string;
   route: string;
-  icon: any; // eslint-disable-line @typescript-eslint/no-explicit-any
+  icon: any;
   requiresAuth?: boolean;
   useStroke?: boolean;
 }

src/interfaces/IStateTorrent.ts

@@ -1,6 +1,6 @@
 import type ITorrent from "./ITorrent";
 
 export default interface IStateTorrent {
-  results: Array<ITorrent>;
+  results: ITorrent[];
   resultCount: number | null;
 }

src/interfaces/ITorrent.ts

@@ -7,5 +7,5 @@ export default interface ITorrent {
   seed: string;
   leech: string;
   url: string | null;
-  release_type: Array<string>;
+  release_type: string[];
 }

src/main.ts

@@ -3,8 +3,7 @@ import router from "./routes";
 import store from "./store";
 import Toast from "./plugins/Toast";
 
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const App = require("./App.vue").default;
+import App from "./App.vue";
 
 store.dispatch("darkmodeModule/findAndSetDarkmodeSupported");
 store.dispatch("user/initUserFromCookie");
@@ -14,4 +13,5 @@ const app = createApp(App);
 app.use(router);
 app.use(store);
 app.use(Toast);
-app.mount("#entry");
+
+app.mount("#app");

src/modules/darkmodeModule.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-param-reassign */
 import IStateDarkmode from "../interfaces/IStateDarkmode";
 
 const state: IStateDarkmode = {
@@ -10,9 +11,7 @@ export default {
   namespaced: true,
   state,
   getters: {
-    darkmodeSupported: (state: IStateDarkmode) => {
-      return state.darkmodeSupported;
-    }
+    darkmodeSupported: (state: IStateDarkmode) => state.darkmodeSupported
   },
   mutations: {
     SET_DARKMODE_SUPPORT: (

src/modules/documentTitle.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-param-reassign */
 import type IStateDocumentTitle from "../interfaces/IStateDocumentTitle";
 
 const capitalize = (string: string) => {
@@ -26,7 +27,7 @@ const state: IStateDocumentTitle = {
   title: undefined
 };
 
-/* eslint-disable @typescript-eslint/no-shadow, no-return-assign */
+/* eslint-disable @typescript-eslint/no-shadow */
 export default {
   namespaced: true,
   state,

src/modules/hamburger.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-param-reassign */
 import type IStateHamburger from "../interfaces/IStateHamburger";
 
 const state: IStateHamburger = {

src/modules/popup.ts

@@ -1,15 +1,16 @@
+/* eslint-disable no-param-reassign */
 import { MediaTypes } from "../interfaces/IList";
 import type { IStatePopup, IPopupQuery } from "../interfaces/IStatePopup";
 
-/* eslint-disable-next-line import/no-cycle */
+/* eslint-disable-next-line import-x/no-cycle */
 import router from "../routes";
 
-const removeIncludedQueryParams = (params, key) => {
+const removeIncludedQueryParams = (params: URLSearchParams, key: string) => {
   if (params.has(key)) params.delete(key);
   return params;
 };
 
-function paramsToObject(entries) {
+function paramsToObject(entries: Iterator<[string, string]>) {
   const result = {};
   // eslint-disable-next-line no-restricted-syntax
   for (const [key, value] of entries) {
@@ -65,7 +66,7 @@ export default {
   actions: {
     open: ({ commit }, { id, type }: { id: number; type: MediaTypes }) => {
       if (!Number.isNaN(id)) {
-        id = Number(id); /* eslint-disable-line no-param-reassign */
+        id = Number(id);
       }
 
       commit("SET_OPEN", { id, type });

src/modules/torrentModule.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-param-reassign */
 import type ITorrent from "../interfaces/ITorrent";
 import type IStateTorrent from "../interfaces/IStateTorrent";
 
@@ -11,16 +12,12 @@ export default {
   namespaced: true,
   state,
   getters: {
-    results: (state: IStateTorrent) => {
-      return state.results;
-    },
-    resultCount: (state: IStateTorrent) => {
-      return state.resultCount;
-    }
+    results: (state: IStateTorrent) => state.results,
+    resultCount: (state: IStateTorrent) => state.resultCount
   },
 
   mutations: {
-    SET_RESULTS: (state: IStateTorrent, results: Array<ITorrent>) => {
+    SET_RESULTS: (state: IStateTorrent, results: ITorrent[]) => {
       state.results = results;
     },
     SET_RESULT_COUNT: (state: IStateTorrent, count: number) => {
@@ -32,7 +29,7 @@ export default {
     }
   },
   actions: {
-    setResults({ commit }, results: Array<ITorrent>) {
+    setResults({ commit }, results: ITorrent[]) {
       commit("SET_RESULTS", results);
     },
     setResultCount({ commit }, count: number) {

src/pages/404Page.vue

@@ -28,8 +28,8 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
+  @import "scss/variables.scss";
+  @import "scss/media-queries";
 
   .button {
     font-size: 1.2rem;

src/pages/ActivityPage.vue

@@ -141,7 +141,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
+  @import "scss/variables";
 
   .wrapper {
     padding: 2rem;

src/pages/ProfilePage.vue

@@ -118,8 +118,8 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
+  @import "scss/variables";
+  @import "scss/media-queries";
 
   .button--group {
     display: flex;

src/pages/RegisterPage.vue

@@ -131,7 +131,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
+  @import "scss/variables";
 
   section {
     padding: 1.3rem;

src/pages/SearchPage.vue

@@ -89,7 +89,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/media-queries";
+  @import "scss/media-queries";
 
   .filter {
     margin-top: 0.5rem;

src/pages/SettingsPage.vue

@@ -48,8 +48,8 @@
 </script>
 
 <style lang="scss">
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
+  @import "scss/variables";
+  @import "scss/media-queries";
 
   .settings {
     padding: 3rem;

src/pages/SigninPage.vue

@@ -112,7 +112,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
+  @import "scss/variables";
 
   section {
     padding: 1.3rem;

src/plugins/Toast/ToastComponent.vue

@@ -28,7 +28,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, defineProps, onMounted } from "vue";
+  import { ref, onMounted } from "vue";
   import { useRouter } from "vue-router";
   import type { Ref } from "vue";
 
@@ -94,7 +94,9 @@
 
     background-color: white;
     border-radius: 3px;
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.17), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
+    box-shadow:
+      0 4px 8px 0 rgba(0, 0, 0, 0.17),
+      0 2px 4px 0 rgba(0, 0, 0, 0.08);
     padding: 0.5rem;
     margin: 1rem 2rem 1rem 0.71rem;
     // max-width: calc(100% - 3rem);

src/routes.ts

@@ -1,7 +1,7 @@
 import { createRouter, createWebHistory } from "vue-router";
 import type { RouteRecordRaw, RouteLocationNormalized } from "vue-router";
 
-/* eslint-disable-next-line import/no-cycle */
+/* eslint-disable-next-line import-x/no-cycle */
 import store from "./store";
 
 declare global {
@@ -10,7 +10,7 @@ declare global {
   }
 }
 
-const routes: Array<RouteRecordRaw> = [
+const routes: RouteRecordRaw[] = [
   {
     name: "home",
     path: "/",
@@ -99,7 +99,6 @@ const loggedIn = () => store.getters["user/loggedIn"];
 const hasPlexAccount = () => store.getters["user/plexUserId"] !== null;
 const hamburgerIsOpen = () => store.getters["hamburger/isOpen"];
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
 router.beforeEach(
   (to: RouteLocationNormalized, from: RouteLocationNormalized, next: any) => {
     store.dispatch("documentTitle/updateTitle", to.name);

src/scss/elements.scss

@@ -1,5 +1,5 @@
-@import "src/scss/variables";
-@import "src/scss/media-queries";
+@import "scss/variables";
+@import "scss/media-queries";
 
 .filter {
   margin: 1rem;

src/scss/loading-placeholder.scss

@@ -1,4 +1,4 @@
-@import "src/scss/variables";
+@import "scss/variables";
 
 // Loading placeholder styling
 @mixin nth-children($points...) {

src/scss/main.scss

@@ -1,4 +1,4 @@
-@import "src/scss/variables";
+@import "scss/variables";
 
 .noselect {
   -webkit-touch-callout: none; /* iOS Safari */

src/scss/media-queries.scss

@@ -8,72 +8,72 @@ $desktop-l-width: 1600px;
 $mobile-width: 768px;
 
 @mixin desktop {
-	@media (min-width: #{$mobile-width + 1px}) {
-		@content;
-	}
+  @media (min-width: #{$mobile-width + 1px}) {
+    @content;
+  }
 }
 
 @mixin mobile {
-	@media (max-width: #{$mobile-width}) {
-		@content;
-	}
+  @media (max-width: #{$mobile-width}) {
+    @content;
+  }
 }
 
 .desktop-only {
-	@include mobile {
-		display: none !important;
-	}
+  @include mobile {
+    display: none !important;
+  }
 }
 
 .mobile-only {
-	@include desktop {
-		display: none !important;
-	}
+  @include desktop {
+    display: none !important;
+  }
 }
 
 // Media
 @mixin mobile-only {
-	@media (max-width: #{$tablet-p-width - 1px}) {
-		@content;
-	}
+  @media (max-width: #{$tablet-p-width - 1px}) {
+    @content;
+  }
 }
 @mixin mobile-ls-min {
-	@media (min-width: #{$phone-xs-width}) {
-		@content;
-	}
+  @media (min-width: #{$phone-xs-width}) {
+    @content;
+  }
 }
 @mixin tablet-only {
-	@media (min-width: #{$tablet-p-width}) and (max-width: #{$desktop-width - 1px}) {
-		@content;
-	}
+  @media (min-width: #{$tablet-p-width}) and (max-width: #{$desktop-width - 1px}) {
+    @content;
+  }
 }
 @mixin tablet-min {
-	@media (min-width: #{$tablet-p-width}) {
-		@content;
-	}
+  @media (min-width: #{$tablet-p-width}) {
+    @content;
+  }
 }
 @mixin tablet-portrait-only {
-	@media (min-width: #{$tablet-p-width}) and (max-width: #{$tablet-l-width - 1px}) {
-		@content;
-	}
+  @media (min-width: #{$tablet-p-width}) and (max-width: #{$tablet-l-width - 1px}) {
+    @content;
+  }
 }
 @mixin tablet-landscape-min {
-	@media (min-width: #{$tablet-l-width}) {
-		@content;
-	}
+  @media (min-width: #{$tablet-l-width}) {
+    @content;
+  }
 }
 @mixin desktop-min {
-	@media (min-width: #{$desktop-width}) {
-		@content;
-	}
+  @media (min-width: #{$desktop-width}) {
+    @content;
+  }
 }
 @mixin desktop-lg-min {
-	@media (min-width: #{$desktop-l-width}) {
-		@content;
-	}
+  @media (min-width: #{$desktop-l-width}) {
+    @content;
+  }
 }
 @mixin retina {
-	@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-		@content;
-	}
+  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+    @content;
+  }
 }

src/scss/variables.scss

@@ -1,6 +1,6 @@
 // Colors
 // @import "./media-queries";
-@import "src/scss/media-queries";
+@import "scss/media-queries";
 
 :root {
   color-scheme: light;

src/store.ts

@@ -6,7 +6,7 @@ import torrentModule from "./modules/torrentModule";
 import user from "./modules/user";
 import hamburger from "./modules/hamburger";
 
-/* eslint-disable-next-line import/no-cycle */
+/* eslint-disable-next-line import-x/no-cycle */
 import popup from "./modules/popup";
 
 const store = createStore({

src/utils.ts

@@ -14,9 +14,7 @@ export const parseJwt = (token: string) => {
   const jsonPayload = decodeURIComponent(
     atob(base64)
       .split("")
-      .map(c => {
-        return `%${`00${c.charCodeAt(0).toString(16)}`.slice(-2)}`;
-      })
+      .map(c => `%${`00${c.charCodeAt(0).toString(16)}`.slice(-2)}`)
       .join("")
   );
 
@@ -62,10 +60,10 @@ export function focusOnNextElement(elementEvent: KeyboardEvent): void {
   }
 }
 
-export function humanMinutes(minutes) {
+export function humanMinutes(minutes: number[] | number) {
   if (minutes instanceof Array) {
-    /* eslint-disable-next-line prefer-destructuring, no-param-reassign */
-    minutes = minutes[0];
+    /* eslint-disable-next-line no-param-reassign */
+    [minutes] = minutes;
   }
 
   const hours = Math.floor(minutes / 60);
@@ -93,7 +91,7 @@ export function setUrlQueryParameter(parameter: string, value: string): void {
 
   const url = `${window.location.protocol}//${window.location.hostname}${
     window.location.port ? `:${window.location.port}` : ""
-  }${window.location.pathname}${params.toString().length ? `?${params}` : ""}`;
+  }${ndow.location.pathname}${params.toString().length ? `?${params}` : ""}`;
 
   window.history.pushState({}, "search", url);
 }

src/vite-env.d.ts

@@ -0,0 +1,9 @@
+interface ImportMetaEnv {
+  readonly VITE_SEASONED_API: string;
+  readonly VITE_ELASTIC_URL: string;
+  readonly VITE_ELASTIC_API_KEY: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

tsconfig.json

@@ -12,7 +12,8 @@
     "outDir": "lib",
     "baseUrl": "/",
     "paths": {
-      "@": ["src"]
+      "@/*": ["./src/*"],
+      "scss/*": ["./src/scss/*"]
     }
   },
   "include": [

vite.config.ts

@@ -0,0 +1,14 @@
+import path from "path";
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+
+// https://vite.dev/config/
+export default defineConfig({
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+      scss: path.resolve(__dirname, "./src/scss")
+    }
+  },
+  plugins: [vue()]
+});

webpack.config.js

@@ -1,157 +0,0 @@
-const path = require("path");
-const webpack = require("webpack");
-const sass = require("sass");
-const HTMLWebpackPlugin = require("html-webpack-plugin");
-const { VueLoaderPlugin } = require("vue-loader");
-const TerserPlugin = require("terser-webpack-plugin");
-const dotenv = require("dotenv").config({ path: "./.env" });
-const dotenvExample = require("dotenv").config({ path: "./.env.example" });
-
-const sourcePath = path.resolve(__dirname, "src");
-const indexFile = path.join(sourcePath, "index.html");
-const javascriptEntry = path.join(sourcePath, "main.ts");
-const publicPath = path.resolve(__dirname, "public");
-const isProd = process.env.NODE_ENV === "production";
-const variables = dotenv.parsed || dotenvExample.parsed;
-
-// Merge inn all process.env values that match dotenv keys
-Object.keys(process.env).forEach(key => {
-  if (key in variables) {
-    variables[key] = process.env[key];
-  }
-});
-
-module.exports = {
-  mode: process.env.NODE_ENV,
-  context: publicPath,
-  entry: javascriptEntry,
-  output: {
-    path: `${publicPath}/dist/`,
-    publicPath: "/dist/",
-    filename: "[name].[contenthash].js",
-    clean: true
-  },
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        loader: "babel-loader",
-        options: {
-          presets: ["@babel/preset-env"]
-        },
-        exclude: /node_modules/
-      },
-      {
-        test: /\.vue$/,
-        use: ["vue-loader"]
-      },
-      {
-        test: /\.ts$/,
-        loader: "ts-loader",
-        exclude: /node_modules/,
-        options: {
-          appendTsSuffixTo: [/\.vue$/]
-        }
-      },
-      {
-        test: /\.scss$/,
-        use: [
-          "vue-style-loader",
-          // isProd ? MiniCssExtractPlugin.loader : "vue-style-loader",
-          "css-loader",
-          "sass-loader"
-        ]
-      },
-      {
-        test: /\.(png|jpg|gif|svg)$/,
-        loader: "file-loader",
-        options: {
-          name: "[name].[ext]?[hash]"
-        }
-      }
-    ]
-  },
-  plugins: [
-    new VueLoaderPlugin(),
-    new HTMLWebpackPlugin({
-      template: indexFile,
-      filename: "index.html",
-      minify: isProd
-    }),
-    new webpack.DefinePlugin({
-      "process.env": JSON.stringify(variables)
-    })
-  ],
-  resolve: {
-    extensions: [".js", ".ts", ".vue", ".json", ".scss"],
-    alias: {
-      vue: "@vue/runtime-dom",
-      "@": path.resolve(__dirname, "src"),
-      src: path.resolve(__dirname, "src"),
-      assets: `${publicPath}/assets`,
-      components: path.resolve(__dirname, "src/components")
-    }
-  },
-  devtool: "source-map",
-  performance: {
-    hints: false
-  },
-  optimization: {
-    splitChunks: {
-      chunks: "all",
-      maxInitialRequests: Infinity,
-      minSize: 0,
-      cacheGroups: {
-        vendor: {
-          test: /[\\/]node_modules[\\/]/,
-          name(module) {
-            // get the name. E.g. node_modules/packageName/not/this/part.js
-            // or node_modules/packageName
-            const packageName = module.context.match(
-              /[\\/]node_modules[\\/](.*?)([\\/]|$)/
-            )[1];
-
-            // npm package names are URL-safe, but some servers don't like @ symbols
-            return `npm.${packageName.replace("@", "")}`;
-          }
-        }
-      }
-    },
-    minimizer: [
-      new TerserPlugin({
-        parallel: true,
-        terserOptions: {
-          sourceMap: true
-          // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
-        }
-      })
-    ]
-  },
-  devServer: {
-    static: publicPath,
-    historyApiFallback: {
-      index: "/dist/index.html"
-    },
-    compress: true,
-    hot: true,
-    port: 8080
-  }
-};
-
-if (isProd) {
-  module.exports.mode = "production";
-  module.exports.devtool = false;
-  module.exports.performance.hints = "warning";
-}
-
-// enable proxy for anything that hits /Api
-// View README or update src/config.ts:SEASONED_API_URL
-const { SEASONED_API } = process.env;
-if (SEASONED_API) {
-  module.exports.devServer.proxy = {
-    "/api": {
-      target: SEASONED_API,
-      changeOrigin: true
-    }
-  };
-}