From 5bccec91377f3fc314809a5f24d93ef833b665e5 Mon Sep 17 00:00:00 2001
From: Ali Amer <76897266+aliamerj@users.noreply.github.com>
Date: Thu, 2 Apr 2026 16:43:08 +0300
Subject: [PATCH] Fix lint errors and trim generated-file warning noise

---
 .../FeatureDetail/CommentsContainer.tsx       | 16 ++++---
 .../FormatDistanceToNow.tsx                   |  8 ----
 components/RenderComment/RenderComment.tsx    |  8 +---
 components/WidgetPreview/WidgetPreview.tsx    |  2 +-
 contexts/PaymentContext.tsx                   | 43 ++++++++-----------
 contexts/ProjectPermissionProvider.tsx        |  7 ++-
 eslint.config.mjs                             |  1 +
 tailwind.config.js                            |  8 +++-
 8 files changed, 45 insertions(+), 48 deletions(-)

diff --git a/components/FeatureDetail/CommentsContainer.tsx b/components/FeatureDetail/CommentsContainer.tsx
index 9a2bcf1..e7d54d9 100644
--- a/components/FeatureDetail/CommentsContainer.tsx
+++ b/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">
diff --git a/components/FromatDistanceToNow/FormatDistanceToNow.tsx b/components/FromatDistanceToNow/FormatDistanceToNow.tsx
index 86d4da4..6118610 100644
--- a/components/FromatDistanceToNow/FormatDistanceToNow.tsx
+++ b/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 })}
diff --git a/components/RenderComment/RenderComment.tsx b/components/RenderComment/RenderComment.tsx
index 1bc1744..5a65923 100644
--- a/components/RenderComment/RenderComment.tsx
+++ b/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">
diff --git a/components/WidgetPreview/WidgetPreview.tsx b/components/WidgetPreview/WidgetPreview.tsx
index 21d0081..7750e12 100644
--- a/components/WidgetPreview/WidgetPreview.tsx
+++ b/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
diff --git a/contexts/PaymentContext.tsx b/contexts/PaymentContext.tsx
index 47b96af..21d807a 100644
--- a/contexts/PaymentContext.tsx
+++ b/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>)
 }
diff --git a/contexts/ProjectPermissionProvider.tsx b/contexts/ProjectPermissionProvider.tsx
index 892e810..3df4e8d 100644
--- a/contexts/ProjectPermissionProvider.tsx
+++ b/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}}>
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 69c637a..3c5ed1e 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -18,6 +18,7 @@ const eslintConfig = defineConfig([
     "out/**",
     "build/**",
     "next-env.d.ts",
+    "public/packages/widget.iife.js",
   ]),
 ]);
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 943fed7..78e4722 100644
--- a/tailwind.config.js
+++ b/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;