Merge branch 'dev' into i10n_dev

.github/ISSUE_TEMPLATE/bug.yml

@@ -35,7 +35,7 @@ body:
       label: Logs
       description: Provide your Homarr logs so we can investigate what's going on
     validations:
-      required: true
+      required: false
   - type: textarea
     id: context
     attributes:

.github/workflows/docker_dev.yml

@@ -153,56 +153,4 @@ jobs:
 
       - name: Build next.js app
         # change this if your site requires a custom build command
-        run: yarn turbo build
+        run: yarn turbo build
-
-      # Here's the first place where next-bundle-analysis' own script is used
-      # This step pulls the raw bundle stats for the current bundle
-      - name: Analyze bundle
-        run: npx -p nextjs-bundle-analysis report
-
-      - name: Upload bundle
-        uses: actions/upload-artifact@v3
-        with:
-          name: bundle
-          path: .next/analyze/__bundle_analysis.json
-
-      - name: Download base branch bundle stats
-        uses: dawidd6/action-download-artifact@v2
-        continue-on-error: true
-        if: success() && github.event.number
-        with:
-          workflow: nextjs_bundle_analysis.yml
-          branch: ${{ github.event.pull_request.base.ref }}
-          path: .next/analyze/base
-
-      # And here's the second place - this runs after we have both the current and
-      # base branch bundle stats, and will compare them to determine what changed.
-      # There are two configurable arguments that come from package.json:
-      #
-      # - budget: optional, set a budget (bytes) against which size changes are measured
-      #           it's set to 350kb here by default, as informed by the following piece:
-      #           https://infrequently.org/2021/03/the-performance-inequality-gap/
-      #
-      # - red-status-percentage: sets the percent size increase where you get a red
-      #                          status indicator, defaults to 20%
-      #
-      # Either of these arguments can be changed or removed by editing the `nextBundleAnalysis`
-      # entry in your package.json file.
-      - name: Compare with base branch bundle
-        if: success() && github.event.number
-        run: ls -laR .next/analyze/base && npx -p nextjs-bundle-analysis compare
-
-      - name: Get Comment Body
-        id: get-comment-body
-        if: success() && github.event.number
-        # https://docs.github.com/en/actions/using-workflows/workflow-commands-for-github-actions#multiline-strings
-        run: |
-          echo "body<<EOF" >> $GITHUB_OUTPUT
-          echo "$(cat .next/analyze/__bundle_analysis_comment.txt)" >> $GITHUB_OUTPUT
-          echo EOF >> $GITHUB_OUTPUT
-
-      - name: Comment
-        uses: marocchino/sticky-pull-request-comment@v2
-        with:
-          header: next-touched-pages
-          message: ${{ steps.get-comment-body.outputs.body }}

README.md

@@ -121,3 +121,5 @@ You can also support us by helping with [translating the entire project](https:/
 **Please read our [Contribution Guidelines](/CONTRIBUTING.md)**
 
 All contributions, regardless of their size or scope, are welcome and highly appreciated! Thank you ❤️
+
+![Alt](https://repobeats.axiom.co/api/embed/60a6f68f193faf831f64221bdf90782adec51c93.svg "Repobeats analytics image")

package.json

@@ -63,7 +63,7 @@
     "html-entities": "^2.3.3",
     "i18next": "^22.5.1",
     "js-file-download": "^0.4.12",
-    "next": "^13.4.2",
+    "next": "13.4.10",
     "next-i18next": "^13.0.0",
     "nzbget-api": "^0.0.3",
     "prismjs": "^1.29.0",
@@ -76,7 +76,6 @@
     "uuid": "^9.0.0",
     "xml-js": "^1.6.11",
     "xss": "^1.0.14",
-    "yarn": "^1.22.19",
     "zod": "^3.21.4",
     "zustand": "^4.3.7"
   },
@@ -87,15 +86,15 @@
     "@testing-library/react": "^14.0.0",
     "@trivago/prettier-plugin-sort-imports": "^4.1.1",
     "@types/dockerode": "^3.3.9",
-    "@types/node": "18.16.18",
+    "@types/node": "18.16.19",
     "@types/prismjs": "^1.26.0",
     "@types/react": "^18.2.11",
     "@types/uuid": "^9.0.0",
     "@types/video.js": "^7.3.51",
     "@typescript-eslint/eslint-plugin": "^5.50.0",
     "@typescript-eslint/parser": "^5.30.7",
-    "@vitest/coverage-c8": "^0.32.0",
+    "@vitest/coverage-c8": "^0.33.0",
-    "@vitest/ui": "^0.32.0",
+    "@vitest/ui": "^0.33.0",
     "eslint": "^8.0.1",
     "eslint-config-next": "^13.4.5",
     "eslint-plugin-promise": "^6.0.0",
@@ -113,10 +112,9 @@
     "typescript": "^5.1.0",
     "video.js": "^8.0.3",
     "vite-tsconfig-paths": "^4.2.0",
-    "vitest": "^0.32.0",
+    "vitest": "^0.33.0",
     "vitest-fetch-mock": "^0.2.2"
   },
