Add auto theme toggle

package.json

@@ -19,8 +19,7 @@
     "dayjs": "^1.11.10",
     "vue": "^3.5.17",
     "vue-loading-overlay": "^6.0.3",
-    "vue-router": "^5.0.0",
-    "vuetify": "^3.9.6"
+    "vue-router": "^5.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.22.10",
@@ -34,8 +33,7 @@
     "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"
+    "vite": "^6.3.6"
   },
   "eslintConfig": {
     "root": true,

src/App.vue

@@ -2,9 +2,9 @@
 import axios from "axios";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
-import { ref } from "vue";
 
 import "vue-loading-overlay/dist/css/index.css";
+import "./theme.css";
 
 // Configure day.js with UTC support
 dayjs.extend(utc);
@@ -16,12 +16,8 @@ export default {
       filter: window.location.href.split("filter=")[1] || "",
       sortColumn: this.sortColumn,
       topics: [],
-      hoveredTopicId: null,
-      tooltipData: {},
-      loadingTooltip: {},
-      tooltipPosition: { x: 0, y: 0 },
       isMobile: false,
-      currentTheme: 'dark',
+      currentTheme: 'auto',
       mediaQueryListener: null,
       vuetifyTheme: null,
       darkModeQuery: null,
@@ -32,7 +28,7 @@ export default {
     window.addEventListener("keydown", this.handleKeyDown);
     this.detectMobile();
     this.fetchDeals();
-    // Initialize theme on next tick to ensure Vuetify is ready
+    // Initialize theme on next tick
     this.$nextTick(() => {
       this.initializeTheme();
       this.setupThemeListener();
@@ -47,15 +43,15 @@ export default {
   },
   methods: {
     initializeTheme() {
-      // If no saved preference, apply system preference now
-      const savedTheme = localStorage.getItem('vuetify-theme');
+      // If no saved preference, default to auto
+      const savedTheme = localStorage.getItem('theme');
       if (!savedTheme) {
-        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-        const theme = prefersDark ? 'dark' : 'light';
-        this.applyTheme(theme);
+        this.currentTheme = 'auto';
+        this.applyTheme('auto');
       } else {
-        // Get current theme name from Vuetify
-        this.currentTheme = this.$vuetify.theme.global.name;
+        this.currentTheme = savedTheme;
+        // Apply saved theme
+        this.applyTheme(savedTheme);
       }
     },
     setupThemeListener() {
@@ -66,12 +62,12 @@ export default {
 
       // 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) {
+        // 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.applyTheme(newTheme);
+          this.applyThemeActual(newTheme);
         }
       };
 
@@ -80,17 +76,44 @@ export default {
       this.themeChangeHandler = themeChangeHandler;
       this.darkModeQuery = darkModeQuery;
     },
-    applyTheme(theme) {
-      // Apply theme using Vuetify's theme API
-      this.$vuetify.theme.global.name = theme;
+    applyTheme(theme, skipSave = false) {
       this.currentTheme = theme;
-      localStorage.setItem('vuetify-theme', theme);
+      if (!skipSave) {
+        localStorage.setItem('theme', theme);
+      }
 
-      // Also update data-bs-theme for any custom CSS that uses it
-      document.documentElement.setAttribute('data-bs-theme', theme === 'dark' ? 'dark' : 'light');
+      // 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() {
-      const newTheme = this.currentTheme === 'dark' ? 'light' : 'dark';
+      // 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() {
@@ -121,63 +144,7 @@ export default {
         this.$refs.filter.focus();
       }
     },
-    handleTitleHover(topic, event) {
-      // Don't load tooltips on mobile devices
-      if (this.isMobile) {
-        return;
-      }
-      this.hoveredTopicId = topic.topic_id;
-      this.tooltipPosition = {
-        x: event.clientX,
-        y: event.clientY,
-      };
-      this.loadTopicDetails(topic.topic_id);
-    },
-    handleTitleLeave() {
-      if (this.isMobile) {
-        return;
-      }
-      this.hoveredTopicId = null;
-    },
-    handleMouseMove(event) {
-      if (this.isMobile) {
-        return;
-      }
-      if (this.hoveredTopicId !== null) {
-        this.tooltipPosition = {
-          x: event.clientX,
-          y: event.clientY,
-        };
-      }
-    },
-    loadTopicDetails(topicId) {
-      if (!topicId) {
-        console.warn("Topic ID is undefined");
-        return;
-      }
 
-      if (this.tooltipData[topicId]) {
-        return; // Already loaded
-      }
-
-      if (this.loadingTooltip[topicId]) {
-        return; // Already loading
-      }
-
-      this.loadingTooltip[topicId] = true;
-
-      axios
-        .get(`api/v1/topics/${topicId}`)
-        .then((response) => {
-          this.tooltipData[topicId] = response.data;
-        })
-        .catch((err) => {
-          console.log("Error loading topic details:", err);
-        })
-        .finally(() => {
-          this.loadingTooltip[topicId] = false;
-        });
-    },
     createFilterRoute(params) {
       this.$refs.filter.blur();
       history.pushState(
@@ -205,7 +172,8 @@ export default {
       };
     },
     filteredTopics() {
-      return this.topics.filter((row) => {
+      return this.topics
+        .filter((row) => {
           const titles = (
             row.title.toString() +
             " [" +
@@ -214,7 +182,8 @@ export default {
           ).toLowerCase();
           const filterTerm = this.filter.toLowerCase();
           return titles.includes(filterTerm);
-      });
+        })
+        .sort((a, b) => b.score - a.score); // Always sort by score descending
     },
     highlightMatches() {
       return (v) => {
@@ -226,266 +195,113 @@ export default {
         return v.replace(re, (matchedText) => `<mark>${matchedText}</mark>`);
       };
     },
-    visibleHeaders() {
-      const baseHeaders = [
-        { title: "Deal", value: "title", align: "center" },
-        { title: "Score", value: "score", align: "center" },
-      ];
+    highlightDealerName() {
+      return (dealerName) => {
+        if (this.filter == "") return dealerName;
+        const matchExists = dealerName.toLowerCase().includes(this.filter.toLowerCase());
+        if (!matchExists) return dealerName;
 
-      // Only show Last Post column on desktop
-      if (!this.isMobile) {
-        baseHeaders.push({
-          title: "Last Post",
-          value: "last_post_time",
-          align: "center",
-        });
-      }
-
-      return baseHeaders;
-    },
-    tooltipStyle() {
-      if (this.hoveredTopicId === null || !this.tooltipData[this.hoveredTopicId]) {
-        return {};
-      }
-
-      let top = this.tooltipPosition.y + 10;
-      let left = this.tooltipPosition.x + 10;
-      const tooltipWidth = 420;
-
-      // Check if tooltip would go off right side of screen
-      if (left + tooltipWidth > window.innerWidth) {
-        // Position to the left of cursor instead
-        left = Math.max(10, this.tooltipPosition.x - tooltipWidth - 10);
-      }
-
-      // Keep tooltip within vertical bounds, allowing scrolling of content
-      top = Math.max(10, Math.min(top, window.innerHeight - 100));
-
-      return {
-        position: 'fixed',
-        left: Math.max(10, left) + 'px',
-        top: top + 'px',
-        zIndex: 9999,
+        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)';
+      }
+    },
   },
 };
 </script>
 
-<script setup>
-const sortBy = ref([{ key: "score", order: "desc" }]);
-</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="visibleHeaders"
-          :items="filteredTopics"
-          :sort-by="sortBy"
-          :items-per-page="50"
-        >
-          <template #item.title="{ item }">
-            <a
-              :href="`https://forums.redflagdeals.com${item.web_path}`"
-              target="_blank"
-              @mouseenter="handleTitleHover(item, $event)"
-              @mouseleave="handleTitleLeave"
-              @mousemove="handleMouseMove"
-              v-html="
-                highlightMatches(
-                  item.title
-                )
-              "
-            ></a>
-          </template>
+          <button @click="toggleTheme" class="theme-toggle" :title="getThemeTitle">
+            <span class="material-symbols-outlined">{{ getThemeIcon }}</span>
+          </button>
+        </div>
+      </div>
 
-          <template #item.score="{ item }">
-            <span v-if="item.score > 0" class="green-score"
-              >+{{ item.score }}</span
-            >
-            <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 class="cards-grid">
           <div
-          v-if="hoveredTopicId !== null && tooltipData[hoveredTopicId]"
-          class="deal-tooltip"
-          :style="tooltipStyle"
+            v-for="topic in filteredTopics"
+            :key="topic.topic_id"
+            class="deal-card"
           >
-          <div class="tooltip-content">
-              <div class="tooltip-stats">
-                <span class="stat-item">
+            <div class="card-header">
+              <div class="title-with-link">
+                <a
+                  :href="`https://forums.redflagdeals.com${topic.web_path}`"
+                  target="_blank"
+                  class="deal-title"
+                  @click.stop
+                  v-html="highlightMatches(topic.title)"
+                ></a>
+                <a
+                  v-if="topic.Offer.url"
+                  :href="topic.Offer.url"
+                  target="_blank"
+                  class="card-link"
+                  title="Open deal"
+                >
+                  <span class="material-symbols-outlined">open_in_new</span>
+                </a>
+              </div>
+              <div class="score-bubble" :class="{ positive: topic.score > 0, negative: topic.score < 0, neutral: topic.score === 0 }">
+                <span v-if="topic.score > 0">+{{ topic.score }}</span>
+                <span v-else>{{ topic.score }}</span>
+              </div>
+            </div>
+
+            <div class="card-meta">
+              <span class="dealer-name" v-html="highlightDealerName(topic.Offer.dealer_name)"></span>
+            </div>
+
+            <div class="card-details">
+              <div class="details-stats">
+                <div class="stat">
                   <span class="material-symbols-outlined">visibility</span>
-                  {{ tooltipData[hoveredTopicId].topic.total_views }} views
-                </span>
-                <span class="stat-item">
+                  <span class="stat-value">{{ topic.total_views }} views</span>
+                </div>
+                <div class="stat">
                   <span class="material-symbols-outlined">chat</span>
-                  {{ tooltipData[hoveredTopicId].topic.total_replies }} replies
-                </span>
+                  <span class="stat-value">{{ topic.total_replies }} replies</span>
                 </div>
-            <div v-if="tooltipData[hoveredTopicId].description" class="tooltip-description">
-              <strong>Description:</strong>
-              {{ tooltipData[hoveredTopicId].description }}
               </div>
-            <div class="tooltip-dealer">
-              {{ tooltipData[hoveredTopicId].topic.Offer.dealer_name }}
+
+              <div class="card-timestamp">
+                Last post: {{ formatDate(topic.last_post_time) }}
+              </div>
+
+            </div>
           </div>
-            <div v-if="tooltipData[hoveredTopicId].first_post" class="tooltip-first-post">
-              <strong>First Post:</strong>
-              {{ tooltipData[hoveredTopicId].first_post }}
-            </div>
-            <div class="tooltip-times">
-              <div>Posted: {{ formatDate(tooltipData[hoveredTopicId].topic.post_time) }}</div>
-              <div>Last Post: {{ formatDate(tooltipData[hoveredTopicId].topic.last_post_time) }}</div>
         </div>
       </div>
     </div>
-      </body>
-    </v-main>
-  </v-app>
 </template>
-
-<style scoped>
-#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;
-}
-
-.deal-tooltip {
-  pointer-events: none;
-  max-width: 400px;
-}
-
-.tooltip-content {
-  background: var(--tooltip-bg);
-  border: 2px solid var(--tooltip-border);
-  border-radius: 8px;
-  padding: 16px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  font-size: 13px;
-  color: var(--text-primary);
-  text-align: left;
-  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
-}
-
-.tooltip-header {
-  font-weight: bold;
-  font-size: 14px;
-  color: var(--text-primary);
-  margin-bottom: 8px;
-  white-space: normal;
-  word-wrap: break-word;
-}
-
-.tooltip-dealer {
-  font-size: 12px;
-  color: var(--text-secondary);
-  margin-bottom: 8px;
-}
-
-.tooltip-stats {
-  display: flex;
-  gap: 12px;
-  margin-bottom: 8px;
-  font-size: 12px;
-  color: var(--text-secondary);
-}
-
-.stat-item {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.stat-item .material-symbols-outlined {
-  font-size: 16px;
-}
-
-.tooltip-description {
-  margin-bottom: 8px;
-  padding: 8px;
-  background: var(--bg-secondary);
-  border-left: 2px solid var(--tooltip-border);
-  border-radius: 2px;
-  font-size: 12px;
-  white-space: normal;
-  word-wrap: break-word;
-  max-height: 60px;
-  overflow-y: auto;
-  color: var(--text-primary);
-}
-
-.tooltip-first-post {
-  margin-bottom: 8px;
-  padding: 8px;
-  background: var(--bg-secondary);
-  border-left: 2px solid var(--tooltip-border);
-  border-radius: 2px;
-  font-size: 12px;
-  white-space: normal;
-  word-wrap: break-word;
-  max-height: 60px;
-  overflow-y: auto;
-  color: var(--text-primary);
-}
-
-.tooltip-times {
-  font-size: 11px;
-  color: var(--text-secondary);
-  border-top: 1px solid var(--border-color);
-  padding-top: 8px;
-  margin-top: 8px;
-}
-
-/* Filter input styling */
-:deep(.v-text-field) {
-  --v-field-border-color: #cccccc;
-}
-
-html[data-bs-theme="light"] :deep(.v-text-field) {
-  --v-field-border-color: #e8e8e8;
-}
-
-html[data-bs-theme="light"] :deep(.v-field__input) {
-  background-color: #d0d0d0 !important;
-}
-
-html[data-bs-theme="light"] :deep(.v-field--focused .v-field__input) {
-  background-color: #e8e8e8 !important;
-}
-
-html[data-bs-theme="dark"] :deep(.v-text-field) {
-  --v-field-border-color: #555555;
-}
-</style>

src/main.js

@@ -4,8 +4,6 @@ import { createRouter, createWebHashHistory } from "vue-router";
 
 import "./theme.css";
 
-import { registerPlugins } from "@/plugins";
-
 const routes = [
   {
     path: '/:pathMatch(.*)*',
@@ -20,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,68 +0,0 @@
-/**
- * plugins/vuetify.js
- *
- * Framework documentation: https://vuetifyjs.com
- */
-
-// Styles
-import "@mdi/font/css/materialdesignicons.css";
-import "vuetify/styles";
-
-// Composables
-import { createVuetify } from "vuetify";
-
-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: getDefaultTheme(),
-    themes: {
-      light: lightTheme,
-      dark: darkTheme,
-    },
-  },
-});
-
-// Export the vuetify instance so other parts of the app can access it
-export { vuetify as default };

src/theme.css

@@ -15,18 +15,12 @@
 /* Theme-aware CSS variables */
 :root {
   /* Light theme (default) */
-  --bg-primary: #ffffff;
-  --bg-secondary: #f5f5f5;
+  --bg-primary: #dddddd;
+  --bg-secondary: #e8e8e8;
   --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;
+  --border-color: #d0d0d0;
+  --link-color: #212529;
 }
 
 /* Dark theme */
@@ -37,13 +31,7 @@
     --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;
+    --link-color: #212529;
   }
 }
 
@@ -54,35 +42,17 @@ html[data-bs-theme="dark"] {
   --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;
+  --link-color: #e0e0e0;
 }
 
-html[data-bs-theme="light"] {
-  --bg-primary: #ffffff;
-  --bg-secondary: #f5f5f5;
+html[data-bs-theme="light"],
+html.light-theme {
+  --bg-primary: #dddddd;
+  --bg-secondary: #e8e8e8;
   --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;
+  --border-color: #d0d0d0;
+  --link-color: #212529;
 }
 
 html {
@@ -90,23 +60,17 @@ 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: var(--footer-bg);
-  color: var(--footer-text);
-  padding: 3px;
-  padding-right: 10px;
-  padding-left: 10px;
-  border-top: 1px solid var(--border-color);
-}
-
-.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 {
@@ -130,103 +94,318 @@ a {
   transition: color 0.2s ease;
 }
 
-
-
 a:visited {
-  color: var(--link-visited);
+  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);
+}
+
+.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%;
   }
 }
 
-/* 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);
+/* Mark highlighting */
+mark {
+  background-color: rgba(255, 193, 7, 0.3);
+  color: inherit;
+  font-weight: 600;
   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);
+html.dark-theme mark {
+  background-color: rgba(255, 193, 7, 0.4);
+  color: inherit;
+  font-weight: 600;
   border-radius: 2px;
-  font-size: 12px;
-  white-space: normal;
-  word-wrap: break-word;
-  max-height: 60px;
-  overflow-y: auto;
-  color: var(--text-primary);
-}
-
-.tooltip-times {
-  font-size: 11px;
-  color: var(--text-secondary);
-  border-top: 1px solid var(--border-color);
-  padding-top: 8px;
-  margin-top: 8px;
 }

vite.config.mjs

@@ -1,7 +1,6 @@
 // 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";
@@ -10,16 +9,9 @@ import { fileURLToPath, URL } from "node:url";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    Vue({
-      template: { transformAssetUrls },
-    }),
-    Vuetify(),
+    Vue(),
     Components(),
   ],
-  optimizeDeps: {
-    exclude: ["vuetify"],
-    include: ["axios", "vue-router", "vue-loading-overlay"],
-  },
   define: { "process.env": {} },
   resolve: {
     alias: {
@@ -54,7 +46,6 @@ export default defineConfig({
     rollupOptions: {
       output: {
         manualChunks: {
-          "vuetify": ["vuetify"],
           "vendor": ["axios", "dayjs", "vue-router", "vue-loading-overlay"],
         },
         chunkFileNames: "js/[name].[hash].js",