feat: added tool ground work

src/app/layout.tsx

@@ -28,10 +28,8 @@ export default function RootLayout({ children }: RootLayoutProps) {
             width: '100%',
           }}
         >
-          <div style={{ maxWidth: 780, margin: 'auto', display: 'block' }}>
           {children}
         </div>
-        </div>
       </body>
     </html>
   );

src/app/page.css.ts

@@ -16,10 +16,10 @@ export const tool = style({
   justifyContent: 'flex-end',
   padding: 16,
   gap: 4,
-  boxShadow: 'inset 0 -192px 128px -128px black',
+  boxShadow: `inset 0 -192px 128px -128px ${theme.colors.appBackground1}`,
   transition: `box-shadow ${theme.durations.regular}`,
 
   ':hover': {
-    boxShadow: 'inset 0 -128px 128px -128px black',
+    boxShadow: `inset 0 -128px 128px -128px ${theme.colors.appBackground1}`,
   },
 });

src/app/page.tsx

@@ -4,47 +4,50 @@ import { CaretRightIcon } from '@radix-ui/react-icons';
 import Link from 'next/link';
 import { useRef } from 'react';
 import { Search, SearchItem } from 'react-fuzzysort';
+import PageWrapper from '../components/PageWrapper';
 import { SearchBar } from '../components/SearchBar';
 import { theme } from '../stitches.config';
 import * as styles from './page.css';
 
-const TOOLS = [
+export const TOOLS = [
   {
+    id: 'session',
+    title: 'Session tracker',
+    description: 'Track your performance in a session',
+  },
+  {
+    id: 'ratings',
     title: 'Ratings',
     description: 'Current and old season leader boards',
-    banner: '/assets/banners/ratings.png',
-    href: '/tools/ratings',
   },
   {
+    id: 'tankopedia',
     title: 'Tankopedia',
     description: 'Full Blitz tank encyclopedia',
-    banner: '/assets/banners/tank.png',
-    href: '/tools/tankopedia',
   },
   {
+    id: 'inactive',
     title: 'Inactivity tracker',
     description: 'Find inactive members of a clan',
-    banner: '/assets/banners/inactive.png',
-    href: '/tools/inactive',
   },
   {
+    id: 'profile',
     title: 'Player profile',
     description: "A player's basic non-statistical info",
-    banner: '/assets/banners/player.png',
-    href: '/tools/profile',
-  },
-  {
-    title: 'More coming soon',
-    description: 'New tools are added often',
-    banner: '/assets/banners/more.png',
-    href: 'https://discord.gg/nDt7AjGJQH',
   },
+  // {
+  //   title: 'More coming soon',
+  //   description: 'New tools are added often',
+  //   banner: '/assets/banners/more.png',
+  //   id: 'https://discord.gg/nDt7AjGJQH',
+  // },
 ];
 
 export default function Page() {
   const input = useRef<HTMLInputElement>(null);
 
   return (
+    <PageWrapper>
       <div
         style={{
           width: '100%',
@@ -71,10 +74,10 @@ export default function Page() {
                 ({
                   node: (
                     <Link
-                    href={tool.href}
+                      href={`/tools/${tool.id}`}
                       className={styles.tool}
                       style={{
-                      backgroundImage: `url(${tool.banner})`,
+                        backgroundImage: `url(/assets/banners/${tool.id}.png)`,
                       }}
                     >
                       <span
@@ -87,7 +90,9 @@ export default function Page() {
                         }}
                       >
                         {tool.title}
-                      <CaretRightIcon style={{ width: '1em', height: '1em' }} />
+                        <CaretRightIcon
+                          style={{ width: '1em', height: '1em' }}
+                        />
                       </span>
                       <span
                         style={{
@@ -105,5 +110,6 @@ export default function Page() {
           />
         </div>
       </div>
+    </PageWrapper>
   );
 }

src/app/tools/layout.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { ReactNode } from 'react';
+import { theme } from '../../stitches.config';
+import { TOOLS } from '../page';
+
+interface ToolsLayoutProps {
+  children: ReactNode;
+}
+
+export default function ToolsLayout({ children }: ToolsLayoutProps) {
+  const toolId = location.pathname.split('/').at(-1);
+  const tool = TOOLS.find((tool) => tool.id === toolId);
+
+  return (
+    <>
+      <div
+        style={{
+          height: 128,
+          backgroundImage: `url(/assets/banners/${toolId}.png)`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          boxShadow: `inset 0 -192px 128px -128px ${theme.colors.appBackground1}`,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: 4,
+          flexDirection: 'column',
+        }}
+      >
+        <span
+          style={{
+            color: theme.colors.textHighContrast,
+            fontSize: 32,
+          }}
+        >
+          {tool?.title}
+        </span>
+        <span
+          style={{
+            color: theme.colors.textLowContrast,
+            fontSize: 16,
+          }}
+        >
+          {tool?.description}
+        </span>
+      </div>
+
+      {children}
+    </>
+  );
+}

src/app/tools/session/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return 'inner';
+}

src/components/PageWrapper.tsx

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+
+interface PageWrapperProps {
+  children: ReactNode;
+}
+
+export default function PageWrapper({ children }: PageWrapperProps) {
+  return (
+    <div style={{ maxWidth: 780, margin: 'auto', display: 'block' }}>
+      {children}
+    </div>
+  );
+}

src/components/SearchBar.tsx

@@ -13,7 +13,7 @@ export const SearchBar = forwardRef<HTMLInputElement, ComponentProps<'input'>>(
         style={{
           display: 'flex',
           padding: 8,
-          borderRadius: 16,
+          borderRadius: 4,
           border: theme.borderStyles.interactive,
           backgroundColor: theme.colors.componentInteractive,
           color: theme.colors.textLowContrast,