From 3b1b6d28d608ea0a7e082418bd89d2f2a540b40c Mon Sep 17 00:00:00 2001
From: AAGaming <aa@mail.catvibers.me>
Date: Mon, 15 Aug 2022 13:22:38 -0400
Subject: add some classes for nicer scrolling, update lib

---
 frontend/src/components/PluginView.tsx | 48 ++++++++++++++++++++++------------
 frontend/src/components/TitleView.tsx  |  1 -
 2 files changed, 32 insertions(+), 17 deletions(-)

(limited to 'frontend/src')

diff --git a/frontend/src/components/PluginView.tsx b/frontend/src/components/PluginView.tsx
index cc6dbefc..28a1540e 100644
--- a/frontend/src/components/PluginView.tsx
+++ b/frontend/src/components/PluginView.tsx
@@ -1,4 +1,11 @@
-import { ButtonItem, PanelSection, PanelSectionRow } from 'decky-frontend-lib';
+import {
+  ButtonItem,
+  PanelSection,
+  PanelSectionRow,
+  joinClassNames,
+  scrollClasses,
+  staticClasses,
+} from 'decky-frontend-lib';
 import { VFC } from 'react';
 
 import { useDeckyState } from './DeckyState';
@@ -7,24 +14,33 @@ const PluginView: VFC = () => {
   const { plugins, activePlugin, setActivePlugin } = useDeckyState();
 
   if (activePlugin) {
-    return <div style={{ height: '100%' }}>{activePlugin.content}</div>;
+    return (
+      <div
+        className={joinClassNames(staticClasses.TabGroupPanel, scrollClasses.ScrollPanel, scrollClasses.ScrollY)}
+        style={{ height: '100%' }}
+      >
+        {activePlugin.content}
+      </div>
+    );
   }
 
   return (
-    <PanelSection>
-      {plugins
-        .filter((p) => p.content)
-        .map(({ name, icon }) => (
-          <PanelSectionRow key={name}>
-            <ButtonItem layout="below" onClick={() => setActivePlugin(name)}>
-              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-                <div>{icon}</div>
-                <div>{name}</div>
-              </div>
-            </ButtonItem>
-          </PanelSectionRow>
-        ))}
-    </PanelSection>
+    <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', justifyContent: 'space-between' }}>
+                  <div>{icon}</div>
+                  <div>{name}</div>
+                </div>
+              </ButtonItem>
+            </PanelSectionRow>
+          ))}
+      </PanelSection>
+    </div>
   );
 };
 
diff --git a/frontend/src/components/TitleView.tsx b/frontend/src/components/TitleView.tsx
index babcd316..d0a3de0b 100644
--- a/frontend/src/components/TitleView.tsx
+++ b/frontend/src/components/TitleView.tsx
@@ -7,7 +7,6 @@ import { useDeckyState } from './DeckyState';
 const titleStyles: CSSProperties = {
   display: 'flex',
   paddingTop: '3px',
-  paddingBottom: '14px',
   paddingRight: '16px',
   boxShadow: 'unset',
 };
-- 
cgit v1.2.3