diff --git a/app/features/tier-list-maker/hooks/useTierList.ts b/app/features/tier-list-maker/hooks/useTierList.ts index 5f450c9e2..655a0cb43 100644 --- a/app/features/tier-list-maker/hooks/useTierList.ts +++ b/app/features/tier-list-maker/hooks/useTierList.ts @@ -5,6 +5,7 @@ import type { } from "@dnd-kit/core"; import { arrayMove } from "@dnd-kit/sortable"; import * as React from "react"; +import * as v from "valibot"; import { abilitiesShort } from "~/modules/in-game-lists/abilities"; import { modesShort } from "~/modules/in-game-lists/modes"; import { stageIds } from "~/modules/in-game-lists/stage-ids"; @@ -14,6 +15,8 @@ import { subWeaponIds, weaponIdToType, } from "~/modules/in-game-lists/weapon-ids"; +import { usePersistedState } from "~/modules/persisted-state/hooks"; +import * as PersistedState from "~/modules/persisted-state/persisted-state"; import { useSearchParam } from "~/modules/search-params/hooks"; import { assertUnreachable } from "~/utils/types"; import { DEFAULT_TIERS } from "../tier-list-maker-constants"; @@ -27,6 +30,13 @@ import { addItemToTier, getNextNthForItem } from "../tier-list-maker-utils"; export type TierListPlacementMode = "track" | "click"; +const placementModePersisted = PersistedState.define({ + key: "tier-list-maker__placement-mode", + storage: "local", + schema: v.picklist(["track", "click"]), + default: "track" as TierListPlacementMode, +}); + export function useTierList() { const [itemType, setItemType] = useSearchParam( tierListMakerSearchParams, @@ -37,10 +47,11 @@ export function useTierList() { useSearchParamTiersState(); const [activeItem, setActiveItem] = React.useState(null); - const [placementMode, setPlacementMode] = - React.useState("click"); + const [placementMode, setPlacementMode] = usePersistedState( + placementModePersisted, + ); const [selectedTierId, setSelectedTierId] = React.useState( - () => tiers.tiers[0]?.id ?? null, + () => (placementMode === "click" ? (tiers.tiers[0]?.id ?? null) : null), ); const handleChangePlacementMode = (mode: TierListPlacementMode) => { diff --git a/app/features/tier-list-maker/routes/tier-list-maker.tsx b/app/features/tier-list-maker/routes/tier-list-maker.tsx index fe8e11a2f..a3fde3891 100644 --- a/app/features/tier-list-maker/routes/tier-list-maker.tsx +++ b/app/features/tier-list-maker/routes/tier-list-maker.tsx @@ -50,7 +50,7 @@ import type { TierListItem } from "../tier-list-maker-schemas"; import { tierListMakerPathWithState } from "../tier-list-maker-utils"; import styles from "./tier-list-maker.module.css"; -const PLACEMENT_MODES: TierListPlacementMode[] = ["click", "track"]; +const PLACEMENT_MODES: TierListPlacementMode[] = ["track", "click"]; export const meta: MetaFunction = (args) => { return metaTags({ diff --git a/changelog/2026-09-22-tier-list-maker-drag-default.md b/changelog/2026-09-22-tier-list-maker-drag-default.md new file mode 100644 index 000000000..ecef7044f --- /dev/null +++ b/changelog/2026-09-22-tier-list-maker-drag-default.md @@ -0,0 +1,5 @@ +--- +navItem: tier-list-maker +type: feature +--- +Tier list maker defaults to drag & drop and remembers your placement mode choice