👁️
disable legality filter when no field to check
+24
-7
+24
-7
src/components/deck/CardSearchAutocomplete.tsx
+24
-7
src/components/deck/CardSearchAutocomplete.tsx
···
3
3
import { toast } from "sonner";
4
4
import { getPrimaryFace } from "@/lib/card-faces";
5
5
import { type Deck, getCommanderColorIdentity } from "@/lib/deck-types";
6
+
import { getFormatConfig } from "@/lib/deck-validation/presets";
6
7
import {
7
8
getCardByIdQueryOptions,
8
9
unifiedSearchQueryOptions,
···
46
47
const { value: debouncedSearch } = useDebounce(inputValue, 300);
47
48
const toggleId = useId();
48
49
50
+
const formatHasLegality = Boolean(
51
+
format && getFormatConfig(format)?.legalityField,
52
+
);
53
+
49
54
// Calculate search restrictions
50
55
const restrictions: SearchRestrictions | undefined = useMemo(() => {
51
56
if (!legalityFilterEnabled || !format) return undefined;
57
+
58
+
const legalityField = getFormatConfig(format)?.legalityField;
59
+
if (!legalityField) return undefined;
52
60
53
61
const hasCommanderColorIdentity =
54
62
format === "commander" || format === "paupercommander";
···
61
69
: undefined;
62
70
63
71
return {
64
-
format,
72
+
format: legalityField,
65
73
colorIdentity,
66
74
};
67
75
}, [legalityFilterEnabled, format, deck, queryClient]);
···
214
222
<div className="flex items-center gap-2 flex-shrink-0">
215
223
<label
216
224
htmlFor={toggleId}
217
-
className="text-sm text-gray-700 dark:text-zinc-300 whitespace-nowrap"
225
+
className={`text-sm whitespace-nowrap ${
226
+
formatHasLegality
227
+
? "text-gray-700 dark:text-zinc-300"
228
+
: "text-gray-400 dark:text-zinc-500"
229
+
}`}
218
230
>
219
231
Legal only
220
232
</label>
···
222
234
id={toggleId}
223
235
type="button"
224
236
role="switch"
225
-
aria-checked={legalityFilterEnabled}
237
+
aria-checked={legalityFilterEnabled && formatHasLegality}
238
+
disabled={!formatHasLegality}
226
239
onClick={() => setLegalityFilterEnabled(!legalityFilterEnabled)}
227
240
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
228
-
legalityFilterEnabled
229
-
? "bg-cyan-600"
230
-
: "bg-gray-300 dark:bg-zinc-600"
241
+
!formatHasLegality
242
+
? "bg-gray-300 dark:bg-zinc-600 opacity-50 cursor-not-allowed"
243
+
: legalityFilterEnabled
244
+
? "bg-cyan-600"
245
+
: "bg-gray-300 dark:bg-zinc-600"
231
246
}`}
232
247
>
233
248
<span
234
249
className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
235
-
legalityFilterEnabled ? "translate-x-6" : "translate-x-1"
250
+
legalityFilterEnabled && formatHasLegality
251
+
? "translate-x-6"
252
+
: "translate-x-1"
236
253
}`}
237
254
/>
238
255
</button>