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>
+  );
 }

src/components/Button.tsx

@@ -0,0 +1,39 @@
+import { ComponentProps } from 'react';
+import { theme } from '../stitches.config';
+
+type ButtonColor = 'default' | 'dangerous' | 'recommended';
+
+interface ButtonProps extends ComponentProps<'button'> {
+  color?: ButtonColor;
+}
+
+const BUTTON_COLORS = {
+  default: '',
+  dangerous: '_red',
+  recommended: '_blue',
+} as const satisfies Record<ButtonColor, string>;
+
+export function Button({ color, style, ...props }: ButtonProps) {
+  color = color ?? 'default';
+
+  return (
+    <button
+      style={{
+        color: theme.colors[`textHighContrast${BUTTON_COLORS[color]}`],
+        backgroundColor:
+          theme.colors[`componentInteractive${BUTTON_COLORS[color]}`],
+        borderRadius: 4,
+        border: theme.borderStyles[`interactive${BUTTON_COLORS[color]}`],
+        cursor: 'pointer',
+        padding: 8,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 4,
+
+        ...style,
+      }}
+      {...props}
+    />
+  );
+}

src/components/PageWrapper.tsx

@@ -1,13 +1,24 @@
-import { ReactNode } from 'react';
+import { ComponentProps } from 'react';
 
-interface PageWrapperProps {
-  children: ReactNode;
-}
-
-export default function PageWrapper({ children }: PageWrapperProps) {
+export default function PageWrapper({
+  style,
+  ...props
+}: ComponentProps<'div'>) {
   return (
-    <div style={{ maxWidth: 780, margin: 'auto', display: 'block' }}>
-      {children}
-    </div>
+    <div
+      style={{
+        width: '100%',
+        maxWidth: 780,
+        margin: 'auto',
+        display: 'flex',
+        padding: 16,
+        flexDirection: 'column',
+        gap: 16,
+        boxSizing: 'border-box',
+
+        ...style,
+      }}
+      {...props}
+    />
   );
 }

src/components/SearchBar.tsx

@@ -3,7 +3,7 @@ import { ComponentProps, forwardRef, useImperativeHandle, useRef } from 'react';
 import { theme } from '../stitches.config';
 
 export const SearchBar = forwardRef<HTMLInputElement, ComponentProps<'input'>>(
-  (props, ref) => {
+  ({ style, ...props }, ref) => {
     const input = useRef<HTMLInputElement>(null);
 
     useImperativeHandle(ref, () => input.current!);
@@ -22,10 +22,13 @@ export const SearchBar = forwardRef<HTMLInputElement, ComponentProps<'input'>>(
           justifyContent: 'center',
           gap: 8,
           cursor: 'text',
+
+          ...style,
         }}
         onClick={() => input.current?.focus()}
       >
         <MagnifyingGlassIcon style={{ width: '1em', height: '1em' }} />
+
         <input
           {...props}
           ref={input}

src/stitches.config.ts

@@ -1,4 +1,10 @@
-import { amberDark, blueDark, slate, slateDark } from '@radix-ui/colors';
+import {
+  amberDark,
+  blueDark,
+  slate,
+  slateDark,
+  tomatoDark,
+} from '@radix-ui/colors';
 import { createBorderStyles, createColors, createSpaces } from 'bepaint';
 
 // this isn't really a stitches config, but the object is compliant
@@ -11,9 +17,14 @@ export const theme = {
 
     ...createColors(amberDark, 'amber'),
     ...createColors(blueDark, 'blue'),
+    ...createColors(tomatoDark, 'red'),
   },
 
-  borderStyles: createBorderStyles(slateDark),
+  borderStyles: {
+    ...createBorderStyles(slateDark),
+    ...createBorderStyles(blueDark, undefined, 'blue'),
+    ...createBorderStyles(tomatoDark, undefined, 'red'),
+  },
 
   durations: {
     regular: '0.2s',