Merge pull request #174 from Tormak9970/release

chore: bring main up to v2.5.0

Contributing.md

@@ -43,3 +43,7 @@ Here's what you need to know:
    - docs - changes to the documentation
    - refactor - refactoring
  - when writing a good commit message, keep it short. You can always add details in the commit description
+
+# Pull Requests
+
+PRs should follow commitlint conventions as well. If there is one feature or bug fix, the title should be about that. If there are multiple, it should summarize them.

deploy.sh

@@ -60,8 +60,4 @@ done
 echo "[TASK]: Copying frontend..."
 scpDirRecursive "./dist" "$deck_home_dir/dist"
 
-#? Copy default files
-echo "[TASK]: Copying defaults..."
-scpDirRecursive "./defaults" "$deck_home_dir"
-
-echo "[DONE]"
+echo "[DONE]"

main.py

@@ -22,9 +22,6 @@ class Plugin:
   users_dict: dict[str, dict] = None
   tags: list[dict] = None
 
-  docsDirPath = f"{decky_plugin.DECKY_PLUGIN_DIR}/docs"
-  docs = {}
-
   settings: SettingsManager
 
   async def logMessage(self, message, level):
@@ -183,14 +180,6 @@ async def set_tab_profiles(self, tab_profiles: dict[str, list[str]]):
     Plugin.users_dict[Plugin.user_id]["tabProfiles"] = tab_profiles
     await Plugin.set_setting(self, "usersDict", Plugin.users_dict)
 
