[STA-175] Filters & Searches for Bundles

FracturedShader · FracturedShader · commit 2ee485bb6189 · 2025-11-01T14:40:20.000-04:00
Added filtering by complete/incomplete and searching to the bundles
page. Searching is as permissive as possible so that searches like
"pantry", "summer", and "egg" all work as expected.

Text searching has the following qualities:
- Matching a room name matches all bundles and items in that room
- If the room isn't matched, matichng a bundle name matches all items in
  that bundle
- If none of the above have matched, match against the item name
- If a bundle is not matched or has no matched items, exclude it
- If a room is not matched or has no matched bundles, exclude it
diff --git a/apps/stardew.app/src/components/cards/bundle-item-card.tsx b/apps/stardew.app/src/components/cards/bundle-item-card.tsx
@@ -5,7 +5,7 @@ import { Dispatch, SetStateAction } from "react";
 import { usePlayers } from "@/contexts/players-context";
 
 import { categoryIcons, goldIcons } from "@/lib/constants";
-import { BundleItemWithLocation } from "@/types/bundles";
+import { BundleItem, BundleItemWithLocation } from "@/types/bundles";
 import { BooleanCard } from "./boolean-card";
 
 interface BundleItemCardProps {
@@ -29,6 +29,23 @@ interface BundleItemCardProps {
 	setPromptOpen?: Dispatch<SetStateAction<boolean>>;
 }
 
+const categoryItems: Record<string, string> = {
+	"-4": "Any Fish",
+	"-5": "Any Egg",
+	"-6": "Any Milk",
+	"-777": "Wild Seeds (Any)",
+};
+
+export function bundleItemName<T extends BundleItem>(item: T): string {
+	if (item.itemID == "-1") {
+		return "Gold";
+	} else if (item.itemID in categoryItems) {
+		return categoryItems[item.itemID];
+	}
+
+	return objects[item.itemID as keyof typeof objects]?.name;
+}
+
 export const BundleItemCard = ({
 	item,
 	show,
@@ -52,13 +69,6 @@ export const BundleItemCard = ({
 	let overrides: Record<string, string | number | boolean | undefined> = {};
 	let unknownItem: Boolean = false;
 
-	const categoryItems: Record<string, string> = {
-		"-4": "Any Fish",
-		"-5": "Any Egg",
-		"-6": "Any Milk",
-		"-777": "Wild Seeds (Any)",
-	};
-
 	if (item.itemID == "-1") {
 		//Special case for handling gold in Vault bundles
 		iconURL = goldIcons[item.itemQuantity.toString()];
diff --git a/apps/stardew.app/src/pages/bundles.tsx b/apps/stardew.app/src/pages/bundles.tsx
@@ -37,7 +37,10 @@ import { PlayerType, usePlayers } from "@/contexts/players-context";
 import { usePreferences } from "@/contexts/preferences-context";
 
 import { AchievementCard } from "@/components/cards/achievement-card";
-import { BundleItemCard } from "@/components/cards/bundle-item-card";
+import {
+	BundleItemCard,
+	bundleItemName,
+} from "@/components/cards/bundle-item-card";
 import { UnblurDialog } from "@/components/dialogs/unblur-dialog";
 import BundleSheet from "@/components/sheets/bundle-sheet";
 import {
@@ -47,7 +50,10 @@ import {
 	AccordionTrigger,
 	AccordionTriggerNoToggle,
 } from "@/components/ui/accordion";
+import { Command, CommandInput } from "@/components/ui/command";
 import { Progress } from "@/components/ui/progress";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { cn } from "@/lib/utils";
 import { useMediaQuery } from "@react-hook/media-query";
 import { IconSettings } from "@tabler/icons-react";
 import clsx from "clsx";
@@ -60,6 +66,12 @@ export const ItemQualityToString = {
 	"3": "Iridium",
 };
 
+const bubbleColors: Record<string, string> = {
+	"0": "border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-950", // unknown or not completed
+	"1": "border-yellow-900 bg-yellow-500/20", // known, but not completed
+	"2": "border-green-900 bg-green-500/20", // completed
+};
+
 type BundleAccordionProps = {
 	bundleWithStatus: BundleWithStatus;
 	children: JSX.Element | JSX.Element[];
@@ -73,6 +85,12 @@ type AccordionSectionProps = {
 	completedCount?: number;
 };
 
+type FilteredBundle = {
+	bundleWithStatus: BundleWithStatus;
+	items: (BundleItem | Randomizer)[];
+	matchesSearch: boolean;
+};
+
 const CommunityCenterRooms: CommunityCenterRoomName[] = [
 	"Pantry",
 	"Crafts Room",
@@ -417,6 +435,11 @@ export default function Bundles() {
 	let [open, setIsOpen] = useState(false);
 	let [object, setObject] = useState<BundleItemWithLocation | null>(null);
 	let [bundles, setBundles] = useState<BundleWithStatus[]>([]);
+	let [completeCount, setCompleteCount] = useState(0);
+	let [incompleteCount, setIncompleteCount] = useState(0);
+	let [filter, setFilter] = useState("all");
+	let [search, setSearch] = useState("");
+
 	const { activePlayer, patchPlayer } = usePlayers();
 
 	function GetActiveBundles(
@@ -477,7 +500,13 @@ export default function Bundles() {
 	}
 
 	useEffect(() => {
-		setBundles(GetActiveBundles(activePlayer));
+		const activeBundles = GetActiveBundles(activePlayer);
+		const _completeCount = activeBundles.filter(BundleCompleted).length;
+		const _incompleteCount = activeBundles.length - _completeCount;
+
+		setBundles(activeBundles);
+		setCompleteCount(_completeCount);
+		setIncompleteCount(_incompleteCount);
 	}, [activePlayer]);
 
 	const getAchievementProgress = (name: string) => {
@@ -563,9 +592,53 @@ export default function Bundles() {
 								);
 							})}
 					</AccordionSection>
+					{/* Filters and Actions Row */}
+					<div className="flex w-full flex-row items-center justify-between">
+						<ToggleGroup
+							variant="outline"
+							type="single"
+							value={filter}
+							onValueChange={(val: string) =>
+								setFilter(val === filter ? "all" : val)
+							}
+							className="gap-2"
+						>
+							<ToggleGroupItem value="0" aria-label="Show Incomplete">
+								<span
+									className={cn(
+										"inline-block h-4 w-4 rounded-full border align-middle",
+										bubbleColors["0"],
+									)}
+								/>
+								<span className="align-middle">
+									Incomplete ({incompleteCount})
+								</span>
+							</ToggleGroupItem>
+							<ToggleGroupItem value="2" aria-label="Show Complete">
+								<span
+									className={cn(
+										"inline-block h-4 w-4 rounded-full border align-middle",
+										bubbleColors["2"],
+									)}
+								/>
+								<span className="align-middle">Complete ({completeCount})</span>
+							</ToggleGroupItem>
+						</ToggleGroup>
+					</div>
+					{/* Search Bar Row */}
+					<div className="mt-2 w-full">
+						<Command className="w-full border border-b-0 dark:border-neutral-800">
+							<CommandInput
+								onValueChange={(v) => setSearch(v?.toLowerCase())}
+								placeholder="Search Bundles"
+							/>
+						</Command>
+					</div>
 					{CommunityCenterRooms.map((roomName: CommunityCenterRoomName) => {
 						let roomBundles: BundleWithStatus[] = [];
 						let completedCount = 0;
+						const roomMatched =
+							!search || roomName.toLowerCase().includes(search);
 						if (activePlayer && Array.isArray(activePlayer.bundles)) {
 							roomBundles = activePlayer.bundles.filter((bundleWithStatus) => {
 								if (bundleWithStatus?.bundle) {
@@ -584,13 +657,64 @@ export default function Bundles() {
 									bundleWithStatus.bundle.areaName === roomName,
 							);
 						}
+						const filteredBundles: FilteredBundle[] = roomBundles
+							.filter((bundleWithStatus) => {
+								switch (filter) {
+									case "0":
+										return !BundleCompleted(bundleWithStatus);
+									case "2":
+										return BundleCompleted(bundleWithStatus);
+									case "all":
+									default:
+										return true;
+								}
+							})
+							.map((bundleWithStatus): FilteredBundle => {
+								const bundleMatched =
+									roomMatched ||
+									bundleWithStatus.bundle.name.toLowerCase().includes(search);
+
+								return {
+									bundleWithStatus: bundleWithStatus,
+									items: bundleWithStatus.bundle.items
+										.filter((_, idx) => {
+											switch (filter) {
+												case "0":
+													return !bundleWithStatus.bundleStatus[idx];
+												case "2":
+													return bundleWithStatus.bundleStatus[idx];
+												case "all":
+												default:
+													return true;
+											}
+										})
+										.filter((item) => {
+											if (bundleMatched) {
+												return true;
+											}
+
+											return (
+												!isRandomizer(item) &&
+												bundleItemName(item).toLowerCase().includes(search)
+											);
+										}),
+									matchesSearch: bundleMatched,
+								};
+							})
+							.filter((filteredBundle) => filteredBundle.items.length !== 0);
+
+						if (filteredBundles.length === 0) {
+							return;
+						}
+
 						return (
 							<AccordionSection
 								key={roomName}
 								title={roomName}
 								completedCount={completedCount}
 							>
-								{roomBundles.map((bundleWithStatus: BundleWithStatus) => {
+								{filteredBundles.map((filteredBundle: FilteredBundle) => {
+									const bundleWithStatus = filteredBundle.bundleWithStatus;
 									return (
 										<BundleAccordion
 											key={bundleWithStatus.bundle.localizedName}
@@ -606,32 +730,30 @@ export default function Bundles() {
 											})}
 											onChangeBundle={SwapBundle}
 										>
-											{bundleWithStatus.bundle.items.map ? (
-												bundleWithStatus.bundle.items.map(
-													(item, index: number) => {
-														if (isRandomizer(item)) {
-															// Guard clause for type coercion
-															return <></>;
-														}
-														const BundleItemWithLocation: BundleItemWithLocation =
-															{
-																...item,
-																index: index,
-																bundleID: bundleWithStatus.bundle.name,
-															};
-														return (
-															<BundleItemCard
-																key={item.itemID + "-" + index}
-																item={BundleItemWithLocation}
-																setIsOpen={setIsOpen}
-																completed={bundleWithStatus.bundleStatus[index]}
-																setObject={setObject}
-																show={show}
-																setPromptOpen={setPromptOpen}
-															/>
-														);
-													},
-												)
+											{filteredBundle.items ? (
+												filteredBundle.items.map((item, index: number) => {
+													if (isRandomizer(item)) {
+														// Guard clause for type coercion
+														return <></>;
+													}
+													const BundleItemWithLocation: BundleItemWithLocation =
+														{
+															...item,
+															index: index,
+															bundleID: bundleWithStatus.bundle.name,
+														};
+													return (
+														<BundleItemCard
+															key={item.itemID + "-" + index}
+															item={BundleItemWithLocation}
+															setIsOpen={setIsOpen}
+															completed={bundleWithStatus.bundleStatus[index]}
+															setObject={setObject}
+															show={show}
+															setPromptOpen={setPromptOpen}
+														/>
+													);
+												})
 											) : (
 												<>error</>
 											)}
