feat: Plugin settings rendering

.github/workflows/artifact.yml

@@ -50,13 +50,6 @@ jobs:
       env: 
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-    # dry run to get the next version
-    - name: Bump Version
-      id: read_version
-      run: . scripts\ci\win32\version.ps1
-      env:
-        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
     - name: Set up cache for Python source
       uses: actions/cache@v3
       id: build-cache
@@ -177,13 +170,6 @@ jobs:
       env: 
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-    # dry run to get the next version
-    - name: Bump Version
-      id: read_version
-      run: bash scripts/ci/posix/version.sh
-      env:
-        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
     - name: Install dependencies
       run: |
         sudo dpkg --add-architecture i386

CMakeLists.txt

@@ -76,8 +76,6 @@ endif()
 add_subdirectory(cli)
 
 find_package(CURL REQUIRED) # used for web requests. 
-find_package(unofficial-minizip CONFIG REQUIRED) # used for extracting zip files
-
 include_directories(${LIBGIT2_INCLUDE_DIRS})
 
 if(WIN32)
@@ -110,7 +108,7 @@ set(SOURCE_FILES
 )
 
 if (MSVC)
-  set(SOURCE_FILES "${SOURCE_FILES} version.rc") # conpile version information on msvc
+  set(SOURCE_FILES "${SOURCE_FILES} version.rc") # compile version information on msvc
 endif()
 
 if (WIN32)
@@ -156,10 +154,10 @@ if (WINDRES)
     target_link_libraries(Millennium ${CMAKE_BINARY_DIR}/version.o)
 endif()
 
-target_link_libraries(Millennium CURL::libcurl unofficial::minizip::minizip)
+target_link_libraries(Millennium CURL::libcurl)
 
 if(WIN32)
-	target_link_libraries(Millennium Ws2_32.lib wsock32 Iphlpapi)
+	target_link_libraries(Millennium Ws2_32.lib wsock32 Iphlpapi winhttp)
 
 	if (GITHUB_ACTION_BUILD)
 		target_link_libraries(Millennium "D:/a/Millennium/Millennium/Python-3.11.8/PCbuild/win32/python311.lib")

assets/core/main.py

@@ -40,6 +40,11 @@ def get_load_config():
         "useInterface": True if millennium.get('Settings', 'useInterface', fallback='') == "yes" else False,
     })
 
+def _webkit_accent_color():
+    config = cfg.get_config()
+
+    return Colors.get_accent_color(config["accentColor"])
+
 def update_plugin_status(plugin_name: str, enabled: bool):
     Millennium.change_plugin_status(plugin_name, enabled)
 

assets/core/util/theme_installer.py

@@ -161,18 +161,25 @@ async def handler(self, websocket):
             logger.log("Client disconnected")
 
     async def start_server(self):
-        # Start WebSocket server
-        self.server = await websockets.serve(self.handler, self.host, self.port)
-        logger.log(f"Server started on ws://{self.host}:{self.port}")
-
-        # Run server until stop event is set
-        await self.stop_event.wait()
-
-        # Close server gracefully
-        self.server.close()
-        await self.server.wait_closed()
-        logger.log("Server stopped")
+        try:
+            # Start WebSocket server
+            self.server = await websockets.serve(self.handler, self.host, self.port)
+            logger.log(f"Server started on ws://{self.host}:{self.port}")
+
+            # Run server until stop event is set
+            await self.stop_event.wait()
 
+            # Close server gracefully
+            self.server.close()
+            await self.server.wait_closed()
+            logger.log("Server stopped")
+
+        except OSError as e:
+            if e.errno == 98:  # Errno 98 is typically "Address already in use"
+                logger.error(f"Port {self.port} is already in use. Please stop the process using it or choose a different port.")
+            else:
+                logger.error(f"An unexpected error occurred: {e}")
+
     def _run_loop(self):
         # Create and run the event loop in the thread
         self.loop = asyncio.new_event_loop()

assets/core/util/webkit_handler.py

@@ -137,7 +137,7 @@ def add_conditional_data(path: str, data: dict):
     parsed_patches = parse_conditional_patches(data)
 
     for patch in parsed_patches:
-        if patch['fileType'] == 'TargetCss':
+        if patch['fileType'] == 'TargetCss' and patch['targetPath'] is not None and patch['matchString'] is not None:
             add_browser_css(os.path.join(path, patch['targetPath']), patch['matchString'])
-        elif patch['fileType'] == 'TargetJs':
+        elif patch['fileType'] == 'TargetJs' and patch['targetPath'] is not None and patch['matchString'] is not None:
             add_browser_js(os.path.join(path, patch['targetPath']), patch['matchString'])

assets/src/classes.ts

