Franknoirot/add walkthrough (#189)

* Barebones onboarding triggering and resetting

* Make onboarding route-based

* Add Camera step, highlighting camera feed

* Implement redirect behavior

* Unify navigation hooks

* Formatting

* add useResizeObserver, convert to custom hook

src/Auth.tsx

@@ -6,27 +6,46 @@ import { SetToken } from './components/TokenInput'
 import { useStore } from './useStore'
 import {
   createBrowserRouter,
+  redirect,
   RouterProvider,
 } from "react-router-dom"
 import { ErrorPage } from './components/ErrorPage'
 import { Settings } from './routes/Settings'
+import Onboarding, { onboardingRoutes } from './routes/Onboarding'
 
 const router = createBrowserRouter([
   {
     path: "/",
     element: <App />,
     errorElement: <ErrorPage />,
+    loader: () => {
+      const store = localStorage.getItem('store')
+      if (store === null) {
+        return redirect('/onboarding')
+      } else {
+        const status = (JSON.parse(store)).state.onboardingStatus
+        if (status !== 'done' && status !== 'dismissed') {
+          return redirect('/onboarding/' + status)
+        }
+      } 
+      return null
+    }
   },
   {
     path: "/settings",
     element: <Settings />,
+  },
+  {
+    path: "/onboarding",
+    element: <Onboarding/>,
+    children: onboardingRoutes,
   }
 ])
 
 export const Auth = () => {
   const { data: user } = useSWR(withBaseUrl('/user'), fetcher) as any
   const  {token} = useStore((s) => ({
-    token: s.token
+    token: s.token,
   }))
 
   const isLocalHost =