refactored code and fixed all version related issues

Ritika Mishra · Ritika Mishra · commit 7736dda08267 · 2025-11-17T17:06:43.000+05:30
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,23 +12,23 @@
     "distDir": "out"
   },
   "dependencies": {
-    "@radix-ui/react-accordion": "^1.2.0",
-    "@radix-ui/react-avatar": "^1.0.4",
-    "@radix-ui/react-checkbox": "^1.0.4",
-    "@radix-ui/react-dialog": "^1.0.5",
-    "@radix-ui/react-hover-card": "^1.1.1",
-    "@radix-ui/react-icons": "^1.3.0",
-    "@radix-ui/react-label": "^2.0.2",
-    "@radix-ui/react-popover": "^1.1.1",
-    "@radix-ui/react-radio-group": "^1.1.3",
-    "@radix-ui/react-select": "^2.0.0",
-    "@radix-ui/react-separator": "^1.0.3",
-    "@radix-ui/react-slider": "^1.1.2",
-    "@radix-ui/react-slot": "^1.0.2",
-    "@radix-ui/react-switch": "^1.1.0",
-    "@radix-ui/react-toggle": "^1.1.0",
-    "@radix-ui/react-toggle-group": "^1.1.0",
-    "@radix-ui/react-tooltip": "^1.0.7",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-hover-card": "^1.1.15",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@types/p5": "^1.7.6",
     "@types/w3c-web-serial": "^1.0.6",
     "class-variance-authority": "^0.7.0",
@@ -41,17 +41,16 @@
     "html2canvas": "^1.4.1",
     "jszip": "^3.10.1",
     "lucide-react": "^0.460.0",
-    "next": "^15.3.3",
+    "next": "^16.0.3",
     "next-pwa": "^5.6.0",
     "next-themes": "^0.3.0",
-    "react": "^18",
-    "react-dom": "^18",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "react-icons": "^5.3.0",
     "smoothie": "^1.36.1",
     "sonner": "^1.5.0",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
-    "tailwindcss-textshadow": "^2.1.3",
     "uuid": "^11.0.3",
     "webgl-plot": "^0.7.2"
   },
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,26 @@
+{
+  "name": "Chords",
+  "short_name": "Chords",
+  "start_url": "/",
+  "display": "standalone",
+  "icons": [
+    {
+      "src": "/chords-logo-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/chords-logo-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "screenshots": [
+    {
+      "src": "/screenshot-chords.png",
+      "sizes": "1280x720",
+      "type": "image/png",
+      "form_factor": "wide"
+    }
+  ]
+}
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -47,9 +47,8 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <head>
-      <link rel="manifest" href={`${basePath}/manifest.json`} /> {/* ✅ Dynamic manifest */}
-      </head>
+      {/* ✅ Dynamic manifest */}
+      <head><link rel="manifest" href={`${basePath}/manifest.json`} /></head>
       <body
         className={cn(
           lobsterTwo.variable,
diff --git a/src/components/Connection.tsx b/src/components/Connection.tsx
@@ -357,11 +357,21 @@ const Connection: React.FC<ConnectionProps> = ({
         if (!workerRef.current) {
             initializeWorker();
         }
-        setCanvasCount(selectedChannels.length)
+        // Update parent canvasCount only when it differs to avoid unnecessary rerenders
+        const newCount = selectedChannels.length;
+        if (typeof setCanvasCount === 'function' && newCount !== canvasCount) {
+            setCanvasCount(newCount);
+        }
+
         // Send canvasCount independently to the worker
         workerRef.current?.postMessage({ action: 'setCanvasCount', canvasCount: canvasElementCountRef.current });
     };
-    setCanvasCountInWorker(canvasElementCountRef.current);
+
+    // Run the canvas count sync after render (and when selectedChannels change)
+    useEffect(() => {
+        setCanvasCountInWorker(canvasElementCountRef.current);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedChannels.length]);
 
     const setSelectedChannelsInWorker = (selectedChannels: number[]) => {
         if (!workerRef.current) {
@@ -1537,7 +1547,7 @@ const Connection: React.FC<ConnectionProps> = ({
             <div className="flex gap-3 items-center justify-center">
                 {/* Connection button with tooltip */}
                 <TooltipProvider>
-                    <Tooltip>
+                        <Tooltip>
                         <TooltipTrigger asChild>
                             <Popover open={open} onOpenChange={setOpen}>
                                 <PopoverTrigger asChild>
diff --git a/src/components/Contributors.tsx b/src/components/Contributors.tsx
@@ -62,7 +62,7 @@ const contributors = [
 export default function Contributors() {
   return (
     <Dialog>
-      <DialogTrigger>
+      <DialogTrigger asChild>
         <TooltipProvider>
           <Tooltip>
             <TooltipTrigger asChild>
diff --git a/tsconfig.json b/tsconfig.json
@@ -15,7 +15,7 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
@@ -35,9 +35,11 @@
     "**/*.ts",
     ".next/types/**/*.ts",
     "**/*.tsx",
-    "out/types/**/*.ts"
-, "scripts/generateManifest.mjs"  ],
+    "out/types/**/*.ts",
+    "scripts/generateManifest.mjs",
+    ".next/dev/types/**/*.ts"
+  ],
   "exclude": [
     "node_modules"
   ]
-}
+}
