Migrate layout

app/src/components/layout/Header.tsx

@@ -4,7 +4,7 @@ import UserMenu from '../navigation/UserMenu';
 import WorkspaceSwitcher from '../navigation/WorkspaceSwitcher';
 import WorkspaceSettings from '../settings/workspace/WorkspaceSettings';
 
-const Header = () => {
+const Header: React.FC = () => {
   return (
     <Group justify="space-between" h={60} px="md">
       <Text fw={700} size="lg">

app/src/components/layout/Layout.tsx

@@ -7,7 +7,7 @@ import { useFileNavigation } from '../../hooks/useFileNavigation';
 import { useFileList } from '../../hooks/useFileList';
 import { useWorkspace } from '../../contexts/WorkspaceContext';
 
-const Layout = () => {
+const Layout: React.FC = () => {
   const { currentWorkspace, loading: workspaceLoading } = useWorkspace();
   const { selectedFile, handleFileSelect } = useFileNavigation();
   const { files, loadFileList } = useFileList();

app/src/components/layout/MainContent.tsx

@@ -10,11 +10,21 @@ import CommitMessageModal from '../modals/git/CommitMessageModal';
 import { useFileContent } from '../../hooks/useFileContent';
 import { useFileOperations } from '../../hooks/useFileOperations';
 import { useGitOperations } from '../../hooks/useGitOperations';
-import { useWorkspace } from '../../contexts/WorkspaceContext';
 
-const MainContent = ({ selectedFile, handleFileSelect, loadFileList }) => {
-  const [activeTab, setActiveTab] = useState('source');
-  const { settings } = useWorkspace();
+type ViewTab = 'source' | 'preview';
+
+interface MainContentProps {
+  selectedFile: string | null;
+  handleFileSelect: (filePath: string | null) => Promise<void>;
+  loadFileList: () => Promise<void>;
+}
+
+const MainContent: React.FC<MainContentProps> = ({
+  selectedFile,
+  handleFileSelect,
+  loadFileList,
+}) => {
+  const [activeTab, setActiveTab] = useState<ViewTab>('source');
   const {
     content,
     hasUnsavedChanges,
@@ -22,15 +32,17 @@ const MainContent = ({ selectedFile, handleFileSelect, loadFileList }) => {
     handleContentChange,
   } = useFileContent(selectedFile);
   const { handleSave, handleCreate, handleDelete } = useFileOperations();
-  const { handleCommitAndPush } = useGitOperations(settings.gitEnabled);
+  const { handleCommitAndPush } = useGitOperations();
 
-  const handleTabChange = useCallback((value) => {
-    setActiveTab(value);
+  const handleTabChange = useCallback((value: string | null): void => {
+    if (value) {
+      setActiveTab(value as ViewTab);
+    }
   }, []);
 
   const handleSaveFile = useCallback(
-    async (filePath, content) => {
-      let success = await handleSave(filePath, content);
+    async (filePath: string, fileContent: string): Promise<boolean> => {
+      let success = await handleSave(filePath, fileContent);
       if (success) {
         setHasUnsavedChanges(false);
       }
@@ -40,22 +52,22 @@ const MainContent = ({ selectedFile, handleFileSelect, loadFileList }) => {
   );
 
   const handleCreateFile = useCallback(
-    async (fileName) => {
+    async (fileName: string): Promise<void> => {
       const success = await handleCreate(fileName);
       if (success) {
-        loadFileList();
-        handleFileSelect(fileName);
+        await loadFileList();
+        await handleFileSelect(fileName);
       }
     },
     [handleCreate, handleFileSelect, loadFileList]
   );
 
   const handleDeleteFile = useCallback(
-    async (filePath) => {
+    async (filePath: string): Promise<void> => {
       const success = await handleDelete(filePath);
       if (success) {
-        loadFileList();
-        handleFileSelect(null);
+        await loadFileList();
+        await handleFileSelect(null);
       }
     },
     [handleDelete, handleFileSelect, loadFileList]

app/src/components/layout/Sidebar.tsx

@@ -4,10 +4,23 @@ import FileActions from '../files/FileActions';
 import FileTree from '../files/FileTree';
 import { useGitOperations } from '../../hooks/useGitOperations';
 import { useWorkspace } from '../../contexts/WorkspaceContext';
+import { FileNode } from '@/types/fileApi';
 
-const Sidebar = ({ selectedFile, handleFileSelect, files, loadFileList }) => {
+interface SidebarProps {
+  selectedFile: string | null;
+  handleFileSelect: (filePath: string | null) => Promise<void>;
+  files: FileNode[];
+  loadFileList: () => Promise<void>;
+}
+
+const Sidebar: React.FC<SidebarProps> = ({
+  selectedFile,
+  handleFileSelect,
+  files,
+  loadFileList,
+}) => {
   const { settings } = useWorkspace();
-  const { handlePull } = useGitOperations(settings.gitEnabled);
+  const { handlePull } = useGitOperations();
 
   useEffect(() => {
     loadFileList();
@@ -28,7 +41,7 @@ const Sidebar = ({ selectedFile, handleFileSelect, files, loadFileList }) => {
       <FileTree
         files={files}
         handleFileSelect={handleFileSelect}
-        showHiddenFiles={settings.showHiddenFiles}
+        showHiddenFiles={settings.showHiddenFiles || false}
       />
     </Box>
   );