feat: added reset in options

src/app/embeds/session/page.tsx

@@ -18,6 +18,7 @@ import { useSession } from '../../../stores/session';
 import { IndividualTankStats, TanksStats } from '../../../types/tanksStats';
 import { CustomColumnDisplay } from '../../tools/session/components/CustomColumn';
 import { Menu } from '../../tools/session/components/Menu';
+import { resetSession } from '../../tools/session/page';
 
 const REFRESH_RATE = 1 / 5;
 
@@ -324,7 +325,7 @@ export default function SessionPage() {
         </div>
       </ContextMenu.Trigger>
 
-      <Menu Builder={ContextMenu} />
+      <Menu reset={resetSession} Builder={ContextMenu} />
     </ContextMenu.Root>
   );
 }

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

@@ -4,9 +4,10 @@ import { CustomColumn } from './CustomColumn';
 
 interface ContextMenuProps {
   Builder: typeof DropdownMenu | typeof ContextMenu;
+  reset: () => void;
 }
 
-export function Menu({ Builder }: ContextMenuProps) {
+export function Menu({ Builder, reset }: ContextMenuProps) {
   const session = useSession();
 
   return (
@@ -34,6 +35,12 @@ export function Menu({ Builder }: ContextMenuProps) {
       >
         Show career
       </Builder.CheckboxItem>
+
+      <Builder.Separator />
+
+      <Builder.Item color="red" onClick={reset}>
+        Reset
+      </Builder.Item>
     </Builder.Content>
   );
 }

src/app/tools/session/page.tsx

@@ -14,10 +14,9 @@ import {
   Flex,
   Text,
   TextField,
-  Tooltip,
 } from '@radix-ui/themes';
 import { debounce } from 'lodash';
-import { ChangeEvent, useRef, useState } from 'react';
+import { ChangeEvent, useEffect, useRef, useState } from 'react';
 import PageWrapper from '../../../components/PageWrapper';
 import { REGION_NAMES, Region } from '../../../constants/regions';
 import { WARGAMING_APPLICATION_ID } from '../../../constants/wargamingApplicationID';
@@ -31,6 +30,36 @@ import SessionPage from '../../embeds/session/page';
 import { Menu } from './components/Menu';
 import * as styles from './page.css';
 
+export async function setSession(region: Region, id: number, nickname: string) {
+  const rawTankStats = (
+    await fetchBlitz<TanksStats>(
+      `https://api.wotblitz.${region}/wotb/tanks/stats/?application_id=${WARGAMING_APPLICATION_ID}&account_id=${id}`,
+    )
+  )[id];
+  const tankStats = rawTankStats.reduce<NormalizedTankStats>(
+    (accumulator, tank) => ({
+      ...accumulator,
+      [tank.tank_id]: tank,
+    }),
+    {},
+  );
+
+  useSession.setState({
+    isTracking: true,
+    id,
+    region,
+    nickname,
+    tankStats,
+    time: Date.now(),
+  });
+}
+
+export function resetSession() {
+  const session = useSession.getState();
+  if (!session.isTracking) return;
+  setSession(session.region, session.id, session.nickname);
+}
+
 export default function Page() {
   const input = useRef<HTMLInputElement>(null);
   const [searchResults, setSearchResults] = useState<
@@ -50,37 +79,9 @@ export default function Page() {
   );
   const session = useSession();
 
-  async function setSession(region: Region, id: number, nickname: string) {
-    input.current!.value = nickname;
-
-    const rawTankStats = (
-      await fetchBlitz<TanksStats>(
-        `https://api.wotblitz.${region}/wotb/tanks/stats/?application_id=${WARGAMING_APPLICATION_ID}&account_id=${id}`,
-      )
-    )[id];
-    const tankStats = rawTankStats.reduce<NormalizedTankStats>(
-      (accumulator, tank) => ({
-        ...accumulator,
-        [tank.tank_id]: tank,
-      }),
-      {},
-    );
-
-    useSession.setState({
-      isTracking: true,
-      id,
-      region,
-      nickname,
-      tankStats,
-      time: Date.now(),
-    });
-  }
-
-  function reset() {
-    const session = useSession.getState();
-    if (!session.isTracking) return;
-    setSession(session.region, session.id, session.nickname);
-  }
+  useEffect(() => {
+    if (session.isTracking) input.current!.value = session.nickname;
+  }, [session]);
 
   return (
     <PageWrapper>
@@ -158,7 +159,7 @@ export default function Page() {
                 onClick={(event) => {
                   if (!session.promptBeforeReset) {
                     event.preventDefault();
-                    reset();
+                    resetSession();
                   }
                 }}
                 className={styles.toolbarButton}
@@ -201,7 +202,7 @@ export default function Page() {
                 </AlertDialog.Cancel>
 
                 <AlertDialog.Action>
-                  <Button variant="solid" color="red" onClick={reset}>
+                  <Button variant="solid" color="red" onClick={resetSession}>
                     Reset
                   </Button>
                 </AlertDialog.Action>
@@ -209,19 +210,60 @@ export default function Page() {
             </AlertDialog.Content>
           </AlertDialog.Root>
 
-          <Tooltip content="Copy to clipboard">
-            <Button
-              variant="soft"
-              className={styles.toolbarButton}
-              onClick={() =>
-                navigator.clipboard.writeText(
-                  `${location.origin}/embeds/session`,
-                )
-              }
-            >
-              <CopyIcon width="16" height="16" /> Embed
-            </Button>
-          </Tooltip>
+          <AlertDialog.Root>
+            <AlertDialog.Trigger>
+              <Button
+                variant="soft"
+                className={styles.toolbarButton}
+                onClick={(event) => {
+                  if (!session.showEmbedPrompt) {
+                    event.preventDefault();
+                    resetSession();
+                  }
+
+                  navigator.clipboard.writeText(
+                    `${location.origin}/embeds/session`,
+                  );
+                }}
+              >
+                <CopyIcon width="16" height="16" /> Embed
+              </Button>
+            </AlertDialog.Trigger>
+
+            <AlertDialog.Content>
+              <AlertDialog.Title>
+                Copied link to your clipboard
+              </AlertDialog.Title>
+              <AlertDialog.Description>
+                Keep in mind:
+                <ul>
+                  <li>Paste this link into your browser to view the embed</li>
+                  <li>Embeds abide your custom options</li>
+                  <li>
+                    Options do not transfer across websites/streaming softwares
+                  </li>
+                </ul>
+              </AlertDialog.Description>
+
+              <Text size="2">
+                <Checkbox
+                  mr="1"
+                  onCheckedChange={(checked) =>
+                    useSession.setState({
+                      showEmbedPrompt: !checked,
+                    })
+                  }
+                />
+                Don't show this again
+              </Text>
+
+              <Flex gap="3" mt="4">
+                <AlertDialog.Cancel>
+                  <Button variant="soft">Got it!</Button>
+                </AlertDialog.Cancel>
+              </Flex>
+            </AlertDialog.Content>
+          </AlertDialog.Root>
 
           <DropdownMenu.Root>
             <DropdownMenu.Trigger>
@@ -231,7 +273,7 @@ export default function Page() {
               </Button>
             </DropdownMenu.Trigger>
 
-            <Menu Builder={DropdownMenu} />
+            <Menu Builder={DropdownMenu} reset={resetSession} />
           </DropdownMenu.Root>
         </div>
       </div>

src/stores/session.ts

@@ -20,6 +20,7 @@ type Session = (
     }
 ) & {
   promptBeforeReset: boolean;
+  showEmbedPrompt: boolean;
   customColumns: {
     display: CustomColumnDisplay;
     showDelta: boolean;
@@ -36,6 +37,7 @@ export const useSession = create<Session>()(
         promptBeforeReset: true,
         showTotal: true,
         showCareer: true,
+        showEmbedPrompt: true,
 
         customColumns: [
           { display: 'battles', showDelta: false },