feat: upgrade rest of them

packages/website/src/components/Embeds/Boolean.tsx

@@ -1,16 +1,14 @@
-import { Switch } from '@radix-ui/themes';
-import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/embed/[embed]/_index';
-import { EmbedState } from '../../stores/embedState';
+import { Switch } from "@radix-ui/themes";
+import type { EmbedPreviewControllerProps } from "../../pages/[...locale]/embed/[embed]/_index";
+import { EmbedState } from "../../stores/embedState";
 
 export function Boolean({ configKey }: EmbedPreviewControllerProps) {
-  const mutateEmbedState = EmbedState.useMutation();
-
   return (
     <Switch
       variant="classic"
       checked={EmbedState.use((state) => state[configKey] as boolean)}
       onCheckedChange={() => {
-        mutateEmbedState((draft) => {
+        EmbedState.mutate((draft) => {
           draft[configKey] = !draft[configKey];
         });
       }}

packages/website/src/components/Embeds/Color.tsx

@@ -1,16 +1,15 @@
-import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/embed/[embed]/_index';
-import { EmbedState } from '../../stores/embedState';
-import { ColorControllerRaw } from './ColorControllerRaw';
+import type { EmbedPreviewControllerProps } from "../../pages/[...locale]/embed/[embed]/_index";
+import { EmbedState } from "../../stores/embedState";
+import { ColorControllerRaw } from "./ColorControllerRaw";
 
 export function Color({ configKey }: EmbedPreviewControllerProps) {
-  const mutateEmbedState = EmbedState.useMutation();
   const color = EmbedState.use((state) => state[configKey] as string);
 
   return (
     <ColorControllerRaw
       value={color}
       onValueChange={(value) => {
-        mutateEmbedState((draft) => {
+        EmbedState.mutate((draft) => {
           draft[configKey] = value;
         });
       }}

packages/website/src/components/Embeds/Enum.tsx

@@ -1,11 +1,11 @@
-import { Select } from '@radix-ui/themes';
-import { useLocale } from '../../hooks/useLocale';
-import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/embed/[embed]/_index';
-import { EmbedState } from '../../stores/embedState';
+import { Select } from "@radix-ui/themes";
+import { useLocale } from "../../hooks/useLocale";
+import type { EmbedPreviewControllerProps } from "../../pages/[...locale]/embed/[embed]/_index";
+import { EmbedState } from "../../stores/embedState";
 import type {
   EmbedConfigItemType,
   EmbedItemType,
-} from '../../stores/embedState/constants';
+} from "../../stores/embedState/constants";
 
 export function Enum({
   configKey,
@@ -13,14 +13,13 @@ export function Enum({
 }: EmbedPreviewControllerProps & {
   config: EmbedConfigItemType<EmbedItemType.Enum>;
 }) {
-  const mutateEmbedState = EmbedState.useMutation();
   const { locale } = useLocale();
 
   return (
     <Select.Root
       value={EmbedState.use((state) => state[configKey] as string)}
       onValueChange={(value) => {
-        mutateEmbedState((draft) => {
+        EmbedState.mutate((draft) => {
           draft[configKey] = value;
         });
       }}

packages/website/src/components/Embeds/GenerateURL.tsx

@@ -2,9 +2,9 @@ import {
   searchPlayersAcrossRegions,
   type AccountListItem,
   type AccountListWithServer,
-} from '@blitzkit/core';
-import { literals } from '@blitzkit/i18n/src/literals';
-import { CaretLeftIcon, Link2Icon, PersonIcon } from '@radix-ui/react-icons';
+} from "@blitzkit/core";
+import { literals } from "@blitzkit/i18n/src/literals";
+import { CaretLeftIcon, Link2Icon, PersonIcon } from "@radix-ui/react-icons";
 import {
   Button,
   Dialog,
@@ -13,15 +13,15 @@ import {
   Spinner,
   Text,
   TextField,
-} from '@radix-ui/themes';
-import { debounce } from 'lodash-es';
-import { useCallback, useRef, useState } from 'react';
-import { stringify } from 'urlon';
-import type { embedConfigurations } from '../../constants/embeds';
-import { useLocale } from '../../hooks/useLocale';
-import { EmbedState, type EmbedStateStore } from '../../stores/embedState';
-import { CopyButton } from '../CopyButton';
-import { SearchResults } from '../SearchResults';
+} from "@radix-ui/themes";
+import { debounce } from "lodash-es";
+import { useCallback, useRef, useState } from "react";
+import { stringify } from "urlon";
+import type { embedConfigurations } from "../../constants/embeds";
+import { useLocale } from "../../hooks/useLocale";
+import { EmbedState, type EmbedStateStore } from "../../stores/embedState";
+import { CopyButton } from "../CopyButton";
+import { SearchResults } from "../SearchResults";
 
 interface GenerateURLProps {
   embed: keyof typeof embedConfigurations;
@@ -31,7 +31,6 @@ export function GenerateURL({ embed }: GenerateURLProps) {
   const [searchDialogOpen, setSearchDialogOpen] = useState(false);
   const [copyDialogOpen, setCopyDialogOpen] = useState(false);
   const [copyUser, setCopyUser] = useState<AccountListItem | null>(null);
-  const embedStateStore = EmbedState.useStore();
   const input = useRef<HTMLInputElement>(null);
   const [searching, setSearching] = useState(false);
   const [results, setResults] = useState<AccountListWithServer>([]);
@@ -52,7 +51,7 @@ export function GenerateURL({ embed }: GenerateURLProps) {
       setSearching(false);
       setResults(results);
     }, 500),
-    [],
+    []
   );
   const handleChange = useCallback(() => {
     if (!input.current) return;
@@ -94,7 +93,7 @@ export function GenerateURL({ embed }: GenerateURLProps) {
           <TextField.Root
             variant="classic"
             mt="4"
-            style={{ width: '20rem' }}
+            style={{ width: "20rem" }}
             placeholder={strings.website.common.player_search.hint}
             ref={input}
             onChange={handleChange}
@@ -136,7 +135,7 @@ export function GenerateURL({ embed }: GenerateURLProps) {
           </Flex>
 
           <Dialog.Close>
-            <Button color="red" variant="outline" style={{ width: '100%' }}>
+            <Button color="red" variant="outline" style={{ width: "100%" }}>
               {strings.website.tools.embed.configuration.export.generate.cancel}
             </Button>
           </Dialog.Close>
@@ -144,7 +143,7 @@ export function GenerateURL({ embed }: GenerateURLProps) {
       </Dialog.Root>
 
       <Dialog.Root open={copyDialogOpen} onOpenChange={setCopyDialogOpen}>
-        <Dialog.Content style={{ width: 'fit-content' }}>
+        <Dialog.Content style={{ width: "fit-content" }}>
           <Flex direction="column" gap="1">
             <Heading size="5">
               {
@@ -156,7 +155,7 @@ export function GenerateURL({ embed }: GenerateURLProps) {
               {literals(
                 strings.website.tools.embed.configuration.export.generate
                   .success.info,
-                [`${copyUser?.nickname}`],
+                [`${copyUser?.nickname}`]
               )}
             </Text>
           </Flex>
@@ -170,7 +169,7 @@ export function GenerateURL({ embed }: GenerateURLProps) {
                 setSearchDialogOpen(true);
               }}
             >
-              <CaretLeftIcon />{' '}
+              <CaretLeftIcon />{" "}
               {
                 strings.website.tools.embed.configuration.export.generate
                   .success.back
@@ -181,12 +180,10 @@ export function GenerateURL({ embed }: GenerateURLProps) {
               copy={() => {
                 if (!copyUser) return;
 
-                const state = embedStateStore.getState();
-                const initial = embedStateStore.getInitialState();
                 const shallowState: EmbedStateStore = {};
 
-                Object.entries(state).forEach(([key, value]) => {
-                  if (value !== initial[key]) {
+                Object.entries(EmbedState.state).forEach(([key, value]) => {
+                  if (value !== EmbedState.initial[key]) {
                     shallowState[key] = value;
                   }
                 });
@@ -202,7 +199,7 @@ export function GenerateURL({ embed }: GenerateURLProps) {
                 return `${location.origin}/embed/${embed}/host?${searchParams.toString()}`;
               }}
             >
-              <Link2Icon />{' '}
+              <Link2Icon />{" "}
               {
                 strings.website.tools.embed.configuration.export.generate
                   .success.copy

packages/website/src/components/Embeds/Import.tsx

@@ -6,17 +6,16 @@ import {
   Text,
   TextField,
   Tooltip,
-} from '@radix-ui/themes';
-import { useRef, useState } from 'react';
-import { parse } from 'urlon';
-import { useLocale } from '../../hooks/useLocale';
-import { EmbedState } from '../../stores/embedState';
+} from "@radix-ui/themes";
+import { useRef, useState } from "react";
+import { parse } from "urlon";
+import { useLocale } from "../../hooks/useLocale";
+import { EmbedState } from "../../stores/embedState";
 
 export function Import() {
   const importInput = useRef<HTMLInputElement>(null);
   const [showInvalidURLPrompt, setShowInvalidURLPrompt] = useState(false);
   const [showConfirmation, setConfirmation] = useState(false);
-  const mutateEmbedState = EmbedState.useMutation();
   const { strings } = useLocale();
 
   return (
@@ -64,15 +63,15 @@ export function Import() {
 
               try {
                 const url = new URL(importInput.current.value);
-                const state = url.searchParams.get('state');
+                const state = url.searchParams.get("state");
                 if (state === null) throw undefined;
                 const json = parse(state);
 
-                mutateEmbedState((draft) => {
+                EmbedState.mutate((draft) => {
                   Object.assign(draft, json);
                 });
 
-                importInput.current.value = '';
+                importInput.current.value = "";
                 setConfirmation(true);
                 setTimeout(() => setConfirmation(false), 2000);
               } catch {

packages/website/src/components/Embeds/Radius.tsx

@@ -1,10 +1,8 @@
-import { Slider } from '@radix-ui/themes';
-import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/embed/[embed]/_index';
-import { EmbedState, type RadixRadius } from '../../stores/embedState';
+import { Slider } from "@radix-ui/themes";
+import type { EmbedPreviewControllerProps } from "../../pages/[...locale]/embed/[embed]/_index";
+import { EmbedState, type RadixRadius } from "../../stores/embedState";
 
 export function Radius({ configKey }: EmbedPreviewControllerProps) {
-  const mutateEmbedState = EmbedState.useMutation();
-
   return (
     <Slider
       variant="classic"
@@ -13,12 +11,12 @@ export function Radius({ configKey }: EmbedPreviewControllerProps) {
       value={[
         EmbedState.use((state) => {
           const radius = state[configKey] as RadixRadius;
-          return radius === 'full' ? 5 : parseInt(radius);
+          return radius === "full" ? 5 : parseInt(radius);
         }),
       ]}
       onValueChange={([value]) => {
-        mutateEmbedState((draft) => {
-          draft[configKey] = value === 5 ? 'full' : `${value}`;
+        EmbedState.mutate((draft) => {
+          draft[configKey] = value === 5 ? "full" : `${value}`;
         });
       }}
     />

packages/website/src/components/Embeds/RichText.tsx

@@ -1,21 +1,18 @@
-import { FontBoldIcon, FontSizeIcon } from '@radix-ui/react-icons';
-import { Flex, Slider, Text } from '@radix-ui/themes';
-import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/embed/[embed]/_index';
-import { EmbedState, type RadixSizeWithout0 } from '../../stores/embedState';
+import { FontBoldIcon, FontSizeIcon } from "@radix-ui/react-icons";
+import { Flex, Slider, Text } from "@radix-ui/themes";
+import type { EmbedPreviewControllerProps } from "../../pages/[...locale]/embed/[embed]/_index";
+import { EmbedState, type RadixSizeWithout0 } from "../../stores/embedState";
 import {
   radixTextWeights,
   type EmbedConfigItemType,
   type EmbedItemType,
-} from '../../stores/embedState/constants';
-import { ColorControllerRaw } from './ColorControllerRaw';
+} from "../../stores/embedState/constants";
+import { ColorControllerRaw } from "./ColorControllerRaw";
 
 export function RichText({ configKey }: EmbedPreviewControllerProps) {
-  const mutateEmbedState = EmbedState.useMutation();
   const state = EmbedState.use(
     (state) =>
-      state[
-        configKey
-      ] as EmbedConfigItemType<EmbedItemType.RichText>['default'],
+      state[configKey] as EmbedConfigItemType<EmbedItemType.RichText>["default"]
   );
 
   return (
@@ -24,11 +21,11 @@ export function RichText({ configKey }: EmbedPreviewControllerProps) {
         <ColorControllerRaw
           value={state.color}
           onValueChange={(value) => {
-            mutateEmbedState((draft) => {
+            EmbedState.mutate((draft) => {
               (
                 draft[
                   configKey
-                ] as EmbedConfigItemType<EmbedItemType.RichText>['default']
+                ] as EmbedConfigItemType<EmbedItemType.RichText>["default"]
               ).color = value;
             });
           }}
@@ -45,11 +42,11 @@ export function RichText({ configKey }: EmbedPreviewControllerProps) {
           max={9}
           value={[Number(state.size)]}
           onValueChange={([value]) => {
-            mutateEmbedState((draft) => {
+            EmbedState.mutate((draft) => {
               (
                 draft[
                   configKey
-                ] as EmbedConfigItemType<EmbedItemType.RichText>['default']
+                ] as EmbedConfigItemType<EmbedItemType.RichText>["default"]
               ).size = `${value}` as RadixSizeWithout0;
             });
           }}
@@ -66,11 +63,11 @@ export function RichText({ configKey }: EmbedPreviewControllerProps) {
           max={radixTextWeights.length - 1}
           value={[radixTextWeights.indexOf(state.weight)]}
           onValueChange={([value]) => {
-            mutateEmbedState((draft) => {
+            EmbedState.mutate((draft) => {
               (
                 draft[
                   configKey
-                ] as EmbedConfigItemType<EmbedItemType.RichText>['default']
+                ] as EmbedConfigItemType<EmbedItemType.RichText>["default"]
               ).weight = radixTextWeights[value];
             });
           }}

packages/website/src/components/Embeds/Size.tsx

@@ -1,10 +1,8 @@
-import { Slider } from '@radix-ui/themes';
-import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/embed/[embed]/_index';
-import { EmbedState, type RadixSize } from '../../stores/embedState';
+import { Slider } from "@radix-ui/themes";
+import type { EmbedPreviewControllerProps } from "../../pages/[...locale]/embed/[embed]/_index";
+import { EmbedState, type RadixSize } from "../../stores/embedState";
 
 export function Size({ configKey }: EmbedPreviewControllerProps) {
-  const mutateEmbedState = EmbedState.useMutation();
-
   return (
     <Slider
       variant="classic"
@@ -14,7 +12,7 @@ export function Size({ configKey }: EmbedPreviewControllerProps) {
         EmbedState.use((state) => parseInt(state[configKey] as RadixSize)),
       ]}
       onValueChange={([value]) => {
-        mutateEmbedState((draft) => {
+        EmbedState.mutate((draft) => {
           draft[configKey] = `${value}`;
         });
       }}

packages/website/src/components/Embeds/SizeWithout0.tsx

@@ -1,10 +1,8 @@
-import { Slider } from '@radix-ui/themes';
-import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/embed/[embed]/_index';
-import { EmbedState, type RadixSizeWithout0 } from '../../stores/embedState';
+import { Slider } from "@radix-ui/themes";
+import type { EmbedPreviewControllerProps } from "../../pages/[...locale]/embed/[embed]/_index";
+import { EmbedState, type RadixSizeWithout0 } from "../../stores/embedState";
 
 export function SizeWithout0({ configKey }: EmbedPreviewControllerProps) {
-  const mutateEmbedState = EmbedState.useMutation();
-
   return (
     <Slider
       variant="classic"
@@ -12,11 +10,11 @@ export function SizeWithout0({ configKey }: EmbedPreviewControllerProps) {
       max={9}
       value={[
         EmbedState.use((state) =>
-          parseInt(state[configKey] as RadixSizeWithout0),
+          parseInt(state[configKey] as RadixSizeWithout0)
         ),
       ]}
       onValueChange={([value]) => {
-        mutateEmbedState((draft) => {
+        EmbedState.mutate((draft) => {
           draft[configKey] = `${value}`;
         });
       }}

packages/website/src/components/Embeds/Slider.tsx

@@ -1,10 +1,10 @@
-import { Slider as RadixSlider } from '@radix-ui/themes';
-import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/embed/[embed]/_index';
-import { EmbedState, type RadixSize } from '../../stores/embedState';
+import { Slider as RadixSlider } from "@radix-ui/themes";
+import type { EmbedPreviewControllerProps } from "../../pages/[...locale]/embed/[embed]/_index";
+import { EmbedState, type RadixSize } from "../../stores/embedState";
 import type {
   EmbedConfigItemType,
   EmbedItemType,
-} from '../../stores/embedState/constants';
+} from "../../stores/embedState/constants";
 
 export function Slider({
   configKey,
@@ -12,8 +12,6 @@ export function Slider({
 }: EmbedPreviewControllerProps & {
   config: EmbedConfigItemType<EmbedItemType.Slider>;
 }) {
-  const mutateEmbedState = EmbedState.useMutation();
-
   return (
     <RadixSlider
       variant="classic"
@@ -23,7 +21,7 @@ export function Slider({
         EmbedState.use((state) => parseInt(state[configKey] as RadixSize)),
       ]}
       onValueChange={([value]) => {
-        mutateEmbedState((draft) => {
+        EmbedState.mutate((draft) => {
           draft[configKey] = value;
         });
       }}

packages/website/src/components/Embeds/TextController.tsx

@@ -1,17 +1,15 @@
-import { TextField } from '@radix-ui/themes';
-import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/embed/[embed]/_index';
-import { EmbedState } from '../../stores/embedState';
+import { TextField } from "@radix-ui/themes";
+import type { EmbedPreviewControllerProps } from "../../pages/[...locale]/embed/[embed]/_index";
+import { EmbedState } from "../../stores/embedState";
 
 export function TextController({ configKey }: EmbedPreviewControllerProps) {
-  const mutateEmbedState = EmbedState.useMutation();
-
   return (
     <TextField.Root
       variant="classic"
       placeholder="Empty"
       value={EmbedState.use((state) => state[configKey] as string)}
       onChange={(event) => {
-        mutateEmbedState((draft) => {
+        EmbedState.mutate((draft) => {
           draft[configKey] = event.target.value;
         });
       }}