Merge branch 'dev' into next-13

package.json

@@ -1,6 +1,6 @@
 {
   "name": "homarr",
-  "version": "0.11.3",
+  "version": "0.11.4",
   "description": "Homarr - A homepage for your server.",
   "license": "MIT",
   "repository": {

public/locales/en/modules/dashdot.json

@@ -18,6 +18,9 @@
       },
       "url": {
         "label": "Dash. URL"
+      },
+      "usePercentages": {
+        "label": "Display percentages"
       }
     }
   },

src/components/Dashboard/Modals/AboutModal/AboutModal.tsx

@@ -5,6 +5,7 @@ import {
   Button,
   createStyles,
   Divider,
+  Grid,
   Group,
   HoverCard,
   Modal,
@@ -94,35 +95,45 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod
         {t('layout/modals/about:contact')}
       </Title>
 
-      <Group grow>
+      <Grid grow>
+        <Grid.Col md={4} xs={12}>
           <Button
             component="a"
             href="https://github.com/ajnart/homarr"
             target="_blank"
             leftIcon={<IconBrandGithub size={20} />}
             variant="default"
+            fullWidth
           >
             GitHub
           </Button>
+        </Grid.Col>
+        <Grid.Col md={4} xs={12}>
           <Button
             component="a"
             href="https://homarr.dev/"
             target="_blank"
             leftIcon={<IconWorldWww size={20} />}
             variant="default"
+            fullWidth
           >
             Documentation
           </Button>
+        </Grid.Col>
+
+        <Grid.Col md={4} xs={12}>
           <Button
             component="a"
             href="https://discord.gg/aCsmEV5RgA"
             target="_blank"
             leftIcon={<IconBrandDiscord size={20} />}
             variant="default"
+            fullWidth
           >
             Discord
           </Button>
-      </Group>
+        </Grid.Col>
+      </Grid>
       <Credits />
     </Modal>
   );

src/components/Dashboard/Tiles/Apps/AppPing.tsx

