feat: unified modal setups and changed styles to match 3.5

Tormak9970 · Nov 20, 2023 · daefb87 · daefb87
1 parent 09ba98a
commit daefb87
Show file tree

Hide file tree

Showing 12 changed files with 179 additions and 150 deletions.
diff --git a/.vscode/extensions.json b/.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"
   ]
-}
+}
diff --git a/src/components/filters/FilterSelect.tsx b/src/components/filters/FilterSelect.tsx
@@ -1,6 +1,6 @@
 import { Fragment, VFC, useEffect, useState } from "react";
 import { Focusable, ModalRoot, showModal } from "decky-frontend-lib";
-import { FilterDefaultParams, FilterType } from "./Filters";
+import { FilterDefaultParams, FilterDescriptions, FilterType } from "./Filters";
 import { capitalizeEachWord } from "../../lib/Utils";
 import { FilterSelectStyles, achievementClasses, mainMenuAppRunningClasses } from "../styles/FilterSelectionStyles";
 import { CustomButton } from '../generic/CustomButton';
@@ -16,25 +16,6 @@ const FilterSelectModal: VFC<FilterSelectModalProps> = ({ selectedOption, onSele
   const [focusable, setFocusable] = useState(false);
   const [selected, setSelected] = useState<FilterType>(selectedOption);
   const filterTypeOptions = Object.keys(FilterDefaultParams) as FilterType[];
-  const filterDescriptions: { [filterType in FilterType]: string } = {
-    collection: "Selects apps that are in a certain Steam Collection.",
-    installed: "Selects apps that are installed/uninstalled.",
-    regex: "Selects apps whose titles match a regular expression.",
-    friends: "Selects apps that are also owned by friends.",
-    tags: "Selects apps that have specific community tags.",
-    whitelist: "Selects apps that are added to the list.",
-    blacklist: "Selects apps that are not added to the list.",
-    merge: "Selects apps that pass a subgroup of filters.",
-    platform: "Selects Steam or non-Steam apps.",
-    "deck compatibility": "Selects apps that have a specific Steam Deck compatibilty status.",
-    "review score": "Selects apps based on their metacritic/steam review score.",
-    "time played": "Selects apps based on your play time.",
-    "size on disk": "Selects apps based on their install size.",
-    "release date": "Selects apps based on their release date.",
-    "last played": "Selects apps based on when they were last played.",
-    demo: "Selects apps that are/aren't demos.",
-    streamable: "Selects apps that can/can't be streamed from another computer."
-  }
 
   useEffect(() => {setTimeout(() => setFocusable(true), 10)}, []);
 
@@ -47,39 +28,41 @@ const FilterSelectModal: VFC<FilterSelectModalProps> = ({ selectedOption, onSele
   return (
     <>
       <FilterSelectStyles />
-      <ModalRoot onCancel={() => handleSelect(selected)} onEscKeypress={() => handleSelect(selected)}>
-        <h1
-          style={{
-            marginBlockEnd: "10px",
-            marginBlockStart: "0px",
-            overflowX: "hidden",
-            fontSize: "1.5em",
-            whiteSpace: "nowrap",
-          }}
-        >
-          Change Filter Type
-        </h1>
-        <div className={`tab-master-filter-select ${mainMenuAppRunningClasses.OverlayAchievements}`}>
-          {filterTypeOptions.map((filterType: FilterType) => {
-            return (
-              <Focusable
-                focusWithinClassName="gpfocuswithin"
-                onActivate={focusable || selected === filterType ? () => {} : undefined}
-                style={{ width: "100%", margin: 0, marginBottom: "10px", padding: 0 }}
-                onOKButton={focusable || selected === filterType ? () => handleSelect(filterType) : undefined}
-              >
-                <div
-                  className={achievementClasses.AchievementListItemBase}
-                  style={{ display: "flex", flexDirection: "column", padding: "0.5em", height: "60px" }}
+      <div className={`tab-master-filter-select`}>
+        <ModalRoot onCancel={() => handleSelect(selected)} onEscKeypress={() => handleSelect(selected)}>
+          <h1
+            style={{
+              marginBlockEnd: "10px",
+              marginBlockStart: "0px",
+              overflowX: "hidden",
+              fontSize: "1.5em",
+              whiteSpace: "nowrap",
+            }}
+          >
+            Change Filter Type
+          </h1>
+          <div className={mainMenuAppRunningClasses.OverlayAchievements}>
+            {filterTypeOptions.map((filterType: FilterType) => {
+              return (
+                <Focusable
+                  focusWithinClassName="gpfocuswithin"
+                  onActivate={focusable || selected === filterType ? () => {} : undefined}
+                  style={{ width: "100%", margin: 0, marginBottom: "10px", padding: 0 }}
+                  onOKButton={focusable || selected === filterType ? () => handleSelect(filterType) : undefined}
                 >
-                  <div className="entry-label">{capitalizeEachWord(filterType)}</div>
-                  <div className="entry-desc">{filterDescriptions[filterType]}</div>
-                </div>
-              </Focusable>
-            );
-          })}
-        </div>
-      </ModalRoot>
+                  <div
+                    className={achievementClasses.AchievementListItemBase}
+                    style={{ display: "flex", flexDirection: "column", padding: "0.5em", height: "60px" }}
+                  >
+                    <div className="entry-label">{capitalizeEachWord(filterType)}</div>
+                    <div className="entry-desc">{FilterDescriptions[filterType]}</div>
+                  </div>
+                </Focusable>
+              );
+            })}
+          </div>
+        </ModalRoot>
+      </div>
     </>
   );
 };

diff --git a/src/components/filters/Filters.tsx b/src/components/filters/Filters.tsx
@@ -85,7 +85,30 @@ export const FilterDefaultParams: { [key in FilterType]: FilterParams<key> } = {
   "last played": { date: undefined, condition: 'above' },
   "demo": { isDemo: true },
   "streamable": { isStreamable: true }
-};
+}
+
+/**
+ * Dictionary of descriptions for each filter.
+ */
+export const FilterDescriptions: { [filterType in FilterType]: string } = {
+  collection: "Selects apps that are in a certain Steam Collection.",
+  installed: "Selects apps that are installed/uninstalled.",
+  regex: "Selects apps whose titles match a regular expression.",
+  friends: "Selects apps that are also owned by friends.",
+  tags: "Selects apps that have specific community tags.",
+  whitelist: "Selects apps that are added to the list.",
+  blacklist: "Selects apps that are not added to the list.",
+  merge: "Selects apps that pass a subgroup of filters.",
+  platform: "Selects Steam or non-Steam apps.",
+  "deck compatibility": "Selects apps that have a specific Steam Deck compatibilty status.",
+  "review score": "Selects apps based on their metacritic/steam review score.",
+  "time played": "Selects apps based on your play time.",
+  "size on disk": "Selects apps based on their install size.",
+  "release date": "Selects apps based on their release date.",
+  "last played": "Selects apps based on when they were last played.",
+  demo: "Selects apps that are/aren't demos.",
+  streamable: "Selects apps that can/can't be streamed from another computer."
+}
 
 /**
  * Whether the filter should have an invert option.
@@ -116,8 +139,7 @@ export function canBeInverted(filter: TabFilterSettings<FilterType>): boolean {
   }
 }
 
-//* I changed this from 'isDefaultParams' because some default params can still be valid
-//* make sure the check is the inversion from before going forward
+// * make sure the check is the inversion from before going forward
 /**
  * Checks if a filter has valid params.
  * @param filter The filter to check.

diff --git a/src/components/modals/EditTabModal.tsx b/src/components/modals/EditTabModal.tsx
@@ -43,13 +43,13 @@ export const EditTabModal: VFC<EditTabModalProps> = ({ closeModal, onConfirm, ta
   const [canAddFilter, setCanAddFilter] = useState<boolean>(true);
   const [patchInput, setPatchInput] = useState(true);
 
-  const nameInputElt = <TextField value={name} onChange={onNameChange} />;
+  const nameInputElement = <TextField value={name} onChange={onNameChange} />;
 
   //reference to input field class component instance, which has a focus method
   let inputComponentInstance: any;
 
   if (patchInput) {
-    afterPatch(nameInputElt.type.prototype, 'render', function (_: any, ret: any) {
+    afterPatch(nameInputElement.type.prototype, 'render', function (_: any, ret: any) {
       //@ts-ignore     get reference to instance
       inputComponentInstance = this;
       return ret;
@@ -117,7 +117,7 @@ export const EditTabModal: VFC<EditTabModalProps> = ({ closeModal, onConfirm, ta
               <div style={{ paddingBottom: "6px" }} className={quickAccessControlsClasses.PanelSectionTitle}>
                 Name
               </div>
-              {nameInputElt}
+              {nameInputElement}
             </>
             } />
           </div>

diff --git a/src/components/modals/ErrorHelpModal.tsx b/src/components/modals/ErrorHelpModal.tsx
diff --git a/src/components/modals/FixMergeFilterModal.tsx b/src/components/modals/FixMergeFilterModal.tsx
@@ -1,5 +1,5 @@
 import { ConfirmModal, showModal } from "decky-frontend-lib"
-import { VFC, useState } from "react"
+import { VFC, useState, Fragment } from "react"
 import { TabFilterSettings, FilterType } from "../filters/Filters"
 import { PythonInterop } from "../../lib/controllers/PythonInterop"
 import { ErroredFiltersPanel } from "../changes-needed/ErroredFiltersPanel"
@@ -47,35 +47,37 @@ export const FixMergeFilterModal: VFC<FixMergeFilterModalProps> = ({ mergeParams
   }
 
   return (
-    <ConfirmModal
-      onOK={() => {
-        showModal(
-          <DestructiveModal
-            onOK={onOkButton}
-            strTitle="WARNING!"
-          >
-            Are you sure you want save these fixes to this merge group? This can't be can't be changed later.
-          </DestructiveModal>
-        );
-      }}
-      bOKDisabled={!isPassing}
-      strOKButtonText={"Save Changes"}
-      onCancel={closeModal}
-      strCancelButtonText={"Discard Changes"}
-      strTitle={`Fix Merge Group in Tab ${tabName}`}
-    >
+    <>
       <FixModalStyles />
       <div className="tab-master-fix-modal-scope">
-        {isPassing && <div>All errors have been resolved.</div>}
-        <ErrorPanelTabNameContext.Provider value={tabName}>
-          <ErroredFiltersPanel
-            isMergeGroup={true}
-            filters={filters}
-            errorEntries={mergeErrorEntries}
-            onChange={onChange}
-          />
-        </ErrorPanelTabNameContext.Provider>
+        <ConfirmModal
+          onOK={() => {
+            showModal(
+              <DestructiveModal
+                onOK={onOkButton}
+                strTitle="WARNING!"
+              >
+                Are you sure you want save these fixes to this merge group? This can't be can't be changed later.
+              </DestructiveModal>
+            );
+          }}
+          bOKDisabled={!isPassing}
+          strOKButtonText={"Save Changes"}
+          onCancel={closeModal}
+          strCancelButtonText={"Discard Changes"}
+          strTitle={`Fix Merge Group in Tab ${tabName}`}
+        >
+          {isPassing && <div>All errors have been resolved.</div>}
+          <ErrorPanelTabNameContext.Provider value={tabName}>
+            <ErroredFiltersPanel
+              isMergeGroup={true}
+              filters={filters}
+              errorEntries={mergeErrorEntries}
+              onChange={onChange}
+            />
+          </ErrorPanelTabNameContext.Provider>
+        </ConfirmModal>
       </div>
-    </ConfirmModal>
+    </>
   )
 }
diff --git a/src/components/modals/FixTabErrorsModal.tsx b/src/components/modals/FixTabErrorsModal.tsx
@@ -4,7 +4,7 @@ import {
   PanelSection,
   PanelSectionRow,
 } from "decky-frontend-lib";
-import { useState, VFC, useEffect } from "react";
+import { useState, VFC, useEffect, Fragment } from "react";
 import { PythonInterop } from "../../lib/controllers/PythonInterop";
 import { TabMasterContextProvider } from "../../state/TabMasterContext";
 import type { TabMasterManager } from "../../state/TabMasterManager";
@@ -24,13 +24,15 @@ type FixTabErrorsModalRootProps = {
  */
 export const FixTabErrorsModalRoot: VFC<FixTabErrorsModalRootProps> = ({ closeModal, onConfirm, tabs, erroredFiltersMap, tabMasterManager }) => {
   return (
-    // Steam throws a fit if onCancel isn't present, so we made it do nothing
-    <ModalRoot bAllowFullSize onCancel={() => {}}>
-      <TabMasterContextProvider tabMasterManager={tabMasterManager}>
-        <FixModalStyles />
-        <FixTabErrorsModal onConfirm={onConfirm} closeModal={closeModal!} tabs={tabs} erroredFiltersMap={erroredFiltersMap} />
-      </TabMasterContextProvider>
-    </ModalRoot>
+    <div className="tab-master-fix-modal-scope">
+      <FixModalStyles />
+      {/* Steam throws a fit if onCancel isn't present, so we made it do nothing */}
+      <ModalRoot bAllowFullSize onCancel={() => {}}>
+        <TabMasterContextProvider tabMasterManager={tabMasterManager}>
+          <FixTabErrorsModal onConfirm={onConfirm} closeModal={closeModal!} tabs={tabs} erroredFiltersMap={erroredFiltersMap} />
+        </TabMasterContextProvider>
+      </ModalRoot>
+    </div>
   );
 };
 
@@ -78,7 +80,7 @@ const FixTabErrorsModal: VFC<FixTabErrorsModalProps> = ({ onConfirm, closeModal,
   }
 
   return (
-    <div className="tab-master-fix-modal-scope">
+    <>
       <PanelSection>
         <h1>Fixes Needed for One or More Tabs</h1>
         <PanelSectionRow>
@@ -104,6 +106,6 @@ const FixTabErrorsModal: VFC<FixTabErrorsModalProps> = ({ onConfirm, closeModal,
           </DialogButton>
         </PanelSectionRow>
       </PanelSection>
-    </div>
+    </>
   );
 };