chore: add qam title view

Tormak9970 · Jan 8, 2024 · d23f85d · d23f85d
1 parent 8de096a
commit d23f85d
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 19 deletions.
diff --git a/src/components/QuickAccessContent.tsx b/src/components/QuickAccessContent.tsx
@@ -8,8 +8,7 @@ import {
   ReorderableEntry,
   ReorderableList,
   showContextMenu,
-  GamepadEvent,
-  GamepadButton
+  quickAccessMenuClasses
 } from "decky-frontend-lib";
 import { VFC, useState } from "react";
 
@@ -28,6 +27,7 @@ import { MicroSDeckInstallState, MicroSDeckInterop, microSDeckLibVersion } from
 import { MicroSDeckNotice } from './MicroSDeckNotice';
 import { CustomTabContainer } from './CustomTabContainer';
 import { TabProfilesMenu } from './context-menus/TabProfileMenu';
+import { TabMasterManager } from '../state/TabMasterManager';
 
 
 export type TabIdEntryType = {
@@ -46,7 +46,7 @@ export const QuickAccessContent: VFC<{}> = ({ }) => {
   const { visibleTabsList, hiddenTabsList, tabsMap, tabMasterManager } = useTabMasterContext();
 
   const microSDeckInstallState = MicroSDeckInterop.getInstallState();
-  const isMicroSDeckInstalled =  microSDeckInstallState === MicroSDeckInstallState['good'];
+  const isMicroSDeckInstalled = microSDeckInstallState === MicroSDeckInstallState['good'];
   const hasSdTabs = !!visibleTabsList.find(tabContainer => (tabContainer as CustomTabContainer).dependsOnMicroSDeck);
 
   function TabEntryInteractables({ entry }: TabEntryInteractablesProps) {
@@ -100,18 +100,7 @@ export const QuickAccessContent: VFC<{}> = ({ }) => {
         </div>
       )}
       <QamStyles />
-      <Focusable
-        actionDescriptionMap={{
-          [GamepadButton.START]: 'Open Docs',
-          [GamepadButton.SELECT]: 'Manage Tab Profiles'
-        }}
-        onButtonDown={(evt: GamepadEvent) => {
-          if(evt.detail.button === GamepadButton.SELECT) {
-            showContextMenu(<TabProfilesMenu tabMasterManager={tabMasterManager}/>);
-          }
-        }}
-        onMenuButton={() => { Navigation.CloseSideMenus(); Navigation.Navigate("/tab-master-docs"); }}
-      >
+      <Focusable >
         <div style={{ margin: "5px", marginTop: "0px" }}>
           Here you can add, re-order, or remove tabs from the library.
         </div>
@@ -175,3 +164,44 @@ export const QuickAccessContent: VFC<{}> = ({ }) => {
     </div>
   );
 };
+
+export interface QuickAccessTitleViewProps {
+  title: string;
+  tabMasterManager: TabMasterManager;
+}
+
+const buttonStyle = { height: '28px', width: '40px', minWidth: 0, padding: 0, display: 'flex', justifyContent: 'center', alignItems: 'center' };
+
+export const QuickAccessTitleView: VFC<QuickAccessTitleViewProps> = ({ title, tabMasterManager }) => {
+
+  return (
+    <Focusable
+      style={{
+        display: 'flex',
+        padding: '0',
+        flex: 'auto',
+        boxShadow: 'none',
+      }}
+      className={quickAccessMenuClasses.Title}
+    >
+      <div style={{ marginRight: "auto" }}>{title}</div>
+      <DialogButton
+        onOKActionDescription="Manage Tab Profiles"
+        style={buttonStyle}
+        onClick={() => showContextMenu(<TabProfilesMenu tabMasterManager={tabMasterManager} />)}
+      >
+        {/* {profiles icon} */}
+      </DialogButton>
+      <DialogButton
+        onOKActionDescription="Open Docs"
+        style={buttonStyle}
+        onClick={() => {
+          Navigation.CloseSideMenus();
+          Navigation.Navigate("/tab-master-docs");
+        }}
+      >
+        {/* {docs icon} */}
+      </DialogButton>
+    </Focusable>
+  );
+};
diff --git a/src/index.tsx b/src/index.tsx
@@ -2,7 +2,6 @@ import {
   definePlugin,
   RoutePatch,
   ServerAPI,
-  staticClasses,
 } from "decky-frontend-lib";
 
 import { TbLayoutNavbarExpand } from "react-icons/tb";
@@ -19,8 +18,9 @@ import { patchSettings } from "./patches/SettingsPatch";
 import { LogController } from "./lib/controllers/LogController";
 import { MicroSDeck } from "@cebbinghaus/microsdeck";
 import { MicroSDeckInterop } from './lib/controllers/MicroSDeckInterop';
-import { QuickAccessContent } from "./components/QuickAccessContent";
+import { QuickAccessContent, QuickAccessTitleView } from "./components/QuickAccessContent";
 import { DocsRouter } from "./components/docs/DocsRouter";
+import { Fragment } from 'react';
 
 declare global {
   let DeckyPluginLoader: { pluginReloadQueue: { name: string; version?: string; }[]; };
@@ -63,9 +63,9 @@ export default definePlugin((serverAPI: ServerAPI) => {
       ));
     }
   });
-
   return {
-    title: <div className={staticClasses.Title}>TabMaster</div>,
+    title: <></>,
+    titleView: <QuickAccessTitleView title="TabMaster" tabMasterManager={tabMasterManager} />,
     content:
       <TabMasterContextProvider tabMasterManager={tabMasterManager}>
         <QuickAccessContent />