fix: align zustand equality hooks and enforce import ordering

Signed-off-by: tirth707 <ptirth2206@gmail.com>

Author: tirth707

src/App.tsx

@@ -2,11 +2,12 @@ import { useEffect, useState } from "react";
 import { App as AntdApp, Layout, Spin } from "antd";
 import { LoadingOutlined } from "@ant-design/icons";
 import { Routes, Route, useSearchParams, useNavigate } from "react-router-dom";
+import { shallow } from "zustand/shallow";
+import { useStoreWithEqualityFn } from "zustand/traditional";
 import Navbar from "./components/Navbar";
 import tour from "./components/Tour";
 import LearnNow from "./pages/LearnNow";
 import useAppStore from "./store/store";
-import { shallow } from "zustand/shallow";
 import LearnContent from "./components/Content";
 import MainContainer from "./pages/MainContainer";
 import PlaygroundSidebar from "./components/PlaygroundSidebar";
@@ -20,7 +21,8 @@ const App = () => {
   const init = useAppStore((state) => state.init);
   const loadFromLink = useAppStore((state) => state.loadFromLink);
 
-  const { isAIConfigOpen, setAIConfigOpen } = useAppStore(
+  const { isAIConfigOpen, setAIConfigOpen } = useStoreWithEqualityFn(
+    useAppStore,
     (state) => ({
       isAIConfigOpen: state.isAIConfigOpen,
       setAIConfigOpen: state.setAIConfigOpen,

src/editors/ConcertoEditor.tsx

@@ -1,8 +1,9 @@
 import { useMonaco } from "@monaco-editor/react";
 import { lazy, Suspense, useEffect, useMemo, useRef, useCallback } from "react";
 import * as monaco from "monaco-editor";
-import useAppStore from "../store/store";
 import { shallow } from "zustand/shallow";
+import { useStoreWithEqualityFn } from "zustand/traditional";
+import useAppStore from "../store/store";
 import { useCodeSelection } from "../components/CodeSelectionMenu";
 import { registerAutocompletion } from "../ai-assistant/autocompletion";
 
@@ -93,7 +94,8 @@ export default function ConcertoEditor({ value, onChange }: ConcertoEditorProps)
   const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
   const decorationsCollectionRef = useRef<monaco.editor.IEditorDecorationsCollection | null>(null);
 
-  const { error, backgroundColor, aiConfig, showLineNumbers } = useAppStore(
+  const { error, backgroundColor, aiConfig, showLineNumbers } = useStoreWithEqualityFn(
+    useAppStore,
     (state) => ({
       error: state.error,
       backgroundColor: state.backgroundColor,