Fix widgets

Dockerfile

@@ -8,6 +8,8 @@ WORKDIR /app
 COPY --link package.json pnpm-lock.yaml* ./
 
 SHELL ["/bin/ash", "-xeo", "pipefail", "-c"]
+RUN nslookup www.google.com
+RUN sed -i 's/https/http/' /etc/apk/repositories
 RUN apk add --no-cache libc6-compat \
   && apk add --no-cache --virtual .gyp python3 make g++ \
   && npm install -g pnpm

src/components/services/list.jsx

@@ -26,7 +26,7 @@ export default function List({ group, services, layout, isGroup = false }) {
         service.type === "grouped-service" ? (
           <List
             key={service.name}
-            group={service.name}
+            group={group}
             services={service.services}
             layout={{ columns: parseInt(service.name, 10) || service.services.length, style: "row" }}
             isGroup

src/pages/index.jsx

@@ -177,7 +177,14 @@ 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()]
+  const servicesAndBookmarks = [
+    ...services
+      .map((sg) => sg.services)
+      .flat(1)
+      .map((service) => (service.type === "grouped-service" ? service.services : service))
+      .flat(1),
+    ...bookmarks.map((bg) => bg.bookmarks).flat(),
+  ];
 
   useEffect(() => {
     if (settings.language) {
@@ -196,15 +203,15 @@ function Home({ initialSettings }) {
   const [searching, setSearching] = useState(false);
   const [searchString, setSearchString] = useState("");
   let searchProvider = null;
-  const searchWidget = Object.values(widgets).find(w => w.type === "search");
+  const searchWidget = Object.values(widgets).find((w) => w.type === "search");
   if (searchWidget) {
     if (Array.isArray(searchWidget.options?.provider)) {
       // if search provider is a list, try to retrieve from localstorage, fall back to the first
       searchProvider = getStoredProvider() ?? searchProviders[searchWidget.options.provider[0]];
-    } else if (searchWidget.options?.provider === 'custom') {
+    } else if (searchWidget.options?.provider === "custom") {
       searchProvider = {
-        url: searchWidget.options.url
+        url: searchWidget.options.url,
-      }
+      };
     } else {
       searchProvider = searchProviders[searchWidget.options?.provider];
     }
@@ -223,12 +230,12 @@ function Home({ initialSettings }) {
       }
     }
 
-    document.addEventListener('keydown', handleKeyDown);
+    document.addEventListener("keydown", handleKeyDown);
 
     return function cleanup() {
-      document.removeEventListener('keydown', handleKeyDown);
+      document.removeEventListener("keydown", handleKeyDown);
-    }
+    };
-  })
+  });
 
   return (
     <>
@@ -255,12 +262,7 @@ function Home({ initialSettings }) {
         <meta name="theme-color" content={themes[initialSettings.color || "slate"][initialSettings.theme || "dark"]} />
       </Head>
       <div className="relative container m-auto flex flex-col justify-start z-10 h-full">
-        <div
+        <div className={classNames("flex flex-row flex-wrap  justify-between", headerStyles[headerStyle])}>
-          className={classNames(
-            "flex flex-row flex-wrap  justify-between",
-            headerStyles[headerStyle]
-          )}
-        >
           <QuickLaunch
             servicesAndBookmarks={servicesAndBookmarks}
             searchString={searchString}
@@ -274,17 +276,19 @@ function Home({ initialSettings }) {
               {widgets
                 .filter((widget) => !rightAlignedWidgets.includes(widget.type))
                 .map((widget, i) => (
-                  <Widget key={i} widget={widget} style={{ header: headerStyle, isRightAligned: false}} />
+                  <Widget key={i} widget={widget} style={{ header: headerStyle, isRightAligned: false }} />
                 ))}
 
-              <div className={classNames(
+              <div
+                className={classNames(
                   "m-auto flex flex-wrap grow sm:basis-auto justify-between md:justify-end",
                   headerStyle === "boxedWidgets" ? "sm:ml-4" : "sm:ml-2"
-              )}>
+                )}
+              >
                 {widgets
                   .filter((widget) => rightAlignedWidgets.includes(widget.type))
                   .map((widget, i) => (
-                    <Widget key={i} widget={widget} style={{ header: headerStyle, isRightAligned: true}} />
+                    <Widget key={i} widget={widget} style={{ header: headerStyle, isRightAligned: true }} />
                   ))}
               </div>
             </>
@@ -300,18 +304,21 @@ function Home({ initialSettings }) {
                 services={group}
                 layout={initialSettings.layout?.[group.name]}
                 fiveColumns={settings.fiveColumns}
-                disableCollapse={settings.disableCollapse} />
+                disableCollapse={settings.disableCollapse}
+              />
             ))}
           </div>
         )}
 
         {bookmarks?.length > 0 && (
-          <div className={`grow flex flex-wrap pt-0 p-4 sm:p-8 gap-2 grid-cols-1 lg:grid-cols-2 lg:grid-cols-${Math.min(6, bookmarks.length)}`}>
+          <div
+            className={`grow flex flex-wrap pt-0 p-4 sm:p-8 gap-2 grid-cols-1 lg:grid-cols-2 lg:grid-cols-${Math.min(
+              6,
+              bookmarks.length
+            )}`}
+          >
             {bookmarks.map((group) => (
-              <BookmarksGroup
+              <BookmarksGroup key={group.name} group={group} disableCollapse={settings.disableCollapse} />
-                key={group.name}
-                group={group}
-                disableCollapse={settings.disableCollapse} />
             ))}
           </div>
         )}
