add components for version section

src/components/HhdComponent.tsx

@@ -1,6 +1,12 @@
 import { VFC } from "react";
 import { SettingType, SettingsType } from "../redux-modules/hhdSlice";
-import { PanelSection, ToggleField } from "decky-frontend-lib";
+import {
+  ButtonItem,
+  Field,
+  PanelSection,
+  PanelSectionRow,
+  ToggleField,
+} from "decky-frontend-lib";
 import HhdSlider from "./HhdSlider";
 import { get } from "lodash";
 import HhdDropdown from "./HhdDropdown";
@@ -175,6 +181,40 @@ const HhdComponent: VFC<HhdComponentType> = ({
     );
   }
 
+  if (type === "display" && title) {
+    // show info, shouldn't be interactive
+    const value = get(state, `${statePath}`);
+
+    if (!value) {
+      return null;
+    }
+
+    return (
+      <Field disabled label={title}>
+        {value}
+      </Field>
+    );
+  }
+
+  if (type === "action" && title) {
+    return (
+      <PanelSectionRow>
+        <ButtonItem
+          onClick={() => updateState(`${statePath}`, true)}
+          style={{
+            width: "100%",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+          layout={"below"}
+        >
+          {title}
+        </ButtonItem>
+      </PanelSectionRow>
+    );
+  }
+
   return null;
 };
 

src/components/HhdState.tsx

@@ -17,12 +17,15 @@ const HhdState = () => {
   return (
     <div>
       {Object.entries(settings).map(([topLevelStr, plugins], topIdx) => {
-        if (topLevelStr === "version" || topLevelStr === "hhd") {
+        if (topLevelStr === "version") {
           return null;
         }
         return (
           <div key={topIdx}>
             {Object.keys(plugins).map((pluginName, idx) => {
+              if (topLevelStr === "hhd" && pluginName === "http") {
+                return null;
+              }
               const plugin = plugins[pluginName] as SettingsType;
               const statePath = `${topLevelStr}.${pluginName}`;
 

src/redux-modules/hhdSlice.tsx

@@ -12,7 +12,9 @@ export type SettingType =
   | "mode"
   | "discrete"
   | "multiple"
-  | "int";
+  | "int"
+  | "display"
+  | "action";
 
 export type SettingsType = {
   type: SettingType;