feat: session toolbar

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}