Split large contexts

frontend/src/components/ContentView.js

@@ -4,12 +4,12 @@ import MarkdownPreview from './MarkdownPreview';
 import { Text } from '@geist-ui/core';
 import { getFileUrl } from '../services/api';
 import { isImageFile } from '../utils/fileHelpers';
-import { useFileContentContext } from '../contexts/FileContentContext';
-import { useUIStateContext } from '../contexts/UIStateContext';
+import { useFileSelection } from '../contexts/FileSelectionContext';
+import { useTabContext } from '../contexts/TabContext';
 
 const ContentView = () => {
-  const { selectedFile } = useFileContentContext();
-  const { activeTab } = useUIStateContext();
+  const { selectedFile } = useFileSelection();
+  const { activeTab } = useTabContext();
 
   if (!selectedFile) {
     return (

frontend/src/components/Editor.js

@@ -5,12 +5,13 @@ import { EditorView, keymap } from '@codemirror/view';
 import { markdown } from '@codemirror/lang-markdown';
 import { defaultKeymap } from '@codemirror/commands';
 import { oneDark } from '@codemirror/theme-one-dark';
-import { useFileContentContext } from '../contexts/FileContentContext';
 import { useSettings } from '../contexts/SettingsContext';
+import { useFileSelection } from '../contexts/FileSelectionContext';
+import { useEditorContent } from '../contexts/EditorContentContext';
 
 const Editor = () => {
-  const { content, selectedFile, handleContentChange, handleSave } =
-    useFileContentContext();
+  const { content, handleContentChange, handleSave } = useEditorContent();
+  const { selectedFile } = useFileSelection();
   const { settings } = useSettings();
   const editorRef = useRef();
   const viewRef = useRef();

frontend/src/components/FileActions.js

@@ -1,20 +1,20 @@
 import React from 'react';
 import { Button, Tooltip, ButtonGroup, Spacer } from '@geist-ui/core';
 import { Plus, Trash, GitPullRequest, GitCommit } from '@geist-ui/icons';
-import { useFileContentContext } from '../contexts/FileContentContext';
 import { useGitOperationsContext } from '../contexts/GitOperationsContext';
 import { useSettings } from '../contexts/SettingsContext';
-import { useUIStateContext } from '../contexts/UIStateContext';
+import { useFileSelection } from '../contexts/FileSelectionContext';
+import { useModalContext } from '../contexts/ModalContext';
 
 const FileActions = () => {
-  const { selectedFile } = useFileContentContext();
+  const { selectedFile } = useFileSelection();
   const { pullLatestChanges } = useGitOperationsContext();
   const { settings } = useSettings();
   const {
     setNewFileModalVisible,
     setDeleteFileModalVisible,
     setCommitMessageModalVisible,
-  } = useUIStateContext();
+  } = useModalContext();
 
   const handleCreateFile = () => setNewFileModalVisible(true);
   const handleDeleteFile = () => setDeleteFileModalVisible(true);

frontend/src/components/FileTree.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import { Tree } from '@geist-ui/core';
 import { File, Folder, Image } from '@geist-ui/icons';
-import { useFileContentContext } from '../contexts/FileContentContext';
 import { useFileListContext } from '../contexts/FileListContext';
 import { isImageFile } from '../utils/fileHelpers';
+import { useFileSelection } from '../contexts/FileSelectionContext';
 
 const FileTree = () => {
   const { files } = useFileListContext();
-  const { selectedFile, handleFileSelect } = useFileContentContext();
+  const { selectedFile, handleFileSelect } = useFileSelection();
 
   if (files.length === 0) {
     return <div>No files to display</div>;

frontend/src/components/Header.js

@@ -2,10 +2,10 @@ import React from 'react';
 import { Page, Text, User, Button, Spacer } from '@geist-ui/core';
 import { Settings as SettingsIcon } from '@geist-ui/icons';
 import Settings from './Settings';
-import { useUIStateContext } from '../contexts/UIStateContext';
+import { useModalContext } from '../contexts/ModalContext';
 
 const Header = () => {
-  const { setSettingsModalVisible } = useUIStateContext();
+  const { setSettingsModalVisible } = useModalContext();
 
   const openSettings = () => setSettingsModalVisible(true);
 

frontend/src/components/MainContent.js

@@ -7,12 +7,14 @@ import ContentView from './ContentView';
 import CreateFileModal from './modals/CreateFileModal';
 import DeleteFileModal from './modals/DeleteFileModal';
 import CommitMessageModal from './modals/CommitMessageModal';
-import { useFileContentContext } from '../contexts/FileContentContext';
-import { useUIStateContext } from '../contexts/UIStateContext';
+import { useTabContext } from '../contexts/TabContext';
+import { useEditorContent } from '../contexts/EditorContentContext';
+import { useFileSelection } from '../contexts/FileSelectionContext';
 
 const MainContent = () => {
-  const { selectedFile, hasUnsavedChanges } = useFileContentContext();
-  const { activeTab, setActiveTab } = useUIStateContext();
+  const { hasUnsavedChanges } = useEditorContent();
+  const { selectedFile } = useFileSelection();
+  const { activeTab, setActiveTab } = useTabContext();
 
   const handleTabChange = (value) => {
     setActiveTab(value);

frontend/src/components/MarkdownPreview.js

@@ -5,12 +5,12 @@ import rehypeKatex from 'rehype-katex';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import 'katex/dist/katex.min.css';
-import { useFileContentContext } from '../contexts/FileContentContext';
 import { useFileNavigation } from '../hooks/useFileNavigation';
 import { lookupFileByName } from '../services/api';
+import { useEditorContent } from '../contexts/EditorContentContext';
 
 const MarkdownPreview = () => {
-  const { content } = useFileContentContext();
+  const { content } = useEditorContent();
   const { handleLinkClick } = useFileNavigation();
   const [processedContent, setProcessedContent] = useState(content);
   const baseUrl = window.API_BASE_URL;

frontend/src/components/Settings.js

@@ -1,10 +1,10 @@
 import React, { useReducer, useEffect, useCallback, useRef } from 'react';
-import { Modal, Spacer, useTheme, Dot, useToasts } from '@geist-ui/core';
+import { Modal, Spacer, Dot, useToasts } from '@geist-ui/core';
 import { useSettings } from '../contexts/SettingsContext';
-import { useUIStateContext } from '../contexts/UIStateContext';
 import AppearanceSettings from './settings/AppearanceSettings';
 import EditorSettings from './settings/EditorSettings';
 import GitSettings from './settings/GitSettings';
+import { useModalContext } from '../contexts/ModalContext';
 
 const initialState = {
   localSettings: {},
@@ -50,7 +50,7 @@ function settingsReducer(state, action) {
 
 const Settings = () => {
   const { settings, updateSettings, updateTheme } = useSettings();
-  const { settingsModalVisible, setSettingsModalVisible } = useUIStateContext();
+  const { settingsModalVisible, setSettingsModalVisible } = useModalContext();
   const { setToast } = useToasts();
   const [state, dispatch] = useReducer(settingsReducer, initialState);
   const isInitialMount = useRef(true);

frontend/src/components/modals/CommitMessageModal.js

@@ -1,13 +1,13 @@
 import React, { useState } from 'react';
 import { Modal, Input } from '@geist-ui/core';
 import { useGitOperationsContext } from '../../contexts/GitOperationsContext';
-import { useUIStateContext } from '../../contexts/UIStateContext';
+import { useModalContext } from '../../contexts/ModalContext';
 
 const CommitMessageModal = () => {
   const [message, setMessage] = useState('');
   const { handleCommitAndPush } = useGitOperationsContext();
   const { commitMessageModalVisible, setCommitMessageModalVisible } =
-    useUIStateContext();
+    useModalContext();
 
   const handleSubmit = async () => {
     if (message) {

frontend/src/components/modals/CreateFileModal.js

@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
 import { Modal, Input } from '@geist-ui/core';
-import { useFileContentContext } from '../../contexts/FileContentContext';
-import { useUIStateContext } from '../../contexts/UIStateContext';
+import { useFileOperations } from '../../contexts/FileOperationsContext';
+import { useModalContext } from '../../contexts/ModalContext';
 
 const CreateFileModal = () => {
   const [fileName, setFileName] = useState('');
-  const { newFileModalVisible, setNewFileModalVisible } = useUIStateContext();
-  const { handleCreateNewFile } = useFileContentContext();
+  const { newFileModalVisible, setNewFileModalVisible } = useModalContext();
+  const { handleCreateNewFile } = useFileOperations();
 
   const handleSubmit = async () => {
     if (fileName) {

frontend/src/components/modals/DeleteFileModal.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import { Modal, Text } from '@geist-ui/core';
-import { useFileContentContext } from '../../contexts/FileContentContext';
-import { useUIStateContext } from '../../contexts/UIStateContext';
+import { useModalContext } from '../../contexts/ModalContext';
+import { useFileSelection } from '../../contexts/FileSelectionContext';
 
 const DeleteFileModal = () => {
-  const { selectedFile, handleDeleteFile } = useFileContentContext();
+  const { selectedFile, handleDeleteFile } = useFileSelection();
   const { deleteFileModalVisible, setDeleteFileModalVisible } =
-    useUIStateContext();
+    useModalContext();
 
   const handleConfirm = async () => {
     await handleDeleteFile();