Update dependency @vitejs/plugin-vue to v6

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

.envrc

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

.gitignore

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

Caddyfile

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

Makefile

@@ -15,7 +15,7 @@ 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

backend/Dockerfile

@@ -1,5 +1,5 @@
-# syntax=docker/dockerfile:1.20
-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

@@ -1,21 +1,69 @@
 <!DOCTYPE html>
-<html lang="" data-bs-theme="dark">
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
     <meta name="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"
+      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>
+    
+    <!-- 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>
@@ -26,6 +74,5 @@
     </noscript>
     <div id="app"></div>
     <script type="module" src="/src/main.js"></script>
-    <!-- built files will be auto injected -->
   </body>
 </html>

package.json

@@ -16,18 +16,15 @@
     "axios": "^1.12.0",
     "core-js": "^3.32.1",
     "cssnano": "^7.0.0",
-    "jquery": "^3.7.0",
-    "moment": "^2.29.4",
+    "dayjs": "^1.11.10",
     "vue": "^3.5.17",
-    "vue-github-button": "^3.0.3",
     "vue-loading-overlay": "^6.0.3",
-    "vue-router": "^4.5.1",
-    "vuetify": "^3.9.6"
+    "vue-router": "^5.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.22.10",
     "@babel/eslint-parser": "^7.22.10",
-    "@vitejs/plugin-vue": "^5.2.3",
+    "@vitejs/plugin-vue": "^6.0.0",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-service": "^5.0.9",
@@ -35,10 +32,8 @@
     "eslint-plugin-vue": "^9.17.0",
     "postcss-cli": "^11.0.0",
     "sass-embedded": "^1.89.2",
