-
- {coverId ? (
-
- ) : (
-
- No Cover
-
- )}
-
+ {gameUrl ? (
+
+ {coverId ? (
+
+ ) : (
+
+ No Cover
+
+ )}
+
+ ) : (
+
+ {coverId ? (
+
+ ) : (
+
+ No Cover
+
+ )}
+
+ )}
{title}
diff --git a/src/pages/Downloads.tsx b/src/pages/Downloads.tsx
new file mode 100644
index 0000000..c719b98
--- /dev/null
+++ b/src/pages/Downloads.tsx
@@ -0,0 +1,182 @@
+import { useDownloads } from "@/context/DownloadContext";
+import { Button } from "@/components/tailwind/button";
+import { Heading } from "@tw/heading";
+import { Divider } from "@tw/divider";
+import { Badge } from "@/components/tailwind/badge";
+import {
+ ArrowDownTrayIcon,
+ XMarkIcon,
+ CheckCircleIcon,
+ ExclamationTriangleIcon,
+} from "@heroicons/react/24/outline";
+
+export default function Downloads() {
+ const {
+ downloads,
+ cancelDownload,
+ formatBytes,
+ formatSpeed,
+ } = useDownloads();
+
+ const downloadArray = Object.values(downloads);
+ const activeDownloads = downloadArray.filter(
+ (d) => d.status === "downloading"
+ );
+ const completedDownloads = downloadArray.filter(
+ (d) => d.status === "completed"
+ );
+ const failedDownloads = downloadArray.filter(
+ (d) => d.status === "error" || d.status === "aborted"
+ );
+
+ return (
+
+
+
Downloads
+
+ Manage your game downloads for the GameVault desktop application
+
+
+
+
+
+ {/* Active Downloads */}
+ {activeDownloads.length > 0 && (
+ <>
+
+
+
+ Active Downloads ({activeDownloads.length})
+
+
+
+ {activeDownloads.map((download) => (
+
+
+
+
+ {download.filename}
+
+
+
+ {formatBytes(download.received)} /{" "}
+ {download.total ? formatBytes(download.total) : "Unknown"}
+
+ {download.speedBps !== undefined && (
+ <>
+ •
+ {formatSpeed(download.speedBps)}
+
+ )}
+
+
+
+
+
+
+ {download.progress?.toFixed(1)}%
+
+
+ ))}
+
+
+ )}
+
+ {/* Completed Downloads */}
+ {completedDownloads.length > 0 && (
+ <>
+
+
+
+ Completed ({completedDownloads.length})
+
+
+
+ {completedDownloads.map((download) => (
+
+
+
+
+ {download.filename}
+
+
+ {download.total ? formatBytes(download.total) : "Unknown size"}
+
+
+
Completed
+
+
+ ))}
+
+
+ )}
+
+ {/* Failed Downloads */}
+ {failedDownloads.length > 0 && (
+ <>
+
+
+
+ Failed ({failedDownloads.length})
+
+
+
+ {failedDownloads.map((download) => (
+
+
+
+
+ {download.filename}
+
+ {download.error && (
+
+ {download.error}
+
+ )}
+
+
+ {download.status === "aborted" ? "Cancelled" : "Failed"}
+
+
+
+ ))}
+
+
+ )}
+
+ {/* Empty State */}
+ {downloadArray.length === 0 && (
+
+
+
+ No downloads
+
+
+ Start downloading games from your library
+
+
+ )}
+
+ );
+}
diff --git a/src/pages/GameView.tsx b/src/pages/GameView.tsx
index 5081993..2eca0e1 100644
--- a/src/pages/GameView.tsx
+++ b/src/pages/GameView.tsx
@@ -3,9 +3,8 @@ import { Progress, ProgressStateEnum } from "@/api/models/Progress";
import { Media } from "@/components/Media";
import MediaSlider from "@/components/MediaSlider";
import { useAuth } from "@/context/AuthContext";
+import { useAlertDialog } from "@/context/AlertDialogContext";
import { Button } from "@tw/button";
-import { Divider } from "@tw/divider";
-import { Heading } from "@tw/heading"; // retained for potential future use (removed on screen)
import { Listbox, ListboxOption, ListboxLabel } from "@tw/listbox";
import Card from "@/components/Card";
import { useDownloads } from "@/context/DownloadContext";
@@ -18,6 +17,7 @@ import Markdown from "react-markdown";
import { Dropdown, DropdownButton, DropdownItem, DropdownLabel, DropdownMenu } from "@tw/dropdown";
import { Alert, AlertTitle } from "@tw/alert";
import { GameSettings } from "@/components/admin/GameSettings";
+import { isTauriApp } from "@/utils/tauri";
export default function GameView() {
const { id } = useParams<{ id: string }>();
@@ -29,10 +29,12 @@ export default function GameView() {
const [bookmarkBusy, setBookmarkBusy] = useState(false);
const [bookmarked, setBookmarked] = useState(false);
const { startDownload } = useDownloads() as any;
+ const { showAlert } = useAlertDialog();
const [progressState, setProgressState] = useState
(null);
const [progressUpdating, setProgressUpdating] = useState(false);
const insertedPlaceholderRef = useRef(false);
const [settingsOpen, setSettingsOpen] = useState(false);
+ const isTauri = isTauriApp();
useEffect(() => {
if (!serverUrl || !numericId || Number.isNaN(numericId)) return;
@@ -169,22 +171,51 @@ export default function GameView() {
}
}, [serverUrl, game, currentUserId, bookmarked, authFetch, bookmarkBusy]);
- const [copiedAlertOpen, setCopiedAlertOpen] = useState(false);
- const copiedTimeoutRef = useRef(null);
const handleShare = useCallback(() => {
try { navigator.clipboard.writeText(window.location.href); } catch {}
- // Show ephemeral alert
- setCopiedAlertOpen(true);
- if (copiedTimeoutRef.current) window.clearTimeout(copiedTimeoutRef.current);
- copiedTimeoutRef.current = window.setTimeout(() => setCopiedAlertOpen(false), 1800);
- }, []);
- useEffect(() => () => { if (copiedTimeoutRef.current) window.clearTimeout(copiedTimeoutRef.current); }, []);
+ // Show global alert notification
+ showAlert({
+ title: "Link copied"
+ });
+ }, [showAlert]);
- const handleDownload = useCallback(() => {
+ const handleDirectDownload = useCallback(() => {
if (!game) return;
- // Use id + title for filename
startDownload(game.id, `${title || game.title}.zip`);
- }, [game, startDownload, title]);
+
+ // Show global alert notification
+ showAlert({
+ title: `Added ${title || game.title} to the download queue`
+ });
+ }, [game, startDownload, title, showAlert]);
+
+ const handleTauriDownload = useCallback(async () => {
+ if (!game) return;
+
+ try {
+ // Get download path from localStorage
+ const downloadPath = localStorage.getItem('tauri_download_path');
+ if (!downloadPath) {
+ alert('Please select a download location in Settings first.');
+ return;
+ }
+
+ // Start download tracking
+ startDownload(game.id, `${title || game.title}.zip`);
+
+ // Show global alert notification
+ showAlert({
+ title: `Added ${title || game.title} to the download queue`
+ });
+ } catch (error) {
+ console.error('Error starting Tauri download:', error);
+ }
+ }, [game, startDownload, title, showAlert]);
+
+ const handleClientDownload = useCallback(() => {
+ if (!game) return;
+ window.location.href = `gamevault://install?gameid=${game.id}`;
+ }, [game]);
const PROGRESS_LABEL: Record = {
UNPLAYED: "Unplayed",
@@ -278,29 +309,41 @@ export default function GameView() {
{/* Added flex-wrap to allow buttons to wrap on extremely narrow viewports, preventing horizontal overflow that could push the media slider and cause cutoff */}
-
-
-
-
-
- Direct Download
-
- {
- if (!game) return; window.location.href = `gamevault://install?gameid=${game.id}`;
+
+ ) : (
+
+ {
+ e.preventDefault();
+ e.stopPropagation();
}}
>
- Open in Client
-
-
-
+
+
+
+
+ Direct Download
+
+
+ Open in Client
+
+
+
+ )}
)}
- {/* Ephemeral 'Link copied' alert */}
-
{ if (!open) setCopiedAlertOpen(false); }}
- variant="toast"
- size="xs"
- className="select-none"
- >
- Link copied
-
{/* Game Settings Modal */}
{settingsOpen && game && (
diff --git a/src/pages/Library.tsx b/src/pages/Library.tsx
index 45c38ff..c0ff069 100644
--- a/src/pages/Library.tsx
+++ b/src/pages/Library.tsx
@@ -350,68 +350,75 @@ export default function Library() {
urlInitializedRef.current = true;
}, [getParamValues, isBookmark, isEarlyAccess, isGameType, isProgressState]);
- // Sync all filters into URL search params for shareable links
+ // Sync all filters into URL search params for shareable links (debounced)
useEffect(() => {
if (typeof window === "undefined") return;
if (!urlInitializedRef.current) return;
- const url = new URL(window.location.href);
- const params = url.searchParams;
+ const timeoutId = setTimeout(() => {
+ const url = new URL(window.location.href);
+ const params = url.searchParams;
- if (search.trim().length > 0) params.set("q", search.trim());
- else params.delete("q");
+ if (search.trim().length > 0) params.set("q", search.trim());
+ else params.delete("q");
- if (sortBy !== "sort_title") params.set("sort", sortBy);
- else params.delete("sort");
+ if (sortBy !== "sort_title") params.set("sort", sortBy);
+ else params.delete("sort");
- if (order !== "ASC") params.set("order", order);
- else params.delete("order");
+ if (order !== "ASC") params.set("order", order);
+ else params.delete("order");
- if (bookmarkFilter !== "all") params.set("bookmarked", bookmarkFilter);
- else params.delete("bookmarked");
+ if (bookmarkFilter !== "all") params.set("bookmarked", bookmarkFilter);
+ else params.delete("bookmarked");
- setParamValues(
- params,
- "types",
- selectedGameTypes
- .map((i) => String(i.id))
- .filter((v): v is GamevaultGameTypeEnum => isGameType(v)),
- );
- setParamValues(
- params,
- "tags",
- selectedTags.map((t) => t.name),
- );
- setParamValues(
- params,
- "genres",
- selectedGenres.map((g) => g.name),
- );
- setParamValues(
- params,
- "developers",
- selectedDevelopers.map((d) => d.name),
- );
- setParamValues(
- params,
- "publishers",
- selectedPublishers.map((p) => p.name),
- );
+ setParamValues(
+ params,
+ "types",
+ selectedGameTypes
+ .map((i) => String(i.id))
+ .filter((v): v is GamevaultGameTypeEnum => isGameType(v)),
+ );
+ setParamValues(
+ params,
+ "tags",
+ selectedTags.map((t) => t.name),
+ );
+ setParamValues(
+ params,
+ "genres",
+ selectedGenres.map((g) => g.name),
+ );
+ setParamValues(
+ params,
+ "developers",
+ selectedDevelopers.map((d) => d.name),
+ );
+ setParamValues(
+ params,
+ "publishers",
+ selectedPublishers.map((p) => p.name),
+ );
+
+ if (selectedGameState) params.set("state", selectedGameState);
+ else params.delete("state");
- if (selectedGameState) params.set("state", selectedGameState);
- else params.delete("state");
+ if (releaseDateFrom) params.set("releasedAfter", releaseDateFrom);
+ else params.delete("releasedAfter");
- if (releaseDateFrom) params.set("releasedAfter", releaseDateFrom);
- else params.delete("releasedAfter");
+ if (releaseDateTo) params.set("releasedBefore", releaseDateTo);
+ else params.delete("releasedBefore");
- if (releaseDateTo) params.set("releasedBefore", releaseDateTo);
- else params.delete("releasedBefore");
+ if (earlyAccess !== "all") params.set("earlyAccess", earlyAccess);
+ else params.delete("earlyAccess");
- if (earlyAccess !== "all") params.set("earlyAccess", earlyAccess);
- else params.delete("earlyAccess");
+ // Only update URL if it actually changed to avoid rate-limiting errors
+ const newUrl = url.toString();
+ if (newUrl !== window.location.href) {
+ window.history.replaceState({}, "", newUrl);
+ }
+ }, 300);
- // We intentionally do not push to history each keystroke of search for cleanliness
- window.history.replaceState({}, "", url.toString());
+ return () => clearTimeout(timeoutId);
}, [
bookmarkFilter,
earlyAccess,
diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
index 04ddb11..b87b3a5 100644
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -5,8 +5,12 @@ import { useDownloads } from "@/context/DownloadContext";
import { SwitchField, Switch } from "@tw/switch";
import { Label } from "@/components/tailwind/fieldset";
import { useEffect, useState } from "react";
+import { isTauriApp } from "@/utils/tauri";
+import { Button } from "@/components/tailwind/button";
+import { FolderIcon } from "@heroicons/react/24/outline";
const RETAIN_KEY = 'app_retain_library_prefs';
+const DOWNLOAD_PATH_KEY = 'tauri_download_path';
export default function Settings() {
const { speedLimitKB, setSpeedLimitKB, formatSpeed, formatLimit } = useDownloads() as any;
@@ -18,10 +22,54 @@ export default function Settings() {
return v === '1';
} catch { return false; }
});
+ const [downloadPath, setDownloadPath] = useState
(() => {
+ try {
+ return localStorage.getItem(DOWNLOAD_PATH_KEY) || '';
+ } catch { return ''; }
+ });
+ const isTauri = isTauriApp();
+
useEffect(() => {
try { localStorage.setItem(RETAIN_KEY, retainLibraryPrefs ? '1' : '0'); } catch {}
}, [retainLibraryPrefs]);
+ const handleSelectDownloadFolder = async (e: React.MouseEvent) => {
+ e.preventDefault();
+ e.stopPropagation();
+ console.log('=== Browse button clicked ===');
+ console.log('isTauri:', isTauri);
+ if (!isTauri) {
+ console.error('Not in Tauri app, cannot select folder');
+ return;
+ }
+ try {
+ console.log('Importing dialog module...');
+ const { open } = await import('@tauri-apps/plugin-dialog');
+ console.log('Dialog module imported successfully');
+ console.log('Opening folder picker...');
+ const selected = await open({
+ directory: true,
+ multiple: false,
+ title: 'Select Download Directory',
+ });
+ console.log('Selected path:', selected);
+ if (selected && typeof selected === 'string') {
+ console.log('Setting download path to:', selected);
+ console.log('Path type:', typeof selected);
+ console.log('Path length:', selected.length);
+ console.log('Path characters:', selected.split('').map((c, i) => `${i}: '${c}' (${c.charCodeAt(0)})`).join(', '));
+ setDownloadPath(selected);
+ localStorage.setItem(DOWNLOAD_PATH_KEY, selected);
+ console.log('Download path saved to localStorage');
+ console.log('Verifying saved path:', localStorage.getItem(DOWNLOAD_PATH_KEY));
+ } else {
+ console.log('No folder selected or invalid selection');
+ }
+ } catch (error) {
+ console.error('Error selecting download folder:', error);
+ }
+ };
+
return (
Settings
@@ -29,32 +77,58 @@ export default function Settings() {
Downloads
-
-