Fix lint errors and suppress generated-bundle lint noise

components/FeatureDetail/CommentsContainer.tsx

@@ -1,14 +1,20 @@
 "use client";
 
-import { useRef } from "react";
+import { useEffect, useRef } from "react";
 
 export function CommentsContainer({ children }: { children: React.ReactNode }) {
   const ref = useRef<HTMLDivElement>(null);
 
-  // expose scroll function globally (simple trick)
-  (globalThis as any).__scrollCommentsToTop = () => {
-    ref.current?.scrollTo({ top: 0, behavior: "smooth" });
-  };
+  useEffect(() => {
+    // expose scroll function globally (simple trick)
+    (globalThis as any).__scrollCommentsToTop = () => {
+      ref.current?.scrollTo({ top: 0, behavior: "smooth" });
+    };
+
+    return () => {
+      delete (globalThis as any).__scrollCommentsToTop;
+    };
+  }, []);
 
   return (
     <div ref={ref} className="max-h-112.5 overflow-y-auto">

components/FromatDistanceToNow/FormatDistanceToNow.tsx

@@ -1,16 +1,8 @@
 "use client"
 
 import { formatDistanceToNow } from "date-fns"
-import { useEffect, useState } from "react"
 
 export const FormatDistanceToNow = ({ createdAt }: { createdAt: Date }) => {
-  const [mounted, setMounted] = useState(false)
-
-  useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  if (!mounted) return null
   return (
     <span>
       {formatDistanceToNow(new Date(createdAt), { addSuffix: true })}

components/RenderComment/RenderComment.tsx

@@ -10,7 +10,6 @@ import { CommentNode } from "@/type";
 import { AddComments } from "../AddComments/AddComments";
 import { useIsMobile } from "@/hooks/use-mobile";
 import { useProjectPermission } from "@/contexts/ProjectPermissionProvider";
-import { useCallback } from "react";
 import { FormatDistanceToNow } from "../FromatDistanceToNow/FormatDistanceToNow";
 
 export function RenderComment({ comment, userName, userId, depth = 0 }: { comment: CommentNode; userName: string, userId: string; depth?: number }) {
@@ -28,10 +27,7 @@ export function RenderComment({ comment, userName, userId, depth = 0 }: { commen
 
   const isAuthor = comment.authorId === user.id || comment.visitorToken === user.id;
   const isPinned = comment.id === pinCommentId;
-
-  const getAuthorRole = useCallback(() => {
-    return getUserRole(comment.author?.id ?? "Anonymous").role.toLowerCase()
-  }, [comment.author?.id])
+  const authorRole = getUserRole(comment.author?.id ?? "Anonymous").role.toLowerCase();
 
   const maxDepth = 10;
   const effectiveDepth = Math.min(depth, maxDepth);
@@ -40,7 +36,7 @@ export function RenderComment({ comment, userName, userId, depth = 0 }: { commen
     ? (isMobile ? "ml-2 border-l border-muted pl-2" : "ml-6 border-l-2 border-muted pl-4")
     : "";
   const pinnedClass = isPinned ? "rounded-md bg-yellow-50 dark:bg-yellow-950/30 p-3" : "";
-const authorRole = getAuthorRole()
+
   return (
     <div className={`space-y-2 ${indentClass} ${pinnedClass}`}>
       <div className="flex gap-2 sm:gap-3">

components/WidgetPreview/WidgetPreview.tsx

@@ -9,7 +9,7 @@ export function WidgetPreview({projectId}:{projectId:string}) {
   const iframeSrc = useMemo(() => {
     const encoded = encodeURIComponent(JSON.stringify({...config, projectId}))
     return `/widget-preview?config=${encoded}`
-  }, [config])
+  }, [config, projectId])
 
   return (
     <iframe

contexts/PaymentContext.tsx

@@ -1,6 +1,6 @@
 "use client"
 import { Environments, initializePaddle, Paddle } from "@paddle/paddle-js";
-import { ReactNode, createContext, useContext, useEffect, useMemo, useState } from "react";
+import { ReactNode, createContext, useContext, useEffect, useState } from "react";
 import { useRouter } from 'next/navigation'
 
 type Plan = "Starter" | "Growth" | "Scale"
@@ -29,7 +29,7 @@ export const PaymentProvider = ({ redirectTo, children }: { redirectTo?: string,
           token: process.env.NEXT_PUBLIC_PADDLE_CLIENT_TOKEN,
         });
         setPaddle(paddleInstance);
-      } catch (error) {
+      } catch {
         console.error("[BUG]: ❌ Paddle initialization failed")
 
       }
@@ -81,29 +81,24 @@ export const PaymentProvider = ({ redirectTo, children }: { redirectTo?: string,
   };
 
 
-  const paddlePay = (plan: Plan) => {
-    if (redirectTo) return push(redirectTo)
-    switch (plan) {
-      case 'Starter':
-        return openStarterCheckout()
-      case "Growth":
-        return openGrowthCheckout()
-      case "Scale":
-        return openScaleCheckout()
-      default:
-        break;
-    }
-  }
-
-  const contextValue = useMemo(
-    () => ({
-      paddlePay
-    }),
-    [paddle],
-  );
-
   return (
-    <PaymentContext.Provider value={contextValue}>
+    <PaymentContext.Provider
+      value={{
+        paddlePay: (plan: Plan) => {
+          if (redirectTo) return push(redirectTo)
+          switch (plan) {
+            case 'Starter':
+              return openStarterCheckout()
+            case "Growth":
+              return openGrowthCheckout()
+            case "Scale":
+              return openScaleCheckout()
+            default:
+              break;
+          }
+        }
+      }}
+    >
       {children}
     </PaymentContext.Provider>)
 }

contexts/ProjectPermissionProvider.tsx

@@ -22,12 +22,15 @@ export function ProjectPermissionProvider({
   children: React.ReactNode;
 }) {
 
-  const getUserRole = (userId: string) => memeberships.find(f => f.userId === userId) ?? { userId, role: "ANONYMOUS" }
+  const getUserRole = useCallback(
+    (targetUserId: string) => memeberships.find(f => f.userId === targetUserId) ?? { userId: targetUserId, role: "ANONYMOUS" as const },
+    [memeberships],
+  );
 
   const getPermission = useCallback(() => {
     const { role } = getUserRole(userId)
     return PERMISSIONS[role]
-  }, [userId])
+  }, [getUserRole, userId])
 
   return (
     <ProjectPermissionContext.Provider value={{getUserRole, getPermission}}>

eslint.config.mjs

@@ -18,6 +18,7 @@ const eslintConfig = defineConfig([
     "out/**",
     "build/**",
     "next-env.d.ts",
+    "public/packages/widget.iife.js",
   ]),
 ]);
 

tailwind.config.js

@@ -1,7 +1,9 @@
 /** @type {import('tailwindcss').Config} */
-export default {
+import typography from "@tailwindcss/typography";
+
+const config = {
   darkMode: ['class'],
-  plugins: [require('@tailwindcss/typography')],
+  plugins: [typography],
   theme: {
     extend: {
       fontFamily: {
@@ -92,3 +94,5 @@ export default {
     './node_modules/fumadocs-ui/dist/**/*.js',
   ],
 };
+
+export default config;