@@ -16,7 +16,7 @@ export const AppPing = ({ app }: AppPingProps) => {
     (config?.settings.customization.layout.enabledPing && app.network.enabledStatusChecker) ??
     false;
   const { data, isLoading } = useQuery({
-    queryKey: [`ping/${app.id}`],
+    queryKey: ['ping', { id: app.id, name: app.name }],
     queryFn: async () => {
       const response = await fetch(`/api/modules/ping?url=${encodeURI(app.url)}`);
       const isOk = app.network.okStatus.includes(response.status);

src/components/layout/header/Header.tsx

@@ -16,17 +16,15 @@ export function Header(props: any) {
   const { classes: cardClasses } = useCardStyles(false);
   const { attributes } = usePackageAttributesStore();
 
-  const [newVersionAvailable, setNewVersionAvailable] = useState<string>('');
+  const { isLoading, error, data } = useQuery({
-  useEffect(() => {
+    queryKey: ['github/latest'],
-    // Fetch Data here when component first mounted
+    cacheTime: 1000 * 60 * 60 * 24,
-    fetch(`https://api.github.com/repos/${REPO_URL}/releases/latest`).then((res) => {
+    staleTime: 1000 * 60 * 60 * 5,
-      res.json().then((data) => {
+    queryFn: () =>
-        if (data.tag_name > `v${attributes.packageVersion}`) {
+      fetch(`https://api.github.com/repos/${REPO_URL}/releases/latest`).then((res) => res.json()),
-          setNewVersionAvailable(data.tag_name);
-        }
   });
-    });
+  const newVersionAvailable =
-  }, []);
+    data?.tag_name > `v${attributes.packageVersion}` ? data?.tag_name : undefined;
 
   return (
     <MantineHeader height="auto" className={cardClasses.card}>
@@ -38,7 +36,13 @@ export function Header(props: any) {
           <Search />
           <ToggleEditModeAction />
           <DockerMenuButton />
-          <Indicator size={15} color="blue" withBorder processing disabled={!newVersionAvailable}>
+          <Indicator
+            size={15}
+            color="blue"
+            withBorder
+            processing
+            disabled={newVersionAvailable === undefined}
+          >
             <SettingsMenu newVersionAvailable={newVersionAvailable} />
           </Indicator>
         </Group>

src/components/layout/header/Search.tsx

@@ -148,13 +148,14 @@ export function Search() {
   } = useQuery(
     ['overseerr', debounced],
     async () => {
-      if (debounced !== '' && selectedSearchEngine.value === 'overseerr' && debounced.length > 3) {
       const res = await axios.get(`/api/modules/overseerr?query=${debounced}`);
       return res.data.results ?? [];
-      }
-      return [];
     },
     {
+      enabled:
+        isOverseerrEnabled === true &&
+        selectedSearchEngine.value === 'overseerr' &&
+        debounced.length > 3,
       refetchOnWindowFocus: false,
       refetchOnMount: false,
       refetchInterval: false,

src/components/layout/header/SettingsMenu.tsx

@@ -2,7 +2,7 @@ import { Badge, Button, Menu } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { IconInfoCircle, IconMenu2, IconSettings } from '@tabler/icons';
 import { useTranslation } from 'next-i18next';
-import { AboutModal } from '../../About/AboutModal';
+import { AboutModal } from '../../Dashboard/Modals/AboutModal/AboutModal';
 import { SettingsDrawer } from '../../Settings/SettingsDrawer';
 import { useCardStyles } from '../useCardStyles';
 import { ColorSchemeSwitch } from './SettingsMenu/ColorSchemeSwitch';

src/modules/Docker/DockerModule.tsx

@@ -68,6 +68,15 @@ export default function DockerMenuButton(props: any) {
         position="right"
         size="full"
         title={<ContainerActionBar selected={selection} reload={reload} />}
+        styles={{
+          drawer: {
+            display: 'flex',
+            flexDirection: 'column',
+          },
+          body: {
+            minHeight: 0,
+          },
+        }}
       >
         <DockerTable containers={containers} selection={selection} setSelection={setSelection} />
       </Drawer>

src/modules/Docker/DockerTable.tsx

@@ -120,7 +120,7 @@ export default function DockerTable({
   });
 
   return (
-    <ScrollArea style={{ height: '90vh' }} offsetScrollbars>
+    <ScrollArea style={{ height: '100%' }} offsetScrollbars>
       <TextInput
         placeholder={t('search.placeholder')}
         mr="md"

src/modules/common/MediaDisplay.tsx

@@ -194,7 +194,7 @@ export function MediaDisplay({ media }: { media: IMedia }) {
             }}
           >
             {media.type === 'tvshow' && (
-              <Badge variant="dot" size="xs" radius="md" color="blue">
+              <Badge variant="dot" size="xs" radius="md" color="blue" style={{ maxWidth: 200 }}>
                 s{media.seasonNumber}e{media.episodeNumber} - {media.episodetitle}
               </Badge>
             )}

src/pages/_app.tsx

@@ -68,7 +68,7 @@ function App(
   return (
     <>
       <Head>
-        <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
       </Head>
       <QueryClientProvider client={queryClient}>
         <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>

src/tools/queryClient.ts

@@ -1,3 +1,10 @@
 import { QueryClient } from '@tanstack/react-query';
 
-export const queryClient = new QueryClient();
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 5 * 60 * 1000, // 5 mins
+      cacheTime: 10 * 60 * 1000, // 10 mins
+    },
+  },
+});

src/widgets/calendar/CalendarTile.tsx

@@ -54,6 +54,7 @@ function CalendarTile({ widget }: CalendarTileProps) {
 
   const { data: medias } = useQuery({
     queryKey: ['calendar/medias', { month: month.getMonth(), year: month.getFullYear() }],
+    staleTime: 1000 * 60 * 60 * 5,
     queryFn: async () =>
       (await (
         await fetch(

src/widgets/calendar/MediaList.tsx

@@ -18,16 +18,10 @@ export const MediaList = ({ medias }: MediaListProps) => {
 
   return (
     <ScrollArea
+      style={{ height: '80vh', maxWidth: '90vw' }}
       offsetScrollbars
-      scrollbarSize={5}
       pt={5}
       className={classes.scrollArea}
-      styles={{
-        viewport: {
-          maxHeight: 450,
-          minHeight: 210,
-        },
-      }}
     >
       {mapMedias(medias.tvShows, SonarrMediaDisplay, lastMediaType === 'tv-show')}
       {mapMedias(medias.movies, RadarrMediaDisplay, lastMediaType === 'movie')}

src/widgets/dashDot/DashDotGraph.tsx

@@ -5,9 +5,15 @@ interface DashDotGraphProps {
   graph: GraphType;
   isCompact: boolean;
   dashDotUrl: string;
+  usePercentages: boolean;
 }
 
-export const DashDotGraph = ({ graph, isCompact, dashDotUrl }: DashDotGraphProps) => {
+export const DashDotGraph = ({
+  graph,
+  isCompact,
+  dashDotUrl,
+  usePercentages,
+}: DashDotGraphProps) => {
   const { classes } = useStyles();
   return (
     <Stack
@@ -25,13 +31,18 @@ export const DashDotGraph = ({ graph, isCompact, dashDotUrl }: DashDotGraphProps
         className={classes.iframe}
         key={graph.name}
         title={graph.name}
-        src={useIframeSrc(dashDotUrl, graph, isCompact)}
+        src={useIframeSrc(dashDotUrl, graph, isCompact, usePercentages)}
       />
     </Stack>
   );
 };
 
-const useIframeSrc = (dashDotUrl: string, graph: GraphType, isCompact: boolean) => {
+const useIframeSrc = (
+  dashDotUrl: string,
+  graph: GraphType,
+  isCompact: boolean,
+  usePercentages: boolean
+) => {
   const { colorScheme, colors, radius } = useMantineTheme();
   const surface = (colorScheme === 'dark' ? colors.dark[7] : colors.gray[0]).substring(1); // removes # from hex value
 
@@ -45,7 +56,8 @@ const useIframeSrc = (dashDotUrl: string, graph: GraphType, isCompact: boolean)
     `&surface=${surface}` +
     `&gap=${isCompact ? 10 : 5}` +
     `&innerRadius=${radius.lg}` +
-    `&multiView=${graph.isMultiView}`
+    `&multiView=${graph.isMultiView}` +
+    `&showPercentage=${usePercentages ? 'true' : 'false'}`
   );
 };
 

src/widgets/dashDot/DashDotTile.tsx

@@ -25,6 +25,10 @@ const definition = defineWidget({
       type: 'switch',
       defaultValue: true,
     },
+    usePercentages: {
+      type: 'switch',
+      defaultValue: false,
+    },
     graphs: {
       type: 'multi-select',
       defaultValue: ['cpu', 'memory'],
@@ -88,6 +92,8 @@ function DashDotTile({ widget }: DashDotTileProps) {
 
   const isCompactNetworkVisible = graphs?.some((g) => g.id === 'network' && isCompact);
 
+  const usePercentages = widget?.properties.usePercentages ?? false;
+
   const displayedGraphs = graphs?.filter(
     (g) => !isCompact || !['network', 'storage'].includes(g.id)
   );
@@ -109,6 +115,7 @@ function DashDotTile({ widget }: DashDotTileProps) {
                 graph={graph}
                 dashDotUrl={dashDotUrl}
                 isCompact={isCompact}
+                usePercentages={usePercentages}
               />
             ))}
           </Group>

src/widgets/weather/useWeatherForCity.ts

@@ -11,12 +11,18 @@ export const useWeatherForCity = (cityName: string) => {
     data: city,
     isLoading,
     isError,
-  } = useQuery({ queryKey: ['weatherCity', { cityName }], queryFn: () => fetchCity(cityName) });
+  } = useQuery({
+    queryKey: ['weatherCity', { cityName }],
+    queryFn: () => fetchCity(cityName),
+    cacheTime: 1000 * 60 * 60 * 24, // the city is cached for 24 hours
+    staleTime: Infinity, // the city is never considered stale
+  });
   const weatherQuery = useQuery({
     queryKey: ['weather', { cityName }],
     queryFn: () => fetchWeather(city?.results[0]),
     enabled: !!city,
-    refetchInterval: 1000 * 60 * 5, // requests the weather every 5 minutes
+    cacheTime: 1000 * 60 * 60 * 6, // the weather is cached for 6 hours
+    staleTime: 1000 * 60 * 5, // the weather is considered stale after 5 minutes
   });
 
   return {
@@ -41,14 +47,14 @@ const fetchCity = async (cityName: string) => {
  * @param coordinates of the location the weather should be fetched
  * @returns weather of specified coordinates
  */
-const fetchWeather = async (coordinates?: Coordinates) => {
+async function fetchWeather(coordinates?: Coordinates) {
-  if (!coordinates) return;
+  if (!coordinates) return null;
   const { longitude, latitude } = coordinates;
   const res = await fetch(
     `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&daily=weathercode,temperature_2m_max,temperature_2m_min&current_weather=true&timezone=Europe%2FLondon`
   );
   // eslint-disable-next-line consistent-return
   return (await res.json()) as WeatherResponse;
-};
+}
 
 type Coordinates = { latitude: number; longitude: number };