feat: upgrade rest of them

packages/website/src/pages/[...locale]/auth/[provider]/_index.tsx

@@ -1,48 +1,38 @@
-import { useEffect } from 'react';
-import { App } from '../../../../stores/app';
+import { useEffect } from "react";
+import { App } from "../../../../stores/app";
 
-export const AUTH_PROVIDERS = ['wargaming'] as const;
+export const AUTH_PROVIDERS = ["wargaming"] as const;
 
 export type AuthProvider = (typeof AUTH_PROVIDERS)[number];
 
 export const AUTH_PROVIDER_NAMES: Record<AuthProvider, string> = {
-  wargaming: 'Wargaming',
+  wargaming: "Wargaming",
 };
 
 interface AuthorizeProps {
   provider: AuthProvider;
 }
 
-export function Authorize(props: AuthorizeProps) {
-  return (
-    <App.Provider>
-      <Content {...props} />
-    </App.Provider>
-  );
-}
-
-function Content({ provider }: AuthorizeProps) {
-  const mutateApp = App.useMutation();
-
+export function Authorize({ provider }: AuthorizeProps) {
   useEffect(() => {
     (async () => {
       const searchParams = new URLSearchParams(window.location.search);
 
       switch (provider) {
-        case 'wargaming': {
+        case "wargaming": {
           if (
-            !searchParams.has('expires_at') ||
-            !searchParams.has('access_token') ||
-            !searchParams.has('account_id')
+            !searchParams.has("expires_at") ||
+            !searchParams.has("access_token") ||
+            !searchParams.has("account_id")
           ) {
             break;
           }
 
-          mutateApp((draft) => {
+          App.mutate((draft) => {
             draft.logins.wargaming = {
-              expires: Number(searchParams.get('expires_at')) * 1000,
-              token: searchParams.get('access_token')!,
-              id: Number(searchParams.get('account_id'))!,
+              expires: Number(searchParams.get("expires_at")) * 1000,
+              token: searchParams.get("access_token")!,
+              id: Number(searchParams.get("account_id"))!,
             };
           });
 
@@ -53,7 +43,7 @@ function Content({ provider }: AuthorizeProps) {
           throw new Error(`Unknown provider: ${provider}`);
       }
 
-      window.location.href = searchParams.get('return') ?? '/';
+      window.location.href = searchParams.get("return") ?? "/";
     })();
   }, []);
 

packages/website/src/pages/[...locale]/compare/_index.tsx

@@ -17,9 +17,7 @@ import {
   LocaleProvider,
   useLocale,
 } from "../../../hooks/useLocale";
-import { App } from "../../../stores/app";
 import { CompareEphemeral } from "../../../stores/compareEphemeral";
-import { TankopediaPersistent } from "../../../stores/tankopediaPersistent";
 
 const [
   modelDefinitions,
@@ -40,11 +38,7 @@ export function Page({ locale }: LocaleAcceptorProps) {
 
   return (
     <LocaleProvider locale={locale}>
-      <App.Provider>
-        <TankopediaPersistent.Provider>
-          <Content />
-        </TankopediaPersistent.Provider>
-      </App.Provider>
+      <Content />
     </LocaleProvider>
   );
 }

packages/website/src/pages/[...locale]/embed/[embed]/_index.tsx

@@ -5,36 +5,35 @@ import {
   ResetIcon,
   TimerIcon,
   WidthIcon,
-} from '@radix-ui/react-icons';
-import { Box, Button, Flex, Heading, ScrollArea, Text } from '@radix-ui/themes';
-import { useEffect, useRef, useState, type ReactNode } from 'react';
-import { CopyButton } from '../../../../components/CopyButton';
-import { Boolean } from '../../../../components/Embeds/Boolean';
-import { Color } from '../../../../components/Embeds/Color';
-import { Enum } from '../../../../components/Embeds/Enum';
-import { GenerateURL } from '../../../../components/Embeds/GenerateURL';
-import { Import } from '../../../../components/Embeds/Import';
-import { PreviewWrapper } from '../../../../components/Embeds/PreviewWrapper';
-import { Radius } from '../../../../components/Embeds/Radius';
-import { RichText } from '../../../../components/Embeds/RichText';
-import { Size } from '../../../../components/Embeds/Size';
-import { SizeWithout0 } from '../../../../components/Embeds/SizeWithout0';
-import { Slider } from '../../../../components/Embeds/Slider';
-import { TextController } from '../../../../components/Embeds/TextController';
-import { PageWrapper } from '../../../../components/PageWrapper';
+} from "@radix-ui/react-icons";
+import { Box, Button, Flex, Heading, ScrollArea, Text } from "@radix-ui/themes";
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { CopyButton } from "../../../../components/CopyButton";
+import { Boolean } from "../../../../components/Embeds/Boolean";
+import { Color } from "../../../../components/Embeds/Color";
+import { Enum } from "../../../../components/Embeds/Enum";
+import { GenerateURL } from "../../../../components/Embeds/GenerateURL";
+import { Import } from "../../../../components/Embeds/Import";
+import { PreviewWrapper } from "../../../../components/Embeds/PreviewWrapper";
+import { Radius } from "../../../../components/Embeds/Radius";
+import { RichText } from "../../../../components/Embeds/RichText";
+import { Size } from "../../../../components/Embeds/Size";
+import { SizeWithout0 } from "../../../../components/Embeds/SizeWithout0";
+import { Slider } from "../../../../components/Embeds/Slider";
+import { TextController } from "../../../../components/Embeds/TextController";
+import { PageWrapper } from "../../../../components/PageWrapper";
 import {
   embedConfigurations,
   extractEmbedConfigDefaults,
-} from '../../../../constants/embeds';
-import { NAVBAR_HEIGHT } from '../../../../constants/navbar';
+} from "../../../../constants/embeds";
+import { NAVBAR_HEIGHT } from "../../../../constants/navbar";
 import {
   LocaleProvider,
   useLocale,
   type LocaleAcceptorProps,
-} from '../../../../hooks/useLocale';
-import { App } from '../../../../stores/app';
-import { EmbedState, type EmbedConfig } from '../../../../stores/embedState';
-import { EmbedItemType } from '../../../../stores/embedState/constants';
+} from "../../../../hooks/useLocale";
+import { EmbedState, type EmbedConfig } from "../../../../stores/embedState";
+import { EmbedItemType } from "../../../../stores/embedState/constants";
 
 export interface EmbedPreviewControllerProps {
   configKey: string;
@@ -47,31 +46,28 @@ interface PageProps {
 export function Page({ embed, locale }: PageProps & LocaleAcceptorProps) {
   const config = embedConfigurations[embed];
 
+  EmbedState.useInitialization(extractEmbedConfigDefaults(config));
+
   return (
     <LocaleProvider locale={locale}>
-      <App.Provider>
-        <EmbedState.Provider data={extractEmbedConfigDefaults(config)}>
-          <Content embed={embed} />
-        </EmbedState.Provider>
-      </App.Provider>
+      <Content embed={embed} />
     </LocaleProvider>
   );
 }
 
 function Content({ embed }: PageProps) {
-  const embedStateStore = EmbedState.useStore();
   const config = embedConfigurations[embed] as EmbedConfig;
   const [backgroundImage, setBackgroundImage] = useState(
-    '/assets/images/backgrounds/embed-default.webp',
+    "/assets/images/backgrounds/embed-default.webp"
   );
   const fileInput = useRef<HTMLInputElement>();
   const { strings } = useLocale();
 
   useEffect(() => {
-    fileInput.current = document.createElement('input');
-    fileInput.current.type = 'file';
-    fileInput.current.style.display = 'none';
-    fileInput.current.accept = 'image/*';
+    fileInput.current = document.createElement("input");
+    fileInput.current.type = "file";
+    fileInput.current.style.display = "none";
+    fileInput.current.accept = "image/*";
     fileInput.current.onchange = (event) => {
       const file = (event.target as HTMLInputElement).files?.[0];
       if (!file) return;
@@ -84,7 +80,7 @@ function Content({ embed }: PageProps) {
       <Flex>
         <ScrollArea
           scrollbars="vertical"
-          style={{ height: '100%', maxWidth: 320 }}
+          style={{ height: "100%", maxWidth: 320 }}
         >
           <Flex direction="column" gap="2" p="4">
             <Import />
@@ -102,7 +98,7 @@ function Content({ embed }: PageProps) {
               <CopyButton
                 variant="outline"
                 copy={() =>
-                  'body { margin: 0; background-color: transparent; overflow: hidden; }'
+                  "body { margin: 0; background-color: transparent; overflow: hidden; }"
                 }
               >
                 <CodeIcon />
@@ -110,19 +106,19 @@ function Content({ embed }: PageProps) {
               </CopyButton>
               <CopyButton
                 variant="outline"
-                copy={() => `${embedStateStore.getState().width}`}
+                copy={() => `${EmbedState.state.width}`}
               >
                 <WidthIcon />
                 {strings.website.tools.embed.configuration.export.width}
               </CopyButton>
               <CopyButton
                 variant="outline"
-                copy={() => `${embedStateStore.getState().height}`}
+                copy={() => `${EmbedState.state.height}`}
               >
                 <HeightIcon />
                 {strings.website.tools.embed.configuration.export.height}
               </CopyButton>
-              <CopyButton variant="outline" copy={() => '1'}>
+              <CopyButton variant="outline" copy={() => "1"}>
                 <TimerIcon />
                 {strings.website.tools.embed.configuration.export.framerate}
               </CopyButton>
@@ -136,13 +132,10 @@ function Content({ embed }: PageProps) {
                 color="red"
                 variant="ghost"
                 onClick={() => {
-                  embedStateStore.setState(
-                    embedStateStore.getInitialState(),
-                    true,
-                  );
+                  EmbedState.set(EmbedState.initial);
                 }}
               >
-                <ResetIcon />{' '}
+                <ResetIcon />{" "}
                 {strings.website.tools.embed.configuration.customize.reset}
               </Button>
             </Flex>
@@ -211,11 +204,11 @@ function Content({ embed }: PageProps) {
               return (
                 <Flex
                   key={configKey}
-                  direction={oneLiner ? undefined : 'column'}
-                  gap={oneLiner ? '2' : '1'}
-                  justify={oneLiner ? 'between' : undefined}
-                  mb={oneLiner ? '2' : '4'}
-                  pb={item.pad ? '6' : undefined}
+                  direction={oneLiner ? undefined : "column"}
+                  gap={oneLiner ? "2" : "1"}
+                  justify={oneLiner ? "between" : undefined}
+                  mb={oneLiner ? "2" : "4"}
+                  pb={item.pad ? "6" : undefined}
                 >
                   <Text>
                     {
@@ -229,7 +222,7 @@ function Content({ embed }: PageProps) {
                     gap="2"
                     align="center"
                     flexGrow="1"
-                    justify={oneLiner ? 'end' : undefined}
+                    justify={oneLiner ? "end" : undefined}
                   >
                     {control}
                   </Flex>
@@ -250,9 +243,9 @@ function Content({ embed }: PageProps) {
             direction="column"
             height="100%"
             style={{
-              borderRadius: 'var(--radius-3)',
-              overflow: 'hidden',
-              boxShadow: 'var(--shadow-3)',
+              borderRadius: "var(--radius-3)",
+              overflow: "hidden",
+              boxShadow: "var(--shadow-3)",
             }}
           >
             <Flex
@@ -261,7 +254,7 @@ function Content({ embed }: PageProps) {
               p="2"
               pl="3"
               style={{
-                backgroundColor: 'var(--color-panel-solid)',
+                backgroundColor: "var(--color-panel-solid)",
               }}
             >
               <Text color="gray">

packages/website/src/pages/[...locale]/embed/[embed]/host/_index.tsx

@@ -1,22 +1,22 @@
-import { Box } from '@radix-ui/themes';
-import { useMemo } from 'react';
-import { parse } from 'urlon';
-import { BlitzKitTheme } from '../../../../../components/BlitzKitTheme';
+import { Box } from "@radix-ui/themes";
+import { useMemo } from "react";
+import { parse } from "urlon";
+import { BlitzKitTheme } from "../../../../../components/BlitzKitTheme";
 import {
   embedConfigurations,
   embedRenderers,
   extractEmbedConfigDefaults,
-} from '../../../../../constants/embeds';
+} from "../../../../../constants/embeds";
 import {
   LocaleProvider,
   type LocaleAcceptorProps,
-} from '../../../../../hooks/useLocale';
+} from "../../../../../hooks/useLocale";
 import {
   EmbedState,
   type EmbedConfig,
   type ExtractEmbedConfigTypes,
-} from '../../../../../stores/embedState';
-import { useEmbedStateCurry } from '../../../../../stores/embedState/utilities';
+} from "../../../../../stores/embedState";
+import { useEmbedStateCurry } from "../../../../../stores/embedState/utilities";
 
 interface PageProps {
   embed: keyof typeof embedConfigurations;
@@ -25,7 +25,7 @@ interface PageProps {
 export function Page({ embed, locale }: PageProps & LocaleAcceptorProps) {
   const state = useMemo(() => {
     const params = new URLSearchParams(window.location.search);
-    const stateRaw = params.get('state');
+    const stateRaw = params.get("state");
     const partialState = stateRaw === null ? {} : parse(stateRaw);
     const state = {
       ...extractEmbedConfigDefaults(embedConfigurations[embed]),
@@ -35,11 +35,11 @@ export function Page({ embed, locale }: PageProps & LocaleAcceptorProps) {
     return state;
   }, [embed]);
 
+  EmbedState.useInitialization(state);
+
   return (
     <LocaleProvider locale={locale}>
-      <EmbedState.Provider data={state}>
-        <Content embed={embed} />
-      </EmbedState.Provider>
+      <Content embed={embed} />
     </LocaleProvider>
   );
 }
@@ -47,11 +47,11 @@ export function Page({ embed, locale }: PageProps & LocaleAcceptorProps) {
 function Content({ embed }: PageProps) {
   const Renderer = embedRenderers[embed];
   const { useEmbedState } = useEmbedStateCurry();
-  const width = useEmbedState('width');
-  const height = useEmbedState('height');
+  const width = useEmbedState("width");
+  const height = useEmbedState("height");
 
   return (
-    <BlitzKitTheme style={{ background: 'transparent' }}>
+    <BlitzKitTheme style={{ background: "transparent" }}>
       <Box width={`${width}px`} height={`${height}px`} overflow="hidden">
         <Renderer />
       </Box>

packages/website/src/pages/[...locale]/embed/_index.tsx

@@ -1,26 +1,19 @@
-import { Box, Flex, Link, Text } from '@radix-ui/themes';
-import { PreviewWrapper } from '../../../components/Embeds/PreviewWrapper';
-import { LinkI18n } from '../../../components/LinkI18n';
-import { PageWrapper } from '../../../components/PageWrapper';
-import {
-  embedConfigurations,
-  extractEmbedConfigDefaults,
-} from '../../../constants/embeds';
-import { Var } from '../../../core/radix/var';
+import { Box, Flex, Link, Text } from "@radix-ui/themes";
+import { PreviewWrapper } from "../../../components/Embeds/PreviewWrapper";
+import { LinkI18n } from "../../../components/LinkI18n";
+import { PageWrapper } from "../../../components/PageWrapper";
+import { embedConfigurations } from "../../../constants/embeds";
+import { Var } from "../../../core/radix/var";
 import {
   type LocaleAcceptorProps,
   LocaleProvider,
   useLocale,
-} from '../../../hooks/useLocale';
-import { App } from '../../../stores/app';
-import { EmbedState } from '../../../stores/embedState';
+} from "../../../hooks/useLocale";
 
 export function Page({ locale }: LocaleAcceptorProps) {
   return (
     <LocaleProvider locale={locale}>
-      <App.Provider>
-        <Content />
-      </App.Provider>
+      <Content />
     </LocaleProvider>
   );
 }
@@ -31,7 +24,7 @@ function Content() {
   return (
     <PageWrapper color="red">
       <Text align="center" mt="3">
-        {strings.website.tools.embed.coming_soon}{' '}
+        {strings.website.tools.embed.coming_soon}{" "}
         <Link
           underline="always"
           href="https://discord.gg/nDt7AjGJQH"
@@ -42,61 +35,56 @@ function Content() {
       </Text>
 
       <Flex justify="center">
-        {Object.entries(embedConfigurations).map(([embed, config]) => (
-          <EmbedState.Provider
-            key={embed}
-            data={extractEmbedConfigDefaults(config)}
+        {Object.keys(embedConfigurations).map((embed) => (
+          <LinkI18n
+            locale={locale}
+            href={`/embed/${embed}`}
+            color="gray"
+            highContrast
+            style={{
+              width: "fit-content",
+              height: "fit-content",
+            }}
+            underline="hover"
           >
-            <LinkI18n
-              locale={locale}
-              href={`/embed/${embed}`}
-              color="gray"
-              highContrast
+            <Flex
+              direction="column"
+              overflow="hidden"
               style={{
-                width: 'fit-content',
-                height: 'fit-content',
+                borderRadius: Var("radius-4"),
+                backgroundColor: Var("color-panel-solid"),
+                boxShadow: Var("shadow-3"),
               }}
-              underline="hover"
             >
-              <Flex
-                direction="column"
+              <Flex justify="center" p="2">
+                <Text>
+                  {
+                    strings.website.tools.embed.types[
+                      embed as keyof typeof strings.website.tools.embed.types
+                    ].name
+                  }
+                </Text>
+              </Flex>
+
+              <Box
+                width="20rem"
+                height="20rem"
                 overflow="hidden"
+                position="relative"
                 style={{
-                  borderRadius: Var('radius-4'),
-                  backgroundColor: Var('color-panel-solid'),
-                  boxShadow: Var('shadow-3'),
+                  backgroundImage:
+                    "url(/assets/images/backgrounds/embed-default.webp)",
+                  backgroundSize: "cover",
+                  backgroundPosition: "center",
                 }}
               >
-                <Flex justify="center" p="2">
-                  <Text>
-                    {
-                      strings.website.tools.embed.types[
-                        embed as keyof typeof strings.website.tools.embed.types
-                      ].name
-                    }
-                  </Text>
-                </Flex>
-
-                <Box
-                  width="20rem"
-                  height="20rem"
-                  overflow="hidden"
-                  position="relative"
-                  style={{
-                    backgroundImage:
-                      'url(/assets/images/backgrounds/embed-default.webp)',
-                    backgroundSize: 'cover',
-                    backgroundPosition: 'center',
-                  }}
-                >
-                  <PreviewWrapper
-                    naked
-                    name={embed as keyof typeof embedConfigurations}
-                  />
-                </Box>
-              </Flex>
-            </LinkI18n>
-          </EmbedState.Provider>
+                <PreviewWrapper
+                  naked
+                  name={embed as keyof typeof embedConfigurations}
+                />
+              </Box>
+            </Flex>
+          </LinkI18n>
         ))}
       </Flex>
     </PageWrapper>

packages/website/src/pages/[...locale]/guess/_index.tsx

@@ -5,7 +5,6 @@ import { Guesser } from "../../../components/Guesser";
 import { GuessRenderer } from "../../../components/GuessRenderer";
 import { GuessRendererLoader } from "../../../components/GuessRendererLoader";
 import { awaitableModelDefinitions } from "../../../core/awaitables/modelDefinitions";
-import { awaitableProvisionDefinitions } from "../../../core/awaitables/provisionDefinitions";
 import { awaitableTankDefinitions } from "../../../core/awaitables/tankDefinitions";
 import {
   type LocaleAcceptorProps,
@@ -16,12 +15,10 @@ import { Duel } from "../../../stores/duel";
 import { Guess, GuessState } from "../../../stores/guess";
 import { Tankopedia } from "../../../stores/tankopedia";
 
-const [tankDefinitions, modelDefinitions, provisionDefinitions] =
-  await Promise.all([
-    awaitableTankDefinitions,
-    awaitableModelDefinitions,
-    awaitableProvisionDefinitions,
-  ]);
+const [tankDefinitions, modelDefinitions] = await Promise.all([
+  awaitableTankDefinitions,
+  awaitableModelDefinitions,
+]);
 
 const ids = Object.keys(tankDefinitions.tanks);
 
@@ -43,12 +40,9 @@ function Container() {
   const model = modelDefinitions.models[tank.id];
 
   Tankopedia.useInitialization(model);
+  Duel.useInitialization({ tank, model });
 
-  return (
-    <Duel.Provider data={{ tank, model, provisionDefinitions }}>
-      <Content />
-    </Duel.Provider>
-  );
+  return <Content />;
 }
 
 function Content() {

packages/website/src/pages/[...locale]/performance/_index.tsx

@@ -1,23 +1,20 @@
-import { PageWrapper } from '../../../components/PageWrapper';
-import { PerformanceInfo } from '../../../components/Performance/PerformanceInfo';
-import { PlayerCountControl } from '../../../components/Performance/PlayerCountControl';
-import { TankTable } from '../../../components/Performance/Table';
-import { FilterControl } from '../../../components/TankSearch/components/FilterControl';
+import { PageWrapper } from "../../../components/PageWrapper";
+import { PerformanceInfo } from "../../../components/Performance/PerformanceInfo";
+import { PlayerCountControl } from "../../../components/Performance/PlayerCountControl";
+import { TankTable } from "../../../components/Performance/Table";
+import { FilterControl } from "../../../components/TankSearch/components/FilterControl";
 import {
   LocaleProvider,
   type LocaleAcceptorProps,
-} from '../../../hooks/useLocale';
-import { TankPerformanceSort } from '../../../stores/tankPerformanceSort';
-import type { MaybeSkeletonComponentProps } from '../../../types/maybeSkeletonComponentProps';
+} from "../../../hooks/useLocale";
+import type { MaybeSkeletonComponentProps } from "../../../types/maybeSkeletonComponentProps";
 
 type PageProps = MaybeSkeletonComponentProps & LocaleAcceptorProps;
 
 export function Page({ skeleton, locale }: PageProps) {
   return (
     <LocaleProvider locale={locale}>
-      <TankPerformanceSort.Provider>
-        <Content skeleton={skeleton} />
-      </TankPerformanceSort.Provider>
+      <Content skeleton={skeleton} />
     </LocaleProvider>
   );
 }

packages/website/src/pages/[...locale]/settings/_index.tsx

@@ -1,27 +1,24 @@
-import { DEFAULT_LOCALE } from '@blitzkit/i18n';
-import { Flex, Switch, Text } from '@radix-ui/themes';
-import { LocaleSwitcher } from '../../../components/LocaleSwitcher';
-import { PageWrapper } from '../../../components/PageWrapper';
+import { DEFAULT_LOCALE } from "@blitzkit/i18n";
+import { Flex, Switch, Text } from "@radix-ui/themes";
+import { LocaleSwitcher } from "../../../components/LocaleSwitcher";
+import { PageWrapper } from "../../../components/PageWrapper";
 import {
   LocaleProvider,
   useLocale,
   type LocaleAcceptorProps,
-} from '../../../hooks/useLocale';
-import { App } from '../../../stores/app';
+} from "../../../hooks/useLocale";
+import { App } from "../../../stores/app";
 
 export function Page({ locale = DEFAULT_LOCALE }: LocaleAcceptorProps) {
   return (
     <LocaleProvider locale={locale}>
-      <App.Provider>
-        <Content locale={locale} />
-      </App.Provider>
+      <Content locale={locale} />
     </LocaleProvider>
   );
 }
 
 function Content({ locale }: LocaleAcceptorProps) {
   const developerMode = App.useDeferred((state) => state.developerMode, false);
-  const appStore = App.useStore();
   const { strings } = useLocale();
 
   return (
@@ -33,7 +30,9 @@ function Content({ locale }: LocaleAcceptorProps) {
             variant="classic"
             checked={developerMode}
             onCheckedChange={(checked) =>
-              appStore.setState({ developerMode: checked })
+              App.mutate((draft) => {
+                draft.developerMode = checked;
+              })
             }
           />
         </Flex>

packages/website/src/pages/[...locale]/tanks/[slug]/_index.tsx

@@ -9,16 +9,13 @@ import { MetaSection } from "../../../../components/Tankopedia/MetaSection";
 import { TechTreeSection } from "../../../../components/Tankopedia/TechTreeSection";
 import { VideoSection } from "../../../../components/Tankopedia/VideoSection";
 import { awaitableModelDefinitions } from "../../../../core/awaitables/modelDefinitions";
-import { awaitableProvisionDefinitions } from "../../../../core/awaitables/provisionDefinitions";
 import { awaitableTankDefinitions } from "../../../../core/awaitables/tankDefinitions";
 import {
   LocaleProvider,
   type LocaleAcceptorProps,
 } from "../../../../hooks/useLocale";
-import { App } from "../../../../stores/app";
 import { Duel } from "../../../../stores/duel";
 import { Tankopedia } from "../../../../stores/tankopedia";
-import { TankopediaPersistent } from "../../../../stores/tankopediaPersistent";
 import type { MaybeSkeletonComponentProps } from "../../../../types/maybeSkeletonComponentProps";
 import type { TankGuide } from "./index.astro";
 
@@ -28,41 +25,32 @@ type PageProps = MaybeSkeletonComponentProps &
     guide?: TankGuide;
   };
 
-const [tankDefinitions, provisionDefinitions, modelDefinitions] =
-  await Promise.all([
-    awaitableTankDefinitions,
-    awaitableProvisionDefinitions,
-    awaitableModelDefinitions,
-  ]);
+const [tankDefinitions, modelDefinitions] = await Promise.all([
+  awaitableTankDefinitions,
+  awaitableModelDefinitions,
+]);
 
 export function Page({ id, skeleton, locale, guide }: PageProps) {
   const tank = tankDefinitions.tanks[id];
   const model = modelDefinitions.models[id];
 
   Tankopedia.useInitialization(model);
+  Duel.useInitialization({ tank, model });
 
   return (
     <LocaleProvider locale={locale}>
-      <App.Provider>
-        <TankopediaPersistent.Provider>
-          <Duel.Provider
-            data={{ tank, model, provisionDefinitions: provisionDefinitions }}
-          >
-            <PageWrapper p="0" maxWidth="unset" color="purple" gap="9" pb="9">
-              <HeroSection skeleton={skeleton} />
-              <MetaSection />
-              <CalloutsSection />
-              {tank.type === TankType.RESEARCHABLE && !tank.deprecated && (
-                <TechTreeSection skeleton={skeleton} />
-              )}
-              <CharacteristicsSection skeleton={skeleton} />
-              <GameModeSection />
-              {guide && <GuideSection guide={guide} />}
-              <VideoSection skeleton={skeleton} />
-            </PageWrapper>
-          </Duel.Provider>
-        </TankopediaPersistent.Provider>
-      </App.Provider>
+      <PageWrapper p="0" maxWidth="unset" color="purple" gap="9" pb="9">
+        <HeroSection skeleton={skeleton} />
+        <MetaSection />
+        <CalloutsSection />
+        {tank.type === TankType.RESEARCHABLE && !tank.deprecated && (
+          <TechTreeSection skeleton={skeleton} />
+        )}
+        <CharacteristicsSection skeleton={skeleton} />
+        <GameModeSection />
+        {guide && <GuideSection guide={guide} />}
+        <VideoSection skeleton={skeleton} />
+      </PageWrapper>
     </LocaleProvider>
   );
 }

packages/website/src/pages/[...locale]/tanks/_index.tsx

@@ -1,12 +1,10 @@
-import { PageWrapper } from '../../../components/PageWrapper';
-import { TankSearch } from '../../../components/TankSearch';
+import { PageWrapper } from "../../../components/PageWrapper";
+import { TankSearch } from "../../../components/TankSearch";
 import {
   LocaleProvider,
   type LocaleAcceptorProps,
-} from '../../../hooks/useLocale';
-import { App } from '../../../stores/app';
-import { TankopediaPersistent } from '../../../stores/tankopediaPersistent';
-import type { MaybeSkeletonComponentProps } from '../../../types/maybeSkeletonComponentProps';
+} from "../../../hooks/useLocale";
+import type { MaybeSkeletonComponentProps } from "../../../types/maybeSkeletonComponentProps";
 
 export function Page({
   locale,
@@ -15,11 +13,7 @@ export function Page({
   return (
     <LocaleProvider locale={locale}>
       <PageWrapper color="purple" maxWidth="80rem">
-        <TankopediaPersistent.Provider>
-          <App.Provider>
-            <TankSearch skeleton={skeleton} />
-          </App.Provider>
-        </TankopediaPersistent.Provider>
+        <TankSearch skeleton={skeleton} />
       </PageWrapper>
     </LocaleProvider>
   );

packages/website/src/pages/[...locale]/tier-list/_index.tsx

@@ -1,21 +1,18 @@
-import { PageWrapper } from '../../../components/PageWrapper';
-import { FilterControl } from '../../../components/TankSearch/components/FilterControl';
-import { TierListControls } from '../../../components/TierList/Controls';
-import { TierListTable } from '../../../components/TierList/Table';
-import { TierListTiles } from '../../../components/TierList/Tiles';
-import { URLManager } from '../../../components/TierList/URLManager';
+import { PageWrapper } from "../../../components/PageWrapper";
+import { FilterControl } from "../../../components/TankSearch/components/FilterControl";
+import { TierListControls } from "../../../components/TierList/Controls";
+import { TierListTable } from "../../../components/TierList/Table";
+import { TierListTiles } from "../../../components/TierList/Tiles";
+import { URLManager } from "../../../components/TierList/URLManager";
 import {
   LocaleProvider,
   type LocaleAcceptorProps,
-} from '../../../hooks/useLocale';
-import { TankopediaPersistent } from '../../../stores/tankopediaPersistent';
+} from "../../../hooks/useLocale";
 
 export function Page({ locale }: LocaleAcceptorProps) {
   return (
     <LocaleProvider locale={locale}>
-      <TankopediaPersistent.Provider>
-        <Content />
-      </TankopediaPersistent.Provider>
+      <Content />
     </LocaleProvider>
   );
 }