Merge pull request #142 from Tormak9970/dev

chore: bring main to 2.3.0

.github/workflows/release.yml

@@ -12,7 +12,7 @@ jobs:
     runs-on: ubuntu-20.04
     outputs:
       release_id: ${{ steps.create-release.outputs.result }}
-      change_log: ${{ steps.changelog.outputs.clean_changelog }}
+      change_log: ${{ steps.changelog.outputs.changelog }}
       version: ${{ steps.changelog.outputs.version }}
       tag: ${{ steps.changelog.outputs.tag }}
 
@@ -27,19 +27,19 @@ jobs:
 
       - name: Generate Changelog for Release
         id: changelog
-        uses: Tormak9970/reliable-changelog@v1
+        uses: Tormak9970/reliable-changelog@v1.1
         with:
           github-token: ${{ secrets.github_token }}
           current-version: "./package.json"
           version-path: "version"
-          patch-commit-bump-interval: "10"
+          patch-version-bump-interval: "10"
 
       - name: Create Release
         id: create-release
         uses: actions/github-script@v6
         env:
           RELEASE_TAG: ${{ steps.changelog.outputs.tag }}
-          RELEASE_LOG: ${{ steps.changelog.outputs.clean_changelog }}
+          RELEASE_LOG: ${{ steps.changelog.outputs.changelog }}
         with:
           script: |
             const { data } = await github.rest.repos.createRelease({

.vscode/extensions.json

@@ -2,9 +2,9 @@
   "recommendations": [
     "stevencl.adddoccomments",
     "ms-vscode.vscode-typescript-next",
-    "aaron-bond.better-comments",
+    "EdwinHuiSH.better-comments-next",
     "editorconfig.editorconfig",
     "ms-vscode-remote.remote-ssh",
     "ms-vscode.remote-explorer"
   ]
-}
+}

package.json

