chore: small changes to improve code quality and readability

src/components/Header.tsx

@@ -4,8 +4,6 @@ import { useOpenFiles } from "@/hooks/useOpenFiles"
 export function Header() {
   const { currentOpenFile } = useOpenFiles()
 
-  const openFileName = currentOpenFile()
-
   return (
     <div className="flex items-center justify-between px-3">
       <div className="flex items-center gap-2">
@@ -14,7 +12,7 @@ export function Header() {
         <button type="button" className="w-3 h-3 bg-[#61C554] rounded-full" />
       </div>
       <span className="text-[#908caa] text-sm">
-        {openFileName && `${openFileName.title} — `}fala-dev
+        {currentOpenFile && `${currentOpenFile.title} — `}fala-dev
       </span>
       <div className="w-14">&nbsp;</div>
     </div>

src/components/OpenFilesTabs/CloseFileButton.tsx

@@ -30,10 +30,8 @@ export function CloseFileButton({ isActive, index }: CloseFileButtonProps) {
   }
 
   return (
-    <a
-      onClick={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
+    <button
+      onClick={() => {
         closeFile(index);
       }}
       className="w-[20px] h-[20px] flex justify-center items-center rounded hover:bg-[#817c9c26]"
@@ -43,6 +41,6 @@ export function CloseFileButton({ isActive, index }: CloseFileButtonProps) {
         className="data-[active=true]:text-white"
         size={16}
       />
-    </a>
+    </button>
   )
 }

src/components/OpenFilesTabs/index.tsx

@@ -16,11 +16,7 @@ export function OpenFilesTabs() {
         const isActive = pathName === openFile;
 
         const file = explorerFiles[openFile];
-
-        if (!file) {
-          return <></>;
-        }
-
+
         return (
           <div
             key={index}

src/hooks/useOpenFiles.tsx

@@ -1,27 +1,23 @@
 "use client";
-import { createContext, useContext, useEffect, useState } from "react";
-import { LinkProps } from "next/link";
+import { createContext, useContext, useMemo, useState } from "react";
 import { usePathname } from "next/navigation";
 import { explorerFiles, FileType } from "@/components/Explorer";
 
 type OpenFilesContextProps = {
   openFiles: string[];
   markFileAsOpen: (tab: string) => void;
   closeFile: (tabIndex: number) => void;
-  currentOpenFile: () => FileType | null;
+  currentOpenFile: FileType | null;
 };
 
 const OpenFilesContext = createContext({} as OpenFilesContextProps);
 
 export function OpenFilesProvider({ children }: { children: React.ReactNode }) {
   const pathName = usePathname();
 
-  const [openFiles, setOpenFiles] = useState<string[]>(() => {
-    if (pathName) {
-      const openTab = explorerFiles[pathName];
-      if (openTab) {
-        return [pathName];
-      }
+  const [openFiles, setOpenFiles] = useState<Array<keyof typeof explorerFiles>>(() => {
+    if (pathName && pathName !== '/') {
+      return [pathName];
     }
 
     return [];
@@ -32,21 +28,23 @@ export function OpenFilesProvider({ children }: { children: React.ReactNode }) {
       return;
     }
 
-    setOpenFiles([...openFiles, file]);
+    setOpenFiles(state => [...state, file]);
   };
 
   const closeFile = (fileIndex: number) => {
     const newOpenFiles = openFiles.filter((_, index) => index !== fileIndex);
     setOpenFiles(newOpenFiles);
   };
 
-  const currentOpenFile = () => {
+  const currentOpenFile = useMemo(() => {
     const openFileHref = openFiles.find((openFile) => pathName === openFile);
+
     if (openFileHref) {
       return explorerFiles[openFileHref];
     }
+
     return null;
-  };
+  }, [openFiles, pathName])
 
   return (
     <OpenFilesContext.Provider