chore: Refactor route components for better organization and consistency

src/routes/chrome.tsx

@@ -0,0 +1,35 @@
+import { Route, Routes } from "react-router-dom"
+import OptionIndex from "./option-index"
+import OptionSettings from "./option-settings"
+import OptionModal from "./option-settings-model"
+import OptionPrompt from "./option-settings-prompt"
+import OptionOllamaSettings from "./options-settings-ollama"
+import OptionShare from "./option-settings-share"
+import OptionKnowledgeBase from "./option-settings-knowledge"
+import OptionAbout from "./option-settings-about"
+import SidepanelChat from "./sidepanel-chat"
+import SidepanelSettings from "./sidepanel-settings"
+
+export const OptionRoutingChrome = () => {
+  return (
+    <Routes>
+      <Route path="/" element={<OptionIndex />} />
+      <Route path="/settings" element={<OptionSettings />} />
+      <Route path="/settings/model" element={<OptionModal />} />
+      <Route path="/settings/prompt" element={<OptionPrompt />} />
+      <Route path="/settings/ollama" element={<OptionOllamaSettings />} />
+      <Route path="/settings/share" element={<OptionShare />} />
+      <Route path="/settings/knowledge" element={<OptionKnowledgeBase />} />
+      <Route path="/settings/about" element={<OptionAbout />} />
+    </Routes>
+  )
+}
+
+export const SidepanelRoutingChrome = () => {
+  return (
+    <Routes>
+      <Route path="/" element={<SidepanelChat />} />
+      <Route path="/settings" element={<SidepanelSettings />} />
+    </Routes>
+  )
+}

src/routes/firefox.tsx

@@ -0,0 +1,39 @@
+// this is a temp fix for firefox
+// because chunks getting 4mb+ and it's not working on firefox addon store
+import { lazy } from "react"
+import { Route , Routes} from "react-router-dom"
+
+const SidepanelChat = lazy(() => import("./sidepanel-chat"))
+const SidepanelSettings = lazy(() => import("./sidepanel-settings"))
+const OptionIndex = lazy(() => import("./option-index"))
+const OptionModal = lazy(() => import("./option-settings-model"))
+const OptionPrompt = lazy(() => import("./option-settings-prompt"))
+const OptionOllamaSettings = lazy(() => import("./options-settings-ollama"))
+const OptionSettings = lazy(() => import("./option-settings"))
+const OptionShare = lazy(() => import("./option-settings-share"))
+const OptionKnowledgeBase = lazy(() => import("./option-settings-knowledge"))
+const OptionAbout = lazy(() => import("./option-settings-about"))
+
+export const OptionRoutingFirefox = () => {
+  return (
+    <Routes>
+      <Route path="/" element={<OptionIndex />} />
+      <Route path="/settings" element={<OptionSettings />} />
+      <Route path="/settings/model" element={<OptionModal />} />
+      <Route path="/settings/prompt" element={<OptionPrompt />} />
+      <Route path="/settings/ollama" element={<OptionOllamaSettings />} />
+      <Route path="/settings/share" element={<OptionShare />} />
+      <Route path="/settings/knowledge" element={<OptionKnowledgeBase />} />
+      <Route path="/settings/about" element={<OptionAbout />} />
+    </Routes>
+  )
+}
+
+export const SidepanelRoutingFirefox = () => {
+  return (
+    <Routes>
+      <Route path="/" element={<SidepanelChat />} />
+      <Route path="/settings" element={<SidepanelSettings />} />
+    </Routes>
+  )
+}

src/routes/index.tsx

@@ -1,16 +1,9 @@
-import { Route, Routes } from "react-router-dom"
-import { SidepanelChat } from "./sidepanel-chat"
-import { useDarkMode } from "~/hooks/useDarkmode"
-import { SidepanelSettings } from "./sidepanel-settings"
-import { OptionIndex } from "./option-index"
-import { OptionModal } from "./option-settings-model"
-import { OptionPrompt } from "./option-settings-prompt"
-import { OptionOllamaSettings } from "./options-settings-ollama"
-import { OptionSettings } from "./option-settings"
-import { OptionShare } from "./option-settings-share"
-import { OptionKnowledgeBase } from "./option-settings-knowledge"
-import { OptionAbout } from "./option-settings-about"
+import { Suspense } from "react"
 import { useTranslation } from "react-i18next"
