Skip to content

Commit c54f5b2

Browse files
jaccjacc
committed
switch show beta features to a dialog component
1 parent af79376 commit c54f5b2

3 files changed

Lines changed: 123 additions & 50 deletions

File tree

‎apps/stardew.app/src/components/dialogs/beta-features-dialog.tsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import Link from "next/link";
2+
3+
import { Button } from "@/components/ui/button";
4+
import {
5+
Dialog,
6+
DialogClose,
7+
DialogContent,
8+
DialogDescription,
9+
DialogFooter,
10+
DialogHeader,
11+
DialogTitle,
12+
} from "@/components/ui/dialog";
13+
14+
interface Props {
15+
open: boolean;
16+
setOpen: (open: boolean) => void;
17+
toggleBetaFeatures: () => boolean;
18+
}
19+
20+
export const BetaFeaturesDialog = ({
21+
open,
22+
setOpen,
23+
toggleBetaFeatures,
24+
}: Props) => {
25+
return (
26+
<Dialog open={open} onOpenChange={setOpen}>
27+
<DialogContent>
28+
<DialogHeader>
29+
<DialogTitle>Show Beta Features</DialogTitle>
30+
<DialogDescription>
31+
This feature is currently in beta and will likely change often
32+
based on feedback. You can always disable beta features again in
33+
your{" "}
34+
<Link
35+
href="/account"
36+
className="underline hover:text-neutral-400 hover:dark:text-neutral-300"
37+
>
38+
account settings
39+
</Link>
40+
.
41+
</DialogDescription>
42+
</DialogHeader>
43+
<DialogFooter className="gap-3 sm:gap-0">
44+
<DialogClose asChild>
45+
<Button variant="secondary">Cancel</Button>
46+
</DialogClose>
47+
<DialogClose asChild>
48+
<Button onClick={() => toggleBetaFeatures()}>
49+
Show Beta Features
50+
</Button>
51+
</DialogClose>
52+
</DialogFooter>
53+
</DialogContent>
54+
</Dialog>
55+
);
56+
};
57+

‎apps/stardew.app/src/pages/cooking.tsx‎

Lines changed: 33 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { X } from "lucide-react";
22
import Head from "next/head";
3-
import Link from "next/link";
43

54
import achievements from "@/data/achievements.json";
65
import recipes from "@/data/cooking.json";
@@ -16,6 +15,7 @@ import { useEffect, useMemo, useState } from "react";
1615

