Update Caddyfile

2026-03-03 09:36:35 +00:00 · 2026-01-02 20:25:53 -05:00
24 changed files with 830 additions and 2548 deletions
--- a/.envrc
+++ b/.envrc
@@ -1 +0,0 @@
-use flake
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,2 +0,0 @@
-dist/
-node_modules/
--- a/.github/workflows/publish-containers.yml
+++ b/.github/workflows/publish-containers.yml
@@ -1,11 +1,9 @@
 name: Publish Containers
-on:
+on: 
  push:
    branches:
      - main
  pull_request:
-  schedule:
-    - cron: "0 0 * * 0"

 jobs:
  publish-backend:
@@ -30,14 +28,6 @@ jobs:
            TAGS="$TAGS,${IMAGE_NAME}:latest"
          fi
          echo ::set-output name=tags::${TAGS}
-
-      - name: Login to Docker Hub
-        uses: docker/login-action@v3
-        with:
-          registry: dhi.io
-          username: ${{ secrets.DOCKER_USER }}
-          password: ${{ secrets.DOCKER_TOKEN }}
-
      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v3

@@ -78,7 +68,6 @@ jobs:
            TAGS="$TAGS,${IMAGE_NAME}:latest"
          fi
          echo ::set-output name=tags::${TAGS}
-
      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v3

--- a/.gitignore
+++ b/.gitignore
@@ -5,5 +5,3 @@ backend/bin/
 .vscode
 *.pem
 .env
