feat: added tool ground work

src/app/layout.tsx

@@ -28,9 +28,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
             width: '100%',
           }}
         >
-          <div style={{ maxWidth: 780, margin: 'auto', display: 'block' }}>
-            {children}
-          </div>
+          {children}
         </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,106 +4,112 @@ 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 (
-    <div
-      style={{
-        width: '100%',
-        padding: 16,
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 16,
-        boxSizing: 'border-box',
-      }}
-    >
-      <SearchBar ref={input} />
-
+    <PageWrapper>
       <div
         style={{
+          width: '100%',
+          padding: 16,
           display: 'flex',
+          flexDirection: 'column',
           gap: 16,
-          flexWrap: 'wrap',
+          boxSizing: 'border-box',
         }}
       >
-        <Search
-          input={input}
-          list={TOOLS.map(
-            (tool) =>
-              ({
-                node: (
-                  <Link
-                    href={tool.href}
-                    className={styles.tool}
-                    style={{
-                      backgroundImage: `url(${tool.banner})`,
-                    }}
-                  >
-                    <span
+        <SearchBar ref={input} />
+
+        <div
+          style={{
+            display: 'flex',
+            gap: 16,
+            flexWrap: 'wrap',
+          }}
+        >
+          <Search
+            input={input}
+            list={TOOLS.map(
+              (tool) =>
+                ({
+                  node: (
+                    <Link
+                      href={`/tools/${tool.id}`}
+                      className={styles.tool}
                       style={{
-                        fontSize: 32,
-                        color: theme.colors.textHighContrast,
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
+                        backgroundImage: `url(/assets/banners/${tool.id}.png)`,
                       }}
                     >
-                      {tool.title}
-                      <CaretRightIcon style={{ width: '1em', height: '1em' }} />
-                    </span>
-                    <span
-                      style={{
-                        color: theme.colors.textLowContrast,
-                        fontSize: 16,
-                      }}
-                    >
-                      {tool.description}
-                    </span>
-                  </Link>
-                ),
-                query: `${tool.title} ${tool.description}`,
-              }) satisfies SearchItem,
-          )}
-        />
+                      <span
+                        style={{
+                          fontSize: 32,
+                          color: theme.colors.textHighContrast,
+                          display: 'flex',
+                          alignItems: 'center',
+                          justifyContent: 'center',
+                        }}
+                      >
+                        {tool.title}
+                        <CaretRightIcon
+                          style={{ width: '1em', height: '1em' }}
+                        />
+                      </span>
+                      <span
+                        style={{
+                          color: theme.colors.textLowContrast,
+                          fontSize: 16,
+                        }}
+                      >
+                        {tool.description}
+                      </span>
+                    </Link>
+                  ),
+                  query: `${tool.title} ${tool.description}`,
+                }) satisfies SearchItem,
+            )}
+          />
+        </div>
       </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,