Update CHANGELOG for version 16.2.1 and refactor GameCard and Community components to use Link for navigation

Author: Alfagun74

CHANGELOG.md

@@ -1,5 +1,11 @@
 # GameVault Frontend Changelog
 
+## 16.2.1
+
+### Changes
+
+- [#6](https://github.com/Phalcode/gamevault-frontend/issues/6) - Use proper href links on game cards and community progress list for better accessibility (middle-click/right-click to open in new tab)
+
 ## 16.2.0
 
 ### Changes

src/components/GameCard.tsx

@@ -17,7 +17,7 @@ import {
 } from "@tw/dropdown";
 import clsx from "clsx";
 import { useCallback, useMemo, useState, useEffect } from "react";
-import { useNavigate } from "react-router";
+import { Link } from "react-router";
 
 export function GameCard({ game }: { game: GamevaultGame }) {
   const { serverUrl, user, authFetch } = useAuth();
@@ -107,16 +107,7 @@ export function GameCard({ game }: { game: GamevaultGame }) {
     [game.id],
   );
 
-  const navigate = useNavigate();
-
-  const handleOpenGameView = useCallback(
-    (e: React.MouseEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
-      navigate(`/library/${game.id}`);
-    },
-    [navigate, game.id],
-  );
+  const gameViewUrl = `/library/${game.id}`;
 
   const handleOpenSettings = useCallback(
     (e: React.MouseEvent) => {
@@ -129,12 +120,12 @@ export function GameCard({ game }: { game: GamevaultGame }) {
 
   return (
     <>
-    <div
+    <Link
+      to={gameViewUrl}
       className={clsx(
         "group flex flex-col rounded-xl bg-zinc-100 dark:bg-zinc-800 shadow-sm ring-1 ring-zinc-950/10 dark:ring-white/5 overflow-hidden focus:outline-none focus:ring-2 focus:ring-indigo-500",
         "transition-colors hover:bg-zinc-200/60 dark:hover:bg-zinc-700/70 cursor-pointer",
       )}
-      tabIndex={0}
     >
       <div className="relative aspect-[3/4] w-full bg-bg-muted flex items-center justify-center overflow-hidden">
         {coverId ? (
@@ -148,10 +139,9 @@ export function GameCard({ game }: { game: GamevaultGame }) {
             className="h-full w-full object-contain rounded-none"
             square
             alt={localGame.title}
-            onClick={handleOpenGameView}
           />
         ) : (
-          <div onClick={handleOpenGameView} className="text-xs text-fg-muted">
+          <div className="text-xs text-fg-muted">
             No Cover
           </div>
         )}
@@ -226,7 +216,7 @@ export function GameCard({ game }: { game: GamevaultGame }) {
           </p>
         )}
       </div>
-    </div>
+    </Link>
       {settingsOpen && (
         <GameSettings
           game={game}

src/pages/Community.tsx

@@ -5,13 +5,12 @@ import { Divider } from "@tw/divider";
 import { Heading } from "@tw/heading";
 import { Listbox, ListboxLabel, ListboxOption } from "@tw/listbox";
 import { useEffect, useMemo, useState } from "react";
-import { useNavigate } from "react-router";
+import { Link } from "react-router";
 import { GamevaultUser } from "../api";
 import { ROLE_LABELS } from "@/utils/roles";
 
 export default function Community() {
   const { serverUrl, authFetch, user: loggedIn } = useAuth();
-  const navigate = useNavigate();
   const [users, setUsers] = useState<GamevaultUser[]>([]);
   const [currentUsername, setCurrentUsername] = useState<string>("");
   const [loading, setLoading] = useState<boolean>(false);
@@ -282,52 +281,60 @@ export default function Community() {
                   const coverId = game ? getGameCoverMediaId(game) : null;
                   const key = p.id ?? `${(game && game.id) || "g"}-${idx}`;
                   const hours = minutes / 60;
-                  const openGame = () => {
-                    if (!game?.id) return;
-                    const base = (serverUrl || "").replace(/\/+$/, "");
-                    if (base) {
-                      window.location.href = `${base}/library/${game.id}`;
-                    } else {
-                      navigate(`/library/${game.id}`);
-                    }
-                  };
-                  const onKey: React.KeyboardEventHandler<HTMLDivElement> = (e) => {
-                    if (e.key === 'Enter' || e.key === ' ') {
-                      e.preventDefault();
-                      openGame();
-                    }
-                  };
+                  const gameUrl = game?.id ? `/library/${game.id}` : undefined;
                   return (
                     <div
                       key={String(key)}
                       className="flex items-center gap-4 p-3"
                     >
-                      <div
-                        className="shrink-0 cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500 rounded-lg"
-                        role="button"
-                        tabIndex={0}
-                        onClick={openGame}
-                        onKeyDown={onKey}
-                        title={title}
-                      >
-                        {coverId ? (
-                          <Media
-                            media={{ id: coverId } as any}
-                            width={48}
-                            height={64}
-                            className="rounded-lg"
-                            square
-                            alt={title}
-                          />
-                        ) : (
-                          <div
-                            className="rounded-lg bg-zinc-200 dark:bg-zinc-800 flex items-center justify-center text-[10px] text-zinc-600 dark:text-zinc-400"
-                            style={{ width: 48, height: 64 }}
-                          >
-                            No Cover
-                          </div>
-                        )}
-                      </div>
+                      {gameUrl ? (
+                        <Link
+                          to={gameUrl}
+                          className="shrink-0 focus:outline-none focus:ring-2 focus:ring-indigo-500 rounded-lg"
+                          title={title}
+                        >
+                          {coverId ? (
+                            <Media
+                              media={{ id: coverId } as any}
+                              width={48}
+                              height={64}
+                              className="rounded-lg"
+                              square
+                              alt={title}
+                            />
+                          ) : (
+                            <div
+                              className="rounded-lg bg-zinc-200 dark:bg-zinc-800 flex items-center justify-center text-[10px] text-zinc-600 dark:text-zinc-400"
+                              style={{ width: 48, height: 64 }}
+                            >
+                              No Cover
+                            </div>
+                          )}
+                        </Link>
+                      ) : (
+                        <div
+                          className="shrink-0 rounded-lg"
+                          title={title}
+                        >
+                          {coverId ? (
+                            <Media
+                              media={{ id: coverId } as any}
+                              width={48}
+                              height={64}
+                              className="rounded-lg"
+                              square
+                              alt={title}
+                            />
+                          ) : (
+                            <div
+                              className="rounded-lg bg-zinc-200 dark:bg-zinc-800 flex items-center justify-center text-[10px] text-zinc-600 dark:text-zinc-400"
+                              style={{ width: 48, height: 64 }}
+                            >
+                              No Cover
+                            </div>
+                          )}
+                        </div>
+                      )}
                       <div className="min-w-0 flex-1">
                         <div className="text-sm font-medium truncate">
                           {title}