|
| 1 | +import { Link } from "@tanstack/react-router"; |
| 2 | +import { useEffect, useState } from "react"; |
| 3 | +import { useQuery, keepPreviousData } from "@tanstack/react-query"; |
| 4 | +import { Flame, Network, Search } from "lucide-react"; |
| 5 | +import { browseDetailFn } from "../../server/factorio"; |
| 6 | +import { recordRecent } from "../../lib/recents"; |
| 7 | +import { Icon } from "../../lib/icons"; |
| 8 | +import { Button } from "#/components/ui/button.tsx"; |
| 9 | +import { Callout } from "#/components/ui/callout.tsx"; |
| 10 | +import { EmptyState } from "#/components/empty-state.tsx"; |
| 11 | +import { FilterInput } from "#/components/filter-input.tsx"; |
| 12 | +import { Skeleton } from "#/components/ui/skeleton.tsx"; |
| 13 | +import { Segmented } from "#/components/ui/segmented.tsx"; |
| 14 | +import { FlowStaleCallout } from "./flow-stale-callout.tsx"; |
| 15 | +import { RecipeList } from "./recipe-list.tsx"; |
| 16 | + |
| 17 | +type Kind = "item" | "fluid"; |
| 18 | + |
| 19 | +/** Full producer/consumer explorer for one good. Shared by the Browse page and |
| 20 | + * the global Alt+Click dialog so both surfaces expose the same decisions. */ |
| 21 | +export function GoodDetail({ |
| 22 | + name, |
| 23 | + onPick, |
| 24 | + className = "", |
| 25 | + variant = "browse", |
| 26 | +}: { |
| 27 | + name?: string; |
| 28 | + onPick: (name: string) => void; |
| 29 | + className?: string; |
| 30 | + variant?: "browse" | "dialog"; |
| 31 | +}) { |
| 32 | + const [recipeQuery, setRecipeQuery] = useState(""); |
| 33 | + const [side, setSide] = useState<"recipes" | "uses">("recipes"); |
| 34 | + useEffect(() => { |
| 35 | + setRecipeQuery(""); |
| 36 | + setSide("recipes"); |
| 37 | + }, [name]); |
| 38 | + const detail = useQuery({ |
| 39 | + queryKey: ["browseDetail", name], |
| 40 | + queryFn: () => browseDetailFn({ data: name! }), |
| 41 | + enabled: !!name, |
| 42 | + placeholderData: keepPreviousData, |
| 43 | + }); |
| 44 | + |
| 45 | + const data = detail.data; |
| 46 | + useEffect(() => { |
| 47 | + if (!data || data.name !== name) return; |
| 48 | + recordRecent({ |
| 49 | + type: "good", |
| 50 | + name: data.name, |
| 51 | + goodKind: data.kind as Kind, |
| 52 | + display: data.display ?? data.name, |
| 53 | + }); |
| 54 | + }, [data, name]); |
| 55 | + |
| 56 | + return ( |
| 57 | + <div className={className}> |
| 58 | + {!name && ( |
| 59 | + <EmptyState |
| 60 | + className="h-full" |
| 61 | + icon={Search} |
| 62 | + title="Nothing selected" |
| 63 | + description="Search on the left, or Alt+Click any item or fluid icon." |
| 64 | + /> |
| 65 | + )} |
| 66 | + {name && detail.isPending && ( |
| 67 | + <div className="flex flex-col gap-4"> |
| 68 | + <div className="flex items-center gap-3"> |
| 69 | + <Skeleton className="size-12" /> |
| 70 | + <div className="flex flex-col gap-1.5"> |
| 71 | + <Skeleton className="h-5 w-40" /> |
| 72 | + <Skeleton className="h-4 w-64" /> |
| 73 | + </div> |
| 74 | + </div> |
| 75 | + <div className={variant === "dialog" ? "" : "grid grid-cols-1 gap-4 2xl:grid-cols-2"}> |
| 76 | + <Skeleton className="h-40 w-full" /> |
| 77 | + {variant === "browse" && <Skeleton className="h-40 w-full" />} |
| 78 | + </div> |
| 79 | + </div> |
| 80 | + )} |
| 81 | + {name && detail.isError && ( |
| 82 | + <Callout tone="destructive">failed to load this item — try again</Callout> |
| 83 | + )} |
| 84 | + {data && ( |
| 85 | + <> |
| 86 | + <div className="mb-4 flex items-center gap-3"> |
| 87 | + <Icon kind={data.kind as Kind} name={data.name} size="lg" noTitle /> |
| 88 | + <div> |
| 89 | + <h1 className="text-lg font-semibold tracking-tight">{data.display}</h1> |
| 90 | + <div className="flex flex-wrap items-center gap-x-1 text-sm text-muted-foreground"> |
| 91 | + {data.name} · {data.kind} |
| 92 | + {data.item?.stackSize != null && ` · stack ${data.item.stackSize}`} |
| 93 | + {data.item?.fuelValueJ != null && ( |
| 94 | + <span className="inline-flex items-center gap-1"> |
| 95 | + · <Flame className="size-3.5" /> {fmtJ(data.item.fuelValueJ)} ( |
| 96 | + {data.item.fuelCategory}) |
| 97 | + </span> |
| 98 | + )} |
| 99 | + {data.fluid?.fuelValueJ != null && ( |
| 100 | + <span className="inline-flex items-center gap-1"> |
| 101 | + · <Flame className="size-3.5" /> {fmtJ(data.fluid.fuelValueJ)}/unit |
| 102 | + </span> |
| 103 | + )} |
| 104 | + {data.item?.burntResult && ` · burns to ${data.item.burntResult}`} |
| 105 | + <Button |
| 106 | + asChild |
| 107 | + variant="ghost" |
| 108 | + size="sm" |
| 109 | + className="h-auto gap-1 px-1 py-0 font-normal text-info hover:text-info" |
| 110 | + > |
| 111 | + <Link to="/deps" search={{ sel: data.name }}> |
| 112 | + <Network className="size-3.5" /> dependencies |
| 113 | + </Link> |
| 114 | + </Button> |
| 115 | + </div> |
| 116 | + </div> |
| 117 | + </div> |
| 118 | + |
| 119 | + {!data.flowComputed && data.producedBy.length + data.consumedBy.length > 0 && ( |
| 120 | + <FlowStaleCallout /> |
| 121 | + )} |
| 122 | + {variant === "dialog" && ( |
| 123 | + <Segmented |
| 124 | + value={side} |
| 125 | + onValueChange={setSide} |
| 126 | + aria-label="Recipe explorer view" |
| 127 | + options={[ |
| 128 | + { value: "recipes", label: `Recipes (${data.producedBy.length})` }, |
| 129 | + { value: "uses", label: `Uses (${data.consumedBy.length})` }, |
| 130 | + ]} |
| 131 | + className="mb-4" |
| 132 | + /> |
| 133 | + )} |
| 134 | + {data.producedBy.length + data.consumedBy.length > 0 && ( |
| 135 | + <FilterInput |
| 136 | + value={recipeQuery} |
| 137 | + onValueChange={setRecipeQuery} |
| 138 | + placeholder="filter recipes…" |
| 139 | + className="mb-4 max-w-sm" |
| 140 | + /> |
| 141 | + )} |
| 142 | + {variant === "dialog" ? ( |
| 143 | + side === "recipes" ? ( |
| 144 | + <RecipeList |
| 145 | + title={`Recipes (${data.producedBy.length})`} |
| 146 | + cards={data.producedBy} |
| 147 | + focus={data.name} |
| 148 | + emptyText="nothing makes this — a raw input" |
| 149 | + query={recipeQuery} |
| 150 | + onClearQuery={() => setRecipeQuery("")} |
| 151 | + onPick={onPick} |
| 152 | + variant="comfortable" |
| 153 | + /> |
| 154 | + ) : ( |
| 155 | + <RecipeList |
| 156 | + title={`Uses (${data.consumedBy.length})`} |
| 157 | + cards={data.consumedBy} |
| 158 | + focus={data.name} |
| 159 | + emptyText="no consumers" |
| 160 | + query={recipeQuery} |
| 161 | + onClearQuery={() => setRecipeQuery("")} |
| 162 | + onPick={onPick} |
| 163 | + variant="comfortable" |
| 164 | + /> |
| 165 | + ) |
| 166 | + ) : ( |
| 167 | + <div className="grid grid-cols-1 gap-4 2xl:grid-cols-2"> |
| 168 | + <RecipeList |
| 169 | + title={`Produced by (${data.producedBy.length})`} |
| 170 | + cards={data.producedBy} |
| 171 | + focus={data.name} |
| 172 | + emptyText="nothing makes this — a raw input" |
| 173 | + query={recipeQuery} |
| 174 | + onClearQuery={() => setRecipeQuery("")} |
| 175 | + onPick={onPick} |
| 176 | + /> |
| 177 | + <RecipeList |
| 178 | + title={`Consumed by (${data.consumedBy.length})`} |
| 179 | + cards={data.consumedBy} |
| 180 | + focus={data.name} |
| 181 | + emptyText="no consumers" |
| 182 | + query={recipeQuery} |
| 183 | + onClearQuery={() => setRecipeQuery("")} |
| 184 | + onPick={onPick} |
| 185 | + /> |
| 186 | + </div> |
| 187 | + )} |
| 188 | + </> |
| 189 | + )} |
| 190 | + </div> |
| 191 | + ); |
| 192 | +} |
| 193 | + |
| 194 | +const fmtJ = (j: number) => |
| 195 | + j >= 1e9 |
| 196 | + ? `${(j / 1e9).toFixed(1)} GJ` |
| 197 | + : j >= 1e6 |
| 198 | + ? `${(j / 1e6).toFixed(1)} MJ` |
| 199 | + : `${(j / 1e3).toFixed(0)} kJ`; |
0 commit comments