-  async def get_docs(self):
-    for docsFileName in os.listdir(self.docsDirPath):
-      with open(os.path.join(self.docsDirPath, docsFileName), 'r') as docFile:
-        docName = docsFileName.replace("_", " ").replace(".md", "")
-        self.docs[docName] = "".join(docFile.readlines())
-
-    return self.docs
-
   async def read(self) -> None:
     """
     Reads the json from disk

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tabmaster",
-  "version": "2.4.1",
+  "version": "2.5.0",
   "description": "Gives you full control over your Steam library! Support for customizing, adding, and hiding Library Tabs.",
   "scripts": {
     "build": "shx rm -rf dist && rollup -c",
@@ -55,13 +55,14 @@
     "husky": "^8.0.3",
     "markdown-it": "^13.0.1",
     "rollup": "^2.79.1",
+    "rollup-plugin-codegen": "^1.0.0",
     "rollup-plugin-import-assets": "^1.1.1",
     "shx": "^0.3.4",
     "tslib": "^2.6.1",
     "typescript": "^4.9.5"
   },
   "dependencies": {
-    "@cebbinghaus/microsdeck": "0.9.8-8cc660c",
+    "@cebbinghaus/microsdeck": "0.10.0-edd7525",
     "mobx": "^6.12.0",
     "react-icons": "^4.12.0",
     "react-virtualized-auto-sizer": "^1.0.20",

rollup.config.js

@@ -5,6 +5,7 @@ import replace from '@rollup/plugin-replace';
 import typescript from '@rollup/plugin-typescript';
 import { defineConfig } from 'rollup';
 import importAssets from 'rollup-plugin-import-assets';
+import codegen from 'rollup-plugin-codegen';
 
 import { name } from "./plugin.json";
 
@@ -14,8 +15,9 @@ const production = process.env.NODE_ENV !== 'development';
 export default defineConfig({
   input: './src/index.tsx',
   plugins: [
-    commonjs(),
     nodeResolve({ preferBuiltins: false, browser: true }),
+    codegen(),
+    commonjs(),
     typescript({ sourceMap: !production, inlineSources: !production }),
     json(),
     replace({

src/components/MicroSDeckNotice.tsx

@@ -13,17 +13,17 @@ export const MicroSDeckNotice: VFC<MicroSDeckNoticeProps> = ({ intallState, plug
   let recommendation = '';
 
   switch (intallState) {
-    case MicroSDeckInstallState['ver too low']:
-    case MicroSDeckInstallState['ver too high']:
+    case MicroSDeckInstallState.VERSION_TOO_LOW:
+    case MicroSDeckInstallState.VERSION_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.'
+      recommendation = intallState === MicroSDeckInstallState.VERSION_TOO_LOW ? 'Please update MicroSDeck to specified version.' : 'Please update TabMaster if available or install specified version of MicroSDeck.'
       break
-    case MicroSDeckInstallState['ver unknown']:
+    case MicroSDeckInstallState.VERSION_UNKOWN:
       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']:
+    case MicroSDeckInstallState.NOT_INSTALLED:
       problem = 'it is not installed.';
       recommendation = 'Please install MicroSDeck for these tabs to work.';
   }

src/components/QuickAccessContent.tsx

@@ -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.VERSION_COMPATIBLE;
   const hasSdTabs = !!visibleTabsList.find(tabContainer => (tabContainer as CustomTabContainer).dependsOnMicroSDeck);
 
   function TabEntryInteractables({ entry }: TabEntryInteractablesProps) {
@@ -144,11 +144,8 @@ export const QuickAccessContent: VFC<{}> = ({ }) => {
           {
             hiddenTabsList.map(tabContainer =>
               <div className="hidden-tab-btn">
-                <ButtonItem
-                  label={<TabListLabel tabContainer={tabContainer} microSDeckDisabled={!isMicroSDeckInstalled} />}
-                  onClick={() => tabMasterManager.showTab(tabContainer.id)}
-                  onOKActionDescription="Unhide tab"
-                >
+                {/* @ts-ignore */}
+                <ButtonItem label={<TabListLabel tabContainer={tabContainer} microSDeckDisabled={!isMicroSDeckInstalled} />} onClick={() => tabMasterManager.showTab(tabContainer.id)} onOKActionDescription="Unhide tab">
                   Show
                 </ButtonItem>
               </div>

src/components/docs/DocsRouter.tsx

@@ -4,6 +4,9 @@ import { VFC, ReactNode } from "react";
 import { MdNumbers } from "react-icons/md";
 import { DocPage } from "./DocsPage";
 
+//@ts-ignore
+import docs from "./docs.codegen";
+
 type DocRouteEntry = {
   title: string,
   content: ReactNode,
@@ -16,16 +19,16 @@ type DocRoutes = {
   [pageName: string]: DocRouteEntry;
 };
 
-type DocsRouterProps = {
-  docs: DocPages;
-};
 
 /**
  * The documentation pages router for TabMaster.
  */
-export const DocsRouter: VFC<DocsRouterProps> = ({ docs }) => {
+export const DocsRouter: VFC = () => {
   const docPages: DocRoutes = {};
+
   Object.entries(docs).map(([pageName, doc]) => {
+    pageName = pageName.replace(/_/g, " ");
+
     docPages[pageName] = {
       title: pageName,
       content: <DocPage content={doc} />,

src/components/docs/docs.codegen

@@ -0,0 +1,15 @@
+// @ts-nocheck
+const { readdirSync, readFileSync, fil } = require('fs');
+const { parse, join } = require('path');
+
+const docsDir = join(__dirname, './plugin-docs');
+
+const docFiles = readdirSync(docsDir).filter(file => file.endsWith(".md"));
+const docs = {};
+docFiles.forEach(docFile => {
+	docs[parse(docFile).name] = readFileSync(join(docsDir, docFile), {encoding: "utf-8"});
+});
+
+module.exports = function () {
+	return `export default ${JSON.stringify(docs)}`;
+};

defaults/docs/Filters.md → src/components/docs/plugin-docs/Filters.md

@@ -24,6 +24,7 @@
    - Demo
    - Streamable
    - Steam Features
+   - Achievements
    - MicroSD Card (Requires MicroSDeck)
 
 <br/>
@@ -289,6 +290,19 @@ Filters apps based on if they can be streamed or not.
 
 <br/>
 
+#### Achievements
+**Options:**<br/>
+`percentage` - The desired achievement percentage completion of apps to include.
+`greater/less` - Whether to include apps that have an achievement completion percentage greater than or equal to the provided percentage, or less than or equal to it.
+
+**Behavior:**<br/>
+Filters apps based on their achievement completion percentage.
+
+**Example:**<br/>
+<img title="Achievements Example" src="https://raw.githubusercontent.com/tormak9970/TabMaster/master/assets/filters/docs_achievements-example.png" />
+
+<br/>
+
 #### MicroSD Card (Requires MicroSDeck)
 **Options:**<br/>
 `MicroSD card` - The MicroSD card to use (if none are showing up, make sure they are showing up in MicroSDeck).

src/components/filters/FilterOptions.tsx

@@ -489,7 +489,8 @@ const TimePlayedFilterOptions: VFC<FilterOptionsProps<'time played'>> = ({ index
  * The options for a size on disk filter.
  */
 const SizeOnDiskFilterOptions: VFC<FilterOptionsProps<'size on disk'>> = ({ index, setContainingGroupFilters, filter, containingGroupFilters }) => {
-  const [value, setValue] = useState<number>(filter.params.gbThreshold);
+  const [value, setValue] = useState<string>(filter.params.gbThreshold.toString());
+  const [numericValue, setNumericValue] = useState<number>(filter.params.gbThreshold);
   const [thresholdType, setThresholdType] = useState<ThresholdCondition>(filter.params.condition);
 
   function updateFilter(threshold: number, threshType: ThresholdCondition) {
@@ -501,22 +502,29 @@ const SizeOnDiskFilterOptions: VFC<FilterOptionsProps<'size on disk'>> = ({ inde
     setContainingGroupFilters(updatedFilters);
   }
 
-  function onSliderChange(value: number) {
-    updateFilter(value, thresholdType);
-    setValue(value);
+  function onSliderChange(e: React.ChangeEvent<HTMLInputElement>) {
+    let parsedValue = 0;
+    if (e?.target.value !== "" && !isNaN(parseFloat(e?.target.value))) {
+      parsedValue = parseFloat(e?.target.value);
+    }
+
+    updateFilter(parsedValue, thresholdType);
+    setNumericValue(parsedValue);
+
+    setValue(e?.target.value);
   }
 
   function onThreshTypeChange({ data: threshType }: { data: ThresholdCondition; }) {
-    updateFilter(value, threshType);
+    updateFilter(numericValue, threshType);
     setThresholdType(threshType);
   }
 
   return (
     <Field
-      label={`${value} GB or ${thresholdType === 'above' ? 'more' : 'less'} on disk`}
+      label={`${numericValue < 1 ? numericValue * 1000 : value} ${numericValue < 1 ? 'MB' : 'GB'} or ${thresholdType === 'above' ? 'more' : 'less'} on disk`}
       description={
-        <Focusable style={{ display: 'flex', flexDirection: 'row' }}>
-          <Slider value={value} min={0} max={200} onChange={onSliderChange} />
+        <Focusable style={{ display: 'flex', flexDirection: 'row' }} className="size-on-disk-row">
+          <TextField value={value} onChange={onSliderChange} />
           <div style={{ marginLeft: '12px' }}>
             <Dropdown rgOptions={[{ label: 'At least', data: 'above' }, { label: 'At most', data: 'below' }]} selectedOption={thresholdType} onChange={onThreshTypeChange} />
           </div>
@@ -782,6 +790,46 @@ const SteamFeatureFilterOptions: VFC<FilterOptionsProps<'steam features'>> = ({
   );
 };
 
+/**
+ * The options for a achievements filter.
+ */
+const AchievementsFilterOptions: VFC<FilterOptionsProps<'achievements'>> = ({ index, setContainingGroupFilters, filter, containingGroupFilters }) => {
+  const [value, setValue] = useState<number>(filter.params.completionPercentage);
+  const [thresholdType, setThresholdType] = useState<ThresholdCondition>(filter.params.condition);
+
+  function updateFilter(threshold: number, threshType: ThresholdCondition) {
+    const updatedFilter = { ...filter };
+    updatedFilter.params.completionPercentage = threshold;
+    updatedFilter.params.condition = threshType;
+    const updatedFilters = [...containingGroupFilters];
+    updatedFilters[index] = updatedFilter;
+    setContainingGroupFilters(updatedFilters);
+  }
+
+  function onSliderChange(value: number) {
+    updateFilter(value, thresholdType);
+    setValue(value);
+  }
+
+  function onThreshTypeChange({ data: threshType }: { data: ThresholdCondition; }) {
+    updateFilter(value, threshType);
+    setThresholdType(threshType);
+  }
+
+  return (
+    <Field
+      label={`${value}% or ${thresholdType === 'above' ? 'more' : 'less'} achievements completed`}
+      description={
+        <Focusable style={{ display: 'flex', flexDirection: 'row' }}>
+          <Slider value={value} min={1} max={100} onChange={onSliderChange} />
+          <div style={{ marginLeft: '12px' }}>
+            <Dropdown rgOptions={[{ label: 'At least', data: 'above' }, { label: 'At most', data: 'below' }]} selectedOption={thresholdType} onChange={onThreshTypeChange} />
+          </div>
+        </Focusable>}
+    />
+  );
+};
+
 /**
  * The options for an sd card filter
  */
@@ -857,6 +905,8 @@ export const FilterOptions: VFC<FilterOptionsProps<FilterType>> = ({ index, filt
         return <StreamableFilterOptions index={index} filter={filterCopy as TabFilterSettings<'streamable'>} containingGroupFilters={containingGroupFilters} setContainingGroupFilters={setContainingGroupFilters} />;
       case "steam features":
         return <SteamFeatureFilterOptions index={index} filter={filterCopy as TabFilterSettings<'steam features'>} containingGroupFilters={containingGroupFilters} setContainingGroupFilters={setContainingGroupFilters} />;
+      case "achievements":
+        return <AchievementsFilterOptions index={index} filter={filterCopy as TabFilterSettings<'achievements'>} containingGroupFilters={containingGroupFilters} setContainingGroupFilters={setContainingGroupFilters} />;
       case "sd card":
         return <SDCardFilterOptions index={index} filter={filterCopy as TabFilterSettings<'sd card'>} containingGroupFilters={containingGroupFilters} setContainingGroupFilters={setContainingGroupFilters} />;
       default:

src/components/filters/FilterPreview.tsx

@@ -79,7 +79,7 @@ const TimePlayedFilterPreview: VFC<FilterPreviewProps<'time played'>> = ({ filte
 
 const SizeOnDiskFilterPreview: VFC<FilterPreviewProps<'size on disk'>> = ({ filter }) => {
   const { gbThreshold, condition } = filter.params;
-  return <FilterPreviewGeneric filter={filter} displayData={`${gbThreshold} GB or ${condition === 'above' ? 'more' : 'less'}`} />;
+  return <FilterPreviewGeneric filter={filter} displayData={`${gbThreshold < 1 ? gbThreshold * 1000 : gbThreshold} ${gbThreshold < 1 ? 'MB' : 'GB'} or ${condition === 'above' ? 'more' : 'less'}`} />;
 };
 
 const ReleaseDateFilterPreview: VFC<FilterPreviewProps<'release date'>> = ({ filter }) => {
@@ -122,6 +122,11 @@ const SteamFeaturesFilterPreview: VFC<FilterPreviewProps<'steam features'>> = ({
   return <FilterPreviewGeneric filter={filter} displayData={`${filter.params.features.length} ${filter.params.features.length == 1 ? "feature" : "features"}`} isInverted={filter.inverted} />;
 };
 
+const AchievementsFilterPreview: VFC<FilterPreviewProps<'achievements'>> = ({ filter }) => {
+  const { completionPercentage, condition } = filter.params;
+  return <FilterPreviewGeneric filter={filter} displayData={`${completionPercentage}% or ${condition === 'above' ? 'more' : 'less'} achievements completed`} />;
+};
+
 const SDCardFilterPreview: VFC<FilterPreviewProps<'sd card'>> = ({ filter }) => {
   const isInsertCard = !filter.params.card;
   const card = (MicroSDeckInterop.isInstallOk() && window.MicroSDeck?.CardsAndGames.find(([card]) => card.uid === filter.params.card)?.[0].name) || filter.params.card;
@@ -170,6 +175,8 @@ export const FilterPreview: VFC<FilterPreviewProps<FilterType>> = ({ filter }) =
         return <StreamableFilterPreview filter={filter as TabFilterSettings<'streamable'>} />;
       case "steam features":
         return <SteamFeaturesFilterPreview filter={filter as TabFilterSettings<'steam features'>} />;
+      case "achievements":
+        return <AchievementsFilterPreview filter={filter as TabFilterSettings<'achievements'>} />
       case "sd card":
         return <SDCardFilterPreview filter={filter as TabFilterSettings<'sd card'>} />;
       default: