update state when user deselects

src/components/settings/preference-card.tsx

@@ -27,15 +27,15 @@ export function PreferenceCard({
   });
   const send = useSend();
 
-  const handleToggle = (value: boolean) => {
-    const newValue = toggleValue === (value ? "yes" : "no") ? undefined : value;
+  const handleToggle = (value: string) => {
+    let newValue = value === '' ? null : value === 'yes' ? true : false;
     send({
       type: "PREFERENCE_CHANGE",
       preference: preferenceKey,
-      value: newValue,
+      ...(typeof newValue === "boolean" && { value: newValue }),
     });
     $preferences.setKey(preferenceKey, newValue);
-    setToggleValue(newValue ? "yes" : "no");
+    setToggleValue(value);
   };
 
   return (
@@ -48,7 +48,7 @@ export function PreferenceCard({
       <ToggleGroup
         type="single"
         value={toggleValue}
-        onValueChange={(value) => handleToggle(value === "yes")}
+        onValueChange={(value) => handleToggle(value)}
       >
         <ToggleGroupItem variant="outline" value="no">
           No

src/schema.ts

@@ -187,26 +187,26 @@ export const DietSettingsSchema = z.object({
 });
 
 export const TasteSettingsSchema = z.object({
-  preferSaltyOverSweet: z.boolean().optional(), // "Prefer salty over sweet snacks?"
-  preferChocolateyOverFruity: z.boolean().optional(), // "Prefer chocolatey over fruity desserts?"
-  enjoyRawOnions: z.boolean().optional(), // "Enjoy raw onions in dishes?"
-  needSpicyElements: z.boolean().optional(), // "Need spicy elements in meals?"
-  preferBlackCoffee: z.boolean().optional(), // "Prefer black coffee over sweetened?"
-  likeLemonInBeverages: z.boolean().optional(), // "Like lemon in beverages?"
-  favorBoldCheeses: z.boolean().optional(), // "Favor bold cheeses over mild?"
-  preferHeavilySeasoned: z.boolean().optional(), // "Prefer heavily seasoned dishes?"
-  enjoyBitterFoods: z.boolean().optional(), // "Enjoy bitter foods like dark chocolate?"
-  preferRawVegetables: z.boolean().optional(), // "Prefer raw vegetables over cooked?"
-  breadBetterWithButterOrOil: z.boolean().optional(), // "Bread better with butter or oil?"
-  preferCreamyOverChunkySoups: z.boolean().optional(), // "Prefer creamy over chunky soups?"
-  chooseRiceOverPotatoes: z.boolean().optional(), // "Choose rice over potatoes as a side?"
-  preferScrambledOverFriedEggs: z.boolean().optional(), // "Prefer scrambled eggs over fried?"
-  likeGrilledFishOverFried: z.boolean().optional(), // "Like grilled fish over fried?"
-  preferFruitAsSnack: z.boolean().optional(), // "Prefer fruit as a snack rather than in meals?"
-  dessertBetterWarm: z.boolean().optional(), // "Dessert better warm than cold?"
-  enjoyGingerInFood: z.boolean().optional(), // "Enjoy the taste of ginger in food?"
-  saladAppealingWithoutDressing: z.boolean().optional(), // "Salad appealing without dressing?"
-  preferPastaWithRedSauce: z.boolean().optional(), // "Prefer pasta with red sauce over white?"
+  preferSaltyOverSweet: z.boolean().nullable(), // "Prefer salty over sweet snacks?"
+  preferChocolateyOverFruity: z.boolean().nullable(), // "Prefer chocolatey over fruity desserts?"
+  enjoyRawOnions: z.boolean().nullable(), // "Enjoy raw onions in dishes?"
+  needSpicyElements: z.boolean().nullable(), // "Need spicy elements in meals?"
+  preferBlackCoffee: z.boolean().nullable(), // "Prefer black coffee over sweetened?"
+  likeLemonInBeverages: z.boolean().nullable(), // "Like lemon in beverages?"
+  favorBoldCheeses: z.boolean().nullable(), // "Favor bold cheeses over mild?"
+  preferHeavilySeasoned: z.boolean().nullable(), // "Prefer heavily seasoned dishes?"
+  enjoyBitterFoods: z.boolean().nullable(), // "Enjoy bitter foods like dark chocolate?"
+  preferRawVegetables: z.boolean().nullable(), // "Prefer raw vegetables over cooked?"
+  breadBetterWithButterOrOil: z.boolean().nullable(), // "Bread better with butter or oil?"
+  preferCreamyOverChunkySoups: z.boolean().nullable(), // "Prefer creamy over chunky soups?"
+  chooseRiceOverPotatoes: z.boolean().nullable(), // "Choose rice over potatoes as a side?"
+  preferScrambledOverFriedEggs: z.boolean().nullable(), // "Prefer scrambled eggs over fried?"
+  likeGrilledFishOverFried: z.boolean().nullable(), // "Like grilled fish over fried?"
+  preferFruitAsSnack: z.boolean().nullable(), // "Prefer fruit as a snack rather than in meals?"
+  dessertBetterWarm: z.boolean().nullable(), // "Dessert better warm than cold?"
+  enjoyGingerInFood: z.boolean().nullable(), // "Enjoy the taste of ginger in food?"
+  saladAppealingWithoutDressing: z.boolean().nullable(), // "Salad appealing without dressing?"
+  preferPastaWithRedSauce: z.boolean().nullable(), // "Prefer pasta with red sauce over white?"
 });
 
 export const ExperienceLevelSchema = z.enum([

src/stores/settings.ts

@@ -59,26 +59,26 @@ export const $diet = map<DietSettings>({
 });
 
 export const $preferences = map<TasteSettings>({
-  preferSaltyOverSweet: undefined,
-  preferChocolateyOverFruity: undefined,
-  enjoyRawOnions: undefined,
-  needSpicyElements: undefined,
-  preferBlackCoffee: undefined,
-  likeLemonInBeverages: undefined,
-  favorBoldCheeses: undefined,
-  preferHeavilySeasoned: undefined,
-  enjoyBitterFoods: undefined,
-  preferRawVegetables: undefined,
-  breadBetterWithButterOrOil: undefined,
-  preferCreamyOverChunkySoups: undefined,
-  chooseRiceOverPotatoes: undefined,
-  preferScrambledOverFriedEggs: undefined,
-  likeGrilledFishOverFried: undefined,
-  preferFruitAsSnack: undefined,
-  dessertBetterWarm: undefined,
-  enjoyGingerInFood: undefined,
-  saladAppealingWithoutDressing: undefined,
-  preferPastaWithRedSauce: undefined,
+  preferSaltyOverSweet: null,
+  preferChocolateyOverFruity: null,
+  enjoyRawOnions: null,
+  needSpicyElements: null,
+  preferBlackCoffee: null,
+  likeLemonInBeverages: null,
+  favorBoldCheeses: null,
+  preferHeavilySeasoned: null,
+  enjoyBitterFoods: null,
+  preferRawVegetables: null,
+  breadBetterWithButterOrOil: null,
+  preferCreamyOverChunkySoups: null,
+  chooseRiceOverPotatoes: null,
+  preferScrambledOverFriedEggs: null,
+  likeGrilledFishOverFried: null,
+  preferFruitAsSnack: null,
+  dessertBetterWarm: null,
+  enjoyGingerInFood: null,
+  saladAppealingWithoutDressing: null,
+  preferPastaWithRedSauce: null,
 });