Update Caddyfile

.envrc

@@ -1 +0,0 @@
-use flake

.gitignore

@@ -5,5 +5,3 @@ backend/bin/
 .vscode
 *.pem
 .env
-.direnv
-.envrc.local

Caddyfile

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

Makefile

@@ -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

backend/Dockerfile

@@ -1,5 +1,5 @@
-# syntax=docker/dockerfile:1.21
+# syntax=docker/dockerfile:1.20
-FROM cgr.dev/chainguard/go:latest AS build
+FROM cgr.dev/chainguard/go:latest as build
 
 WORKDIR /src
 

backend/app.go

@@ -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) {
@@ -88,97 +87,12 @@ func (a *App) listTopics(w http.ResponseWriter, r *http.Request) {
 	respondWithJSON(w, http.StatusOK, a.CurrentTopics)
 }
 
-// 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 := ioutil.ReadAll(res.Body)
-	if err != nil {
-		log.Warn().Msgf("could not read response body: %s\n", err)
-		respondWithJSON(w, http.StatusInternalServerError, map[string]string{"error": "Failed to read response"})
-		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 ""
-}
-
 func (a *App) refreshTopics() {
 	for {
 		log.Info().Msg("Refreshing topics")
 		latestTopics := a.getDeals(9, 1, 6)
 
 		if len(latestTopics) > 0 {
-			latestTopics = a.deduplicateTopics(latestTopics)
 			latestTopics = a.updateScores(latestTopics)
 
 			log.Info().Msg("Refreshing redirects")
@@ -232,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]")
 }

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

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

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
-}

flake.nix

@@ -1,51 +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; [
-            # Node.js LTS with npm
-            nodejs_20
-
-            # Go for backend
-            go
-
-            # Build tools
-            pkg-config
-
-            # Development utilities
-            git
-            curl
-            jq
-
-            # Optional: for better development experience
-            gnumake
-          ];
-
-          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'"
-          '';
-        };
-      }
-    );
-}

index.html

@@ -1,51 +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" />
     <meta name="description" content="An overlay of rfd deals" />
-    
+    <link rel="icon" href="<%= BASE_URL %>favicon.png" />
-    <!-- DNS prefetch for faster Google Fonts resolution -->
-    <link rel="dns-prefetch" href="https://fonts.googleapis.com" />
-    <link rel="dns-prefetch" href="https://fonts.gstatic.com" />
-    
-    <!-- Preconnect for faster font loading -->
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    
-    <link rel="icon" href="/favicon.png" />
-    
-    <!-- Load Material Symbols font with optimal display settings -->
-
     <link
       rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block"
+      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 - An overlay of hot deals</title>
-    
-    <!-- Analytics - loaded async/defer so it doesn't block page -->
     <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 or system preference
-        const savedTheme = localStorage.getItem('theme');
-        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-        const theme = savedTheme || (prefersDark ? 'dark' : 'light');
-        
-        // Apply theme to html element
-        document.documentElement.setAttribute('data-bs-theme', theme);
-        document.documentElement.setAttribute('data-theme', theme);
-      })();
-    </script>
   </head>
   <body>
     <noscript>
@@ -56,5 +26,6 @@
     </noscript>
     <div id="app"></div>
     <script type="module" src="/src/main.js"></script>
+    <!-- built files will be auto injected -->
   </body>
 </html>

package.json

