chore: bring main up to dev

package.json

@@ -51,7 +51,7 @@
     "@types/react-window": "^1.8.5",
     "@types/uuid": "^9.0.2",
     "@types/webpack": "^5.28.1",
-    "decky-frontend-lib": "^3.21.8",
+    "decky-frontend-lib": "^3.24.5",
     "husky": "^8.0.3",
     "markdown-it": "^13.0.1",
     "rollup": "^2.79.1",

src/components/CustomTabContainer.tsx

@@ -51,7 +51,9 @@ export class CustomTabContainer implements TabContainer {
       id: this.id
     };
 
-    this.buildCollection();
+    if (this.position > -1) {
+      this.buildCollection();
+    }
     this.checkMicroSDeckDependency();
   }
 
@@ -79,33 +81,31 @@ export class CustomTabContainer implements TabContainer {
    * Builds the list of apps for this tab.
    */
   buildCollection() {
-    if (this.position > -1) { 
-      const {hidden, ...catsToIncludeObj} = getIncludedCategoriesFromBitField(this.categoriesToInclude);
-      const visibility = hidden ? "allApps" : "visibleApps";
-      let listToFilter: SteamAppOverview[] = [];
-
-      for (const key in catsToIncludeObj) {
-        const category = key as keyof typeof catsToIncludeObj;
-        if (catsToIncludeObj[category]) listToFilter = listToFilter.concat(collectionStore.appTypeCollectionMap.get(`type-${category}`)![visibility]);
+    const { hidden, ...catsToIncludeObj } = getIncludedCategoriesFromBitField(this.categoriesToInclude);
+    const visibility = hidden ? "allApps" : "visibleApps";
+    let listToFilter: SteamAppOverview[] = [];
+
+    for (const key in catsToIncludeObj) {
+      const category = key as keyof typeof catsToIncludeObj;
+      if (catsToIncludeObj[category]) listToFilter = listToFilter.concat(collectionStore.appTypeCollectionMap.get(`type-${category}`)![visibility]);
+    }
+
+    const appsList = listToFilter.filter(appItem => {
+      if (this.filtersMode === 'and') {
+        return this.filters.every(filterSettings => Filter.run(filterSettings, appItem));
+      } else {
+        return this.filters.some(filterSettings => Filter.run(filterSettings, appItem));
       }
-
-      const appsList = listToFilter.filter(appItem => {
-        if (this.filtersMode === 'and') {
-          return this.filters.every(filterSettings => Filter.run(filterSettings, appItem));
-        } else {
-          return this.filters.some(filterSettings => Filter.run(filterSettings, appItem));
-        }
-      });
+    });
 
-      this.collection.allApps = appsList;
-      this.collection.visibleApps = [...appsList];
+    this.collection.allApps = appsList;
+    this.collection.visibleApps = [...appsList];
 
-      const allAppsMap = collectionStore.allAppsCollection.apps;
-      const appMap = new Map<AppId, SteamAppOverview>();
-      appsList.forEach((appItem: SteamAppOverview) => appMap.set(appItem.appid, allAppsMap.get(appItem.appid)!));
+    const allAppsMap = collectionStore.allAppsCollection.apps;
+    const appMap = new Map<AppId, SteamAppOverview>();
+    appsList.forEach((appItem: SteamAppOverview) => appMap.set(appItem.appid, allAppsMap.get(appItem.appid)!));
 
-      this.collection.apps = appMap;
-    }
+    this.collection.apps = appMap;
   }
 
   /**

src/components/QuickAccessContent.tsx

@@ -107,20 +107,20 @@ export const QuickAccessContent: VFC<{}> = ({ }) => {
         <Field className="no-sep">
           <Focusable style={{ width: "100%", display: "flex" }}>
             <Focusable className="add-tab-btn" style={{ width: "calc(100% - 50px)" }}>
-              <DialogButton onClick={() => showModalNewTab(tabMasterManager)} onOKActionDescription={'Add Tab'}>
+              <DialogButton disabled={!tabMasterManager.hasSettingsLoaded} onClick={() => showModalNewTab(tabMasterManager)} onOKActionDescription={'Add Tab'}>
                 Add Tab
               </DialogButton>
             </Focusable>
-            {tabMasterManager.hasSettingsLoaded &&
-              <Focusable className="add-tab-btn" style={{ marginLeft: "10px" }}>
-                <DialogButton
-                  style={{ height: '40px', width: '42px', minWidth: 0, padding: '10px 12px', marginLeft: 'auto', display: "flex", justifyContent: "center", alignItems: "center", marginRight: "8px" }}
-                  onOKActionDescription={'Add Quick Tab'}
-                  onClick={() => showContextMenu(<PresetMenu tabMasterManager={tabMasterManager} isMicroSDeckInstalled={isMicroSDeckInstalled} />)}
-                >
-                  <PiListPlusBold size='1.4em' />
-                </DialogButton>
-              </Focusable>}
+            <Focusable className="add-tab-btn" style={{ marginLeft: "10px" }}>
+              <DialogButton
+                disabled={!tabMasterManager.hasSettingsLoaded}
+                style={{ height: '40px', width: '42px', minWidth: 0, padding: '10px 12px', marginLeft: 'auto', display: "flex", justifyContent: "center", alignItems: "center", marginRight: "8px" }}
+                onOKActionDescription={'Add Quick Tab'}
+                onClick={() => showContextMenu(<PresetMenu tabMasterManager={tabMasterManager} isMicroSDeckInstalled={isMicroSDeckInstalled} />)}
+              >
+                <PiListPlusBold size='1.4em' />
+              </DialogButton>
+              </Focusable>
           </Focusable>
         </Field>
         <PanelSection title="Tabs">
@@ -186,6 +186,7 @@ export const QuickAccessTitleView: VFC<QuickAccessTitleViewProps> = ({ title, ta
     >
       <div style={{ marginRight: "auto" }}>{title}</div>
       <DialogButton
+        disabled={!tabMasterManager.hasSettingsLoaded}
         onOKActionDescription="Manage Tab Profiles"
         style={buttonStyle}
         onClick={() => showContextMenu(<TabProfilesMenu tabMasterManager={tabMasterManager} />)}

src/components/docs/DocsPage.tsx

@@ -1,8 +1,6 @@
 import { VFC, Fragment } from "react";
-
 import MarkDownIt from "markdown-it";
-import { ModalPosition, Panel, ScrollPanelGroup } from "./Scrollable";
-import { gamepadDialogClasses } from "decky-frontend-lib";
+import { Focusable, gamepadDialogClasses, ModalPosition, ScrollPanelGroup } from "decky-frontend-lib";
 
 const mdIt = new MarkDownIt({
   html: true
@@ -51,13 +49,18 @@ export const DocPage: VFC<{ content: string }> = ({ content }) => {
       `}</style>
       <div className="tab-master-docs">
         <ModalPosition >
-          <Panel style={{ display: "flex", flexDirection: "column", minHeight: 0 }}>
-            <ScrollPanelGroup focusable={false} style={{ flex: 1, minHeight: 0, padding: "12px" }} scrollPaddingTop={32}>
-              <Panel focusable={true} noFocusRing={true} >
+          <Focusable style={{ display: "flex", flexDirection: "column", minHeight: 0 }}>
+            <ScrollPanelGroup
+              //@ts-ignore
+              focusable={false}
+              style={{ flex: 1, minHeight: 0, padding: "12px" }}
+              scrollPaddingTop={32}
+            >
+              <Focusable onActivate={() => {}} noFocusRing={true} >
                 <div dangerouslySetInnerHTML={{ __html: mdIt.render(content) }} />
-              </Panel>
+              </Focusable>
             </ScrollPanelGroup>
-          </Panel>
+          </Focusable>
         </ModalPosition>
       </div>
     </>

src/components/generic/ScrollableWindow.tsx

@@ -1,6 +1,5 @@
-import { GamepadButton, gamepadDialogClasses, scrollPanelClasses } from 'decky-frontend-lib';
+import { GamepadButton, gamepadDialogClasses, scrollPanelClasses, ModalPosition, ScrollPanelGroup, Focusable } from 'decky-frontend-lib';
 import { FC, Fragment, useRef } from 'react';
-import { ModalPosition, Panel, ScrollPanelGroup } from '../docs/Scrollable';
 import { useIsOverflowing } from '../../hooks/useIsOverflowing';
 
 export interface ScrollableWindowProps {
@@ -15,16 +14,23 @@ export const ScrollableWindow: FC<ScrollableWindowProps> = ({ height, fadeAmount
   const isOverflowing = useIsOverflowing(scrollPanelRef);
 
   const panel = (
-    <ScrollPanelGroup ref={scrollPanelRef} focusable={false} style={{ flex: 1, minHeight: 0 }}>
-      <Panel
-        focusable={isOverflowing}
+    <ScrollPanelGroup
+      //@ts-ignore
+      ref={scrollPanelRef}
+      focusable={false}
+      style={{ flex: 1, minHeight: 0 }}
+    >
+      <Focusable
         noFocusRing={true}
         actionDescriptionMap={{
           [GamepadButton.DIR_UP]: 'Scroll Up',
           [GamepadButton.DIR_DOWN]: 'Scroll Down'
-        }}>
+        }}
+        //@ts-ignore
+        focusable={isOverflowing}
+      >
         {children}
-      </Panel>
+      </Focusable>
     </ScrollPanelGroup>
   );
 

src/lib/controllers/TabErrorController.tsx

@@ -47,8 +47,11 @@ export class TabErrorController {
           onConfirm={(editedTabSettings: TabSettingsDictionary) => {
             for (const tab of Object.values(editedTabSettings)) {
               if (tabsToFix.has(tab.id)) {
-                if (tab.filters!.length === 0) tabMasterManager.deleteTab(tab.id);
-                else tabMasterManager.updateCustomTab(tab.id, tab as EditableTabSettings);
+                if (tab.filters!.length === 0) {
+                  tabMasterManager.deleteTab(tab.id);
+                } else {
+                  tabMasterManager.updateCustomTab(tab.id, tab as EditableTabSettings);
+                }
               }
             }
 
@@ -70,8 +73,11 @@ export class TabErrorController {
    */
   private static processQueue = (tabMasterManager: TabMasterManager) => {
     const validationSet = this.validationQueue.splice(0, this.validationQueue.length);
-    if (validationSet.length > 0) this.validateInternal(validationSet, tabMasterManager);
-    else this.validationLock = false;
+    if (validationSet.length > 0) {
+      this.validateInternal(validationSet, tabMasterManager);
+    } else {
+      this.validationLock = false;
+    }
   }
 
   /**
@@ -131,7 +137,7 @@ export class TabErrorController {
           onConfirm={(editedTabSettings: TabSettingsDictionary) => {
             const tabsToDelete: string[] = [];
             for (const tab of Object.values(editedTabSettings)) {
-              if (tabsToFix.has(tab.id) && tab.filters!.length === 0) tabsToDelete.push();
+              if (tabsToFix.has(tab.id) && tab.filters!.length === 0) tabsToDelete.push(tab.id);
             }
 
             finishLoading(editedTabSettings);

src/state/TabProfileManager.tsx

@@ -1,3 +1,4 @@
+import { CustomTabContainer } from '../components/CustomTabContainer';
 import { PythonInterop } from '../lib/controllers/PythonInterop';
 import { TabMasterManager } from './TabMasterManager';
 
@@ -32,7 +33,13 @@ export class TabProfileManager {
    * @param tabMasterManager The plugin manager.
    */
   apply(tabProfileName: string, tabMasterManager: TabMasterManager) {
-    tabMasterManager.getTabs().tabsMap.forEach(tabContainer => tabContainer.position = -1);
+    const { visibleTabsList, hiddenTabsList } = tabMasterManager.getTabs();
+    hiddenTabsList.forEach(tabContainer => {
+      if (tabContainer.filters && (tabContainer as CustomTabContainer).collection.allApps === undefined) {
+        (tabContainer as CustomTabContainer).buildCollection();
+      }
+    });
+    visibleTabsList.forEach(tabContainer => tabContainer.position = -1);
     tabMasterManager.reorderTabs(this.tabProfiles[tabProfileName]);
   }