🐛 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,18 +14,19 @@ 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
@@ -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,7 +85,7 @@ type TooltipLabelProps = {
   isError: boolean;
   data: RouterOutputs['app']['ping'] | undefined;
   errorMessage: string | undefined;
-}
+};
 
 const useTooltipLabel = ({ isFetching, isError, data, errorMessage }: TooltipLabelProps) => {
   const { t } = useTranslation('modules/ping');
@@ -99,17 +94,20 @@ const useTooltipLabel = ({isFetching, isError, data, errorMessage}: TooltipLabel
   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 =
+    (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 ?? ''
+      configName: name ?? '',
-  }, {
+    },
+    {
       retry: false,
       enabled: isActive,
       select: (data) => {
@@ -124,22 +122,27 @@ const usePing = (app: AppType) => {
           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,
       ease: 'easeInOut',
-    }
+    },
-  }
+  };
-}
+};