Merge branch 'dev' into next-13

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) => {
-  if (!coordinates) return;
+async function fetchWeather(coordinates?: Coordinates) {
+  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 };