Merge pull request #335 from davegallant/dependabot/npm_and_yarn/rollup-4.59.0

Bumps [minimatch](https://github.com/isaacs/minimatch) from 3.1.2 to 3.1.5.
- [Changelog](https://github.com/isaacs/minimatch/blob/main/changelog.md)
- [Commits](https://github.com/isaacs/minimatch/compare/v3.1.2...v3.1.5)

---
updated-dependencies:
- dependency-name: minimatch
  dependency-version: 3.1.5
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

.dockerignore

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

.eslintignore

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

.github/workflows/publish-container.yml

@@ -0,0 +1,50 @@
+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

@@ -1,87 +0,0 @@
-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

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

Dockerfile

@@ -1,20 +1,20 @@
-FROM node:20.2.0-alpine3.16 as builder
+# Build frontend
-
+FROM dhi.io/node:25-debian13-dev AS frontend-builder
 WORKDIR /app
-
 COPY package*.json ./
-
 RUN npm install
-
 COPY . .
-
 RUN npm run build
 
-FROM caddy:2.10.2-alpine as runtime
+# Build backend (with embedded frontend)
+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 .
 
-WORKDIR /my-site
+FROM dhi.io/static:20251003-musl-alpine3.23 AS runtime
-
+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 go run .
+	@cd backend && CGO_ENABLED=0 HTTP_PORT=8080 go run .
 .PHONY: backend
 
 ## frontend: Build and run the frontend from source
@@ -23,20 +23,21 @@ frontend:
 	@npm run serve
 .PHONY: frontend
 
-## dev: Build and run in docker compose
+## dev: Build and run in Docker
 dev:
-	docker compose up --build -d
+	docker build -t rfd-fyi:dev .
+	docker run -d --name rfd-fyi -p 8080:8080 rfd-fyi:dev
 .PHONY: dev
 
-## prod: Run the latest images in docker compose
+## prod: Run the latest image in Docker
 prod:
 	@git pull
-	@docker pull ghcr.io/davegallant/rfd-fyi-backend
+	@docker pull ghcr.io/davegallant/rfd-fyi
-	@docker pull ghcr.io/davegallant/rfd-fyi-frontend
+	@docker run -d --name rfd-fyi -p 8080:8080 ghcr.io/davegallant/rfd-fyi
-	@docker compose -f docker-compose.prod.yml up -d
 .PHONY: prod
 
-## teardown: Teardown docker
+## teardown: Teardown Docker
 teardown:
-	docker compose down
+	docker stop rfd-fyi || true
+	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.
 
-## Local Development
+## Docker
 
-To get up and running locally: in one pane/tab, run:
+To run the latest:
 
 ```sh
-make backend
+docker run -d --name rfd-fyi -p 8080:8080 ghcr.io/davegallant/rfd-fyi
 ```
 
-In another pane/tab, run:
+To build container from source:
-
-```sh
-make frontend
-```
-
-## Docker Compose
-
-To build containers from source:
 
 ```sh
 make dev
 ```
 
-To run the latest published images:
+## Local Development
+
+To get up and running locally: in one shell, run:
 
 ```sh
-make prod
+make backend
+```
+
+In another shell, run:
+
+```sh
+make frontend
 ```

backend/Dockerfile

@@ -1,16 +0,0 @@
-# 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,10 +1,12 @@
 package main
 
 import (
+	"embed"
 	"encoding/json"
 	"fmt"
-	"io/ioutil"
+	"io"
-	"math/rand"
+	"io/fs"
+	"math/rand/v2"
 	"net/http"
 	"net/url"
 	"strings"
@@ -17,20 +19,8 @@ import (
 	"github.com/gorilla/mux"
 )
 
-// @title           RFD FYI API
+//go:embed dist/*
-// @version         1.0
+var frontendFS embed.FS
-// @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
@@ -48,22 +38,45 @@ type Redirect struct {
 func (a *App) Initialize() {
 	a.BasePath = "/api/v1"
 
-	a.Router = mux.NewRouter().PathPrefix(a.BasePath).Subrouter()
+	a.Router = mux.NewRouter()
-	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(":"+httpPort), nil); err != nil {
+	if err := http.ListenAndServe(fmt.Sprintf(":%s", httpPort), a.Router); err != nil {
 		panic(err)
 	}
 }
 
 func (a *App) initializeRoutes() {
-	a.Router.HandleFunc("/topics", a.listTopics).Methods("GET")
+	a.Router.HandleFunc(a.BasePath+"/topics", a.listTopics).Methods("GET")
-	a.Router.HandleFunc("/topics/{id}", a.getTopicDetails).Methods("GET")
+	a.Router.HandleFunc(a.BasePath+"/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) {
@@ -82,10 +95,47 @@ 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")
+	
+	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
@@ -123,7 +173,7 @@ func (a *App) getTopicDetails(w http.ResponseWriter, r *http.Request) {
 	}
 	defer res.Body.Close()
 
-	body, err := ioutil.ReadAll(res.Body)
+	body, err := io.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"})
@@ -188,8 +238,7 @@ func (a *App) refreshTopics() {
 		}
 
 		a.LastRefresh = time.Now()
-		rand.Seed(time.Now().UnixNano())
+		time.Sleep(time.Duration(rand.IntN(90-60+1)+60) * time.Second)
-		time.Sleep(time.Duration(rand.Intn(90-60+1)+60) * time.Second)
 	}
 }
 
@@ -262,7 +311,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 := ioutil.ReadAll(res.Body)
+		body, err := io.ReadAll(res.Body)
 		if err != nil {
 			log.Warn().Msgf("could not read response body: %s\n", err)
 		}
@@ -292,7 +341,7 @@ func (a *App) getRedirects() []Redirect {
 	if err != nil {
 		log.Warn().Msgf("error fetching redirects: %s\n", err)
 	}
-	body, err := ioutil.ReadAll(res.Body)
+	body, err := io.ReadAll(res.Body)
 	if err != nil {
 		log.Warn().Msgf("could not read response body: %s\n", err)
 	}

backend/dist/index.html

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

backend/main.go

@@ -11,21 +11,6 @@ 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

@@ -1,16 +0,0 @@
-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

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

index.html

@@ -1,10 +1,10 @@
 <!DOCTYPE html>
-<html lang="en" data-bs-theme="dark">
+<html lang="en">
   <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" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <meta name="description" content="An overlay of rfd deals" />
+    <meta name="description" content="An alternative frontend for hot deals" />
 
     <!-- DNS prefetch for faster Google Fonts resolution -->
     <link rel="dns-prefetch" href="https://fonts.googleapis.com" />
@@ -17,19 +17,13 @@
     <link rel="icon" href="/favicon.png" />
 
     <!-- Load Material Symbols font with optimal display settings -->
-    <link
+
-      rel="preload"
-      as="font"
-      type="font/woff2"
-      href="https://fonts.gstatic.com/s/materialsymbolsoutlined/v211/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhQcyWwg.woff2"
-      crossorigin
-    />
     <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 - An overlay of hot deals</title>
+    <title>rfd-fyi</title>
 
     <!-- Analytics - loaded async/defer so it doesn't block page -->
     <script
@@ -38,6 +32,38 @@
       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() {
+        // Check for saved theme preference only
+        const savedTheme = localStorage.getItem('theme');
+        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');
+          document.documentElement.classList.remove('light-theme');
+        } else {
+          document.documentElement.classList.add('light-theme');
+          document.documentElement.classList.remove('dark-theme');
+        }
+      })();
+    </script>
   </head>
   <body>
     <noscript>

package.json

@@ -9,7 +9,7 @@
     "lint": "eslint . --fix"
   },
   "dependencies": {
-    "@fontsource/roboto": "5.2.9",
+    "@fontsource/roboto": "5.2.10",
     "@github/hotkey": "^3.0.0",
     "@mdi/font": "7.4.47",
     "@popperjs/core": "^2.11.8",
@@ -19,8 +19,7 @@
     "dayjs": "^1.11.10",
     "vue": "^3.5.17",
     "vue-loading-overlay": "^6.0.3",
-    "vue-router": "^5.0.0",
+    "vue-router": "^5.0.0"
-    "vuetify": "^3.9.6"
   },
   "devDependencies": {
     "@babel/core": "^7.22.10",
@@ -34,8 +33,7 @@
     "postcss-cli": "^11.0.0",
     "sass-embedded": "^1.89.2",
     "unplugin-vue-components": "^31.0.0",
-    "vite": "^7.0.0",
+    "vite": "^6.3.6"
-    "vite-plugin-vuetify": "^2.1.1"
   },
   "eslintConfig": {
     "root": true,

src/App.vue

@@ -2,390 +2,584 @@
 import axios from "axios";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
-import Loading from "vue-loading-overlay";
-import { install } from "@github/hotkey";
-import { ref, reactive } from "vue";
 
-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 {
-      ascending: this.ascending,
+      filterInput: "",
-      filter: window.location.href.split("filter=")[1] || "",
+      activeFilters: this.parseFiltersFromUrl(),
-      sortColumn: this.sortColumn,
+      sortMethod: "score",
+      viewMode: "cards",
       topics: [],
-      hoveredTopicId: null,
-      tooltipData: {},
-      loadingTooltip: {},
-      tooltipPosition: { x: 0, y: 0 },
       isMobile: false,
+      currentTheme: "auto",
+      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();
+    this.initializeSortMethod();
+    this.initializeViewMode();
+    this.initializeTheme();
+    this.setupThemeListener();
   },
+
   beforeUnmount() {
     window.removeEventListener("keydown", this.handleKeyDown);
-    window.removeEventListener("resize", this.detectMobile);
+    window.removeEventListener("resize", this.handleResize);
-  },
+    window.removeEventListener("click", this.handleClickOutside);
-  methods: {
+    if (this.darkModeQuery && this.themeChangeHandler) {
-    detectMobile() {
+      this.darkModeQuery.removeEventListener("change", this.themeChangeHandler);
-      // 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();
     }
   },
-    handleTitleHover(topic, event) {
-      // Don't load tooltips on mobile devices
-      if (this.isMobile) {
-        return;
-      }
-      this.hoveredTopicId = topic.topic_id;
-      this.tooltipPosition = {
-        x: event.clientX,
-        y: event.clientY,
-      };
-      this.loadTopicDetails(topic.topic_id);
-    },
-    handleTitleLeave() {
-      if (this.isMobile) {
-        return;
-      }
-      this.hoveredTopicId = null;
-    },
-    handleMouseMove(event) {
-      if (this.isMobile) {
-        return;
-      }
-      if (this.hoveredTopicId !== null) {
-        this.tooltipPosition = {
-          x: event.clientX,
-          y: event.clientY,
-        };
-      }
-    },
-    loadTopicDetails(topicId) {
-      if (!topicId) {
-        console.warn("Topic ID is undefined");
-        return;
-      }
 
-      if (this.tooltipData[topicId]) {
+  computed: {
-        return; // Already loaded
+    filteredTopics() {
-      }
+      const filterTerms = this.activeFilters.map(f => f.toLowerCase());
 
-      if (this.loadingTooltip[topicId]) {
+      const filtered = this.topics.filter((row) => {
-        return; // Already loading
+        if (filterTerms.length === 0) return true;
-      }
+        const searchText = `${row.title} [${row.Offer.dealer_name}]`.toLowerCase();
-
+        return filterTerms.every(term => searchText.includes(term));
-      this.loadingTooltip[topicId] = true;
-
-      axios
-        .get(`api/v1/topics/${topicId}`)
-        .then((response) => {
-          this.tooltipData[topicId] = response.data;
-        })
-        .catch((err) => {
-          console.log("Error loading topic details:", err);
-        })
-        .finally(() => {
-          this.loadingTooltip[topicId] = false;
       });
+
+      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);
     },
-    createFilterRoute(params) {
+
-      this.$refs.filter.blur();
+    themeIcon() {
-      history.pushState(
+      const icons = { auto: "brightness_auto", dark: "dark_mode", light: "light_mode" };
-        {},
+      return icons[this.currentTheme];
-        null,
-        `${window.location.origin}#/filter=${encodeURIComponent(params)}`
-      );
     },
+
+    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";
+      this.currentTheme = savedTheme;
+      this.applyTheme(savedTheme, true);
+    },
+
+    setupThemeListener() {
+      this.darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+      this.themeChangeHandler = (e) => {
+        const savedTheme = localStorage.getItem("theme");
+        if (savedTheme === "auto" || !savedTheme) {
+          this.applyThemeActual(e.matches ? "dark" : "light");
+        }
+      };
+
+      this.darkModeQuery.addEventListener("change", this.themeChangeHandler);
+    },
+
+    applyTheme(theme, skipSave = false) {
+      this.currentTheme = theme;
+
+      if (!skipSave) {
+        localStorage.setItem("theme", theme);
+      }
+
+      let actualTheme = theme;
+      if (theme === "auto") {
+        actualTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+      }
+
+      this.applyThemeActual(actualTheme);
+    },
+
+    applyThemeActual(theme) {
+      document.documentElement.setAttribute("data-bs-theme", theme);
+      document.documentElement.classList.toggle("dark-theme", theme === "dark");
+      document.documentElement.classList.toggle("light-theme", theme === "light");
+    },
+
+    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);
+      }
+    },
+
+    applyFilter() {
+      const trimmed = this.filterInput.trim();
+      if (trimmed && !this.activeFilters.includes(trimmed)) {
+        this.activeFilters.push(trimmed);
+        this.filterInput = "";
+        this.$refs.filterInput.blur();
+        this.updateUrlWithFilters();
+      }
+    },
+
+    clearFilter(index) {
+      this.activeFilters.splice(index, 1);
+      this.updateUrlWithFilters();
+    },
+
+    clearAllFilters() {
+      this.activeFilters = [];
+      this.filterInput = "";
+      this.updateUrlWithFilters();
+    },
+
     fetchDeals() {
-      axios
+      this.isLoading = true;
-        .get("api/v1/topics")
+      const minLoadingTime = new Promise(resolve => setTimeout(resolve, 500));
-        .then((response) => {
+
+      Promise.all([
+        axios.get("api/v1/topics"),
+        minLoadingTime
+      ])
+        .then(([response]) => {
           this.topics = response.data;
         })
         .catch((err) => {
-          console.log(err.response);
+          console.error("Failed to fetch deals:", err.response || err);
+        })
+        .finally(() => {
+          this.isLoading = false;
         });
     },
-  },
-  computed: {
-    formatDate() {
-      return (v) => {
-        const date = dayjs(String(v));
-        return date.format("hh:mm A (MM/DD)");
-      };
-    },
-    filteredTopics() {
-      return this.topics.filter((row) => {
-        const titles = (
-          row.title.toString() +
-          " [" +
-          row.Offer.dealer_name +
-          "]"
-        ).toLowerCase();
-        const filterTerm = this.filter.toLowerCase();
-        return titles.includes(filterTerm);
-      });
-    },
-    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");
+    initializeSortMethod() {
-        return v.replace(re, (matchedText) => `<mark>${matchedText}</mark>`);
+      const saved = localStorage.getItem("sortMethod");
-      };
+      if (saved) {
-    },
+        this.sortMethod = saved;
-    visibleHeaders() {
-      const baseHeaders = [
-        { title: "Deal", value: "title", align: "center" },
-        { title: "Score", value: "score", align: "center", sortable: true },
-      ];
-      
-      // Only show Last Post column on desktop
-      if (!this.isMobile) {
-        baseHeaders.push({
-          title: "Last Post",
-          value: "last_post_time",
-          align: "center",
-          sortable: true,
-        });
       }
+    },
 
-      return baseHeaders;
+    toggleSort() {
+      const cycle = { score: "views", views: "recency", recency: "score" };
+      this.sortMethod = cycle[this.sortMethod];
+      localStorage.setItem("sortMethod", this.sortMethod);
+    },
+
+    initializeViewMode() {
+      const saved = localStorage.getItem("viewMode");
+      if (saved) {
+        this.viewMode = saved;
+      }
+    },
+
+    toggleViewMode() {
+      const cycle = { cards: "list", list: "cards" };
+      this.viewMode = cycle[this.viewMode];
+      localStorage.setItem("viewMode", this.viewMode);
+    },
+
+    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>
 
-<script setup>
-const sortBy = ref([{ key: "score", order: "desc" }]);
-</script>
-
 <template>
-  <v-app>
+  <div id="app">
-    <v-main>
+    <div class="container">
-      <link rel="shortcut icon" type="image/png" href="/favicon.png" />
+      <div class="header">
-      <body>
+        <div class="header-controls">
-        <v-text-field
+          <div class="filter-container" :class="{ 'has-active-filters': activeFilters.length > 0 }">
-          v-model="filter"
+            <span v-for="(filter, index) in activeFilters" :key="index" class="filter-tag">
-          label="Filter"
+              {{ filter }}
-          ref="filter"
+              <button class="filter-tag-clear" @click="clearFilter(index)" title="Clear filter">
-          @keyup.enter="createFilterRoute(filter.toString())"
+                <span class="material-symbols-outlined">close</span>
-          @keyup.esc="$refs.filter.blur()"
+              </button>
-          hide-details="true"
+            </span>
+            <input
+              ref="filterInput"
+              v-model="filterInput"
+              type="text"
+              placeholder="Filter deals"
+              class="search-input"
+              @keyup.enter="applyFilter"
+              @keyup.esc="$refs.filterInput.blur()"
             />
-        <v-data-table
+          </div>
-          :headers="visibleHeaders"
+          <!-- Desktop buttons -->
-          :items="filteredTopics"
+          <button class="icon-button desktop-only" title="Refresh deals" @click="fetchDeals" :disabled="isLoading">
-          :sort-by="sortColumn"
+            <span class="material-symbols-outlined" :class="{ 'spinning': isLoading }">refresh</span>
-          v-model:sortBy="sortBy"
+          </button>
-          :items-per-page="50"
+          <button class="icon-button desktop-only" :title="sortTitle" @click="toggleSort">
-        >
+            <span class="material-symbols-outlined">{{ sortIcon }}</span>
-          <template #item.title="{ item }">
+          </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">
+        <span class="material-symbols-outlined spinning loading-spinner">refresh</span>
+        <p>Loading deals...</p>
+      </div>
+      <div class="cards-wrapper" v-else>
+        <div v-if="isLoading" class="loading-overlay">
+          <span class="material-symbols-outlined spinning loading-spinner">refresh</span>
+        </div>
+        <div :class="viewMode === 'cards' ? 'cards-grid' : 'list-view'">
+        <div v-for="topic in filteredTopics" :key="topic.topic_id" :class="viewMode === 'cards' ? 'deal-card' : 'deal-row'">
+          <div class="card-header">
+            <div class="title-with-link">
               <a
-              :href="`https://forums.redflagdeals.com${item.web_path}`"
+                :href="`https://forums.redflagdeals.com${topic.web_path}`"
                 target="_blank"
-              @mouseenter="handleTitleHover(item, $event)"
+                class="deal-title"
-              @mouseleave="handleTitleLeave"
+                v-html="highlightText(topic.title)"
-              @mousemove="handleMouseMove"
-              v-html="
-                highlightMatches(
-                  item.title
-                )
-              "
               ></a>
-          </template>
+              <a
-
+                v-if="topic.Offer.url"
-          <template #item.score="{ item }">
+                :href="topic.Offer.url"
-            <span v-if="item.score > 0" class="green-score"
+                target="_blank"
-              >+{{ item.score }}</span
+                class="card-link"
+                title="Open direct link to deal"
               >
-            <span v-else-if="item.score < 0" class="red-score">{{
+                <span class="material-symbols-outlined">open_in_new</span>
-              item.score
+              </a>
-            }}</span>
+            </div>
-            <span v-else>{{ item.score }}</span>
-          </template>
-
-          <template #item.last_post_time="{ item }">
-            {{ formatDate(item.last_post_time) }}
-          </template>
-
-          <template #loading>
-            <v-progress-linear indeterminate color="grey" />
-          </template>
-        </v-data-table>
-
-        <!-- Tooltip for deal details -->
             <div
-          v-if="hoveredTopicId !== null && tooltipData[hoveredTopicId]"
+              class="score-bubble"
-          class="deal-tooltip"
+              :class="{
-          :style="{
+                positive: topic.score > 0,
-            position: 'fixed',
+                negative: topic.score < 0,
-            left: tooltipPosition.x + 10 + 'px',
+                neutral: topic.score === 0,
-            top: tooltipPosition.y + 10 + 'px',
-            zIndex: 9999,
               }"
             >
-          <div class="tooltip-content">
+              <span v-if="topic.score > 0">+{{ topic.score }}</span>
-            <div class="tooltip-header">{{ tooltipData[hoveredTopicId].topic.title }}</div>
+              <span v-else>{{ topic.score }}</span>
-              <div class="tooltip-dealer">
-                {{ tooltipData[hoveredTopicId].topic.Offer.dealer_name }}
             </div>
-              <div class="tooltip-stats">
+          </div>
-                <span class="stat-item">
+          <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>
-                  {{ tooltipData[hoveredTopicId].topic.total_views }} views
+                <span class="stat-value">{{ topic.total_views }} views</span>
-                </span>
+              </div>
-                <span class="stat-item">
+              <div class="stat">
                 <span class="material-symbols-outlined">chat</span>
-                  {{ tooltipData[hoveredTopicId].topic.total_replies }} replies
+                <span class="stat-value">{{ topic.total_replies }} replies</span>
-                </span>
               </div>
-            <div v-if="tooltipData[hoveredTopicId].description" class="tooltip-description">
-              <strong>Description:</strong>
-              {{ tooltipData[hoveredTopicId].description }}
             </div>
-            <div v-if="tooltipData[hoveredTopicId].first_post" class="tooltip-first-post">
+            <div class="card-timestamp">First post: {{ formatDate(topic.post_time) }}</div>
-              <strong>First Post:</strong>
+            <div class="card-timestamp">Last post: {{ formatDate(topic.last_post_time) }}</div>
-              {{ tooltipData[hoveredTopicId].first_post }}
           </div>
-            <div class="tooltip-times">
+          <div class="row-stats" v-if="viewMode === 'list'">
-              <div>Posted: {{ formatDate(tooltipData[hoveredTopicId].topic.post_time) }}</div>
+            <span class="stat-compact">{{ formatDate(topic.post_time) }} - {{ formatDate(topic.last_post_time) }}</span>
-              <div>Last Post: {{ formatDate(tooltipData[hoveredTopicId].topic.last_post_time) }}</div>
           </div>
         </div>
         </div>
-      </body>
+      </div>
-    </v-main>
+    </div>
-  </v-app>
+  </div>
-</template>
+  <InfoOverlay :visible="infoOverlayVisible" @close="toggleInfoOverlay" />
+  </template>
 
 <style scoped>
-#app {
+.cards-wrapper {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+  position: relative;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
 }
 
-.fixed-bottom {
+.loading-overlay {
-  background: #ffc;
+  position: absolute;
-  color: black;
+  top: 0;
-}
+  left: 0;
-
+  right: 0;
-.deal-tooltip {
+  bottom: 0;
-  pointer-events: none;
+  background-color: rgba(128, 128, 128, 0.3);
-  max-width: 400px;
-}
-
-.tooltip-content {
-  background: #24283b;
-  border: 2px solid #a9b1d6;
-  border-radius: 8px;
-  padding: 16px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
-  font-size: 13px;
-  color: #e0e0e0;
-  text-align: left;
-}
-
-.tooltip-header {
-  font-weight: bold;
-  font-size: 14px;
-  color: #d0d0d0;
-  margin-bottom: 8px;
-  white-space: normal;
-  word-wrap: break-word;
-}
-
-.tooltip-dealer {
-  font-size: 12px;
-  color: #c0c0c0;
-  margin-bottom: 8px;
-}
-
-.tooltip-stats {
-  display: flex;
-  gap: 12px;
-  margin-bottom: 8px;
-  font-size: 12px;
-}
-
-.stat-item {
   display: flex;
   align-items: center;
-  gap: 4px;
+  justify-content: center;
+  z-index: 10;
+  border-radius: 12px;
 }
 
-.stat-item .material-symbols-outlined {
+.loading-overlay .loading-spinner {
-  font-size: 16px;
+  font-size: 48px;
-}
+  color: var(--text-primary);
-
-.tooltip-description {
-  margin-bottom: 8px;
-  padding: 8px;
-  background: rgba(160, 160, 160, 0.1);
-  border-left: 2px solid #a9b1d6;
-  border-radius: 2px;
-  font-size: 12px;
-  white-space: normal;
-  word-wrap: break-word;
-  max-height: 60px;
-  overflow-y: auto;
-}
-
-.tooltip-first-post {
-  margin-bottom: 8px;
-  padding: 8px;
-  background: rgba(160, 160, 160, 0.1);
-  border-left: 2px solid #a9b1d6;
-  border-radius: 2px;
-  font-size: 12px;
-  white-space: normal;
-  word-wrap: break-word;
-  max-height: 60px;
-  overflow-y: auto;
-}
-
-.tooltip-times {
-  font-size: 11px;
-  color: #b0b0b0;
-  border-top: 1px solid #555555;
-  padding-top: 8px;
-  margin-top: 8px;
 }
 </style>

src/components/InfoOverlay.vue

@@ -0,0 +1,116 @@
+<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,11 +2,12 @@ import { createApp } from "vue";
 import App from "./App.vue";
 import { createRouter, createWebHashHistory } from "vue-router";
 
-import "./theme.css";
+const routes = [
-
+  {
-import { registerPlugins } from "@/plugins";
+    path: '/:pathMatch(.*)*',
-
+    component: App,
-const routes = [];
+  },
+];
 
 const router = createRouter({
   history: createWebHashHistory(),
@@ -15,7 +16,5 @@ const router = createRouter({
 
 const app = createApp(App);
 
-registerPlugins(app);
-
 app.use(router);
 app.mount("#app");

src/plugins/README.md

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

src/plugins/index.js

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

src/plugins/vuetify.js

@@ -1,35 +0,0 @@
-/**
- * plugins/vuetify.js
- *
- * Framework documentation: https://vuetifyjs.com`
- */
-
-// Styles
-import "@mdi/font/css/materialdesignicons.css";
-import "vuetify/styles";
-
-const tokyoNight = {
-  dark: true,
-  colors: {
-    background: "#1a1b26",
-    surface: "#24283b",
-    primary: "#7aa2f7",
-    secondary: "#b4f9f8",
-    accent: "#ff9e64",
-    error: "#f7768e",
-    info: "#2ac3de",
-    success: "#9ece6a",
-    warning: "#e0af68",
-  },
-};
-
-// Composables
-import { createVuetify } from "vuetify";
-
-// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
-export default createVuetify({
-  theme: {
-    defaultTheme: "tokyoNight",
-    themes: { tokyoNight },
-  },
-});

src/theme.css

@@ -1,12 +1,4 @@
-/* Material Symbols font optimization - prevent flash of unstyled text */
+/* Material Symbols Icon Font */
-@font-face {
-  font-family: 'Material Symbols Outlined';
-  src: url('https://fonts.gstatic.com/s/materialsymbolsoutlined/v211/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhQcyWwg.woff2') format('woff2');
-  font-weight: 100 700;
-  font-style: normal;
-  font-display: block;
-}
-
 .material-symbols-outlined {
   font-family: 'Material Symbols Outlined';
   font-weight: normal;
@@ -21,57 +13,722 @@
   direction: ltr;
 }
 
-body {
+/* ============================================
-  max-width: 100%;
+   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 */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-bs-theme="light"]):not(.light-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 dark theme */
+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: sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
   min-width: 100%;
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
 }
 
-footer {
+body {
-  background: #212529;
+  max-width: 100%;
-  color: white;
+  background-color: var(--bg-primary);
-  padding: 3px;
+  color: var(--text-primary);
-  padding-right: 10px;
+  transition: background-color 0.3s ease, color 0.3s ease;
-  padding-left: 10px;
+  margin: 0;
-}
+  padding: 0;
-
-.footer-left {
-  float: left;
-}
-
-.footer-right {
-  float: right;
-}
-
-.green-score {
-  color: rgb(158, 206, 106) !important;
-}
-
-.red-score {
-  color: rgb(247, 118, 142) !important;
 }
 
 a {
-  color: var(--v-theme-primary);
+  color: var(--link-color);
-}
+  transition: color 0.2s ease;
-
-a:hover {
-  color: #d65d03;
 }
 
 a:visited {
-  color: #53514f;
+  color: var(--link-color);
 }
 
-@media (min-width: 769px) {
+/* ============================================
-  .v-data-table-header th,
+   Layout
-  .v-data-table__td,
+   ============================================ */
-  .v-data-footer {
+
-    font-size: 1.2rem;
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+  min-height: 100vh;
+}
+
+.header {
+  margin-bottom: 30px;
+}
+
+.header-controls {
+  display: flex;
+  gap: 12px;
+  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-radius: 4px;
+  background-color: var(--bg-input);
+  color: var(--text-primary);
+  transition: all 0.2s ease;
+  font-family: inherit;
+}
+
+.search-input:focus {
+  outline: none;
+  border-color: var(--border-color-hover);
+  background-color: var(--bg-input-focus);
+  box-shadow: 0 0 0 2px var(--shadow-light);
+}
+
+.search-input::placeholder {
+  color: var(--text-secondary);
+}
+
+/* ============================================
+   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-radius: 4px;
+  background-color: var(--bg-input);
+  color: var(--text-primary);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 18px;
+  padding: 0;
+  flex-shrink: 0;
+}
+
+.icon-button:hover {
+  background-color: var(--bg-secondary);
+  border-color: var(--border-color-hover);
+}
+
+.icon-button:active {
+  transform: scale(0.95);
+}
+
+/* Legacy class names for compatibility */
+.sort-toggle,
+.theme-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: 1px solid var(--border-color-light);
+  border-radius: 4px;
+  background-color: var(--bg-input);
+  color: var(--text-primary);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 18px;
+  padding: 0;
+  flex-shrink: 0;
+}
+
+.sort-toggle:hover,
+.theme-toggle:hover {
+  background-color: var(--bg-secondary);
+  border-color: var(--border-color-hover);
+}
+
+.sort-toggle:active,
+.theme-toggle:active {
+  transform: scale(0.95);
+}
+
+/* ============================================
+   Cards Grid
+   ============================================ */
+
+.cards-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+  gap: 20px;
+  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;
+  border-radius: 12px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  transition: all 0.2s ease;
+  min-height: auto;
+}
+
+.deal-card:hover {
+  box-shadow: 0 4px 8px var(--shadow-medium);
+  border-color: var(--border-color-hover);
+}
+
+/* ============================================
+   Card Header
+   ============================================ */
+
+.card-header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  margin-bottom: 12px;
+  justify-content: space-between;
+}
+
+.title-with-link {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  flex: 1;
+}
+
+.deal-title {
+  color: var(--link-color);
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 15px;
+  line-height: 1.4;
+  flex: 1;
+  transition: color 0.2s ease;
+}
+
+.deal-title:visited {
+  color: var(--link-color);
+}
+
+.deal-title:hover {
+  text-decoration: underline;
+}
+
+.card-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--link-color);
+  text-decoration: none;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+}
+
+.card-link:hover {
+  opacity: 0.7;
+}
+
+.card-link .material-symbols-outlined {
+  font-size: 18px;
+}
+
+/* ============================================
+   Score Bubble
+   ============================================ */
+
+.score-bubble {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 40px;
+  height: 28px;
+  border-radius: 4px;
+  font-weight: 700;
+  font-size: 11px;
+  flex-shrink: 0;
+  transition: all 0.2s ease;
+  padding: 0 2px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+  border: none;
+}
+
+.score-bubble.positive {
+  background-color: var(--score-positive-bg);
+  color: var(--score-positive-text);
+  box-shadow: 0 1px 3px rgba(34, 139, 34, 0.2);
+}
+
+.score-bubble.negative {
+  background-color: var(--score-negative-bg);
+  color: var(--score-negative-text);
+  box-shadow: 0 1px 3px rgba(247, 118, 142, 0.2);
+}
+
+.score-bubble.neutral {
+  background-color: var(--text-secondary);
+  color: var(--bg-primary);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+}
+
+/* ============================================
+   Card 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;
+  border-top: 1px solid var(--border-color);
+}
+
+.details-stats {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 12px;
+}
+
+.stat {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.stat .material-symbols-outlined {
+  font-size: 18px;
+}
+
+.stat-value {
+  font-weight: 500;
+}
+
+.card-timestamp {
+  color: var(--text-secondary);
+  font-size: 12px;
+  margin-top: 8px;
+}
+
+/* ============================================
+   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;
+  }
+
+  .container {
+    padding: 12px;
+  }
+
+  .search-input {
+    max-width: 100%;
+  }
+}
+
+/* ============================================
+   Loading & Spinner
+   ============================================ */
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.spinning {
+  animation: spin 1s linear infinite;
+}
+
+.loading-container {
+  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);
+}

vite.config.mjs

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