-  "packageManager": "yarn@3.6.0",
   "nextBundleAnalysis": {
     "budget": null,
     "budgetPercentIncreaseRed": 20,

public/locales/en/modules/calendar.json

@@ -14,7 +14,10 @@
         "label": "Radarr release type"
       },
       "hideWeekDays": {
-        "label": ""
+        "label": "Hide week days"
+      },
+      "fontSize": {
+        "label": "Font Size"
       }
     }
   }

public/locales/en/settings/customization/accessibility.json

@@ -1,11 +1,11 @@
 {
     "disablePulse": {
-        "label": "",
+        "label": "Disable ping pulse",
-        "description": ""
+        "description": "By default, ping indicators in Homarr will pulse. This may be irritating. This slider will deactivate the animation"
     },
     "replaceIconsWithDots": {
-        "label": "",
+        "label": "Replace ping dots with icons",
-        "description": ""
+        "description": "For colorblind users, ping dots may be unrecognizable. This will replace indicators with icons"
     },
-    "alert": ""
+    "alert": "Are you missing something? We'll gladly extend the accessibility of Homarr"
 }

public/locales/en/settings/customization/general.json

@@ -18,8 +18,8 @@
       "description": "Customize the background, colors and apps appearance"
     },
     "accessibility": {
-      "name": "",
+      "name": "Accessibility",
-      "description": ""
+      "description": "Configure Homarr for disabled and handicapped users"
     }
   }
 }

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

@@ -1,10 +1,12 @@
-import { Indicator, Tooltip } from '@mantine/core';
+import { Box, Indicator, Tooltip } from '@mantine/core';
+import { IconCheck, IconCheckbox, IconDownload, IconLoader, IconX } from '@tabler/icons-react';
 import Consola from 'consola';
-import { motion } from 'framer-motion';
+import { TargetAndTransition, Transition, motion } from 'framer-motion';
 import { useTranslation } from 'next-i18next';
+import { api } from '~/utils/api';
+
 import { useConfigContext } from '../../../../config/provider';
 import { AppType } from '../../../../types/app';
