Merge branch 'gethomepage:dev' into integration

src/components/errorboundry.jsx

@@ -14,8 +14,10 @@ export default class ErrorBoundary extends React.Component {
     });
 
     // You can also log error messages to an error reporting service here
-    // eslint-disable-next-line no-console
-    console.error(error, errorInfo);
+    if (error || errorInfo) {
+      // eslint-disable-next-line no-console
+      console.error("component error: %s, info: %s", error, errorInfo);
+    }
   }
 
   render() {

src/components/resolvedicon.jsx

@@ -101,7 +101,26 @@ export default function ResolvedIcon({ icon, width = 32, height = 32, alt = "log
     const iconName = icon.replace(".svg", "");
     return (
       <Image
-        src={`https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/svg/${iconName}.svg`}
+        src={`https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/${iconName}.svg`}
+        width={width}
+        height={height}
+        style={{
+          width,
+          height,
+          objectFit: "contain",
+          maxHeight: "100%",
+          maxWidth: "100%",
+        }}
+        alt={alt}
+      />
+    );
+  }
+
+  if (icon.endsWith(".webp")) {
+    const iconName = icon.replace(".webp", "");
+    return (
+      <Image
+        src={`https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/webp/${iconName}.webp`}
         width={width}
         height={height}
         style={{
@@ -119,7 +138,7 @@ export default function ResolvedIcon({ icon, width = 32, height = 32, alt = "log
   const iconName = icon.replace(".png", "");
   return (
     <Image
-      src={`https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/${iconName}.png`}
+      src={`https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/png/${iconName}.png`}
       width={width}
       height={height}
       style={{

src/components/widgets/search/search.jsx

@@ -1,7 +1,8 @@
 import { useState, useEffect, Fragment } from "react";
 import { useTranslation } from "next-i18next";
 import { FiSearch } from "react-icons/fi";
-import { SiDuckduckgo, SiMicrosoftbing, SiGoogle, SiBaidu, SiBrave } from "react-icons/si";
+import { SiDuckduckgo, SiGoogle, SiBaidu, SiBrave } from "react-icons/si";
+import { BiLogoBing } from "react-icons/bi";
 import { Listbox, Transition, Combobox } from "@headlessui/react";
 import classNames from "classnames";
 
@@ -25,7 +26,7 @@ export const searchProviders = {
     name: "Bing",
     url: "https://www.bing.com/search?q=",
     suggestionUrl: "https://api.bing.com/osjson.aspx?query=",
-    icon: SiMicrosoftbing,
+    icon: BiLogoBing,
   },
   baidu: {
     name: "Baidu",

src/pages/index.jsx

@@ -166,6 +166,18 @@ const headerStyles = {
   boxedWidgets: "m-5 mb-0 sm:m-9 sm:mb-0 sm:mt-1",
 };
 
+function getAllServices(services) {
+  function getServices(group) {
+    let nestedServices = [...group.services];
+    if (group.groups.length > 0) {
+      nestedServices = [...nestedServices, ...group.groups.map(getServices).flat()];
+    }
+    return nestedServices;
+  }
+
+  return [...services.map(getServices).flat()];
+}
+
 function Home({ initialSettings }) {
   const { i18n } = useTranslation();
   const { theme, setTheme } = useContext(ThemeContext);
@@ -182,10 +194,9 @@ function Home({ initialSettings }) {
   const { data: bookmarks } = useSWR("/api/bookmarks");
   const { data: widgets } = useSWR("/api/widgets");
 
-  const servicesAndBookmarks = [
-    ...services.map((sg) => sg.services).flat(),
-    ...bookmarks.map((bg) => bg.bookmarks).flat(),
-  ].filter((i) => i?.href);
+  const servicesAndBookmarks = [...bookmarks.map((bg) => bg.bookmarks).flat(), ...getAllServices(services)].filter(
+    (i) => i?.href,
+  );
 
   useEffect(() => {
     if (settings.language) {
@@ -459,7 +470,7 @@ function Home({ initialSettings }) {
 }
 
 export default function Wrapper({ initialSettings, fallback }) {
-  const { theme } = useContext(ThemeContext);
+  const { themeContext } = useContext(ThemeContext);
   const wrappedStyle = {};
   let backgroundBlur = false;
   let backgroundSaturate = false;
@@ -490,9 +501,9 @@ export default function Wrapper({ initialSettings, fallback }) {
       id="page_wrapper"
       className={classNames(
         "relative",
-        theme && theme,
+        initialSettings.theme && initialSettings.theme,
         initialSettings.color && `theme-${initialSettings.color}`,
-        theme === "dark" ? "scheme-dark" : "scheme-light",
+        themeContext === "dark" ? "scheme-dark" : "scheme-light",
       )}
     >
       <div

src/widgets/customapi/component.jsx

@@ -78,6 +78,9 @@ function formatValue(t, mapping, rawValue) {
     case "percent":
       value = t("common.percent", { value });
       break;
+    case "duration":
+      value = t("common.duration", { value });
+      break;
     case "bytes":
       value = t("common.bytes", { value });
       break;

src/widgets/glances/metrics/fs.jsx

@@ -46,7 +46,7 @@ export default function Component({ service }) {
         <div className="absolute -top-2 -left-2 -right-2 -bottom-2">
           <div
             style={{
-              height: `${Math.max(20, fsData.size / fsData.free)}%`,
+              height: `${Math.max(20, (140 * (fsData.size - fsData.free)) / fsData.size)}px`,
             }}
             className="absolute bottom-0 border-t border-t-theme-500 bg-gradient-to-b from-theme-500/40 to-theme-500/10 w-full"
           />