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/AppHeader.tsx

@@ -0,0 +1,37 @@
+import { faGear } from '@fortawesome/free-solid-svg-icons'
+import { Toolbar } from '../Toolbar'
+import { ActionButton } from './ActionButton'
+
+interface AppHeaderProps extends React.PropsWithChildren {
+  showToolbar?: boolean
+}
+
+export const AppHeader = ({ showToolbar = true, children }: AppHeaderProps) => {
+  return (
+    <header className="py-1 px-5 bg-chalkboard-10 border-b border-chalkboard-30 flex justify-between items-center">
+      <a href="/project-settings">
+        <img
+          src="/kitt-arcade-winking.svg"
+          alt="KittyCAD App"
+          className="h-9 w-auto"
+        />
+        <span className="sr-only">KittyCAD App</span>
+      </a>
+      {/* Toolbar if the context deems it */}
+      {showToolbar && (
+        <div className="max-w-4xl">
+          <Toolbar />
+        </div>
+      )}
+      {/* If there are children, show them, otherwise... */}
+      {children || (
+        // TODO: If signed out, show the token paste field
+
+        // If signed in, show the account avatar
+        <ActionButton as="link" icon={{ icon: faGear }} to="/settings">
+          Settings
+        </ActionButton>
+      )}
+    </header>
+  )
+}