-    "unplugin-fonts": "^1.3.1",
-    "unplugin-vue-components": "^30.0.0",
-    "vite": "^6.3.6",
-    "vite-plugin-vuetify": "^2.1.1"
+    "unplugin-vue-components": "^31.0.0",
+    "vite": "^6.3.6"
   },
   "eslintConfig": {
     "root": true,

src/App.vue

@@ -1,29 +1,141 @@
 <script>
 import axios from "axios";
-import moment from "moment";
-import Loading from "vue-loading-overlay";
-import { install } from "@github/hotkey";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
 
 import "vue-loading-overlay/dist/css/index.css";
-import { ref } from "vue";
+import "./theme.css";
+
+// Configure day.js with UTC support
+dayjs.extend(utc);
 
 export default {
   data() {
     return {
       ascending: this.ascending,
-      filter: window.location.href.split("filter=")[1] || "",
+      filter: decodeURIComponent(window.location.href.split("filter=")[1] || ""),
       sortColumn: this.sortColumn,
+      sortMethod: 'score',
       topics: [],
+      isMobile: false,
+      currentTheme: typeof localStorage !== 'undefined' ? (localStorage.getItem('theme') || 'auto') : 'auto',
+      mediaQueryListener: null,
+      vuetifyTheme: null,
+      darkModeQuery: null,
+      themeChangeHandler: null,
     };
   },
   mounted() {
     window.addEventListener("keydown", this.handleKeyDown);
+    this.detectMobile();
     this.fetchDeals();
+    // Initialize sort method from local storage
+    this.initializeSortMethod();
+    // Initialize theme immediately to prevent flash
+    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, default to auto
+      const savedTheme = localStorage.getItem('theme');
+      if (!savedTheme) {
+        this.currentTheme = 'auto';
+        this.applyTheme('auto', true); // skipSave=true to avoid redundant write
+      } else {
+        this.currentTheme = savedTheme;
+        // Apply saved theme (skipSave=true since it's already saved)
+        this.applyTheme(savedTheme, true);
+      }
+    },
+    setupThemeListener() {
+      // 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 set to 'auto'
+        const savedTheme = localStorage.getItem('theme');
+        if (savedTheme === 'auto' || !savedTheme) {
+          const newTheme = e.matches ? 'dark' : 'light';
+          console.log('System theme changed to:', newTheme);
+          this.applyThemeActual(newTheme);
+        }
+      };
+
+      darkModeQuery.addEventListener('change', themeChangeHandler);
+      // Store the handler so we can remove it later if needed
+      this.themeChangeHandler = themeChangeHandler;
+      this.darkModeQuery = darkModeQuery;
+    },
+    applyTheme(theme, skipSave = false) {
+      this.currentTheme = theme;
+      if (!skipSave) {
+        localStorage.setItem('theme', theme);
+      }
+
+      // Determine actual theme to apply
+      let actualTheme = theme;
+      if (theme === 'auto') {
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        actualTheme = prefersDark ? 'dark' : 'light';
+      }
+
+      this.applyThemeActual(actualTheme);
+    },
+    applyThemeActual(actualTheme) {
+      // Update data-bs-theme attribute for CSS variables to work
+      document.documentElement.setAttribute('data-bs-theme', actualTheme === 'dark' ? 'dark' : 'light');
+
+      // Update HTML class for theme-based CSS selectors
+      if (actualTheme === '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');
+      }
+    },
+    toggleTheme() {
+      // Cycle through: auto -> light -> dark -> auto
+      let newTheme;
+      if (this.currentTheme === 'auto') {
+        newTheme = 'light';
+      } else if (this.currentTheme === 'light') {
+        newTheme = 'dark';
+      } else {
+        newTheme = 'auto';
+      }
+      this.applyTheme(newTheme);
+    },
+    detectMobile() {
+      // Detect if device is mobile/tablet based on touch capability and screen size
+      const hasTouch = () => {
+        return (
+          (typeof window !== "undefined" &&
+            ("ontouchstart" in window ||
+              navigator.maxTouchPoints > 0 ||
+              navigator.msMaxTouchPoints > 0)) ||
+          false
+        );
+      };
+
+      const isMobileScreen = () => {
+        return window.innerWidth <= 1024;
+      };
+
+      this.isMobile = hasTouch() || isMobileScreen();
+      window.addEventListener("resize", this.detectMobile);
+    },
     handleKeyDown(event) {
       const isInput = ["INPUT", "TEXTAREA"].includes(
         document.activeElement.tagName
@@ -33,6 +145,7 @@ export default {
         this.$refs.filter.focus();
       }
     },
+
     createFilterRoute(params) {
       this.$refs.filter.blur();
       history.pushState(
@@ -55,11 +168,13 @@ export default {
   computed: {
     formatDate() {
       return (v) => {
-        return moment(String(v)).format("hh:mm A z (MM/DD)");
+        const date = dayjs(String(v));
+        return date.format("YYYY-MM-DD hh:mm A");
       };
     },
     filteredTopics() {
-      return this.topics.filter((row) => {
+      let filtered = this.topics
+        .filter((row) => {
           const titles = (
             row.title.toString() +
             " [" +
@@ -69,6 +184,15 @@ export default {
           const filterTerm = this.filter.toLowerCase();
           return titles.includes(filterTerm);
         });
+
+      // Sort based on selected method
+      if (this.sortMethod === 'score') {
+        return filtered.sort((a, b) => b.score - a.score);
+      } else if (this.sortMethod === 'views') {
+        return filtered.sort((a, b) => b.total_views - a.total_views);
+      } else {
+        return filtered.sort((a, b) => new Date(b.last_post_time) - new Date(a.last_post_time));
+      }
     },
     highlightMatches() {
       return (v) => {
@@ -80,95 +204,151 @@ export default {
         return v.replace(re, (matchedText) => `<mark>${matchedText}</mark>`);
       };
     },
+    highlightDealerName() {
+      return (dealerName) => {
+        if (this.filter == "") return dealerName;
+        const matchExists = dealerName.toLowerCase().includes(this.filter.toLowerCase());
+        if (!matchExists) return dealerName;
+
+        const re = new RegExp(this.filter, "ig");
+        return dealerName.replace(re, (matchedText) => `<mark>${matchedText}</mark>`);
+      };
+    },
+    getThemeIcon() {
+      if (this.currentTheme === 'auto') {
+        return 'brightness_auto';
+      } else if (this.currentTheme === 'dark') {
+        return 'light_mode';
+      } else {
+        return 'dark_mode';
+      }
+    },
+    getThemeTitle() {
+      if (this.currentTheme === 'auto') {
+        return 'Theme: Auto (click for Light)';
+      } else if (this.currentTheme === 'light') {
+        return 'Theme: Light (click for Dark)';
+      } else {
+        return 'Theme: Dark (click for Auto)';
+      }
+    },
+    initializeSortMethod() {
+      const saved = localStorage.getItem('sortMethod');
+      if (saved) {
+        this.sortMethod = saved;
+      }
+    },
+    toggleSort() {
+      // Cycle through: score -> views -> recency -> score
+      if (this.sortMethod === 'score') {
+        this.sortMethod = 'views';
+      } else if (this.sortMethod === 'views') {
+        this.sortMethod = 'recency';
+      } else {
+        this.sortMethod = 'score';
+      }
+      localStorage.setItem('sortMethod', this.sortMethod);
+    },
+    getSortIcon() {
+      if (this.sortMethod === 'score') {
+        return 'trending_up';
+      } else if (this.sortMethod === 'views') {
+        return 'visibility';
+      } else {
+        return 'schedule';
+      }
+    },
+    getSortTitle() {
+      if (this.sortMethod === 'score') {
+        return 'Sort by Score (click for Views)';
+      } else if (this.sortMethod === 'views') {
+        return 'Sort by Views (click for Recency)';
+      } else {
+        return 'Sort by Recency (click for Score)';
+      }
+    },
   },
 };
 </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>
-  <v-app>
-    <v-main>
+  <div id="app">
     <link rel="shortcut icon" type="image/png" href="/favicon.png" />
-      <body>
-        <v-text-field
+    <div class="container">
+      <div class="header">
+        <div class="header-controls">
+          <input
             v-model="filter"
-          label="Filter"
+            type="text"
+            placeholder="Filter deals"
             ref="filter"
             @keyup.enter="createFilterRoute(filter.toString())"
             @keyup.esc="$refs.filter.blur()"
-          hide-details="true"
+            class="search-input"
           />
-        <v-data-table
-          :headers="headers"
-          :items="filteredTopics"
-          :sort-by="sortColumn"
-          v-model:sortBy="sortBy"
-          :items-per-page="25"
+          <button @click="toggleSort" class="sort-toggle" :title="getSortTitle">
+            <span class="material-symbols-outlined">{{ getSortIcon }}</span>
+          </button>
+          <button @click="toggleTheme" class="theme-toggle" :title="getThemeTitle">
+            <span class="material-symbols-outlined">{{ getThemeIcon }}</span>
+          </button>
+        </div>
+      </div>
+
+        <div class="cards-grid">
+          <div
+            v-for="topic in filteredTopics"
+            :key="topic.topic_id"
+            class="deal-card"
           >
-          <template #item.title="{ item }">
+            <div class="card-header">
+              <div class="title-with-link">
                 <a
-              :href="`https://forums.redflagdeals.com${item.web_path}`"
+                  :href="`https://forums.redflagdeals.com${topic.web_path}`"
                   target="_blank"
-              v-html="
-                highlightMatches(
-                  item.title + ' [' + item.Offer.dealer_name + '] '
-                )
-              "
+                  class="deal-title"
+                  @click.stop
+                  v-html="highlightMatches(topic.title)"
                 ></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
+                <a
+                  v-if="topic.Offer.url"
+                  :href="topic.Offer.url"
+                  target="_blank"
+                  class="card-link"
+                  title="Open deal"
                 >
-            <span v-else-if="item.score < 0" class="red-score">{{
-              item.score
-            }}</span>
-            <span v-else>{{ item.score }}</span>
-          </template>
+                  <span class="material-symbols-outlined">open_in_new</span>
+                </a>
+              </div>
+              <div class="score-bubble" :class="{ positive: topic.score > 0, negative: topic.score < 0, neutral: topic.score === 0 }">
+                <span v-if="topic.score > 0">+{{ topic.score }}</span>
+                <span v-else>{{ topic.score }}</span>
+              </div>
+            </div>
 
-          <template #item.last_post_time="{ item }">
-            {{ formatDate(item.last_post_time) }}
-          </template>
+            <div class="card-meta">
+              <span class="dealer-name" v-html="highlightDealerName(topic.Offer.dealer_name)"></span>
+            </div>
 
-          <template #loading>
-            <v-progress-linear indeterminate color="grey" />
-          </template>
-        </v-data-table>
-      </body>
-    </v-main>
-  </v-app>
+            <div class="card-details">
+              <div class="details-stats">
+                <div class="stat">
+                  <span class="material-symbols-outlined">visibility</span>
+                  <span class="stat-value">{{ topic.total_views }} views</span>
+                </div>
+                <div class="stat">
+                  <span class="material-symbols-outlined">chat</span>
+                  <span class="stat-value">{{ topic.total_replies }} replies</span>
+                </div>
+              </div>
+
+              <div class="card-timestamp">
+                Last post: {{ formatDate(topic.last_post_time) }}
+              </div>
+
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
 </template>
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-.fixed-bottom {
-  background: #ffc;
-  color: black;
-}
-</style>

src/main.js

@@ -4,9 +4,12 @@ import { createRouter, createWebHashHistory } from "vue-router";
 
 import "./theme.css";
 
-import { registerPlugins } from "@/plugins";
-
-const routes = [];
+const routes = [
+  {
+    path: '/:pathMatch(.*)*',
+    component: App,
+  },
+];
 
 const router = createRouter({
   history: createWebHashHistory(),
@@ -15,7 +18,5 @@ const router = createRouter({
 
 const app = createApp(App);
 
-registerPlugins(app);
-
 app.use(router);
 app.mount("#app");

src/plugins/README.md

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

src/plugins/index.js

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

src/plugins/vuetify.js

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

src/theme.css

@@ -1,5 +1,58 @@
-body {
-  max-width: 100%;
+.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: #dddddd;
+  --bg-secondary: #e8e8e8;
+  --text-primary: #212529;
+  --text-secondary: #6c757d;
+  --border-color: #d0d0d0;
+  --link-color: #212529;
+}
+
+/* Dark theme */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-primary: #1a1a1a;
+    --bg-secondary: #2a2a2a;
+    --text-primary: #e0e0e0;
+    --text-secondary: #a0a0a0;
+    --border-color: #3a3a3a;
+    --link-color: #212529;
+  }
+}
+
+/* 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;
+  --link-color: #e0e0e0;
+}
+
+html[data-bs-theme="light"],
+html.light-theme {
+  --bg-primary: #dddddd;
+  --bg-secondary: #e8e8e8;
+  --text-primary: #212529;
+  --text-secondary: #6c757d;
+  --border-color: #d0d0d0;
+  --link-color: #212529;
 }
 
 html {
@@ -7,25 +60,28 @@ html {
   min-width: 100%;
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
 }
 
-footer {
-  background: #212529;
-  color: white;
-  padding: 3px;
-  padding-right: 10px;
-  padding-left: 10px;
-}
-
-.footer-left {
-  float: left;
-}
-
-.footer-right {
-  float: right;
+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;
 }
 
 .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;
 }
 
@@ -34,21 +90,359 @@ footer {
 }
 
 a {
-  color: var(--v-theme-primary);
-}
-
-a:hover {
-  color: #d65d03;
+  color: var(--link-color);
+  transition: color 0.2s ease;
 }
 
 a:visited {
-  color: #53514f;
+  color: var(--link-color);
 }
 
-@media (min-width: 769px) {
-  .v-data-table-header th,
-  .v-data-table__td,
-  .v-data-footer {
-    font-size: 1.2rem;
+/* App styles */
+
+.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;
+}
+
+.search-input {
+  flex: 1;
+  max-width: 500px;
+  padding: 10px 12px;
+  font-size: 14px;
+  border: 1px solid #cccccc;
+  border-radius: 4px;
+  background-color: #f5f5f5;
+  color: var(--text-primary);
+  transition: all 0.2s ease;
+  font-family: inherit;
+}
+
+.search-input:focus {
+  outline: none;
+  border-color: #999999;
+  background-color: #ffffff;
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
+}
+
+html.dark-theme .search-input {
+  border-color: #555555;
+  background-color: #1a1a1a;
+  color: #e0e0e0;
+}
+
+html.dark-theme .search-input:focus {
+  background-color: #2a2a2a;
+  border-color: #777777;
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
+}
+
+.search-input::placeholder {
+  color: var(--text-secondary);
+}
+
+.sort-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: 1px solid #cccccc;
+  border-radius: 4px;
+  background-color: #f5f5f5;
+  color: var(--text-primary);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 18px;
+  padding: 0;
+  flex-shrink: 0;
+}
+
+.sort-toggle:hover {
+  background-color: #e8e8e8;
+  border-color: #999999;
+}
+
+.sort-toggle:active {
+  transform: scale(0.95);
+}
+
+html.dark-theme .sort-toggle {
+  border-color: #555555;
+  background-color: #1a1a1a;
+  color: #e0e0e0;
+}
+
+html.dark-theme .sort-toggle:hover {
+  background-color: #2a2a2a;
+  border-color: #777777;
+}
+
+.theme-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: 1px solid #cccccc;
+  border-radius: 4px;
+  background-color: #f5f5f5;
+  color: var(--text-primary);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 18px;
+  padding: 0;
+  flex-shrink: 0;
+}
+
+.theme-toggle:hover {
+  background-color: #e8e8e8;
+  border-color: #999999;
+}
+
+.theme-toggle:active {
+  transform: scale(0.95);
+}
+
+html.dark-theme .theme-toggle {
+  border-color: #555555;
+  background-color: #1a1a1a;
+  color: #e0e0e0;
+}
+
+html.dark-theme .theme-toggle:hover {
+  background-color: #2a2a2a;
+  border-color: #777777;
+}
+
+.cards-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+  gap: 20px;
+  margin-top: 20px;
+}
+
+.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 {
+  background-color: #15151515;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  border-color: #999999;
+}
+
+.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-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: 13px;
+  margin-bottom: 12px;
+}
+
+.dealer-name {
+  color: var(--text-secondary);
+  font-weight: 500;
+  font-size: 13px;
+}
+
+.card-timestamp {
+  color: var(--text-secondary);
+  font-size: 12px;
+  margin-top: 8px;
+}
+
+.card-link {
+  display: inline-flex;
+  align-items: center;
+  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 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 50px;
+  height: 40px;
+  border-radius: 6px;
+  font-weight: 700;
+  font-size: 12px;
+  flex-shrink: 0;
+  transition: all 0.2s ease;
+  padding: 0 8px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+  border: none;
+}
+
+.score-bubble.positive {
+  background-color: rgb(34, 139, 34);
+  color: white;
+  box-shadow: 0 1px 3px rgba(34, 139, 34, 0.2);
+}
+
+html.light-theme .score-bubble.positive {
+  background-color: rgb(34, 139, 34);
+  color: white;
+  box-shadow: 0 1px 3px rgba(34, 139, 34, 0.2);
+}
+
+html.dark-theme .score-bubble.positive {
+  background-color: rgb(158, 206, 106);
+  color: #1a1a1a;
+  box-shadow: 0 1px 3px rgba(158, 206, 106, 0.2);
+}
+
+.score-bubble.negative {
+  background-color: rgb(247, 118, 142);
+  color: white;
+  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-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;
+}
+
+.details-section {
+  margin-bottom: 12px;
+}
+
+.details-section strong {
+  display: block;
+  color: var(--text-primary);
+  margin-bottom: 4px;
+  font-size: 13px;
+}
+
+.details-section p {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: 12px;
+  line-height: 1.4;
+  word-wrap: break-word;
+}
+
+/* Mobile responsive */
+@media (max-width: 768px) {
+  .cards-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .container {
+    padding: 12px;
+  }
+
+  .search-input {
+    max-width: 100%;
   }
 }
+
+/* Mark highlighting */
+mark {
+  background-color: rgba(255, 193, 7, 0.3);
+  color: inherit;
+  font-weight: 600;
+  border-radius: 2px;
+}
+
+html.dark-theme mark {
+  background-color: rgba(255, 193, 7, 0.4);
+  color: inherit;
+  font-weight: 600;
+  border-radius: 2px;
+}

vite.config.mjs

@@ -1,8 +1,6 @@
 // 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";
@@ -11,27 +9,9 @@ import { fileURLToPath, URL } from "node:url";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    Vue({
-      template: { transformAssetUrls },
-    }),
-    // https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
-    Vuetify(),
+    Vue(),
     Components(),
-    Fonts({
-      fontsource: {
-        families: [
-          {
-            name: "Roboto",
-            weights: [100, 300, 400, 500, 700, 900],
-            styles: ["normal", "italic"],
-          },
   ],
-      },
-    }),
-  ],
-  optimizeDeps: {
-    exclude: ["vuetify"],
-  },
   define: { "process.env": {} },
   resolve: {
     alias: {
@@ -55,4 +35,36 @@ 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,
+  },
 });