Update dependency @vitejs/plugin-vue to v6

.dockerignore

@@ -1,4 +1 @@
-node_modules
+backend
-dist
-.git
-.github

.eslintignore

@@ -1,2 +0,0 @@
-dist/
-node_modules/

.github/workflows/publish-container.yml

@@ -1,50 +0,0 @@
-name: Publish Container
-on:
-  push:
-    branches:
-      - main
-  pull_request:
-  schedule:
-    - cron: "0 0 * * 0"
-
-jobs:
-  publish:
-    name: Publish rfd-fyi
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v6
-
-      - name: Prepare
-        id: prep
-        run: |
-          IMAGE_NAME=ghcr.io/${{ github.repository_owner }}/rfd-fyi
-          VERSION=${GITHUB_REF##*/}
-          if [[ $GITHUB_REF == refs/heads/main ]]; then
-            VERSION=latest
-          fi
-          if [[ $GITHUB_REF == refs/tags/* ]]; then
-            VERSION=${GITHUB_REF#refs/tags/v}
-          fi
-          TAGS="${IMAGE_NAME}:${VERSION}"
-          if [[ $VERSION =~ ^[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}$ ]]; then
-            TAGS="$TAGS,${IMAGE_NAME}:latest"
-          fi
-          echo "tags=${TAGS}" >> $GITHUB_OUTPUT
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Login to GitHub Packages Docker Registry
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Build / push
-        uses: docker/build-push-action@v6
-        with:
-          context: .
-          file: ./Dockerfile
-          push: ${{ github.ref == 'refs/heads/main' }}
-          tags: ${{ steps.prep.outputs.tags }}

.github/workflows/publish-containers.yml

@@ -0,0 +1,87 @@
+name: Publish Containers
+on: 
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  publish-backend:
+    name: Publish rfd-fyi-backend
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+
+      - name: Prepare
+        id: prep
+        run: |
+          IMAGE_NAME=ghcr.io/${{ github.repository_owner }}/rfd-fyi-backend
+          VERSION=${GITHUB_REF##*/}
+          if [[ $GITHUB_REF == refs/heads/main ]]; then
+            VERSION=latest
+          fi
+          if [[ $GITHUB_REF == refs/tags/* ]]; then
+            VERSION=${GITHUB_REF#refs/tags/v}
+          fi
+          TAGS="${IMAGE_NAME}:${VERSION}"
+          if [[ $VERSION =~ ^[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}$ ]]; then
+            TAGS="$TAGS,${IMAGE_NAME}:latest"
+          fi
+          echo ::set-output name=tags::${TAGS}
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to GitHub Packages Docker Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build / push
+        uses: docker/build-push-action@v6
+        with:
+          context: backend
+          file: ./backend/Dockerfile
+          push: ${{ github.ref == 'refs/heads/main' }}
+          tags: ${{ steps.prep.outputs.tags }}
+
+  publish-frontend:
+    name: Publish rfd-fyi-frontend
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+
+      - name: Prepare
+        id: prep
+        run: |
+          IMAGE_NAME=ghcr.io/${{ github.repository_owner }}/rfd-fyi-frontend
+          VERSION=${GITHUB_REF##*/}
+          if [[ $GITHUB_REF == refs/heads/main ]]; then
+            VERSION=latest
+          fi
+          if [[ $GITHUB_REF == refs/tags/* ]]; then
+            VERSION=${GITHUB_REF#refs/tags/v}
+          fi
+          TAGS="${IMAGE_NAME}:${VERSION}"
+          if [[ $VERSION =~ ^[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}$ ]]; then
+            TAGS="$TAGS,${IMAGE_NAME}:latest"
+          fi
+          echo ::set-output name=tags::${TAGS}
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to GitHub Packages Docker Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build / push
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          file: ./Dockerfile
+          push: ${{ github.ref == 'refs/heads/main' }}
+          tags: ${{ steps.prep.outputs.tags }}

.gitignore

@@ -1,5 +1,5 @@
 node_modules
-/dist
+dist
 data/
 backend/bin/
 .vscode

Caddyfile

@@ -0,0 +1,8 @@
+{
+    auto_https off
+}
+
+:80 {
+    file_server
+    reverse_proxy /api/* rfd-fyi-backend:8080
+}

Dockerfile

@@ -1,20 +1,20 @@
-# Build frontend
+FROM node:20.2.0-alpine3.16 as builder
-FROM dhi.io/node:25-debian13-dev AS frontend-builder
+
 WORKDIR /app
+
 COPY package*.json ./
+
 RUN npm install
+
 COPY . .
+
 RUN npm run build
 
-# Build backend (with embedded frontend)
+FROM caddy:2.10.2-alpine as runtime
-FROM dhi.io/golang:1.26-debian13-dev AS backend-builder
-WORKDIR /src
-COPY backend /src
-COPY --from=frontend-builder /app/dist /src/dist
-RUN CGO_ENABLED=0 go build -o rfd-fyi .
 
-FROM dhi.io/static:20251003-musl-alpine3.23 AS runtime
+WORKDIR /my-site
-COPY --from=backend-builder /src/rfd-fyi /rfd-fyi
+
+COPY --from=builder /app/dist ./
+
+COPY Caddyfile /etc/caddy/Caddyfile
 
-EXPOSE 8080
-ENTRYPOINT ["/rfd-fyi"]

Makefile

@@ -15,7 +15,7 @@ help:
 
 ## backend: Build and run the backend from source
 backend:
-	@cd backend && CGO_ENABLED=0 HTTP_PORT=8080 go run .
+	@cd backend && CGO_ENABLED=0 go run .
 .PHONY: backend
 
 ## frontend: Build and run the frontend from source
@@ -23,21 +23,20 @@ frontend:
 	@npm run serve
 .PHONY: frontend
 
-## dev: Build and run in Docker
+## dev: Build and run in docker compose
 dev:
-	docker build -t rfd-fyi:dev .
+	docker compose up --build -d
-	docker run -d --name rfd-fyi -p 8080:8080 rfd-fyi:dev
 .PHONY: dev
 
-## prod: Run the latest image in Docker
+## prod: Run the latest images in docker compose
 prod:
 	@git pull
-	@docker pull ghcr.io/davegallant/rfd-fyi
+	@docker pull ghcr.io/davegallant/rfd-fyi-backend
-	@docker run -d --name rfd-fyi -p 8080:8080 ghcr.io/davegallant/rfd-fyi
+	@docker pull ghcr.io/davegallant/rfd-fyi-frontend
+	@docker compose -f docker-compose.prod.yml up -d
 .PHONY: prod
 
-## teardown: Teardown Docker
+## teardown: Teardown docker
 teardown:
-	docker stop rfd-fyi || true
+	docker compose down
-	docker rm rfd-fyi || true
 .PHONY: teardown

README.md

@@ -4,30 +4,30 @@ This repository provides a simple, less-distracting overlay for hot deals posted
 
 The frontend is made with Vue 3 and the backend is written in Go. The backend exists for caching purposes; to prevent excessive requests to RedFlagDeals itself.
 
-## Docker
-
-To run the latest:
-
-```sh
-docker run -d --name rfd-fyi -p 8080:8080 ghcr.io/davegallant/rfd-fyi
-```
-
-To build container from source:
-
-```sh
-make dev
-```
-
 ## Local Development
 
-To get up and running locally: in one shell, run:
+To get up and running locally: in one pane/tab, run:
 
 ```sh
 make backend
 ```
 
-In another shell, run:
+In another pane/tab, run:
 
 ```sh
 make frontend
 ```
+
+## Docker Compose
+
+To build containers from source:
+
+```sh
+make dev
+```
+
+To run the latest published images:
+
+```sh
+make prod
+```

backend/Dockerfile

@@ -0,0 +1,16 @@
+# syntax=docker/dockerfile:1.21
+FROM cgr.dev/chainguard/go:latest AS build
+
+WORKDIR /src
+
+COPY . /src
+
+RUN CGO_ENABLED=0 go build -o backend .
+
+FROM cgr.dev/chainguard/static:latest
+
+COPY --from=build /src/backend /backend
+
+EXPOSE 8080
+
+CMD [ "/backend" ]

backend/app.go

@@ -1,12 +1,10 @@
 package main
 
 import (
-	"embed"
 	"encoding/json"
 	"fmt"
-	"io"
+	"io/ioutil"
-	"io/fs"
+	"math/rand"
-	"math/rand/v2"
 	"net/http"
 	"net/url"
 	"strings"
@@ -19,8 +17,20 @@ import (
 	"github.com/gorilla/mux"
 )
 
-//go:embed dist/*
+// @title           RFD FYI API
-var frontendFS embed.FS
+// @version         1.0
+// @description     An API for issue tracking
+// @termsOfService  http://swagger.io/terms/
+
+// @contact.name   API Support
+// @contact.url    https://linktr.ee/davegallant
+// @contact.email  davegallant@gmail.com
+
+// @license.name  Apache 2.0
+// @license.url   http://www.apache.org/licenses/LICENSE-2.0.html
+
+// @host      localhost:8080
+// @BasePath  /api/v1
 
 type App struct {
 	Router        *mux.Router
@@ -38,45 +48,22 @@ type Redirect struct {
 func (a *App) Initialize() {
 	a.BasePath = "/api/v1"
 
-	a.Router = mux.NewRouter()
+	a.Router = mux.NewRouter().PathPrefix(a.BasePath).Subrouter()
+	http.Handle("/", a.Router)
+
 	a.initializeRoutes()
 }
 
 func (a *App) Run(httpPort string) {
 	log.Info().Msgf("Serving requests on port " + httpPort)
-	if err := http.ListenAndServe(fmt.Sprintf(":%s", httpPort), a.Router); err != nil {
+	if err := http.ListenAndServe(fmt.Sprintf(":"+httpPort), nil); err != nil {
 		panic(err)
 	}
 }
 
 func (a *App) initializeRoutes() {
-	a.Router.HandleFunc(a.BasePath+"/topics", a.listTopics).Methods("GET")
+	a.Router.HandleFunc("/topics", a.listTopics).Methods("GET")
-	a.Router.HandleFunc(a.BasePath+"/topics/{id}", a.getTopicDetails).Methods("GET")
+	a.Router.HandleFunc("/topics/{id}", a.getTopicDetails).Methods("GET")
-
-	distFS, err := fs.Sub(frontendFS, "dist")
-	if err != nil {
-		panic(err)
-	}
-	fileServer := http.FileServer(http.FS(distFS))
-	a.Router.PathPrefix("/").Handler(spaHandler{staticHandler: fileServer, staticFS: distFS})
-}
-
-// spaHandler serves static files when they exist, otherwise falls back to
-// index.html so that client-side routing works.
-type spaHandler struct {
-	staticHandler http.Handler
-	staticFS      fs.FS
-}
-
-func (h spaHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
-	path := strings.TrimPrefix(r.URL.Path, "/")
-	if path == "" {
-		path = "index.html"
-	}
-	if _, err := fs.Stat(h.staticFS, path); err != nil {
-		r.URL.Path = "/"
-	}
-	h.staticHandler.ServeHTTP(w, r)
 }
 
 // func respondWithError(w http.ResponseWriter, code int, message string) {
@@ -95,47 +82,10 @@ func respondWithJSON(w http.ResponseWriter, code int, payload interface{}) {
 // @Summary      Lists all topics stored in the database
 // @Description  All topics will be listed. There is currently no pagination implemented.
 // @ID           list-topics
-// @Param        filters query string false "JSON array of filter strings"
 // @Router       /topics [get]
 // @Success 200 {array} Topic
 func (a *App) listTopics(w http.ResponseWriter, r *http.Request) {
-	filtersParam := r.URL.Query().Get("filters")
+	respondWithJSON(w, http.StatusOK, a.CurrentTopics)
-	
-	if filtersParam == "" {
-		respondWithJSON(w, http.StatusOK, a.CurrentTopics)
-		return
-	}
-
-	var filters []string
-	err := json.Unmarshal([]byte(filtersParam), &filters)
-	if err != nil {
-		log.Warn().Msgf("could not parse filters parameter: %s", err)
-		respondWithJSON(w, http.StatusOK, a.CurrentTopics)
-		return
-	}
-
-	if len(filters) == 0 {
-		respondWithJSON(w, http.StatusOK, a.CurrentTopics)
-		return
-	}
-
-	// Filter topics
-	var filteredTopics []Topic
-	for _, topic := range a.CurrentTopics {
-		searchText := strings.ToLower(topic.Title + " [" + topic.Offer.DealerName + "]")
-		matchesAll := true
-		for _, filter := range filters {
-			if !strings.Contains(searchText, strings.ToLower(filter)) {
-				matchesAll = false
-				break
-			}
-		}
-		if matchesAll {
-			filteredTopics = append(filteredTopics, topic)
-		}
-	}
-
-	respondWithJSON(w, http.StatusOK, filteredTopics)
 }
 
 // getTopicDetails godoc
@@ -173,7 +123,7 @@ func (a *App) getTopicDetails(w http.ResponseWriter, r *http.Request) {
 	}
 	defer res.Body.Close()
 
-	body, err := io.ReadAll(res.Body)
+	body, err := ioutil.ReadAll(res.Body)
 	if err != nil {
 		log.Warn().Msgf("could not read response body: %s\n", err)
 		respondWithJSON(w, http.StatusInternalServerError, map[string]string{"error": "Failed to read response"})
@@ -238,7 +188,8 @@ func (a *App) refreshTopics() {
 		}
 
 		a.LastRefresh = time.Now()
-		time.Sleep(time.Duration(rand.IntN(90-60+1)+60) * time.Second)
+		rand.Seed(time.Now().UnixNano())
+		time.Sleep(time.Duration(rand.Intn(90-60+1)+60) * time.Second)
 	}
 }
 
@@ -311,7 +262,7 @@ func (a *App) getDeals(id int, firstPage int, lastPage int) []Topic {
 		if err != nil {
 			log.Warn().Msgf("error fetching deals: %s\n", err)
 		}
-		body, err := io.ReadAll(res.Body)
+		body, err := ioutil.ReadAll(res.Body)
 		if err != nil {
 			log.Warn().Msgf("could not read response body: %s\n", err)
 		}
@@ -341,7 +292,7 @@ func (a *App) getRedirects() []Redirect {
 	if err != nil {
 		log.Warn().Msgf("error fetching redirects: %s\n", err)
 	}
-	body, err := io.ReadAll(res.Body)
+	body, err := ioutil.ReadAll(res.Body)
 	if err != nil {
 		log.Warn().Msgf("could not read response body: %s\n", err)
 	}

backend/dist/index.html

@@ -1,6 +0,0 @@
-<!doctype html>
-<html>
-<body>
-<p>Run the Vite dev server for the frontend.</p>
-</body>
-</html>

backend/main.go

@@ -11,6 +11,21 @@ import (
 	utils "github.com/davegallant/rfd-fyi/pkg/utils"
 )
 
+// @title           RFD FYI API
+// @version         1.0
+// @description     An API for an issue tracking service
+// @termsOfService  http://swagger.io/terms/
+
+// @contact.name   API Support
+// @contact.url    http://www.swagger.io/support
+// @contact.email  support@swagger.io
+
+// @license.name  Apache 2.0
+// @license.url   http://www.apache.org/licenses/LICENSE-2.0.html
+
+// @host      localhost:8080
+// @BasePath  /api/v1
+
 func main() {
 	log.Logger = log.Output(zerolog.ConsoleWriter{Out: os.Stderr})
 

docker-compose.prod.yml

@@ -0,0 +1,16 @@
+services:
+  frontend:
+    image: ghcr.io/davegallant/rfd-fyi-frontend
+    ports:
+      - 80:80
+      - 443:443
+    links:
+      - "backend:backend"
+    volumes:
+      - ./data:/data
+    restart: always
+  backend:
+    image: ghcr.io/davegallant/rfd-fyi-backend
+    ports:
+      - 8080:8080
+    restart: always

docker-compose.yml

@@ -0,0 +1,18 @@
+services:
+  frontend:
+    build:
+      dockerfile: Dockerfile
+      context: .
+    ports:
+      - 80:80
+      - 443:443
+    links:
+      - "backend:backend"
+    volumes:
+      - ./data:/data
+  backend:
+    build:
+      dockerfile: Dockerfile
+      context: backend
+    ports:
+      - 8080:8080

flake.nix

@@ -14,12 +14,21 @@
       {
         devShells.default = pkgs.mkShell {
           buildInputs = with pkgs; [
-            nodejs_25
+            # Node.js LTS with npm
+            nodejs_20
+
+            # Go for backend
             go
+
+            # Build tools
             pkg-config
+
+            # Development utilities
             git
             curl
             jq
+
+            # Optional: for better development experience
             gnumake
           ];
 

index.html

@@ -3,28 +3,28 @@
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <meta name="description" content="An alternative frontend for hot deals" />
+    <meta name="description" content="An overlay of rfd deals" />
-
+    
     <!-- DNS prefetch for faster Google Fonts resolution -->
     <link rel="dns-prefetch" href="https://fonts.googleapis.com" />
     <link rel="dns-prefetch" href="https://fonts.gstatic.com" />
-
+    
     <!-- Preconnect for faster font loading -->
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-
+    
     <link rel="icon" href="/favicon.png" />
-
+    
     <!-- Load Material Symbols font with optimal display settings -->
 
     <link
       rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block"
     />
-
+    
-    <title>rfd-fyi</title>
+    <title>rfd-fyi - An overlay of hot deals</title>
-
+    
     <!-- Analytics - loaded async/defer so it doesn't block page -->
     <script
       async
@@ -32,7 +32,7 @@
       src="https://umami.davegallant.ca/script.js"
       data-website-id="59ffe8be-509a-471e-8cd6-a63c5b35b7aa"
     ></script>
-
+    
     <!-- Theme detection script - runs before Vue loads to prevent flash of unstyled content -->
     <script>
       (function() {
@@ -41,19 +41,19 @@
         if (!savedTheme) {
           return; // Let Vue handle default theme
         }
-
+        
         const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
         let theme = savedTheme;
-
+        
         // Handle 'auto' theme preference
         if (theme === 'auto') {
           theme = prefersDark ? 'dark' : 'light';
         }
-
+        
         // Apply theme to html element
         document.documentElement.setAttribute('data-bs-theme', theme);
         document.documentElement.setAttribute('data-theme', theme);
-
+        
         // Apply theme classes
         if (theme === 'dark') {
           document.documentElement.classList.add('dark-theme');

package-lock.json

@@ -8,7 +8,7 @@
       "name": "rfd-fyi",
       "version": "0.1.0",
       "dependencies": {
-        "@fontsource/roboto": "5.2.10",
+        "@fontsource/roboto": "5.2.9",
         "@github/hotkey": "^3.0.0",
         "@mdi/font": "7.4.47",
         "@popperjs/core": "^2.11.8",
@@ -23,7 +23,7 @@
       "devDependencies": {
         "@babel/core": "^7.22.10",
         "@babel/eslint-parser": "^7.22.10",
-        "@vitejs/plugin-vue": "^5.2.3",
+        "@vitejs/plugin-vue": "^6.0.0",
         "@vue/cli-plugin-babel": "~5.0.0",
         "@vue/cli-plugin-eslint": "~5.0.0",
         "@vue/cli-service": "^5.0.9",
@@ -2238,9 +2238,9 @@
       }
     },
     "node_modules/@fontsource/roboto": {
-      "version": "5.2.10",
+      "version": "5.2.9",
-      "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.2.10.tgz",
+      "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.2.9.tgz",
-      "integrity": "sha512-8HlA5FtSfz//oFSr2eL7GFXAiE7eIkcGOtx7tjsLKq+as702x9+GU7K95iDeWFapHC4M2hv9RrpXKRTGGBI8Zg==",
+      "integrity": "sha512-ZTkyHiPk74B/aj8BZWbsxD5Yu+Lq+nR64eV4wirlrac2qXR7jYk2h6JlLYuOuoruTkGQWNw2fMuKNavw7/rg0w==",
       "license": "OFL-1.1",
       "funding": {
         "url": "https://github.com/sponsors/ayuhito"
@@ -2764,10 +2764,17 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-rc.2",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.2.tgz",
+      "integrity": "sha512-izyXV/v+cHiRfozX62W9htOAvwMo4/bXKDrQ+vom1L1qRuexPock/7VZDAhnpHCLNejd3NJ6hiab+tO0D44Rgw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.59.0",
+      "version": "4.49.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.59.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.49.0.tgz",
-      "integrity": "sha512-upnNBkA6ZH2VKGcBj9Fyl9IGNPULcjXRlg0LLeaioQWueH30p6IXtJEbKAgvyv+mJaMxSm1l6xwDXYjpEMiLMg==",
+      "integrity": "sha512-rlKIeL854Ed0e09QGYFlmDNbka6I3EQFw7iZuugQjMb11KMpJCLPFL4ZPbMfaEhLADEL1yx0oujGkBQ7+qW3eA==",
       "cpu": [
         "arm"
       ],
@@ -2779,9 +2786,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.59.0",
+      "version": "4.49.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.59.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.49.0.tgz",
-      "integrity": "sha512-hZ+Zxj3SySm4A/DylsDKZAeVg0mvi++0PYVceVyX7hemkw7OreKdCvW2oQ3T1FMZvCaQXqOTHb8qmBShoqk69Q==",
+      "integrity": "sha512-cqPpZdKUSQYRtLLr6R4X3sD4jCBO1zUmeo3qrWBCqYIeH8Q3KRL4F3V7XJ2Rm8/RJOQBZuqzQGWPjjvFUcYa/w==",
       "cpu": [
         "arm64"
       ],
@@ -2793,9 +2800,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.59.0",
+      "version": "4.49.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.59.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.49.0.tgz",
-      "integrity": "sha512-W2Psnbh1J8ZJw0xKAd8zdNgF9HRLkdWwwdWqubSVk0pUuQkoHnv7rx4GiF9rT4t5DIZGAsConRE3AxCdJ4m8rg==",
+      "integrity": "sha512-99kMMSMQT7got6iYX3yyIiJfFndpojBmkHfTc1rIje8VbjhmqBXE+nb7ZZP3A5skLyujvT0eIUCUsxAe6NjWbw==",
       "cpu": [
         "arm64"
       ],
@@ -2807,9 +2814,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.59.0",
+      "version": "4.49.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.59.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.49.0.tgz",
-      "integrity": "sha512-ZW2KkwlS4lwTv7ZVsYDiARfFCnSGhzYPdiOU4IM2fDbL+QGlyAbjgSFuqNRbSthybLbIJ915UtZBtmuLrQAT/w==",
+      "integrity": "sha512-y8cXoD3wdWUDpjOLMKLx6l+NFz3NlkWKcBCBfttUn+VGSfgsQ5o/yDUGtzE9HvsodkP0+16N0P4Ty1VuhtRUGg==",
       "cpu": [
         "x64"
       ],
@@ -2821,9 +2828,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.59.0",
+      "version": "4.49.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.59.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.49.0.tgz",
-      "integrity": "sha512-EsKaJ5ytAu9jI3lonzn3BgG8iRBjV4LxZexygcQbpiU0wU0ATxhNVEpXKfUa0pS05gTcSDMKpn3Sx+QB9RlTTA==",
+      "integrity": "sha512-3mY5Pr7qv4GS4ZvWoSP8zha8YoiqrU+e0ViPvB549jvliBbdNLrg2ywPGkgLC3cmvN8ya3za+Q2xVyT6z+vZqA==",
       "cpu": [
         "arm64"
       ],
@@ -2835,9 +2842,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.59.0",
+      "version": "4.49.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.59.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.49.0.tgz",
-      "integrity": "sha512-d3DuZi2KzTMjImrxoHIAODUZYoUUMsuUiY4SRRcJy6NJoZ6iIqWnJu9IScV9jXysyGMVuW+KNzZvBLOcpdl3Vg==",
+      "integrity": "sha512-C9KzzOAQU5gU4kG8DTk+tjdKjpWhVWd5uVkinCwwFub2m7cDYLOdtXoMrExfeBmeRy9kBQMkiyJ+HULyF1yj9w==",
       "cpu": [
         "x64"
       ],
@@ -2849,9 +2856,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.59.0",
+      "version": "4.49.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.59.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.49.0.tgz",
-      "integrity": "sha512-t4ONHboXi/3E0rT6OZl1pKbl2Vgxf9vJfWgmUoCEVQVxhW6Cw/c8I6hbbu7DAvgp82RKiH7TpLwxnJeKv2pbsw==",
+      "integrity": "sha512-OVSQgEZDVLnTbMq5NBs6xkmz3AADByCWI4RdKSFNlDsYXdFtlxS59J+w+LippJe8KcmeSSM3ba+GlsM9+WwC1w==",
       "cpu": [
         "arm"
       ],
@@ -2863,9 +2870,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.59.0",
+      "version": "4.49.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.59.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.49.0.tgz",
-      "integrity": "sha512-CikFT7aYPA2ufMD086cVORBYGHffBo4K8MQ4uPS/ZnY54GKj36i196u8U+aDVT2LX4eSMbyHtyOh7D7Zvk2VvA==",
+      "integrity": "sha512-ZnfSFA7fDUHNa4P3VwAcfaBLakCbYaxCk0jUnS3dTou9P95kwoOLAMlT3WmEJDBCSrOEFFV0Y1HXiwfLYJuLlA==",
       "cpu": [
         "arm"
       ],
@@ -2877,9 +2884,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.59.0",
+      "version": "4.49.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.59.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.49.0.tgz",
-      "integrity": "sha512-jYgUGk5aLd1nUb1CtQ8E+t5JhLc9x5WdBKew9ZgAXg7DBk0ZHErLHdXM24rfX+bKrFe+Xp5YuJo54I5HFjGDAA==",
+      "integrity": "sha512-Z81u+gfrobVK2iV7GqZCBfEB1y6+I61AH466lNK+xy1jfqFLiQ9Qv716WUM5fxFrYxwC7ziVdZRU9qvGHkYIJg==",
       "cpu": [
         "arm64"
       ],
@@ -2891,9 +2898,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.59.0",
+      "version": "4.49.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.59.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.49.0.tgz",
-      "integrity": "sha512-peZRVEdnFWZ5Bh2KeumKG9ty7aCXzzEsHShOZEFiCQlDEepP1dpUl/SrUNXNg13UmZl+gzVDPsiCwnV1uI0RUA==",
+      "integrity": "sha512-zoAwS0KCXSnTp9NH/h9aamBAIve0DXeYpll85shf9NJ0URjSTzzS+Z9evmolN+ICfD3v8skKUPyk2PO0uGdFqg==",
       "cpu": [
         "arm64"
       ],
@@ -2904,24 +2911,10 @@
         "linux"
       ]
     },
-    "node_modules/@rollup/rollup-linux-loong64-gnu": {
+    "node_modules/@rollup/rollup-linux-loongarch64-gnu": {
-      "version": "4.59.0",
+      "version": "4.49.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.59.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.49.0.tgz",
-      "integrity": "sha512-gbUSW/97f7+r4gHy3Jlup8zDG190AuodsWnNiXErp9mT90iCy9NKKU0Xwx5k8VlRAIV2uU9CsMnEFg/xXaOfXg==",
+      "integrity": "sha512-2QyUyQQ1ZtwZGiq0nvODL+vLJBtciItC3/5cYN8ncDQcv5avrt2MbKt1XU/vFAJlLta5KujqyHdYtdag4YEjYQ==",
-      "cpu": [
-        "loong64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-loong64-musl": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.59.0.tgz",
-      "integrity": "sha512-yTRONe79E+o0FWFijasoTjtzG9EBedFXJMl888NBEDCDV9I2wGbFFfJQQe63OijbFCUZqxpHz1GzpbtSFikJ4Q==",
       "cpu": [
         "loong64"
       ],
@@ -2933,23 +2926,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-ppc64-gnu": {
-      "version": "4.59.0",
+      "version": "4.49.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.59.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.49.0.tgz",
-      "integrity": "sha512-sw1o3tfyk12k3OEpRddF68a1unZ5VCN7zoTNtSn2KndUE+ea3m3ROOKRCZxEpmT9nsGnogpFP9x6mnLTCaoLkA==",
+      "integrity": "sha512-k9aEmOWt+mrMuD3skjVJSSxHckJp+SiFzFG+v8JLXbc/xi9hv2icSkR3U7uQzqy+/QbbYY7iNB9eDTwrELo14g==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-ppc64-musl": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.59.0.tgz",
-      "integrity": "sha512-+2kLtQ4xT3AiIxkzFVFXfsmlZiG5FXYW7ZyIIvGA7Bdeuh9Z0aN4hVyXS/G1E9bTP/vqszNIN/pUKCk/BTHsKA==",
       "cpu": [
         "ppc64"
       ],
@@ -2961,9 +2940,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.59.0",
+      "version": "4.49.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.59.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.49.0.tgz",
-      "integrity": "sha512-NDYMpsXYJJaj+I7UdwIuHHNxXZ/b/N2hR15NyH3m2qAtb/hHPA4g4SuuvrdxetTdndfj9b1WOmy73kcPRoERUg==",
+      "integrity": "sha512-rDKRFFIWJ/zJn6uk2IdYLc09Z7zkE5IFIOWqpuU0o6ZpHcdniAyWkwSUWE/Z25N/wNDmFHHMzin84qW7Wzkjsw==",
       "cpu": [
         "riscv64"
       ],
@@ -2975,9 +2954,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-musl": {
-      "version": "4.59.0",
+      "version": "4.49.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.59.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.49.0.tgz",
-      "integrity": "sha512-nLckB8WOqHIf1bhymk+oHxvM9D3tyPndZH8i8+35p/1YiVoVswPid2yLzgX7ZJP0KQvnkhM4H6QZ5m0LzbyIAg==",
+      "integrity": "sha512-FkkhIY/hYFVnOzz1WeV3S9Bd1h0hda/gRqvZCMpHWDHdiIHn6pqsY3b5eSbvGccWHMQ1uUzgZTKS4oGpykf8Tw==",
       "cpu": [
         "riscv64"
       ],
@@ -2989,9 +2968,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.59.0",
+      "version": "4.49.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.59.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.49.0.tgz",
-      "integrity": "sha512-oF87Ie3uAIvORFBpwnCvUzdeYUqi2wY6jRFWJAy1qus/udHFYIkplYRW+wo+GRUP4sKzYdmE1Y3+rY5Gc4ZO+w==",
+      "integrity": "sha512-gRf5c+A7QiOG3UwLyOOtyJMD31JJhMjBvpfhAitPAoqZFcOeK3Kc1Veg1z/trmt+2P6F/biT02fU19GGTS529A==",
       "cpu": [
         "s390x"
       ],
@@ -3003,9 +2982,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.59.0",
+      "version": "4.49.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.59.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.49.0.tgz",
-      "integrity": "sha512-3AHmtQq/ppNuUspKAlvA8HtLybkDflkMuLK4DPo77DfthRb71V84/c4MlWJXixZz4uruIH4uaa07IqoAkG64fg==",
+      "integrity": "sha512-BR7+blScdLW1h/2hB/2oXM+dhTmpW3rQt1DeSiCP9mc2NMMkqVgjIN3DDsNpKmezffGC9R8XKVOLmBkRUcK/sA==",
       "cpu": [
         "x64"
       ],
@@ -3017,9 +2996,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.59.0",
+      "version": "4.49.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.59.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.49.0.tgz",
-      "integrity": "sha512-2UdiwS/9cTAx7qIUZB/fWtToJwvt0Vbo0zmnYt7ED35KPg13Q0ym1g442THLC7VyI6JfYTP4PiSOWyoMdV2/xg==",
+      "integrity": "sha512-hDMOAe+6nX3V5ei1I7Au3wcr9h3ktKzDvF2ne5ovX8RZiAHEtX1A5SNNk4zt1Qt77CmnbqT+upb/umzoPMWiPg==",
       "cpu": [
         "x64"
       ],
@@ -3030,38 +3009,10 @@
         "linux"
       ]
     },
-    "node_modules/@rollup/rollup-openbsd-x64": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.59.0.tgz",
-      "integrity": "sha512-M3bLRAVk6GOwFlPTIxVBSYKUaqfLrn8l0psKinkCFxl4lQvOSz8ZrKDz2gxcBwHFpci0B6rttydI4IpS4IS/jQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openbsd"
-      ]
-    },
-    "node_modules/@rollup/rollup-openharmony-arm64": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.59.0.tgz",
-      "integrity": "sha512-tt9KBJqaqp5i5HUZzoafHZX8b5Q2Fe7UjYERADll83O4fGqJ49O1FsL6LpdzVFQcpwvnyd0i+K/VSwu/o/nWlA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openharmony"
-      ]
-    },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.59.0",
+      "version": "4.49.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.59.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.49.0.tgz",
-      "integrity": "sha512-V5B6mG7OrGTwnxaNUzZTDTjDS7F75PO1ae6MJYdiMu60sq0CqN5CVeVsbhPxalupvTX8gXVSU9gq+Rx1/hvu6A==",
+      "integrity": "sha512-wkNRzfiIGaElC9kXUT+HLx17z7D0jl+9tGYRKwd8r7cUqTL7GYAvgUY++U2hK6Ar7z5Z6IRRoWC8kQxpmM7TDA==",
       "cpu": [
         "arm64"
       ],
@@ -3073,9 +3024,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.59.0",
+      "version": "4.49.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.59.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.49.0.tgz",
-      "integrity": "sha512-UKFMHPuM9R0iBegwzKF4y0C4J9u8C6MEJgFuXTBerMk7EJ92GFVFYBfOZaSGLu6COf7FxpQNqhNS4c4icUPqxA==",
+      "integrity": "sha512-gq5aW/SyNpjp71AAzroH37DtINDcX1Qw2iv9Chyz49ZgdOP3NV8QCyKZUrGsYX9Yyggj5soFiRCgsL3HwD8TdA==",
       "cpu": [
         "ia32"
       ],
@@ -3086,24 +3037,10 @@
         "win32"
       ]
     },
-    "node_modules/@rollup/rollup-win32-x64-gnu": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.59.0.tgz",
-      "integrity": "sha512-laBkYlSS1n2L8fSo1thDNGrCTQMmxjYY5G0WFWjFFYZkKPjsMBsgJfGf4TLxXrF6RyhI60L8TMOjBMvXiTcxeA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.59.0",
+      "version": "4.49.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.59.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.49.0.tgz",
-      "integrity": "sha512-2HRCml6OztYXyJXAvdDXPKcawukWY2GpR5/nxKp4iBgiO3wcoEGkAaqctIbZcNB6KlUQBIqt8VYkNSj2397EfA==",
+      "integrity": "sha512-gEtqFbzmZLFk2xKh7g0Rlo8xzho8KrEFEkzvHbfUGkrgXOpZ4XagQ6n+wIZFNh1nTb8UD16J4nFSFKXYgnbdBg==",
       "cpu": [
         "x64"
       ],
@@ -3445,16 +3382,19 @@
       "license": "ISC"
     },
     "node_modules/@vitejs/plugin-vue": {
-      "version": "5.2.4",
+      "version": "6.0.4",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.4.tgz",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.4.tgz",
-      "integrity": "sha512-7Yx/SXSOcQq5HiiV3orevHUFn+pmMB4cgbEkDYgnkUWb0WfeQ/wa2yFv6D5ICiCQOVpjA7vYDXrC7AGO8yjDHA==",
+      "integrity": "sha512-uM5iXipgYIn13UUQCZNdWkYk+sysBeA97d5mHsAoAt1u/wpN3+zxOmsVJWosuzX+IMGRzeYUNytztrYznboIkQ==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "@rolldown/pluginutils": "1.0.0-rc.2"
+      },
       "engines": {
-        "node": "^18.0.0 || >=20.0.0"
+        "node": "^20.19.0 || >=22.12.0"
       },
       "peerDependencies": {
-        "vite": "^5.0.0 || ^6.0.0",
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0",
         "vue": "^3.2.25"
       }
     },
@@ -4608,13 +4548,13 @@
       "license": "ISC"
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.5.29",
+      "version": "3.5.28",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.29.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.28.tgz",
-      "integrity": "sha512-cuzPhD8fwRHk8IGfmYaR4eEe4cAyJEL66Ove/WZL7yWNL134nqLddSLwNRIsFlnnW1kK+p8Ck3viFnC0chXCXw==",
+      "integrity": "sha512-kviccYxTgoE8n6OCw96BNdYlBg2GOWfBuOW4Vqwrt7mSKWKwFVvI8egdTltqRgITGPsTFYtKYfxIG8ptX2PJHQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.29.0",
-        "@vue/shared": "3.5.29",
+        "@vue/shared": "3.5.28",
         "entities": "^7.0.1",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.2.1"
@@ -4633,26 +4573,26 @@
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.5.29",
+      "version": "3.5.28",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.29.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.28.tgz",
-      "integrity": "sha512-n0G5o7R3uBVmVxjTIYcz7ovr8sy7QObFG8OQJ3xGCDNhbG60biP/P5KnyY8NLd81OuT1WJflG7N4KWYHaeeaIg==",
+      "integrity": "sha512-/1ZepxAb159jKR1btkefDP+J2xuWL5V3WtleRmxaT+K2Aqiek/Ab/+Ebrw2pPj0sdHO8ViAyyJWfhXXOP/+LQA==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-core": "3.5.29",
+        "@vue/compiler-core": "3.5.28",
-        "@vue/shared": "3.5.29"
+        "@vue/shared": "3.5.28"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.5.29",
+      "version": "3.5.28",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.29.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.28.tgz",
-      "integrity": "sha512-oJZhN5XJs35Gzr50E82jg2cYdZQ78wEwvRO6Y63TvLVTc+6xICzJHP1UIecdSPPYIbkautNBanDiWYa64QSFIA==",
+      "integrity": "sha512-6TnKMiNkd6u6VeVDhZn/07KhEZuBSn43Wd2No5zaP5s3xm8IqFTHBj84HJah4UepSUJTro5SoqqlOY22FKY96g==",
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.29.0",
-        "@vue/compiler-core": "3.5.29",
+        "@vue/compiler-core": "3.5.28",
-        "@vue/compiler-dom": "3.5.29",
+        "@vue/compiler-dom": "3.5.28",
-        "@vue/compiler-ssr": "3.5.29",
+        "@vue/compiler-ssr": "3.5.28",
-        "@vue/shared": "3.5.29",
+        "@vue/shared": "3.5.28",
         "estree-walker": "^2.0.2",
         "magic-string": "^0.30.21",
         "postcss": "^8.5.6",
@@ -4660,13 +4600,13 @@
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.5.29",
+      "version": "3.5.28",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.29.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.28.tgz",
-      "integrity": "sha512-Y/ARJZE6fpjzL5GH/phJmsFwx3g6t2KmHKHx5q+MLl2kencADKIrhH5MLF6HHpRMmlRAYBRSvv347Mepf1zVNw==",
+      "integrity": "sha512-JCq//9w1qmC6UGLWJX7RXzrGpKkroubey/ZFqTpvEIDJEKGgntuDMqkuWiZvzTzTA5h2qZvFBFHY7fAAa9475g==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.5.29",
+        "@vue/compiler-dom": "3.5.28",
-        "@vue/shared": "3.5.29"
+        "@vue/shared": "3.5.28"
       }
     },
     "node_modules/@vue/component-compiler-utils": {
@@ -4740,21 +4680,21 @@
       "license": "ISC"
     },
     "node_modules/@vue/devtools-api": {
-      "version": "8.0.6",
+      "version": "8.0.5",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-8.0.6.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-8.0.5.tgz",
-      "integrity": "sha512-+lGBI+WTvJmnU2FZqHhEB8J1DXcvNlDeEalz77iYgOdY1jTj1ipSBaKj3sRhYcy+kqA8v/BSuvOz1XJucfQmUA==",
+      "integrity": "sha512-DgVcW8H/Nral7LgZEecYFFYXnAvGuN9C3L3DtWekAncFBedBczpNW8iHKExfaM559Zm8wQWrwtYZ9lXthEHtDw==",
       "license": "MIT",
       "dependencies": {
-        "@vue/devtools-kit": "^8.0.6"
+        "@vue/devtools-kit": "^8.0.5"
       }
     },
     "node_modules/@vue/devtools-kit": {
-      "version": "8.0.6",
+      "version": "8.0.5",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-8.0.6.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-8.0.5.tgz",
-      "integrity": "sha512-9zXZPTJW72OteDXeSa5RVML3zWDCRcO5t77aJqSs228mdopYj5AiTpihozbsfFJ0IodfNs7pSgOGO3qfCuxDtw==",
+      "integrity": "sha512-q2VV6x1U3KJMTQPUlRMyWEKVbcHuxhqJdSr6Jtjz5uAThAIrfJ6WVZdGZm5cuO63ZnSUz0RCsVwiUUb0mDV0Yg==",
       "license": "MIT",
       "dependencies": {
-        "@vue/devtools-shared": "^8.0.6",
+        "@vue/devtools-shared": "^8.0.5",
         "birpc": "^2.6.1",
         "hookable": "^5.5.3",
         "mitt": "^3.0.1",
@@ -4764,62 +4704,62 @@
       }
     },
     "node_modules/@vue/devtools-shared": {
-      "version": "8.0.6",
+      "version": "8.0.5",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-8.0.6.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-8.0.5.tgz",
-      "integrity": "sha512-Pp1JylTqlgMJvxW6MGyfTF8vGvlBSCAvMFaDCYa82Mgw7TT5eE5kkHgDvmOGHWeJE4zIDfCpCxHapsK2LtIAJg==",
+      "integrity": "sha512-bRLn6/spxpmgLk+iwOrR29KrYnJjG9DGpHGkDFG82UM21ZpJ39ztUT9OXX3g+usW7/b2z+h46I9ZiYyB07XMXg==",
       "license": "MIT",
       "dependencies": {
         "rfdc": "^1.4.1"
       }
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.5.29",
+      "version": "3.5.28",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.29.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.28.tgz",
-      "integrity": "sha512-zcrANcrRdcLtmGZETBxWqIkoQei8HaFpZWx/GHKxx79JZsiZ8j1du0VUJtu4eJjgFvU/iKL5lRXFXksVmI+5DA==",
+      "integrity": "sha512-gr5hEsxvn+RNyu9/9o1WtdYdwDjg5FgjUSBEkZWqgTKlo/fvwZ2+8W6AfKsc9YN2k/+iHYdS9vZYAhpi10kNaw==",
       "license": "MIT",
       "dependencies": {
-        "@vue/shared": "3.5.29"
+        "@vue/shared": "3.5.28"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.5.29",
+      "version": "3.5.28",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.29.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.28.tgz",
-      "integrity": "sha512-8DpW2QfdwIWOLqtsNcds4s+QgwSaHSJY/SUe04LptianUQ/0xi6KVsu/pYVh+HO3NTVvVJjIPL2t6GdeKbS4Lg==",
+      "integrity": "sha512-POVHTdbgnrBBIpnbYU4y7pOMNlPn2QVxVzkvEA2pEgvzbelQq4ZOUxbp2oiyo+BOtiYlm8Q44wShHJoBvDPAjQ==",
       "license": "MIT",
       "dependencies": {
-        "@vue/reactivity": "3.5.29",
+        "@vue/reactivity": "3.5.28",
-        "@vue/shared": "3.5.29"
+        "@vue/shared": "3.5.28"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.5.29",
+      "version": "3.5.28",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.29.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.28.tgz",
-      "integrity": "sha512-AHvvJEtcY9tw/uk+s/YRLSlxxQnqnAkjqvK25ZiM4CllCZWzElRAoQnCM42m9AHRLNJ6oe2kC5DCgD4AUdlvXg==",
+      "integrity": "sha512-4SXxSF8SXYMuhAIkT+eBRqOkWEfPu6nhccrzrkioA6l0boiq7sp18HCOov9qWJA5HML61kW8p/cB4MmBiG9dSA==",
       "license": "MIT",
       "dependencies": {
-        "@vue/reactivity": "3.5.29",
+        "@vue/reactivity": "3.5.28",
-        "@vue/runtime-core": "3.5.29",
+        "@vue/runtime-core": "3.5.28",
-        "@vue/shared": "3.5.29",
+        "@vue/shared": "3.5.28",
         "csstype": "^3.2.3"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.5.29",
+      "version": "3.5.28",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.29.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.28.tgz",
-      "integrity": "sha512-G/1k6WK5MusLlbxSE2YTcqAAezS+VuwHhOvLx2KnQU7G2zCH6KIb+5Wyt6UjMq7a3qPzNEjJXs1hvAxDclQH+g==",
+      "integrity": "sha512-pf+5ECKGj8fX95bNincbzJ6yp6nyzuLDhYZCeFxUNp8EBrQpPpQaLX3nNCp49+UbgbPun3CeVE+5CXVV1Xydfg==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-ssr": "3.5.29",
+        "@vue/compiler-ssr": "3.5.28",
-        "@vue/shared": "3.5.29"
+        "@vue/shared": "3.5.28"
       },
       "peerDependencies": {
-        "vue": "3.5.29"
+        "vue": "3.5.28"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.5.29",
+      "version": "3.5.28",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.29.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.28.tgz",
-      "integrity": "sha512-w7SR0A5zyRByL9XUkCfdLs7t9XOHUyJ67qPGQjOou3p6GvBeBW+AVjUUmlxtZ4PIYaRvE+1LmK44O4uajlZwcg==",
+      "integrity": "sha512-cfWa1fCGBxrvaHRhvV3Is0MgmrbSCxYTXCSCau2I0a1Xw1N1pHAvkWCiXPRAqjvToILvguNyEwjevUqAuBQWvQ==",
       "license": "MIT"
     },
     "node_modules/@vue/vue-loader-v15": {
@@ -5404,9 +5344,9 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.13.6",
+      "version": "1.13.5",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.6.tgz",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.5.tgz",
-      "integrity": "sha512-ChTCHMouEe2kn713WHbQGcuYrr6fXTBiu460OTwWrWob16g1bXn4vtz07Ope7ewMozJAnEquLk5lWQWtBig9DQ==",
+      "integrity": "sha512-cz4ur7Vb0xS4/KUN0tPWe44eqxrIu31me+fbang3ijiNscE129POzipJJA6zniq2C/Z6sJCjMimjS8Lc/GAs8Q==",
       "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.11",
@@ -10747,9 +10687,9 @@
       "license": "ISC"
     },
     "node_modules/minimatch": {
-      "version": "3.1.5",
+      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
@@ -13135,9 +13075,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.59.0",
+      "version": "4.49.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.59.0.tgz",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.49.0.tgz",
-      "integrity": "sha512-2oMpl67a3zCH9H79LeMcbDhXW/UmWG/y2zuqnF2jQq5uq9TbM9TVyXvA4+t+ne2IIkBdrLpAaRQAvo7YI/Yyeg==",
+      "integrity": "sha512-3IVq0cGJ6H7fKXXEdVt+RcYvRCt8beYY9K1760wGQwSAHZcS9eot1zDG5axUbcp/kWRi5zKIIDX8MoKv/TzvZA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -13151,31 +13091,26 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.59.0",
+        "@rollup/rollup-android-arm-eabi": "4.49.0",
-        "@rollup/rollup-android-arm64": "4.59.0",
+        "@rollup/rollup-android-arm64": "4.49.0",
-        "@rollup/rollup-darwin-arm64": "4.59.0",
+        "@rollup/rollup-darwin-arm64": "4.49.0",
-        "@rollup/rollup-darwin-x64": "4.59.0",
+        "@rollup/rollup-darwin-x64": "4.49.0",
-        "@rollup/rollup-freebsd-arm64": "4.59.0",
+        "@rollup/rollup-freebsd-arm64": "4.49.0",
-        "@rollup/rollup-freebsd-x64": "4.59.0",
+        "@rollup/rollup-freebsd-x64": "4.49.0",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.59.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.49.0",
-        "@rollup/rollup-linux-arm-musleabihf": "4.59.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.49.0",
-        "@rollup/rollup-linux-arm64-gnu": "4.59.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.49.0",
-        "@rollup/rollup-linux-arm64-musl": "4.59.0",
+        "@rollup/rollup-linux-arm64-musl": "4.49.0",
-        "@rollup/rollup-linux-loong64-gnu": "4.59.0",
+        "@rollup/rollup-linux-loongarch64-gnu": "4.49.0",
-        "@rollup/rollup-linux-loong64-musl": "4.59.0",
+        "@rollup/rollup-linux-ppc64-gnu": "4.49.0",
-        "@rollup/rollup-linux-ppc64-gnu": "4.59.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.49.0",
-        "@rollup/rollup-linux-ppc64-musl": "4.59.0",
+        "@rollup/rollup-linux-riscv64-musl": "4.49.0",
-        "@rollup/rollup-linux-riscv64-gnu": "4.59.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.49.0",
-        "@rollup/rollup-linux-riscv64-musl": "4.59.0",
+        "@rollup/rollup-linux-x64-gnu": "4.49.0",
-        "@rollup/rollup-linux-s390x-gnu": "4.59.0",
+        "@rollup/rollup-linux-x64-musl": "4.49.0",
-        "@rollup/rollup-linux-x64-gnu": "4.59.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.49.0",
-        "@rollup/rollup-linux-x64-musl": "4.59.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.49.0",
-        "@rollup/rollup-openbsd-x64": "4.59.0",
+        "@rollup/rollup-win32-x64-msvc": "4.49.0",
-        "@rollup/rollup-openharmony-arm64": "4.59.0",
-        "@rollup/rollup-win32-arm64-msvc": "4.59.0",
-        "@rollup/rollup-win32-ia32-msvc": "4.59.0",
-        "@rollup/rollup-win32-x64-gnu": "4.59.0",
-        "@rollup/rollup-win32-x64-msvc": "4.59.0",
         "fsevents": "~2.3.2"
       }
     },
@@ -14934,20 +14869,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/unplugin": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-3.0.0.tgz",
-      "integrity": "sha512-0Mqk3AT2TZCXWKdcoaufeXNukv2mTrEZExeXlHIOZXdqYoHHr4n51pymnwV8x2BOVxwXbK2HLlI7usrqMpycdg==",
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/remapping": "^2.3.5",
-        "picomatch": "^4.0.3",
-        "webpack-virtual-modules": "^0.6.2"
-      },
-      "engines": {
-        "node": "^20.19.0 || >=22.12.0"
-      }
-    },
     "node_modules/unplugin-utils": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/unplugin-utils/-/unplugin-utils-0.3.1.tgz",
@@ -15075,24 +14996,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/unplugin/node_modules/picomatch": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
-    "node_modules/unplugin/node_modules/webpack-virtual-modules": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
-      "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
-      "license": "MIT"
-    },
     "node_modules/update-browserslist-db": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
@@ -15301,16 +15204,16 @@
       }
     },
     "node_modules/vue": {
-      "version": "3.5.29",
+      "version": "3.5.28",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.29.tgz",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.28.tgz",
-      "integrity": "sha512-BZqN4Ze6mDQVNAni0IHeMJ5mwr8VAJ3MQC9FmprRhcBYENw+wOAAjRj8jfmN6FLl0j96OXbR+CjWhmAmM+QGnA==",
+      "integrity": "sha512-BRdrNfeoccSoIZeIhyPBfvWSLFP4q8J3u8Ju8Ug5vu3LdD+yTM13Sg4sKtljxozbnuMu1NB1X5HBHRYUzFocKg==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.5.29",
+        "@vue/compiler-dom": "3.5.28",
-        "@vue/compiler-sfc": "3.5.29",
+        "@vue/compiler-sfc": "3.5.28",
-        "@vue/runtime-dom": "3.5.29",
+        "@vue/runtime-dom": "3.5.28",
-        "@vue/server-renderer": "3.5.29",
+        "@vue/server-renderer": "3.5.28",
-        "@vue/shared": "3.5.29"
+        "@vue/shared": "3.5.28"
       },
       "peerDependencies": {
         "typescript": "*"
@@ -15459,14 +15362,14 @@
       }
     },
     "node_modules/vue-router": {
-      "version": "5.0.3",
+      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-5.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-5.0.2.tgz",
-      "integrity": "sha512-nG1c7aAFac7NYj8Hluo68WyWfc41xkEjaR0ViLHCa3oDvTQ/nIuLJlXJX1NUPw/DXzx/8+OKMng045HHQKQKWw==",
+      "integrity": "sha512-YFhwaE5c5JcJpNB1arpkl4/GnO32wiUWRB+OEj1T0DlDxEZoOfbltl2xEwktNU/9o1sGcGburIXSpbLpPFe/6w==",
       "license": "MIT",
       "dependencies": {
         "@babel/generator": "^7.28.6",
         "@vue-macros/common": "^3.1.1",
-        "@vue/devtools-api": "^8.0.6",
+        "@vue/devtools-api": "^8.0.0",
         "ast-walker-scope": "^0.8.3",
         "chokidar": "^5.0.0",
         "json5": "^2.2.3",
@@ -15543,6 +15446,26 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/vue-router/node_modules/unplugin": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-3.0.0.tgz",
+      "integrity": "sha512-0Mqk3AT2TZCXWKdcoaufeXNukv2mTrEZExeXlHIOZXdqYoHHr4n51pymnwV8x2BOVxwXbK2HLlI7usrqMpycdg==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "picomatch": "^4.0.3",
+        "webpack-virtual-modules": "^0.6.2"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/vue-router/node_modules/webpack-virtual-modules": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
+      "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
+      "license": "MIT"
+    },
     "node_modules/vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",

package.json

@@ -9,7 +9,7 @@
     "lint": "eslint . --fix"
   },
   "dependencies": {
-    "@fontsource/roboto": "5.2.10",
+    "@fontsource/roboto": "5.2.9",
     "@github/hotkey": "^3.0.0",
     "@mdi/font": "7.4.47",
     "@popperjs/core": "^2.11.8",
@@ -24,7 +24,7 @@
   "devDependencies": {
     "@babel/core": "^7.22.10",
     "@babel/eslint-parser": "^7.22.10",
-    "@vitejs/plugin-vue": "^5.2.3",
+    "@vitejs/plugin-vue": "^6.0.0",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-service": "^5.0.9",

src/App.vue

@@ -3,583 +3,352 @@ import axios from "axios";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 
+import "vue-loading-overlay/dist/css/index.css";
 import "./theme.css";
 
+// Configure day.js with UTC support
 dayjs.extend(utc);
 
-// Color palette for dealer labels - muted, visually distinct colors
-const DEALER_COLORS = [
-  { bg: '#e8eef4', border: '#5a7a9a', text: '#4a6a8a' },  // Muted Blue
-  { bg: '#ece8f0', border: '#7a6a8a', text: '#6a5a7a' },  // Muted Purple
-  { bg: '#e8f0e8', border: '#5a7a5a', text: '#4a6a4a' },  // Muted Green
-  { bg: '#f0ebe5', border: '#9a7a5a', text: '#8a6a4a' },  // Muted Orange
-  { bg: '#f0e8ec', border: '#8a5a6a', text: '#7a4a5a' },  // Muted Pink
-  { bg: '#e5efed', border: '#5a7a75', text: '#4a6a65' },  // Muted Teal
-  { bg: '#f0ede5', border: '#9a8a5a', text: '#8a7a4a' },  // Muted Amber
-  { bg: '#eaf0e8', border: '#6a8a5a', text: '#5a7a4a' },  // Muted Light Green
-  { bg: '#e8e9f0', border: '#5a5a8a', text: '#4a4a7a' },  // Muted Indigo
-  { bg: '#ece9e6', border: '#6a5a50', text: '#5a4a40' },  // Muted Brown
-  { bg: '#e5f0f0', border: '#5a8a8a', text: '#4a7a7a' },  // Muted Cyan
-  { bg: '#f0e8e5', border: '#9a6a5a', text: '#8a5a4a' },  // Muted Deep Orange
-];
-
-// Dark theme color palette - muted colors
-const DEALER_COLORS_DARK = [
-  { bg: '#2a3a4a', border: '#7a9ab0', text: '#9ab0c0' },  // Muted Blue
-  { bg: '#3a3040', border: '#9a8aaa', text: '#b0a0c0' },  // Muted Purple
-  { bg: '#2a3a2a', border: '#7a9a7a', text: '#9ab09a' },  // Muted Green
-  { bg: '#3a3025', border: '#a09070', text: '#b0a080' },  // Muted Orange
-  { bg: '#3a2a30', border: '#a07a8a', text: '#b09aa0' },  // Muted Pink
-  { bg: '#253a38', border: '#7a9a95', text: '#9ab0aa' },  // Muted Teal
-  { bg: '#3a3525', border: '#a09a70', text: '#b0aa80' },  // Muted Amber
-  { bg: '#2a3a25', border: '#8a9a7a', text: '#a0b090' },  // Muted Light Green
-  { bg: '#30304a', border: '#8a8aaa', text: '#a0a0c0' },  // Muted Indigo
-  { bg: '#352d28', border: '#8a7a70', text: '#a09a90' },  // Muted Brown
-  { bg: '#253a3a', border: '#7a9a9a', text: '#9ab0b0' },  // Muted Cyan
-  { bg: '#3a2a25', border: '#a08070', text: '#b09a8a' },  // Muted Deep Orange
-];
-
-// Simple hash function for consistent color assignment
-function hashString(str) {
-  let hash = 0;
-  const normalizedStr = str.toLowerCase().trim();
-  for (let i = 0; i < normalizedStr.length; i++) {
-    const char = normalizedStr.charCodeAt(i);
-    hash = ((hash << 5) - hash) + char;
-    hash = hash & hash; // Convert to 32-bit integer
-  }
-  return Math.abs(hash);
-}
-
 export default {
   data() {
     return {
-      filterInput: "",
+      ascending: this.ascending,
-      activeFilters: this.parseFiltersFromUrl(),
+      filter: decodeURIComponent(window.location.href.split("filter=")[1] || ""),
-      sortMethod: "score",
+      sortColumn: this.sortColumn,
-      viewMode: "cards",
+      sortMethod: 'score',
       topics: [],
       isMobile: false,
-      currentTheme: "auto",
+      currentTheme: typeof localStorage !== 'undefined' ? (localStorage.getItem('theme') || 'auto') : 'auto',
+      mediaQueryListener: null,
+      vuetifyTheme: null,
       darkModeQuery: null,
       themeChangeHandler: null,
-      isLoading: false,
-      menuOpen: false,
-      infoOverlayVisible: false,
     };
   },
-
   mounted() {
     window.addEventListener("keydown", this.handleKeyDown);
-    window.addEventListener("resize", this.handleResize);
-    window.addEventListener("click", this.handleClickOutside);
     this.detectMobile();
     this.fetchDeals();
+    // Initialize sort method from local storage
     this.initializeSortMethod();
-    this.initializeViewMode();
+    // Initialize theme immediately to prevent flash
     this.initializeTheme();
     this.setupThemeListener();
   },
-
   beforeUnmount() {
     window.removeEventListener("keydown", this.handleKeyDown);
-    window.removeEventListener("resize", this.handleResize);
+    window.removeEventListener("resize", this.detectMobile);
-    window.removeEventListener("click", this.handleClickOutside);
     if (this.darkModeQuery && this.themeChangeHandler) {
-      this.darkModeQuery.removeEventListener("change", this.themeChangeHandler);
+      this.darkModeQuery.removeEventListener('change', this.themeChangeHandler);
     }
   },
-
-  computed: {
-    filteredTopics() {
-      const filterTerms = this.activeFilters.map(f => f.toLowerCase());
-
-      const filtered = this.topics.filter((row) => {
-        if (filterTerms.length === 0) return true;
-        const searchText = `${row.title} [${row.Offer.dealer_name}]`.toLowerCase();
-        return filterTerms.every(term => searchText.includes(term));
-      });
-
-      const sortFns = {
-        score: (a, b) => b.score - a.score,
-        views: (a, b) => b.total_views - a.total_views,
-        recency: (a, b) => new Date(b.last_post_time) - new Date(a.last_post_time),
-      };
-
-      return filtered.sort(sortFns[this.sortMethod] || sortFns.score);
-    },
-
-    themeIcon() {
-      const icons = { auto: "brightness_auto", dark: "dark_mode", light: "light_mode" };
-      return icons[this.currentTheme];
-    },
-
-    themeTitle() {
-      const titles = {
-        auto: "Theme: Auto (click for Light)",
-        light: "Theme: Light (click for Dark)",
-        dark: "Theme: Dark (click for Auto)",
-      };
-      return titles[this.currentTheme];
-    },
-
-    sortIcon() {
-      const icons = { score: "trending_up", views: "visibility", recency: "schedule" };
-      return icons[this.sortMethod];
-    },
-
-    sortTitle() {
-      const titles = {
-        score: "Sort by Score (click for Views)",
-        views: "Sort by Views (click for Recency)",
-        recency: "Sort by Recency (click for Score)",
-      };
-      return titles[this.sortMethod];
-    },
-
-    viewIcon() {
-      const icons = { cards: "grid_view", list: "view_list" };
-      return icons[this.viewMode];
-    },
-
-    viewTitle() {
-      const titles = {
-        cards: "View: Cards (click for List)",
-        list: "View: List (click for Cards)",
-      };
-      return titles[this.viewMode];
-    },
-  },
-
   methods: {
-    formatDate(dateString) {
-      return dayjs(String(dateString)).format("YYYY-MM-DD hh:mm A");
-    },
-
-    highlightText(text) {
-      if (!this.activeFilters || this.activeFilters.length === 0) return text;
-
-      let result = text;
-      for (const filter of this.activeFilters) {
-        const lowerText = result.toLowerCase();
-        const lowerFilter = filter.toLowerCase();
-
-        if (lowerText.includes(lowerFilter)) {
-          const regex = new RegExp(filter.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), "ig");
-          result = result.replace(regex, (match) => `<mark>${match}</mark>`);
-        }
-      }
-      return result;
-    },
-
     initializeTheme() {
-      const savedTheme = localStorage.getItem("theme") || "auto";
+      // If no saved preference, default to auto
-      this.currentTheme = savedTheme;
+      const savedTheme = localStorage.getItem('theme');
-      this.applyTheme(savedTheme, true);
+      if (!savedTheme) {
+        this.currentTheme = 'auto';
+        this.applyTheme('auto', true); // skipSave=true to avoid redundant write
+      } else {
+        this.currentTheme = savedTheme;
+        // Apply saved theme (skipSave=true since it's already saved)
+        this.applyTheme(savedTheme, true);
+      }
     },
-
     setupThemeListener() {
-      this.darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
+      // Listen for system theme preference changes
+      const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');
 
-      this.themeChangeHandler = (e) => {
+      this.mediaQueryListener = darkModeQuery;
-        const savedTheme = localStorage.getItem("theme");
+
-        if (savedTheme === "auto" || !savedTheme) {
+      // Use arrow function to preserve 'this' context
-          this.applyThemeActual(e.matches ? "dark" : "light");
+      const themeChangeHandler = (e) => {
+        // Only auto-update theme if set to 'auto'
+        const savedTheme = localStorage.getItem('theme');
+        if (savedTheme === 'auto' || !savedTheme) {
+          const newTheme = e.matches ? 'dark' : 'light';
+          console.log('System theme changed to:', newTheme);
+          this.applyThemeActual(newTheme);
         }
       };
 
-      this.darkModeQuery.addEventListener("change", this.themeChangeHandler);
+      darkModeQuery.addEventListener('change', themeChangeHandler);
+      // Store the handler so we can remove it later if needed
+      this.themeChangeHandler = themeChangeHandler;
+      this.darkModeQuery = darkModeQuery;
     },
-
     applyTheme(theme, skipSave = false) {
       this.currentTheme = theme;
-
       if (!skipSave) {
-        localStorage.setItem("theme", theme);
+        localStorage.setItem('theme', theme);
       }
 
+      // Determine actual theme to apply
       let actualTheme = theme;
-      if (theme === "auto") {
+      if (theme === 'auto') {
-        actualTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+        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');
 
-    applyThemeActual(theme) {
+      // Update HTML class for theme-based CSS selectors
-      document.documentElement.setAttribute("data-bs-theme", theme);
+      if (actualTheme === 'dark') {
-      document.documentElement.classList.toggle("dark-theme", theme === "dark");
+        document.documentElement.classList.add('dark-theme');
-      document.documentElement.classList.toggle("light-theme", theme === "light");
+        document.documentElement.classList.remove('light-theme');
-    },
-
-    toggleTheme() {
-      const cycle = { auto: "light", light: "dark", dark: "auto" };
-      this.applyTheme(cycle[this.currentTheme]);
-    },
-
-    detectMobile() {
-      const hasTouch =
-        "ontouchstart" in window ||
-        navigator.maxTouchPoints > 0 ||
-        navigator.msMaxTouchPoints > 0;
-
-      const isMobileScreen = window.innerWidth <= 1024;
-      this.isMobile = hasTouch || isMobileScreen;
-    },
-
-    handleResize() {
-      this.detectMobile();
-    },
-
-    handleKeyDown(event) {
-      const isInput = ["INPUT", "TEXTAREA"].includes(document.activeElement.tagName);
-
-      if (event.key === "/" && !isInput) {
-        event.preventDefault();
-        this.$refs.filterInput.focus();
-      }
-
-      if (event.key === "r" && !isInput) {
-        event.preventDefault();
-        this.fetchDeals();
-      }
-
-      if (event.key === "i" && !isInput) {
-        event.preventDefault();
-        this.toggleInfoOverlay();
-      }
-
-      if (event.key === "Escape" && this.infoOverlayVisible) {
-        event.preventDefault();
-        this.toggleInfoOverlay();
-      }
-
-      if (event.key === "s" && !isInput) {
-        event.preventDefault();
-        this.toggleSort();
-      }
-
-      if (event.key === "v" && !isInput) {
-        event.preventDefault();
-        this.toggleViewMode();
-      }
-
-      if (event.key === "t" && !isInput) {
-        event.preventDefault();
-        this.toggleTheme();
-      }
-    },
-
-    parseFiltersFromUrl() {
-      const hash = window.location.hash || "";
-      const match = hash.match(/filters=([^&]*)/);
-      if (match && match[1]) {
-        try {
-          const decoded = decodeURIComponent(match[1]);
-          return JSON.parse(decoded);
-        } catch (e) {
-          return [];
-        }
-      }
-      // Legacy single filter support
-      const legacyMatch = hash.match(/filter=([^&]*)/);
-      if (legacyMatch && legacyMatch[1]) {
-        const decoded = decodeURIComponent(legacyMatch[1]);
-        return decoded ? [decoded] : [];
-      }
-      return [];
-    },
-
-    updateUrlWithFilters() {
-      if (this.activeFilters.length > 0) {
-        const encoded = encodeURIComponent(JSON.stringify(this.activeFilters));
-        history.pushState({}, null, `${window.location.origin}#/filters=${encoded}`);
       } else {
-        history.pushState({}, null, window.location.origin);
+        document.documentElement.classList.add('light-theme');
+        document.documentElement.classList.remove('dark-theme');
+      }
+    },
+    toggleTheme() {
+      // Cycle through: auto -> light -> dark -> auto
+      let newTheme;
+      if (this.currentTheme === 'auto') {
+        newTheme = 'light';
+      } else if (this.currentTheme === 'light') {
+        newTheme = 'dark';
+      } else {
+        newTheme = 'auto';
+      }
+      this.applyTheme(newTheme);
+    },
+    detectMobile() {
+      // Detect if device is mobile/tablet based on touch capability and screen size
+      const hasTouch = () => {
+        return (
+          (typeof window !== "undefined" &&
+            ("ontouchstart" in window ||
+              navigator.maxTouchPoints > 0 ||
+              navigator.msMaxTouchPoints > 0)) ||
+          false
+        );
+      };
+
+      const isMobileScreen = () => {
+        return window.innerWidth <= 1024;
+      };
+
+      this.isMobile = hasTouch() || isMobileScreen();
+      window.addEventListener("resize", this.detectMobile);
+    },
+    handleKeyDown(event) {
+      const isInput = ["INPUT", "TEXTAREA"].includes(
+        document.activeElement.tagName
+      );
+      if (event.key === "/" && !isInput) {
+        event.preventDefault(); // prevent typing `/` into whatever is focused
+        this.$refs.filter.focus();
       }
     },
 
-    applyFilter() {
+    createFilterRoute(params) {
-      const trimmed = this.filterInput.trim();
+      this.$refs.filter.blur();
-      if (trimmed && !this.activeFilters.includes(trimmed)) {
+      history.pushState(
-        this.activeFilters.push(trimmed);
+        {},
-        this.filterInput = "";
+        null,
-        this.$refs.filterInput.blur();
+        `${window.location.origin}#/filter=${encodeURIComponent(params)}`
-        this.updateUrlWithFilters();
+      );
-      }
     },
-
-    clearFilter(index) {
-      this.activeFilters.splice(index, 1);
-      this.updateUrlWithFilters();
-    },
-
-    clearAllFilters() {
-      this.activeFilters = [];
-      this.filterInput = "";
-      this.updateUrlWithFilters();
-    },
-
     fetchDeals() {
-      this.isLoading = true;
+      axios
-      const minLoadingTime = new Promise(resolve => setTimeout(resolve, 500));
+        .get("api/v1/topics")
-
+        .then((response) => {
-      Promise.all([
-        axios.get("api/v1/topics"),
-        minLoadingTime
-      ])
-        .then(([response]) => {
           this.topics = response.data;
         })
         .catch((err) => {
-          console.error("Failed to fetch deals:", err.response || err);
+          console.log(err.response);
-        })
-        .finally(() => {
-          this.isLoading = false;
         });
     },
+  },
+  computed: {
+    formatDate() {
+      return (v) => {
+        const date = dayjs(String(v));
+        return date.format("YYYY-MM-DD hh:mm A");
+      };
+    },
+    filteredTopics() {
+      let filtered = this.topics
+        .filter((row) => {
+          const titles = (
+            row.title.toString() +
+            " [" +
+            row.Offer.dealer_name +
+            "]"
+          ).toLowerCase();
+          const filterTerm = this.filter.toLowerCase();
+          return titles.includes(filterTerm);
+        });
 
+      // Sort based on selected method
+      if (this.sortMethod === 'score') {
+        return filtered.sort((a, b) => b.score - a.score);
+      } else if (this.sortMethod === 'views') {
+        return filtered.sort((a, b) => b.total_views - a.total_views);
+      } else {
+        return filtered.sort((a, b) => new Date(b.last_post_time) - new Date(a.last_post_time));
+      }
+    },
+    highlightMatches() {
+      return (v) => {
+        if (this.filter == "") return v;
+        const matchExists = v.toLowerCase().includes(this.filter.toLowerCase());
+        if (!matchExists) return v;
+
+        const re = new RegExp(this.filter, "ig");
+        return v.replace(re, (matchedText) => `<mark>${matchedText}</mark>`);
+      };
+    },
+    highlightDealerName() {
+      return (dealerName) => {
+        if (this.filter == "") return dealerName;
+        const matchExists = dealerName.toLowerCase().includes(this.filter.toLowerCase());
+        if (!matchExists) return dealerName;
+
+        const re = new RegExp(this.filter, "ig");
+        return dealerName.replace(re, (matchedText) => `<mark>${matchedText}</mark>`);
+      };
+    },
+    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)';
+      }
+    },
     initializeSortMethod() {
-      const saved = localStorage.getItem("sortMethod");
+      const saved = localStorage.getItem('sortMethod');
       if (saved) {
         this.sortMethod = saved;
       }
     },
-
     toggleSort() {
-      const cycle = { score: "views", views: "recency", recency: "score" };
+      // Cycle through: score -> views -> recency -> score
-      this.sortMethod = cycle[this.sortMethod];
+      if (this.sortMethod === 'score') {
-      localStorage.setItem("sortMethod", this.sortMethod);
+        this.sortMethod = 'views';
+      } else if (this.sortMethod === 'views') {
+        this.sortMethod = 'recency';
+      } else {
+        this.sortMethod = 'score';
+      }
+      localStorage.setItem('sortMethod', this.sortMethod);
     },
-
+    getSortIcon() {
-    initializeViewMode() {
+      if (this.sortMethod === 'score') {
-      const saved = localStorage.getItem("viewMode");
+        return 'trending_up';
-      if (saved) {
+      } else if (this.sortMethod === 'views') {
-        this.viewMode = saved;
+        return 'visibility';
+      } else {
+        return 'schedule';
       }
     },
-
+    getSortTitle() {
-    toggleViewMode() {
+      if (this.sortMethod === 'score') {
-      const cycle = { cards: "list", list: "cards" };
+        return 'Sort by Score (click for Views)';
-      this.viewMode = cycle[this.viewMode];
+      } else if (this.sortMethod === 'views') {
-      localStorage.setItem("viewMode", this.viewMode);
+        return 'Sort by Views (click for Recency)';
-    },
+      } else {
-
+        return 'Sort by Recency (click for Score)';
-    toggleMenu() {
-      this.menuOpen = !this.menuOpen;
-    },
-
-    closeMenu() {
-      this.menuOpen = false;
-    },
-
-    handleMenuAction(action) {
-      action();
-      this.closeMenu();
-    },
-
-    handleClickOutside(event) {
-      if (this.menuOpen && !event.target.closest('.mobile-menu-wrapper')) {
-        this.closeMenu();
       }
     },
-
-    getDealerColor(dealerName) {
-      if (!dealerName) return null;
-      const isDark = document.documentElement.getAttribute('data-bs-theme') === 'dark' ||
-                     document.documentElement.classList.contains('dark-theme') ||
-                     (this.currentTheme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches);
-      const colors = isDark ? DEALER_COLORS_DARK : DEALER_COLORS;
-      const index = hashString(dealerName) % colors.length;
-      return colors[index];
-    },
-
-    getDealerStyle(dealerName) {
-      const color = this.getDealerColor(dealerName);
-      if (!color) return {};
-      return {
-        backgroundColor: color.bg,
-        borderColor: color.border,
-        color: color.text,
-      };
-    },
-    toggleInfoOverlay() {
-      this.infoOverlayVisible = !this.infoOverlayVisible;
-    },
-    methods: {
-      toggleInfoOverlay() {
-        this.infoOverlayVisible = !this.infoOverlayVisible;
-      },
-    },
   },
 };
 </script>
 
 <template>
   <div id="app">
+    <link rel="shortcut icon" type="image/png" href="/favicon.png" />
     <div class="container">
       <div class="header">
         <div class="header-controls">
-          <div class="filter-container" :class="{ 'has-active-filters': activeFilters.length > 0 }">
+          <input
-            <span v-for="(filter, index) in activeFilters" :key="index" class="filter-tag">
+            v-model="filter"
-              {{ filter }}
+            type="text"
-              <button class="filter-tag-clear" @click="clearFilter(index)" title="Clear filter">
+            placeholder="Filter deals"
-                <span class="material-symbols-outlined">close</span>
+            ref="filter"
-              </button>
+            @keyup.enter="createFilterRoute(filter.toString())"
-            </span>
+            @keyup.esc="$refs.filter.blur()"
-            <input
+            class="search-input"
-              ref="filterInput"
+          />
-              v-model="filterInput"
+          <button @click="toggleSort" class="sort-toggle" :title="getSortTitle">
-              type="text"
+            <span class="material-symbols-outlined">{{ getSortIcon }}</span>
-              placeholder="Filter deals"
-              class="search-input"
-              @keyup.enter="applyFilter"
-              @keyup.esc="$refs.filterInput.blur()"
-            />
-          </div>
-          <!-- Desktop buttons -->
-          <button class="icon-button desktop-only" title="Refresh deals" @click="fetchDeals" :disabled="isLoading">
-            <span class="material-symbols-outlined" :class="{ 'spinning': isLoading }">refresh</span>
           </button>
-          <button class="icon-button desktop-only" :title="sortTitle" @click="toggleSort">
+          <button @click="toggleTheme" class="theme-toggle" :title="getThemeTitle">
-            <span class="material-symbols-outlined">{{ sortIcon }}</span>
+            <span class="material-symbols-outlined">{{ getThemeIcon }}</span>
           </button>
-          <button class="icon-button desktop-only" :title="viewTitle" @click="toggleViewMode">
-            <span class="material-symbols-outlined">{{ viewIcon }}</span>
-          </button>
-          <button class="icon-button desktop-only" :title="themeTitle" @click="toggleTheme">
-            <span class="material-symbols-outlined">{{ themeIcon }}</span>
-          </button>
-          <button class="icon-button desktop-only" title="Info" @click="toggleInfoOverlay">
-            <span class="material-symbols-outlined">info</span>
-          </button>
-          <div class="mobile-menu-wrapper mobile-only">
-            <button class="icon-button" title="Menu" @click="toggleMenu">
-              <span class="material-symbols-outlined">{{ menuOpen ? 'close' : 'menu' }}</span>
-            </button>
-            <div class="mobile-dropdown" v-if="menuOpen" @click.stop>
-              <button class="dropdown-item" @click="handleMenuAction(fetchDeals)" :disabled="isLoading">
-                <span class="material-symbols-outlined" :class="{ 'spinning': isLoading }">refresh</span>
-                <span>Refresh</span>
-              </button>
-              <button class="dropdown-item" @click="handleMenuAction(toggleSort)">
-                <span class="material-symbols-outlined">{{ sortIcon }}</span>
-                <span>{{ sortTitle.split('(')[0].trim() }}</span>
-              </button>
-              <button class="dropdown-item" @click="handleMenuAction(toggleViewMode)">
-                <span class="material-symbols-outlined">{{ viewIcon }}</span>
-                <span>{{ viewTitle.split('(')[0].trim() }}</span>
-              </button>
-              <button class="dropdown-item" @click="toggleInfoOverlay">
-                  <span class="material-symbols-outlined">info</span>
-                  <span>Info</span>
-              </button>
-              <button class="dropdown-item" @click="handleMenuAction(toggleTheme)">
-                <span class="material-symbols-outlined">{{ themeIcon }}</span>
-                <span>{{ themeTitle.split('(')[0].trim() }}</span>
-              </button>
-              <button class="dropdown-item" @click="toggleInfoOverlay">
-                <span class="material-symbols-outlined">info</span>
-                <span>Info</span>
-              </button>
-            </div>
-          </div>
         </div>
       </div>
-      <InfoOverlay :visible="infoOverlayVisible" @close="toggleInfoOverlay" />
+
-      <div v-if="isLoading && topics.length === 0" class="loading-container">
+        <div class="cards-grid">
-        <span class="material-symbols-outlined spinning loading-spinner">refresh</span>
+          <div
-        <p>Loading deals...</p>
+            v-for="topic in filteredTopics"
-      </div>
+            :key="topic.topic_id"
-      <div class="cards-wrapper" v-else>
+            class="deal-card"
-        <div v-if="isLoading" class="loading-overlay">
+          >
-          <span class="material-symbols-outlined spinning loading-spinner">refresh</span>
+            <div class="card-header">
-        </div>
+              <div class="title-with-link">
-        <div :class="viewMode === 'cards' ? 'cards-grid' : 'list-view'">
+                <a
-        <div v-for="topic in filteredTopics" :key="topic.topic_id" :class="viewMode === 'cards' ? 'deal-card' : 'deal-row'">
+                  :href="`https://forums.redflagdeals.com${topic.web_path}`"
-          <div class="card-header">
+                  target="_blank"
-            <div class="title-with-link">
+                  class="deal-title"
-              <a
+                  @click.stop
-                :href="`https://forums.redflagdeals.com${topic.web_path}`"
+                  v-html="highlightMatches(topic.title)"
-                target="_blank"
+                ></a>
-                class="deal-title"
+                <a
-                v-html="highlightText(topic.title)"
+                  v-if="topic.Offer.url"
-              ></a>
+                  :href="topic.Offer.url"
-              <a
+                  target="_blank"
-                v-if="topic.Offer.url"
+                  class="card-link"
-                :href="topic.Offer.url"
+                  title="Open deal"
-                target="_blank"
+                >
-                class="card-link"
+                  <span class="material-symbols-outlined">open_in_new</span>
-                title="Open direct link to deal"
+                </a>
-              >
-                <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" v-if="topic.Offer.dealer_name">
-            <span
-              class="dealer-name dealer-label"
-              :style="getDealerStyle(topic.Offer.dealer_name)"
-              v-html="highlightText(topic.Offer.dealer_name)"
-            ></span>
-          </div>
-          <div class="card-details" v-if="viewMode === 'cards'">
-            <div class="details-stats">
-              <div class="stat">
-                <span class="material-symbols-outlined">visibility</span>
-                <span class="stat-value">{{ topic.total_views }} views</span>
               </div>
-              <div class="stat">
+              <div class="score-bubble" :class="{ positive: topic.score > 0, negative: topic.score < 0, neutral: topic.score === 0 }">
-                <span class="material-symbols-outlined">chat</span>
+                <span v-if="topic.score > 0">+{{ topic.score }}</span>
-                <span class="stat-value">{{ topic.total_replies }} replies</span>
+                <span v-else>{{ topic.score }}</span>
               </div>
             </div>
-            <div class="card-timestamp">First post: {{ formatDate(topic.post_time) }}</div>
+
-            <div class="card-timestamp">Last post: {{ formatDate(topic.last_post_time) }}</div>
+            <div class="card-meta">
+              <span class="dealer-name" v-html="highlightDealerName(topic.Offer.dealer_name)"></span>
+            </div>
+
+            <div class="card-details">
+              <div class="details-stats">
+                <div class="stat">
+                  <span class="material-symbols-outlined">visibility</span>
+                  <span class="stat-value">{{ topic.total_views }} views</span>
+                </div>
+                <div class="stat">
+                  <span class="material-symbols-outlined">chat</span>
+                  <span class="stat-value">{{ topic.total_replies }} replies</span>
+                </div>
+              </div>
+
+              <div class="card-timestamp">
+                Last post: {{ formatDate(topic.last_post_time) }}
+              </div>
+
+            </div>
           </div>
-          <div class="row-stats" v-if="viewMode === 'list'">
-            <span class="stat-compact">{{ formatDate(topic.post_time) }} - {{ formatDate(topic.last_post_time) }}</span>
-          </div>
-        </div>
         </div>
       </div>
     </div>
-  </div>
+</template>
-  <InfoOverlay :visible="infoOverlayVisible" @close="toggleInfoOverlay" />
-  </template>
-
-<style scoped>
-.cards-wrapper {
-  position: relative;
-}
-
-.loading-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(128, 128, 128, 0.3);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 10;
-  border-radius: 12px;
-}
-
-.loading-overlay .loading-spinner {
-  font-size: 48px;
-  color: var(--text-primary);
-}
-</style>

src/components/InfoOverlay.vue

@@ -1,116 +0,0 @@
-<template>
-  <div class="info-overlay" v-if="visible" @click.self="closeOverlay">
-    <div class="info-panel">
-        <strong>Source: </strong>
-        <a href="https://github.com/davegallant/rfd-fyi" target="_blank" rel="noopener noreferrer">
-          https://github.com/davegallant/rfd-fyi
-        </a>
-      <h3>Keyboard Shortcuts</h3>
-      <table class="shortcuts-table">
-        <tbody>
-          <tr>
-            <td><strong>r</strong></td>
-            <td>Refresh deals</td>
-          </tr>
-          <tr>
-            <td><strong>s</strong></td>
-            <td>Toggle sort</td>
-          </tr>
-          <tr>
-            <td><strong>v</strong></td>
-            <td>Toggle view mode</td>
-          </tr>
-          <tr>
-            <td><strong>t</strong></td>
-            <td>Toggle theme</td>
-          </tr>
-          <tr>
-            <td><strong>/</strong></td>
-            <td>Filter deals</td>
-          </tr>
-        </tbody>
-      </table>
-      <button class="close-button" @click="closeOverlay">Close</button>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "InfoOverlay",
-  props: {
-    visible: {
-      type: Boolean,
-      required: true,
-    },
-  },
-  methods: {
-    closeOverlay() {
-      this.$emit("close");
-    },
-  },
-};
-</script>
-
-<style scoped>
-.info-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
-
-.info-panel {
-  background: var(--bg-primary);
-  color: var(--text-primary);
-  border-radius: 8px;
-  padding: 20px;
-  max-width: 400px;
-  width: 90%;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  text-align: center;
-}
-
-.info-panel h2 {
-  margin-top: 0;
-}
-
-.info-panel .shortcuts-table {
-  width: 100%;
-  border-collapse: collapse;
-  margin: 16px auto;
-  text-align: left;
-  padding-left: 40px;
-  display: table;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.info-panel .shortcuts-table td {
-  padding: 8px;
-  text-align: left;
-  vertical-align: middle;
-  padding-left: 40px;
-  padding-right: 20px;
-}
-
-.close-button {
-  margin-top: 20px;
-  padding: 10px 20px;
-  background-color: #007bff;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.close-button:hover {
-  background-color: #0056b3;
-}
-</style>

src/main.js

@@ -2,6 +2,8 @@ import { createApp } from "vue";
 import App from "./App.vue";
 import { createRouter, createWebHashHistory } from "vue-router";
 
+import "./theme.css";
+
 const routes = [
   {
     path: '/:pathMatch(.*)*',

src/theme.css

@@ -1,4 +1,3 @@
-/* Material Symbols Icon Font */
 .material-symbols-outlined {
   font-family: 'Material Symbols Outlined';
   font-weight: normal;
@@ -13,99 +12,51 @@
   direction: ltr;
 }
 
-/* ============================================
+/* Theme-aware CSS variables */
-   Theme Variables
-   ============================================ */
-
 :root {
   /* Light theme (default) */
   --bg-primary: #dddddd;
   --bg-secondary: #e8e8e8;
-  --bg-input: #f5f5f5;
-  --bg-input-focus: #ffffff;
   --text-primary: #212529;
   --text-secondary: #6c757d;
   --border-color: #d0d0d0;
-  --border-color-light: #cccccc;
-  --border-color-hover: #999999;
   --link-color: #212529;
-  --score-positive-bg: rgb(90, 140, 90);
-  --score-positive-text: white;
-  --score-negative-bg: rgb(140, 50, 50);
-  --score-negative-text: white;
-  --mark-bg: rgba(255, 193, 7, 0.3);
-  --shadow-light: rgba(0, 0, 0, 0.05);
-  --shadow-medium: rgba(0, 0, 0, 0.1);
 }
 
-/* Dark theme via media query */
+/* Dark theme */
 @media (prefers-color-scheme: dark) {
-  :root:not([data-bs-theme="light"]):not(.light-theme) {
+  :root {
     --bg-primary: #1a1a1a;
     --bg-secondary: #2a2a2a;
-    --bg-input: #1a1a1a;
-    --bg-input-focus: #2a2a2a;
     --text-primary: #e0e0e0;
     --text-secondary: #a0a0a0;
     --border-color: #3a3a3a;
-    --border-color-light: #555555;
+    --link-color: #212529;
-    --border-color-hover: #777777;
-    --link-color: #e0e0e0;
-    --score-positive-bg: rgb(100, 140, 80);
-    --score-positive-text: white;
-    --score-negative-bg: rgb(120, 45, 45);
-    --score-negative-text: white;
-    --mark-bg: rgba(255, 193, 7, 0.4);
-    --shadow-light: rgba(255, 255, 255, 0.1);
   }
 }
 
-/* Explicit dark theme */
+/* Support for explicit data-bs-theme attribute (Bootstrap override) */
-html[data-bs-theme="dark"],
+html[data-bs-theme="dark"] {
-html.dark-theme {
   --bg-primary: #1a1a1a;
   --bg-secondary: #2a2a2a;
-  --bg-input: #1a1a1a;
-  --bg-input-focus: #2a2a2a;
   --text-primary: #e0e0e0;
   --text-secondary: #a0a0a0;
   --border-color: #3a3a3a;
-  --border-color-light: #555555;
-  --border-color-hover: #777777;
   --link-color: #e0e0e0;
-  --score-positive-bg: rgb(100, 140, 80);
-  --score-positive-text: white;
-  --score-negative-bg: rgb(120, 45, 45);
-  --score-negative-text: white;
-  --mark-bg: rgba(255, 193, 7, 0.4);
-  --shadow-light: rgba(255, 255, 255, 0.1);
 }
 
-/* Explicit light theme */
 html[data-bs-theme="light"],
 html.light-theme {
   --bg-primary: #dddddd;
   --bg-secondary: #e8e8e8;
-  --bg-input: #f5f5f5;
-  --bg-input-focus: #ffffff;
   --text-primary: #212529;
   --text-secondary: #6c757d;
   --border-color: #d0d0d0;
-  --border-color-light: #cccccc;
-  --border-color-hover: #999999;
   --link-color: #212529;
-  --score-positive-bg: rgb(34, 139, 34);
-  --score-positive-text: white;
-  --mark-bg: rgba(255, 193, 7, 0.3);
-  --shadow-light: rgba(0, 0, 0, 0.05);
 }
 
-/* ============================================
-   Base Styles
-   ============================================ */
-
 html {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+  font-family: sans-serif;
   min-width: 100%;
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
@@ -122,6 +73,22 @@ body {
   padding: 0;
 }
 
+.green-score {
+  color: rgb(34, 139, 34) !important;
+}
+
+html[data-bs-theme="light"] .green-score {
+  color: rgb(34, 139, 34) !important;
+}
+
+html[data-bs-theme="dark"] .green-score {
+  color: rgb(158, 206, 106) !important;
+}
+
+.red-score {
+  color: rgb(247, 118, 142) !important;
+}
+
 a {
   color: var(--link-color);
   transition: color 0.2s ease;
@@ -131,9 +98,7 @@ a:visited {
   color: var(--link-color);
 }
 
-/* ============================================
+/* App styles */
-   Layout
-   ============================================ */
 
 .container {
   max-width: 1200px;
@@ -154,100 +119,14 @@ a:visited {
   align-items: center;
 }
 
-@media (max-width: 768px) {
-  .header-controls {
-    gap: 8px;
-  }
-}
-
-/* ============================================
-   Responsive Visibility
-   ============================================ */
-
-.desktop-only {
-  display: inline-flex;
-}
-
-.mobile-only {
-  display: none;
-}
-
-@media (max-width: 768px) {
-  .desktop-only {
-    display: none !important;
-  }
-
-  .mobile-only {
-    display: block;
-  }
-}
-
-/* ============================================
-   Mobile Menu
-   ============================================ */
-
-.mobile-menu-wrapper {
-  position: relative;
-}
-
-.mobile-dropdown {
-  position: absolute;
-  top: calc(100% + 8px);
-  right: 0;
-  background-color: var(--bg-secondary);
-  border: 1px solid var(--border-color-light);
-  border-radius: 8px;
-  box-shadow: 0 4px 12px var(--shadow-medium);
-  min-width: 180px;
-  z-index: 100;
-  overflow: hidden;
-}
-
-.dropdown-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  width: 100%;
-  padding: 12px 14px;
-  border: none;
-  background: transparent;
-  color: var(--text-primary);
-  font-size: 14px;
-  cursor: pointer;
-  transition: background-color 0.2s ease;
-  text-align: left;
-}
-
-.dropdown-item:hover {
-  background-color: var(--bg-input);
-}
-
-.dropdown-item:active {
-  background-color: var(--border-color-light);
-}
-
-.dropdown-item:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.dropdown-item .material-symbols-outlined {
-  font-size: 20px;
-  color: var(--text-secondary);
-}
-
-/* ============================================
-   Search Input
-   ============================================ */
-
 .search-input {
   flex: 1;
   max-width: 500px;
   padding: 10px 12px;
   font-size: 14px;
-  border: 1px solid var(--border-color-light);
+  border: 1px solid #cccccc;
   border-radius: 4px;
-  background-color: var(--bg-input);
+  background-color: #f5f5f5;
   color: var(--text-primary);
   transition: all 0.2s ease;
   font-family: inherit;
@@ -255,100 +134,36 @@ a:visited {
 
 .search-input:focus {
   outline: none;
-  border-color: var(--border-color-hover);
+  border-color: #999999;
-  background-color: var(--bg-input-focus);
+  background-color: #ffffff;
-  box-shadow: 0 0 0 2px var(--shadow-light);
+  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);
 }
 
-/* ============================================
+.sort-toggle {
-   Filter Container & Tags
-   ============================================ */
-
-.filter-container {
-  flex: 1;
-  max-width: 500px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 10px;
-  border: 1px solid var(--border-color-light);
-  border-radius: 4px;
-  background-color: var(--bg-input);
-  transition: all 0.2s ease;
-}
-
-.filter-container:focus-within {
-  border-color: var(--border-color-hover);
-  background-color: var(--bg-input-focus);
-  box-shadow: 0 0 0 2px var(--shadow-light);
-}
-
-.filter-container .search-input {
-  flex: 1;
-  border: none;
-  padding: 4px 0;
-  background: transparent;
-  box-shadow: none;
-}
-
-.filter-container .search-input:focus {
-  outline: none;
-  box-shadow: none;
-}
-
-.filter-tag {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 8px 4px 10px;
-  background-color: var(--border-color-light);
-  border-radius: 4px;
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--text-primary);
-  flex-shrink: 0;
-}
-
-.filter-tag-clear {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 14px;
-  height: 14px;
-  padding: 0;
-  border: none;
-  background-color: var(--text-secondary);
-  border-radius: 50%;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  color: var(--bg-input);
-}
-
-.filter-tag-clear:hover {
-  background-color: var(--text-primary);
-}
-
-.filter-tag-clear .material-symbols-outlined {
-  font-size: 10px;
-}
-
-/* ============================================
-   Icon Buttons (Theme & Sort Toggle)
-   ============================================ */
-
-.icon-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
-  border: 1px solid var(--border-color-light);
+  border: 1px solid #cccccc;
   border-radius: 4px;
-  background-color: var(--bg-input);
+  background-color: #f5f5f5;
   color: var(--text-primary);
   cursor: pointer;
   transition: all 0.2s ease;
@@ -357,26 +172,35 @@ a:visited {
   flex-shrink: 0;
 }
 
-.icon-button:hover {
+.sort-toggle:hover {
-  background-color: var(--bg-secondary);
+  background-color: #e8e8e8;
-  border-color: var(--border-color-hover);
+  border-color: #999999;
 }
 
-.icon-button:active {
+.sort-toggle:active {
   transform: scale(0.95);
 }
 
-/* Legacy class names for compatibility */
+html.dark-theme .sort-toggle {
-.sort-toggle,
+  border-color: #555555;
+  background-color: #1a1a1a;
+  color: #e0e0e0;
+}
+
+html.dark-theme .sort-toggle:hover {
+  background-color: #2a2a2a;
+  border-color: #777777;
+}
+
 .theme-toggle {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
-  border: 1px solid var(--border-color-light);
+  border: 1px solid #cccccc;
   border-radius: 4px;
-  background-color: var(--bg-input);
+  background-color: #f5f5f5;
   color: var(--text-primary);
   cursor: pointer;
   transition: all 0.2s ease;
@@ -385,20 +209,25 @@ a:visited {
   flex-shrink: 0;
 }
 
-.sort-toggle:hover,
 .theme-toggle:hover {
-  background-color: var(--bg-secondary);
+  background-color: #e8e8e8;
-  border-color: var(--border-color-hover);
+  border-color: #999999;
 }
 
-.sort-toggle:active,
 .theme-toggle:active {
   transform: scale(0.95);
 }
 
-/* ============================================
+html.dark-theme .theme-toggle {
-   Cards Grid
+  border-color: #555555;
-   ============================================ */
+  background-color: #1a1a1a;
+  color: #e0e0e0;
+}
+
+html.dark-theme .theme-toggle:hover {
+  background-color: #2a2a2a;
+  border-color: #777777;
+}
 
 .cards-grid {
   display: grid;
@@ -407,88 +236,6 @@ a:visited {
   margin-top: 20px;
 }
 
-/* ============================================
-   List View
-   ============================================ */
-
-.list-view {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin-top: 20px;
-}
-
-.deal-row {
-  background-color: var(--bg-secondary);
-  border: 1px solid var(--border-color-light);
-  border-radius: 6px;
-  padding: 10px 14px;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  transition: all 0.2s ease;
-}
-
-.deal-row .card-header {
-  display: contents;
-}
-
-.deal-row:hover {
-  background-color: var(--bg-input);
-  border-color: var(--border-color-hover);
-}
-
-.deal-row .card-meta {
-  margin-bottom: 0;
-  flex-shrink: 0;
-  order: 2;
-}
-
-.deal-row .title-with-link {
-  flex: 1;
-  order: 1;
-}
-
-.deal-row .deal-title {
-  font-size: 14px;
-}
-
-.deal-row .row-stats {
-  order: 3;
-}
-
-.deal-row .score-bubble {
-  min-width: 36px;
-  height: 24px;
-  font-size: 10px;
-  order: 4;
-}
-
-.row-stats {
-  display: flex;
-  gap: 12px;
-  flex-shrink: 0;
-}
-
-.stat-compact {
-  font-size: 11px;
-  color: var(--text-secondary);
-  white-space: nowrap;
-}
-
-@media (max-width: 768px) {
-  .deal-row {
-    flex-wrap: wrap;
-  }
-
-  .row-stats {
-    width: 100%;
-    margin-top: 8px;
-    padding-top: 8px;
-    border-top: 1px solid var(--border-color);
-  }
-}
-
 .deal-card {
   background-color: var(--bg-secondary);
   border: 1.5px solid #aaaaaa;
@@ -501,14 +248,11 @@ a:visited {
 }
 
 .deal-card:hover {
-  box-shadow: 0 4px 8px var(--shadow-medium);
+  background-color: #15151515;
-  border-color: var(--border-color-hover);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  border-color: #999999;
 }
 
-/* ============================================
-   Card Header
-   ============================================ */
-
 .card-header {
   display: flex;
   gap: 12px;
@@ -542,6 +286,26 @@ a:visited {
   text-decoration: underline;
 }
 
+.card-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: 13px;
+  margin-bottom: 12px;
+}
+
+.dealer-name {
+  color: var(--text-secondary);
+  font-weight: 500;
+  font-size: 13px;
+}
+
+.card-timestamp {
+  color: var(--text-secondary);
+  font-size: 12px;
+  margin-top: 8px;
+}
+
 .card-link {
   display: inline-flex;
   align-items: center;
@@ -560,35 +324,43 @@ a:visited {
   font-size: 18px;
 }
 
-/* ============================================
-   Score Bubble
-   ============================================ */
-
 .score-bubble {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 40px;
+  min-width: 50px;
-  height: 28px;
+  height: 40px;
-  border-radius: 4px;
+  border-radius: 6px;
   font-weight: 700;
-  font-size: 11px;
+  font-size: 12px;
   flex-shrink: 0;
   transition: all 0.2s ease;
-  padding: 0 2px;
+  padding: 0 8px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
   border: none;
 }
 
 .score-bubble.positive {
-  background-color: var(--score-positive-bg);
+  background-color: rgb(34, 139, 34);
-  color: var(--score-positive-text);
+  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: var(--score-negative-bg);
+  background-color: rgb(247, 118, 142);
-  color: var(--score-negative-text);
+  color: white;
   box-shadow: 0 1px 3px rgba(247, 118, 142, 0.2);
 }
 
@@ -598,33 +370,6 @@ a:visited {
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
 }
 
-/* ============================================
-   Card Meta & Details
-   ============================================ */
-
-.card-meta {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 6px;
-  font-size: 13px;
-  margin-bottom: 12px;
-}
-
-.dealer-name {
-  display: inline-block;
-  width: fit-content;
-  max-width: 100%;
-  font-weight: 600;
-  font-size: 9px;
-  padding: 2px 6px;
-  border-radius: 4px;
-  border: 2px solid currentColor;
-  background-color: transparent;
-  transition: all 0.2s ease;
-  letter-spacing: 0.3px;
-}
-
 .card-details {
   margin-top: 12px;
   padding-top: 12px;
@@ -653,27 +398,26 @@ a:visited {
   font-weight: 500;
 }
 
-.card-timestamp {
+.details-section {
+  margin-bottom: 12px;
+}
+
+.details-section strong {
+  display: block;
+  color: var(--text-primary);
+  margin-bottom: 4px;
+  font-size: 13px;
+}
+
+.details-section p {
+  margin: 0;
   color: var(--text-secondary);
   font-size: 12px;
-  margin-top: 8px;
+  line-height: 1.4;
+  word-wrap: break-word;
 }
 
-/* ============================================
+/* Mobile responsive */
-   Mark Highlighting
-   ============================================ */
-
-mark {
-  background-color: var(--mark-bg);
-  color: inherit;
-  font-weight: 600;
-  border-radius: 2px;
-}
-
-/* ============================================
-   Mobile Responsive
-   ============================================ */
-
 @media (max-width: 768px) {
   .cards-grid {
     grid-template-columns: 1fr;
@@ -688,47 +432,17 @@ mark {
   }
 }
 
-/* ============================================
+/* Mark highlighting */
-   Loading & Spinner
+mark {
-   ============================================ */
+  background-color: rgba(255, 193, 7, 0.3);
-
+  color: inherit;
-@keyframes spin {
+  font-weight: 600;
-  from {
+  border-radius: 2px;
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
 }
 
-.spinning {
+html.dark-theme mark {
-  animation: spin 1s linear infinite;
+  background-color: rgba(255, 193, 7, 0.4);
-}
+  color: inherit;
-
+  font-weight: 600;
-.loading-container {
+  border-radius: 2px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 60px 20px;
-  color: var(--text-secondary);
-}
-
-.loading-container p {
-  margin-top: 16px;
-  font-size: 14px;
-}
-
-.loading-spinner {
-  font-size: 48px;
-}
-
-.icon-button:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.icon-button:disabled:hover {
-  background-color: var(--bg-input);
-  border-color: var(--border-color-light);
 }