feat: added options

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

@@ -0,0 +1,66 @@
+import { DropdownMenu } from '@radix-ui/themes';
+import mutateSession, { useSession } from '../../../../stores/session';
+
+export type CustomColumnDisplay =
+  | 'battles'
+  | 'winrate'
+  | 'wn8'
+  | 'damage'
+  | 'none';
+
+const NO_DELTA: CustomColumnDisplay[] = ['battles', 'wn8', 'none'];
+
+interface CustomColumn {
+  column: number;
+}
+
+export function CustomColumn({ column }: CustomColumn) {
+  const customColumn = useSession((state) => state.customColumns[column]);
+
+  return (
+    <DropdownMenu.Sub>
+      <DropdownMenu.SubTrigger>Column {column + 1}</DropdownMenu.SubTrigger>
+
+      <DropdownMenu.SubContent>
+        <DropdownMenu.Label>Display</DropdownMenu.Label>
+
+        <DropdownMenu.RadioGroup
+          value={customColumn.display}
+          onValueChange={(event) =>
+            mutateSession((draft) => {
+              draft.customColumns[column].display =
+                event as CustomColumnDisplay;
+            })
+          }
+        >
+          <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>
+
+        {!NO_DELTA.includes(customColumn.display) && (
+          <>
+            <DropdownMenu.Separator />
+
+            <DropdownMenu.CheckboxItem
+              checked={customColumn.showDelta}
+              onCheckedChange={(checked) =>
+                mutateSession((draft) => {
+                  draft.customColumns[column].showDelta = checked;
+                })
+              }
+            >
+              Show delta
+            </DropdownMenu.CheckboxItem>
+          </>
+        )}
+      </DropdownMenu.SubContent>
+    </DropdownMenu.Sub>
+  );
+}

src/app/tools/session/page.tsx

@@ -1,6 +1,11 @@
 'use client';
 
-import { CopyIcon, PersonIcon, ReloadIcon } from '@radix-ui/react-icons';
+import {
+  CaretDownIcon,
+  CopyIcon,
+  PersonIcon,
+  ReloadIcon,
+} from '@radix-ui/react-icons';
 import {
   AlertDialog,
   Button,
@@ -23,10 +28,9 @@ 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 * as styles from './page.css';
 
-// 1 once per 5 seconds
-
 export default function Page() {
   const input = useRef<HTMLInputElement>(null);
   const [searchResults, setSearchResults] = useState<
@@ -150,6 +154,7 @@ export default function Page() {
           <AlertDialog.Root>
             <AlertDialog.Trigger>
               <Button
+                variant="soft"
                 onClick={(event) => {
                   if (!session.promptBeforeReset) {
                     event.preventDefault();
@@ -206,6 +211,7 @@ export default function Page() {
 
           <Tooltip content="Copy to clipboard">
             <Button
+              variant="soft"
               className={styles.toolbarButton}
               onClick={() =>
                 navigator.clipboard.writeText(
@@ -216,6 +222,33 @@ export default function Page() {
               <CopyIcon width="16" height="16" /> Embed
             </Button>
           </Tooltip>
+
+          <DropdownMenu.Root>
+            <DropdownMenu.Trigger>
+              <Button variant="soft" className={styles.toolbarButton}>
+                Options
+                <CaretDownIcon />
+              </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.Content>
+          </DropdownMenu.Root>
         </div>
       </div>