-.direnv
-.envrc.local
--- a/6
+++ b/6
@@ -1,8 +1,4 @@
-{
-    auto_https off
-}
-
 :80 {
    file_server
-    reverse_proxy /api/* rfd-fyi-backend:8080
+    reverse_proxy /api/* backend:8080
 }
--- a/5
+++ b/5
@@ -1,4 +1,4 @@
-FROM dhi.io/node:25-debian13-dev as builder
+FROM node:20.2.0-alpine3.16 as builder

 WORKDIR /app

@@ -10,10 +10,11 @@ COPY . .

 RUN npm run build

-FROM dhi.io/caddy:2 as runtime
+FROM caddy:2.10.2-alpine as runtime

 WORKDIR /my-site

 COPY --from=builder /app/dist ./

 COPY Caddyfile /etc/caddy/Caddyfile
+
--- a/2
+++ b/2
@@ -15,7 +15,7 @@ help:

 ## backend: Build and run the backend from source
 backend:
-	@cd backend && CGO_ENABLED=0 go run .
+	@cd backend && go run .
 .PHONY: backend

 ## frontend: Build and run the frontend from source
--- a/backend/Dockerfile
+++ b/backend/Dockerfile
@@ -1,4 +1,5 @@
-FROM dhi.io/golang:1.26-debian13-dev AS build
+# syntax=docker/dockerfile:1.20
+FROM cgr.dev/chainguard/go:latest as build

 WORKDIR /src

@@ -6,7 +7,7 @@ COPY . /src

 RUN CGO_ENABLED=0 go build -o backend .

-FROM dhi.io/static:20251003-musl-alpine3.23
+FROM cgr.dev/chainguard/static:latest

 COPY --from=build /src/backend /backend

--- a/backend/app.go
+++ b/backend/app.go
@@ -3,8 +3,8 @@ package main
 import (
 	"encoding/json"
 	"fmt"
-	"io"
-	"math/rand/v2"
+	"io/ioutil"
+	"math/rand"
 	"net/http"
 	"net/url"
 	"strings"
@@ -63,7 +63,6 @@ func (a *App) Run(httpPort string) {

 func (a *App) initializeRoutes() {
 	a.Router.HandleFunc("/topics", a.listTopics).Methods("GET")
-	a.Router.HandleFunc("/topics/{id}", a.getTopicDetails).Methods("GET")
 }

 // func respondWithError(w http.ResponseWriter, code int, message string) {
@@ -82,131 +81,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")
-	
-	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
-// @Summary      Get detailed information about a specific topic
-// @Description  Fetches full details including recent comments for a topic by ID
-// @ID           get-topic-details
-// @Param        id path int true "Topic ID"
-// @Router       /topics/{id} [get]
-// @Success 200 {object} TopicDetails
-func (a *App) getTopicDetails(w http.ResponseWriter, r *http.Request) {
-	vars := mux.Vars(r)
-	topicID := vars["id"]
-
-	// Find topic in current topics
-	var topic *Topic
-	for i := range a.CurrentTopics {
-		if fmt.Sprintf("%d", a.CurrentTopics[i].TopicID) == topicID {
-			topic = &a.CurrentTopics[i]
-			break
-		}
-	}
-
-	if topic == nil {
-		respondWithJSON(w, http.StatusNotFound, map[string]string{"error": "Topic not found"})
-		return
-	}
-
-	// Fetch detailed info from RFD API
-	requestURL := fmt.Sprintf("https://forums.redflagdeals.com/api/topics/%s", topicID)
-	res, err := http.Get(requestURL)
-	if err != nil {
-		log.Warn().Msgf("error fetching topic details: %s\n", err)
-		respondWithJSON(w, http.StatusInternalServerError, map[string]string{"error": "Failed to fetch details"})
-		return
-	}
-	defer res.Body.Close()
-
-	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"})
-		return
-	}
-
-	var rfdResponse map[string]interface{}
-	err = json.Unmarshal([]byte(body), &rfdResponse)
-	if err != nil {
-		log.Warn().Msgf("could not unmarshal response body: %s", err)
-		respondWithJSON(w, http.StatusInternalServerError, map[string]string{"error": "Failed to parse response"})
-		return
-	}
-
-	// Extract relevant fields for tooltip
-	details := TopicDetails{
-		Topic:       *topic,
-		Description: extractDescription(rfdResponse),
-		FirstPost:   extractFirstPost(rfdResponse),
-	}
-
-	respondWithJSON(w, http.StatusOK, details)
-}
-
-func extractDescription(data map[string]interface{}) string {
-	if topic, ok := data["topic"].(map[string]interface{}); ok {
-		if description, ok := topic["description"].(string); ok {
-			return description
-		}
-	}
-	return ""
-}
-
-func extractFirstPost(data map[string]interface{}) string {
-	if posts, ok := data["posts"].([]interface{}); ok && len(posts) > 0 {
-		if firstPost, ok := posts[0].(map[string]interface{}); ok {
-			if body, ok := firstPost["body"].(string); ok {
-				// Truncate to first 200 characters
-				if len(body) > 200 {
-					return body[:200] + "..."
-				}
-				return body
-			}
-		}
-	}
-	return ""
+	respondWithJSON(w, http.StatusOK, a.CurrentTopics)
 }

 func (a *App) refreshTopics() {
@@ -215,7 +93,6 @@ func (a *App) refreshTopics() {
 		latestTopics := a.getDeals(9, 1, 6)

 		if len(latestTopics) > 0 {
-			latestTopics = a.deduplicateTopics(latestTopics)
 			latestTopics = a.updateScores(latestTopics)

 			log.Info().Msg("Refreshing redirects")
@@ -225,7 +102,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)
 	}
 }

@@ -268,22 +146,6 @@ func (a *App) stripRedirects(t []Topic) []Topic {
 	return t
 }

-func (a *App) deduplicateTopics(topics []Topic) []Topic {
-	seen := make(map[uint]bool)
-	var deduplicated []Topic
-
-	for _, topic := range topics {
-		if !seen[topic.TopicID] {
-			seen[topic.TopicID] = true
-			deduplicated = append(deduplicated, topic)
-		} else {
-			log.Debug().Msgf("Removing duplicate topic: %d", topic.TopicID)
-		}
-	}
-
-	return deduplicated
-}
-
 func (a *App) isSponsor(t Topic) bool {
 	return strings.HasPrefix(t.Title, "[Sponsored]")
 }
@@ -298,7 +160,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)
 		}
@@ -328,7 +190,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)
 	}
--- a/backend/go.mod
+++ b/backend/go.mod
@@ -1,6 +1,6 @@
 module github.com/davegallant/rfd-fyi

-go 1.26
+go 1.18

 require (
 	github.com/dlclark/regexp2 v1.11.5
--- a/backend/model.go
+++ b/backend/model.go
@@ -27,9 +27,3 @@ type Offer struct {
 	DealerName string `json:"dealer_name"`
 	Url string `json:"url"`
 } // @name Offer
-
-type TopicDetails struct {
-	Topic       Topic  `json:"topic"`
-	Description string `json:"description"`
-	FirstPost   string `json:"first_post"`
-} // @name TopicDetails
--- a/flake.lock
+++ b/flake.lock
@@ -1,61 +0,0 @@
-{
-  "nodes": {
-    "flake-utils": {
-      "inputs": {
-        "systems": "systems"
-      },
-      "locked": {
-        "lastModified": 1731533236,
-        "narHash": "sha256-l0KFg5HjrsfsO/JpG+r7fRrqm12kzFHyUHqHCVpMMbI=",
-        "owner": "numtide",
-        "repo": "flake-utils",
-        "rev": "11707dc2f618dd54ca8739b309ec4fc024de578b",
-        "type": "github"
-      },
-      "original": {
-        "owner": "numtide",
-        "repo": "flake-utils",
-        "type": "github"
-      }
-    },
-    "nixpkgs": {
-      "locked": {
-        "lastModified": 1771008912,
-        "narHash": "sha256-gf2AmWVTs8lEq7z/3ZAsgnZDhWIckkb+ZnAo5RzSxJg=",
-        "owner": "NixOS",
-        "repo": "nixpkgs",
-        "rev": "a82ccc39b39b621151d6732718e3e250109076fa",
-        "type": "github"
-      },
-      "original": {
-        "owner": "NixOS",
-        "ref": "nixos-unstable",
-        "repo": "nixpkgs",
-        "type": "github"
-      }
-    },
-    "root": {
-      "inputs": {
-        "flake-utils": "flake-utils",
-        "nixpkgs": "nixpkgs"
-      }
-    },
-    "systems": {
-      "locked": {
-        "lastModified": 1681028828,
-        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
-        "owner": "nix-systems",
-        "repo": "default",
-        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
-        "type": "github"
-      },
-      "original": {
-        "owner": "nix-systems",
-        "repo": "default",
-        "type": "github"
-      }
-    }
-  },
-  "root": "root",
-  "version": 7
-}
--- a/flake.nix
+++ b/flake.nix
@@ -1,42 +0,0 @@
-{
-  description = "rfd-fyi development environment";
-
-  inputs = {
-    nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";
-    flake-utils.url = "github:numtide/flake-utils";
-  };
-
-  outputs = { self, nixpkgs, flake-utils }:
-    flake-utils.lib.eachDefaultSystem (system:
-      let
-        pkgs = nixpkgs.legacyPackages.${system};
-      in
-      {
-        devShells.default = pkgs.mkShell {
-          buildInputs = with pkgs; [
-            nodejs_25
-            go
-            pkg-config
-            git
-            curl
-            jq
-            gnumake
-          ];
-
-          shellHook = ''
-            echo "🚀 rfd-fyi development environment loaded"
-            echo "Available commands:"
-            echo "  Frontend: npm install, npm run build, npm run serve"
-            echo "  Backend:  cd backend && CGO_ENABLED=0 go run ."
-            echo ""
-            echo "Node version: $(node --version)"
-            echo "npm version: $(npm --version)"
-            echo "Go version: $(go version)"
-            echo ""
-            echo "Tip: Run 'npm install' to install frontend dependencies"
-            echo "Tip: Vite is available via 'npx vite' or 'npm run build'"
-          '';
-        };
-      }
-    );
-}
--- a/index.html
+++ b/index.html
@@ -1,69 +1,21 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="" data-bs-theme="dark">
  <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="description" content="An alternative frontend for hot 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 -->
-
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <meta name="description" content="An overlay of rfd deals" />
+    <link rel="icon" href="<%= BASE_URL %>favicon.png" />
    <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"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
    />
-
-    <title>rfd-fyi</title>
-
-    <!-- Analytics - loaded async/defer so it doesn't block page -->
+    <title>rfd-fyi - An overlay of hot deals</title>
    <script
-      async
      defer
      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>
@@ -74,5 +26,6 @@
    </noscript>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
+    <!-- built files will be auto injected -->
  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -16,10 +16,13 @@
    "axios": "^1.12.0",
    "core-js": "^3.32.1",
    "cssnano": "^7.0.0",
-    "dayjs": "^1.11.10",
+    "jquery": "^3.7.0",
+    "moment": "^2.29.4",
    "vue": "^3.5.17",
+    "vue-github-button": "^3.0.3",
    "vue-loading-overlay": "^6.0.3",
-    "vue-router": "^5.0.0"
+    "vue-router": "^4.5.1",
+    "vuetify": "^3.9.6"
  },
  "devDependencies": {
    "@babel/core": "^7.22.10",
@@ -32,8 +35,10 @@
    "eslint-plugin-vue": "^9.17.0",
    "postcss-cli": "^11.0.0",
    "sass-embedded": "^1.89.2",
-    "unplugin-vue-components": "^31.0.0",
-    "vite": "^6.3.6"
+    "unplugin-fonts": "^1.3.1",
+    "unplugin-vue-components": "^30.0.0",
+    "vite": "^6.3.6",
+    "vite-plugin-vuetify": "^2.1.1"
  },
  "eslintConfig": {
    "root": true,
@@ -49,4 +54,4 @@
    },
    "rules": {}
  }
-}
+}
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,585 +1,174 @@
 <script>
 import axios from "axios";
-import dayjs from "dayjs";
-import utc from "dayjs/plugin/utc";
+import moment from "moment";
+import Loading from "vue-loading-overlay";
+import { install } from "@github/hotkey";

-import "./theme.css";
-
-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);
-}
+import "vue-loading-overlay/dist/css/index.css";
+import { ref } from "vue";

 export default {
  data() {
    return {
-      filterInput: "",
-      activeFilters: this.parseFiltersFromUrl(),
-      sortMethod: "score",
-      viewMode: "cards",
+      ascending: this.ascending,
+      filter: window.location.href.split("filter=")[1] || "",
+      sortColumn: this.sortColumn,
      topics: [],
-      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.handleResize);
-    window.removeEventListener("click", this.handleClickOutside);
-    if (this.darkModeQuery && 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";
-      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);
-
+      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();
+        event.preventDefault(); // prevent typing `/` into whatever is focused
+        this.$refs.filter.focus();
      }
    },
-
-    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 [];
+    createFilterRoute(params) {
+      this.$refs.filter.blur();
+      history.pushState(
+        {},
+        null,
+        `${window.location.origin}#/filter=${encodeURIComponent(params)}`
+      );
    },
-
-    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() {
-      this.isLoading = true;
-      const minLoadingTime = new Promise(resolve => setTimeout(resolve, 500));
-
-      Promise.all([
-        axios.get("api/v1/topics"),
-        minLoadingTime
-      ])
-        .then(([response]) => {
+      axios
+        .get("api/v1/topics")
+        .then((response) => {
          this.topics = response.data;
        })
        .catch((err) => {
-          console.error("Failed to fetch deals:", err.response || err);
-        })
-        .finally(() => {
-          this.isLoading = false;
+          console.log(err.response);
        });
    },
-
-    initializeSortMethod() {
-      const saved = localStorage.getItem("sortMethod");
-      if (saved) {
-        this.sortMethod = saved;
-      }
-    },
-
-    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,
+  },
+  computed: {
+    formatDate() {
+      return (v) => {
+        return moment(String(v)).format("hh:mm A z (MM/DD)");
      };
    },
-    toggleInfoOverlay() {
-      this.infoOverlayVisible = !this.infoOverlayVisible;
+    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);
+      });
    },
-    methods: {
-      toggleInfoOverlay() {
-        this.infoOverlayVisible = !this.infoOverlayVisible;
-      },
+    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>`);
+      };
    },
  },
 };
 </script>

+<script setup>
+const headers = [
+  { title: "Deal", value: "title", align: "center" },
+  { title: "Score", value: "score", align: "center", sortable: true },
+  { title: "Views", value: "total_views", align: "center", sortable: true },
+  {
+    title: "Last Post",
+    value: "last_post_time",
+    align: "center",
+    sortable: true,
+  },
+];
+const sortBy = ref([{ key: "score", order: "desc" }]); // Vuetify 3 format
+</script>
+
 <template>
-  <div id="app">
-    <div class="container">
-      <div class="header">
-        <div class="header-controls">
-          <div class="filter-container" :class="{ 'has-active-filters': activeFilters.length > 0 }">
-            <span v-for="(filter, index) in activeFilters" :key="index" class="filter-tag">
-              {{ filter }}
-              <button class="filter-tag-clear" @click="clearFilter(index)" title="Clear filter">
-                <span class="material-symbols-outlined">close</span>
-              </button>
-            </span>
-            <input
-              ref="filterInput"
-              v-model="filterInput"
-              type="text"
-              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">
-            <span class="material-symbols-outlined">{{ sortIcon }}</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">
-        <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${topic.web_path}`"
-                target="_blank"
-                class="deal-title"
-                v-html="highlightText(topic.title)"
-              ></a>
-              <a
-                v-if="topic.Offer.url"
-                :href="topic.Offer.url"
-                target="_blank"
-                class="card-link"
-                title="Open direct link to deal"
-              >
-                <span class="material-symbols-outlined">open_in_new</span>
-              </a>
-            </div>
-            <div
-              class="score-bubble"
-              :class="{
-                positive: topic.score > 0,
-                negative: topic.score < 0,
-                neutral: topic.score === 0,
-              }"
+  <v-app>
+    <v-main>
+      <link rel="shortcut icon" type="image/png" href="/favicon.png" />
+      <body>
+        <v-text-field
+          v-model="filter"
+          label="Filter"
+          ref="filter"
+          @keyup.enter="createFilterRoute(filter.toString())"
+          @keyup.esc="$refs.filter.blur()"
+          hide-details="true"
+        />
+        <v-data-table
+          :headers="headers"
+          :items="filteredTopics"
+          :sort-by="sortColumn"
+          v-model:sortBy="sortBy"
+          :items-per-page="25"
+        >
+          <template #item.title="{ item }">
+            <a
+              :href="`https://forums.redflagdeals.com${item.web_path}`"
+              target="_blank"
+              v-html="
+                highlightMatches(
+                  item.title + ' [' + item.Offer.dealer_name + '] '
+                )
+              "
+            ></a>
+            <a :href="item.Offer.url" target="_blank" v-if="item.Offer.url">
+              <span class="material-symbols-outlined"> link </span>
+            </a>
+            <span v-else class="material-symbols-outlined"> link_off </span>
+          </template>
+
+          <template #item.score="{ item }">
+            <span v-if="item.score > 0" class="green-score"
+              >+{{ item.score }}</span
            >
-              <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">
-                <span class="material-symbols-outlined">chat</span>
-                <span class="stat-value">{{ topic.total_replies }} replies</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>
-          <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>
-  <InfoOverlay :visible="infoOverlayVisible" @close="toggleInfoOverlay" />
-  </template>
+            <span v-else-if="item.score < 0" class="red-score">{{
+              item.score
+            }}</span>
+            <span v-else>{{ item.score }}</span>
+          </template>

-<style scoped>
-.cards-wrapper {
-  position: relative;
+          <template #item.last_post_time="{ item }">
+            {{ formatDate(item.last_post_time) }}
+          </template>
+
+          <template #loading>
+            <v-progress-linear indeterminate color="grey" />
+          </template>
+        </v-data-table>
+      </body>
+    </v-main>
+  </v-app>
+</template>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
 }

-.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);
+.fixed-bottom {
+  background: #ffc;
+  color: black;
 }
 </style>
--- a/src/components/InfoOverlay.vue
+++ b/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>
--- a/src/main.js
+++ b/src/main.js
@@ -2,12 +2,11 @@ import { createApp } from "vue";
 import App from "./App.vue";
 import { createRouter, createWebHashHistory } from "vue-router";

-const routes = [
-  {
-    path: '/:pathMatch(.*)*',
-    component: App,
-  },
-];
+import "./theme.css";
+
+import { registerPlugins } from "@/plugins";
+
+const routes = [];

 const router = createRouter({
  history: createWebHashHistory(),
@@ -16,5 +15,7 @@ const router = createRouter({

 const app = createApp(App);

+registerPlugins(app);
+
 app.use(router);
-app.mount("#app");
+app.mount("#app");
--- a/src/plugins/README.md
+++ b/src/plugins/README.md
@@ -0,0 +1,3 @@
+# Plugins
+
+Plugins are a way to extend the functionality of your Vue application. Use this folder for registering plugins that you want to use globally.
--- a/src/plugins/index.js
+++ b/src/plugins/index.js
@@ -0,0 +1,12 @@
+/**
+ * plugins/index.js
+ *
+ * Automatically included in `./src/main.js`
+ */
+
+// Plugins
+import vuetify from './vuetify'
+
+export function registerPlugins (app) {
+  app.use(vuetify)
+}
--- a/src/plugins/vuetify.js
+++ b/src/plugins/vuetify.js
@@ -0,0 +1,35 @@
+/**
+ * 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 },
+  },
+});
--- a/src/theme.css
+++ b/src/theme.css
@@ -1,734 +1,54 @@
-/* Material Symbols Icon Font */
-.material-symbols-outlined {
-  font-family: 'Material Symbols Outlined';
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  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: -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%;
-  background-color: var(--bg-primary);
-  color: var(--text-primary);
 }

-body {
-  max-width: 100%;
-  background-color: var(--bg-primary);
-  color: var(--text-primary);
-  transition: background-color 0.3s ease, color 0.3s ease;
-  margin: 0;
-  padding: 0;
+footer {
+  background: #212529;
+  color: white;
+  padding: 3px;
+  padding-right: 10px;
+  padding-left: 10px;
+}
+
+.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(--link-color);
-  transition: color 0.2s ease;
+  color: var(--v-theme-primary);
+}
+
+a:hover {
+  color: #d65d03;
 }

 a:visited {
-  color: var(--link-color);
+  color: #53514f;
 }

-/* ============================================
-   Layout
-   ============================================ */
-
-.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;
+@media (min-width: 769px) {
+  .v-data-table-header th,
+  .v-data-table__td,
+  .v-data-footer {
+    font-size: 1.2rem;
  }
 }
-
-/* ============================================
-   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);
-}
--- a/vite.config.mjs
+++ b/vite.config.mjs
@@ -1,6 +1,8 @@
 // Plugins
 import Components from "unplugin-vue-components/vite";
 import Vue from "@vitejs/plugin-vue";
+import Vuetify, { transformAssetUrls } from "vite-plugin-vuetify";
+import Fonts from "unplugin-fonts/vite";

 // Utilities
 import { defineConfig } from "vite";
@@ -9,9 +11,27 @@ import { fileURLToPath, URL } from "node:url";
 // https://vitejs.dev/config/
 export default defineConfig({
  plugins: [
-    Vue(),
+    Vue({
+      template: { transformAssetUrls },
+    }),
+    // https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
+    Vuetify(),
    Components(),
+    Fonts({
+      fontsource: {
+        families: [
+          {
+            name: "Roboto",
+            weights: [100, 300, 400, 500, 700, 900],
+            styles: ["normal", "italic"],
+          },
+        ],
+      },
+    }),
  ],
+  optimizeDeps: {
+    exclude: ["vuetify"],
+  },
  define: { "process.env": {} },
  resolve: {
    alias: {
@@ -35,36 +55,4 @@ export default defineConfig({
      },
    },
  },
-  build: {
-    target: "esnext",
-    minify: "terser",
-    terserOptions: {
-      compress: {
-        drop_console: true,
-      },
-    },
-    rollupOptions: {
-      output: {
-        manualChunks: {
-          "vendor": ["axios", "dayjs", "vue-router", "vue-loading-overlay"],
-        },
-        chunkFileNames: "js/[name].[hash].js",
-        entryFileNames: "js/[name].[hash].js",
-        assetFileNames: (assetInfo) => {
-          const info = assetInfo.name.split(".");
-          const ext = info[info.length - 1];
-          if (/png|jpe?g|gif|tiff|bmp|ico/i.test(ext)) {
-            return `images/[name].[hash][extname]`;
-          } else if (/woff|woff2|eot|ttf|otf/i.test(ext)) {
-            return `fonts/[name].[hash][extname]`;
-          } else if (ext === "css") {
-            return `css/[name].[hash][extname]`;
-          }
-          return `[name].[hash][extname]`;
-        },
-      },
-    },
-    chunkSizeWarningLimit: 1000,
-    reportCompressedSize: true,
-  },
-});
+});