@@ -323,9 +330,7 @@ function Home({ initialSettings }) {
             {!initialSettings?.theme && <ThemeToggle />}
           </div>
 
-          <div className="flex mt-4 w-full justify-end">
+          <div className="flex mt-4 w-full justify-end">{!initialSettings?.hideVersion && <Version />}</div>
-            {!initialSettings?.hideVersion && <Version />}
-          </div>
         </div>
       </div>
     </>
@@ -340,7 +345,7 @@ export default function Wrapper({ initialSettings, fallback }) {
   if (initialSettings && initialSettings.background) {
     let opacity = initialSettings.backgroundOpacity ?? 1;
     let backgroundImage = initialSettings.background;
-    if (typeof initialSettings.background === 'object') {
+    if (typeof initialSettings.background === "object") {
       backgroundImage = initialSettings.background.image;
       backgroundBlur = initialSettings.background.blur !== undefined;
       backgroundSaturate = initialSettings.background.saturate !== undefined;
@@ -375,11 +380,13 @@ export default function Wrapper({ initialSettings, fallback }) {
         <div
           id="inner_wrapper"
           className={classNames(
-          'fixed overflow-auto w-full h-full',
+            "fixed overflow-auto w-full h-full",
-          backgroundBlur && `backdrop-blur${initialSettings.background.blur.length ? '-' : ""}${initialSettings.background.blur}`,
+            backgroundBlur &&
+              `backdrop-blur${initialSettings.background.blur.length ? "-" : ""}${initialSettings.background.blur}`,
             backgroundSaturate && `backdrop-saturate-${initialSettings.background.saturate}`,
-          backgroundBrightness && `backdrop-brightness-${initialSettings.background.brightness}`,
+            backgroundBrightness && `backdrop-brightness-${initialSettings.background.brightness}`
-        )}>
+          )}
+        >
           <Index initialSettings={initialSettings} fallback={fallback} />
         </div>
       </div>

src/utils/config/service-helpers.js

@@ -25,11 +25,12 @@ export async function servicesFromConfig() {
     return [];
   }
   // map easy to write YAML objects into easy to consume JS arrays
+
   const servicesArray = services.map((servicesGroup) => ({
     name: Object.keys(servicesGroup)[0],
-    services: servicesGroup[Object.keys(servicesGroup)[0]].map((entries) => {
+    services: servicesGroup[Object.keys(servicesGroup)[0]].map((entries) =>
-      if (Array.isArray(entries[Object.keys(entries)[0]]))
+      Array.isArray(entries[Object.keys(entries)[0]])
-        return {
+        ? {
             name: Object.keys(entries)[0],
             services: entries[Object.keys(entries)[0]].map((entry) => ({
               name: Object.keys(entry)[0],
@@ -37,23 +38,21 @@ export async function servicesFromConfig() {
               type: "service",
             })),
             type: "grouped-service",
-        };
+          }
-
+        : {
-      return {
             name: Object.keys(entries)[0],
             ...entries[Object.keys(entries)[0]],
             type: "service",
-      };
+          }
-    }),
+    ),
   }));
+
   // add default weight to services based on their position in the configuration
   servicesArray.forEach((group, groupIndex) => {
     group.services.forEach((service, serviceIndex) => {
-      if (!service.weight && service.type !== "grouped-service") {
+      if (!service.weight) servicesArray[groupIndex].services[serviceIndex].weight = (serviceIndex + 1) * 100;
-        servicesArray[groupIndex].services[serviceIndex].weight = (serviceIndex + 1) * 100;
+
-      }
       if (service.type === "grouped-service") {
-        servicesArray[groupIndex].services[serviceIndex].weight = (serviceIndex + 1) * 100;
         service.services.forEach((groupedService, groupedServiceIndex) => {
           if (!groupedService.weight) {
             servicesArray[groupIndex].services[serviceIndex].services[groupedServiceIndex].weight =
@@ -297,11 +296,11 @@ export async function servicesFromKubernetes() {
   }
 }
 
-export function cleanServiceGroups(groups) {
+export function cleanService(service, serviceGroup) {
-  return groups.map((serviceGroup) => ({
+  const cleanedService =
-    name: serviceGroup.name,
+    service.type === "grouped-service"
-    services: serviceGroup.services.map((service) => {
+      ? { ...service, services: service.services.map((s) => cleanService(s, serviceGroup)) }
-      const cleanedService = { ...service };
+      : { ...service };
   if (cleanedService.showStats !== undefined) cleanedService.showStats = JSON.parse(cleanedService.showStats);
   if (typeof service.weight === "string") {
     const weight = parseInt(service.weight, 10);
@@ -387,7 +386,12 @@ export function cleanServiceGroups(groups) {
   }
 
   return cleanedService;
-    }),
+}
+
+export function cleanServiceGroups(groups) {
+  return groups.map((serviceGroup) => ({
+    name: serviceGroup.name,
+    services: serviceGroup.services.map((service) => cleanService(service, serviceGroup)),
   }));
 }
 
@@ -396,7 +400,10 @@ export async function getServiceItem(group, service) {
 
   const serviceGroup = configuredServices.find((g) => g.name === group);
   if (serviceGroup) {
-    const serviceEntry = serviceGroup.services.find((s) => s.name === service);
+    const serviceEntry = serviceGroup.services
+      .map((s) => (s.type === "grouped-service" ? s.services : s))
+      .flat(1)
+      .find((s) => s.name === service);
     if (serviceEntry) return serviceEntry;
   }