@@ -1,6 +1,13 @@
 import { findClassModule } from "@steambrew/client"
 
 export const devClasses = findClassModule(m => m.richPresenceLabel && m.blocked) as any
+export const fieldClasses: any = findClassModule(
+	(m) =>
+		m.FieldLabel &&
+		!m.GyroButtonPickerDialog &&
+		!m.ControllerOutline &&
+		!m.AwaitingEmailConfIcon,
+);
 export const pagedSettingsClasses = findClassModule(m => m.PagedSettingsDialog_PageList) as any
 export const settingsClasses = findClassModule(m => m.SettingsTitleBar && m.SettingsDialogButton) as any
 export const notificationClasses = findClassModule(m => m.GroupMessageTitle && !m.ShortTemplate && !m.TwoLine && !m.FriendIndicator && !m.AchievementIcon) as any;

assets/src/components/CreatePopup.tsx

@@ -9,9 +9,10 @@ export interface RenderProps {
 
 export class CreatePopup extends CreatePopupBase {
 
-    constructor(component: ReactNode, strPopupName: string, options: any) {
+    constructor(component: ReactNode, strPopupName: string, options: any, componentParams: any = {}) {
         super(strPopupName, options)
         this.component = component
+        this.componentParams = componentParams
     }
 
     Show() {
@@ -35,7 +36,7 @@ export class CreatePopup extends CreatePopupBase {
                             hideMax={false}
                             hideActions={false}
                         />
-                        <this.component/>
+                        <this.component {...this.componentParams}/>
 
                     </div>
                 </>
@@ -66,4 +67,4 @@ export class CreatePopup extends CreatePopupBase {
         this.m_popup.SteamClient?.Window?.ResizeTo(450, height + 48, true)
         this.m_popup.SteamClient.Window.ShowWindow()
     }
-}
+}

assets/src/custom_components/Field.tsx

@@ -1,25 +1,18 @@
 import React, { ReactNode } from "react";
-import { Classes, classMap, findClassModule } from "@steambrew/client";
+import { fieldClasses } from "../classes";
 
 const containerClasses = [
-	Classes.Field,
-	Classes.WithFirstRow,
-	Classes.VerticalAlignCenter,
-	Classes.WithDescription,
-	Classes.WithBottomSeparatorStandard,
-	Classes.ChildrenWidthFixed,
-	Classes.ExtraPaddingOnChildrenBelow,
-	Classes.StandardPadding,
-	Classes.HighlightOnFocus,
+	fieldClasses.Field,
+	fieldClasses.WithFirstRow,
+	fieldClasses.VerticalAlignCenter,
+	fieldClasses.WithDescription,
+	fieldClasses.WithBottomSeparatorStandard,
+	fieldClasses.ChildrenWidthFixed,
+	fieldClasses.ExtraPaddingOnChildrenBelow,
+	fieldClasses.StandardPadding,
+	fieldClasses.HighlightOnFocus,
 	"Panel",
 ].join(" ");
-const fieldClasses: any = findClassModule(
-	(m) =>
-		m.FieldLabel &&
-		!m.GyroButtonPickerDialog &&
-		!m.ControllerOutline &&
-		!m.AwaitingEmailConfIcon,
-);
 
 interface FieldProps {
 	children: ReactNode;
@@ -41,8 +34,8 @@ export const Field: React.FC<FieldProps> = ({
 	<div className={containerClasses}>
 		<div className={fieldClasses.FieldLabelRow}>
 			<div className={fieldClasses.FieldLabel}>{label}</div>
-			<div className={classMap.FieldChildrenWithIcon}>{children}</div>
+			<div className={fieldClasses.FieldChildrenWithIcon}>{children}</div>
 		</div>
-		<div className={classMap.FieldDescription}>{description}</div>
+		<div className={fieldClasses.FieldDescription}>{description}</div>
 	</div>
 );

assets/src/custom_components/PluginField.tsx

@@ -0,0 +1,58 @@
+import { ComponentProps } from './PluginSettings';
+import React, { ChangeEventHandler, ReactElement, useState } from 'react';
+import { Field, SettingType, TextField, Toggle } from '@steambrew/client';
+
+export const PluginField: React.FC<ComponentProps> = ({settingsModule, propertyKey, metadata}) => {
+    const [value, setValue] = useState(settingsModule[propertyKey]);
+
+    const RenderToggle: React.FC<ComponentProps> = ({settingsModule, propertyKey}) => {
+        const onCheckChange = (enabled: boolean) => {
+            settingsModule[propertyKey] = enabled;
+            setValue(enabled);
+        };
+
+        return <Toggle value={value} onChange={onCheckChange}/>;
+    };
+
+    const RenderTextField: React.FC<ComponentProps> = ({settingsModule, propertyKey, metadata}) => {
+        const onValueChange: ChangeEventHandler<HTMLInputElement> = (e) => {
+            let newValue: string | number = e.target.value;
+            if (metadata.type === SettingType.NumberInput) {
+                newValue = parseInt(e.target.value);
+            }
+
+            if (newValue !== value) {
+                settingsModule[propertyKey] = newValue;
+                setValue(newValue);
+            }
+        };
+
+        return <TextField
+            value={value}
+            onChange={onValueChange}
+            // Focus on click otherwise we can't focus the textfield because of how showModal works
+            onClick={(e) => (e.target as HTMLInputElement).focus()}
+        />;
+    };
+
+
+    let component: ReactElement;
+    switch (metadata.type) {
+        case SettingType.Toggle:
+            component = <RenderToggle settingsModule={settingsModule} propertyKey={propertyKey} metadata={metadata}/>;
+            break;
+        case SettingType.NumberInput:
+        case SettingType.TextInput:
+            component = <RenderTextField settingsModule={settingsModule} propertyKey={propertyKey} metadata={metadata}/>;
+            break;
+        default:
+            component = <span style={{color: 'crimson'}}>Unsupported setting type "{metadata.type}"</span>;
+            break;
+    }
+
+    return (
+        <Field label={metadata.name} description={metadata.description}>
+            {component}
+        </Field>
+    );
+};

assets/src/custom_components/PluginSettings.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { PluginComponent } from '../types';
+import { DialogBody, MillenniumModuleSettings, MillenniumSettingTabs, ModalPosition, SettingMetadata, SidebarNavigation, SidebarNavigationPage } from '@steambrew/client';
+import { PluginField } from './PluginField';
+import { settingsClasses } from '../classes';
+
+type PluginSettingsProps = {
+    plugin: PluginComponent;
+}
+
+export type ComponentProps = {
+    settingsModule: MillenniumModuleSettings;
+    propertyKey: string;
+    metadata: SettingMetadata;
+}
+
+export default class RenderPluginSettings extends React.Component<PluginSettingsProps> {
+    plugin: PluginComponent;
+    pluginSettings: MillenniumModuleSettings | MillenniumSettingTabs;
+
+    constructor(props: PluginSettingsProps) {
+        super(props);
+        this.plugin = props.plugin;
+        this.pluginSettings = window.PLUGIN_LIST[this.plugin.data.name].settings;
+    }
+
+    RenderPage: React.FC<{ settingsModule: MillenniumModuleSettings }> = ({settingsModule}) => {
+        return (
+            <DialogBody>
+                {
+                    Object.entries(settingsModule.metadata).map(([key, value]) => (
+                        <PluginField settingsModule={settingsModule} propertyKey={key} metadata={value}/>
+                    ))
+                }
+            </DialogBody>
+        );
+    };
+
+    render() {
+        let pages: SidebarNavigationPage[] = [];
+
+        if (this.pluginSettings instanceof MillenniumSettingTabs) {
+            for (let metadataKey in this.pluginSettings.metadata) {
+                const metadata = this.pluginSettings.metadata[metadataKey];
+                const settingsModule = this.pluginSettings[metadataKey];
+                if (!(settingsModule instanceof MillenniumModuleSettings)) {
+                    throw new Error(`Expected MillenniumModuleSettings but received ${typeof settingsModule} in MillenniumSettingTabs object`);
+                }
+
+                //TODO: find a way to fix the bug where toggle values are kept between tabs
+                // using a route on the page seems to fix it but fully breaks the library
+                // probably need to do hook into the react router like decky does
+                pages.push({
+                    ...metadata,
+                    content: <this.RenderPage settingsModule={settingsModule}/>,
+                });
+            }
+        } else if (this.pluginSettings instanceof MillenniumModuleSettings) {
+            pages.push({
+                title: `${this.plugin.data.common_name} settings`,
+                content: <this.RenderPage settingsModule={this.pluginSettings}/>,
+            });
+        }
+
+        const className = `${settingsClasses.SettingsModal} ${settingsClasses.DesktopPopup}`;
+        const title = <>{this.plugin.data.common_name}<br/>settings</>;
+        const hasMultiplePages = this.pluginSettings instanceof MillenniumSettingTabs;
+
+        return (
+            <ModalPosition>
+                {!hasMultiplePages && (
+                    <style>{`
+                        .PageListColumn {
+                            display: none !important;
+                        }
+                        .DialogContentTransition {
+                            max-width: unset !important;
+                        }
+                    `}</style>
+                )}
+
+                {/* @ts-ignore: className hasn't been added to DFL yet */}
+                <SidebarNavigation className={className} pages={pages} title={title}>
+
+                </SidebarNavigation>
+            </ModalPosition>
+        );
+    }
+}