Merge pull request #335 from davegallant/dependabot/npm_and_yarn/rollup-4.59.0

Bumps [minimatch](https://github.com/isaacs/minimatch) from 3.1.2 to 3.1.5.
- [Changelog](https://github.com/isaacs/minimatch/blob/main/changelog.md)
- [Commits](https://github.com/isaacs/minimatch/compare/v3.1.2...v3.1.5)

---
updated-dependencies:
- dependency-name: minimatch
  dependency-version: 3.1.5
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

.dockerignore

@@ -1 +1,4 @@
-backend
+node_modules
+dist
+.git
+.github

.github/workflows/publish-container.yml

@@ -0,0 +1,50 @@
+name: Publish Container
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+  schedule:
+    - cron: "0 0 * * 0"
+
+jobs:
+  publish:
+    name: Publish rfd-fyi
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+
+      - name: Prepare
+        id: prep
+        run: |
+          IMAGE_NAME=ghcr.io/${{ github.repository_owner }}/rfd-fyi
+          VERSION=${GITHUB_REF##*/}
+          if [[ $GITHUB_REF == refs/heads/main ]]; then
+            VERSION=latest
+          fi
+          if [[ $GITHUB_REF == refs/tags/* ]]; then
+            VERSION=${GITHUB_REF#refs/tags/v}
+          fi
+          TAGS="${IMAGE_NAME}:${VERSION}"
+          if [[ $VERSION =~ ^[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}$ ]]; then
+            TAGS="$TAGS,${IMAGE_NAME}:latest"
+          fi
+          echo "tags=${TAGS}" >> $GITHUB_OUTPUT
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to GitHub Packages Docker Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build / push
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          file: ./Dockerfile
+          push: ${{ github.ref == 'refs/heads/main' }}
+          tags: ${{ steps.prep.outputs.tags }}

.github/workflows/publish-containers.yml

@@ -1,87 +0,0 @@
-name: Publish Containers
-on: 
-  push:
-    branches:
-      - main
-  pull_request:
-
-jobs:
-  publish-backend:
-    name: Publish rfd-fyi-backend
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v6
-
-      - name: Prepare
-        id: prep
-        run: |
-          IMAGE_NAME=ghcr.io/${{ github.repository_owner }}/rfd-fyi-backend
-          VERSION=${GITHUB_REF##*/}
-          if [[ $GITHUB_REF == refs/heads/main ]]; then
-            VERSION=latest
-          fi
-          if [[ $GITHUB_REF == refs/tags/* ]]; then
-            VERSION=${GITHUB_REF#refs/tags/v}
-          fi
-          TAGS="${IMAGE_NAME}:${VERSION}"
-          if [[ $VERSION =~ ^[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}$ ]]; then
-            TAGS="$TAGS,${IMAGE_NAME}:latest"
-          fi
-          echo ::set-output name=tags::${TAGS}
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Login to GitHub Packages Docker Registry
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Build / push
-        uses: docker/build-push-action@v6
-        with:
-          context: backend
-          file: ./backend/Dockerfile
-          push: ${{ github.ref == 'refs/heads/main' }}
-          tags: ${{ steps.prep.outputs.tags }}
-
-  publish-frontend:
-    name: Publish rfd-fyi-frontend
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v6
-
-      - name: Prepare
-        id: prep
-        run: |
-          IMAGE_NAME=ghcr.io/${{ github.repository_owner }}/rfd-fyi-frontend
-          VERSION=${GITHUB_REF##*/}
-          if [[ $GITHUB_REF == refs/heads/main ]]; then
-            VERSION=latest
-          fi
-          if [[ $GITHUB_REF == refs/tags/* ]]; then
-            VERSION=${GITHUB_REF#refs/tags/v}
-          fi
-          TAGS="${IMAGE_NAME}:${VERSION}"
-          if [[ $VERSION =~ ^[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}$ ]]; then
-            TAGS="$TAGS,${IMAGE_NAME}:latest"
-          fi
-          echo ::set-output name=tags::${TAGS}
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Login to GitHub Packages Docker Registry
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Build / push
-        uses: docker/build-push-action@v6
-        with:
-          context: .
-          file: ./Dockerfile
-          push: ${{ github.ref == 'refs/heads/main' }}
-          tags: ${{ steps.prep.outputs.tags }}

.gitignore

@@ -1,5 +1,5 @@
 node_modules
-dist
+/dist
 data/
 backend/bin/
 .vscode

Caddyfile

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

Dockerfile

@@ -1,20 +1,20 @@
-FROM node:20.2.0-alpine3.16 as builder
+# Build frontend
-
+FROM dhi.io/node:25-debian13-dev AS frontend-builder
 WORKDIR /app
-
 COPY package*.json ./
-
 RUN npm install
-
 COPY . .
-
 RUN npm run build
 
-FROM caddy:2.10.2-alpine as runtime
+# Build backend (with embedded frontend)
+FROM dhi.io/golang:1.26-debian13-dev AS backend-builder
+WORKDIR /src
+COPY backend /src
+COPY --from=frontend-builder /app/dist /src/dist
+RUN CGO_ENABLED=0 go build -o rfd-fyi .
 
-WORKDIR /my-site
+FROM dhi.io/static:20251003-musl-alpine3.23 AS runtime
-
+COPY --from=backend-builder /src/rfd-fyi /rfd-fyi
-COPY --from=builder /app/dist ./
-
-COPY Caddyfile /etc/caddy/Caddyfile
 
+EXPOSE 8080
+ENTRYPOINT ["/rfd-fyi"]

Makefile

@@ -15,7 +15,7 @@ help:
 
 ## backend: Build and run the backend from source
 backend:
-	@cd backend && CGO_ENABLED=0 go run .
+	@cd backend && CGO_ENABLED=0 HTTP_PORT=8080 go run .
 .PHONY: backend
 
 ## frontend: Build and run the frontend from source
@@ -23,20 +23,21 @@ frontend:
 	@npm run serve
 .PHONY: frontend
 
-## dev: Build and run in docker compose
+## dev: Build and run in Docker
 dev:
-	docker compose up --build -d
+	docker build -t rfd-fyi:dev .
+	docker run -d --name rfd-fyi -p 8080:8080 rfd-fyi:dev
 .PHONY: dev
 
-## prod: Run the latest images in docker compose
+## prod: Run the latest image in Docker
 prod:
 	@git pull
-	@docker pull ghcr.io/davegallant/rfd-fyi-backend
+	@docker pull ghcr.io/davegallant/rfd-fyi
-	@docker pull ghcr.io/davegallant/rfd-fyi-frontend
+	@docker run -d --name rfd-fyi -p 8080:8080 ghcr.io/davegallant/rfd-fyi
-	@docker compose -f docker-compose.prod.yml up -d
 .PHONY: prod
 
-## teardown: Teardown docker
+## teardown: Teardown Docker
 teardown:
-	docker compose down
+	docker stop rfd-fyi || true
+	docker rm rfd-fyi || true
 .PHONY: teardown

README.md

@@ -4,30 +4,30 @@ This repository provides a simple, less-distracting overlay for hot deals posted
 
 The frontend is made with Vue 3 and the backend is written in Go. The backend exists for caching purposes; to prevent excessive requests to RedFlagDeals itself.
 
-## Local Development
+## Docker
 
-To get up and running locally: in one pane/tab, run:
+To run the latest:
 
 ```sh
-make backend
+docker run -d --name rfd-fyi -p 8080:8080 ghcr.io/davegallant/rfd-fyi
 ```
 
-In another pane/tab, run:
+To build container from source:
-
-```sh
-make frontend
-```
-
-## Docker Compose
-
-To build containers from source:
 
 ```sh
 make dev
 ```
 
-To run the latest published images:
+## Local Development
+
+To get up and running locally: in one shell, run:
 
 ```sh
-make prod
+make backend
+```
+
+In another shell, run:
+
+```sh
+make frontend
 ```

backend/Dockerfile

@@ -1,16 +0,0 @@
-# syntax=docker/dockerfile:1.21
-FROM cgr.dev/chainguard/go:latest AS build
-
-WORKDIR /src
-
-COPY . /src
-
-RUN CGO_ENABLED=0 go build -o backend .
-
-FROM cgr.dev/chainguard/static:latest
-
-COPY --from=build /src/backend /backend
-
-EXPOSE 8080
-
-CMD [ "/backend" ]

backend/app.go

@@ -1,9 +1,11 @@
 package main
 
 import (
+	"embed"
 	"encoding/json"
 	"fmt"
 	"io"
+	"io/fs"
 	"math/rand/v2"
 	"net/http"
 	"net/url"
@@ -17,20 +19,8 @@ import (
 	"github.com/gorilla/mux"
 )
 
-// @title           RFD FYI API
+//go:embed dist/*
-// @version         1.0
+var frontendFS embed.FS
-// @description     An API for issue tracking
-// @termsOfService  http://swagger.io/terms/
-
-// @contact.name   API Support
-// @contact.url    https://linktr.ee/davegallant
-// @contact.email  davegallant@gmail.com
-
-// @license.name  Apache 2.0
-// @license.url   http://www.apache.org/licenses/LICENSE-2.0.html
-
-// @host      localhost:8080
-// @BasePath  /api/v1
 
 type App struct {
 	Router        *mux.Router
@@ -48,22 +38,45 @@ type Redirect struct {
 func (a *App) Initialize() {
 	a.BasePath = "/api/v1"
 
-	a.Router = mux.NewRouter().PathPrefix(a.BasePath).Subrouter()
+	a.Router = mux.NewRouter()
-	http.Handle("/", a.Router)
-
 	a.initializeRoutes()
 }
 
 func (a *App) Run(httpPort string) {
 	log.Info().Msgf("Serving requests on port " + httpPort)
-	if err := http.ListenAndServe(fmt.Sprintf(":"+httpPort), nil); err != nil {
+	if err := http.ListenAndServe(fmt.Sprintf(":%s", httpPort), a.Router); err != nil {
 		panic(err)
 	}
 }
 
 func (a *App) initializeRoutes() {
-	a.Router.HandleFunc("/topics", a.listTopics).Methods("GET")
+	a.Router.HandleFunc(a.BasePath+"/topics", a.listTopics).Methods("GET")
-	a.Router.HandleFunc("/topics/{id}", a.getTopicDetails).Methods("GET")
+	a.Router.HandleFunc(a.BasePath+"/topics/{id}", a.getTopicDetails).Methods("GET")
+
+	distFS, err := fs.Sub(frontendFS, "dist")
+	if err != nil {
+		panic(err)
+	}
+	fileServer := http.FileServer(http.FS(distFS))
+	a.Router.PathPrefix("/").Handler(spaHandler{staticHandler: fileServer, staticFS: distFS})
+}
+
+// spaHandler serves static files when they exist, otherwise falls back to
+// index.html so that client-side routing works.
+type spaHandler struct {
+	staticHandler http.Handler
+	staticFS      fs.FS
+}
+
+func (h spaHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
+	path := strings.TrimPrefix(r.URL.Path, "/")
+	if path == "" {
+		path = "index.html"
+	}
+	if _, err := fs.Stat(h.staticFS, path); err != nil {
+		r.URL.Path = "/"
+	}
+	h.staticHandler.ServeHTTP(w, r)
 }
 
 // func respondWithError(w http.ResponseWriter, code int, message string) {

backend/dist/index.html

@@ -0,0 +1,6 @@
+<!doctype html>
+<html>
+<body>
+<p>Run the Vite dev server for the frontend.</p>
+</body>
+</html>

backend/main.go

@@ -11,21 +11,6 @@ import (
 	utils "github.com/davegallant/rfd-fyi/pkg/utils"
 )
 
-// @title           RFD FYI API
-// @version         1.0
-// @description     An API for an issue tracking service
-// @termsOfService  http://swagger.io/terms/
-
-// @contact.name   API Support
-// @contact.url    http://www.swagger.io/support
-// @contact.email  support@swagger.io
-
-// @license.name  Apache 2.0
-// @license.url   http://www.apache.org/licenses/LICENSE-2.0.html
-
-// @host      localhost:8080
-// @BasePath  /api/v1
-
 func main() {
 	log.Logger = log.Output(zerolog.ConsoleWriter{Out: os.Stderr})
 

docker-compose.prod.yml

@@ -1,16 +0,0 @@
-services:
-  frontend:
-    image: ghcr.io/davegallant/rfd-fyi-frontend
-    ports:
-      - 80:80
-      - 443:443
-    links:
-      - "backend:backend"
-    volumes:
-      - ./data:/data
-    restart: always
-  backend:
-    image: ghcr.io/davegallant/rfd-fyi-backend
-    ports:
-      - 8080:8080
-    restart: always

docker-compose.yml

@@ -1,18 +0,0 @@
-services:
-  frontend:
-    build:
-      dockerfile: Dockerfile
-      context: .
-    ports:
-      - 80:80
-      - 443:443
-    links:
-      - "backend:backend"
-    volumes:
-      - ./data:/data
-  backend:
-    build:
-      dockerfile: Dockerfile
-      context: backend
-    ports:
-      - 8080:8080

flake.nix

@@ -14,21 +14,12 @@
       {
         devShells.default = pkgs.mkShell {
           buildInputs = with pkgs; [
-            # Node.js LTS with npm
+            nodejs_25
-            nodejs_20
-
-            # Go for backend
             go
-
-            # Build tools
             pkg-config
-
-            # Development utilities
             git
             curl
             jq
-
-            # Optional: for better development experience
             gnumake
           ];
 

index.html

@@ -3,7 +3,7 @@
   <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="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <meta name="description" content="An alternative frontend for hot deals" />
 
     <!-- DNS prefetch for faster Google Fonts resolution -->

package.json

@@ -9,7 +9,7 @@
     "lint": "eslint . --fix"
   },
   "dependencies": {
-    "@fontsource/roboto": "5.2.9",
+    "@fontsource/roboto": "5.2.10",
     "@github/hotkey": "^3.0.0",
     "@mdi/font": "7.4.47",
     "@popperjs/core": "^2.11.8",
@@ -33,7 +33,7 @@
     "postcss-cli": "^11.0.0",
     "sass-embedded": "^1.89.2",
     "unplugin-vue-components": "^31.0.0",
-    "vite": "^7.0.0"
+    "vite": "^6.3.6"
   },
   "eslintConfig": {
     "root": true,

src/App.vue

@@ -57,21 +57,26 @@ export default {
       filterInput: "",
       activeFilters: this.parseFiltersFromUrl(),
       sortMethod: "score",
+      viewMode: "cards",
       topics: [],
       isMobile: false,
       currentTheme: "auto",
       darkModeQuery: null,
       themeChangeHandler: null,
       isLoading: false,
+      menuOpen: false,
+      infoOverlayVisible: false,
     };
   },
 
   mounted() {
     window.addEventListener("keydown", this.handleKeyDown);
     window.addEventListener("resize", this.handleResize);
+    window.addEventListener("click", this.handleClickOutside);
     this.detectMobile();
     this.fetchDeals();
     this.initializeSortMethod();
+    this.initializeViewMode();
     this.initializeTheme();
     this.setupThemeListener();
   },
@@ -79,6 +84,7 @@ export default {
   beforeUnmount() {
     window.removeEventListener("keydown", this.handleKeyDown);
     window.removeEventListener("resize", this.handleResize);
+    window.removeEventListener("click", this.handleClickOutside);
     if (this.darkModeQuery && this.themeChangeHandler) {
       this.darkModeQuery.removeEventListener("change", this.themeChangeHandler);
     }
@@ -130,6 +136,19 @@ export default {
       };
       return titles[this.sortMethod];
     },
+
+    viewIcon() {
+      const icons = { cards: "grid_view", list: "view_list" };
+      return icons[this.viewMode];
+    },
+
+    viewTitle() {
+      const titles = {
+        cards: "View: Cards (click for List)",
+        list: "View: List (click for Cards)",
+      };
+      return titles[this.viewMode];
+    },
   },
 
   methods: {
@@ -219,6 +238,36 @@ export default {
         event.preventDefault();
         this.$refs.filterInput.focus();
       }
+
+      if (event.key === "r" && !isInput) {
+        event.preventDefault();
+        this.fetchDeals();
+      }
+
+      if (event.key === "i" && !isInput) {
+        event.preventDefault();
+        this.toggleInfoOverlay();
+      }
+
+      if (event.key === "Escape" && this.infoOverlayVisible) {
+        event.preventDefault();
+        this.toggleInfoOverlay();
+      }
+
+      if (event.key === "s" && !isInput) {
+        event.preventDefault();
+        this.toggleSort();
+      }
+
+      if (event.key === "v" && !isInput) {
+        event.preventDefault();
+        this.toggleViewMode();
+      }
+
+      if (event.key === "t" && !isInput) {
+        event.preventDefault();
+        this.toggleTheme();
+      }
     },
 
     parseFiltersFromUrl() {
@@ -303,6 +352,38 @@ export default {
       localStorage.setItem("sortMethod", this.sortMethod);
     },
 
+    initializeViewMode() {
+      const saved = localStorage.getItem("viewMode");
+      if (saved) {
+        this.viewMode = saved;
+      }
+    },
+
+    toggleViewMode() {
+      const cycle = { cards: "list", list: "cards" };
+      this.viewMode = cycle[this.viewMode];
+      localStorage.setItem("viewMode", this.viewMode);
+    },
+
+    toggleMenu() {
+      this.menuOpen = !this.menuOpen;
+    },
+
+    closeMenu() {
+      this.menuOpen = false;
+    },
+
+    handleMenuAction(action) {
+      action();
+      this.closeMenu();
+    },
+
+    handleClickOutside(event) {
+      if (this.menuOpen && !event.target.closest('.mobile-menu-wrapper')) {
+        this.closeMenu();
+      }
+    },
+
     getDealerColor(dealerName) {
       if (!dealerName) return null;
       const isDark = document.documentElement.getAttribute('data-bs-theme') === 'dark' ||
@@ -322,6 +403,14 @@ export default {
         color: color.text,
       };
     },
+    toggleInfoOverlay() {
+      this.infoOverlayVisible = !this.infoOverlayVisible;
+    },
+    methods: {
+      toggleInfoOverlay() {
+        this.infoOverlayVisible = !this.infoOverlayVisible;
+      },
+    },
   },
 };
 </script>
@@ -348,29 +437,66 @@ export default {
               @keyup.esc="$refs.filterInput.blur()"
             />
           </div>
-          <button class="icon-button" title="Refresh deals" @click="fetchDeals" :disabled="isLoading">
+          <!-- Desktop buttons -->
+          <button class="icon-button desktop-only" title="Refresh deals" @click="fetchDeals" :disabled="isLoading">
             <span class="material-symbols-outlined" :class="{ 'spinning': isLoading }">refresh</span>
           </button>
-          <button class="icon-button" :title="sortTitle" @click="toggleSort">
+          <button class="icon-button desktop-only" :title="sortTitle" @click="toggleSort">
             <span class="material-symbols-outlined">{{ sortIcon }}</span>
           </button>
-          <button class="icon-button" :title="themeTitle" @click="toggleTheme">
+          <button class="icon-button desktop-only" :title="viewTitle" @click="toggleViewMode">
+            <span class="material-symbols-outlined">{{ viewIcon }}</span>
+          </button>
+          <button class="icon-button desktop-only" :title="themeTitle" @click="toggleTheme">
             <span class="material-symbols-outlined">{{ themeIcon }}</span>
           </button>
+          <button class="icon-button desktop-only" title="Info" @click="toggleInfoOverlay">
+            <span class="material-symbols-outlined">info</span>
+          </button>
+          <div class="mobile-menu-wrapper mobile-only">
+            <button class="icon-button" title="Menu" @click="toggleMenu">
+              <span class="material-symbols-outlined">{{ menuOpen ? 'close' : 'menu' }}</span>
+            </button>
+            <div class="mobile-dropdown" v-if="menuOpen" @click.stop>
+              <button class="dropdown-item" @click="handleMenuAction(fetchDeals)" :disabled="isLoading">
+                <span class="material-symbols-outlined" :class="{ 'spinning': isLoading }">refresh</span>
+                <span>Refresh</span>
+              </button>
+              <button class="dropdown-item" @click="handleMenuAction(toggleSort)">
+                <span class="material-symbols-outlined">{{ sortIcon }}</span>
+                <span>{{ sortTitle.split('(')[0].trim() }}</span>
+              </button>
+              <button class="dropdown-item" @click="handleMenuAction(toggleViewMode)">
+                <span class="material-symbols-outlined">{{ viewIcon }}</span>
+                <span>{{ viewTitle.split('(')[0].trim() }}</span>
+              </button>
+              <button class="dropdown-item" @click="toggleInfoOverlay">
+                  <span class="material-symbols-outlined">info</span>
+                  <span>Info</span>
+              </button>
+              <button class="dropdown-item" @click="handleMenuAction(toggleTheme)">
+                <span class="material-symbols-outlined">{{ themeIcon }}</span>
+                <span>{{ themeTitle.split('(')[0].trim() }}</span>
+              </button>
+              <button class="dropdown-item" @click="toggleInfoOverlay">
+                <span class="material-symbols-outlined">info</span>
+                <span>Info</span>
+              </button>
+            </div>
+          </div>
         </div>
       </div>
-
+      <InfoOverlay :visible="infoOverlayVisible" @close="toggleInfoOverlay" />
       <div v-if="isLoading && topics.length === 0" class="loading-container">
         <span class="material-symbols-outlined spinning loading-spinner">refresh</span>
         <p>Loading deals...</p>
       </div>
-
       <div class="cards-wrapper" v-else>
         <div v-if="isLoading" class="loading-overlay">
           <span class="material-symbols-outlined spinning loading-spinner">refresh</span>
         </div>
-        <div class="cards-grid">
+        <div :class="viewMode === 'cards' ? 'cards-grid' : 'list-view'">
-        <div v-for="topic in filteredTopics" :key="topic.topic_id" class="deal-card">
+        <div v-for="topic in filteredTopics" :key="topic.topic_id" :class="viewMode === 'cards' ? 'deal-card' : 'deal-row'">
           <div class="card-header">
             <div class="title-with-link">
               <a
@@ -384,7 +510,7 @@ export default {
                 :href="topic.Offer.url"
                 target="_blank"
                 class="card-link"
-                title="Open deal"
+                title="Open direct link to deal"
               >
                 <span class="material-symbols-outlined">open_in_new</span>
               </a>
@@ -401,7 +527,6 @@ export default {
               <span v-else>{{ topic.score }}</span>
             </div>
           </div>
-
           <div class="card-meta" v-if="topic.Offer.dealer_name">
             <span
               class="dealer-name dealer-label"
@@ -409,8 +534,7 @@ export default {
               v-html="highlightText(topic.Offer.dealer_name)"
             ></span>
           </div>
-
+          <div class="card-details" v-if="viewMode === 'cards'">
-          <div class="card-details">
             <div class="details-stats">
               <div class="stat">
                 <span class="material-symbols-outlined">visibility</span>
@@ -421,15 +545,19 @@ export default {
                 <span class="stat-value">{{ topic.total_replies }} replies</span>
               </div>
             </div>
-
+            <div class="card-timestamp">First post: {{ formatDate(topic.post_time) }}</div>
             <div class="card-timestamp">Last post: {{ formatDate(topic.last_post_time) }}</div>
           </div>
+          <div class="row-stats" v-if="viewMode === 'list'">
+            <span class="stat-compact">{{ formatDate(topic.post_time) }} - {{ formatDate(topic.last_post_time) }}</span>
+          </div>
         </div>
         </div>
       </div>
     </div>
   </div>
-</template>
+  <InfoOverlay :visible="infoOverlayVisible" @close="toggleInfoOverlay" />
+  </template>
 
 <style scoped>
 .cards-wrapper {

src/components/InfoOverlay.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="info-overlay" v-if="visible" @click.self="closeOverlay">
+    <div class="info-panel">
+        <strong>Source: </strong>
+        <a href="https://github.com/davegallant/rfd-fyi" target="_blank" rel="noopener noreferrer">
+          https://github.com/davegallant/rfd-fyi
+        </a>
+      <h3>Keyboard Shortcuts</h3>
+      <table class="shortcuts-table">
+        <tbody>
+          <tr>
+            <td><strong>r</strong></td>
+            <td>Refresh deals</td>
+          </tr>
+          <tr>
+            <td><strong>s</strong></td>
+            <td>Toggle sort</td>
+          </tr>
+          <tr>
+            <td><strong>v</strong></td>
+            <td>Toggle view mode</td>
+          </tr>
+          <tr>
+            <td><strong>t</strong></td>
+            <td>Toggle theme</td>
+          </tr>
+          <tr>
+            <td><strong>/</strong></td>
+            <td>Filter deals</td>
+          </tr>
+        </tbody>
+      </table>
+      <button class="close-button" @click="closeOverlay">Close</button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "InfoOverlay",
+  props: {
+    visible: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  methods: {
+    closeOverlay() {
+      this.$emit("close");
+    },
+  },
+};
+</script>
+
+<style scoped>
+.info-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.info-panel {
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  border-radius: 8px;
+  padding: 20px;
+  max-width: 400px;
+  width: 90%;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  text-align: center;
+}
+
+.info-panel h2 {
+  margin-top: 0;
+}
+
+.info-panel .shortcuts-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 16px auto;
+  text-align: left;
+  padding-left: 40px;
+  display: table;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.info-panel .shortcuts-table td {
+  padding: 8px;
+  text-align: left;
+  vertical-align: middle;
+  padding-left: 40px;
+  padding-right: 20px;
+}
+
+.close-button {
+  margin-top: 20px;
+  padding: 10px 20px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.close-button:hover {
+  background-color: #0056b3;
+}
+</style>

src/theme.css

@@ -29,9 +29,9 @@
   --border-color-light: #cccccc;
   --border-color-hover: #999999;
   --link-color: #212529;
-  --score-positive-bg: rgb(34, 139, 34);
+  --score-positive-bg: rgb(90, 140, 90);
   --score-positive-text: white;
-  --score-negative-bg: rgb(247, 118, 142);
+  --score-negative-bg: rgb(140, 50, 50);
   --score-negative-text: white;
   --mark-bg: rgba(255, 193, 7, 0.3);
   --shadow-light: rgba(0, 0, 0, 0.05);
@@ -51,8 +51,10 @@
     --border-color-light: #555555;
     --border-color-hover: #777777;
     --link-color: #e0e0e0;
-    --score-positive-bg: rgb(158, 206, 106);
+    --score-positive-bg: rgb(100, 140, 80);
-    --score-positive-text: #1a1a1a;
+    --score-positive-text: white;
+    --score-negative-bg: rgb(120, 45, 45);
+    --score-negative-text: white;
     --mark-bg: rgba(255, 193, 7, 0.4);
     --shadow-light: rgba(255, 255, 255, 0.1);
   }
@@ -71,8 +73,10 @@ html.dark-theme {
   --border-color-light: #555555;
   --border-color-hover: #777777;
   --link-color: #e0e0e0;
-  --score-positive-bg: rgb(158, 206, 106);
+  --score-positive-bg: rgb(100, 140, 80);
-  --score-positive-text: #1a1a1a;
+  --score-positive-text: white;
+  --score-negative-bg: rgb(120, 45, 45);
+  --score-negative-text: white;
   --mark-bg: rgba(255, 193, 7, 0.4);
   --shadow-light: rgba(255, 255, 255, 0.1);
 }
@@ -150,6 +154,88 @@ a:visited {
   align-items: center;
 }
 
+@media (max-width: 768px) {
+  .header-controls {
+    gap: 8px;
+  }
+}
+
+/* ============================================
+   Responsive Visibility
+   ============================================ */
+
+.desktop-only {
+  display: inline-flex;
+}
+
+.mobile-only {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .desktop-only {
+    display: none !important;
+  }
+
+  .mobile-only {
+    display: block;
+  }
+}
+
+/* ============================================
+   Mobile Menu
+   ============================================ */
+
+.mobile-menu-wrapper {
+  position: relative;
+}
+
+.mobile-dropdown {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-color-light);
+  border-radius: 8px;
+  box-shadow: 0 4px 12px var(--shadow-medium);
+  min-width: 180px;
+  z-index: 100;
+  overflow: hidden;
+}
+
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 12px 14px;
+  border: none;
+  background: transparent;
+  color: var(--text-primary);
+  font-size: 14px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  text-align: left;
+}
+
+.dropdown-item:hover {
+  background-color: var(--bg-input);
+}
+
+.dropdown-item:active {
+  background-color: var(--border-color-light);
+}
+
+.dropdown-item:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.dropdown-item .material-symbols-outlined {
+  font-size: 20px;
+  color: var(--text-secondary);
+}
+
 /* ============================================
    Search Input
    ============================================ */
@@ -218,7 +304,7 @@ a:visited {
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  padding: 2px 6px 2px 8px;
+  padding: 4px 8px 4px 10px;
   background-color: var(--border-color-light);
   border-radius: 4px;
   font-size: 12px;
@@ -231,8 +317,8 @@ a:visited {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 16px;
+  width: 14px;
-  height: 16px;
+  height: 14px;
   padding: 0;
   border: none;
   background-color: var(--text-secondary);
@@ -247,7 +333,7 @@ a:visited {
 }
 
 .filter-tag-clear .material-symbols-outlined {
-  font-size: 12px;
+  font-size: 10px;
 }
 
 /* ============================================
@@ -321,6 +407,88 @@ a:visited {
   margin-top: 20px;
 }
 
+/* ============================================
+   List View
+   ============================================ */
+
+.list-view {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 20px;
+}
+
+.deal-row {
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-color-light);
+  border-radius: 6px;
+  padding: 10px 14px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  transition: all 0.2s ease;
+}
+
+.deal-row .card-header {
+  display: contents;
+}
+
+.deal-row:hover {
+  background-color: var(--bg-input);
+  border-color: var(--border-color-hover);
+}
+
+.deal-row .card-meta {
+  margin-bottom: 0;
+  flex-shrink: 0;
+  order: 2;
+}
+
+.deal-row .title-with-link {
+  flex: 1;
+  order: 1;
+}
+
+.deal-row .deal-title {
+  font-size: 14px;
+}
+
+.deal-row .row-stats {
+  order: 3;
+}
+
+.deal-row .score-bubble {
+  min-width: 36px;
+  height: 24px;
+  font-size: 10px;
+  order: 4;
+}
+
+.row-stats {
+  display: flex;
+  gap: 12px;
+  flex-shrink: 0;
+}
+
+.stat-compact {
+  font-size: 11px;
+  color: var(--text-secondary);
+  white-space: nowrap;
+}
+
+@media (max-width: 768px) {
+  .deal-row {
+    flex-wrap: wrap;
+  }
+
+  .row-stats {
+    width: 100%;
+    margin-top: 8px;
+    padding-top: 8px;
+    border-top: 1px solid var(--border-color);
+  }
+}
+
 .deal-card {
   background-color: var(--bg-secondary);
   border: 1.5px solid #aaaaaa;
@@ -400,14 +568,14 @@ a:visited {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 50px;
+  min-width: 40px;
-  height: 40px;
+  height: 28px;
-  border-radius: 6px;
+  border-radius: 4px;
   font-weight: 700;
-  font-size: 12px;
+  font-size: 11px;
   flex-shrink: 0;
   transition: all 0.2s ease;
-  padding: 0 8px;
+  padding: 0 2px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
   border: none;
 }