restructure components, fix search issue and add react compiler

SKarajic · SKarajic · commit dc515b82116c · 2026-03-14T04:11:23.000+09:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,30 +18,36 @@
     "@react-router/serve": "^7.13.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "i18next": "^25.8.18",
     "isbot": "^5.1.35",
     "lucide-react": "^0.577.0",
     "object-path": "^0.11.8",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
+    "react-i18next": "^16.5.8",
     "react-router": "^7.13.1",
     "tailwind-merge": "^3.5.0",
     "vaul": "^1.1.2",
     "zod": "^4.3.6"
   },
   "devDependencies": {
+    "@babel/preset-typescript": "^7.28.5",
     "@biomejs/biome": "^2.4.6",
     "@react-router/dev": "^7.13.1",
     "@tailwindcss/vite": "^4.2.1",
     "@types/node": "^25.4.0",
     "@types/object-path": "^0.11.4",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
+    "babel-plugin-react-compiler": "^1.0.0",
     "picocolors": "^1.1.1",
+    "react-router-devtools": "^6.2.0",
     "shadcn": "^4.0.3",
     "tailwindcss": "^4.2.1",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
+    "vite-plugin-babel": "^1.5.1",
     "vite-tsconfig-paths": "^6.1.1"
   }
 }
diff --git a/src/app.tsx b/src/app.tsx
@@ -1,6 +1,5 @@
 import { AppWindowIcon, CodeIcon } from "lucide-react";
-import React, { Suspense } from "react";
-import { FileExplorer } from "@/components/features/file-explorer/file-explorer";
+import { FileExplorer } from "@/components/features/file-explorer";
 import { Hero } from "@/components/global/hero";
 import { Main } from "@/components/global/main";
 import { NavBar } from "@/components/global/navbar";
@@ -11,10 +10,7 @@ import { SearchProvider } from "@/contexts/search";
 import { SettingsProvider } from "@/contexts/settings";
 import { ThemeProvider } from "@/contexts/theme";
 import { parseTemplate } from "@/lib/client/nginx";
-
-const SettingsMenu = React.lazy(
-  () => import("./components/global/settings-menu"),
-);
+import { Settings } from "./components/global/settings";
 
 const App: React.FC = () => {
   const { path, files } = parseTemplate();
@@ -24,9 +20,7 @@ const App: React.FC = () => {
       <SettingsProvider>
         <ThemeProvider storageKey={import.meta.env.VITE_THEME_STORAGE_KEY}>
           <SearchProvider debounceMs={500} initialMode="local">
-            <Suspense>
-              <SettingsMenu />
-            </Suspense>
+            <Settings />
             <NavBar />
             <Hero />
             <Main path={path}>
diff --git a/src/components/features/file-explorer/components/file-explorer.tsx b/src/components/features/file-explorer/components/file-explorer.tsx
@@ -0,0 +1,24 @@
+import { useSearch } from "@/hooks/search";
+import { FileTable } from "./file-table";
+import { SearchResultTable } from "./search-result-table";
+import { useEffect, useState } from "react";
+
+export const FileExplorer: React.FC = () => {
+  const { query } = useSearch();
+  const [active, setActive] = useState(() => query.trim().length > 0);
+
+  useEffect(() => {
+    setActive(query.trim().length > 0);
+  }, [query]);
+
+  return (
+    <>
+      <div className={active ? "hidden" : ""}>
+        <FileTable />
+      </div>
+      <div className={active ? "" : "hidden"}>
+        <SearchResultTable />
+      </div>
+    </>
+  )
+};
diff --git a/src/components/features/file-explorer/components/file-table.tsx b/src/components/features/file-explorer/components/file-table.tsx
diff --git a/src/components/features/file-explorer/components/search-result-table.tsx b/src/components/features/file-explorer/components/search-result-table.tsx
diff --git a/src/components/features/file-explorer/file-explorer.tsx b/src/components/features/file-explorer/file-explorer.tsx
diff --git a/src/components/features/file-explorer/index.ts b/src/components/features/file-explorer/index.ts
@@ -0,0 +1 @@
+export { FileExplorer } from "./components/file-explorer";
diff --git a/src/components/global/search.tsx b/src/components/global/search.tsx
@@ -17,10 +17,8 @@ export const Search: React.FC = () => {
   }, [query]);
 
   useEffect(() => {
-    if (search !== query) {
-      setQuery(search);
-    }
-  }, [search, query, setQuery]);
+    setQuery(search);
+  }, [search, setQuery]);
 
   const id = useId();
 
