🐛 Ping accessibillity settings have not been used

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

@@ -2,6 +2,7 @@ import { Box, Indicator, Tooltip } from '@mantine/core';
 import { IconCheck, IconLoader, IconX } from '@tabler/icons-react';
 import Consola from 'consola';
 import { TargetAndTransition, Transition, motion } from 'framer-motion';
+import { useSession } from 'next-auth/react';
 import { useTranslation } from 'next-i18next';
 import { RouterOutputs, api } from '~/utils/api';
 
@@ -13,19 +14,20 @@ interface AppPingProps {
 }
 
 export const AppPing = ({ app }: AppPingProps) => {
-  const { config } = useConfigContext();
+  const { data: sessionData } = useSession();
+  const { data: userWithSettings } = api.user.withSettings.useQuery(undefined, {
+    enabled: app.network.enabledStatusChecker && !!sessionData?.user,
+  });
 
   const { data, isFetching, isError, error, isActive } = usePing(app);
-  const tooltipLabel = useTooltipLabel({isFetching, isError, data, errorMessage: error?.message})
+  const tooltipLabel = useTooltipLabel({ isFetching, isError, data, errorMessage: error?.message });
   const isOnline = isError ? false : data?.state === 'online';
-  const pulse = usePingPulse({isOnline});
+  const pulse = usePingPulse({ isOnline, settings: userWithSettings?.settings });
 
   if (!isActive) return null;
 
+  const replaceDotWithIcon = userWithSettings?.settings.replacePingWithIcons ?? false;
 
-  const replaceDotWithIcon =
-  config?.settings.customization.accessibility?.replacePingDotsWithIcons ?? false;
-  
   return (
     <motion.div
       style={{
@@ -37,11 +39,7 @@ export const AppPing = ({ app }: AppPingProps) => {
       animate={pulse.animate}
       transition={pulse.transition}
     >
-      <Tooltip
+      <Tooltip withinPortal radius="lg" label={tooltipLabel}>
-        withinPortal
-        radius="lg"
-        label={tooltipLabel}
-      >
         {replaceDotWithIcon ? (
           <Box>
             <AccessibleIndicatorPing isFetching={isFetching} isOnline={isOnline} />
@@ -61,12 +59,9 @@ export const AppPing = ({ app }: AppPingProps) => {
 type AccessibleIndicatorPingProps = {
   isOnline: boolean;
   isFetching: boolean;
-}
+};
 
-const AccessibleIndicatorPing = ({
+const AccessibleIndicatorPing = ({ isFetching, isOnline }: AccessibleIndicatorPingProps) => {
-  isFetching,
-  isOnline,
-}: AccessibleIndicatorPingProps) => {
   if (isOnline) {
     return <IconCheck color="green" />;
   }
@@ -90,56 +85,64 @@ type TooltipLabelProps = {
   isError: boolean;
   data: RouterOutputs['app']['ping'] | undefined;
   errorMessage: string | undefined;
-}
+};
 
-const useTooltipLabel = ({isFetching, isError, data, errorMessage}: TooltipLabelProps) => {
+const useTooltipLabel = ({ isFetching, isError, data, errorMessage }: TooltipLabelProps) => {
   const { t } = useTranslation('modules/ping');
 
   if (isFetching) return t('states.loading');
-  if (isError) return  errorMessage;
+  if (isError) return errorMessage;
   if (data?.state === 'online') return t('states.online', { response: data?.status ?? 'N/A' });
   return `${data?.statusText}: ${data?.status} (denied)`;
-}
+};
 
 const usePing = (app: AppType) => {
   const { config, name } = useConfigContext();
-  const isActive = (config?.settings.customization.layout.enabledPing && app.network.enabledStatusChecker) ??
+  const isActive =
-  false;
+    (config?.settings.customization.layout.enabledPing && app.network.enabledStatusChecker) ??
+    false;
 
-  const queryResult = api.app.ping.useQuery({
+  const queryResult = api.app.ping.useQuery(
-    id: app.id,
+    {
-    configName: name ?? ''
+      id: app.id,
-  }, {
+      configName: name ?? '',
-    retry: false,
-    enabled: isActive,
-    select: (data) => {
-      const isOk = isStatusOk(app, data.status);
-      if (isOk)
-        Consola.info(`Ping of app "${app.name}" (${app.url}) returned ${data.status} (Accepted)`);
-      else
-        Consola.warn(`Ping of app "${app.name}" (${app.url}) returned ${data.status} (Refused)`);
-      return {
-        status: data.status,
-        state: isOk ? ('online' as const) : ('down' as const),
-        statusText: data.statusText,
-      };
     },
-  });
+    {
+      retry: false,
+      enabled: isActive,
+      select: (data) => {
+        const isOk = isStatusOk(app, data.status);
+        if (isOk)
+          Consola.info(`Ping of app "${app.name}" (${app.url}) returned ${data.status} (Accepted)`);
+        else
+          Consola.warn(`Ping of app "${app.name}" (${app.url}) returned ${data.status} (Refused)`);
+        return {
+          status: data.status,
+          state: isOk ? ('online' as const) : ('down' as const),
+          statusText: data.statusText,
+        };
+      },
+    }
+  );
 
   return {
     ...queryResult,
-    isActive
+    isActive,
-  }
+  };
-}
+};
 
 type PingPulse = {
   animate?: TargetAndTransition;
   transition?: Transition;
-}
+};
 
-const usePingPulse = ({isOnline}: {isOnline: boolean}): PingPulse => {
+type UsePingPulseProps = {
-  const { config } = useConfigContext();
+  isOnline: boolean;
-  const disablePulse = config?.settings.customization.accessibility?.disablePingPulse ?? false;
+  settings?: RouterOutputs['user']['withSettings']['settings'];
+};
+
+const usePingPulse = ({ isOnline, settings }: UsePingPulseProps): PingPulse => {
+  const disablePulse = settings?.disablePingPulse ?? false;
 
   if (disablePulse) {
     return {};
@@ -147,12 +150,12 @@ const usePingPulse = ({isOnline}: {isOnline: boolean}): PingPulse => {
 
   return {
     animate: {
-      scale: isOnline ? [1, 0.7, 1] : 1
+      scale: isOnline ? [1, 0.7, 1] : 1,
     },
     transition: {
       repeat: Infinity,
-        duration: 2.5,
+      duration: 2.5,
-        ease: 'easeInOut',
+      ease: 'easeInOut',
-    }
+    },
-  }
+  };
-}
+};