+import { useDarkMode } from "~/hooks/useDarkmode"
+import { Skeleton } from "antd"
+import { OptionRoutingChrome, SidepanelRoutingChrome } from "./chrome"
+import { OptionRoutingFirefox, SidepanelRoutingFirefox } from "./firefox"
 
 export const OptionRouting = () => {
   const { mode } = useDarkMode()
@@ -21,16 +14,13 @@ export const OptionRouting = () => {
       className={`${mode === "dark" ? "dark" : "light"} ${
         i18n.language === "ru" ? "onest" : "inter"
       }`}>
-      <Routes>
-        <Route path="/" element={<OptionIndex />} />
-        <Route path="/settings" element={<OptionSettings />} />
-        <Route path="/settings/model" element={<OptionModal />} />
-        <Route path="/settings/prompt" element={<OptionPrompt />} />
-        <Route path="/settings/ollama" element={<OptionOllamaSettings />} />
-        <Route path="/settings/share" element={<OptionShare />} />
-        <Route path="/settings/knowledge" element={<OptionKnowledgeBase />} />
-        <Route path="/settings/about" element={<OptionAbout />} />
-      </Routes>
+      <Suspense fallback={<Skeleton />}>
+          {import.meta.env.BROWSER === "chrome" ? (
+            <OptionRoutingChrome />
+          ) : (
+            <OptionRoutingFirefox />
+          )}
+      </Suspense>
     </div>
   )
 }
@@ -44,10 +34,13 @@ export const SidepanelRouting = () => {
       className={`${mode === "dark" ? "dark" : "light"} ${
         i18n.language === "ru" ? "onest" : "inter"
       }`}>
-      <Routes>
-        <Route path="/" element={<SidepanelChat />} />
-        <Route path="/settings" element={<SidepanelSettings />} />
-      </Routes>
+      <Suspense fallback={<Skeleton />}>
+          {import.meta.env.BROWSER === "chrome" ? (
+            <SidepanelRoutingChrome />
+          ) : (
+            <SidepanelRoutingFirefox />
+          )}
+      </Suspense>
     </div>
   )
 }

src/routes/option-index.tsx

@@ -1,10 +1,12 @@
 import OptionLayout from "~/components/Layouts/Layout"
 import { Playground } from "~/components/Option/Playground/Playground"
 
