Update dependency @vitejs/plugin-vue to v6

package-lock.json

@@ -18,7 +18,8 @@
         "dayjs": "^1.11.10",
         "vue": "^3.5.17",
         "vue-loading-overlay": "^6.0.3",
-        "vue-router": "^5.0.0"
+        "vue-router": "^5.0.0",
+        "vuetify": "^3.9.6"
       },
       "devDependencies": {
         "@babel/core": "^7.22.10",
@@ -32,7 +33,8 @@
         "postcss-cli": "^11.0.0",
         "sass-embedded": "^1.89.2",
         "unplugin-vue-components": "^31.0.0",
-        "vite": "^6.3.6"
+        "vite": "^6.3.6",
+        "vite-plugin-vuetify": "^2.1.1"
       }
     },
     "node_modules/@achrinza/node-ipc": {
@@ -1677,7 +1679,7 @@
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/@bufbuild/protobuf/-/protobuf-2.7.0.tgz",
       "integrity": "sha512-qn6tAIZEw5i/wiESBF4nQxZkl86aY4KoO0IkUa2Lh+rya64oTOdJQFlZuMwI1Qz9VBJQrQC4QlSA2DNek5gCOA==",
-      "dev": true,
+      "devOptional": true,
       "license": "(Apache-2.0 AND BSD-3-Clause)"
     },
     "node_modules/@discoveryjs/json-ext": {
@@ -1697,7 +1699,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1714,7 +1715,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1731,7 +1731,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1748,7 +1747,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1765,7 +1763,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1782,7 +1779,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1799,7 +1795,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1816,7 +1811,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1833,7 +1827,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1850,7 +1843,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1867,7 +1859,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1884,7 +1875,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1901,7 +1891,6 @@
       "cpu": [
         "mips64el"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1918,7 +1907,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1935,7 +1923,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1952,7 +1939,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1969,7 +1955,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1986,7 +1971,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2003,7 +1987,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2020,7 +2003,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2037,7 +2019,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2054,7 +2035,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2071,7 +2051,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2088,7 +2067,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2105,7 +2083,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2122,7 +2099,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2340,7 +2316,7 @@
       "version": "0.3.6",
       "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz",
       "integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.5",
@@ -2441,7 +2417,6 @@
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
       "integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==",
-      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
@@ -2481,7 +2456,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2502,7 +2476,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2523,7 +2496,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2544,7 +2516,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2565,7 +2536,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2586,7 +2556,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2607,7 +2576,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2628,7 +2596,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2649,7 +2616,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2670,7 +2636,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2691,7 +2656,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2712,7 +2676,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2733,7 +2696,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2778,7 +2740,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2792,7 +2753,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2806,7 +2766,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2820,7 +2779,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2834,7 +2792,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2848,7 +2805,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2862,7 +2818,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2876,7 +2831,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2890,7 +2844,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2904,7 +2857,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2918,7 +2870,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2932,7 +2883,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2946,7 +2896,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2960,7 +2909,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2974,7 +2922,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2988,7 +2935,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3002,7 +2948,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3016,7 +2961,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3030,7 +2974,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3044,7 +2987,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3179,7 +3121,7 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
       "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@types/express": {
@@ -3270,7 +3212,7 @@
       "version": "22.10.5",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.5.tgz",
       "integrity": "sha512-F8Q+SeGimwOo86fiovQh8qiXfFEh2/ocYv7tU5pJ3EXMSSxk1Joj5wefpFK2fHTf/N6HKGSxIDBT9f3gCxXPkQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.20.0"
@@ -4806,6 +4748,20 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@vuetify/loader-shared": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@vuetify/loader-shared/-/loader-shared-2.1.2.tgz",
+      "integrity": "sha512-X+1jBLmXHkpQEnC0vyOb4rtX2QSkBiFhaFXz8yhQqN2A4vQ6k2nChxN4Ol7VAY5KoqMdFoRMnmNdp/1qYXDQig==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "upath": "^2.0.1"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0",
+        "vuetify": ">=3"
+      }
+    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz",
@@ -5610,7 +5566,7 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
       "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "fill-range": "^7.1.1"
@@ -5681,7 +5637,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
       "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/bytes": {
@@ -6052,7 +6008,7 @@
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.5.2.tgz",
       "integrity": "sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/combined-stream": {
@@ -7320,7 +7276,7 @@
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
       "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -7530,7 +7486,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
       "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
-      "dev": true,
       "license": "Apache-2.0",
       "optional": true,
       "bin": {
@@ -7875,7 +7830,7 @@
       "version": "0.25.9",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.9.tgz",
       "integrity": "sha512-CRbODhYyQx3qp7ZEwzxOk4JBqmD/seJrzPa/cGjY1VtIn5E09Oi9/dB4JwctnfZ8Q8iT7rioVv5k/FNT/uf54g==",
-      "dev": true,
+      "devOptional": true,
       "hasInstallScript": true,
       "license": "MIT",
       "bin": {
@@ -8736,7 +8691,7 @@
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
       "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "to-regex-range": "^5.0.1"
@@ -8952,7 +8907,6 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
@@ -9168,7 +9122,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -9576,7 +9530,7 @@
       "version": "5.1.3",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.3.tgz",
       "integrity": "sha512-+chQdDfvscSF1SJqv2gn4SRO2ZyS3xL3r7IW/wWEEzrzLisnOlKiQu5ytC/BVNcS15C39WT2Hg/bjKjDMcu+zg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/import-fresh": {
@@ -9704,7 +9658,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -9734,7 +9688,7 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "is-extglob": "^2.1.1"
@@ -9757,7 +9711,7 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.12.0"
@@ -10547,7 +10501,7 @@
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
       "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "braces": "^3.0.3",
@@ -10798,7 +10752,7 @@
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/muggle-string": {
@@ -10897,7 +10851,6 @@
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
       "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
-      "dev": true,
       "license": "MIT",
       "optional": true
     },
@@ -11467,7 +11420,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=8.6"
@@ -13078,7 +13031,7 @@
       "version": "4.49.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.49.0.tgz",
       "integrity": "sha512-3IVq0cGJ6H7fKXXEdVt+RcYvRCt8beYY9K1760wGQwSAHZcS9eot1zDG5axUbcp/kWRi5zKIIDX8MoKv/TzvZA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@types/estree": "1.0.8"
@@ -13142,7 +13095,7 @@
       "version": "7.8.2",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
       "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "dependencies": {
         "tslib": "^2.1.0"
@@ -13180,7 +13133,6 @@
       "version": "1.97.3",
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.97.3.tgz",
       "integrity": "sha512-fDz1zJpd5GycprAbu4Q2PV/RprsRtKC/0z82z0JLgdytmcq0+ujJbJ/09bPGDxCLkKY3Np5cRAOcWiVkLXJURg==",
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -13202,7 +13154,7 @@
       "version": "1.97.3",
       "resolved": "https://registry.npmjs.org/sass-embedded/-/sass-embedded-1.97.3.tgz",
       "integrity": "sha512-eKzFy13Nk+IRHhlAwP3sfuv+PzOrvzUkwJK2hdoCKYcWGSdmwFpeGpWmyewdw8EgBnsKaSBtgf/0b2K635ecSA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@bufbuild/protobuf": "^2.5.0",
@@ -13250,7 +13202,6 @@
         "!riscv64",
         "!x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -13264,7 +13215,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -13281,7 +13231,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -13298,7 +13247,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -13315,7 +13263,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -13332,7 +13279,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -13349,7 +13295,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -13366,7 +13311,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -13383,7 +13327,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -13400,7 +13343,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -13417,7 +13359,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -13434,7 +13375,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -13451,7 +13391,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -13468,7 +13407,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -13485,7 +13423,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -13499,7 +13436,6 @@
       "version": "1.97.3",
       "resolved": "https://registry.npmjs.org/sass-embedded-unknown-all/-/sass-embedded-unknown-all-1.97.3.tgz",
       "integrity": "sha512-/GHajyYJmvb0IABUQHbVHf1nuHPtIDo/ClMZ81IDr59wT5CNcMe7/dMNujXwWugtQVGI5UGmqXWZQCeoGnct8Q==",
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -13519,7 +13455,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -13536,7 +13471,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -13550,7 +13484,7 @@
       "version": "8.1.1",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
       "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "has-flag": "^4.0.0"
@@ -13566,7 +13500,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
       "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -13583,7 +13516,6 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
       "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "engines": {
@@ -14018,7 +13950,7 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
+      "devOptional": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -14037,7 +13969,7 @@
       "version": "0.5.21",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
       "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "buffer-from": "^1.0.0",
@@ -14410,7 +14342,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/sync-child-process/-/sync-child-process-1.0.2.tgz",
       "integrity": "sha512-8lD+t2KrrScJ/7KXCSyfhT3/hRq78rC0wBFqNJXv3mZyn6hW2ypM05JmlSvtqRbeq6jqA94oHbxAr2vYsJ8vDA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "sync-message-port": "^1.0.0"
@@ -14423,7 +14355,7 @@
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/sync-message-port/-/sync-message-port-1.1.3.tgz",
       "integrity": "sha512-GTt8rSKje5FilG+wEdfCkOcLL7LWqpMlr2c3LRuKt/YXxcJ52aGSbGBAdI4L3aaqfrBt6y711El53ItyH1NWzg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=16.0.0"
@@ -14447,7 +14379,7 @@
       "version": "5.37.0",
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.37.0.tgz",
       "integrity": "sha512-B8wRRkmre4ERucLM/uXx4MOV5cbnOlVAqUst+1+iLKPI0dOgFO28f84ptoQt9HEI537PMzfYa/d+GEPKTRXmYA==",
-      "dev": true,
+      "devOptional": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
@@ -14558,7 +14490,7 @@
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/text-table": {
@@ -14712,7 +14644,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "is-number": "^7.0.0"
@@ -14752,7 +14684,7 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "dev": true,
+      "devOptional": true,
       "license": "0BSD"
     },
     "node_modules/type-check": {
@@ -14802,7 +14734,7 @@
       "version": "6.20.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
       "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/unicode-canonical-property-names-ecmascript": {
@@ -14996,6 +14928,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/upath": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/upath/-/upath-2.0.1.tgz",
+      "integrity": "sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==",
+      "devOptional": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4",
+        "yarn": "*"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
@@ -15084,7 +15027,7 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/varint/-/varint-6.0.0.tgz",
       "integrity": "sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/vary": {
@@ -15101,7 +15044,7 @@
       "version": "6.4.1",
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.1.tgz",
       "integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.25.0",
@@ -15172,11 +15115,31 @@
         }
       }
     },
+    "node_modules/vite-plugin-vuetify": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/vite-plugin-vuetify/-/vite-plugin-vuetify-2.1.3.tgz",
+      "integrity": "sha512-Q4SC/4TqbNvaZIFb9YsfBqkGlYHbJJJ6uU3CnRBZqLUF3s5eCMVZAaV4GkTbehIH/bhSj42lMXztOwc71u6rVw==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vuetify/loader-shared": "^2.1.2",
+        "debug": "^4.3.3",
+        "upath": "^2.0.1"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "peerDependencies": {
+        "vite": ">=5",
+        "vue": "^3.0.0",
+        "vuetify": ">=3"
+      }
+    },
     "node_modules/vite/node_modules/fdir": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
       "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=12.0.0"
@@ -15194,7 +15157,7 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -15491,6 +15454,33 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/vuetify": {
+      "version": "3.11.8",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.11.8.tgz",
+      "integrity": "sha512-4iKnntOnLFFklygZjzlVfcHrtLO8+iK4HOhiia6HP2U8v82x+ngaSCgm+epvPrGyCMfCpfuEttqD2qElrr1axw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/johnleider"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.7",
+        "vite-plugin-vuetify": ">=2.1.0",
+        "vue": "^3.5.0",
+        "webpack-plugin-vuetify": ">=3.1.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        },
+        "vite-plugin-vuetify": {
+          "optional": true
+        },
+        "webpack-plugin-vuetify": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.5.1.tgz",

package.json

@@ -19,7 +19,8 @@
     "dayjs": "^1.11.10",
     "vue": "^3.5.17",
     "vue-loading-overlay": "^6.0.3",
-    "vue-router": "^5.0.0"
+    "vue-router": "^5.0.0",
+    "vuetify": "^3.9.6"
   },
   "devDependencies": {
     "@babel/core": "^7.22.10",
@@ -33,7 +34,8 @@
     "postcss-cli": "^11.0.0",
     "sass-embedded": "^1.89.2",
     "unplugin-vue-components": "^31.0.0",
-    "vite": "^6.3.6"
+    "vite": "^6.3.6",
+    "vite-plugin-vuetify": "^2.1.1"
   },
   "eslintConfig": {
     "root": true,

src/App.vue

@@ -2,9 +2,9 @@
 import axios from "axios";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
+import { ref } from "vue";
 
 import "vue-loading-overlay/dist/css/index.css";
-import "./theme.css";
 
 // Configure day.js with UTC support
 dayjs.extend(utc);
@@ -16,8 +16,12 @@ export default {
       filter: window.location.href.split("filter=")[1] || "",
       sortColumn: this.sortColumn,
       topics: [],
+      hoveredTopicId: null,
+      tooltipData: {},
+      loadingTooltip: {},
+      tooltipPosition: { x: 0, y: 0 },
       isMobile: false,
-      currentTheme: 'auto',
+      currentTheme: 'dark',
       mediaQueryListener: null,
       vuetifyTheme: null,
       darkModeQuery: null,
@@ -28,7 +32,7 @@ export default {
     window.addEventListener("keydown", this.handleKeyDown);
     this.detectMobile();
     this.fetchDeals();
-    // Initialize theme on next tick
+    // Initialize theme on next tick to ensure Vuetify is ready
     this.$nextTick(() => {
       this.initializeTheme();
       this.setupThemeListener();
@@ -43,15 +47,15 @@ export default {
   },
   methods: {
     initializeTheme() {
-      // If no saved preference, default to auto
+      // If no saved preference, apply system preference now
-      const savedTheme = localStorage.getItem('theme');
+      const savedTheme = localStorage.getItem('vuetify-theme');
       if (!savedTheme) {
-        this.currentTheme = 'auto';
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-        this.applyTheme('auto');
+        const theme = prefersDark ? 'dark' : 'light';
+        this.applyTheme(theme);
       } else {
-        this.currentTheme = savedTheme;
+        // Get current theme name from Vuetify
-        // Apply saved theme
+        this.currentTheme = this.$vuetify.theme.global.name;
-        this.applyTheme(savedTheme);
       }
     },
     setupThemeListener() {
@@ -62,12 +66,12 @@ export default {
 
       // Use arrow function to preserve 'this' context
       const themeChangeHandler = (e) => {
-        // Only auto-update theme if set to 'auto'
+        // Only auto-update theme if user hasn't set a preference manually
-        const savedTheme = localStorage.getItem('theme');
+        const savedTheme = localStorage.getItem('vuetify-theme');
-        if (savedTheme === 'auto' || !savedTheme) {
+        if (!savedTheme) {
           const newTheme = e.matches ? 'dark' : 'light';
           console.log('System theme changed to:', newTheme);
-          this.applyThemeActual(newTheme);
+          this.applyTheme(newTheme);
         }
       };
 
@@ -76,44 +80,17 @@ export default {
       this.themeChangeHandler = themeChangeHandler;
       this.darkModeQuery = darkModeQuery;
     },
-    applyTheme(theme, skipSave = false) {
+    applyTheme(theme) {
+      // Apply theme using Vuetify's theme API
+      this.$vuetify.theme.global.name = theme;
       this.currentTheme = theme;
-      if (!skipSave) {
+      localStorage.setItem('vuetify-theme', theme);
-        localStorage.setItem('theme', theme);
-      }
 
-      // Determine actual theme to apply
+      // Also update data-bs-theme for any custom CSS that uses it
-      let actualTheme = theme;
+      document.documentElement.setAttribute('data-bs-theme', theme === 'dark' ? 'dark' : 'light');
-      if (theme === 'auto') {
-        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-        actualTheme = prefersDark ? 'dark' : 'light';
-      }
-
-      this.applyThemeActual(actualTheme);
-    },
-    applyThemeActual(actualTheme) {
-      // Update data-bs-theme attribute for CSS variables to work
-      document.documentElement.setAttribute('data-bs-theme', actualTheme === 'dark' ? 'dark' : 'light');
-
-      // Update HTML class for theme-based CSS selectors
-      if (actualTheme === 'dark') {
-        document.documentElement.classList.add('dark-theme');
-        document.documentElement.classList.remove('light-theme');
-      } else {
-        document.documentElement.classList.add('light-theme');
-        document.documentElement.classList.remove('dark-theme');
-      }
     },
     toggleTheme() {
-      // Cycle through: auto -> light -> dark -> auto
+      const newTheme = this.currentTheme === 'dark' ? 'light' : 'dark';
-      let newTheme;
-      if (this.currentTheme === 'auto') {
-        newTheme = 'light';
-      } else if (this.currentTheme === 'light') {
-        newTheme = 'dark';
-      } else {
-        newTheme = 'auto';
-      }
       this.applyTheme(newTheme);
     },
     detectMobile() {
@@ -144,7 +121,63 @@ export default {
         this.$refs.filter.focus();
       }
     },
+    handleTitleHover(topic, event) {
+      // Don't load tooltips on mobile devices
+      if (this.isMobile) {
+        return;
+      }
+      this.hoveredTopicId = topic.topic_id;
+      this.tooltipPosition = {
+        x: event.clientX,
+        y: event.clientY,
+      };
+      this.loadTopicDetails(topic.topic_id);
+    },
+    handleTitleLeave() {
+      if (this.isMobile) {
+        return;
+      }
+      this.hoveredTopicId = null;
+    },
+    handleMouseMove(event) {
+      if (this.isMobile) {
+        return;
+      }
+      if (this.hoveredTopicId !== null) {
+        this.tooltipPosition = {
+          x: event.clientX,
+          y: event.clientY,
+        };
+      }
+    },
+    loadTopicDetails(topicId) {
+      if (!topicId) {
+        console.warn("Topic ID is undefined");
+        return;
+      }
 
+      if (this.tooltipData[topicId]) {
+        return; // Already loaded
+      }
+
+      if (this.loadingTooltip[topicId]) {
+        return; // Already loading
+      }
+
+      this.loadingTooltip[topicId] = true;
+
+      axios
+        .get(`api/v1/topics/${topicId}`)
+        .then((response) => {
+          this.tooltipData[topicId] = response.data;
+        })
+        .catch((err) => {
+          console.log("Error loading topic details:", err);
+        })
+        .finally(() => {
+          this.loadingTooltip[topicId] = false;
+        });
+    },
     createFilterRoute(params) {
       this.$refs.filter.blur();
       history.pushState(
@@ -172,18 +205,16 @@ export default {
       };
     },
     filteredTopics() {
-      return this.topics
+      return this.topics.filter((row) => {
-        .filter((row) => {
+        const titles = (
-          const titles = (
+          row.title.toString() +
-            row.title.toString() +
+          " [" +
-            " [" +
+          row.Offer.dealer_name +
-            row.Offer.dealer_name +
+          "]"
-            "]"
+        ).toLowerCase();
-          ).toLowerCase();
+        const filterTerm = this.filter.toLowerCase();
-          const filterTerm = this.filter.toLowerCase();
+        return titles.includes(filterTerm);
-          return titles.includes(filterTerm);
+      });
-        })
-        .sort((a, b) => b.score - a.score); // Always sort by score descending
     },
     highlightMatches() {
       return (v) => {
@@ -195,113 +226,266 @@ export default {
         return v.replace(re, (matchedText) => `<mark>${matchedText}</mark>`);
       };
     },
-    highlightDealerName() {
+    visibleHeaders() {
-      return (dealerName) => {
+      const baseHeaders = [
-        if (this.filter == "") return dealerName;
+        { title: "Deal", value: "title", align: "center" },
-        const matchExists = dealerName.toLowerCase().includes(this.filter.toLowerCase());
+        { title: "Score", value: "score", align: "center" },
-        if (!matchExists) return dealerName;
+      ];
 
-        const re = new RegExp(this.filter, "ig");
+      // Only show Last Post column on desktop
-        return dealerName.replace(re, (matchedText) => `<mark>${matchedText}</mark>`);
+      if (!this.isMobile) {
+        baseHeaders.push({
+          title: "Last Post",
+          value: "last_post_time",
+          align: "center",
+        });
+      }
+
+      return baseHeaders;
+    },
+    tooltipStyle() {
+      if (this.hoveredTopicId === null || !this.tooltipData[this.hoveredTopicId]) {
+        return {};
+      }
+
+      let top = this.tooltipPosition.y + 10;
+      let left = this.tooltipPosition.x + 10;
+      const tooltipWidth = 420;
+
+      // Check if tooltip would go off right side of screen
+      if (left + tooltipWidth > window.innerWidth) {
+        // Position to the left of cursor instead
+        left = Math.max(10, this.tooltipPosition.x - tooltipWidth - 10);
+      }
+
+      // Keep tooltip within vertical bounds, allowing scrolling of content
+      top = Math.max(10, Math.min(top, window.innerHeight - 100));
+
+      return {
+        position: 'fixed',
+        left: Math.max(10, left) + 'px',
+        top: top + 'px',
+        zIndex: 9999,
       };
     },
-    getThemeIcon() {
-      if (this.currentTheme === 'auto') {
-        return 'brightness_auto';
-      } else if (this.currentTheme === 'dark') {
-        return 'light_mode';
-      } else {
-        return 'dark_mode';
-      }
-    },
-    getThemeTitle() {
-      if (this.currentTheme === 'auto') {
-        return 'Theme: Auto (click for Light)';
-      } else if (this.currentTheme === 'light') {
-        return 'Theme: Light (click for Dark)';
-      } else {
-        return 'Theme: Dark (click for Auto)';
-      }
-    },
   },
 };
 </script>
 
+<script setup>
+const sortBy = ref([{ key: "score", order: "desc" }]);
+</script>
+
 <template>
-  <div id="app">
+  <v-app>
-    <link rel="shortcut icon" type="image/png" href="/favicon.png" />
+    <v-main>
-    <div class="container">
+      <link rel="shortcut icon" type="image/png" href="/favicon.png" />
-      <div class="header">
+      <body>
-        <div class="header-controls">
+        <v-text-field
-          <input
+          v-model="filter"
-            v-model="filter"
+          label="Filter"
-            type="text"
+          ref="filter"
-            placeholder="Filter deals"
+          @keyup.enter="createFilterRoute(filter.toString())"
-            ref="filter"
+          @keyup.esc="$refs.filter.blur()"
-            @keyup.enter="createFilterRoute(filter.toString())"
+          hide-details="true"
-            @keyup.esc="$refs.filter.blur()"
+        />
-            class="search-input"
+        <v-data-table
-          />
+          :headers="visibleHeaders"
-          <button @click="toggleTheme" class="theme-toggle" :title="getThemeTitle">
+          :items="filteredTopics"
-            <span class="material-symbols-outlined">{{ getThemeIcon }}</span>
+          :sort-by="sortBy"
-          </button>
+          :items-per-page="50"
-        </div>
+        >
-      </div>
+          <template #item.title="{ item }">
+            <a
+              :href="`https://forums.redflagdeals.com${item.web_path}`"
+              target="_blank"
+              @mouseenter="handleTitleHover(item, $event)"
+              @mouseleave="handleTitleLeave"
+              @mousemove="handleMouseMove"
+              v-html="
+                highlightMatches(
+                  item.title
+                )
+              "
+            ></a>
+          </template>
 
-        <div class="cards-grid">
+          <template #item.score="{ item }">
-          <div
+            <span v-if="item.score > 0" class="green-score"
-            v-for="topic in filteredTopics"
+              >+{{ item.score }}</span
-            :key="topic.topic_id"
+            >
-            class="deal-card"
+            <span v-else-if="item.score < 0" class="red-score">{{
-          >
+              item.score
-            <div class="card-header">
+            }}</span>
-              <div class="title-with-link">
+            <span v-else>{{ item.score }}</span>
-                <a
+          </template>
-                  :href="`https://forums.redflagdeals.com${topic.web_path}`"
-                  target="_blank"
-                  class="deal-title"
-                  @click.stop
-                  v-html="highlightMatches(topic.title)"
-                ></a>
-                <a
-                  v-if="topic.Offer.url"
-                  :href="topic.Offer.url"
-                  target="_blank"
-                  class="card-link"
-                  title="Open deal"
-                >
-                  <span class="material-symbols-outlined">open_in_new</span>
-                </a>
-              </div>
-              <div class="score-bubble" :class="{ positive: topic.score > 0, negative: topic.score < 0, neutral: topic.score === 0 }">
-                <span v-if="topic.score > 0">+{{ topic.score }}</span>
-                <span v-else>{{ topic.score }}</span>
-              </div>
-            </div>
 
-            <div class="card-meta">
+          <template #item.last_post_time="{ item }">
-              <span class="dealer-name" v-html="highlightDealerName(topic.Offer.dealer_name)"></span>
+            {{ formatDate(item.last_post_time) }}
-            </div>
+          </template>
 
-            <div class="card-details">
+          <template #loading>
-              <div class="details-stats">
+            <v-progress-linear indeterminate color="grey" />
-                <div class="stat">
+          </template>
+        </v-data-table>
+
+        <!-- Tooltip for deal details -->
+        <div
+          v-if="hoveredTopicId !== null && tooltipData[hoveredTopicId]"
+          class="deal-tooltip"
+          :style="tooltipStyle"
+        >
+          <div class="tooltip-content">
+              <div class="tooltip-stats">
+                <span class="stat-item">
                   <span class="material-symbols-outlined">visibility</span>
-                  <span class="stat-value">{{ topic.total_views }} views</span>
+                  {{ tooltipData[hoveredTopicId].topic.total_views }} views
-                </div>
+                </span>
-                <div class="stat">
+                <span class="stat-item">
                   <span class="material-symbols-outlined">chat</span>
-                  <span class="stat-value">{{ topic.total_replies }} replies</span>
+                  {{ tooltipData[hoveredTopicId].topic.total_replies }} replies
-                </div>
+                </span>
               </div>
-
+            <div v-if="tooltipData[hoveredTopicId].description" class="tooltip-description">
-              <div class="card-timestamp">
+              <strong>Description:</strong>
-                Last post: {{ formatDate(topic.last_post_time) }}
+              {{ tooltipData[hoveredTopicId].description }}
-              </div>
+            </div>
-
+            <div class="tooltip-dealer">
+              {{ tooltipData[hoveredTopicId].topic.Offer.dealer_name }}
+            </div>
+            <div v-if="tooltipData[hoveredTopicId].first_post" class="tooltip-first-post">
+              <strong>First Post:</strong>
+              {{ tooltipData[hoveredTopicId].first_post }}
+            </div>
+            <div class="tooltip-times">
+              <div>Posted: {{ formatDate(tooltipData[hoveredTopicId].topic.post_time) }}</div>
+              <div>Last Post: {{ formatDate(tooltipData[hoveredTopicId].topic.last_post_time) }}</div>
             </div>
           </div>
         </div>
-      </div>
+      </body>
-    </div>
+    </v-main>
+  </v-app>
 </template>
+
+<style scoped>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+
+.fixed-bottom {
+  background: #ffc;
+  color: black;
+}
+
+.deal-tooltip {
+  pointer-events: none;
+  max-width: 400px;
+}
+
+.tooltip-content {
+  background: var(--tooltip-bg);
+  border: 2px solid var(--tooltip-border);
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  font-size: 13px;
+  color: var(--text-primary);
+  text-align: left;
+  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+}
+
+.tooltip-header {
+  font-weight: bold;
+  font-size: 14px;
+  color: var(--text-primary);
+  margin-bottom: 8px;
+  white-space: normal;
+  word-wrap: break-word;
+}
+
+.tooltip-dealer {
+  font-size: 12px;
+  color: var(--text-secondary);
+  margin-bottom: 8px;
+}
+
+.tooltip-stats {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 8px;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.stat-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.stat-item .material-symbols-outlined {
+  font-size: 16px;
+}
+
+.tooltip-description {
+  margin-bottom: 8px;
+  padding: 8px;
+  background: var(--bg-secondary);
+  border-left: 2px solid var(--tooltip-border);
+  border-radius: 2px;
+  font-size: 12px;
+  white-space: normal;
+  word-wrap: break-word;
+  max-height: 60px;
+  overflow-y: auto;
+  color: var(--text-primary);
+}
+
+.tooltip-first-post {
+  margin-bottom: 8px;
+  padding: 8px;
+  background: var(--bg-secondary);
+  border-left: 2px solid var(--tooltip-border);
+  border-radius: 2px;
+  font-size: 12px;
+  white-space: normal;
+  word-wrap: break-word;
+  max-height: 60px;
+  overflow-y: auto;
+  color: var(--text-primary);
+}
+
+.tooltip-times {
+  font-size: 11px;
+  color: var(--text-secondary);
+  border-top: 1px solid var(--border-color);
+  padding-top: 8px;
+  margin-top: 8px;
+}
+
+/* Filter input styling */
+:deep(.v-text-field) {
+  --v-field-border-color: #cccccc;
+}
+
+html[data-bs-theme="light"] :deep(.v-text-field) {
+  --v-field-border-color: #e8e8e8;
+}
+
+html[data-bs-theme="light"] :deep(.v-field__input) {
+  background-color: #d0d0d0 !important;
+}
+
+html[data-bs-theme="light"] :deep(.v-field--focused .v-field__input) {
+  background-color: #e8e8e8 !important;
+}
+
+html[data-bs-theme="dark"] :deep(.v-text-field) {
+  --v-field-border-color: #555555;
+}
+</style>

src/main.js

@@ -4,6 +4,8 @@ import { createRouter, createWebHashHistory } from "vue-router";
 
 import "./theme.css";
 
+import { registerPlugins } from "@/plugins";
+
 const routes = [
   {
     path: '/:pathMatch(.*)*',
@@ -18,5 +20,7 @@ const router = createRouter({
 
 const app = createApp(App);
 
+registerPlugins(app);
+
 app.use(router);
 app.mount("#app");

src/plugins/README.md

@@ -0,0 +1,3 @@
+# Plugins
+
+Plugins are a way to extend the functionality of your Vue application. Use this folder for registering plugins that you want to use globally.

src/plugins/index.js

@@ -0,0 +1,12 @@
+/**
+ * plugins/index.js
+ *
+ * Automatically included in `./src/main.js`
+ */
+
+// Plugins
+import vuetify from './vuetify'
+
+export function registerPlugins (app) {
+  app.use(vuetify)
+}

src/plugins/vuetify.js

@@ -0,0 +1,68 @@
+/**
+ * plugins/vuetify.js
+ *
+ * Framework documentation: https://vuetifyjs.com
+ */
+
+// Styles
+import "@mdi/font/css/materialdesignicons.css";
+import "vuetify/styles";
+
+// Composables
+import { createVuetify } from "vuetify";
+
+const lightTheme = {
+  dark: false,
+  colors: {
+    background: "#ffffff",
+    surface: "#f5f5f5",
+    primary: "#1976d2",
+    secondary: "#424242",
+    accent: "#82b1ff",
+    error: "#f44336",
+    info: "#2196f3",
+    success: "#4caf50",
+    warning: "#ff9800",
+  },
+};
+
+const darkTheme = {
+  dark: true,
+  colors: {
+    background: "#1a1a1a",
+    surface: "#2a2a2a",
+    primary: "#5b9cf5",
+    secondary: "#a0a0a0",
+    accent: "#7aa2f7",
+    error: "#f87171",
+    info: "#60a5fa",
+    success: "#4ade80",
+    warning: "#facc15",
+  },
+};
+
+function getDefaultTheme() {
+  // Check for saved theme preference
+  const savedTheme = localStorage.getItem('vuetify-theme');
+  if (savedTheme) {
+    return savedTheme;
+  }
+
+  // Check system preference
+  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  return prefersDark ? 'dark' : 'light';
+}
+
+// Create vuetify instance
+const vuetify = createVuetify({
+  theme: {
+    defaultTheme: getDefaultTheme(),
+    themes: {
+      light: lightTheme,
+      dark: darkTheme,
+    },
+  },
+});
+
+// Export the vuetify instance so other parts of the app can access it
+export { vuetify as default };

src/theme.css

@@ -15,12 +15,18 @@
 /* Theme-aware CSS variables */
 :root {
   /* Light theme (default) */
-  --bg-primary: #dddddd;
+  --bg-primary: #ffffff;
-  --bg-secondary: #e8e8e8;
+  --bg-secondary: #f5f5f5;
   --text-primary: #212529;
   --text-secondary: #6c757d;
-  --border-color: #d0d0d0;
+  --border-color: #dee2e6;
-  --link-color: #212529;
+  --tooltip-bg: #f8f9fa;
+  --tooltip-border: #dee2e6;
+  --tooltip-text: #212529;
+  --link-color: #0d6efd;
+  --link-visited: #990000;
+  --footer-bg: #f8f9fa;
+  --footer-text: #212529;
 }
 
 /* Dark theme */
@@ -31,7 +37,13 @@
     --text-primary: #e0e0e0;
     --text-secondary: #a0a0a0;
     --border-color: #3a3a3a;
-    --link-color: #212529;
+    --tooltip-bg: #2a2a2a;
+    --tooltip-border: #444444;
+    --tooltip-text: #e0e0e0;
+    --link-color: #5b9cf5;
+    --link-visited: #990000;
+    --footer-bg: #1a1a1a;
+    --footer-text: #e0e0e0;
   }
 }
 
@@ -42,26 +54,28 @@ html[data-bs-theme="dark"] {
   --text-primary: #e0e0e0;
   --text-secondary: #a0a0a0;
   --border-color: #3a3a3a;
-  --link-color: #e0e0e0;
+  --tooltip-bg: #2a2a2a;
+  --tooltip-border: #444444;
+  --tooltip-text: #e0e0e0;
+  --link-color: #e8e8e8;
+  --link-visited: #990000;
+  --footer-bg: #1a1a1a;
+  --footer-text: #e0e0e0;
 }
 
-html[data-bs-theme="light"],
+html[data-bs-theme="light"] {
-html.light-theme {
+  --bg-primary: #ffffff;
-  --bg-primary: #dddddd;
+  --bg-secondary: #f5f5f5;
-  --bg-secondary: #e8e8e8;
   --text-primary: #212529;
   --text-secondary: #6c757d;
-  --border-color: #d0d0d0;
+  --border-color: #dee2e6;
-  --link-color: #212529;
+  --tooltip-bg: #f8f9fa;
-}
+  --tooltip-border: #dee2e6;
-
+  --tooltip-text: #212529;
-html {
+  --link-color: #333333;
-  font-family: sans-serif;
+  --link-visited: #990000;
-  min-width: 100%;
+  --footer-bg: #f8f9fa;
-  -webkit-text-size-adjust: 100%;
+  --footer-text: #212529;
-  -ms-text-size-adjust: 100%;
-  background-color: var(--bg-primary);
-  color: var(--text-primary);
 }
 
 body {
@@ -69,8 +83,30 @@ body {
   background-color: var(--bg-primary);
   color: var(--text-primary);
   transition: background-color 0.3s ease, color 0.3s ease;
-  margin: 0;
+}
-  padding: 0;
+
+html {
+  font-family: sans-serif;
+  min-width: 100%;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}
+
+footer {
+  background: var(--footer-bg);
+  color: var(--footer-text);
+  padding: 3px;
+  padding-right: 10px;
+  padding-left: 10px;
+  border-top: 1px solid var(--border-color);
+}
+
+.footer-left {
+  float: left;
+}
+
+.footer-right {
+  float: right;
 }
 
 .green-score {
@@ -94,318 +130,103 @@ a {
   transition: color 0.2s ease;
 }
 
+
+
 a:visited {
-  color: var(--link-color);
+  color: var(--link-visited);
 }
 
-/* App styles */
+@media (min-width: 769px) {
-
+  .v-data-table-header th,
-.container {
+  .v-data-table__td,
-  max-width: 1200px;
+  .v-data-footer {
-  margin: 0 auto;
+    font-size: 1.2rem;
-  padding: 20px;
+  }
-  background-color: var(--bg-primary);
-  color: var(--text-primary);
-  min-height: 100vh;
 }
 
-.header {
+/* Tooltip theme support */
-  margin-bottom: 30px;
+.deal-tooltip {
+  pointer-events: none;
+  max-width: 400px;
 }
 
-.header-controls {
+.tooltip-content {
-  display: flex;
+  background: var(--tooltip-bg);
-  gap: 12px;
+  border: 2px solid var(--tooltip-border);
-  align-items: center;
+  border-radius: 8px;
-}
-
-.search-input {
-  flex: 1;
-  max-width: 500px;
-  padding: 10px 12px;
-  font-size: 14px;
-  border: 1px solid #cccccc;
-  border-radius: 4px;
-  background-color: #f5f5f5;
-  color: var(--text-primary);
-  transition: all 0.2s ease;
-  font-family: inherit;
-}
-
-.search-input:focus {
-  outline: none;
-  border-color: #999999;
-  background-color: #ffffff;
-  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
-}
-
-html.dark-theme .search-input {
-  border-color: #555555;
-  background-color: #1a1a1a;
-  color: #e0e0e0;
-}
-
-html.dark-theme .search-input:focus {
-  background-color: #2a2a2a;
-  border-color: #777777;
-  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
-}
-
-.search-input::placeholder {
-  color: var(--text-secondary);
-}
-
-.theme-toggle {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  border: 1px solid #cccccc;
-  border-radius: 4px;
-  background-color: #f5f5f5;
-  color: var(--text-primary);
-  cursor: pointer;
-  transition: all 0.2s ease;
-  font-size: 18px;
-  padding: 0;
-  flex-shrink: 0;
-}
-
-.theme-toggle:hover {
-  background-color: #e8e8e8;
-  border-color: #999999;
-}
-
-.theme-toggle:active {
-  transform: scale(0.95);
-}
-
-html.dark-theme .theme-toggle {
-  border-color: #555555;
-  background-color: #1a1a1a;
-  color: #e0e0e0;
-}
-
-html.dark-theme .theme-toggle:hover {
-  background-color: #2a2a2a;
-  border-color: #777777;
-}
-
-.cards-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
-  gap: 20px;
-  margin-top: 20px;
-}
-
-.deal-card {
-  background-color: var(--bg-secondary);
-  border: 1.5px solid #aaaaaa;
-  border-radius: 12px;
   padding: 16px;
-  display: flex;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  flex-direction: column;
-  transition: all 0.2s ease;
-  min-height: auto;
-}
-
-.deal-card:hover {
-  background-color: #15151515;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  border-color: #999999;
-}
-
-.card-header {
-  display: flex;
-  gap: 12px;
-  align-items: flex-start;
-  margin-bottom: 12px;
-  justify-content: space-between;
-}
-
-.title-with-link {
-  display: flex;
-  align-items: flex-start;
-  gap: 6px;
-  flex: 1;
-}
-
-.deal-title {
-  color: var(--link-color);
-  text-decoration: none;
-  font-weight: 500;
-  font-size: 15px;
-  line-height: 1.4;
-  flex: 1;
-  transition: color 0.2s ease;
-}
-
-.deal-title:visited {
-  color: var(--link-color);
-}
-
-.deal-title:hover {
-  text-decoration: underline;
-}
-
-.card-meta {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
   font-size: 13px;
-  margin-bottom: 12px;
+  color: var(--tooltip-text);
+  text-align: left;
+  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
 }
 
-.dealer-name {
+.tooltip-header {
-  color: var(--text-secondary);
+  font-weight: bold;
-  font-weight: 500;
+  font-size: 14px;
-  font-size: 13px;
-}
-
-.card-timestamp {
-  color: var(--text-secondary);
-  font-size: 12px;
-  margin-top: 8px;
-}
-
-.card-link {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--link-color);
-  text-decoration: none;
-  transition: all 0.2s ease;
-  flex-shrink: 0;
-}
-
-.card-link:hover {
-  opacity: 0.7;
-}
-
-.card-link .material-symbols-outlined {
-  font-size: 18px;
-}
-
-.score-bubble {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 50px;
-  height: 40px;
-  border-radius: 6px;
-  font-weight: 700;
-  font-size: 12px;
-  flex-shrink: 0;
-  transition: all 0.2s ease;
-  padding: 0 8px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
-  border: none;
-}
-
-.score-bubble.positive {
-  background-color: rgb(34, 139, 34);
-  color: white;
-  box-shadow: 0 1px 3px rgba(34, 139, 34, 0.2);
-}
-
-html.light-theme .score-bubble.positive {
-  background-color: rgb(34, 139, 34);
-  color: white;
-  box-shadow: 0 1px 3px rgba(34, 139, 34, 0.2);
-}
-
-html.dark-theme .score-bubble.positive {
-  background-color: rgb(158, 206, 106);
-  color: #1a1a1a;
-  box-shadow: 0 1px 3px rgba(158, 206, 106, 0.2);
-}
-
-.score-bubble.negative {
-  background-color: rgb(247, 118, 142);
-  color: white;
-  box-shadow: 0 1px 3px rgba(247, 118, 142, 0.2);
-}
-
-.score-bubble.neutral {
-  background-color: var(--text-secondary);
-  color: var(--bg-primary);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
-}
-
-.card-details {
-  margin-top: 12px;
-  padding-top: 12px;
-  border-top: 1px solid var(--border-color);
-}
-
-.details-stats {
-  display: flex;
-  gap: 16px;
-  margin-bottom: 12px;
-}
-
-.stat {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 13px;
-  color: var(--text-secondary);
-}
-
-.stat .material-symbols-outlined {
-  font-size: 18px;
-}
-
-.stat-value {
-  font-weight: 500;
-}
-
-.details-section {
-  margin-bottom: 12px;
-}
-
-.details-section strong {
-  display: block;
   color: var(--text-primary);
-  margin-bottom: 4px;
+  margin-bottom: 8px;
-  font-size: 13px;
+  white-space: normal;
-}
-
-.details-section p {
-  margin: 0;
-  color: var(--text-secondary);
-  font-size: 12px;
-  line-height: 1.4;
   word-wrap: break-word;
 }
 
-/* Mobile responsive */
+.tooltip-dealer {
-@media (max-width: 768px) {
+  font-size: 12px;
-  .cards-grid {
+  color: var(--text-secondary);
-    grid-template-columns: 1fr;
+  margin-bottom: 8px;
-  }
-
-  .container {
-    padding: 12px;
-  }
-
-  .search-input {
-    max-width: 100%;
-  }
 }
 
-/* Mark highlighting */
+.tooltip-stats {
-mark {
+  display: flex;
-  background-color: rgba(255, 193, 7, 0.3);
+  gap: 12px;
-  color: inherit;
+  margin-bottom: 8px;
-  font-weight: 600;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.stat-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.stat-item .material-symbols-outlined {
+  font-size: 16px;
+}
+
+.tooltip-description {
+  margin-bottom: 8px;
+  padding: 8px;
+  background: var(--bg-secondary);
+  border-left: 2px solid var(--tooltip-border);
   border-radius: 2px;
+  font-size: 12px;
+  white-space: normal;
+  word-wrap: break-word;
+  max-height: 60px;
+  overflow-y: auto;
+  color: var(--text-primary);
 }
 
-html.dark-theme mark {
+.tooltip-first-post {
-  background-color: rgba(255, 193, 7, 0.4);
+  margin-bottom: 8px;
-  color: inherit;
+  padding: 8px;
-  font-weight: 600;
+  background: var(--bg-secondary);
+  border-left: 2px solid var(--tooltip-border);
   border-radius: 2px;
+  font-size: 12px;
+  white-space: normal;
+  word-wrap: break-word;
+  max-height: 60px;
+  overflow-y: auto;
+  color: var(--text-primary);
+}
+
+.tooltip-times {
+  font-size: 11px;
+  color: var(--text-secondary);
+  border-top: 1px solid var(--border-color);
+  padding-top: 8px;
+  margin-top: 8px;
 }

vite.config.mjs

@@ -1,6 +1,7 @@
 // Plugins
 import Components from "unplugin-vue-components/vite";
 import Vue from "@vitejs/plugin-vue";
+import Vuetify, { transformAssetUrls } from "vite-plugin-vuetify";
 
 // Utilities
 import { defineConfig } from "vite";
@@ -9,9 +10,16 @@ import { fileURLToPath, URL } from "node:url";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    Vue(),
+    Vue({
+      template: { transformAssetUrls },
+    }),
+    Vuetify(),
     Components(),
   ],
+  optimizeDeps: {
+    exclude: ["vuetify"],
+    include: ["axios", "vue-router", "vue-loading-overlay"],
+  },
   define: { "process.env": {} },
   resolve: {
     alias: {
@@ -46,6 +54,7 @@ export default defineConfig({
     rollupOptions: {
       output: {
         manualChunks: {
+          "vuetify": ["vuetify"],
           "vendor": ["axios", "dayjs", "vue-router", "vue-loading-overlay"],
         },
         chunkFileNames: "js/[name].[hash].js",