Update dependency vite to v7

Fix tooltip positioning
Remove deal from tooltip
2026-03-03 17:46:35 +00:00 · 2026-02-15 00:35:04 +00:00 · 2026-02-14 17:27:15 -05:00 · 2026-02-14 17:22:34 -05:00 · 2026-02-14 16:59:42 -05:00 · 2026-02-14 16:28:23 -05:00
5 changed files with 380 additions and 79 deletions
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-bs-theme="dark">
+<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -17,13 +17,7 @@
    <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"
@@ -38,6 +32,20 @@
      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>
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,9 +2,7 @@
 import axios from "axios";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
-import Loading from "vue-loading-overlay";
-import { install } from "@github/hotkey";
-import { ref, reactive } from "vue";
+import { ref } from "vue";

 import "vue-loading-overlay/dist/css/index.css";

@@ -23,18 +21,78 @@ export default {
      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 = () => {
@@ -143,7 +201,7 @@ export default {
    formatDate() {
      return (v) => {
        const date = dayjs(String(v));
-        return date.format("hh:mm A (MM/DD)");
+        return date.format("YYYY-MM-DD hh:mm A");
      };
    },
    filteredTopics() {
@@ -171,7 +229,7 @@ export default {
    visibleHeaders() {
      const baseHeaders = [
        { title: "Deal", value: "title", align: "center" },
-        { title: "Score", value: "score", align: "center", sortable: true },
+        { title: "Score", value: "score", align: "center" },
      ];

      // Only show Last Post column on desktop
@@ -180,12 +238,36 @@ export default {
          title: "Last Post",
          value: "last_post_time",
          align: "center",
-          sortable: true,
        });
      }

      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>
@@ -210,8 +292,7 @@ const sortBy = ref([{ key: "score", order: "desc" }]);
        <v-data-table
          :headers="visibleHeaders"
          :items="filteredTopics"
-          :sort-by="sortColumn"
-          v-model:sortBy="sortBy"
+          :sort-by="sortBy"
          :items-per-page="50"
        >
          <template #item.title="{ item }">
@@ -252,18 +333,9 @@ const sortBy = ref([{ key: "score", order: "desc" }]);
        <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,
-          }"
+          :style="tooltipStyle"
        >
          <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>
@@ -278,6 +350,9 @@ const sortBy = ref([{ key: "score", order: "desc" }]);
              <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 }}
@@ -313,20 +388,21 @@ const sortBy = ref([{ key: "score", order: "desc" }]);
 }

 .tooltip-content {
-  background: #24283b;
-  border: 2px solid #a9b1d6;
+  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.5);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-size: 13px;
-  color: #e0e0e0;
+  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: #d0d0d0;
+  color: var(--text-primary);
  margin-bottom: 8px;
  white-space: normal;
  word-wrap: break-word;
@@ -334,7 +410,7 @@ const sortBy = ref([{ key: "score", order: "desc" }]);

 .tooltip-dealer {
  font-size: 12px;
-  color: #c0c0c0;
+  color: var(--text-secondary);
  margin-bottom: 8px;
 }

@@ -343,6 +419,7 @@ const sortBy = ref([{ key: "score", order: "desc" }]);
  gap: 12px;
  margin-bottom: 8px;
  font-size: 12px;
+  color: var(--text-secondary);
 }

 .stat-item {
@@ -358,34 +435,57 @@ const sortBy = ref([{ key: "score", order: "desc" }]);
 .tooltip-description {
  margin-bottom: 8px;
  padding: 8px;
-  background: rgba(160, 160, 160, 0.1);
-  border-left: 2px solid #a9b1d6;
+  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: rgba(160, 160, 160, 0.1);
-  border-left: 2px solid #a9b1d6;
+  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: #b0b0b0;
-  border-top: 1px solid #555555;
+  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>
--- a/src/main.js
+++ b/src/main.js
@@ -6,7 +6,12 @@ import "./theme.css";

 import { registerPlugins } from "@/plugins";

-const routes = [];
+const routes = [
+  {
+    path: '/:pathMatch(.*)*',
+    component: App,
+  },
+];

 const router = createRouter({
  history: createWebHashHistory(),
--- a/src/plugins/vuetify.js
+++ b/src/plugins/vuetify.js
@@ -1,35 +1,68 @@
 /**
 * 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";

-// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
-export default createVuetify({
+const lightTheme = {
+  dark: false,
+  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: "tokyoNight",
-    themes: { tokyoNight },
+    defaultTheme: getDefaultTheme(),
+    themes: {
+      light: lightTheme,
+      dark: darkTheme,
+    },
  },
 });
+
+// Export the vuetify instance so other parts of the app can access it
+export { vuetify as default };
--- a/src/theme.css
+++ b/src/theme.css
@@ -1,12 +1,3 @@
-/* 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;
-}
-
 .material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
@@ -21,8 +12,77 @@
  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 {
@@ -33,11 +93,12 @@ html {
 }

 footer {
-  background: #212529;
-  color: white;
+  background: var(--footer-bg);
+  color: var(--footer-text);
  padding: 3px;
  padding-right: 10px;
  padding-left: 10px;
+  border-top: 1px solid var(--border-color);
 }

 .footer-left {
@@ -49,6 +110,14 @@ 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;
 }

@@ -57,15 +126,14 @@ footer {
 }

 a {
-  color: var(--v-theme-primary);
+  color: var(--link-color);
+  transition: color 0.2s ease;
 }

-a:hover {
-  color: #d65d03;
-}
+

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

@media (min-width: 769px) {
@@ -75,3 +143,90 @@ 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;
+}
Author	SHA1	Message	Date
renovate[bot]	be665af0f0	Update dependency vite to v7	2026-02-15 00:35:04 +00:00
Dave Gallant	640feea592	Fix tooltip positioning	2026-02-14 17:27:15 -05:00
Dave Gallant	45dfa503aa	Remove deal from tooltip	2026-02-14 17:22:34 -05:00
Dave Gallant	87f98fa8c0	Update colours and fix errors in console	2026-02-14 16:59:42 -05:00
Dave Gallant	e8dc79f981	Update themes and match system	2026-02-14 16:28:23 -05:00