feat: session toolbar

src/app/page.tsx

@@ -48,67 +48,54 @@ export default function Page() {
 
   return (
     <PageWrapper>
+      <SearchBar ref={input} />
+
       <div
         style={{
-          width: '100%',
-          padding: 16,
           display: 'flex',
-          flexDirection: 'column',
           gap: 16,
-          boxSizing: 'border-box',
+          flexWrap: 'wrap',
         }}
       >
-        <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}
+        <Search
+          input={input}
+          list={TOOLS.map(
+            (tool) =>
+              ({
+                node: (
+                  <Link
+                    href={`/tools/${tool.id}`}
+                    className={styles.tool}
+                    style={{
+                      backgroundImage: `url(/assets/banners/${tool.id}.png)`,
+                    }}
+                  >
+                    <span
                       style={{
-                        backgroundImage: `url(/assets/banners/${tool.id}.png)`,
+                        fontSize: 32,
+                        color: theme.colors.textHighContrast,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
                       }}
                     >
-                      <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>
+                      {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>
     </PageWrapper>
   );

src/app/tools/session/page.css.ts

@@ -0,0 +1,23 @@
+import { style } from '@vanilla-extract/css';
+
+export const toolBar = style({
+  '@media': {
+    'screen and (min-width: 640px)': {
+      flexDirection: 'row',
+    },
+  },
+
+  flexDirection: 'column',
+  display: 'flex',
+  gap: 8,
+});
+
+export const button = style({
+  '@media': {
+    'screen and (min-width: 640px)': {
+      flex: 0,
+    },
+  },
+
+  flex: 1,
+});

src/app/tools/session/page.tsx

@@ -1,3 +1,29 @@
+'use client';
+
+import { CopyIcon, ListBulletIcon, ReloadIcon } from '@radix-ui/react-icons';
+import { Button } from '../../../components/Button';
+import PageWrapper from '../../../components/PageWrapper';
+import { SearchBar } from '../../../components/SearchBar';
+import * as styles from './page.css';
+
 export default function Page() {
-  return 'inner';
+  return (
+    <PageWrapper>
+      <div className={styles.toolBar}>
+        <SearchBar style={{ flex: 1 }} placeholder="Search for a player..." />
+
+        <div style={{ display: 'flex', gap: 8 }}>
+          <Button className={styles.button} color="dangerous">
+            <ReloadIcon /> Reset
+          </Button>
+          <Button className={styles.button}>
+            <CopyIcon /> Embed
+          </Button>
+          <Button className={styles.button}>
+            <ListBulletIcon /> Options
+          </Button>
+        </div>
+      </div>
+    </PageWrapper>
+  );
 }