@@ -16,10 +16,12 @@
     "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": {
@@ -33,8 +35,9 @@
     "eslint-plugin-vue": "^9.17.0",
     "postcss-cli": "^11.0.0",
     "sass-embedded": "^1.89.2",
-    "unplugin-vue-components": "^31.0.0",
+    "unplugin-fonts": "^1.3.1",
-    "vite": "^7.0.0",
+    "unplugin-vue-components": "^30.0.0",
+    "vite": "^6.3.6",
     "vite-plugin-vuetify": "^2.1.1"
   },
   "eslintConfig": {

src/App.vue

@@ -1,13 +1,11 @@
 <script>
 import axios from "axios";
-import dayjs from "dayjs";
+import moment from "moment";
-import utc from "dayjs/plugin/utc";
+import Loading from "vue-loading-overlay";
-import { ref } from "vue";
+import { install } from "@github/hotkey";
 
 import "vue-loading-overlay/dist/css/index.css";
-
+import { ref } from "vue";
-// Configure day.js with UTC support
-dayjs.extend(utc);
 
 export default {
   data() {
@@ -16,102 +14,16 @@ export default {
       filter: window.location.href.split("filter=")[1] || "",
       sortColumn: this.sortColumn,
       topics: [],
-      hoveredTopicId: null,
-      tooltipData: {},
-      loadingTooltip: {},
-      tooltipPosition: { x: 0, y: 0 },
-      isMobile: false,
-      currentTheme: 'dark',
-      mediaQueryListener: null,
-      vuetifyTheme: null,
-      darkModeQuery: null,
-      themeChangeHandler: null,
     };
   },
   mounted() {
     window.addEventListener("keydown", this.handleKeyDown);
-    this.detectMobile();
     this.fetchDeals();
-    // Initialize theme on next tick to ensure Vuetify is ready
-    this.$nextTick(() => {
-      this.initializeTheme();
-      this.setupThemeListener();
-    });
   },
   beforeUnmount() {
     window.removeEventListener("keydown", this.handleKeyDown);
-    window.removeEventListener("resize", this.detectMobile);
-    if (this.darkModeQuery && this.themeChangeHandler) {
-      this.darkModeQuery.removeEventListener('change', this.themeChangeHandler);
-    }
   },
   methods: {
-    initializeTheme() {
-      // If no saved preference, apply system preference now
-      const savedTheme = localStorage.getItem('vuetify-theme');
-      if (!savedTheme) {
-        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-        const theme = prefersDark ? 'dark' : 'light';
-        this.applyTheme(theme);
-      } else {
-        // Get current theme name from Vuetify
-        this.currentTheme = this.$vuetify.theme.global.name;
-      }
-    },
-    setupThemeListener() {
-      // Listen for system theme preference changes
-      const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');
-
-      this.mediaQueryListener = darkModeQuery;
-
-      // Use arrow function to preserve 'this' context
-      const themeChangeHandler = (e) => {
-        // Only auto-update theme if user hasn't set a preference manually
-        const savedTheme = localStorage.getItem('vuetify-theme');
-        if (!savedTheme) {
-          const newTheme = e.matches ? 'dark' : 'light';
-          console.log('System theme changed to:', newTheme);
-          this.applyTheme(newTheme);
-        }
-      };
-
-      darkModeQuery.addEventListener('change', themeChangeHandler);
-      // Store the handler so we can remove it later if needed
-      this.themeChangeHandler = themeChangeHandler;
-      this.darkModeQuery = darkModeQuery;
-    },
-    applyTheme(theme) {
-      // Apply theme using Vuetify's theme API
-      this.$vuetify.theme.global.name = theme;
-      this.currentTheme = theme;
-      localStorage.setItem('vuetify-theme', theme);
-
-      // Also update data-bs-theme for any custom CSS that uses it
-      document.documentElement.setAttribute('data-bs-theme', theme === 'dark' ? 'dark' : 'light');
-    },
-    toggleTheme() {
-      const newTheme = this.currentTheme === 'dark' ? 'light' : 'dark';
-      this.applyTheme(newTheme);
-    },
-    detectMobile() {
-      // Detect if device is mobile/tablet based on touch capability and screen size
-      const hasTouch = () => {
-        return (
-          (typeof window !== "undefined" &&
-            ("ontouchstart" in window ||
-              navigator.maxTouchPoints > 0 ||
-              navigator.msMaxTouchPoints > 0)) ||
-          false
-        );
-      };
-
-      const isMobileScreen = () => {
-        return window.innerWidth <= 1024;
-      };
-
-      this.isMobile = hasTouch() || isMobileScreen();
-      window.addEventListener("resize", this.detectMobile);
-    },
     handleKeyDown(event) {
       const isInput = ["INPUT", "TEXTAREA"].includes(
         document.activeElement.tagName
@@ -121,63 +33,6 @@ export default {
         this.$refs.filter.focus();
       }
     },
-    handleTitleHover(topic, event) {
-      // Don't load tooltips on mobile devices
-      if (this.isMobile) {
-        return;
-      }
-      this.hoveredTopicId = topic.topic_id;
-      this.tooltipPosition = {
-        x: event.clientX,
-        y: event.clientY,
-      };
-      this.loadTopicDetails(topic.topic_id);
-    },
-    handleTitleLeave() {
-      if (this.isMobile) {
-        return;
-      }
-      this.hoveredTopicId = null;
-    },
-    handleMouseMove(event) {
-      if (this.isMobile) {
-        return;
-      }
-      if (this.hoveredTopicId !== null) {
-        this.tooltipPosition = {
-          x: event.clientX,
-          y: event.clientY,
-        };
-      }
-    },
-    loadTopicDetails(topicId) {
-      if (!topicId) {
-        console.warn("Topic ID is undefined");
-        return;
-      }
-
-      if (this.tooltipData[topicId]) {
-        return; // Already loaded
-      }
-
-      if (this.loadingTooltip[topicId]) {
-        return; // Already loading
-      }
-
-      this.loadingTooltip[topicId] = true;
-
-      axios
-        .get(`api/v1/topics/${topicId}`)
-        .then((response) => {
-          this.tooltipData[topicId] = response.data;
-        })
-        .catch((err) => {
-          console.log("Error loading topic details:", err);
-        })
-        .finally(() => {
-          this.loadingTooltip[topicId] = false;
-        });
-    },
     createFilterRoute(params) {
       this.$refs.filter.blur();
       history.pushState(
@@ -200,8 +55,7 @@ export default {
   computed: {
     formatDate() {
       return (v) => {
-        const date = dayjs(String(v));
+        return moment(String(v)).format("hh:mm A z (MM/DD)");
-        return date.format("YYYY-MM-DD hh:mm A");
       };
     },
     filteredTopics() {
@@ -226,54 +80,23 @@ export default {
         return v.replace(re, (matchedText) => `<mark>${matchedText}</mark>`);
       };
     },
-    visibleHeaders() {
-      const baseHeaders = [
-        { title: "Deal", value: "title", align: "center" },
-        { title: "Score", value: "score", align: "center" },
-      ];
-
-      // Only show Last Post column on desktop
-      if (!this.isMobile) {
-        baseHeaders.push({
-          title: "Last Post",
-          value: "last_post_time",
-          align: "center",
-        });
-      }
-
-      return baseHeaders;
-    },
-    tooltipStyle() {
-      if (this.hoveredTopicId === null || !this.tooltipData[this.hoveredTopicId]) {
-        return {};
-      }
-
-      let top = this.tooltipPosition.y + 10;
-      let left = this.tooltipPosition.x + 10;
-      const tooltipWidth = 420;
-
-      // Check if tooltip would go off right side of screen
-      if (left + tooltipWidth > window.innerWidth) {
-        // Position to the left of cursor instead
-        left = Math.max(10, this.tooltipPosition.x - tooltipWidth - 10);
-      }
-
-      // Keep tooltip within vertical bounds, allowing scrolling of content
-      top = Math.max(10, Math.min(top, window.innerHeight - 100));
-
-      return {
-        position: 'fixed',
-        left: Math.max(10, left) + 'px',
-        top: top + 'px',
-        zIndex: 9999,
-      };
-    },
   },
 };
 </script>
 
 <script setup>
-const sortBy = ref([{ key: "score", order: "desc" }]);
+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>
@@ -290,24 +113,26 @@ const sortBy = ref([{ key: "score", order: "desc" }]);
           hide-details="true"
         />
         <v-data-table
-          :headers="visibleHeaders"
+          :headers="headers"
           :items="filteredTopics"
-          :sort-by="sortBy"
+          :sort-by="sortColumn"
-          :items-per-page="50"
+          v-model:sortBy="sortBy"
+          :items-per-page="25"
         >
           <template #item.title="{ item }">
             <a
               :href="`https://forums.redflagdeals.com${item.web_path}`"
               target="_blank"
-              @mouseenter="handleTitleHover(item, $event)"
-              @mouseleave="handleTitleLeave"
-              @mousemove="handleMouseMove"
               v-html="
                 highlightMatches(
-                  item.title
+                  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 }">
@@ -328,47 +153,12 @@ const sortBy = ref([{ key: "score", order: "desc" }]);
             <v-progress-linear indeterminate color="grey" />
           </template>
         </v-data-table>
-
-        <!-- Tooltip for deal details -->
-        <div
-          v-if="hoveredTopicId !== null && tooltipData[hoveredTopicId]"
-          class="deal-tooltip"
-          :style="tooltipStyle"
-        >
-          <div class="tooltip-content">
-              <div class="tooltip-stats">
-                <span class="stat-item">
-                  <span class="material-symbols-outlined">visibility</span>
-                  {{ tooltipData[hoveredTopicId].topic.total_views }} views
-                </span>
-                <span class="stat-item">
-                  <span class="material-symbols-outlined">chat</span>
-                  {{ tooltipData[hoveredTopicId].topic.total_replies }} replies
-                </span>
-              </div>
-            <div v-if="tooltipData[hoveredTopicId].description" class="tooltip-description">
-              <strong>Description:</strong>
-              {{ tooltipData[hoveredTopicId].description }}
-            </div>
-            <div class="tooltip-dealer">
-              {{ tooltipData[hoveredTopicId].topic.Offer.dealer_name }}
-            </div>
-            <div v-if="tooltipData[hoveredTopicId].first_post" class="tooltip-first-post">
-              <strong>First Post:</strong>
-              {{ tooltipData[hoveredTopicId].first_post }}
-            </div>
-            <div class="tooltip-times">
-              <div>Posted: {{ formatDate(tooltipData[hoveredTopicId].topic.post_time) }}</div>
-              <div>Last Post: {{ formatDate(tooltipData[hoveredTopicId].topic.last_post_time) }}</div>
-            </div>
-          </div>
-        </div>
       </body>
     </v-main>
   </v-app>
 </template>
 
-<style scoped>
+<style>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -381,111 +171,4 @@ const sortBy = ref([{ key: "score", order: "desc" }]);
   background: #ffc;
   color: black;
 }
-
-.deal-tooltip {
-  pointer-events: none;
-  max-width: 400px;
-}
-
-.tooltip-content {
-  background: var(--tooltip-bg);
-  border: 2px solid var(--tooltip-border);
-  border-radius: 8px;
-  padding: 16px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  font-size: 13px;
-  color: var(--text-primary);
-  text-align: left;
-  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
-}
-
-.tooltip-header {
-  font-weight: bold;
-  font-size: 14px;
-  color: var(--text-primary);
-  margin-bottom: 8px;
-  white-space: normal;
-  word-wrap: break-word;
-}
-
-.tooltip-dealer {
-  font-size: 12px;
-  color: var(--text-secondary);
-  margin-bottom: 8px;
-}
-
-.tooltip-stats {
-  display: flex;
-  gap: 12px;
-  margin-bottom: 8px;
-  font-size: 12px;
-  color: var(--text-secondary);
-}
-
-.stat-item {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.stat-item .material-symbols-outlined {
-  font-size: 16px;
-}
-
-.tooltip-description {
-  margin-bottom: 8px;
-  padding: 8px;
-  background: var(--bg-secondary);
-  border-left: 2px solid var(--tooltip-border);
-  border-radius: 2px;
-  font-size: 12px;
-  white-space: normal;
-  word-wrap: break-word;
-  max-height: 60px;
-  overflow-y: auto;
-  color: var(--text-primary);
-}
-
-.tooltip-first-post {
-  margin-bottom: 8px;
-  padding: 8px;
-  background: var(--bg-secondary);
-  border-left: 2px solid var(--tooltip-border);
-  border-radius: 2px;
-  font-size: 12px;
-  white-space: normal;
-  word-wrap: break-word;
-  max-height: 60px;
-  overflow-y: auto;
-  color: var(--text-primary);
-}
-
-.tooltip-times {
-  font-size: 11px;
-  color: var(--text-secondary);
-  border-top: 1px solid var(--border-color);
-  padding-top: 8px;
-  margin-top: 8px;
-}
-
-/* Filter input styling */
-:deep(.v-text-field) {
-  --v-field-border-color: #cccccc;
-}
-
-html[data-bs-theme="light"] :deep(.v-text-field) {
-  --v-field-border-color: #e8e8e8;
-}
-
-html[data-bs-theme="light"] :deep(.v-field__input) {
-  background-color: #d0d0d0 !important;
-}
-
-html[data-bs-theme="light"] :deep(.v-field--focused .v-field__input) {
-  background-color: #e8e8e8 !important;
-}
-
-html[data-bs-theme="dark"] :deep(.v-text-field) {
-  --v-field-border-color: #555555;
-}
 </style>

src/main.js

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

src/plugins/vuetify.js

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

src/theme.css

@@ -1,88 +1,5 @@
-.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;
-}
-
-/* Theme-aware CSS variables */
-:root {
-  /* Light theme (default) */
-  --bg-primary: #ffffff;
-  --bg-secondary: #f5f5f5;
-  --text-primary: #212529;
-  --text-secondary: #6c757d;
-  --border-color: #dee2e6;
-  --tooltip-bg: #f8f9fa;
-  --tooltip-border: #dee2e6;
-  --tooltip-text: #212529;
-  --link-color: #0d6efd;
-  --link-visited: #990000;
-  --footer-bg: #f8f9fa;
-  --footer-text: #212529;
-}
-
-/* Dark theme */
-@media (prefers-color-scheme: dark) {
-  :root {
-    --bg-primary: #1a1a1a;
-    --bg-secondary: #2a2a2a;
-    --text-primary: #e0e0e0;
-    --text-secondary: #a0a0a0;
-    --border-color: #3a3a3a;
-    --tooltip-bg: #2a2a2a;
-    --tooltip-border: #444444;
-    --tooltip-text: #e0e0e0;
-    --link-color: #5b9cf5;
-    --link-visited: #990000;
-    --footer-bg: #1a1a1a;
-    --footer-text: #e0e0e0;
-  }
-}
-
-/* Support for explicit data-bs-theme attribute (Bootstrap override) */
-html[data-bs-theme="dark"] {
-  --bg-primary: #1a1a1a;
-  --bg-secondary: #2a2a2a;
-  --text-primary: #e0e0e0;
-  --text-secondary: #a0a0a0;
-  --border-color: #3a3a3a;
-  --tooltip-bg: #2a2a2a;
-  --tooltip-border: #444444;
-  --tooltip-text: #e0e0e0;
-  --link-color: #e8e8e8;
-  --link-visited: #990000;
-  --footer-bg: #1a1a1a;
-  --footer-text: #e0e0e0;
-}
-
-html[data-bs-theme="light"] {
-  --bg-primary: #ffffff;
-  --bg-secondary: #f5f5f5;
-  --text-primary: #212529;
-  --text-secondary: #6c757d;
-  --border-color: #dee2e6;
-  --tooltip-bg: #f8f9fa;
-  --tooltip-border: #dee2e6;
-  --tooltip-text: #212529;
-  --link-color: #333333;
-  --link-visited: #990000;
-  --footer-bg: #f8f9fa;
-  --footer-text: #212529;
-}
-
 body {
   max-width: 100%;
-  background-color: var(--bg-primary);
-  color: var(--text-primary);
-  transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 html {
@@ -93,12 +10,11 @@ html {
 }
 
 footer {
-  background: var(--footer-bg);
+  background: #212529;
-  color: var(--footer-text);
+  color: white;
   padding: 3px;
   padding-right: 10px;
   padding-left: 10px;
-  border-top: 1px solid var(--border-color);
 }
 
 .footer-left {
@@ -110,14 +26,6 @@ footer {
 }
 
 .green-score {
-  color: rgb(34, 139, 34) !important;
-}
-
-html[data-bs-theme="light"] .green-score {
-  color: rgb(34, 139, 34) !important;
-}
-
-html[data-bs-theme="dark"] .green-score {
   color: rgb(158, 206, 106) !important;
 }
 
@@ -126,14 +34,15 @@ html[data-bs-theme="dark"] .green-score {
 }
 
 a {
-  color: var(--link-color);
+  color: var(--v-theme-primary);
-  transition: color 0.2s ease;
 }
 
-
+a:hover {
+  color: #d65d03;
+}
 
 a:visited {
-  color: var(--link-visited);
+  color: #53514f;
 }
 
 @media (min-width: 769px) {
@@ -143,90 +52,3 @@ a:visited {
     font-size: 1.2rem;
   }
 }
-
-/* Tooltip theme support */
-.deal-tooltip {
-  pointer-events: none;
-  max-width: 400px;
-}
-
-.tooltip-content {
-  background: var(--tooltip-bg);
-  border: 2px solid var(--tooltip-border);
-  border-radius: 8px;
-  padding: 16px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  font-size: 13px;
-  color: var(--tooltip-text);
-  text-align: left;
-  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
-}
-
-.tooltip-header {
-  font-weight: bold;
-  font-size: 14px;
-  color: var(--text-primary);
-  margin-bottom: 8px;
-  white-space: normal;
-  word-wrap: break-word;
-}
-
-.tooltip-dealer {
-  font-size: 12px;
-  color: var(--text-secondary);
-  margin-bottom: 8px;
-}
-
-.tooltip-stats {
-  display: flex;
-  gap: 12px;
-  margin-bottom: 8px;
-  font-size: 12px;
-  color: var(--text-secondary);
-}
-
-.stat-item {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.stat-item .material-symbols-outlined {
-  font-size: 16px;
-}
-
-.tooltip-description {
-  margin-bottom: 8px;
-  padding: 8px;
-  background: var(--bg-secondary);
-  border-left: 2px solid var(--tooltip-border);
-  border-radius: 2px;
-  font-size: 12px;
-  white-space: normal;
-  word-wrap: break-word;
-  max-height: 60px;
-  overflow-y: auto;
-  color: var(--text-primary);
-}
-
-.tooltip-first-post {
-  margin-bottom: 8px;
-  padding: 8px;
-  background: var(--bg-secondary);
-  border-left: 2px solid var(--tooltip-border);
-  border-radius: 2px;
-  font-size: 12px;
-  white-space: normal;
-  word-wrap: break-word;
-  max-height: 60px;
-  overflow-y: auto;
-  color: var(--text-primary);
-}
-
-.tooltip-times {
-  font-size: 11px;
-  color: var(--text-secondary);
-  border-top: 1px solid var(--border-color);
-  padding-top: 8px;
-  margin-top: 8px;
-}

vite.config.mjs

@@ -2,6 +2,7 @@
 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";
@@ -13,12 +14,23 @@ export default defineConfig({
     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"],
-    include: ["axios", "vue-router", "vue-loading-overlay"],
   },
   define: { "process.env": {} },
   resolve: {
@@ -43,37 +55,4 @@ export default defineConfig({
       },
     },
   },
-  build: {
-    target: "esnext",
-    minify: "terser",
-    terserOptions: {
-      compress: {
-        drop_console: true,
-      },
-    },
-    rollupOptions: {
-      output: {
-        manualChunks: {
-          "vuetify": ["vuetify"],
-          "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,
-  },
 });