diff --git a/src/components/global/settings/components/settings-drawer.tsx b/src/components/global/settings/components/settings-drawer.tsx
@@ -24,7 +24,7 @@ interface CheckboxFieldProps {
   update: (key: string, value: unknown) => unknown;
 }
 
-export const SettingsMenu: React.FC = () => {
+export const SettingsDrawer: React.FC = () => {
   const { settings, update, active, toggle } = useSettings();
 
   return (
@@ -95,5 +95,3 @@ const CheckboxField: React.FC<CheckboxFieldProps> = ({
     </FieldLabel>
   </Field>
 );
-
-export default SettingsMenu;
diff --git a/src/components/global/settings/components/suspense-wrapper.tsx b/src/components/global/settings/components/suspense-wrapper.tsx
@@ -0,0 +1,20 @@
+import { Suspense, useEffect, useState } from "react";
+import { useSettings } from "@/hooks/settings";
+import type { SettingsDrawer } from "./settings-drawer";
+
+export const SuspenseWrapper: React.FC = () => {
+  const { active } = useSettings();
+  const [Component, setComponent] = useState<typeof SettingsDrawer | null>(
+    null,
+  );
+
+  useEffect(() => {
+    if (active && !Component) {
+      import("./settings-drawer").then((mod) =>
+        setComponent(() => mod.SettingsDrawer),
+      );
+    }
+  }, [active, Component]);
+
+  return <Suspense>{Component && <Component />}</Suspense>;
+};
diff --git a/src/components/global/settings/index.ts b/src/components/global/settings/index.ts
@@ -0,0 +1 @@
+export { SuspenseWrapper as Settings } from "./components/suspense-wrapper";
diff --git a/src/root.tsx b/src/root.tsx
@@ -31,7 +31,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
         <script
           /** biome-ignore lint/security/noDangerouslySetInnerHtml: inline scripts */
           dangerouslySetInnerHTML={{
-            __html: `
+            __html: /* js */ `
           (function() {
             try {
               var settingsStorageKey = '${import.meta.env.VITE_SETTINGS_STORAGE_KEY}';
diff --git a/tsconfig.json b/tsconfig.json
@@ -8,8 +8,8 @@
   "compilerOptions": {
     "lib": ["DOM", "DOM.Iterable", "ES2022"],
     "types": ["node", "vite/client"],
-    "target": "ES2022",
-    "module": "ES2022",
+    "target": "es2022",
+    "module": "esnext",
     "moduleResolution": "bundler",
     "jsx": "react-jsx",
     "rootDirs": [".", "./.react-router/types"],
diff --git a/vite.config.ts b/vite.config.ts
@@ -1,12 +1,27 @@
 import path from "node:path";
 import { reactRouter } from "@react-router/dev/vite";
 import tailwindcss from "@tailwindcss/vite";
+import { reactRouterDevTools } from "react-router-devtools";
 import { defineConfig } from "vite";
+import babel from "vite-plugin-babel";
 import tsconfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig(({ command }) => ({
   base: command === "build" ? "/.theme/" : "/",
-  plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
+  plugins: [
+    babel({
+      filter: /\.[jt]sx?$/,
+      babelConfig: {
+        presets: ["@babel/preset-typescript"],
+        plugins: ["babel-plugin-react-compiler"],
+      },
+    }),
+    tailwindcss(),
+    reactRouterDevTools(),
+    reactRouter(),
+
+    tsconfigPaths(),
+  ],
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "./src"),

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export { FileExplorer } from "./components/file-explorer";`