-import { api } from '~/utils/api';
 
 interface AppPingProps {
   app: AppType;
@@ -16,19 +18,53 @@ export const AppPing = ({ app }: AppPingProps) => {
   const active =
     (config?.settings.customization.layout.enabledPing && app.network.enabledStatusChecker) ??
     false;
-  const { data, isLoading, error } = usePingQuery(app, active);
 
-  const isOnline = data?.state === 'online';
+  const { data, isLoading, isFetching, isSuccess } = api.app.ping.useQuery(app.id, {
+    retry: false,
+    enabled: active,
+    select: (data) => {
+      const isOk = getIsOk(app, data.status);
+      Consola.info(`Ping ${app.name} (${app.url}) ${data.status} ${isOk}`);
+      return {
+        status: data.status,
+        state: isOk ? ('online' as const) : ('down' as const),
+        statusText: data.statusText,
+      };
+    },
+  });
 
   if (!active) return null;
 
+  const isOnline = data?.state === 'online';
+
+  const disablePulse = config?.settings.customization.accessibility?.disablePingPulse ?? false;
+  const replaceDotWithIcon =
+    config?.settings.customization.accessibility?.replacePingDotsWithIcons ?? false;
+
+  const scaleAnimation = isOnline ? [1, 0.7, 1] : 1;
+  const animate: TargetAndTransition | undefined = disablePulse
+    ? undefined
+    : {
+        scale: scaleAnimation,
+      };
+  const transition: Transition | undefined = disablePulse
+    ? undefined
+    : {
+        repeat: Infinity,
+        duration: 2.5,
+        ease: 'easeInOut',
+      };
+
   return (
     <motion.div
-      style={{ position: 'absolute', bottom: 20, right: 20, zIndex: 2 }}
+      style={{
-      animate={{
+        position: 'absolute',
-        scale: isOnline ? [1, 0.7, 1] : 1,
+        bottom: replaceDotWithIcon ? 5 : 20,
+        right: replaceDotWithIcon ? 8 : 20,
+        zIndex: 2,
       }}
-      transition={{ repeat: Infinity, duration: 2.5, ease: 'easeInOut' }}
+      animate={animate}
+      transition={transition}
     >
       <Tooltip
         withinPortal
@@ -36,40 +72,46 @@ export const AppPing = ({ app }: AppPingProps) => {
         label={
           isLoading
             ? t('states.loading')
-            : isOnline
+            : data?.state === 'online'
-            ? t('states.online', { response: data.status })
+            ? t('states.online', { response: data?.status ?? 'N/A' })
-            : t('states.offline', { response: data?.status ?? error?.data?.httpStatus })
+            : `${data?.statusText} ${data?.status}`
         }
       >
-        <Indicator
+        {config?.settings.customization.accessibility?.replacePingDotsWithIcons ? (
-          size={15}
+          <Box>
-          color={isLoading ? 'yellow' : isOnline ? 'green' : 'red'}
+            <AccessibleIndicatorPing isLoading={isLoading} isOnline={isOnline} />
-          children={null}
+          </Box>
-        />
+        ) : (
+          <Indicator
+            size={15}
+            color={isLoading ? 'yellow' : isOnline ? 'green' : 'red'}
+            children={null}
+          />
+        )}
       </Tooltip>
     </motion.div>
   );
 };
 
-const usePingQuery = (app: AppType, isEnabled: boolean) =>
+const AccessibleIndicatorPing = ({
-  api.app.ping.useQuery(
+  isLoading,
-    {
+  isOnline,
-      url: app.url,
+}: {
-    },
+  isOnline: boolean;
-    {
+  isLoading: boolean;
-      enabled: isEnabled,
+}) => {
-      select: (data) => {
+  if (isOnline) {
-        const statusCode = data.status;
+    return <IconCheck color="green" />;
-        const isOk = getIsOk(app, statusCode);
+  }
-        return {
-          status: statusCode,
-          state: isOk ? ('online' as const) : ('down' as const),
-        };
-      },
-    }
-  );
 
-const getIsOk = (app: AppType, status: number) => {
+  if (isLoading) {
+    return <IconLoader />;
+  }
+
+  return <IconX color="red" />;
+};
+
+export const getIsOk = (app: AppType, status: number) => {
   if (app.network.okStatus === undefined || app.network.statusCodes.length >= 1) {
     Consola.log('Using new status codes');
     return app.network.statusCodes.includes(status.toString());

src/components/Settings/Customization/Accessibility/AccessibilitySettings.tsx

@@ -0,0 +1,80 @@
+import { Alert, Stack, Switch } from '@mantine/core';
+import { IconInfoCircle } from '@tabler/icons-react';
+import { BaseSyntheticEvent } from 'react';
+import { useConfigStore } from '../../../../config/store';
+import { useConfigContext } from '../../../../config/provider';
+import { useTranslation } from 'react-i18next';
+
+export const AccessibilitySettings = () => {
+  const { t } = useTranslation('settings/customization/accessibility');
+  const { updateConfig } = useConfigStore();
+  const { config, name: configName } = useConfigContext();
+
+  return (
+    <Stack>
+      <Switch
+        label={t('disablePulse.label')}
+        description={t('disablePulse.description')}
+        defaultChecked={config?.settings.customization.accessibility?.disablePingPulse ?? false}
+        onChange={(value: BaseSyntheticEvent) => {
+          if (!configName) {
+            return;
+          }
+
+          updateConfig(
+            configName,
+            (previousConfig) => ({
+              ...previousConfig,
+              settings: {
+                ...previousConfig.settings,
+                customization: {
+                  ...previousConfig.settings.customization,
+                  accessibility: {
+                    ...previousConfig.settings.customization.accessibility,
+                    disablePingPulse: value.target.checked,
+                  },
+                },
+              },
+            }),
+            false,
+            true
+          );
+        }}
+      />
+
+      <Switch
+        label={t('replaceIconsWithDots.label')}
+        description={t('replaceIconsWithDots.description')}
+        defaultChecked={config?.settings.customization.accessibility?.disablePingPulse ?? false}
+        onChange={(value: BaseSyntheticEvent) => {
+          if (!configName) {
+            return;
+          }
+
+          updateConfig(
+            configName,
+            (previousConfig) => ({
+              ...previousConfig,
+              settings: {
+                ...previousConfig.settings,
+                customization: {
+                  ...previousConfig.settings.customization,
+                  accessibility: {
+                    ...previousConfig.settings.customization.accessibility,
+                    replacePingDotsWithIcons: value.target.checked,
+                  },
+                },
+              },
+            }),
+            false,
+            true
+          );
+        }}
+      />
+
+      <Alert icon={<IconInfoCircle size="1rem" />} color="blue">
+        {t('alert')}
+      </Alert>
+    </Stack>
+  );
+};

src/components/Settings/Customization/CustomizationAccordeon.tsx

@@ -1,5 +1,5 @@
 import { Accordion, Checkbox, Grid, Group, Stack, Text } from '@mantine/core';
-import { IconBrush, IconChartCandle, IconCode, IconDragDrop, IconLayout } from '@tabler/icons-react';
+import { IconAccessible, IconBrush, IconChartCandle, IconCode, IconDragDrop, IconLayout } from '@tabler/icons-react';
 import { i18n, useTranslation } from 'next-i18next';
 import { ReactNode } from 'react';
 import { GridstackConfiguration } from './Layout/GridstackConfiguration';
@@ -13,6 +13,7 @@ import { ColorSelector } from './Theme/ColorSelector';
 import { CustomCssChanger } from './Theme/CustomCssChanger';
 import { DashboardTilesOpacitySelector } from './Theme/OpacitySelector';
 import { ShadeSelector } from './Theme/ShadeSelector';
+import { AccessibilitySettings } from './Accessibility/AccessibilitySettings';
 
 export const CustomizationSettingsAccordeon = () => {
   const items = getItems().map((item) => (
@@ -70,6 +71,13 @@ const getItems = () => {
       description: t('accordeon.gridstack.description'),
       content: <GridstackConfiguration />,
     },
+    {
+      id: 'accessibility',
+      image: <IconAccessible />,
+      label: t('accordeon.accessibility.name'),
+      description: t('accordeon.accessibility.description'),
+      content: <AccessibilitySettings />,
+    },
     {
       id: 'page_metadata',
       image: <IconChartCandle />,

src/components/Settings/Customization/Layout/LayoutSelector.tsx

@@ -159,7 +159,7 @@ export const LayoutSelector = () => {
           />
           <Checkbox
             label={t('layout.enableping')}
-            checked={ping}
+            checked={enabledPing}
             onChange={(ev) => handleChange('enabledPing', ev, setPing)}
           />
         </Stack>

src/modules/Docker/DockerModule.tsx

@@ -31,6 +31,8 @@ export default function DockerMenuButton(props: any) {
     setSelection([]);
   };
 
+  if (!dockerEnabled) return null;
+
   return (
     <>
       <Drawer

src/pages/api/modules/dns-hole/control.ts

@@ -57,7 +57,7 @@ const processAdGuard = async (app: ConfigAppType, enable: boolean) => {
 };
 
 const processPiHole = async (app: ConfigAppType, enable: boolean) => {
-  const pihole = new PiHoleClient(app.url, findAppProperty(app, 'password'));
+  const pihole = new PiHoleClient(app.url, findAppProperty(app, 'apiKey'));
 
   if (enable) {
     await pihole.enable();

src/pages/api/modules/dns-hole/summary.spec.ts

@@ -28,7 +28,7 @@ describe('DNS hole', () => {
             type: 'pihole',
             properties: [
               {
-                field: 'password',
+                field: 'apiKey',
                 type: 'private',
                 value: 'hf3829fj238g8',
               },
@@ -130,7 +130,7 @@ describe('DNS hole', () => {
             type: 'pihole',
             properties: [
               {
-                field: 'password',
+                field: 'apiKey',
                 type: 'private',
                 value: 'hf3829fj238g8',
               },
@@ -144,7 +144,7 @@ describe('DNS hole', () => {
             type: 'pihole',
             properties: [
               {
-                field: 'password',
+                field: 'apiKey',
                 type: 'private',
                 value: 'ayaka',
               },

src/pages/api/modules/dns-hole/summary.ts

@@ -32,7 +32,7 @@ export const Get = async (request: NextApiRequest, response: NextApiResponse) =>
     try {
       switch (app.integration?.type) {
         case 'pihole': {
-          const piHole = new PiHoleClient(app.url, findAppProperty(app, 'password'));
+          const piHole = new PiHoleClient(app.url, findAppProperty(app, 'apiKey'));
           const summary = await piHole.getSummary();
 
           data.domainsBeingBlocked += summary.domains_being_blocked;

src/server/api/routers/app.ts

@@ -1,46 +1,58 @@
-import { z } from 'zod';
-import axios, { AxiosError } from 'axios';
-import https from 'https';
-import Consola from 'consola';
 import { TRPCError } from '@trpc/server';
+import axios, { AxiosError } from 'axios';
+import Consola from 'consola';
+import { getCookie } from 'cookies-next';
+import https from 'https';
+import { z } from 'zod';
+import { getIsOk } from '~/components/Dashboard/Tiles/Apps/AppPing';
+import { getConfig } from '~/tools/config/getConfig';
+import { AppType } from '~/types/app';
+
 import { createTRPCRouter, publicProcedure } from '../trpc';
 
 export const appRouter = createTRPCRouter({
-  ping: publicProcedure
+  ping: publicProcedure.input(z.string()).query(async ({ input }) => {
-    .input(
+    const agent = new https.Agent({ rejectUnauthorized: false });
-      z.object({
+    const configName = getCookie('config-name');
-        url: z.string(),
+    const config = getConfig(configName?.toString() ?? 'default');
-      })
+    const app = config.apps.find((app) => app.id === input);
-    )
+    const url = app?.url;
-    .query(async ({ input }) => {
+    if (url === undefined || !app) {
-      const agent = new https.Agent({ rejectUnauthorized: false });
+      throw new TRPCError({
-      const res = await axios
+        code: 'NOT_FOUND',
-        .get(input.url, { httpsAgent: agent, timeout: 2000 })
+        message: 'App or url not found',
-        .then((response) => ({
+      });
-          status: response.status,
+    }
-          statusText: response.statusText,
+    const res = await axios
-        }))
+      .get(url, { httpsAgent: agent, timeout: 2000 })
-        .catch((error: AxiosError) => {
+      .then((response) => ({
-          if (error.response) {
+        status: response.status,
-            Consola.warn(`Unexpected response: ${error.message}`);
+        statusText: response.statusText,
+      }))
+      .catch((error: AxiosError) => {
+        if (error.response) {
+          if (getIsOk(app as AppType, error.response.status)) {
             return {
+              state: 'offline',
               status: error.response.status,
               statusText: error.response.statusText,
             };
           }
-          if (error.code === 'ECONNABORTED') {
+        }
-            throw new TRPCError({
+        if (error.code === 'ECONNABORTED') {
-              code: 'TIMEOUT',
-              message: 'Request Timeout',
-            });
-          }
-
-          Consola.error(`Unexpected error: ${error.message}`);
           throw new TRPCError({
-            code: 'INTERNAL_SERVER_ERROR',
+            code: 'TIMEOUT',
-            message: 'Internal Server Error',
+            message: 'Request Timeout',
           });
+        }
+
+        Consola.error(`Unexpected response: ${error.message}`);
+        throw new TRPCError({
+          code: 'INTERNAL_SERVER_ERROR',
+          cause: app.id,
+          message: error.message,
         });
-      return res;
+      });
-    }),
+    return res;
+  }),
 });

src/server/api/routers/dns-hole.ts

@@ -97,7 +97,7 @@ const processAdGuard = async (app: ConfigAppType, enable: boolean) => {
 };
 
 const processPiHole = async (app: ConfigAppType, enable: boolean) => {
-  const pihole = new PiHoleClient(app.url, findAppProperty(app, 'password'));
+  const pihole = new PiHoleClient(app.url, findAppProperty(app, 'apiKey'));
 
   if (enable) {
     await pihole.enable();
@@ -108,7 +108,7 @@ const processPiHole = async (app: ConfigAppType, enable: boolean) => {
 };
 
 const collectPiHoleSummary = async (app: ConfigAppType) => {
-  const piHole = new PiHoleClient(app.url, findAppProperty(app, 'password'));
+  const piHole = new PiHoleClient(app.url, findAppProperty(app, 'apiKey'));
   const summary = await piHole.getSummary();
 
   return {

src/tools/config/getFrontendConfig.ts

@@ -1,11 +1,13 @@
 import Consola from 'consola';
 import fs from 'fs';
+import { IntegrationField } from '~/types/app';
 import { BackendConfigType, ConfigType } from '../../types/config';
 import { getConfig } from './getConfig';
 import { fetchCity } from '~/server/api/routers/weather';
 
 export const getFrontendConfig = async (name: string): Promise<ConfigType> => {
   let config = getConfig(name);
+  let shouldMigrateConfig = false;
 
   const anyWeatherWidgetWithStringLocation = config.widgets.some(
     (widget) => widget.type === 'weather' && typeof widget.properties.location === 'string'
@@ -13,6 +15,27 @@ export const getFrontendConfig = async (name: string): Promise<ConfigType> => {
 
   if (anyWeatherWidgetWithStringLocation) {
     config = await migrateLocation(config);
+    shouldMigrateConfig = true;
+  }
+
+  const anyPiholeIntegrationWithPassword = config.apps.some(
+    (app) =>
+      app?.integration?.type === 'pihole' &&
+      app?.integration?.properties.length &&
+      app.integration.properties.some((property) => property.field === 'password')
+  );
+
+  if (anyPiholeIntegrationWithPassword) {
+    config = migratePiholeIntegrationField(config);
+    shouldMigrateConfig = true;
+  }
+
+  if (shouldMigrateConfig) {
+    Consola.info(`Migrating config ${config.configProperties.name}`);
+    fs.writeFileSync(
+      `./data/configs/${config.configProperties.name}.json`,
+      JSON.stringify(config, null, 2)
+    );
   }
 
   Consola.info(`Requested frontend content of configuration '${name}'`);
@@ -54,7 +77,6 @@ export const getFrontendConfig = async (name: string): Promise<ConfigType> => {
 const migrateLocation = async (config: BackendConfigType) => {
   Consola.log('Migrating config file to new location schema...', config.configProperties.name);
 
-  const configName = config.configProperties.name;
   const migratedConfig = {
     ...config,
     widgets: await Promise.all(
@@ -82,7 +104,27 @@ const migrateLocation = async (config: BackendConfigType) => {
     ),
   };
 
-  fs.writeFileSync(`./data/configs/${configName}.json`, JSON.stringify(migratedConfig, null, 2));
-
   return migratedConfig;
 };
+
+const migratePiholeIntegrationField = (config: BackendConfigType) => {
+  Consola.log('Migrating pihole integration field to apiKey...', config.configProperties.name);
+  return {
+    ...config,
+    apps: config.apps.map((app) => {
+      if (app?.integration?.type === 'pihole' && Array.isArray(app?.integration?.properties)) {
+        const migratedProperties = app.integration.properties.map((property) => {
+          if (property.field === 'password') {
+            return {
+              ...property,
+              field: 'apiKey' as IntegrationField,
+            };
+          }
+          return property;
+        });
+        return { ...app, integration: { ...app.integration, properties: migratedProperties } };
+      }
+      return app;
+    }),
+  };
+};

src/tools/config/migrateConfig.ts

@@ -44,6 +44,10 @@ export function migrateConfig(config: Config): BackendConfigType {
           enabledRightSidebar: false,
           enabledSearchbar: config.modules.search?.enabled ?? true,
         },
+        accessibility: {
+          disablePingPulse: false,
+          replacePingDotsWithIcons: false,
+        },
       },
     },
     wrappers: [

src/tools/server/translation-namespaces.ts

@@ -13,6 +13,7 @@ export const dashboardNamespaces = [
   'settings/general/internationalization',
   'settings/general/search-engine',
   'settings/general/widget-positions',
+  'settings/customization/accessibility',
   'settings/customization/general',
   'settings/customization/color-selector',
   'settings/customization/page-appearance',

src/types/app.ts

@@ -86,7 +86,7 @@ export const integrationFieldProperties: {
   transmission: ['username', 'password'],
   jellyfin: ['username', 'password'],
   plex: ['apiKey'],
-  pihole: ['password'],
+  pihole: ['apiKey'],
   adGuardHome: ['username', 'password'],
 };
 

src/types/settings.ts

@@ -45,6 +45,12 @@ export interface CustomizationSettingsType {
   colors: ColorsCustomizationSettingsType;
   appOpacity?: number;
   gridstack?: GridstackSettingsType;
+  accessibility: AccessibilitySettings;
+}
+
+export interface AccessibilitySettings {
+  disablePingPulse: boolean;
+  replacePingDotsWithIcons: boolean;
 }
 
 export interface GridstackSettingsType {

src/widgets/calendar/CalendarDay.tsx

@@ -1,18 +1,46 @@
-import { Container, Indicator, IndicatorProps, Popover } from '@mantine/core';
+import { Container, Indicator, IndicatorProps, Popover, useMantineTheme, Button } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { MediaList } from './MediaList';
 import { MediasType } from './type';
 
+
 interface CalendarDayProps {
   date: Date;
   medias: MediasType;
+  size: string;
 }
 
-export const CalendarDay = ({ date, medias }: CalendarDayProps) => {
+export const CalendarDay = ({ date, medias, size }: CalendarDayProps) => {
   const [opened, { close, open }] = useDisclosure(false);
-
+  const { radius, fn } = useMantineTheme();
-  if (medias.totalCount === 0) {
+  var indicatorSize = 10;
-    return <div>{date.getDate()}</div>;
+  var indicatorOffset = -4;
+  switch(size){
+    case "xs": {
+      indicatorSize += 0;
+      indicatorOffset -= 0;
+      break;
+    }
+    case "sm": {
+      indicatorSize += 1;
+      indicatorOffset -= 1;
+      break;
+    }
+    case "md": {
+      indicatorSize += 2;
+      indicatorOffset -= 1;
+      break;
+    }
+    case "lg": {
+      indicatorSize += 3;
+      indicatorOffset -= 2;
+      break;
+    }
+    case "xl": {
+      indicatorSize += 4;
+      indicatorOffset -= 3;
+      break;
+    }
   }
 
   return (
@@ -29,11 +57,23 @@ export const CalendarDay = ({ date, medias }: CalendarDayProps) => {
       opened={opened}
     >
       <Popover.Target>
-        <Container p={10} onClick={open}>
+        <Container
-          <DayIndicator color="red" position="bottom-start" medias={medias.books}>
+          onClick={medias.totalCount > 0 ? open : undefined}
-            <DayIndicator color="yellow" position="top-start" medias={medias.movies}>
+          sx={{ root: {
-              <DayIndicator color="blue" position="top-end" medias={medias.tvShows}>
+            padding:'18% !important',
-                <DayIndicator color="green" position="bottom-end" medias={medias.musics}>
+            height: '100%',
+            width: '100%',
+            alignContent: 'center',
+            borderRadius: ['xs','sm'].includes(size) ? radius.md : radius.lg,
+            borderStyle: "solid",
+            borderWidth: "0.2rem",
+            borderColor: opened ? fn.primaryColor() : 'transparent',
+          }}}
+        >
+          <DayIndicator size={indicatorSize} offset={indicatorOffset} color="red" position="bottom-start" medias={medias.books}>
+            <DayIndicator size={indicatorSize} offset={indicatorOffset} color="yellow" position="top-start" medias={medias.movies}>
+              <DayIndicator size={indicatorSize} offset={indicatorOffset} color="blue" position="top-end" medias={medias.tvShows}>
+                <DayIndicator size={indicatorSize} offset={indicatorOffset} color="green" position="bottom-end" medias={medias.musics}>
                   <div>{date.getDate()}</div>
                 </DayIndicator>
               </DayIndicator>
@@ -49,17 +89,19 @@ export const CalendarDay = ({ date, medias }: CalendarDayProps) => {
 };
 
 interface DayIndicatorProps {
+  size: any;
+  offset: any;
   color: string;
   medias: any[];
   children: JSX.Element;
   position: IndicatorProps['position'];
 }
 
-const DayIndicator = ({ color, medias, children, position }: DayIndicatorProps) => {
+const DayIndicator = ({ size, offset, color, medias, children, position }: DayIndicatorProps) => {
   if (medias.length === 0) return children;
 
   return (
-    <Indicator size={10} withBorder offset={-5} color={color} position={position}>
+    <Indicator size={size} withBorder offset={offset} color={color} position={position}>
       {children}
     </Indicator>
   );

src/widgets/calendar/CalendarTile.tsx

@@ -16,6 +16,10 @@ const definition = defineWidget({
   id: 'calendar',
   icon: IconCalendarTime,
   options: {
+    hideWeekDays: {
+      type: 'switch',
+      defaultValue: true,
+    },
     useSonarrv4: {
       type: 'switch',
       defaultValue: false,
@@ -33,6 +37,17 @@ const definition = defineWidget({
         { label: 'Digital', value: 'digitalRelease' },
       ],
     },
+    fontSize:{
+      type: 'select',
+      defaultValue: 'xs',
+      data: [
+        { label: 'Extra Small', value: 'xs' },
+        { label: 'Small', value: 'sm' },
+        { label: 'Medium', value: 'md' },
+        { label: 'Large', value: 'lg' },
+        { label: 'Extra Large', value: 'xl' },
+      ]
+    },
   },
   gridstack: {
     minWidth: 2,
@@ -50,7 +65,7 @@ interface CalendarTileProps {
 }
 
 function CalendarTile({ widget }: CalendarTileProps) {
-  const { colorScheme } = useMantineTheme();
+  const { colorScheme, radius } = useMantineTheme();
   const { name: configName } = useConfigContext();
   const [month, setMonth] = useState(new Date());
   const isEditMode = useEditModeStore((x) => x.enabled);
@@ -73,17 +88,24 @@ function CalendarTile({ widget }: CalendarTileProps) {
       defaultDate={new Date()}
       onPreviousMonth={setMonth}
       onNextMonth={setMonth}
-      size="xs"
+      size={widget.properties.fontSize}
       locale={i18n?.resolvedLanguage ?? 'en'}
       firstDayOfWeek={widget.properties.sundayStart ? 0 : 1}
-      hideWeekdays
+      hideWeekdays={widget.properties.hideWeekDays}
-      style={{ position: 'relative', top: -10 }}
+      style={{ position: 'relative' }}
       date={month}
       maxLevel="month"
       hasNextLevel={false}
       styles={{
         calendarHeader: {
           maxWidth: 'inherit',
+          marginBottom: '0.35rem !important',
+        },
+        calendarHeaderLevel: {
+          height:"100%",
+        },
+        calendarHeaderControl:{
+          height:"100%",
         },
         calendar: {
           height: '100%',
@@ -100,15 +122,21 @@ function CalendarTile({ widget }: CalendarTileProps) {
           flexDirection: 'column',
           width: '100%',
         },
+        monthCell:{
+          textAlign:'center',
+        },
         month: {
           flex: 1,
         },
+        day:{
+          borderRadius: ['xs','sm'].includes(widget.properties.fontSize) ? radius.md : radius.lg,
+        },
       }}
       getDayProps={(date) => ({
         bg: getBgColorByDateAndTheme(colorScheme, date),
       })}
       renderDay={(date) => (
-        <CalendarDay date={date} medias={getReleasedMediasForDate(medias, date, widget)} />
+        <CalendarDay date={date} medias={getReleasedMediasForDate(medias, date, widget)} size={widget.properties.fontSize} />
       )}
     />
   );

src/widgets/dnshole/DnsHoleControls.tsx

@@ -1,4 +1,5 @@
-import { Badge, Box, Button, Card, Group, Image, Stack, Text } from '@mantine/core';
+import { Badge, Box, Button, Card, Group, Image, Stack, Text, SimpleGrid } from '@mantine/core';
+import { useElementSize } from '@mantine/hooks';
 import { useTranslation } from 'next-i18next';
 import { IconDeviceGamepad, IconPlayerPlay, IconPlayerStop } from '@tabler/icons-react';
 import { useConfigContext } from '../../config/provider';
@@ -15,8 +16,8 @@ const definition = defineWidget({
   icon: IconDeviceGamepad,
   options: {},
   gridstack: {
-    minWidth: 3,
+    minWidth: 2,
-    minHeight: 2,
+    minHeight: 1,
     maxWidth: 12,
     maxHeight: 12,
   },
@@ -32,6 +33,7 @@ interface DnsHoleControlsWidgetProps {
 function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
   const { isInitialLoading, data } = useDnsHoleSummeryQuery();
   const { mutateAsync } = useDnsHoleControlMutation();
+  const { width, ref } = useElementSize();
   const { t } = useTranslation('common');
 
   const { name: configName, config } = useConfigContext();
@@ -41,8 +43,8 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
   }
 
   return (
-    <Stack>
+    <Stack justify="space-between" h={"100%"} spacing="0.25rem">
-      <Group grow>
+      <SimpleGrid ref={ref} cols={ width > 275? 2 : 1 } verticalSpacing="0.25rem" spacing="0.25rem">
         <Button
           onClick={async () => {
             await mutateAsync({
@@ -54,6 +56,7 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
           leftIcon={<IconPlayerPlay size={20} />}
           variant="light"
           color="green"
+          h="2rem"
         >
           {t('enableAll')}
         </Button>
@@ -68,41 +71,43 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
           leftIcon={<IconPlayerStop size={20} />}
           variant="light"
           color="red"
+          h="2rem"
         >
           {t('disableAll')}
         </Button>
-      </Group>
+      </SimpleGrid>
 
-      {data.status.map((status, index) => {
+      <Stack spacing="0.25rem">
-        const app = config?.apps.find((x) => x.id === status.appId);
+        {data.status.map((status, index) => {
+          const app = config?.apps.find((x) => x.id === status.appId);
 
-        if (!app) {
+          if (!app) {
-          return null;
+            return null;
-        }
+          }
 
-        return (
+          return (
-          <Card withBorder key={index} p="xs">
+            <Card withBorder={true} key={index} p="xs">
-            <Group position="apart">
               <Group>
                 <Box
-                  sx={(theme) => ({
+                      sx={(theme) => ({
-                    backgroundColor:
+                        backgroundColor:
-                      theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],
+                          theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],
-                    textAlign: 'center',
+                        textAlign: 'center',
-                    padding: 5,
+                        padding: 5,
-                    borderRadius: theme.radius.md,
+                        borderRadius: theme.radius.md,
-                  })}
+                      })}
-                >
+                    >
-                  <Image src={app.appearance.iconUrl} width={25} height={25} fit="contain" />
+                      <Image src={app.appearance.iconUrl} width={40} height={40} fit="contain" />
                 </Box>
-                <Text>{app.name}</Text>
+                <Stack spacing="0rem">
+                  <Text>{app.name}</Text>
+                  <StatusBadge status={status.status} />
+                </Stack>
               </Group>
-
+            </Card>
-              <StatusBadge status={status.status} />
+          );
-            </Group>
+        })}
-          </Card>
+      </Stack>
-        );
-      })}
     </Stack>
   );
 }