| 1 | "use client"; |
| 2 | |
| 3 | import { use, useState |
| 4 | import { useQuery } |
| 5 | import { useTranslations, useLocale |
| 6 | import { useRouter } |
| 7 | import { |
| 8 | Search, ExternalLink, |
| 9 | Code2, MessageSquare, |
| 10 | ScrollText, Calendar, |
| 11 | } from "lucide-react"; |
| 12 | import { toast } |
| 13 | import ReactMarkdown from "react-markdown |
| 14 | import remarkGfm from "remark-gfm |
| 15 | import rehypeRaw from "rehype-raw |
| 16 | import rehypeSanitize from "rehype-sanitize |
| 17 | import { authClient } |
| 18 | import { parseEggFeatures } |
| 19 | import { orpc } |
| 20 | import Loader from "@/components/loader |
| 21 | import { useIsMobile } |
| 22 | import { DitherAvatar } |
| 23 | import { |
| 24 | Dialog, |
| 25 | DialogPopup, |
| 26 | } from "@struxa/ui/components/dialog"; |
| 27 | import { |
| 28 | Sheet, |
| 29 | SheetPopup, |
| 30 | SheetHeader, |
| 31 | SheetTitle, |
| 32 | SheetPanel, |
| 33 | SheetFooter, |
| 34 | SheetClose, |
| 35 | } from "@struxa/ui/components/sheet"; |
| 36 | import { |
| 37 | Select, |
| 38 | SelectTrigger, |
| 39 | SelectValue, |
| 40 | SelectContent, |
| 41 | SelectItem, |
| 42 | } from "@struxa/ui/components/select"; |
| 43 | |
| 44 | interface ModrinthProject { |
| 45 | project_id: string; |
| 46 | slug: string; |
| 47 | title: string; |
| 48 | description: string; |
| 49 | author: string; |
| 50 | icon_url: string |
| 51 | downloads: number; |
| 52 | categories: string[] |
| 53 | date_modified: string; |
| 54 | project_type: string; |
| 55 | } |
| 56 | |
| 57 | interface ModrinthVersion { |
| 58 | id: string; |
| 59 | name: string; |
| 60 | version_number: string; |
| 61 | loaders: string[] |
| 62 | game_versions: string[] |
| 63 | date_published: string; |
| 64 | files: { |
| 65 | } |
| 66 | |
| 67 | interface ModrinthProjectDetail { |
| 68 | game_versions: string[] |
| 69 | loaders: string[] |
| 70 | categories: string[] |
| 71 | additional_categories: string[] |
| 72 | license: { |
| 73 | source_url: string |
| 74 | discord_url: string |
| 75 | issues_url: string |
| 76 | wiki_url: string |
| 77 | donation_urls: { |
| 78 | published: string; |
| 79 | updated: string; |
| 80 | client_side: string; |
| 81 | server_side: string; |
| 82 | } |
| 83 | |
| 84 | interface ModrinthMember { |
| 85 | role: string; |
| 86 | ordering: number; |
| 87 | user: { |
| 88 | } |
| 89 | |
| 90 | const MODRINTH_API = " |
| 91 | const MOD_LOADERS = [ |
| 92 | const LOADER_ORDER = MOD_LOADERS |
| 93 | const FACETS = encodeURIComponent |
| 94 | |
| 95 | const PROSE = [ |
| 96 | "text-sm text-foreground leading-relaxed", |
| 97 | "[&_h1]:text-xl [&_h1]:font-bold [&_h1]:mt-6 [&_h1]:mb-3 [&_h1]:text-foreground", |
| 98 | "[&_h2]:text-lg [&_h2]:font-semibold [&_h2]:mt-5 [&_h2]:mb-2 [&_h2]:text-foreground", |
| 99 | "[&_h3]:text-base [&_h3]:font-semibold [&_h3]:mt-4 [&_h3]:mb-2 [&_h3]:text-foreground", |
| 100 | "[&_h4]:text-sm [&_h4]:font-semibold [&_h4]:mt-3 [&_h4]:mb-1 [&_h4]:text-foreground", |
| 101 | "[&_p]:mb-3 [&_p]:leading-relaxed [&_p]:text-muted-foreground", |
| 102 | "[&_ul]:mb-3 [&_ul]:list-disc [&_ul]:pl-5 [&_ul]:space-y-1 [&_ul]:text-muted-foreground", |
| 103 | "[&_ol]:mb-3 [&_ol]:list-decimal [&_ol]:pl-5 [&_ol]:space-y-1 [&_ol]:text-muted-foreground", |
| 104 | "[&_li]:leading-relaxed", |
| 105 | "[&_code]:bg-muted [&_code]:rounded [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:text-xs [&_code]:font-mono [&_code]:text-foreground", |
| 106 | "[&_pre]:bg-muted [&_pre]:rounded-lg [&_pre]:p-4 [&_pre]:overflow-x-auto [&_pre]:mb-3 [&_pre]:text-xs [&_pre]:font-mono", |
| 107 | "[&_pre_code]:bg-transparent [&_pre_code]:p-0", |
| 108 | "[&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-4 [&_blockquote]:italic [&_blockquote]:text-muted-foreground [&_blockquote]:mb-3", |
| 109 | "[&_a]:text-primary [&_a]:underline [&_a]:underline-offset-2 [&_a]:decoration-primary/40 [&_a:hover]:decoration-primary", |
| 110 | "[&_img]:rounded-lg [&_img]:max-w-full [&_img]:my-3 [&_img]:align-middle", |
| 111 | "[&_p:has(>img:only-child)]:inline-block [&_p:has(>img:only-child)]:mb-2 [&_p:has(>img:only-child)]:mr-2 [&_p:has(>img:only-child)]:align-middle", |
| 112 | "[&_p:has(>a:only-child>img:only-child)]:inline-block [&_p:has(>a:only-child>img:only-child)]:mb-2 [&_p:has(>a:only-child>img:only-child)]:mr-2 [&_p:has(>a:only-child>img:only-child)]:align-middle", |
| 113 | "[&_hr]:border-border [&_hr]:my-5", |
| 114 | "[&_table]:w-full [&_table]:text-sm [&_table]:border-collapse [&_table]:mb-3", |
| 115 | "[&_th]:border [&_th]:border-border [&_th]:bg-muted [&_th]:px-3 [&_th]:py-2 [&_th]:text-left [&_th]:text-xs [&_th]:font-semibold", |
| 116 | "[&_td]:border [&_td]:border-border [&_td]:px-3 [&_td]:py-2 [&_td]:text-xs", |
| 117 | "[&_strong]:font-semibold [&_strong]:text-foreground", |
| 118 | "[&_details]:mb-3 [&_details]:rounded-lg [&_details]:border [&_details]:border-border [&_details]:p-3", |
| 119 | "[&_summary]:cursor-pointer [&_summary]:font-medium [&_summary]:text-sm", |
| 120 | ].join(" ") |
| 121 | |
| 122 | function fmtDownloads(n: |
| 123 | if (n >= |
| 124 | if (n >= |
| 125 | return String(n |
| 126 | } |
| 127 | |
| 128 | function loaderLabel(l: |
| 129 | return l.charAt |
| 130 | } |
| 131 | |
| 132 | function versionLabel(v: |
| 133 | const mc = |
| 134 | return mc ? |
| 135 | } |
| 136 | |
| 137 | function ModIcon({ mod |
| 138 | const dims = |
| 139 | const iconDims = |
| 140 | const rounded = |
| 141 | return ( |
| 142 | <div className={` |
| 143 | {mod.icon_url ? |
| 144 | // eslint-disable-next-line @next/next/no-img-element |
| 145 | <img |
| 146 | src={mod.icon_url |
| 147 | alt={mod.title |
| 148 | className={`${dims |
| 149 | onError={(e) |
| 150 | /> |
| 151 | ) : ( |
| 152 | <Box className={ |
| 153 | )} |
| 154 | </div> |
| 155 | ); |
| 156 | } |
| 157 | |
| 158 | function ModCardSkeleton() { |
| 159 | return ( |
| 160 | <div className="flex flex-col gap-3 rounded-xl border border-border bg-card p-4 animate-pulse |
| 161 | <div className="flex items-start gap-3 |
| 162 | <div className="h-12 w-12 shrink-0 rounded-lg bg-muted |
| 163 | <div className="flex flex-1 flex-col gap-2 pt-0.5 |
| 164 | <div className="h-4 w-32 rounded bg-muted |
| 165 | <div className="h-3 w-20 rounded bg-muted |
| 166 | </div> |
| 167 | </div> |
| 168 | <div className="space-y-1.5 |
| 169 | <div className="h-3 w-full rounded bg-muted |
| 170 | <div className="h-3 w-4/5 rounded bg-muted |
| 171 | </div> |
| 172 | <div className="flex gap-1.5 |
| 173 | <div className="h-5 w-14 rounded-full bg-muted |
| 174 | <div className="h-5 w-10 rounded-full bg-muted |
| 175 | </div> |
| 176 | </div> |
| 177 | ); |
| 178 | } |
| 179 | |
| 180 | function ModCard({ mod |
| 181 | const t = |
| 182 | return ( |
| 183 | <button |
| 184 | type="button" |
| 185 | onClick={onClick} |
| 186 | className="group flex flex-col gap-3 rounded-xl border border-border bg-card p-4 text-left transition-colors hover:border-primary/40 hover:bg-card/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" |
| 187 | > |
| 188 | <div className="flex items-start gap-3 |
| 189 | <ModIcon mod={ |
| 190 | <div className="flex min-w-0 flex-1 flex-col gap-0.5 pt-0.5 |
| 191 | <p className="truncate text-sm font-semibold text-foreground leading-tight |
| 192 | <p className="truncate text-xs text-muted-foreground |
| 193 | </div> |
| 194 | <div className="flex items-center gap-1 shrink-0 text-[10px] text-muted-foreground |
| 195 | <Download className=" |
| 196 | {fmtDownloads(mod.downloads |
| 197 | </div> |
| 198 | </div> |
| 199 | <p className="line-clamp-2 text-xs leading-relaxed text-muted-foreground |
| 200 | {mod.categories.length |
| 201 | <div className="flex flex-wrap gap-1 |
| 202 | {mod.categories.slice |
| 203 | <span key={cat |
| 204 | {cat} |
| 205 | </span> |
| 206 | ))} |
| 207 | </div> |
| 208 | )} |
| 209 | </button> |
| 210 | ); |
| 211 | } |
| 212 | |
| 213 | function VersionPicker({ |
| 214 | projectId, |
| 215 | onSelect, |
| 216 | }: { |
| 217 | projectId: string |
| 218 | onSelect: (v |
| 219 | }) { |
| 220 | const t = |
| 221 | const mcLabel = |
| 222 | const [allVersions, |
| 223 | const [loading, |
| 224 | const [selectedLoader, |
| 225 | const [selectedVersionId, |
| 226 | |
| 227 | useEffect(() => |
| 228 | setLoading(true); |
| 229 | setAllVersions(null); |
| 230 | setSelectedLoader(null); |
| 231 | setSelectedVersionId(null); |
| 232 | onSelect(null); |
| 233 | |
| 234 | fetch(`${MODRINTH_API} |
| 235 | .then((r) |
| 236 | .then((all) |
| 237 | const compatible = |
| 238 | (v) => |
| 239 | ); |
| 240 | const pool = |
| 241 | setAllVersions(pool); |
| 242 | |
| 243 | const counts = |
| 244 | for (const v |
| 245 | for (const l |
| 246 | if (MOD_LOADERS.includes |
| 247 | |
| 248 | const bestLoader = |
| 249 | setSelectedLoader(bestLoader); |
| 250 | |
| 251 | const first = |
| 252 | if (first) { |
| 253 | }) |
| 254 | .catch(() => |
| 255 | .finally(() => |
| 256 | // eslint-disable-next-line react-hooks/exhaustive-deps |
| 257 | }, [projectId]); |
| 258 | |
| 259 | const availableLoaders = |
| 260 | ? LOADER_ORDER.filter( |
| 261 | : []; |
| 262 | |
| 263 | const filteredVersions = |
| 264 | ? allVersions.filter( |
| 265 | : (allVersions ?? |
| 266 | |
| 267 | const selectedVersion = |
| 268 | |
| 269 | function handleLoaderChange(loader |
| 270 | if (!loader) |
| 271 | setSelectedLoader(loader); |
| 272 | const versions = |
| 273 | const first = |
| 274 | setSelectedVersionId(first?.id |
| 275 | onSelect(first); |
| 276 | } |
| 277 | |
| 278 | function handleVersionChange(id |
| 279 | if (!id) |
| 280 | const v = |
| 281 | setSelectedVersionId(id); |
| 282 | onSelect(v); |
| 283 | } |
| 284 | |
| 285 | if (loading) { |
| 286 | return ( |
| 287 | <div className="flex flex-col gap-3 |
| 288 | <div className="h-9 rounded-lg bg-muted animate-pulse |
| 289 | <div className="h-9 rounded-lg bg-muted animate-pulse |
| 290 | </div> |
| 291 | ); |
| 292 | } |
| 293 | |
| 294 | if (!allVersions || |
| 295 | return <p className |
| 296 | } |
| 297 | |
| 298 | return ( |
| 299 | <div className="flex flex-col gap-3 |
| 300 | {availableLoaders.length > |
| 301 | <div className="flex flex-col gap-1.5 |
| 302 | <p className="text-xs font-medium text-muted-foreground |
| 303 | <Select value={ |
| 304 | <SelectTrigger className=" |
| 305 | <SelectValue>{selectedLoader |
| 306 | </SelectTrigger> |
| 307 | <SelectContent> |
| 308 | {availableLoaders.map(( |
| 309 | <SelectItem key={ |
| 310 | ))} |
| 311 | </SelectContent> |
| 312 | </Select> |
| 313 | </div> |
| 314 | )} |
| 315 | <div className="flex flex-col gap-1.5 |
| 316 | <p className="text-xs font-medium text-muted-foreground |
| 317 | <Select value={ |
| 318 | <SelectTrigger className=" |
| 319 | <SelectValue>{selectedVersion |
| 320 | </SelectTrigger> |
| 321 | <SelectContent> |
| 322 | {filteredVersions.map(( |
| 323 | <SelectItem key={ |
| 324 | ))} |
| 325 | </SelectContent> |
| 326 | </Select> |
| 327 | </div> |
| 328 | </div> |
| 329 | ); |
| 330 | } |
| 331 | |
| 332 | function Readme({ body |
| 333 | const t = |
| 334 | if (body === |
| 335 | return ( |
| 336 | <div className="flex flex-col gap-3 animate-pulse |
| 337 | {[...Array(6 |
| 338 | <div key={i |
| 339 | ))} |
| 340 | </div> |
| 341 | ); |
| 342 | } |
| 343 | if (!body) |
| 344 | |
| 345 | return ( |
| 346 | <div className={PROSE |
| 347 | <ReactMarkdown remarkPlugins={ |
| 348 | {body} |
| 349 | </ReactMarkdown> |
| 350 | </div> |
| 351 | ); |
| 352 | } |
| 353 | |
| 354 | const DONATE_LABELS: Record |
| 355 | "ko-fi": "Ko-fi", |
| 356 | patreon: "Patreon", |
| 357 | "open-collective": "Open Collective", |
| 358 | github: "GitHub Sponsors", |
| 359 | bmac: "Buy Me a Coffee", |
| 360 | paypal: "PayPal", |
| 361 | }; |
| 362 | |
| 363 | function timeAgo(dateStr: |
| 364 | const diff = |
| 365 | const rtf = |
| 366 | const s = |
| 367 | if (s < |
| 368 | const m = |
| 369 | if (m < |
| 370 | const h = |
| 371 | if (h < |
| 372 | const d = |
| 373 | if (d < |
| 374 | const mo = |
| 375 | if (mo < |
| 376 | return rtf.format |
| 377 | } |
| 378 | |
| 379 | function MetaSection({ title |
| 380 | return ( |
| 381 | <div className="flex flex-col gap-2 |
| 382 | <p className="text-[10px] font-semibold uppercase tracking-widest text-muted-foreground |
| 383 | {children} |
| 384 | </div> |
| 385 | ); |
| 386 | } |
| 387 | |
| 388 | function MetaLink({ href |
| 389 | return ( |
| 390 | <a |
| 391 | href={href} |
| 392 | target="_blank" |
| 393 | rel="noopener noreferrer" |
| 394 | className="flex items-center gap-2 text-xs text-foreground hover:text-primary transition-colors" |
| 395 | > |
| 396 | <Icon className=" |
| 397 | {label} |
| 398 | <ExternalLink className=" |
| 399 | </a> |
| 400 | ); |
| 401 | } |
| 402 | |
| 403 | function safeUrl(u: |
| 404 | if (!u) |
| 405 | try { |
| 406 | const p = |
| 407 | return p.protocol |
| 408 | } catch { return |
| 409 | } |
| 410 | |
| 411 | function ProjectMetadata({ |
| 412 | detail, |
| 413 | members, |
| 414 | }: { |
| 415 | detail: ModrinthProjectDetail |
| 416 | members: ModrinthMember |
| 417 | }) { |
| 418 | const t = |
| 419 | const locale = |
| 420 | if (detail === |
| 421 | return ( |
| 422 | <div className="flex flex-col gap-4 |
| 423 | {[80, 60, 100 |
| 424 | <div key={i |
| 425 | <div className="h-2.5 w-16 rounded bg-muted animate-pulse |
| 426 | <div className="h-3 rounded bg-muted animate-pulse |
| 427 | <div className="h-3 w-3/4 rounded bg-muted animate-pulse |
| 428 | </div> |
| 429 | ))} |
| 430 | </div> |
| 431 | ); |
| 432 | } |
| 433 | |
| 434 | if (!detail) |
| 435 | |
| 436 | const links: |
| 437 | ...(safeUrl(detail |
| 438 | ...(safeUrl(detail |
| 439 | ...(safeUrl(detail |
| 440 | ...(safeUrl(detail |
| 441 | ...detail.donation_urls. |
| 442 | const url = |
| 443 | return url ? |
| 444 | }), |
| 445 | ]; |
| 446 | |
| 447 | const allCategories = |
| 448 | const sortedMembers = |
| 449 | |
| 450 | return ( |
| 451 | <div className="flex flex-col gap-5 |
| 452 | {/* Links */} |
| 453 | {links.length > |
| 454 | <MetaSection title={ |
| 455 | <div className="flex flex-col gap-1.5 |
| 456 | {links.map(( |
| 457 | </div> |
| 458 | </MetaSection> |
| 459 | )} |
| 460 | |
| 461 | {/* Tags */} |
| 462 | {allCategories.length > |
| 463 | <MetaSection title={ |
| 464 | <div className="flex flex-wrap gap-1.5 |
| 465 | {allCategories.map(( |
| 466 | <span key={cat |
| 467 | ))} |
| 468 | </div> |
| 469 | </MetaSection> |
| 470 | )} |
| 471 | |
| 472 | {/* Creators */} |
| 473 | {sortedMembers.length > |
| 474 | <MetaSection title={ |
| 475 | <div className="flex flex-col gap-2 |
| 476 | {sortedMembers.map(( |
| 477 | <div key={m |
| 478 | <div className="h-7 w-7 shrink-0 overflow-hidden rounded-full bg-muted |
| 479 | {m.user.avatar_url |
| 480 | // eslint-disable-next-line @next/next/no-img-element |
| 481 | <img src={m |
| 482 | ) : ( |
| 483 | <DitherAvatar name={ |
| 484 | )} |
| 485 | </div> |
| 486 | <div className="flex min-w-0 flex-col |
| 487 | <span className="truncate text-xs font-medium text-foreground |
| 488 | <span className="text-[10px] text-muted-foreground |
| 489 | </div> |
| 490 | </div> |
| 491 | ))} |
| 492 | </div> |
| 493 | </MetaSection> |
| 494 | )} |
| 495 | |
| 496 | {/* Details */} |
| 497 | <MetaSection title={ |
| 498 | <div className="flex flex-col gap-1.5 |
| 499 | {detail.license && |
| 500 | <div className="flex items-center gap-2 text-xs text-muted-foreground |
| 501 | <ScrollText className=" |
| 502 | {safeUrl(detail.license |
| 503 | <a href={safeUrl |
| 504 | {detail.license.name |
| 505 | </a> |
| 506 | ) : ( |
| 507 | <span>{detail.license |
| 508 | )} |
| 509 | </div> |
| 510 | )} |
| 511 | <div className="flex items-center gap-2 text-xs text-muted-foreground |
| 512 | <Calendar className=" |
| 513 | {t("publishedAgo", |
| 514 | </div> |
| 515 | <div className="flex items-center gap-2 text-xs text-muted-foreground |
| 516 | <RefreshCw className=" |
| 517 | {t("updatedAgo", |
| 518 | </div> |
| 519 | </div> |
| 520 | </MetaSection> |
| 521 | </div> |
| 522 | ); |
| 523 | } |
| 524 | |
| 525 | function ModDetail({ |
| 526 | mod, |
| 527 | serverId, |
| 528 | onClose, |
| 529 | }: { |
| 530 | mod: ModrinthProject |
| 531 | serverId: string |
| 532 | onClose: () |
| 533 | }) { |
| 534 | const t = |
| 535 | const isMobile = |
| 536 | const [body, |
| 537 | const [detail, |
| 538 | const [members, |
| 539 | const [selectedVersion, |
| 540 | const [installing, |
| 541 | const [installSheetOpen, |
| 542 | |
| 543 | useEffect(() => |
| 544 | setBody(undefined); |
| 545 | setDetail(undefined); |
| 546 | setMembers(undefined); |
| 547 | Promise.all([ |
| 548 | fetch(`${MODRINTH_API} |
| 549 | fetch(`${MODRINTH_API} |
| 550 | ]) |
| 551 | .then(([proj |
| 552 | setBody(proj.body |
| 553 | setDetail(proj); |
| 554 | setMembers(mems); |
| 555 | }) |
| 556 | .catch(() => |
| 557 | }, [mod.project_id |
| 558 | |
| 559 | async function install |
| 560 | const file = |
| 561 | if (!file) |
| 562 | setInstalling(true); |
| 563 | try { |
| 564 | const res = |
| 565 | method: "POST", |
| 566 | headers: { "Content-Type": |
| 567 | body: JSON.stringify |
| 568 | }); |
| 569 | if (!res.ok |
| 570 | console.error("mod install failed: |
| 571 | throw new Error() |
| 572 | } |
| 573 | toast.success(t |
| 574 | onClose(); |
| 575 | } catch { |
| 576 | toast.error(t |
| 577 | } finally { |
| 578 | setInstalling(false); |
| 579 | } |
| 580 | } |
| 581 | |
| 582 | const installBtn = |
| 583 | <button |
| 584 | type="button" |
| 585 | onClick={install} |
| 586 | disabled={!selectedVersion |
| 587 | className="flex w-full items-center justify-center gap-2 rounded-lg bg-primary px-4 py-2.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-50" |
| 588 | > |
| 589 | {installing ? t |
| 590 | </button> |
| 591 | ); |
| 592 | |
| 593 | if (!isMobile) |
| 594 | return ( |
| 595 | <Dialog open onOpenChange |
| 596 | <DialogPopup |
| 597 | showCloseButton={false} |
| 598 | className="flex max-w-5xl h-[85vh] p-0 overflow-hidden rounded-2xl shadow-2xl" |
| 599 | > |
| 600 | <button |
| 601 | type="button" |
| 602 | aria-label={t(" |
| 603 | onClick={onClose} |
| 604 | className="absolute right-3 top-3 z-10 flex h-8 w-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-muted hover:text-foreground" |
| 605 | > |
| 606 | <X className=" |
| 607 | </button> |
| 608 | |
| 609 | {/* Left column */} |
| 610 | <div className="flex w-72 shrink-0 flex-col gap-5 overflow-y-auto border-r border-border p-6 |
| 611 | <div className="flex items-start gap-3 pr-6 |
| 612 | <ModIcon mod={ |
| 613 | <div className="flex min-w-0 flex-col gap-1 pt-1 |
| 614 | <p className="font-semibold text-foreground leading-tight |
| 615 | <p className="text-xs text-muted-foreground |
| 616 | <div className="flex items-center gap-1 text-xs text-muted-foreground |
| 617 | <Download className=" |
| 618 | {fmtDownloads(mod.downloads |
| 619 | </div> |
| 620 | </div> |
| 621 | </div> |
| 622 | |
| 623 | <div className="border-t border-border |
| 624 | |
| 625 | <VersionPicker projectId={ |
| 626 | |
| 627 | {installBtn} |
| 628 | |
| 629 | <a |
| 630 | href={`https://modrinth.com/mod/${mod |
| 631 | target="_blank" |
| 632 | rel="noopener noreferrer" |
| 633 | className="inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors" |
| 634 | > |
| 635 | <ExternalLink className=" |
| 636 | {t("modrinthLink") |
| 637 | </a> |
| 638 | |
| 639 | <div className="border-t border-border |
| 640 | |
| 641 | <ProjectMetadata detail={ |
| 642 | </div> |
| 643 | |
| 644 | {/* Right column - README */ |
| 645 | <div className="flex-1 overflow-y-auto p-6 |
| 646 | <Readme body={ |
| 647 | </div> |
| 648 | </DialogPopup> |
| 649 | </Dialog> |
| 650 | ); |
| 651 | } |
| 652 | |
| 653 | /* ── Mobile ── */ |
| 654 | return ( |
| 655 | <> |
| 656 | <Sheet open onOpenChange |
| 657 | <SheetPopup side=" |
| 658 | <SheetHeader> |
| 659 | <div className="flex items-center gap-3 pr-8 |
| 660 | <ModIcon mod={ |
| 661 | <div className="flex min-w-0 flex-col gap-0.5 |
| 662 | <SheetTitle className=" |
| 663 | <p className="text-xs text-muted-foreground |
| 664 | </div> |
| 665 | </div> |
| 666 | </SheetHeader> |
| 667 | |
| 668 | <SheetPanel className=" |
| 669 | <ProjectMetadata detail={ |
| 670 | </SheetPanel> |
| 671 | |
| 672 | <SheetFooter variant=" |
| 673 | <button |
| 674 | type="button" |
| 675 | onClick={() => |
| 676 | className="flex w-full items-center justify-center gap-2 rounded-lg bg-primary px-4 py-2.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90" |
| 677 | > |
| 678 | {t("install") |
| 679 | </button> |
| 680 | </SheetFooter> |
| 681 | </SheetPopup> |
| 682 | </Sheet> |
| 683 | |
| 684 | <Sheet open={ |
| 685 | <SheetPopup side=" |
| 686 | <SheetHeader> |
| 687 | <SheetTitle>{t( |
| 688 | </SheetHeader> |
| 689 | <SheetPanel scrollFade={ |
| 690 | <VersionPicker projectId={ |
| 691 | </SheetPanel> |
| 692 | <SheetFooter variant=" |
| 693 | {installBtn} |
| 694 | </SheetFooter> |
| 695 | </SheetPopup> |
| 696 | </Sheet> |
| 697 | </> |
| 698 | ); |
| 699 | } |
| 700 | |
| 701 | export default function ModsPage |
| 702 | const t = |
| 703 | const router = |
| 704 | const { data: |
| 705 | const { id |
| 706 | |
| 707 | const [query, |
| 708 | const [debouncedQuery, |
| 709 | const [results, |
| 710 | const [searchLoading, |
| 711 | const [selectedMod, |
| 712 | const debounceRef = |
| 713 | |
| 714 | useEffect(() => |
| 715 | if (!isPending && |
| 716 | }, [isPending, |
| 717 | |
| 718 | const { data: |
| 719 | |
| 720 | const eggFeatures = |
| 721 | |
| 722 | const searchSeq = |
| 723 | |
| 724 | const doSearch = |
| 725 | const seq = |
| 726 | setSearchLoading(true); |
| 727 | const url = |
| 728 | ? `${MODRINTH_API}/search?query= |
| 729 | : `${MODRINTH_API}/search?facets= |
| 730 | fetch(url) |
| 731 | .then((r) |
| 732 | .then((data) |
| 733 | .catch(() => |
| 734 | .finally(() => |
| 735 | }, []); |
| 736 | |
| 737 | useEffect(() => |
| 738 | |
| 739 | function handleQueryChange(val |
| 740 | setQuery(val); |
| 741 | clearTimeout(debounceRef.current |
| 742 | debounceRef.current = |
| 743 | setDebouncedQuery(val); |
| 744 | doSearch(val); |
| 745 | }, 300); |
| 746 | } |
| 747 | |
| 748 | const unsupported = |
| 749 | |
| 750 | useEffect(() => |
| 751 | if (unsupported) router |
| 752 | }, [unsupported, |
| 753 | |
| 754 | if (isPending || |
| 755 | |
| 756 | const sectionTitle = |
| 757 | |
| 758 | return ( |
| 759 | <> |
| 760 | <div className="flex flex-1 flex-col bg-background min-h-0 |
| 761 | <div className="flex shrink-0 items-center gap-3 border-b border-border bg-card px-4 py-2.5 |
| 762 | <div className="relative flex-1 max-w-md |
| 763 | <Search className=" |
| 764 | <input |
| 765 | type="text" |
| 766 | value={query} |
| 767 | onChange={(e) |
| 768 | placeholder={t(" |
| 769 | className="w-full rounded-lg border border-border bg-background py-1.5 pl-9 pr-3 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring" |
| 770 | /> |
| 771 | </div> |
| 772 | </div> |
| 773 | |
| 774 | <div className="flex-1 overflow-y-auto p-4 |
| 775 | <p className="mb-4 text-xs font-semibold uppercase tracking-widest text-muted-foreground |
| 776 | |
| 777 | {searchLoading ? ( |
| 778 | <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 |
| 779 | {Array.from({ |
| 780 | </div> |
| 781 | ) : results && |
| 782 | <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 |
| 783 | {results.map(( |
| 784 | <ModCard key={ |
| 785 | ))} |
| 786 | </div> |
| 787 | ) : ( |
| 788 | <div className="flex flex-col items-center justify-center py-16 gap-3 text-center |
| 789 | <Box className=" |
| 790 | <p className="text-sm text-muted-foreground |
| 791 | </div> |
| 792 | )} |
| 793 | </div> |
| 794 | </div> |
| 795 | |
| 796 | {selectedMod && ( |
| 797 | <ModDetail |
| 798 | mod={selectedMod} |
| 799 | serverId={id} |
| 800 | onClose={() => |
| 801 | /> |
| 802 | )} |
| 803 | </> |
| 804 | ); |
| 805 | } |