1716
import { AchievementCard } from "@/components/cards/achievement-card";
1817
import { RecipeCard } from "@/components/cards/recipe-card";
18+
import { BetaFeaturesDialog } from "@/components/dialogs/beta-features-dialog";
1919
import { BulkActionDialog } from "@/components/dialogs/bulk-action-dialog";
2020
import { UnblurDialog } from "@/components/dialogs/unblur-dialog";
2121
import { FilterSearch } from "@/components/filter-btn";
@@ -92,6 +92,7 @@ export default function Cooking() {
9292
const [bulkActionOpen, setBulkActionOpen] = useState(false);
9393

9494
const [showPrompt, setPromptOpen] = useState(false);
95+
const [betaDialogOpen, setBetaDialogOpen] = useState(false);
9596

9697
const { activePlayer } = usePlayers();
9798
const { show, toggleShow, showBetaFeatures, toggleBetaFeatures } =
@@ -171,6 +172,11 @@ export default function Cooking() {
171172
if (value == activeTab) {
172173
return;
173174
}
175+
// If trying to switch to ingredients tab and beta features aren't enabled, show dialog
176+
if (value === "ingredients" && !showBetaFeatures) {
177+
setBetaDialogOpen(true);
178+
return;
179+
}
174180
router.push(
175181
{
176182
pathname: router.pathname,
@@ -243,14 +249,14 @@ export default function Cooking() {
243249
</section>
244250
</Accordion>
245251
<Tabs value={activeTab} onValueChange={handleTabChange}>
246-
<TabsList className="grid w-full grid-cols-3">
252+
<TabsList className="grid w-full grid-cols-2">
247253
<TabsTrigger value="recipes">All Recipes</TabsTrigger>
248254
<TabsTrigger value="ingredients" className="relative">
249255
Ingredient Tracker <NewItemBadge version="beta" />
250256
</TabsTrigger>
251257
</TabsList>
252258
{/* All Recipes Section */}
253-
<TabsContent value="recipes" className="mt-4 space-y-8">
259+
<TabsContent value="recipes" className="mt-4">
254260
{/* Filters and Actions Row */}
255261
<div className="flex w-full flex-row items-center justify-between">
256262
<ToggleGroup
@@ -338,7 +344,7 @@ export default function Cooking() {
338344
</Command>
339345
</div>
340346
{/* Cards */}
341-
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
347+
<div className="grid grid-cols-1 mt-2 gap-4 md:grid-cols-2 xl:grid-cols-4">
342348
{Object.values(recipes)
343349
.filter((r) => semverGte(gameVersion, r.minVersion))
344350
.filter((r) => {
@@ -383,27 +389,7 @@ export default function Cooking() {
383389
))}
384390
</div>
385391
</TabsContent>
386-
<TabsContent value="ingredients" className="mt-4 space-y-8">
387-
{!showBetaFeatures && (
388-
<>
389-
<h3>Show Beta Features?</h3>
390-
<p>
391-
This feature is currently in beta and will likely change
392-
often based on feedback. You can always disable beta
393-
features again in your{" "}
394-
<Link
395-
href="/account"
396-
className="underline hover:text-neutral-400 hover:dark:text-neutral-300"
397-
>
398-
account settings
399-
</Link>
400-
.
401-
</p>
402-
<Button onClick={toggleBetaFeatures}>
403-
Show Beta Features
404-
</Button>
405-
</>
406-
)}
392+
<TabsContent value="ingredients" className="mt-4">
407393
{/* Needed Ingredients Section */}
408394
{showBetaFeatures && (
409395
<>
@@ -483,6 +469,28 @@ export default function Cooking() {
483469
setOpen={setPromptOpen}
484470
toggleShow={toggleShow}
485471
/>
472+
<BetaFeaturesDialog
473+
open={betaDialogOpen}
474+
setOpen={setBetaDialogOpen}
475+
toggleBetaFeatures={() => {
476+
const enabled = toggleBetaFeatures();
477+
if (enabled) {
478+
// Switch to ingredients tab after enabling
479+
router.push(
480+
{
481+
pathname: router.pathname,
482+
query: {
483+
...router.query,
484+
trackingTab: "ingredients",
485+
},
486+
},
487+
undefined,
488+
{ shallow: true },
489+
);
490+
}
491+
return enabled;
492+
}}
493+
/>
486494
<BulkActionDialog
487495
open={bulkActionOpen}
488496
setOpen={setBulkActionOpen}

‎apps/stardew.app/src/pages/crafting.tsx‎

Lines changed: 33 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import Head from "next/head";
2-
import Link from "next/link";
32

43
import achievements from "@/data/achievements.json";
54
import bigobjects from "@/data/big_craftables.json";
@@ -16,6 +15,7 @@ import { useEffect, useMemo, useState } from "react";
1615

1716
import { AchievementCard } from "@/components/cards/achievement-card";
1817
import { RecipeCard } from "@/components/cards/recipe-card";
18+
import { BetaFeaturesDialog } from "@/components/dialogs/beta-features-dialog";
1919
import { BulkActionDialog } from "@/components/dialogs/bulk-action-dialog";
2020
import { UnblurDialog } from "@/components/dialogs/unblur-dialog";
2121
import { FilterSearch } from "@/components/filter-btn";
@@ -92,6 +92,7 @@ export default function Crafting() {
9292
const [_seasonFilter, setSeasonFilter] = useState("all");
9393

9494
const [showPrompt, setPromptOpen] = useState(false);
95+
const [betaDialogOpen, setBetaDialogOpen] = useState(false);
9596

9697
const { activePlayer } = usePlayers();
9798
const { show, toggleShow, showBetaFeatures, toggleBetaFeatures } =
@@ -181,6 +182,11 @@ export default function Crafting() {
181182
if (value == activeTab) {
182183
return;
183184
}
185+
// If trying to switch to ingredients tab and beta features aren't enabled, show dialog
186+
if (value === "ingredients" && !showBetaFeatures) {
187+
setBetaDialogOpen(true);
188+
return;
189+
}
184190
router.push(
185191
{
186192
pathname: router.pathname,
@@ -253,14 +259,14 @@ export default function Crafting() {
253259
</section>
254260
</Accordion>
255261
<Tabs value={activeTab} onValueChange={handleTabChange}>
256-
<TabsList className="grid w-full grid-cols-3">
262+
<TabsList className="grid w-full grid-cols-2">
257263
<TabsTrigger value="recipes">All Recipes</TabsTrigger>
258264
<TabsTrigger value="ingredients" className="relative">
259265
Ingredient Tracker <NewItemBadge version="beta" />
260266
</TabsTrigger>
261267
</TabsList>
262268
{/* All Recipes Section */}
263-
<TabsContent value="recipes" className="mt-4 space-y-8">
269+
<TabsContent value="recipes" className="mt-4">
264270
{/* Filters and Actions Row */}
265271
<div className="flex w-full flex-row items-center justify-between">
266272
<ToggleGroup
@@ -350,7 +356,7 @@ export default function Crafting() {
350356
</Command>
351357
</div>
352358
{/* Cards */}
353-
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
359+
<div className="grid grid-cols-1 mt-2 gap-4 md:grid-cols-2 xl:grid-cols-4">
354360
{Object.values(recipes)
355361
.filter((r) => semverGte(gameVersion, r.minVersion))
356362
.filter((r) => {
@@ -395,27 +401,7 @@ export default function Crafting() {
395401
))}
396402
</div>
397403
</TabsContent>
398-
<TabsContent value="ingredients" className="mt-4 space-y-8">
399-
{!showBetaFeatures && (
400-
<>
401-
<h3>Show Beta Features?</h3>
402-
<p>
403-
This feature is currently in beta and will likely change
404-
often based on feedback. You can always disable beta
405-
features again in your{" "}
406-
<Link
407-
href="/account"
408-
className="underline hover:text-neutral-400 hover:dark:text-neutral-300"
409-
>
410-
account settings
411-
</Link>
412-
.
413-
</p>
414-
<Button onClick={toggleBetaFeatures}>
415-
Show Beta Features
416-
</Button>
417-
</>
418-
)}
404+
<TabsContent value="ingredients" className="mt-4">
419405
{/* Needed Ingredients Section */}
420406
{showBetaFeatures && (
421407
<>
@@ -496,6 +482,28 @@ export default function Crafting() {
496482
setOpen={setPromptOpen}
497483
toggleShow={toggleShow}
498484
/>
485+
<BetaFeaturesDialog
486+
open={betaDialogOpen}
487+
setOpen={setBetaDialogOpen}
488+
toggleBetaFeatures={() => {
489+
const enabled = toggleBetaFeatures();
490+
if (enabled) {
491+
// Switch to ingredients tab after enabling
492+
router.push(
493+
{
494+
pathname: router.pathname,
495+
query: {
496+
...router.query,
497+
trackingTab: "ingredients",
498+
},
499+
},
500+
undefined,
501+
{ shallow: true },
502+
);
503+
}
504+
return enabled;
505+
}}
506+
/>
499507
<BulkActionDialog
500508
open={bulkActionOpen}
501509
setOpen={setBulkActionOpen}

0 commit comments

Comments
 (0)