feat(releases-widget): show project description when release description is missing (#3635)

Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>

packages/translation/src/lang/en.json

@@ -2309,6 +2309,7 @@
       "openProjectPage": "Open Project Page",
       "openReleasePage": "Open Release Page",
       "releaseDescription": "Release Description",
+      "projectDescription": "Project Description",
       "created": "Created",
       "error": {
         "label": "Error",

packages/widgets/src/releases/component.tsx

@@ -18,7 +18,7 @@ import ReactMarkdown from "react-markdown";
 
 import { clientApi } from "@homarr/api/client";
 import { useRequiredBoard } from "@homarr/boards/context";
-import { isDateWithin, splitToChunksWithNItems } from "@homarr/common";
+import { isDateWithin, isNullOrWhitespace, splitToChunksWithNItems } from "@homarr/common";
 import { useScopedI18n } from "@homarr/translation/client";
 import { MaskedOrNormalImage } from "@homarr/ui";
 
@@ -572,23 +572,39 @@ const ExpandedDisplay = ({ repository, hasIconColor }: ExtendedDisplayProps) =>
             </Text>
           </>
         )}
-        {repository.releaseDescription && (
-          <>
-            <Divider className="releases-repository-expanded-description-divider" my={10} mx="30%" />
-            <Title className="releases-repository-expanded-description-title" order={4} ta="center">
-              {t("releaseDescription")}
-            </Title>
-            <Text
-              className={combineClasses("releases-repository-expanded-description-text", classes.releasesDescription)}
-              component="div"
-              size="xs"
-              ff="monospace"
-            >
-              <ReactMarkdown skipHtml>{repository.releaseDescription}</ReactMarkdown>
-            </Text>
-          </>
+
+        {repository.releaseDescription ? (
+          <Description title={t("releaseDescription")} description={repository.releaseDescription} />
+        ) : (
+          <Description title={t("projectDescription")} description={repository.projectDescription ?? null} />
         )}
       </Stack>
     </>
   );
 };
+
+interface DescriptionProps {
+  title: string;
+  description: string | null;
+}
+
+const Description = ({ title, description }: DescriptionProps) => {
+  if (isNullOrWhitespace(description)) return null;
+
+  return (
+    <>
+      <Divider className="releases-repository-expanded-description-divider" my={10} mx="30%" />
+      <Title className="releases-repository-expanded-description-title" order={4} ta="center">
+        {title}
+      </Title>
+      <Text
+        className={combineClasses("releases-repository-expanded-description-text", classes.releasesDescription)}
+        component="div"
+        size="xs"
+        ff="monospace"
+      >
+        <ReactMarkdown skipHtml>{description}</ReactMarkdown>
+      </Text>
+    </>
+  );
+};