feat: better titlebar

src/commands/breakdown.tsx

@@ -1,8 +1,8 @@
 import { chunk } from 'lodash';
 import * as Breakdown from '../components/Breakdown';
+import CommandWrapper from '../components/CommandWrapper';
 import NoData, { NoDataType } from '../components/NoData';
 import TitleBar from '../components/TitleBar';
-import Wrapper from '../components/Wrapper';
 import { AllStats, getAccountInfo } from '../core/blitz/getAccountInfo';
 import { getClanAccountInfo } from '../core/blitz/getClanAccountInfo';
 import getTankStats from '../core/blitz/getTankStats';
@@ -254,10 +254,10 @@ export async function renderBreakdown(
   if (filteredOrder.length > 0) {
     return pages
       .map((page, index) => (
-        <Wrapper>
+        <CommandWrapper>
           {index === 0 && (
             <TitleBar
-              name={accountInfo.nickname}
+              title={accountInfo.nickname}
               image={
                 clanData?.clan
                   ? `https://wotblitz-gc.gcdn.co/icons/clanEmblems1x/clan-icon-v2-${clanData?.clan?.emblem_set_id}.png`
@@ -268,14 +268,14 @@ export async function renderBreakdown(
           )}
 
           <Breakdown.Root>{page}</Breakdown.Root>
-        </Wrapper>
+        </CommandWrapper>
       ))
       .reverse();
   } else {
     return [
-      <Wrapper>
+      <CommandWrapper>
         <TitleBar
-          name={accountInfo.nickname}
+          title={accountInfo.nickname}
           image={
             clanData?.clan
               ? `https://wotblitz-gc.gcdn.co/icons/clanEmblems1x/clan-icon-v2-${clanData?.clan?.emblem_set_id}.png`
@@ -285,7 +285,7 @@ export async function renderBreakdown(
         />
 
         <NoData type={NoDataType.BattlesInPeriod} />
-      </Wrapper>,
+      </CommandWrapper>,
     ];
   }
 }

src/commands/evolution.tsx

@@ -2,10 +2,10 @@ import {
   SlashCommandBuilder,
   SlashCommandSubcommandGroupBuilder,
 } from 'discord.js';
+import CommandWrapper from '../components/CommandWrapper';
 import * as Graph from '../components/Graph';
 import NoData, { NoDataType } from '../components/NoData';
 import TitleBar from '../components/TitleBar';
-import Wrapper from '../components/Wrapper';
 import { getAccountInfo } from '../core/blitz/getAccountInfo';
 import { getClanAccountInfo } from '../core/blitz/getClanAccountInfo';
 import resolveTankId from '../core/blitz/resolveTankId';
@@ -74,8 +74,8 @@ async function render(
   const minX = Math.min(...xs);
 
   return (
-    <Wrapper>
-      <TitleBar name={accountInfo.nickname} image={logo} description={name} />
+    <CommandWrapper>
+      <TitleBar title={accountInfo.nickname} image={logo} description={name} />
 
       {plot.length > 0 && (
         <Graph.Root
@@ -103,7 +103,7 @@ async function render(
       )}
 
       {plot.length === 0 && <NoData type={NoDataType.BattlesInPeriod} />}
-    </Wrapper>
+    </CommandWrapper>
   );
 }
 

src/commands/fullStats.tsx

@@ -1,9 +1,9 @@
 import { SlashCommandBuilder } from 'discord.js';
+import CommandWrapper from '../components/CommandWrapper';
 import GenericAllStats from '../components/GenericAllStats';
 import NoData, { NoDataType } from '../components/NoData';
 import TierWeights from '../components/TierWeights';
 import TitleBar from '../components/TitleBar';
-import Wrapper from '../components/Wrapper';
 import { getAccountInfo } from '../core/blitz/getAccountInfo';
 import { getClanAccountInfo } from '../core/blitz/getClanAccountInfo';
 import { emblemIdToURL } from '../core/blitzkrieg/emblemIdToURL';
@@ -48,9 +48,9 @@ async function render(
   const tierWeights = await getTierWeights(diffedTankStats.diff, filteredOrder);
 
   return (
-    <Wrapper>
+    <CommandWrapper>
       <TitleBar
-        name={nickname}
+        title={nickname}
         image={clanImage}
         description={`${name} • ${filterDescriptions}`}
       />
@@ -60,7 +60,7 @@ async function render(
       {stats.battles > 0 && (
         <GenericAllStats stats={stats} supplementaryStats={supplementary} />
       )}
-    </Wrapper>
+    </CommandWrapper>
   );
 }
 

src/commands/inactive.tsx

@@ -1,8 +1,8 @@
 import { SlashCommandBuilder } from 'discord.js';
+import CommandWrapper from '../components/CommandWrapper';
 import GenericStats from '../components/GenericStats';
 import NoData, { NoDataType } from '../components/NoData';
 import TitleBar from '../components/TitleBar';
-import Wrapper from '../components/Wrapper';
 import { getAccountInfo } from '../core/blitz/getAccountInfo';
 import { getClanInfo } from '../core/blitz/getClanInfo';
 import addClanChoices from '../core/discord/addClanChoices';
@@ -52,16 +52,16 @@ export const inactiveCommand: CommandRegistry = {
     const hasInactiveMembers = inactive.length > 0;
 
     return (
-      <Wrapper>
+      <CommandWrapper>
         <TitleBar
-          name={clanInfo.name}
+          title={clanInfo.name}
           image={`https://wotblitz-gc.gcdn.co/icons/clanEmblems1x/clan-icon-v2-${clanInfo.emblem_set_id}.png`}
           description={`Inactive for ${threshold}+ Days • ${new Date().toDateString()}`}
         />
 
         {!hasInactiveMembers && <NoData type={NoDataType.PlayersInPeriod} />}
         {hasInactiveMembers && <GenericStats stats={inactive} />}
-      </Wrapper>
+      </CommandWrapper>
     );
   },
 

src/commands/link.tsx

@@ -3,7 +3,7 @@ import { GuildMemberRoleManager, SlashCommandBuilder } from 'discord.js';
 import markdownEscape from 'markdown-escape';
 import discord from '../../discord.json' assert { type: 'json' };
 import { Glow } from '../components/AllStatsOverview/components/WN8Display/components/Glow';
-import Wrapper from '../components/Wrapper';
+import CommandWrapper from '../components/CommandWrapper';
 import { REGION_NAMES } from '../constants/regions';
 import { getAccountInfo } from '../core/blitz/getAccountInfo';
 import { getClanAccountInfo } from '../core/blitz/getClanAccountInfo';
@@ -50,7 +50,7 @@ export const verifyCommand: CommandRegistry = {
     }
 
     return [
-      <Wrapper fat>
+      <CommandWrapper fat>
         <div
           style={{
             display: 'flex',
@@ -196,7 +196,7 @@ export const verifyCommand: CommandRegistry = {
 
           <Glow color={teal.teal9} rotation={-90} />
         </div>
-      </Wrapper>,
+      </CommandWrapper>,
 
       embedInfo(
         'Incorrect account?',

src/commands/ownedTanks.tsx

@@ -1,8 +1,8 @@
 import { SlashCommandBuilder } from 'discord.js';
+import CommandWrapper from '../components/CommandWrapper';
 import NoData, { NoDataType } from '../components/NoData';
 import * as Tanks from '../components/Tanks';
 import TitleBar from '../components/TitleBar';
-import Wrapper from '../components/Wrapper';
 import { encyclopediaInfo } from '../core/blitz/encyclopediaInfo';
 import { getAccountInfo } from '../core/blitz/getAccountInfo';
 import { getClanAccountInfo } from '../core/blitz/getClanAccountInfo';
@@ -61,9 +61,9 @@ export const ownedTanksCommand: CommandRegistry = {
     nations.sort();
 
     return (
-      <Wrapper>
+      <CommandWrapper>
         <TitleBar
-          name={accountInfo.nickname}
+          title={accountInfo.nickname}
           image={
             clanAccountInfo?.clan
               ? emblemIdToURL(clanAccountInfo.clan.emblem_set_id)
@@ -120,7 +120,7 @@ export const ownedTanksCommand: CommandRegistry = {
               );
             }),
           ))}
-      </Wrapper>
+      </CommandWrapper>
     );
   },
 

src/commands/ratings.tsx

@@ -6,9 +6,9 @@ import {
 import { range } from 'lodash';
 import markdownEscape from 'markdown-escape';
 import { BlitzkriegRatingsLeaderboard } from '../../scripts/buildRatingsLeaderboard';
+import CommandWrapper from '../components/CommandWrapper';
 import * as Leaderboard from '../components/Leaderboard';
 import TitleBar from '../components/TitleBar';
-import Wrapper from '../components/Wrapper';
 import { LEAGUES } from '../constants/leagues';
 import { FIRST_ARCHIVED_RATINGS_SEASON } from '../constants/ratings';
 import { REGION_NAMES_SHORT, Region } from '../constants/regions';
@@ -423,9 +423,9 @@ export const ratingsCommand = new Promise<CommandRegistryPromisable>(
         });
 
         return (
-          <Wrapper>
+          <CommandWrapper>
             <TitleBar
-              name={titleName}
+              title={titleName}
               image={titleImage}
               description={titleDescription}
             />
@@ -445,7 +445,7 @@ export const ratingsCommand = new Promise<CommandRegistryPromisable>(
                 )}
               </Leaderboard.Root>
             )}
-          </Wrapper>
+          </CommandWrapper>
         );
       },
 

src/commands/stats.tsx

@@ -1,8 +1,8 @@
 import { SlashCommandBuilder } from 'discord.js';
 import AllStatsOverview from '../components/AllStatsOverview';
+import CommandWrapper from '../components/CommandWrapper';
 import NoData, { NoDataType } from '../components/NoData';
 import TitleBar from '../components/TitleBar';
-import Wrapper from '../components/Wrapper';
 import { getAccountInfo } from '../core/blitz/getAccountInfo';
 import { getClanAccountInfo } from '../core/blitz/getClanAccountInfo';
 import { emblemIdToURL } from '../core/blitzkrieg/emblemIdToURL';
@@ -42,9 +42,9 @@ async function render(
   const filterDescriptions = await filtersToDescription(filters);
 
   return (
-    <Wrapper>
+    <CommandWrapper>
       <TitleBar
-        name={nickname}
+        title={nickname}
         image={clanImage}
         description={`${name} • ${filterDescriptions}`}
       />
@@ -53,7 +53,7 @@ async function render(
       {stats.battles > 0 && (
         <AllStatsOverview stats={stats} supplementaryStats={supplementary} />
       )}
-    </Wrapper>
+    </CommandWrapper>
   );
 }