Merge branch 'gethomepage:main' into main

.devcontainer/Dockerfile

@@ -3,4 +3,10 @@ FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:${VARIANT}
 
 RUN npm install -g pnpm
 
+RUN apt-get update \
+   && apt-get -y install --no-install-recommends \
+        python3-pip \
+        && apt-get clean -y \
+        && rm -rf /var/lib/apt/lists/*
+
 ENV PATH="${PATH}:./node_modules/.bin"

.devcontainer/devcontainer.json

@@ -1,27 +1,26 @@
 {
-	"name": "homepage",
-	"build": {
-		"dockerfile": "Dockerfile",
-		"args": {
-			"VARIANT": "18-bullseye"
-		}
-	},
-	"customizations": {
-		"vscode": {
-			"extensions": [
-				"dbaeumer.vscode-eslint",
-				"mhutchie.git-graph",
-				"streetsidesoftware.code-spell-checker",
-			],
-			"settings": {
-				"eslint.format.enable": true,
-				"eslint.lintTask.enable": true,
-				"eslint.packageManager": "pnpm"
-			}
-		}
-	},
-	"postCreateCommand": ".devcontainer/setup.sh",
-	"forwardPorts": [
-		3000
-	]
+  "name": "homepage",
+  "build": {
+    "dockerfile": "Dockerfile",
+    "args": {
+      "VARIANT": "18-bullseye",
+    },
+  },
+  "customizations": {
+    "vscode": {
+      "extensions": [
+        "dbaeumer.vscode-eslint",
+        "mhutchie.git-graph",
+        "streetsidesoftware.code-spell-checker",
+        "esbenp.prettier-vscode",
+      ],
+      "settings": {
+        "eslint.format.enable": true,
+        "eslint.lintTask.enable": true,
+        "eslint.packageManager": "pnpm",
+      },
+    },
+  },
+  "postCreateCommand": ".devcontainer/setup.sh",
+  "forwardPorts": [3000],
 }

.devcontainer/setup.sh

@@ -3,6 +3,8 @@
 # Install Node packages
 pnpm install
 
+python3 -m pip install -r requirements.txt
+
 # Copy in skeleton configuration if there is no existing configuration
 if [ ! -d "config/" ]; then
   echo "Adding skeleton config"

src/components/quicklaunch.jsx

@@ -120,7 +120,7 @@ export default function QuickLaunch({
         });
 
         if (showSearchSuggestions && searchProvider.suggestionUrl) {
-          if (searchString.trim() !== searchSuggestions[0]) {
+          if (searchString.trim() !== searchSuggestions[0]?.trim()) {
             fetch(
               `/api/search/searchSuggestion?query=${encodeURIComponent(searchString)}&providerName=${
                 searchProvider.name ?? "Custom"

src/components/widgets/search/search.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, Fragment } from "react";
+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";
@@ -119,20 +119,27 @@ export default function Search({ options }) {
     };
   }, [selectedProvider, options, query, searchSuggestions]);
 
-  const submitCallback = useCallback(
-    (value) => {
-      const q = encodeURIComponent(value);
-      const { url } = selectedProvider;
-      if (url) {
-        window.open(`${url}${q}`, options.target || "_blank");
-      } else {
-        window.open(`${options.url}${q}`, options.target || "_blank");
-      }
+  let currentSuggestion;
 
-      setQuery("");
-    },
-    [selectedProvider, options.url, options.target],
-  );
+  function doSearch(value) {
+    const q = encodeURIComponent(value);
+    const { url } = selectedProvider;
+    if (url) {
+      window.open(`${url}${q}`, options.target || "_blank");
+    } else {
+      window.open(`${options.url}${q}`, options.target || "_blank");
+    }
+
+    setQuery("");
+    currentSuggestion = null;
+  }
+
+  const handleSearchKeyDown = (event) => {
+    const useSuggestion = searchSuggestions.length && currentSuggestion;
+    if (event.key === "Enter") {
+      doSearch(useSuggestion ? currentSuggestion : event.target.value);
+    }
+  };
 
   if (!availableProviderIds) {
     return null;
@@ -148,7 +155,7 @@ export default function Search({ options }) {
       <Raw>
         <div className="flex-col relative h-8 my-4 min-w-fit z-20">
           <div className="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none w-full text-theme-800 dark:text-white" />
-          <Combobox value={query} onChange={submitCallback}>
+          <Combobox value={query}>
             <Combobox.Input
               type="text"
               className="
@@ -160,13 +167,17 @@ export default function Search({ options }) {
               focus:border-theme-500 dark:focus:border-white/50
               border border-theme-300 dark:border-theme-200/50"
               placeholder={t("search.placeholder")}
-              onChange={(event) => setQuery(event.target.value)}
+              onChange={(event) => {
+                setQuery(event.target.value);
+              }}
               required
               autoCapitalize="off"
               autoCorrect="off"
               autoComplete="off"
               // eslint-disable-next-line jsx-a11y/no-autofocus
               autoFocus={options.focus}
+              onBlur={(e) => e.preventDefault()}
+              onKeyDown={handleSearchKeyDown}
             />
             <Listbox
               as="div"
@@ -229,20 +240,30 @@ export default function Search({ options }) {
                 <div className="p-1 bg-white/50 dark:bg-white/10 text-theme-900/90 dark:text-white/90 text-xs">
                   <Combobox.Option key={query} value={query} />
                   {searchSuggestions[1].map((suggestion) => (
-                    <Combobox.Option key={suggestion} value={suggestion} className="flex w-full">
-                      {({ active }) => (
-                        <div
-                          className={classNames(
-                            "px-2 py-1 rounded-md w-full flex-nowrap",
-                            active ? "bg-theme-300/20 dark:bg-white/10" : "",
-                          )}
-                        >
-                          <span className="whitespace-pre">{suggestion.indexOf(query) === 0 ? query : ""}</span>
-                          <span className="mr-4 whitespace-pre opacity-50">
-                            {suggestion.indexOf(query) === 0 ? suggestion.substring(query.length) : suggestion}
-                          </span>
-                        </div>
-                      )}
+                    <Combobox.Option
+                      key={suggestion}
+                      value={suggestion}
+                      onClick={() => {
+                        doSearch(suggestion);
+                      }}
+                      className="flex w-full"
+                    >
+                      {({ active }) => {
+                        if (active) currentSuggestion = suggestion;
+                        return (
+                          <div
+                            className={classNames(
+                              "px-2 py-1 rounded-md w-full flex-nowrap",
+                              active ? "bg-theme-300/20 dark:bg-white/10" : "",
+                            )}
+                          >
+                            <span className="whitespace-pre">{suggestion.indexOf(query) === 0 ? query : ""}</span>
+                            <span className="mr-4 whitespace-pre opacity-50">
+                              {suggestion.indexOf(query) === 0 ? suggestion.substring(query.length) : suggestion}
+                            </span>
+                          </div>
+                        );
+                      }}
                     </Combobox.Option>
                   ))}
                 </div>

src/widgets/healthchecks/component.jsx

@@ -63,26 +63,22 @@ export default function Component({ service }) {
     );
   }
 
-  const hasUuid = widget?.uuid;
+  const hasUuid = !!widget?.uuid;
 
   const { upCount, downCount } = countStatus(data);
 
-  return (
+  return hasUuid ? (
     <Container service={service}>
-      {hasUuid ? (
-        <>
-          <Block label="healthchecks.status" value={t(`healthchecks.${data.status}`)} />
-          <Block
-            label="healthchecks.last_ping"
-            value={data.last_ping ? formatDate(data.last_ping) : t("healthchecks.never")}
-          />
-        </>
-      ) : (
-        <>
-          <Block label="healthchecks.up" value={upCount} />
-          <Block label="healthchecks.down" value={downCount} />
-        </>
-      )}
+      <Block label="healthchecks.status" value={t(`healthchecks.${data.status}`)} />
+      <Block
+        label="healthchecks.last_ping"
+        value={data.last_ping ? formatDate(data.last_ping) : t("healthchecks.never")}
+      />
+    </Container>
+  ) : (
+    <Container service={service}>
+      <Block label="healthchecks.up" value={upCount} />
+      <Block label="healthchecks.down" value={downCount} />
     </Container>
   );
 }