Add settings UI page (#171)

* Add theme colors from Figma

* Rough-in of AppHeader

* Add styled ActionButton

* Add react-router and placeholder Settings page

* Add ability to set persistent defaultDir

* Add react-hot-toast for save success message

* Add defaultProjectName setting

* Handle case of stale empty defaultDir in storage

* Wrap app in BrowserRouter

* Wrap test App in BrowserRouter

* Don't need BrowserRouter outside of testing
because we use RouterProvider

src/components/ActionButton.tsx

@@ -0,0 +1,35 @@
+import { Link } from 'react-router-dom'
+import { ActionIcon, ActionIconProps } from './ActionIcon'
+
+interface ActionButtonProps extends React.PropsWithChildren {
+  icon?: ActionIconProps
+  className?: string
+  onClick?: () => void
+  to?: string
+  as?: 'button' | 'link'
+}
+
+export const ActionButton = ({
+  icon,
+  className,
+  onClick,
+  to = '/',
+  as = 'button',
+  children,
+}: ActionButtonProps) => {
+  const classNames = `group mono flex items-center gap-2 text-chalkboard-110 rounded-sm border border-chalkboard-40 hover:border-liquid-40 p-[3px] ${
+    icon ? 'pr-2' : 'px-2'
+  } ${className}`
+
+  return as === 'button' ? (
+    <button onClick={onClick} className={classNames}>
+      {icon && <ActionIcon {...icon} />}
+      {children}
+    </button>
+  ) : (
+    <Link to={to} className={classNames}>
+      {icon && <ActionIcon {...icon} />}
+      {children}
+    </Link>
+  )
+}