Merge branch 'dev' into useQuery-stale-time-cache

src/components/About/AboutModal.tsx

@@ -13,6 +13,7 @@ import {
   Title,
 } from '@mantine/core';
 import {
+  IconAnchor,
   IconBrandDiscord,
   IconBrandGithub,
   IconFile,
@@ -27,9 +28,9 @@ import { InitOptions } from 'i18next';
 import { i18n, Trans, useTranslation } from 'next-i18next';
 import Image from 'next/image';
 import { ReactNode } from 'react';
-import { CURRENT_VERSION } from '../../../data/constants';
 import { useConfigContext } from '../../config/provider';
 import { useConfigStore } from '../../config/store';
+import { usePackageAttributesStore } from '../../tools/client/zustands/usePackageAttributesStore';
 import { usePrimaryGradient } from '../layout/useGradient';
 import Credits from '../Settings/Common/Credits';
 
@@ -132,6 +133,7 @@ interface ExtendedInitOptions extends InitOptions {
 const useInformationTableItems = (newVersionAvailable?: string): InformationTableItem[] => {
   // TODO: Fix this to not request. Pass it as a prop.
   const colorGradiant = usePrimaryGradient();
+  const { attributes } = usePackageAttributesStore();
 
   const { configVersion } = useConfigContext();
   const { configs } = useConfigStore();
@@ -190,7 +192,7 @@ const useInformationTableItems = (newVersionAvailable?: string): InformationTabl
       content: (
         <Group position="right">
           <Badge variant="gradient" gradient={colorGradiant}>
-            {CURRENT_VERSION}
+            {attributes.packageVersion ?? 'Unknown'}
           </Badge>
           {newVersionAvailable && (
             <HoverCard shadow="md" position="top" withArrow>
@@ -218,13 +220,22 @@ const useInformationTableItems = (newVersionAvailable?: string): InformationTabl
                     {newVersionAvailable}
                   </Anchor>
                 </b>{' '}
-                is available ! Current version: {CURRENT_VERSION}
+                is available ! Current version: {attributes.packageVersion}
               </HoverCard.Dropdown>
             </HoverCard>
           )}
         </Group>
       ),
     },
+    {
+      icon: <IconAnchor size={20} />,
+      label: 'Node environment',
+      content: (
+        <Badge variant="gradient" gradient={colorGradiant}>
+          {attributes.environment}
+        </Badge>
+      ),
+    },
     ...items,
   ];
 

src/components/Dashboard/Wrappers/Category/useCategoryActions.tsx

@@ -3,7 +3,6 @@ import { useConfigStore } from '../../../../config/store';
 import { openContextModalGeneric } from '../../../../tools/mantineModalManagerExtensions';
 import { AppType } from '../../../../types/app';
 import { CategoryType } from '../../../../types/category';
-import { ConfigType } from '../../../../types/config';
 import { WrapperType } from '../../../../types/wrapper';
 import { IWidget } from '../../../../widgets/widgets';
 import { CategoryEditModalInnerProps } from './CategoryEditModal';

src/components/layout/header/Header.tsx

@@ -1,9 +1,10 @@
 import { Box, createStyles, Group, Header as MantineHeader, Indicator } from '@mantine/core';
-import { useQuery } from '@tanstack/react-query';
-import { CURRENT_VERSION, REPO_URL } from '../../../../data/constants';
+import { useEffect, useState } from 'react';
+import { REPO_URL } from '../../../../data/constants';
+import DockerMenuButton from '../../../modules/Docker/DockerModule';
+import { usePackageAttributesStore } from '../../../tools/client/zustands/usePackageAttributesStore';
 import { Logo } from '../Logo';
 import { useCardStyles } from '../useCardStyles';
-import DockerMenuButton from '../../../modules/Docker/DockerModule';
 import { ToggleEditModeAction } from './Actions/ToggleEditMode/ToggleEditMode';
 import { Search } from './Search';
 import { SettingsMenu } from './SettingsMenu';
@@ -13,6 +14,8 @@ export const HeaderHeight = 64;
 export function Header(props: any) {
   const { classes } = useStyles();
   const { classes: cardClasses } = useCardStyles(false);
+  const { attributes } = usePackageAttributesStore();
+
   const { isLoading, error, data } = useQuery({
     queryKey: ['github/latest'],
     cacheTime: 1000 * 60 * 60 * 24,
@@ -20,10 +23,11 @@ export function Header(props: any) {
     queryFn: () =>
       fetch(`https://api.github.com/repos/${REPO_URL}/releases/latest`).then((res) => res.json()),
   });
-  const newVersionAvailable = data?.tag_name !== CURRENT_VERSION ? data?.tag_name : undefined;
+  const newVersionAvailable =
+    data?.tag_name > `v${attributes.packageVersion}` ? data?.tag_name : undefined;
 
   return (
-    <MantineHeader height={HeaderHeight} className={cardClasses.card}>
+    <MantineHeader height="auto" className={cardClasses.card}>
       <Group p="xs" noWrap grow>
         <Box className={classes.hide}>
           <Logo />