Remove link icon

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.browserslistrc

@@ -0,0 +1,4 @@
+> 1%
+last 2 versions
+not dead
+not ie 11

.envrc

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

.github/workflows/dependency-review.yml

@@ -15,6 +15,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 'Checkout Repository'
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
       - name: 'Dependency Review'
         uses: actions/dependency-review-action@v4

.github/workflows/publish-containers.yml

@@ -10,7 +10,7 @@ jobs:
     name: Publish rfd-fyi-backend
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
 
       - name: Prepare
         id: prep
@@ -50,7 +50,7 @@ jobs:
     name: Publish rfd-fyi-frontend
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
 
       - name: Prepare
         id: prep

.gitignore

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

Caddyfile

@@ -1,8 +1,8 @@
-rfd.davegallant.ca {
-    file_server
-    reverse_proxy /api/* backend:8080
+{
+    auto_https off
 }
 
-rfd.fyi {
-    redir https://rfd.davegallant.ca{uri} 301
+:80 {
+    file_server
+    reverse_proxy /api/* rfd-fyi-backend:8080
 }

Dockerfile

@@ -10,7 +10,7 @@ COPY . .
 
 RUN npm run build
 
-FROM caddy:2.10.0-alpine as runtime
+FROM caddy:2.10.2-alpine as runtime
 
 WORKDIR /my-site
 

Makefile

@@ -15,13 +15,12 @@ help:
 
 ## backend: Build and run the backend from source
 backend:
-	@cd backend && go run .
+	@cd backend && CGO_ENABLED=0 go run .
 .PHONY: backend
 
 ## frontend: Build and run the frontend from source
 frontend:
-	@npm install @vue/cli-service
-	@npx vue-cli-service serve
+	@npm run serve
 .PHONY: frontend
 
 ## dev: Build and run in docker compose

backend/Dockerfile

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

backend/app.go

@@ -63,6 +63,7 @@ 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) {
@@ -87,12 +88,97 @@ 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")
@@ -146,6 +232,22 @@ 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.18
+go 1.26
 
 require (
 	github.com/dlclark/regexp2 v1.11.5

backend/model.go

@@ -27,3 +27,9 @@ 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

@@ -0,0 +1,61 @@
+{
+  "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

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

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en" 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" />
+    
+    <!-- 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="preload"
+      as="font"
+      type="font/woff2"
+      href="https://fonts.gstatic.com/s/materialsymbolsoutlined/v211/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhQcyWwg.woff2"
+      crossorigin
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block"
+    />
+    
+    <title>rfd-fyi - An overlay of hot deals</title>
+    
+    <!-- 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>
+  </head>
+  <body>
+    <noscript>
+      <strong
+        >We're sorry but rfd.fyi doesn't work properly without JavaScript
+        enabled. Please enable it to continue.</strong
+      >
+    </noscript>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package.json

@@ -3,36 +3,39 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "serve": "vite",
+    "preview": "vite preview",
+    "build": "vite build",
+    "lint": "eslint . --fix"
   },
   "dependencies": {
+    "@fontsource/roboto": "5.2.9",
     "@github/hotkey": "^3.0.0",
+    "@mdi/font": "7.4.47",
     "@popperjs/core": "^2.11.8",
-    "axios": "^1.11.0",
-    "bootstrap": "^5.3.1",
-    "bootstrap-vue": "^2.22.0",
+    "axios": "^1.12.0",
     "core-js": "^3.32.1",
     "cssnano": "^7.0.0",
-    "jquery": "^3.7.0",
-    "moment": "^2.29.4",
-    "vue": "^3.3.4",
-    "vue-github-button": "^3.0.3",
+    "dayjs": "^1.11.10",
+    "vue": "^3.5.17",
     "vue-loading-overlay": "^6.0.3",
-    "vue-router": "4.5.1"
+    "vue-router": "^5.0.0",
+    "vuetify": "^3.9.6"
   },
   "devDependencies": {
     "@babel/core": "^7.22.10",
     "@babel/eslint-parser": "^7.22.10",
-    "@types/bootstrap": "^5.2.6",
-    "@types/mousetrap": "^1.6.11",
+    "@vitejs/plugin-vue": "^5.2.3",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
-    "@vue/cli-service": "^5.0.8",
+    "@vue/cli-service": "^5.0.9",
     "eslint": "^8.47.0",
     "eslint-plugin-vue": "^9.17.0",
-    "postcss-cli": "^11.0.0"
+    "postcss-cli": "^11.0.0",
+    "sass-embedded": "^1.89.2",
+    "unplugin-vue-components": "^31.0.0",
+    "vite": "^6.3.6",
+    "vite-plugin-vuetify": "^2.1.1"
   },
   "eslintConfig": {
     "root": true,
@@ -47,11 +50,5 @@
       "parser": "@babel/eslint-parser"
     },
     "rules": {}
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead",
-    "not ie 11"
-  ]
+  }
 }

public/index.html

@@ -1,26 +0,0 @@
-<!DOCTYPE html>
-<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" />
-    <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"
-    />
-    <title>rfd-fyi - An overlay of hot deals</title>
-    <script defer src="https://umami.snake-cloud.ts.net/script.js" data-website-id="59ffe8be-509a-471e-8cd6-a63c5b35b7aa"></script>
-  </head>
-  <body>
-    <noscript>
-      <strong
-        >We're sorry but rfd.fyi doesn't work properly without JavaScript
-        enabled. Please enable it to continue.</strong
-      >
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>

src/App.vue

@@ -1,33 +1,125 @@
 <script>
 import axios from "axios";
-import moment from "moment";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
 import Loading from "vue-loading-overlay";
 import { install } from "@github/hotkey";
+import { ref, reactive } from "vue";
 
 import "vue-loading-overlay/dist/css/index.css";
 
+// Configure day.js with UTC support
+dayjs.extend(utc);
+
 export default {
   data() {
     return {
       ascending: this.ascending,
       filter: window.location.href.split("filter=")[1] || "",
-      isLoading: false,
       sortColumn: this.sortColumn,
       topics: [],
+      hoveredTopicId: null,
+      tooltipData: {},
+      loadingTooltip: {},
+      tooltipPosition: { x: 0, y: 0 },
+      isMobile: false,
     };
   },
   mounted() {
-    // Install all the hotkeys on the page
-    for (const el of document.querySelectorAll("[data-hotkey]")) {
-      install(el);
-    }
-    this.sortColumn = localStorage.getItem("sortColumn") || "score";
-    this.ascending =
-      localStorage.getItem("ascending") === "false" ? false : true;
-    this.isLoading = true;
+    window.addEventListener("keydown", this.handleKeyDown);
+    this.detectMobile();
     this.fetchDeals();
   },
+  beforeUnmount() {
+    window.removeEventListener("keydown", this.handleKeyDown);
+    window.removeEventListener("resize", this.detectMobile);
+  },
   methods: {
+    detectMobile() {
+      // Detect if device is mobile/tablet based on touch capability and screen size
+      const hasTouch = () => {
+        return (
+          (typeof window !== "undefined" &&
+            ("ontouchstart" in window ||
+              navigator.maxTouchPoints > 0 ||
+              navigator.msMaxTouchPoints > 0)) ||
+          false
+        );
+      };
+      
+      const isMobileScreen = () => {
+        return window.innerWidth <= 1024;
+      };
+      
+      this.isMobile = hasTouch() || isMobileScreen();
+      window.addEventListener("resize", this.detectMobile);
+    },
+    handleKeyDown(event) {
+      const isInput = ["INPUT", "TEXTAREA"].includes(
+        document.activeElement.tagName
+      );
+      if (event.key === "/" && !isInput) {
+        event.preventDefault(); // prevent typing `/` into whatever is focused
+        this.$refs.filter.focus();
+      }
+    },
+    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(
@@ -37,62 +129,21 @@ export default {
       );
     },
     fetchDeals() {
-      this.isLoading = true;
       axios
         .get("api/v1/topics")
         .then((response) => {
           this.topics = response.data;
-          this.isLoading = false;
-          this.sortTable(this.sortColumn, false);
         })
         .catch((err) => {
           console.log(err.response);
         });
     },
-    sortTable: function sortTable(col, flipAscending) {
-      if (this.sortColumn === col && flipAscending) {
-        this.ascending = !this.ascending;
-      }
-
-      var ascending = this.ascending;
-
-      localStorage.setItem("ascending", this.ascending);
-      localStorage.setItem("sortColumn", col);
-      this.sortColumn = col;
-
-      this.topics.sort(function (a, b) {
-        if (a[col] > b[col]) {
-          return ascending ? -1 : 1;
-        } else if (a[col] < b[col]) {
-          return ascending ? 1 : -1;
-        }
-        return 0;
-      });
-    },
-    isMobile() {
-      if (
-        /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
-          navigator.userAgent
-        )
-      ) {
-        return true;
-      } else {
-        return false;
-      }
-    },
   },
   computed: {
     formatDate() {
       return (v) => {
-        return moment(String(v)).format("hh:mm A z (MM/DD)");
-      };
-    },
-    columns() {
-      return {
-        Deal: "deal",
-        Score: "score",
-        Views: "total_views",
-        "Last Reply": "last_post_time",
+        const date = dayjs(String(v));
+        return date.format("hh:mm A (MM/DD)");
       };
     },
     filteredTopics() {
@@ -117,107 +168,132 @@ export default {
         return v.replace(re, (matchedText) => `<mark>${matchedText}</mark>`);
       };
     },
-    showBeforeTargetDate() {
-      const now = new Date();
-      const target = new Date('2025-08-20T00:00:00');
-      return now < target;
-    }
-  },
-  components: {
-    Loading,
+    visibleHeaders() {
+      const baseHeaders = [
+        { title: "Deal", value: "title", align: "center" },
+        { title: "Score", value: "score", align: "center", sortable: true },
+      ];
+      
+      // Only show Last Post column on desktop
+      if (!this.isMobile) {
+        baseHeaders.push({
+          title: "Last Post",
+          value: "last_post_time",
+          align: "center",
+          sortable: true,
+        });
+      }
+      
+      return baseHeaders;
+    },
   },
 };
 </script>
 
-<template>
-  <link rel="shortcut icon" type="image/png" href="/favicon.png" />
-  <body>
-    <input
-      class="form-control"
-      type="text"
-      id="filter"
-      placeholder="Filter"
+<script setup>
+const sortBy = ref([{ key: "score", order: "desc" }]);
+</script>
 
-      data-hotkey="/"
-      v-model="filter"
-      v-on:keyup.enter="createFilterRoute(this.filter.toString())"
-      v-on:keyup.escape="this.$refs.filter.blur()"
-      ref="filter"
-    />
-    <table class="table table-hover">
-      <thead class="thead text-muted">
-        <tr>
-          <th
-            v-for="(col, key) in columns"
-            v-on:click="sortTable(col, true)"
-            :key="col"
-          >
-            {{ key }}
-            <div
-              class="arrow"
-              v-if="col == sortColumn"
-              v-bind:class="ascending ? 'arrow_up' : 'arrow_down'"
-            ></div>
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <loading
-          v-model:active="isLoading"
-          color="#ccc"
-          opacity="0"
-          loader="bars"
-          :is-full-page="false"
+<template>
+  <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="visibleHeaders"
+          :items="filteredTopics"
+          :sort-by="sortColumn"
+          v-model:sortBy="sortBy"
+          :items-per-page="50"
         >
-        </loading>
-        <tr
-          scope="row"
-          v-for="(topic, index) in filteredTopics"
-          :key="`topic.topic_id-${index}`"
-        >
-          <td scope="col">
+          <template #item.title="{ item }">
             <a
-              :href="`https://forums.redflagdeals.com${topic.web_path}`"
+              :href="`https://forums.redflagdeals.com${item.web_path}`"
               target="_blank"
+              @mouseenter="handleTitleHover(item, $event)"
+              @mouseleave="handleTitleLeave"
+              @mousemove="handleMouseMove"
               v-html="
                 highlightMatches(
-                  topic.title + ' [' + topic.Offer.dealer_name + '] '
+                  item.title
                 )
               "
             ></a>
-            <a
-              :href="`${topic.Offer.url}`"
-              target="_blank"
-              v-if="topic.Offer.url"
-              ><span class="material-symbols-outlined"> link </span></a
+          </template>
+
+          <template #item.score="{ item }">
+            <span v-if="item.score > 0" class="green-score"
+              >+{{ item.score }}</span
             >
-            <span v-if="!topic.Offer.url" class="material-symbols-outlined">
-              link_off
-            </span>
-          </td>
-          <td v-if="topic.score > 0" scope="col" class="green-score">
-            +{{ topic.score }}
-          </td>
-          <td v-if="topic.score < 0" scope="col" class="red-score">
-            {{ topic.score }}
-          </td>
-          <td v-if="topic.score == 0" scope="col">
-            {{ topic.score }}
-          </td>
-          <td scope="col">{{ topic.total_views }}</td>
-          <td scope="col">{{ formatDate(topic.last_post_time) }}</td>
-        </tr>
-      </tbody>
-    </table>
-    <div v-if="showBeforeTargetDate">
-      <footer class="fixed-bottom">
-        PSA: <a href="https://rfd.fyi">rfd.fyi</a> will not be renewed after 2025-08-20. Please use <a href="https://rfd.davegallant.ca">rfd.davegallant.ca</a>.
-      </footer>
-    </div>
-  </body>
+            <span v-else-if="item.score < 0" class="red-score">{{
+              item.score
+            }}</span>
+            <span v-else>{{ item.score }}</span>
+          </template>
+
+          <template #item.last_post_time="{ item }">
+            {{ formatDate(item.last_post_time) }}
+          </template>
+
+          <template #loading>
+            <v-progress-linear indeterminate color="grey" />
+          </template>
+        </v-data-table>
+
+        <!-- Tooltip for deal details -->
+        <div
+          v-if="hoveredTopicId !== null && tooltipData[hoveredTopicId]"
+          class="deal-tooltip"
+          :style="{
+            position: 'fixed',
+            left: tooltipPosition.x + 10 + 'px',
+            top: tooltipPosition.y + 10 + 'px',
+            zIndex: 9999,
+          }"
+        >
+          <div class="tooltip-content">
+            <div class="tooltip-header">{{ tooltipData[hoveredTopicId].topic.title }}</div>
+              <div class="tooltip-dealer">
+                {{ tooltipData[hoveredTopicId].topic.Offer.dealer_name }}
+              </div>
+              <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 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>
+<style scoped>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -231,4 +307,85 @@ export default {
   color: black;
 }
 
+.deal-tooltip {
+  pointer-events: none;
+  max-width: 400px;
+}
+
+.tooltip-content {
+  background: #24283b;
+  border: 2px solid #a9b1d6;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+  font-size: 13px;
+  color: #e0e0e0;
+  text-align: left;
+}
+
+.tooltip-header {
+  font-weight: bold;
+  font-size: 14px;
+  color: #d0d0d0;
+  margin-bottom: 8px;
+  white-space: normal;
+  word-wrap: break-word;
+}
+
+.tooltip-dealer {
+  font-size: 12px;
+  color: #c0c0c0;
+  margin-bottom: 8px;
+}
+
+.tooltip-stats {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 8px;
+  font-size: 12px;
+}
+
+.stat-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.stat-item .material-symbols-outlined {
+  font-size: 16px;
+}
+
+.tooltip-description {
+  margin-bottom: 8px;
+  padding: 8px;
+  background: rgba(160, 160, 160, 0.1);
+  border-left: 2px solid #a9b1d6;
+  border-radius: 2px;
+  font-size: 12px;
+  white-space: normal;
+  word-wrap: break-word;
+  max-height: 60px;
+  overflow-y: auto;
+}
+
+.tooltip-first-post {
+  margin-bottom: 8px;
+  padding: 8px;
+  background: rgba(160, 160, 160, 0.1);
+  border-left: 2px solid #a9b1d6;
+  border-radius: 2px;
+  font-size: 12px;
+  white-space: normal;
+  word-wrap: break-word;
+  max-height: 60px;
+  overflow-y: auto;
+}
+
+.tooltip-times {
+  font-size: 11px;
+  color: #b0b0b0;
+  border-top: 1px solid #555555;
+  padding-top: 8px;
+  margin-top: 8px;
+}
 </style>

src/main.js

@@ -2,11 +2,10 @@ import { createApp } from "vue";
 import App from "./App.vue";
 import { createRouter, createWebHashHistory } from "vue-router";
 
-import "bootstrap/dist/css/bootstrap.min.css";
-import "bootstrap/dist/js/bootstrap.min.js";
-
 import "./theme.css";
 
+import { registerPlugins } from "@/plugins";
+
 const routes = [];
 
 const router = createRouter({
@@ -16,5 +15,7 @@ const router = createRouter({
 
 const app = createApp(App);
 
+registerPlugins(app);
+
 app.use(router);
 app.mount("#app");

src/plugins/README.md

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

src/plugins/index.js

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

src/plugins/vuetify.js

@@ -0,0 +1,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 },
+  },
+});

src/theme.css

@@ -1,10 +1,28 @@
-body {
-  max-width: 100%;
+/* Material Symbols font optimization - prevent flash of unstyled text */
+@font-face {
+  font-family: 'Material Symbols Outlined';
+  src: url('https://fonts.gstatic.com/s/materialsymbolsoutlined/v211/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhQcyWwg.woff2') format('woff2');
+  font-weight: 100 700;
+  font-style: normal;
+  font-display: block;
 }
 
-.thead {
-  position: sticky;
-  top: 0;
+.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%;
 }
 
 html {
@@ -14,16 +32,6 @@ html {
   -ms-text-size-adjust: 100%;
 }
 
-a {
-  color: #96ada5; /**/
-}
-a:visited {
-  color: #53514f; /**/
-}
-a:hover {
-  color: #d65d03; /**/
-}
-
 footer {
   background: #212529;
   color: white;
@@ -41,28 +49,29 @@ footer {
 }
 
 .green-score {
-  color: rgb(22, 120, 63) !important;
+  color: rgb(158, 206, 106) !important;
 }
 
 .red-score {
-  color: rgb(175, 21, 21) !important;
+  color: rgb(247, 118, 142) !important;
 }
 
-.arrow_down {
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAaCAYAAABPY4eKAAAAAXNSR0IArs4c6QAAAvlJREFUSA29Vk1PGlEUHQaiiewslpUJiyYs2yb9AyRuJGm7c0VJoFXSX9A0sSZN04ULF12YEBQDhMCuSZOm1FhTiLY2Rky0QPlQBLRUsICoIN/0PCsGyox26NC3eTNn3r3n3TvnvvsE1PkwGo3yUqkkEQqFgw2Mz7lWqwng7ztN06mxsTEv8U0Aam5u7r5EInkplUol/f391wAJCc7nEAgE9Uwmkzo4OPiJMa1Wq6cFs7Ozt0H6RqlUDmJXfPIx+qrX69Ti4mIyHA5r6Wq1egND+j+IyW6QAUoul18XiUTDNHaSyGazKcZtdgk8wqhUKh9o/OMvsVgsfHJy0iWqVrcQNRUMBnd6enqc9MjISAmRP3e73T9al3XnbWNjIw2+KY1Gc3imsNHR0YV4PP5+d3e32h3K316TySQFoX2WyWR2glzIO5fLTSD6IElLNwbqnFpbWyO/96lCoai0cZjN5kfYQAYi5H34fL6cxWIZbya9iJyAhULBHAqFVlMpfsV/fHxMeb3er+Vy+VUzeduzwWC45XA4dlD/vEXvdDrj8DvURsYEWK3WF4FA4JQP9mg0WrHZbEYmnpa0NxYgPVObm5teiLABdTQT8a6vrwdRWhOcHMzMzCiXlpb2/yV6qDttMpkeshEzRk4Wo/bfoe4X9vb2amzGl+HoXNT29vZqsVi0sK1jJScG+Xx+HGkL4Tew2TPi5zUdQQt9otPpuBk3e0TaHmMDh1zS7/f780S0zX6Yni+NnBj09fUZUfvudDrNZN+GkQbl8Xi8RLRtHzsB9Hr9nfn5+SjSeWUCXC7XPq5kw53wsNogjZNohYXL2EljstvtrAL70/mVaW8Y4OidRO1/gwgbUMvcqGmcDc9aPvD1gnTeQ+0nmaInokRj0nHh+uvIiVOtVvt2a2vLv7Ky0tL3cRTXIcpPAwMDpq6R4/JXE4vFQ5FI5CN+QTaRSFCYc8vLy1l0rge4ARe5kJ/d27kYkLXoy2Jo4C7K8CZOsEBvb+9rlUp1xNXPL7v3IDwxvPD6AAAAAElFTkSuQmCC");
-}
-.arrow_up {
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAaCAYAAACgoey0AAAAAXNSR0IArs4c6QAAAwpJREFUSA21Vt1PUmEYP4dvkQ8JFMwtBRocWAkDbiqXrUWXzU1rrTt0bdVqXbb1tbW16C9IBUSmm27cODdneoXjputa6069qwuW6IIBIdLvdaF4OAcOiGeDc87zPs/vd57P96WpFq7p6enbGo1mjKZpeTabjU1MTCRagGnOZHFxcXxtbe1XKpUq7+zslJeXl//Mz8+Hy+Uy3RxSE9qTk5M3otFooVQqgef4Wl9f343FYoEmoISrxuNxFX5f9vb2jhn/PxUKhfLS0tIPfFifUESRUMV8Pv/M6XReRm5rTGQyGeXxeGxYe1ezeBpBOBx2rKysbO7v79d4Wy3Y2Nj4GQqFbgnhaugxwiuGJx99Pp9FLBbXxYTXvTqd7v3MzIy6riIWGxJnMpl7AwMD14xGYyMsSq1WUyQdUqn0eSPlusQIsbGrq+vl4OCgvhFQZd1utyv1en0gEolcqsi47nWJlUrlG5fLZVcoFFy2nDKSDpIWlUoVTCQSEk4lCHmJMZ2GTCbTiMVikfIZ88l7enoos9l8dXt7+z6fDicxSJUokqDX6xXcl2wCROoc0vQCWL3sNfLOSdzR0fHY4XC4tVotl40gmVwup9xuN4OQv+UyqCFGH9rg7SOGYVRcBs3IEG4J0nVnamrqOtvuBDGGgQg9+wHFcVEi4a0LNkbdd6TrPKo8ODc311mteIIYjT/a398/jK+s1jnVM0kXoufCFvq0GuiIGEVgQIhfoygM1QrteEa9dAL7ITiYCt4RMabOK5AyKKzKWtvupLcRciu8D5J0EuDDPyT/Snd39yh6VtY2NhYQSR9G79Ds7OxdskRjEyAufvb7/cPoO5Z6e1+xtVKrq6vfcFzyi/A3ZrPZ3GdNSlwgo5ekE4X2RIQGf2C1WlufFE0GBeGWYQ8YERWLxQtnUVB830MKLZfL9RHir8lkssCn2G751tZWEWe03zTKm15YWPiEiXXTYDB0Ig/t7yd8PRws4EicwWHxO4jHD8/C5HiTTqd1BwcHFozKU89origB+y/kmzgYpgOBQP4fGmUiZmJ+WNgAAAAASUVORK5CYII=");
-}
-.arrow {
-  float: right;
-  width: 10px;
-  height: 12px;
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position-y: bottom;
+a {
+  color: var(--v-theme-primary);
 }
 
-.material-symbols-outlined {
- font-size: medium;
+a:hover {
+  color: #d65d03;
+}
+
+a:visited {
+  color: #53514f;
+}
+
+@media (min-width: 769px) {
+  .v-data-table-header th,
+  .v-data-table__td,
+  .v-data-footer {
+    font-size: 1.2rem;
+  }
 }

vite.config.mjs

@@ -0,0 +1,79 @@
+// Plugins
+import Components from "unplugin-vue-components/vite";
+import Vue from "@vitejs/plugin-vue";
+import Vuetify, { transformAssetUrls } from "vite-plugin-vuetify";
+
+// Utilities
+import { defineConfig } from "vite";
+import { fileURLToPath, URL } from "node:url";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    Vue({
+      template: { transformAssetUrls },
+    }),
+    Vuetify(),
+    Components(),
+  ],
+  optimizeDeps: {
+    exclude: ["vuetify"],
+    include: ["axios", "vue-router", "vue-loading-overlay"],
+  },
+  define: { "process.env": {} },
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("src", import.meta.url)),
+    },
+    extensions: [".js", ".json", ".jsx", ".mjs", ".ts", ".tsx", ".vue"],
+  },
+  server: {
+    port: 3000,
+    proxy: {
+      "/api": "http://localhost:8080",
+    },
+  },
+  css: {
+    preprocessorOptions: {
+      sass: {
+        api: "modern-compiler",
+      },
+      scss: {
+        api: "modern-compiler",
+      },
+    },
+  },
+  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,
+  },
+});

vue.config.js

@@ -1,7 +0,0 @@
-const { defineConfig } = require("@vue/cli-service");
-module.exports = defineConfig({
-  transpileDependencies: true,
-  devServer: {
-    proxy: "http://localhost:8080",
-  },
-});