migrate: higher parade values option selection

src/main_window/routes/characters/character/rules/OptionalRulesItem.tsx

@@ -1,12 +1,14 @@
 import { OptionalRule, OptionalRuleTranslation } from "optolith-database-schema/types/rule/OptionalRule"
 import { FC, useCallback } from "react"
 import { Checkbox } from "../../../../../shared/components/checkbox/Checkbox.tsx"
+import { Dropdown } from "../../../../../shared/components/dropdown/Dropdown.tsx"
 import { IconButton } from "../../../../../shared/components/iconButton/IconButton.tsx"
+import { OptionalRuleIdentifier } from "../../../../../shared/domain/identifier.ts"
 import { useTranslate } from "../../../../../shared/hooks/translate.ts"
 import { useAppDispatch, useAppSelector } from "../../../../hooks/redux.ts"
 import { selectActiveOptionalRules } from "../../../../slices/characterSlice.ts"
 import { changeInlineLibraryEntry } from "../../../../slices/inlineWikiSlice.ts"
-import { switchOptionalRule } from "../../../../slices/rulesSlice.ts"
+import { changeOptionalRuleOption, switchOptionalRule } from "../../../../slices/rulesSlice.ts"
 
 type Props = {
   optionalRule: {
@@ -35,23 +37,37 @@ export const OptionalRulesItem: FC<Props> = props => {
     [ dispatch, optionalRule.id ],
   )
 
+  const handleChangeOption = useCallback(
+    (option: number) => dispatch(changeOptionalRuleOption({
+      id: optionalRule.id,
+      option,
+    })),
+    [ dispatch, optionalRule.id ],
+  )
+
+  const isActive = Object.hasOwn(activeOptionalRules, optionalRule.id)
+
   return (
     <li>
       <Checkbox
-        checked={Object.hasOwn(activeOptionalRules, optionalRule.id)}
+        checked={isActive}
         onClick={handleSwitch}
         label={optionalRuleTranslation.name}
         disabled={optionalRule.is_missing_implementation}
         />
-      {/* TODO: <Dropdown
-        options={List(
-          DropdownOption({ id: Just(2), name: "+2" }),
-          DropdownOption({ id: Just(4), name: "+4" })
-        )}
-        value={higherParadeValues}
-        onChange={changeHigherParadeValues}
-        disabled={higherParadeValues === 0}
-        /> */}
+      {optionalRule.id === OptionalRuleIdentifier.HigherDefenseStats
+        ? (
+        <Dropdown
+          options={[
+            { id: 2, name: "+2" },
+            { id: 4, name: "+4" },
+          ]}
+          value={activeOptionalRules[optionalRule.id]?.options?.[0] ?? 2}
+          onChange={handleChangeOption}
+          disabled={!isActive}
+          />
+        )
+        : null}
       <IconButton
         icon="&#xE912;"
         label={translate("Show details")}

src/main_window/slices/rulesSlice.ts

@@ -1,4 +1,5 @@
 import { createAction } from "@reduxjs/toolkit"
+import { OptionalRuleIdentifier } from "../../shared/domain/identifier.ts"
 import { createImmerReducer } from "../../shared/utils/redux.ts"
 import { CharacterState } from "./characterSlice.ts"
 
@@ -6,6 +7,7 @@ export const switchIncludeAllPublications = createAction("rules/switchIncludeAll
 export const switchIncludePublication = createAction<number>("rules/switchIncludePublication")
 export const switchFocusRule = createAction<number>("rules/switchFocusRule")
 export const switchOptionalRule = createAction<number>("rules/switchOptionalRule")
+export const changeOptionalRuleOption = createAction<{ id: number; option: number }>("rules/changeOptionalRuleOption")
 
 export const rulesReducer =
   createImmerReducer<CharacterState>((state, action) => {
@@ -35,10 +37,22 @@ export const rulesReducer =
       if (Object.hasOwn(state.rules.activeOptionalRules, action.payload)) {
         delete state.rules.activeOptionalRules[action.payload]
       }
+      else if (action.payload === OptionalRuleIdentifier.HigherDefenseStats) {
+        state.rules.activeOptionalRules[action.payload] = {
+          id: action.payload,
+          options: [ 2 ],
+        }
+      }
       else {
         state.rules.activeOptionalRules[action.payload] = {
           id: action.payload,
         }
       }
     }
+    else if (changeOptionalRuleOption.match(action)) {
+      if (Object.hasOwn(state.rules.activeOptionalRules, action.payload.id)) {
+        (state.rules.activeOptionalRules[action.payload.id]!.options ??= [])[0] =
+          action.payload.option
+      }
+    }
   })