Allow B button to close active plugin and return to menu. (#218)

frontend/src/components/PluginView.tsx

@@ -1,5 +1,6 @@
 import {
   ButtonItem,
+  Focusable,
   PanelSection,
   PanelSectionRow,
   joinClassNames,
@@ -10,38 +11,47 @@ import { VFC } from 'react';
 
 import { useDeckyState } from './DeckyState';
 import NotificationBadge from './NotificationBadge';
+import { useQuickAccessVisible } from './QuickAccessVisibleState';
+import TitleView from './TitleView';
 
 const PluginView: VFC = () => {
-  const { plugins, updates, activePlugin, setActivePlugin } = useDeckyState();
+  const { plugins, updates, activePlugin, setActivePlugin, closeActivePlugin } = useDeckyState();
+  const visible = useQuickAccessVisible();
 
   if (activePlugin) {
     return (
-      <div
-        className={joinClassNames(staticClasses.TabGroupPanel, scrollClasses.ScrollPanel, scrollClasses.ScrollY)}
-        style={{ height: '100%' }}
-      >
-        {activePlugin.content}
-      </div>
+      <Focusable onCancelButton={closeActivePlugin}>
+        <TitleView />
+        <div
+          className={joinClassNames(staticClasses.TabGroupPanel, scrollClasses.ScrollPanel, scrollClasses.ScrollY)}
+          style={{ height: '100%' }}
+        >
+          {visible && activePlugin.content}
+        </div>
+      </Focusable>
     );
   }
   return (
-    <div className={joinClassNames(staticClasses.TabGroupPanel, scrollClasses.ScrollPanel, scrollClasses.ScrollY)}>
-      <PanelSection>
-        {plugins
-          .filter((p) => p.content)
-          .map(({ name, icon }) => (
-            <PanelSectionRow key={name}>
-              <ButtonItem layout="below" onClick={() => setActivePlugin(name)}>
-                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-                  {icon}
-                  <div>{name}</div>
-                  <NotificationBadge show={updates?.has(name)} style={{ top: '-5px', right: '-5px' }} />
-                </div>
-              </ButtonItem>
-            </PanelSectionRow>
-          ))}
-      </PanelSection>
-    </div>
+    <>
+      <TitleView />
+      <div className={joinClassNames(staticClasses.TabGroupPanel, scrollClasses.ScrollPanel, scrollClasses.ScrollY)}>
+        <PanelSection>
+          {plugins
+            .filter((p) => p.content)
+            .map(({ name, icon }) => (
+              <PanelSectionRow key={name}>
+                <ButtonItem layout="below" onClick={() => setActivePlugin(name)}>
+                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                    {icon}
+                    <div>{name}</div>
+                    <NotificationBadge show={updates?.has(name)} style={{ top: '-5px', right: '-5px' }} />
+                  </div>
+                </ButtonItem>
+              </PanelSectionRow>
+            ))}
+        </PanelSection>
+      </div>
+    </>
   );
 };
 

frontend/src/components/QuickAccessVisibleState.tsx

@@ -0,0 +1,13 @@
+import { FC, createContext, useContext } from 'react';
+
+const QuickAccessVisibleState = createContext<boolean>(true);
+
+export const useQuickAccessVisible = () => useContext(QuickAccessVisibleState);
+
+interface Props {
+  visible: boolean;
+}
+
+export const QuickAccessVisibleStateProvider: FC<Props> = ({ children, visible }) => {
+  return <QuickAccessVisibleState.Provider value={visible}>{children}</QuickAccessVisibleState.Provider>;
+};