feat: initial VERY VERY incomplete steam frame support

1 files changed, 33 insertions, 7 deletions

diff --git a/frontend/src/components/PluginView.tsx b/frontend/src/components/PluginView.tsx
index fbafaf05..27c1f2f1 100644
--- a/frontend/src/components/PluginView.tsx
+++ b/frontend/src/components/PluginView.tsx
@@ -1,4 +1,12 @@
-import { ButtonItem, ErrorBoundary, Focusable, PanelSection, PanelSectionRow } from '@decky/ui';
+import {
+  ButtonItem,
+  ErrorBoundary,
+  Focusable,
+  PanelSection,
+  PanelSectionRow,
+  joinClassNames,
+  vrDashboardClasses,
+} from '@decky/ui';
 import { FC, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaBan, FaEyeSlash } from 'react-icons/fa';
@@ -8,7 +16,7 @@ import NotificationBadge from './NotificationBadge';
 import { useQuickAccessVisible } from './QuickAccessVisibleState';
 import TitleView from './TitleView';
 
-const PluginView: FC = () => {
+const PluginView: FC<{ vr?: boolean }> = ({ vr }) => {
   const {
     plugins,
     disabledPlugins,
@@ -40,20 +48,38 @@ const PluginView: FC = () => {
 
   if (activePlugin) {
     return (
-      <Focusable onCancelButton={closeActivePlugin}>
+      <Focusable
+        onCancelButton={closeActivePlugin}
+        className={
+          (vr && joinClassNames(vrDashboardClasses.QuickAccessPopupPanel, vrDashboardClasses.BottomFade)) || ''
+        }
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          paddingBottom: '20px', // override bottomfade, there is prolly a better way
+        }}
+      >
         <TitleView />
-        <div style={{ height: '100%', paddingTop: '16px' }}>
+        <div style={{ paddingTop: '16px', overflowY: vr ? 'auto' : undefined }}>
           <ErrorBoundary>{(visible || activePlugin.alwaysRender) && activePlugin.content}</ErrorBoundary>
         </div>
       </Focusable>
     );
   }
   return (
-    <>
+    <div
+      className={(vr && joinClassNames(vrDashboardClasses.QuickAccessPopupPanel, vrDashboardClasses.BottomFade)) || ''}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        paddingBottom: '20px', // override bottomfade, there is prolly a better way
+      }}
+    >
       <TitleView />
       <div
         style={{
-          paddingTop: '16px',
+          paddingTop: vr ? '16px' : '16px',
+          overflowY: vr ? 'auto' : undefined,
         }}
       >
         <PanelSection>
@@ -92,7 +118,7 @@ const PluginView: FC = () => {
           </div>
         </PanelSection>
       </div>
-    </>
+    </div>
   );
 };