Add side drawer to display feature guide

ui/providers/features-guide-provider.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { FeaturesGuide } from "../features-guide";
+
+/** Local storage key that stores boolean for whether guide has been closed by user */
+const GUIDE_CLOSED_KEY = "guide-closed";
+
+const FeaturesGuideContext = React.createContext<{
+  show: () => void;
+}>({ show: () => {} });
+
+/** Context provider for showing the features guide dialog */
+export const FeaturesGuideProvider = (props: { children: React.ReactNode }) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  React.useEffect(() => {
+    const hasClosedGuide = window.localStorage.getItem(GUIDE_CLOSED_KEY);
+    if (hasClosedGuide == null) setIsOpen(true);
+  });
+
+  return (
+    <FeaturesGuideContext.Provider value={{ show: () => setIsOpen(true) }}>
+      {props.children}
+      {isOpen && (
+        <FeaturesGuide
+          isOpen={isOpen}
+          onClose={() => {
+            window.localStorage.setItem(GUIDE_CLOSED_KEY, "true");
+            setIsOpen(false);
+          }}
+        />
+      )}
+    </FeaturesGuideContext.Provider>
+  );
+};
+
+/** Utility hook to show the features guide */
+export const useFeaturesGuide = () => React.useContext(FeaturesGuideContext);

ui/providers/index.tsx

@@ -0,0 +1,22 @@
+import { DarkModeProvider } from "./dark-mode-provider";
+import { ErrorBoundaryProvider } from "./error-boundary-provider";
+import { FeaturesGuideProvider } from "./features-guide-provider";
+
+type Props = {
+  omitFeatureGuide?: boolean;
+  children: React.ReactNode;
+};
+
+export const Providers = (props: Props) => {
+  return (
+    <DarkModeProvider>
+      <ErrorBoundaryProvider>
+        {props.omitFeatureGuide ? (
+          props.children
+        ) : (
+          <FeaturesGuideProvider>{props.children}</FeaturesGuideProvider>
+        )}
+      </ErrorBoundaryProvider>
+    </DarkModeProvider>
+  );
+};