feat: upgrade performance

packages/website/src/components/Performance/PlayerCountControl.tsx

@@ -1,15 +1,9 @@
 import { Flex, Select, Text } from '@radix-ui/themes';
 import { useLocale } from '../../hooks/useLocale';
-import {
+import { Performance, type PlayerCountPeriod } from '../../stores/performance';
-  TankPerformanceEphemeral,
-  type PlayerCountPeriod,
-} from '../../stores/tankPerformanceEphemeral';
 
 export function PlayerCountControl() {
-  const playerCountPeriod = TankPerformanceEphemeral.use(
+  const playerCountPeriod = Performance.use((state) => state.playerCountPeriod);
-    (state) => state.playerCountPeriod,
-  );
-  const mutateTankPerformanceSort = TankPerformanceEphemeral.useMutation();
   const { strings } = useLocale();
 
   return (
@@ -18,7 +12,7 @@ export function PlayerCountControl() {
       <Select.Root
         value={playerCountPeriod}
         onValueChange={(period) => {
-          mutateTankPerformanceSort((draft) => {
+          Performance.mutate((draft) => {
             draft.playerCountPeriod = period as PlayerCountPeriod;
           });
         }}

packages/website/src/components/Performance/TankRow.tsx

@@ -4,7 +4,7 @@ import { memo } from 'react';
 import { awaitableAverageDefinitions } from '../../core/awaitables/averageDefinitions';
 import { useAveragesExclusionRatio } from '../../hooks/useAveragesExclusionRatio';
 import { useLocale } from '../../hooks/useLocale';
-import { TankPerformanceEphemeral } from '../../stores/tankPerformanceEphemeral';
+import { Performance } from '../../stores/performance';
 import { TankRowHeaderCell } from '../TankRowHeaderCell';
 
 interface TankRowProps {
@@ -17,7 +17,7 @@ export const TankRow = memo<TankRowProps>(
   ({ tank }) => {
     const averages = averageDefinitions.averages[tank.id];
     const ratio = useAveragesExclusionRatio();
-    const playerCountPeriod = TankPerformanceEphemeral.use(
+    const playerCountPeriod = Performance.use(
       (state) => state.playerCountPeriod,
     );
     const { locale } = useLocale();

packages/website/src/components/Performance/Tanks.tsx

@@ -5,8 +5,8 @@ import { Fragment, Suspense, useEffect, useMemo, useState } from 'react';
 import { awaitableAverageDefinitions } from '../../core/awaitables/averageDefinitions';
 import { awaitableTankDefinitions } from '../../core/awaitables/tankDefinitions';
 import { filterTank } from '../../core/blitzkit/filterTank';
+import { Performance } from '../../stores/performance';
 import { $tankFilters } from '../../stores/tankFilters';
-import { TankPerformanceEphemeral } from '../../stores/tankPerformanceEphemeral';
 import { TankPerformanceSort } from '../../stores/tankPerformanceSort';
 import type { MaybeSkeletonComponentProps } from '../../types/maybeSkeletonComponentProps';
 import { RowLoader } from './RowLoader';
@@ -40,10 +40,9 @@ export function Tanks({ skeleton }: MaybeSkeletonComponentProps) {
   }
 
   const sort = TankPerformanceSort.use();
-  const tankPerformancePersistentStore = TankPerformanceEphemeral.useStore();
   const filters = useStore($tankFilters);
   const tanksSorted = useMemo(() => {
-    const { playerCountPeriod } = tankPerformancePersistentStore.getState();
+    const { playerCountPeriod } = Performance.state;
 
     switch (sort.type) {
       case 'accuracy':

packages/website/src/components/Performance/Total.tsx

@@ -8,7 +8,7 @@ import { memo, useCallback } from 'react';
 import { awaitableAverageDefinitions } from '../../core/awaitables/averageDefinitions';
 import { useAveragesExclusionRatio } from '../../hooks/useAveragesExclusionRatio';
 import { useLocale } from '../../hooks/useLocale';
-import { TankPerformanceEphemeral } from '../../stores/tankPerformanceEphemeral';
+import { Performance } from '../../stores/performance';
 import { StickyRowHeaderCell } from '../StickyRowHeaderCell';
 
 interface AverageDefinitionsEntryWithId extends AverageDefinitionsEntry {
@@ -23,7 +23,7 @@ const averageDefinitions = await awaitableAverageDefinitions;
 
 export const Total = memo<TotalProps>(
   ({ tanks }) => {
-    const playerCountPeriod = TankPerformanceEphemeral.use(
+    const playerCountPeriod = Performance.use(
       (state) => state.playerCountPeriod,
     );
     const { strings, locale } = useLocale();

packages/website/src/stores/performance.ts

@@ -0,0 +1,12 @@
+import type { Samples } from '@blitzkit/core';
+import { Varuna } from 'varuna';
+
+export interface Performance {
+  playerCountPeriod: PlayerCountPeriod;
+}
+
+export type PlayerCountPeriod = keyof Samples;
+
+export const Performance = new Varuna<Performance>({
+  playerCountPeriod: 'd_30',
+});

packages/website/src/stores/tankPerformanceEphemeral.ts

@@ -1,15 +0,0 @@
-import type { Samples } from '@blitzkit/core';
-import { create } from 'zustand';
-import { createContextualStore } from '../core/zustand/createContextualStore';
-
-export interface TankPerformanceEphemeral {
-  playerCountPeriod: PlayerCountPeriod;
-}
-
-export type PlayerCountPeriod = keyof Samples;
-
-export const TankPerformanceEphemeral = createContextualStore(() =>
-  create<TankPerformanceEphemeral>()(() => ({
-    playerCountPeriod: 'd_30',
-  })),
-);