@@ -61,6 +61,7 @@
     "typescript": "^4.9.5"
   },
   "dependencies": {
+    "@cebbinghaus/microsdeck": "0.9.8-8cc660c",
     "mobx": "^5.15.7",
     "react-icons": "^4.10.1",
     "react-virtualized-auto-sizer": "^1.0.20",

src/components/CustomTabContainer.tsx

@@ -14,6 +14,8 @@ export class CustomTabContainer implements TabContainer {
   collection: Collection;
   filtersMode: LogicalMode;
   categoriesToInclude: number;
+  autoHide: boolean;
+  dependsOnMicroSDeck: boolean;
 
   /**
    * Creates a new CustomTabContainer.
@@ -23,14 +25,17 @@ export class CustomTabContainer implements TabContainer {
    * @param filterSettingsList The tab's filters.
    * @param filtersMode boolean operator for top level filters
    * @param categoriesToInclude A bit field of which categories should be included in the tab.
+   * @param autoHide Whether or not the tab should automatically be hidden if it's collection is empty.
    */
-  constructor(id: string, title: string, position: number, filterSettingsList: TabFilterSettings<FilterType>[], filtersMode: LogicalMode, categoriesToInclude: number) {
+  constructor(id: string, title: string, position: number, filterSettingsList: TabFilterSettings<FilterType>[], filtersMode: LogicalMode, categoriesToInclude: number, autoHide: boolean) {
     this.id = id;
     this.title = title;
     this.position = position;
     this.filters = filterSettingsList;
     this.filtersMode = filtersMode;
     this.categoriesToInclude = categoriesToInclude;
+    this.autoHide = autoHide;
+    this.dependsOnMicroSDeck = false;
 
     //@ts-ignore
     this.collection = {
@@ -47,6 +52,7 @@ export class CustomTabContainer implements TabContainer {
     };
 
     this.buildCollection();
+    this.checkMicroSDeckDependency();
   }
 
   getActualTab(TabContentComponent: TabContentComponent, sortingProps: Omit<TabContentProps, 'collection'>, footer: SteamTab['footer'], collectionAppFilter: any): SteamTab {
@@ -104,12 +110,20 @@ export class CustomTabContainer implements TabContainer {
    * @param updatedTabInfo The updated tab settings.
    */
   update(updatedTabInfo: EditableTabSettings) {
-    const { filters, title, filtersMode, categoriesToInclude } = updatedTabInfo;
-    this.title = title;
-    this.filtersMode = filtersMode;
-    this.categoriesToInclude = categoriesToInclude;
-    this.filters = filters;
+    this.title = updatedTabInfo.title;
+    this.filtersMode = updatedTabInfo.filtersMode;
+    this.categoriesToInclude = updatedTabInfo.categoriesToInclude;
+    this.filters = updatedTabInfo.filters;
+    this.autoHide = updatedTabInfo.autoHide;
     this.buildCollection();
+    this.checkMicroSDeckDependency();
+  }
+
+  /**
+   * Checks and sets whether or not the tab has filters that depend on MicroSDeck plugin.
+   */
+  checkMicroSDeckDependency() {
+    this.dependsOnMicroSDeck = this.containsFilterType('sd card');
   }
 
   /**

src/components/MicroSDeckNotice.tsx

@@ -0,0 +1,38 @@
+import { VFC, CSSProperties } from 'react';
+import { MicroSDeckInstallState } from '../lib/controllers/MicroSDeckInterop';
+
+interface MicroSDeckNoticeProps {
+  intallState: MicroSDeckInstallState,
+  pluginVersion: string,
+  libVersion: string,
+  style?: CSSProperties
+}
+
+export const MicroSDeckNotice: VFC<MicroSDeckNoticeProps> = ({ intallState, pluginVersion, libVersion, style }) => {
+  let problem = '';
+  let recommendation = '';
+
+  switch (intallState) {
+    case MicroSDeckInstallState['ver too low']:
+    case MicroSDeckInstallState['ver too high']:
+      problem = `a version mismatch was detected.
+      TabMaster expects version ${libVersion}, but version ${pluginVersion} is installed.`
+      recommendation = intallState === MicroSDeckInstallState['ver too low'] ? 'Please update MicroSDeck to specified version.' : 'Please update TabMaster if available or install specified version of MicroSDeck.'
+      break
+    case MicroSDeckInstallState['ver unknown']:
+      problem = `TabMaster couldn't correctly determine which version it expects or which version is installed.`;
+      recommendation = 'Please try updating TabMaster or MicroSDeck.';
+      break
+    case MicroSDeckInstallState['not installed']:
+      problem = 'it is not installed.';
+      recommendation = 'Please install MicroSDeck for these tabs to work.';
+  }
+
+  return (
+    <div style={style}>
+      <div>You have some tabs that rely on the MicroSDeck plugin, but {problem}</div>
+      <div>{recommendation}</div>
+      <div>Until then, these tabs will not be displayed in the library.</div>
+    </div>
+  );
+};

src/components/TabActions.tsx

@@ -2,8 +2,9 @@ import { MenuItem, showModal, Menu, showContextMenu, DialogButton } from "decky-
 import { VFC } from "react"
 import { FaEllipsisH } from "react-icons/fa"
 import { TabMasterManager } from "../state/TabMasterManager"
-import { EditTabModal, EditableTabSettings } from "./modals/EditTabModal"
+import { showModalEditTab } from "./modals/EditTabModal"
 import { DestructiveModal } from './generic/DestructiveModal';
+import { CustomTabContainer } from './CustomTabContainer';
 
 interface TabActionsContextMenuProps {
   tabContainer: TabContainer,
@@ -22,21 +23,7 @@ export const TabActionsContextMenu: VFC<TabActionsContextMenuProps> = ({ tabCont
 
   if (tabContainer.filters) {
     menuItems.unshift(
-      <MenuItem onSelected={() => {
-        showModal(
-          <EditTabModal
-            onConfirm={(tabId: string | undefined, updatedTabSettings: EditableTabSettings) => {
-              tabMasterManager.updateCustomTab(tabId!, updatedTabSettings);
-            }}
-            tabId={tabContainer.id}
-            tabTitle={tabContainer.title}
-            tabFilters={tabContainer.filters!}
-            tabMasterManager={tabMasterManager}
-            filtersMode={tabContainer.filtersMode!}
-            categoriesToInclude={tabContainer.categoriesToInclude!}
-          />
-        )
-      }}>
+      <MenuItem onSelected={() => showModalEditTab(tabContainer as CustomTabContainer, tabMasterManager)}>
         Edit
       </MenuItem>
     );

src/components/TabListLabel.tsx

@@ -0,0 +1,25 @@
+import { BiSolidHide } from 'react-icons/bi';
+import { CSSProperties, Fragment, VFC } from 'react';
+import { FaSteam } from 'react-icons/fa6';
+import { FaSdCard } from 'react-icons/fa';
+import { CustomTabContainer } from './CustomTabContainer';
+
+interface TabListLabelProps {
+  tabContainer: TabContainer,
+  microSDeckDisabled: boolean,
+  style?: CSSProperties
+}
+
+/**
+ * Tab name and associated icons, used where tabs are listed in QAM and Library menu.
+ */
+export const TabListLabel: VFC<TabListLabelProps> = ({ tabContainer, microSDeckDisabled, style }) => {
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', width: '100%', ...style }}>
+      <div style={{ marginRight: '5px' }}>{tabContainer.title}</div>
+      {tabContainer.filters ? ((tabContainer as CustomTabContainer).dependsOnMicroSDeck ? <FaSdCard fill={microSDeckDisabled ? '#92939b61' : 'currentColor'} /> : <Fragment />) : <FaSteam />}
+      {tabContainer.position !== -1 && tabContainer.autoHide && (tabContainer as CustomTabContainer).collection.visibleApps.length === 0 && <BiSolidHide style={{ marginLeft: 'auto' }} />}
+    </div>
+  );
+};

src/components/accordions/FilterSectionAccordion.tsx

@@ -1,9 +1,8 @@
 import { Button, Focusable } from "decky-frontend-lib"
 import React, { VFC, useState } from "react"
 import { FilterType, TabFilterSettings, isValidParams } from "../filters/Filters"
-import { capitalizeFirstLetter } from "../../lib/Utils"
+import { capitalizeFirstLetter, playUISound } from "../../lib/Utils"
 import { BiSolidDownArrow } from "react-icons/bi"
-import { GamepadUIAudio } from '../../lib/GamepadUIAudio';
 import { FaXmark } from 'react-icons/fa6';
 import { CgCheck } from 'react-icons/cg';
 import { modalMargin } from '../styles/ModalStyles';
@@ -23,13 +22,13 @@ export const FilterSectionAccordion: VFC<FilterSectionAccordionProps> = ({ index
 
   function onClick(e: any) {
     e.stopPropagation();
-    GamepadUIAudio.AudioPlaybackManager.PlayAudioURL('/sounds/deck_ui_misc_01.wav');
+    playUISound('/sounds/deck_ui_misc_01.wav');
     setOpen(!open);
   }
 
   return (
     <Focusable style={{ width: "100%", padding: "0" }}>
-      <Focusable className="filter-start-cont" focusClassName="start-focused" focusWithinClassName="start-focused">
+      <Focusable className="filter-start-cont highlight-on-focus" focusClassName="start-focused" focusWithinClassName="start-focused">
         <Button style={{
           width: "100%",
           padding: "0",

src/components/accordions/TabErrorsAccordion.tsx

@@ -2,6 +2,7 @@ import { Button, Focusable } from "decky-frontend-lib";
 import React, { VFC, useState, Fragment } from "react";
 import { BiSolidDownArrow } from "react-icons/bi";
 import { FaCircleCheck, FaCircleExclamation, FaCircleXmark } from "react-icons/fa6";
+import { playUISound } from '../../lib/Utils';
 
 type TabAccordionIconProps = {
   index: number,
@@ -60,6 +61,7 @@ export const TabErrorsAccordion: VFC<TabErrorsAccordionProps> = ({ index, isPass
 
   function onClick(e: any) {
     e.stopPropagation();
+    playUISound('/sounds/deck_ui_misc_01.wav');
     setOpen(!open);
   }