fix: replace return null with empty tags

app/debug/layout.tsx

@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
 
 export default function Debug({children}: {children: ReactNode}) {
-  if (process.env.NODE_ENV !== 'development') return null
+  if (process.env.NODE_ENV !== 'development') return <></>
   return (
     <div className="debug">
       {children}

app/settings/page.tsx

@@ -38,7 +38,7 @@ export default function SettingsPage() {
 
   // handleDeleteAccount function removed
 
-  if (!settings) return null
+  if (!settings) return <></>
 
   return (
     <>

components/HabitItem.tsx

@@ -24,13 +24,13 @@ interface HabitItemProps {
 }
 
 const renderUserAvatars = (habit: Habit, currentUser: User | null, usersData: { users: User[] }) => {
-  if (!habit.userIds || habit.userIds.length <= 1) return null;
+  if (!habit.userIds || habit.userIds.length <= 1) return <></>;
 
   return (
     <div className="flex -space-x-2 ml-2 flex-shrink-0">
       {habit.userIds?.filter((u) => u !== currentUser?.id).map(userId => {
         const user = usersData.users.find(u => u.id === userId)
-        if (!user) return null
+        if (!user) return <></>;
         return (
           <Avatar key={user.id} className="h-6 w-6">
             <AvatarImage src={user?.avatarPath && `/api/avatars/${user.avatarPath.split('/').pop()}` || ""} />

components/PermissionError.tsx

@@ -8,7 +8,7 @@ export default async function PermissionError() {
 
   // If everything is fine, render nothing
   if (permissionResult.success) {
-    return null
+    return <></>
   }
 
   // Get error message

components/PomodoroTimer.tsx

@@ -177,7 +177,7 @@ export default function PomodoroTimer() {
 
   const progress = (timeLeft / currentTimerRef.current.duration) * 100
 
-  if (!show) return null
+  if (!show) return <></>
 
   return (
     <div className="fixed bottom-20 right-4 lg:bottom-4 bg-background border rounded-lg shadow-lg">

components/TodayEarnedCoins.tsx

@@ -9,7 +9,7 @@ export default function TodayEarnedCoins({ longFormat }: { longFormat?: boolean
   const [settings] = useAtom(settingsAtom)
   const { coinsEarnedToday } = useCoins()
 
-  if (coinsEarnedToday <= 0) return null
+  if (coinsEarnedToday <= 0) return <></>;
 
   return (
     <span className="text-md text-green-600 dark:text-green-400 font-medium mt-1">

components/WishlistItem.tsx

@@ -29,13 +29,13 @@ interface WishlistItemProps {
 }
 
 const renderUserAvatars = (item: WishlistItemType, currentUser: User | null, usersData: { users: User[] }) => {
-  if (!item.userIds || item.userIds.length <= 1) return null;
+  if (!item.userIds || item.userIds.length <= 1) return <></>;
 
   return (
     <div className="flex -space-x-2 ml-2 flex-shrink-0">
       {item.userIds?.filter((u) => u !== currentUser?.id).map(userId => {
         const user = usersData.users.find(u => u.id === userId)
-        if (!user) return null
+        if (!user) return <></>;
         return (
           <Avatar key={user.id} className="h-6 w-6">
             <AvatarImage src={user?.avatarPath && `/api/avatars/${user.avatarPath.split('/').pop()}` || ""} />

components/ui/chart.tsx

@@ -73,7 +73,7 @@ const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
   )
 
   if (!colorConfig.length) {
-    return null
+    return <></>;
   }
 
   return (
@@ -135,7 +135,7 @@ const ChartTooltipContent = React.forwardRef<
 
     const tooltipLabel = React.useMemo(() => {
       if (hideLabel || !payload?.length) {
-        return null
+        return <></>;
       }
 
       const [item] = payload
@@ -155,7 +155,7 @@ const ChartTooltipContent = React.forwardRef<
       }
 
       if (!value) {
-        return null
+        return <></>;
       }
 
       return <div className={cn("font-medium", labelClassName)}>{value}</div>
@@ -170,7 +170,7 @@ const ChartTooltipContent = React.forwardRef<
     ])
 
     if (!active || !payload?.length) {
-      return null
+      return <></>;
     }
 
     const nestLabel = payload.length === 1 && indicator !== "dot"
@@ -273,7 +273,7 @@ const ChartLegendContent = React.forwardRef<
     const { config } = useChart()
 
     if (!payload?.length) {
-      return null
+      return <></>;
     }
 
     return (

hooks/useCoins.tsx

@@ -90,20 +90,20 @@ export function useCoins(options?: { selectedUser?: string }) {
   ]);
 
   const add = async (amount: number, description: string, note?: string) => {
-    if (!handlePermissionCheck(currentUser, 'coins', 'write', tCommon)) return null
+    if (!handlePermissionCheck(currentUser, 'coins', 'write', tCommon)) return <></>;
     if (isNaN(amount) || amount <= 0) {
       toast({
         title: t("invalidAmountTitle"),
         description: t("invalidAmountDescription")
       })
-      return null
+      return <></>;
     }
     if (amount > MAX_COIN_LIMIT) {
       toast({
         title: t("invalidAmountTitle"),
         description: t("maxAmountExceededDescription", { max: MAX_COIN_LIMIT })
       })
-      return null
+      return <></>;
     }
 
     const data = await addCoins({
@@ -119,21 +119,21 @@ export function useCoins(options?: { selectedUser?: string }) {
   }
 
   const remove = async (amount: number, description: string, note?: string) => {
-    if (!handlePermissionCheck(currentUser, 'coins', 'write', tCommon)) return null
+    if (!handlePermissionCheck(currentUser, 'coins', 'write', tCommon)) return <></>;
     const numAmount = Math.abs(amount)
     if (isNaN(numAmount) || numAmount <= 0) {
       toast({
         title: t("invalidAmountTitle"),
         description: t("invalidAmountDescription")
       })
-      return null
+      return <></>;
     }
     if (numAmount > MAX_COIN_LIMIT) {
       toast({
         title: t("invalidAmountTitle"),
         description: t("maxAmountExceededDescription", { max: MAX_COIN_LIMIT })
       })
-      return null
+      return <></>;
     }
 
     const data = await removeCoins({
@@ -149,14 +149,14 @@ export function useCoins(options?: { selectedUser?: string }) {
   }
 
   const updateNote = async (transactionId: string, note: string) => {
-    if (!handlePermissionCheck(currentUser, 'coins', 'write', tCommon)) return null
+    if (!handlePermissionCheck(currentUser, 'coins', 'write', tCommon)) return <></>;
     const transaction = coins.transactions.find(t => t.id === transactionId)
     if (!transaction) {
       toast({
         title: tCommon("errorTitle"),
         description: t("transactionNotFoundDescription")
       })
-      return null
+      return <></>;
     }
 
     const updatedTransaction = {