refactor: small refactor

Author: vwh

src/App.tsx

@@ -1,51 +1,42 @@
 import { useEffect } from "react";
-import { useStore } from "./store/useStore";
+import { useStore } from "@/store/useStore";
 
-import { getDecodedParam } from "./lib/url";
+import { getDecodedParam } from "@/lib/url";
 
-import Editor from "./components/editor/editor";
-import ButtonsNav from "./components/nav-buttons";
-import Stats from "./components/editor/stats";
-import Terminal from "./components/editor/terminal";
+import Editor from "@/components/editor/editor";
+import ButtonsNav from "@/components/nav-buttons";
+import Stats from "@/components/editor/stats";
+import Terminal from "@/components/editor/terminal";
 import {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup
-} from "./components/ui/resizable";
+} from "@/components/ui/resizable";
 
-function App() {
+export default function App() {
   const { direction, setCode, initializePyodide, isPyodideLoading } =
     useStore();
 
   // Initialize Pyodide and ( set the code from URL params if present )
   useEffect(() => {
-    initializePyodide();
+    const initializeApp = async () => {
+      await initializePyodide();
 
-    const urlParams = new URLSearchParams(window.location.search);
-    const encodedParam = urlParams.get("v");
-    if (encodedParam) {
-      const decodedCode = getDecodedParam(encodedParam);
-      if (decodedCode) {
-        setCode(decodedCode);
+      const urlParams = new URLSearchParams(window.location.search);
+      const encodedParam = urlParams.get("v");
+      if (encodedParam) {
+        const decodedCode = getDecodedParam(encodedParam);
+        if (decodedCode) {
+          setCode(decodedCode);
+        }
       }
-    }
+    };
+
+    initializeApp();
   }, [initializePyodide, setCode]);
 
   if (isPyodideLoading) {
-    return (
-      <section className="absolute z-[999] flex h-screen w-full flex-col items-center justify-center gap-3 bg-background text-foreground">
-        <div className="relative flex h-full w-full flex-col items-center justify-center overflow-hidden bg-background md:shadow-xl">
-          <img
-            src="./images/logo.webp"
-            alt="logo"
-            className="h-52 w-52 animate-pulse"
-          />
-          <p className="sm:text-1xl mt-2 animate-pulse whitespace-pre-wrap text-center text-xl font-semibold tracking-tighter text-white">
-            Loading WebAssembly
-          </p>
-        </div>
-      </section>
-    );
+    return <LoadingScreen />;
   }
 
   return (
@@ -68,4 +59,19 @@ function App() {
   );
 }
 
-export default App;
+function LoadingScreen() {
+  return (
+    <section className="absolute z-[999] flex h-screen w-full flex-col items-center justify-center gap-3 bg-background text-foreground">
+      <div className="relative flex h-full w-full flex-col items-center justify-center overflow-hidden bg-background md:shadow-xl">
+        <img
+          src="./images/logo.webp"
+          alt="logo"
+          className="h-52 w-52 animate-pulse"
+        />
+        <p className="sm:text-1xl mt-2 animate-pulse whitespace-pre-wrap text-center text-xl font-semibold tracking-tighter text-white">
+          Loading WebAssembly
+        </p>
+      </div>
+    </section>
+  );
+}

src/components/editor/stats.tsx

@@ -9,7 +9,7 @@ interface CodeStats {
   characters: number;
 }
 
-const Stats = () => {
+export default function Stats() {
   const { code } = useStore();
 
   const stats: CodeStats = useMemo(
@@ -42,24 +42,22 @@ const Stats = () => {
       </div>
     </div>
   );
-};
+}
 
-const StatItem = ({
-  icon,
-  value,
-  label
-}: {
+interface StatItemProps {
   icon: React.ReactNode;
   value: number;
   label: string;
-}) => (
-  <div className="flex items-center gap-1 space-x-1">
-    <div className="flex items-center space-x-1">
-      {icon}
-      <span className="font-medium">{value}</span>
-    </div>
-    <span className="text-xs text-foreground/55">{label}</span>
-  </div>
-);
+}
 
-export default Stats;
+function StatItem({ icon, value, label }: StatItemProps) {
+  return (
+    <div className="flex items-center gap-1 space-x-1">
+      <div className="flex items-center space-x-1">
+        {icon}
+        <span className="font-medium">{value}</span>
+      </div>
+      <span className="text-xs text-foreground/55">{label}</span>
+    </div>
+  );
+}

src/components/editor/terminal.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState, useRef, useCallback, useMemo } from "react";
 import { useStore } from "@/store/useStore";
+
 import Loader from "@/components/loader";
 
 interface CommandHandlers {
@@ -26,6 +27,7 @@ export default function Terminal() {
     }
   }, []);
 
+  // Scroll to bottom on output change
   useEffect(() => {
     scrollToBottom();
   }, [output, scrollToBottom]);

src/components/loader.tsx

@@ -1,6 +1,10 @@
 import { LoaderCircleIcon } from "lucide-react";
 
-export default function Loader({ text }: { text: string }) {
+interface LoaderProps {
+  text: string;
+}
+
+export default function Loader({ text }: LoaderProps) {
   return (
     <div className="flex items-center gap-1 text-foreground">
       <LoaderCircleIcon className="h-5 w-5 animate-spin" />

src/components/settings.tsx

@@ -21,15 +21,19 @@ import {
   LoaderIcon
 } from "lucide-react";
 
-const SettingsSection: React.FC<{
+interface SettingsSectionProps {
   title: string;
   children: React.ReactNode;
-}> = ({ title, children }) => (
-  <div>
-    <p className="mb-1 text-sm text-muted-foreground">{title}</p>
-    <div className="flex flex-col gap-1">{children}</div>
-  </div>
-);
+}
+
+function SettingsSection({ title, children }: SettingsSectionProps) {
+  return (
+    <div>
+      <p className="mb-1 text-sm text-muted-foreground">{title}</p>
+      <div className="flex flex-col gap-1">{children}</div>
+    </div>
+  );
+}
 
 export default function Settings() {
   const { code, pipInstall, isLibLoading } = useStore();

src/main.tsx

@@ -1,10 +1,11 @@
+import "@/globals.css";
+
 import React from "react";
 import ReactDOM from "react-dom/client";
-import "./globals.css";
 
-import App from "./App.tsx";
+import App from "@/App.tsx";
 
-ReactDOM.createRoot(document.getElementById("root")!).render(
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>