Add no file selected text

frontend/src/components/ContentView.js

@@ -1,18 +1,35 @@
 import React from 'react';
 import Editor from './Editor';
 import MarkdownPreview from './MarkdownPreview';
-import { getFileUrl } from '../services/api';
+import { Text } from '@geist-ui/core';
+import { getFileUrl, lookupFileByName } from '../services/api';
 import { isImageFile } from '../utils/fileHelpers';
 import { useFileContentContext } from '../contexts/FileContentContext';
+import { useUIStateContext } from '../contexts/UIStateContext';
+import { useSettings } from '../contexts/SettingsContext';
+import { useFileNavigation } from '../hooks/useFileNavigation';
 
-const ContentView = ({
+const ContentView = () => {
-  activeTab,
-  themeType,
-  onLinkClick,
-  lookupFileByName,
-}) => {
   const { content, selectedFile, handleContentChange, handleSave } =
     useFileContentContext();
+  const { activeTab } = useUIStateContext();
+  const { settings } = useSettings();
+  const { handleLinkClick } = useFileNavigation();
+
+  if (!selectedFile) {
+    return (
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: '100%',
+        }}
+      >
+        <Text h3>No file selected.</Text>
+      </div>
+    );
+  }
 
   if (isImageFile(selectedFile)) {
     return (
@@ -36,13 +53,13 @@ const ContentView = ({
       onChange={handleContentChange}
       onSave={handleSave}
       filePath={selectedFile}
-      themeType={themeType}
+      themeType={settings.theme}
     />
   ) : (
     <MarkdownPreview
       content={content}
       baseUrl={window.API_BASE_URL}
-      onLinkClick={onLinkClick}
+      onLinkClick={handleLinkClick}
       lookupFileByName={lookupFileByName}
     />
   );

frontend/src/components/MainContent.js

@@ -1,13 +1,5 @@
-// components/MainContent.js
 import React from 'react';
-import {
+import { Grid, Breadcrumbs, Tabs, Dot } from '@geist-ui/core';
-  Grid,
-  Breadcrumbs,
-  Tabs,
-  Dot,
-  useTheme,
-  useToasts,
-} from '@geist-ui/core';
 import { Code, Eye } from '@geist-ui/icons';
 import FileTree from './FileTree';
 import FileActions from './FileActions';
@@ -15,60 +7,19 @@ import ContentView from './ContentView';
 import CreateFileModal from './modals/CreateFileModal';
 import DeleteFileModal from './modals/DeleteFileModal';
 import CommitMessageModal from './modals/CommitMessageModal';
-import { useFileListContext } from '../contexts/FileListContext';
 import { useFileContentContext } from '../contexts/FileContentContext';
-import { useGitOperationsContext } from '../contexts/GitOperationsContext';
 import { useUIStateContext } from '../contexts/UIStateContext';
-import { useFileNavigation } from '../hooks/useFileNavigation';
 
 const MainContent = () => {
-  const { files } = useFileListContext();
   const { selectedFile, hasUnsavedChanges } = useFileContentContext();
-  const { pullLatestChanges } = useGitOperationsContext();
+  const { activeTab, setActiveTab } = useUIStateContext();
-  const {
-    activeTab,
-    setActiveTab,
-    newFileModalVisible,
-    setNewFileModalVisible,
-    deleteFileModalVisible,
-    setDeleteFileModalVisible,
-    commitMessageModalVisible,
-    setCommitMessageModalVisible,
-  } = useUIStateContext();
-  const { handleLinkClick } = useFileNavigation();
-  const { type: themeType } = useTheme();
-  const { setToast } = useToasts();
 
   const handleTabChange = (value) => {
     setActiveTab(value);
   };
 
-  const handlePull = async () => {
-    try {
-      await pullLatestChanges();
-      setToast({ text: 'Successfully pulled latest changes', type: 'success' });
-    } catch (error) {
-      setToast({
-        text: 'Failed to pull changes: ' + error.message,
-        type: 'error',
-      });
-    }
-  };
-
-  const handleCreateFile = () => {
-    setNewFileModalVisible(true);
-  };
-
-  const handleDeleteFile = () => {
-    setDeleteFileModalVisible(true);
-  };
-
-  const handleCommitAndPush = () => {
-    setCommitMessageModalVisible(true);
-  };
-
   const renderBreadcrumbs = () => {
-    if (!selectedFile) return null;
+    if (!selectedFile) return <div className="breadcrumbs-container"></div>;
     const pathParts = selectedFile.split('/');
     return (
       <div className="breadcrumbs-container">
@@ -89,13 +40,8 @@ const MainContent = () => {
       <Grid.Container gap={1} height="calc(100vh - 64px)">
         <Grid xs={24} sm={6} md={5} lg={4} height="100%" className="sidebar">
           <div className="file-tree-container">
-            <FileActions
+            <FileActions />
-              onPull={handlePull}
+            <FileTree />
-              onCommitAndPush={handleCommitAndPush}
-              onCreateFile={handleCreateFile}
-              onDeleteFile={handleDeleteFile}
-            />
-            <FileTree files={files} />
           </div>
         </Grid>
         <Grid
@@ -114,17 +60,13 @@ const MainContent = () => {
             </Tabs>
           </div>
           <div className="content-body">
-            <ContentView
+            <ContentView />
-              activeTab={activeTab}
-              themeType={themeType}
-              onLinkClick={handleLinkClick}
-            />
           </div>
         </Grid>
       </Grid.Container>
-      <CreateFileModal visible={newFileModalVisible} />
+      <CreateFileModal />
-      <DeleteFileModal visible={deleteFileModalVisible} />
+      <DeleteFileModal />
-      <CommitMessageModal visible={commitMessageModalVisible} />
+      <CommitMessageModal />
     </>
   );
 };