feat: added reset prompt

src/app/tools/session/page.tsx

@@ -1,7 +1,15 @@
 'use client';
 
 import { CopyIcon, PersonIcon, ReloadIcon } from '@radix-ui/react-icons';
-import { Button, DropdownMenu, TextField } from '@radix-ui/themes';
+import {
+  AlertDialog,
+  Button,
+  Checkbox,
+  DropdownMenu,
+  Flex,
+  Text,
+  TextField,
+} from '@radix-ui/themes';
 import { debounce } from 'lodash';
 import { ChangeEvent, useRef, useState } from 'react';
 import PageWrapper from '../../../components/PageWrapper';
@@ -63,6 +71,12 @@ export default function Page() {
     });
   }
 
+  function reset() {
+    const session = useSession.getState();
+    if (!session.isTracking) return;
+    setSession(session.region, session.id, session.nickname);
+  }
+
   return (
     <PageWrapper>
       <div className={styles.toolBar}>
@@ -132,17 +146,62 @@ export default function Page() {
         </div>
 
         <div style={{ display: 'flex', gap: 8 }}>
-          <Button
+          <AlertDialog.Root>
-            className={styles.toolbarButton}
+            <AlertDialog.Trigger>
-            color="red"
+              <Button
-            onClick={async () => {
+                onClick={(event) => {
-              const session = useSession.getState();
+                  if (!session.promptBeforeReset) {
-              if (!session.isTracking) return;
+                    event.preventDefault();
-              setSession(session.region, session.id, session.nickname);
+                    reset();
-            }}
+                  }
-          >
+                }}
-            <ReloadIcon width="16" height="16" /> Reset
+                className={styles.toolbarButton}
-          </Button>
+                color="red"
+              >
+                <ReloadIcon width="16" height="16" /> Reset
+              </Button>
+            </AlertDialog.Trigger>
+
+            <AlertDialog.Content>
+              <Flex direction="column" gap="4">
+                <Flex direction="column" gap="0">
+                  <AlertDialog.Title>
+                    Are you sure you want to reset?
+                  </AlertDialog.Title>
+                  <AlertDialog.Description>
+                    This'll discard your current session and start tracking from
+                    scratch again.
+                  </AlertDialog.Description>
+                </Flex>
+
+                <Text size="2">
+                  <Checkbox
+                    mr="1"
+                    onCheckedChange={(checked) =>
+                      useSession.setState({
+                        promptBeforeReset: !checked,
+                      })
+                    }
+                  />
+                  Don't ask me again
+                </Text>
+              </Flex>
+
+              <Flex gap="3" mt="4">
+                <AlertDialog.Cancel>
+                  <Button variant="soft" color="gray">
+                    Cancel
+                  </Button>
+                </AlertDialog.Cancel>
+
+                <AlertDialog.Action>
+                  <Button variant="solid" color="red" onClick={reset}>
+                    Reset
+                  </Button>
+                </AlertDialog.Action>
+              </Flex>
+            </AlertDialog.Content>
+          </AlertDialog.Root>
           <Button
             className={styles.toolbarButton}
             onClick={() =>

src/stores/session.ts

@@ -3,7 +3,7 @@ import { devtools, persist } from 'zustand/middleware';
 import { Region } from '../constants/regions';
 import { NormalizedTankStats } from '../types/tanksStats';
 
-type Session =
+type Session = (
   | {
       isTracking: false;
     }
@@ -15,8 +15,21 @@ type Session =
       nickname: string;
       tankStats: NormalizedTankStats;
       time: number;
-    };
+    }
+) & {
+  promptBeforeReset: boolean;
+};
 
 export const useSession = create<Session>()(
-  devtools(persist((set) => ({ isTracking: false }), { name: 'session' })),
+  devtools(
+    persist(
+      (set) => ({
+        isTracking: false,
+        promptBeforeReset: true,
+      }),
+      {
+        name: 'session',
+      },
+    ),
+  ),
 );