-export const OptionIndex = () => {
+ const OptionIndex = () => {
   return (
     <OptionLayout>
       <Playground />
     </OptionLayout>
   )
 }
+
+export default OptionIndex

src/routes/option-settings-about.tsx

@@ -2,7 +2,7 @@ import { SettingsLayout } from "~/components/Layouts/SettingsOptionLayout"
 import OptionLayout from "~/components/Layouts/Layout"
 import { AboutApp } from "@/components/Option/Settings/about"
 
-export const OptionAbout = () => {
+const OptionAbout = () => {
   return (
     <OptionLayout>
       <SettingsLayout>
@@ -11,3 +11,5 @@ export const OptionAbout = () => {
     </OptionLayout>
   )
 }
+
+export default OptionAbout

src/routes/option-settings-knowledge.tsx

@@ -2,7 +2,7 @@ import { SettingsLayout } from "~/components/Layouts/SettingsOptionLayout"
 import OptionLayout from "~/components/Layouts/Layout"
 import { KnowledgeSettings } from "@/components/Option/Knowledge"
 
-export const OptionKnowledgeBase = () => {
+ const OptionKnowledgeBase = () => {
   return (
     <OptionLayout>
       <SettingsLayout>
@@ -11,3 +11,5 @@ export const OptionKnowledgeBase = () => {
     </OptionLayout>
   )
 }
+
+export default OptionKnowledgeBase

src/routes/option-settings-model.tsx

@@ -2,7 +2,7 @@ import { SettingsLayout } from "~/components/Layouts/SettingsOptionLayout"
 import OptionLayout from "~/components/Layouts/Layout"
 import { ModelsBody } from "~/components/Option/Models"
 
-export const OptionModal = () => {
+const OptionModal = () => {
   return (
     <OptionLayout>
       <SettingsLayout>
@@ -11,3 +11,5 @@ export const OptionModal = () => {
     </OptionLayout>
   )
 }
+
+export default OptionModal

src/routes/option-settings-prompt.tsx

@@ -2,7 +2,7 @@ import { SettingsLayout } from "~/components/Layouts/SettingsOptionLayout"
 import OptionLayout from "~/components/Layouts/Layout"
 import { PromptBody } from "~/components/Option/Prompt"
 
-export const OptionPrompt = () => {
+ const OptionPrompt = () => {
   return (
     <OptionLayout>
       <SettingsLayout>
@@ -11,3 +11,5 @@ export const OptionPrompt = () => {
     </OptionLayout>
   )
 }
+
+export default OptionPrompt

src/routes/option-settings-share.tsx

@@ -2,7 +2,7 @@ import { SettingsLayout } from "~/components/Layouts/SettingsOptionLayout"
 import OptionLayout from "~/components/Layouts/Layout"
 import { OptionShareBody } from "~/components/Option/Share"
 
-export const OptionShare = () => {
+ const OptionShare = () => {
   return (
     <OptionLayout>
       <SettingsLayout>
@@ -11,3 +11,5 @@ export const OptionShare = () => {
     </OptionLayout>
   )
 }
+
+export default OptionShare

src/routes/option-settings.tsx

@@ -2,7 +2,7 @@ import { SettingsLayout } from "~/components/Layouts/SettingsOptionLayout"
 import OptionLayout from "~/components/Layouts/Layout"
 import { SettingOther } from "~/components/Option/Settings/other"
 
-export const OptionSettings = () => {
+ const OptionSettings = () => {
   return (
     <OptionLayout>
       <SettingsLayout>
@@ -11,3 +11,5 @@ export const OptionSettings = () => {
     </OptionLayout>
   )
 }
+
+export default OptionSettings

src/routes/options-settings-ollama.tsx

@@ -2,7 +2,7 @@ import { SettingsLayout } from "~/components/Layouts/SettingsOptionLayout"
 import OptionLayout from "~/components/Layouts/Layout"
 import { SettingsOllama } from "~/components/Option/Settings/ollama"
 
-export const OptionOllamaSettings = () => {
+ const OptionOllamaSettings = () => {
   return (
     <OptionLayout>
       <SettingsLayout>
@@ -11,3 +11,5 @@ export const OptionOllamaSettings = () => {
     </OptionLayout>
   )
 }
+
+export default OptionOllamaSettings

src/routes/sidepanel-chat.tsx

@@ -4,7 +4,7 @@ import { SidepanelForm } from "~/components/Sidepanel/Chat/form"
 import { SidepanelHeader } from "~/components/Sidepanel/Chat/header"
 import { useMessage } from "~/hooks/useMessage"
 
-export const SidepanelChat = () => {
+ const SidepanelChat = () => {
   const drop = React.useRef<HTMLDivElement>(null)
   const [dropedFile, setDropedFile] = React.useState<File | undefined>()
   const [dropState, setDropState] = React.useState<
@@ -90,3 +90,5 @@ export const SidepanelChat = () => {
     </div>
   )
 }
+
+export default SidepanelChat

src/routes/sidepanel-settings.tsx

@@ -1,7 +1,7 @@
 import { SettingsBody } from "~/components/Sidepanel/Settings/body"
 import { SidepanelSettingsHeader } from "~/components/Sidepanel/Settings/header"
 
-export const SidepanelSettings = () => {
+const SidepanelSettings = () => {
   return (
     <div className="flex bg-neutral-50 dark:bg-[#171717] flex-col min-h-screen mx-auto max-w-7xl">
       <div className="sticky bg-white dark:bg-[#171717] top-0 z-10">
@@ -11,3 +11,5 @@ export const SidepanelSettings = () => {
     </div>
   )
 }
+
+export default SidepanelSettings