chore: implement copilot suggestions

Author: wp99cp

src/components/ui/offline-logo.tsx

@@ -1,8 +1,10 @@
 import type React from 'react';
 
-export const OfflineLogo: React.FC = () => (
+import { cn } from '@/utils/tailwindcss-override';
+
+export const OfflineLogo: React.FC<{ className?: string }> = ({ className }) => (
   <svg
-    className="mx-auto h-24 w-24 text-gray-400"
+    className={cn('mx-auto h-24 w-24 text-gray-400', className)}
     fill="none"
     stroke="currentColor"
     viewBox="0 0 24 24"

src/components/ui/pull-to-refresh.tsx

@@ -7,6 +7,8 @@ import { Loader2 } from 'lucide-react';
 import type React from 'react';
 import { useCallback, useState } from 'react';
 
+import { useOnlineStatus } from '@/hooks/use-online-status';
+
 interface PullToRefreshProperties {
   onRefresh: () => Promise<void>;
   children: React.ReactNode;
@@ -20,6 +22,7 @@ export const PullToRefresh: React.FC<PullToRefreshProperties> = ({
   className,
   pullThreshold = 80,
 }) => {
+  const isOnline = useOnlineStatus();
   const [isRefreshing, setIsRefreshing] = useState(false);
   const y = useMotionValue(0);
 
@@ -32,34 +35,34 @@ export const PullToRefresh: React.FC<PullToRefreshProperties> = ({
       // Keep it at a fixed position while refreshing
       animate(y, 60, { type: 'spring', stiffness: 300, damping: 30 });
 
-      if (navigator.onLine === false) {
+      if (isOnline) {
+        void onRefresh().finally(() => {
+          setIsRefreshing(false);
+          animate(y, 0, { type: 'spring', stiffness: 300, damping: 30 });
+        });
+      } else {
         // we are offline, show the offline logo and
         // hide the icon after a second
         setTimeout(() => {
           setIsRefreshing(false);
           animate(y, 0, { type: 'spring', stiffness: 300, damping: 30 });
         }, 1000);
-      } else {
-        void onRefresh().finally(() => {
-          setIsRefreshing(false);
-          animate(y, 0, { type: 'spring', stiffness: 300, damping: 30 });
-        });
       }
     } else {
       animate(y, 0, { type: 'spring', stiffness: 500, damping: 30 });
     }
-  }, [y, pullThreshold, isRefreshing, onRefresh]);
+  }, [y, pullThreshold, isRefreshing, onRefresh, isOnline]);
 
   return (
     <div className={cn('relative', className)}>
       {/* Spinner shown only while refreshing */}
       {isRefreshing && (
         <div className="absolute top-4 left-0 z-20 flex w-full justify-center">
           <div className="flex h-10 w-10 items-center justify-center rounded-full bg-white shadow-md">
-            {navigator.onLine ? (
+            {isOnline ? (
               <Loader2 className="text-conveniat-green h-6 w-6 animate-spin" />
             ) : (
-              <OfflineLogo />
+              <OfflineLogo className="h-6 w-6 text-gray-400" />
             )}
           </div>
         </div>