feat(system-resources-widget): add label display mode option (#4086)

packages/widgets/src/system-resources/index.ts

@@ -1,8 +1,17 @@
-import { IconGraphFilled } from "@tabler/icons-react";
+import { IconAlignLeft, IconEyeOff, IconGraphFilled, IconListDetails, IconPhoto } from "@tabler/icons-react";
+
+import { objectEntries } from "@homarr/common";
 
 import { createWidgetDefinition } from "../definition";
 import { optionsBuilder } from "../options";
 
+const labelDisplayModeOptions = {
+  textWithIcon: IconListDetails,
+  text: IconAlignLeft,
+  icon: IconPhoto,
+  hidden: IconEyeOff,
+} as const;
+
 export const { definition, componentLoader } = createWidgetDefinition("systemResources", {
   icon: IconGraphFilled,
   supportedIntegrations: ["dashDot", "openmediavault", "truenas"],
@@ -16,6 +25,18 @@ export const { definition, componentLoader } = createWidgetDefinition("systemRes
         defaultValue: ["cpu", "memory", "network"],
         withDescription: true,
       }),
+      labelDisplayMode: factory.select({
+        options: objectEntries(labelDisplayModeOptions).map(([key, icon]) => ({
+          value: key,
+          label: (t) => t(`widget.systemResources.option.labelDisplayMode.option.${key}`),
+          icon,
+        })),
+        defaultValue: "textWithIcon",
+      }),
     }));
   },
 }).withDynamicImport(() => import("./component"));
+
+export type LabelDisplayModeOption = ReturnType<
+  (typeof definition)["createOptions"]
+>["labelDisplayMode"]["options"][number]["value"];