feat: 1.13.3

src/app/tools/session/components/CustomColumn.tsx

@@ -1,4 +1,4 @@
-import { DropdownMenu } from '@radix-ui/themes';
+import { ContextMenu, DropdownMenu } from '@radix-ui/themes';
 import mutateSession, { useSession } from '../../../../stores/session';
 
 export type CustomColumnDisplay =
@@ -11,20 +11,21 @@ export type CustomColumnDisplay =
 const NO_DELTA: CustomColumnDisplay[] = ['battles', 'wn8', 'none'];
 
 interface CustomColumn {
+  Builder: typeof DropdownMenu | typeof ContextMenu;
   column: number;
 }
 
-export function CustomColumn({ column }: CustomColumn) {
+export function CustomColumn({ column, Builder }: CustomColumn) {
   const customColumn = useSession((state) => state.customColumns[column]);
 
   return (
-    <DropdownMenu.Sub>
-      <DropdownMenu.SubTrigger>Column {column + 1}</DropdownMenu.SubTrigger>
+    <Builder.Sub>
+      <Builder.SubTrigger>Column {column + 1}</Builder.SubTrigger>
 
-      <DropdownMenu.SubContent>
-        <DropdownMenu.Label>Display</DropdownMenu.Label>
+      <Builder.SubContent>
+        <Builder.Label>Display</Builder.Label>
 
-        <DropdownMenu.RadioGroup
+        <Builder.RadioGroup
           value={customColumn.display}
           onValueChange={(event) =>
             mutateSession((draft) => {
@@ -33,22 +34,18 @@ export function CustomColumn({ column }: CustomColumn) {
             })
           }
         >
-          <DropdownMenu.RadioItem value="battles">
-            Battles
-          </DropdownMenu.RadioItem>
-          <DropdownMenu.RadioItem value="winrate">
-            Winrate
-          </DropdownMenu.RadioItem>
-          <DropdownMenu.RadioItem value="wn8">WN8</DropdownMenu.RadioItem>
-          <DropdownMenu.RadioItem value="damage">Damage</DropdownMenu.RadioItem>
-          <DropdownMenu.RadioItem value="none">None</DropdownMenu.RadioItem>
-        </DropdownMenu.RadioGroup>
+          <Builder.RadioItem value="battles">Battles</Builder.RadioItem>
+          <Builder.RadioItem value="winrate">Winrate</Builder.RadioItem>
+          <Builder.RadioItem value="wn8">WN8</Builder.RadioItem>
+          <Builder.RadioItem value="damage">Damage</Builder.RadioItem>
+          <Builder.RadioItem value="none">None</Builder.RadioItem>
+        </Builder.RadioGroup>
 
         {!NO_DELTA.includes(customColumn.display) && (
           <>
-            <DropdownMenu.Separator />
+            <Builder.Separator />
 
-            <DropdownMenu.CheckboxItem
+            <Builder.CheckboxItem
               checked={customColumn.showDelta}
               onCheckedChange={(checked) =>
                 mutateSession((draft) => {
@@ -57,10 +54,10 @@ export function CustomColumn({ column }: CustomColumn) {
               }
             >
               Show delta
-            </DropdownMenu.CheckboxItem>
+            </Builder.CheckboxItem>
           </>
         )}
-      </DropdownMenu.SubContent>
-    </DropdownMenu.Sub>
+      </Builder.SubContent>
+    </Builder.Sub>
   );
 }

src/app/tools/session/components/Menu.tsx

@@ -0,0 +1,39 @@
+import { ContextMenu, DropdownMenu } from '@radix-ui/themes';
+import { useSession } from '../../../../stores/session';
+import { CustomColumn } from './CustomColumn';
+
+interface ContextMenuProps {
+  Builder: typeof DropdownMenu | typeof ContextMenu;
+}
+
+export function Menu({ Builder }: ContextMenuProps) {
+  const session = useSession();
+
+  return (
+    <Builder.Content>
+      <CustomColumn Builder={Builder} column={0} />
+      <CustomColumn Builder={Builder} column={1} />
+      <CustomColumn Builder={Builder} column={2} />
+      <CustomColumn Builder={Builder} column={3} />
+
+      <Builder.Separator />
+
+      <Builder.CheckboxItem
+        checked={session.showTotal}
+        onCheckedChange={(checked) =>
+          useSession.setState({ showTotal: checked })
+        }
+      >
+        Show total
+      </Builder.CheckboxItem>
+      <Builder.CheckboxItem
+        checked={session.showCareer}
+        onCheckedChange={(checked) =>
+          useSession.setState({ showCareer: checked })
+        }
+      >
+        Show career
+      </Builder.CheckboxItem>
+    </Builder.Content>
+  );
+}

src/app/tools/session/page.tsx

@@ -28,7 +28,7 @@ import listPlayers, {
 import { useSession } from '../../../stores/session';
 import { NormalizedTankStats, TanksStats } from '../../../types/tanksStats';
 import SessionPage from '../../embeds/session/page';
-import { CustomColumn } from './components/CustomColumn';
+import { Menu } from './components/Menu';
 import * as styles from './page.css';
 
 export default function Page() {
@@ -231,31 +231,7 @@ export default function Page() {
               </Button>
             </DropdownMenu.Trigger>
 
-            <DropdownMenu.Content>
-              <CustomColumn column={0} />
-              <CustomColumn column={1} />
-              <CustomColumn column={2} />
-              <CustomColumn column={3} />
-
-              <DropdownMenu.Separator />
-
-              <DropdownMenu.CheckboxItem
-                checked={session.showTotal}
-                onCheckedChange={(checked) =>
-                  useSession.setState({ showTotal: checked })
-                }
-              >
-                Show total
-              </DropdownMenu.CheckboxItem>
-              <DropdownMenu.CheckboxItem
-                checked={session.showCareer}
-                onCheckedChange={(checked) =>
-                  useSession.setState({ showCareer: checked })
-                }
-              >
-                Show career
-              </DropdownMenu.CheckboxItem>
-            </DropdownMenu.Content>
+            <Menu Builder={DropdownMenu} />
           </DropdownMenu.Root>
         </div>
       </div>