Lobo_Corp/ToBePlayed-Frontend
Public Access
3
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(library): add the merge duplicate dialog
Build, Test & Push Frontend / quality-check (push) Successful in 18s
Details
Build, Test & Push Frontend / docker (push) Successful in 24s
Details

Browse Source
This commit is contained in:
lobo committed 2026-09-28 11:25:45 +02:00
1 parent 01ae372b2d
commit 78ba0700c8
10 files changed
+355 -84
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/AddGamePanel.jsx
+5 -82
View File
@@ -1,22 +1,19 @@
import {useEffect, useState} from 'react';
import {useState} from 'react';
import {useNavigate} from 'react-router-dom';
import {useTranslation} from 'react-i18next';
import {toast} from 'sonner';
import {ArrowLeft, Loader2, Plus, Search, X} from 'lucide-react';
import {ArrowLeft, Loader2, Plus, X} from 'lucide-react';
import {Badge} from '@/components/ui/badge';
import {Button} from '@/components/ui/button';
import {Card} from '@/components/ui/card';
import {Input} from '@/components/ui/input';
import {Label} from '@/components/ui/label';
import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/components/ui/select';
import GameCover from './GameCover.jsx';
import GameSearch from './GameSearch.jsx';
import useSessionExpired from '../hooks/useSessionExpired.js';
import {GAME_STATUSES} from '../utils/backlog.js';
import {addGame, hoursToMinutes, searchGames} from '../utils/manualGames.js';
const SEARCH_DEBOUNCE_MS = 400;
const MIN_QUERY = 2;
import {addGame, hoursToMinutes} from '../utils/manualGames.js';
/**
* Search IGDB and add a game the user owns outside Steam, e.g. on PlayStation or Switch.
@@ -26,44 +23,8 @@ export default function AddGamePanel({onClose}) {
const navigate = useNavigate();
const expireSession = useSessionExpired();
const [query, setQuery] = useState('');
// idle | loading | done | unavailable | failed
const [searchState, setSearchState] = useState('idle');
const [results, setResults] = useState([]);
const [picked, setPicked] = useState(null);
useEffect(() => {
const trimmed = query.trim();
if (trimmed.length < MIN_QUERY) {
setSearchState('idle');
setResults([]);
return undefined;
}
const controller = new AbortController();
const timer = setTimeout(async () => {
setSearchState('loading');
try {
const response = await searchGames(trimmed, controller.signal);
if (response.status === 401) {
expireSession();
return;
}
if (!response.ok) {
setSearchState('failed');
return;
}
const data = await response.json();
setResults(data.results ?? []);
setSearchState(data.available ? 'done' : 'unavailable');
} catch (err) {
if (err.name !== 'AbortError') setSearchState('failed');
}
}, SEARCH_DEBOUNCE_MS);
return () => {
clearTimeout(timer);
controller.abort();
};
}, [query, expireSession]);
return (
<Card className="p-5 gap-4">
<div className="flex items-center justify-between gap-3">
@@ -81,45 +42,7 @@ export default function AddGamePanel({onClose}) {
) : (
<>
<p className="text-sm text-muted-foreground">{t('MANUAL_GAME.ADD_HINT')}</p>
<div className="relative">
<Search className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"/>
<Input type="search" autoFocus value={query} maxLength={100} className="pl-8"
placeholder={t('MANUAL_GAME.SEARCH_PLACEHOLDER')}
aria-label={t('MANUAL_GAME.SEARCH_PLACEHOLDER')}
onChange={(e) => setQuery(e.target.value)}/>
</div>
{searchState === 'loading' && (
<p className="flex items-center gap-2 text-sm text-muted-foreground">
<Loader2 className="size-4 animate-spin"/>{t('MANUAL_GAME.SEARCHING')}
</p>
)}
{searchState === 'unavailable' && <p className="text-sm text-muted-foreground">{t('MANUAL_GAME.UNAVAILABLE')}</p>}
{searchState === 'failed' && <p className="text-sm text-destructive">{t('MANUAL_GAME.SEARCH_FAILED')}</p>}
{searchState === 'done' && results.length === 0 && (
<p className="text-sm text-muted-foreground">{t('MANUAL_GAME.NO_HITS')}</p>
)}
{searchState === 'done' && results.length > 0 && (
<ul className="divide-y rounded-md border">
{results.map((hit) => (
<li key={hit.igdbId}>
<button type="button" disabled={hit.inLibrary} onClick={() => setPicked(hit)}
className="flex w-full items-center gap-3 px-3 py-2 text-left transition-colors hover:bg-muted/50 disabled:cursor-not-allowed disabled:opacity-60">
<GameCover appid={hit.appid} imageUrl={hit.imageUrl} className="w-20 shrink-0"/>
<span className="min-w-0 flex-1">
<span className="block truncate font-medium">
{hit.name}{hit.year ? ` (${hit.year})` : ''}
</span>
<span className="block truncate text-xs text-muted-foreground">
{hit.platforms.join(' · ')}
</span>
</span>
{hit.inLibrary && <Badge variant="secondary">{t('MANUAL_GAME.IN_LIBRARY')}</Badge>}
</button>
</li>
))}
</ul>
)}
<GameSearch query={query} onQueryChange={setQuery} onPick={setPicked} blockInLibrary/>
</>
)}
</Card>