feat: use any account selection

packages/website/src/pages/tools/embed/[embed]/_index.tsx

@@ -3,7 +3,6 @@ import {
   CodeIcon,
   HeightIcon,
   ImageIcon,
-  Link2Icon,
   ResetIcon,
   TimerIcon,
   WidthIcon,
@@ -11,10 +10,10 @@ import {
 import { Box, Button, Flex, Heading, ScrollArea, Text } from '@radix-ui/themes';
 import { capitalize, startCase } from 'lodash-es';
 import { useEffect, useRef, useState, type ReactNode } from 'react';
-import { stringify } from 'urlon';
 import { CopyButton } from '../../../../components/CopyButton';
 import { Boolean } from '../../../../components/Embeds/Boolean';
 import { Color } from '../../../../components/Embeds/Color';
+import { CopyURL } from '../../../../components/Embeds/CopyURL';
 import { Enum } from '../../../../components/Embeds/Enum';
 import { Import } from '../../../../components/Embeds/Import';
 import { PreviewWrapper } from '../../../../components/Embeds/PreviewWrapper';
@@ -25,18 +24,13 @@ import { SizeWithout0 } from '../../../../components/Embeds/SizeWithout0';
 import { Slider } from '../../../../components/Embeds/Slider';
 import { TextController } from '../../../../components/Embeds/TextController';
 import { PageWrapper } from '../../../../components/PageWrapper';
-import { WargamingLoginButton } from '../../../../components/WargamingLoginButton';
 import {
   configurations,
   extractEmbedConfigDefaults,
 } from '../../../../constants/embeds';
 import { NAVBAR_HEIGHT } from '../../../../constants/navbar';
 import { App } from '../../../../stores/app';
-import {
-  EmbedState,
-  type EmbedConfig,
-  type EmbedStateStore,
-} from '../../../../stores/embedState';
+import { EmbedState, type EmbedConfig } from '../../../../stores/embedState';
 import { EmbedItemType } from '../../../../stores/embedState/constants';
 
 export interface EmbedPreviewControllerProps {
@@ -60,10 +54,6 @@ export function Page({ embed }: PageProps) {
 }
 
 function Content({ embed }: PageProps) {
-  const wargaming = App.useDeferred(
-    (state) => state.logins.wargaming,
-    undefined,
-  );
   const embedStateStore = EmbedState.useStore();
   const appStore = App.useStore();
   const config = configurations[embed] as EmbedConfig;
@@ -100,39 +90,7 @@ function Content({ embed }: PageProps) {
             </Text>
 
             <Flex mb="6" gap="2" wrap="wrap">
-              <CopyButton
-                disabled={!wargaming}
-                copy={() => {
-                  const { wargaming } = appStore.getState().logins;
-
-                  if (!wargaming) return;
-
-                  const state = embedStateStore.getState();
-                  const initial = embedStateStore.getInitialState();
-                  const shallowState: EmbedStateStore = {};
-
-                  Object.entries(state).forEach(([key, value]) => {
-                    if (value !== initial[key]) {
-                      shallowState[key] = value;
-                    }
-                  });
-
-                  const searchParams = new URLSearchParams({
-                    id: `${wargaming.id}`,
-                    state: stringify(shallowState),
-                  });
-
-                  return `${location.origin}/tools/embed/${embed}/host?${searchParams.toString()}`;
-                }}
-              >
-                <Link2Icon />
-                {wargaming ? 'Copy URL' : 'Log in to general URL'}
-              </CopyButton>
-              {!wargaming && (
-                <WargamingLoginButton>
-                  Log in with Wargaming
-                </WargamingLoginButton>
-              )}
+              <CopyURL embed={embed} />
               <CopyButton
                 variant="outline"
                 copy={() =>

packages/website/src/pages/tools/embed/_index.tsx

@@ -1,51 +0,0 @@
-import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
-import { Callout, Flex, Link } from '@radix-ui/themes';
-import { PageWrapper } from '../../../components/PageWrapper';
-import { WargamingLoginButton } from '../../../components/WargamingLoginButton';
-import { configurations } from '../../../constants/embeds';
-import { App, type WargamingLogin } from '../../../stores/app';
-
-export function Page() {
-  return (
-    <App.Provider>
-      <Content />
-    </App.Provider>
-  );
-}
-
-function Content() {
-  const wargaming = App.useDeferred((state) => state.logins.wargaming, {
-    expires: 0,
-    id: 0,
-    token: '',
-  } satisfies WargamingLogin);
-
-  return (
-    <PageWrapper color="red">
-      {!wargaming && (
-        <>
-          <Flex justify="center">
-            <Callout.Root size="1">
-              <Callout.Icon>
-                <ExclamationTriangleIcon />
-              </Callout.Icon>
-
-              <Callout.Text>
-                You must be logged in with your Wargaming account to export
-                embeds.
-              </Callout.Text>
-            </Callout.Root>
-          </Flex>
-
-          <Flex justify="center">
-            <WargamingLoginButton>Log in with Wargaming</WargamingLoginButton>
-          </Flex>
-        </>
-      )}
-
-      {Object.entries(configurations).map(([embed, config]) => (
-        <Link href={`/tools/embed/${embed}`}>{embed}</Link>
-      ))}
-    </PageWrapper>
-  );
-}

packages/website/src/pages/tools/embed/index.astro

@@ -1,9 +1,17 @@
 ---
+import { Link } from '@radix-ui/themes';
+import { PageWrapper } from '../../../components/PageWrapper';
+import { configurations } from '../../../constants/embeds';
 import { embedTool } from '../../../constants/tools';
 import ToolLayout from '../../../layouts/ToolLayout.astro';
-import { Page } from './_index';
 ---
 
 <ToolLayout tool={embedTool}>
-  <Page client:load />
+  <PageWrapper color="red">
+    {
+      Object.entries(configurations).map(([embed, config]) => (
+        <Link href={`/tools/embed/${embed}`}>{embed}</Link>
+      ))
+    }
+  </PageWrapper>
 </ToolLayout>