Merge pull request #2 from LordMathis/feat/react-context

Feat/react context
2025-11-05 23:44:22 +00:00 · 2024-10-07 19:29:52 +02:00
parent fe2b9e376f af3b8ab3de
commit 660fd8b09d
22 changed files with 689 additions and 549 deletions
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -1,94 +1,39 @@
-import React, { useState, useEffect } from 'react';
-import { GeistProvider, CssBaseline, Page, useToasts } from '@geist-ui/core';
+import React from 'react';
+import { GeistProvider, CssBaseline, Page } from '@geist-ui/core';
 import Header from './components/Header';
 import MainContent from './components/MainContent';
-import useFileManagement from './hooks/useFileManagement';
-import { fetchUserSettings } from './services/api';
+import { SettingsProvider, useSettings } from './contexts/SettingsContext';
+import { ModalProvider } from './contexts/ModalContext';
 import './App.scss';

-function App() {
-  const [themeType, setThemeType] = useState('light');
-  const [userId, setUserId] = useState(1);
-  const [settings, setSettings] = useState({ gitEnabled: false });
-  const { setToast } = useToasts();
+function AppContent() {
+  const { settings, loading } = useSettings();

-  useEffect(() => {
-    const loadUserSettings = async () => {
-      try {
-        const fetchedSettings = await fetchUserSettings(userId);
-        setSettings(fetchedSettings.settings);
-        setThemeType(fetchedSettings.settings.theme);
-      } catch (error) {
-        console.error('Failed to load user settings:', error);
-      }
-    };
-
-    loadUserSettings();
-  }, [userId]);
-
-  const {
-    content,
-    files,
-    selectedFile,
-    isNewFile,
-    hasUnsavedChanges,
-    error,
-    handleFileSelect,
-    handleContentChange,
-    handleSave,
-    pullLatestChanges,
-    lookupFileByName,
-  } = useFileManagement(settings.gitEnabled);
-
-  const handleThemeChange = (newTheme) => {
-    setThemeType(newTheme);
-  };
-
-  const handleLinkClick = async (filename) => {
-    try {
-      const filePaths = await lookupFileByName(filename);
-      if (filePaths.length === 1) {
-        handleFileSelect(filePaths[0]);
-      } else if (filePaths.length > 1) {
-        setFileOptions(filePaths.map((path) => ({ label: path, value: path })));
-        setFileSelectionModalVisible(true);
-      } else {
-        setToast({ text: `File "${filename}" not found`, type: 'error' });
-      }
-    } catch (error) {
-      console.error('Error looking up file:', error);
-      setToast({
-        text: 'Failed to lookup file. Please try again.',
-        type: 'error',
-      });
-    }
-  };
+  if (loading) {
+    return <div>Loading...</div>;
+  }

  return (
-    <GeistProvider themeType={themeType}>
+    <GeistProvider themeType={settings.theme}>
      <CssBaseline />
      <Page>
-        <Header currentTheme={themeType} onThemeChange={handleThemeChange} />
+        <Header />
        <Page.Content className="page-content">
-          <MainContent
-            content={content}
-            files={files}
-            selectedFile={selectedFile}
-            isNewFile={isNewFile}
-            hasUnsavedChanges={hasUnsavedChanges}
-            error={error}
-            onFileSelect={handleFileSelect}
-            onContentChange={handleContentChange}
-            onSave={handleSave}
-            settings={settings}
-            pullLatestChanges={pullLatestChanges}
-            onLinkClick={handleLinkClick}
-            lookupFileByName={lookupFileByName}
-          />
+          <MainContent />
        </Page.Content>
      </Page>
    </GeistProvider>
  );
 }

+function App() {
+  return (
+    <SettingsProvider>
+      <ModalProvider>
+        <AppContent />
+      </ModalProvider>
+    </SettingsProvider>
+  );
+}
+
 export default App;
--- a/frontend/src/components/ContentView.js
+++ b/frontend/src/components/ContentView.js
@@ -1,19 +1,33 @@
 import React from 'react';
 import Editor from './Editor';
 import MarkdownPreview from './MarkdownPreview';
+import { Text } from '@geist-ui/core';
 import { getFileUrl } from '../services/api';
 import { isImageFile } from '../utils/fileHelpers';

 const ContentView = ({
  activeTab,
-  content,
  selectedFile,
-  onContentChange,
-  onSave,
-  themeType,
-  onLinkClick,
-  lookupFileByName,
+  content,
+  handleContentChange,
+  handleSave,
+  handleLinkClick,
 }) => {
+  if (!selectedFile) {
+    return (
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: '100%',
+        }}
+      >
+        <Text h3>No file selected.</Text>
+      </div>
+    );
+  }
+
  if (isImageFile(selectedFile)) {
    return (
      <div className="image-preview">
@@ -33,18 +47,12 @@ const ContentView = ({
  return activeTab === 'source' ? (
    <Editor
      content={content}
-      onChange={onContentChange}
-      onSave={onSave}
-      filePath={selectedFile}
-      themeType={themeType}
+      handleContentChange={handleContentChange}
+      handleSave={handleSave}
+      selectedFile={selectedFile}
    />
  ) : (
-    <MarkdownPreview
-      content={content}
-      baseUrl={window.API_BASE_URL}
-      onLinkClick={onLinkClick}
-      lookupFileByName={lookupFileByName}
-    />
+    <MarkdownPreview content={content} handleLinkClick={handleLinkClick} />
  );
 };

--- a/frontend/src/components/Editor.js
+++ b/frontend/src/components/Editor.js
@@ -5,14 +5,16 @@ 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 { useSettings } from '../contexts/SettingsContext';

-const Editor = ({ content, onChange, onSave, filePath, themeType }) => {
+const Editor = ({ content, handleContentChange, handleSave, selectedFile }) => {
+  const { settings } = useSettings();
  const editorRef = useRef();
  const viewRef = useRef();

  useEffect(() => {
-    const handleSave = (view) => {
-      onSave(filePath, view.state.doc.toString());
+    const handleEditorSave = (view) => {
+      handleSave(selectedFile, view.state.doc.toString());
      return true;
    };

@@ -25,12 +27,12 @@ const Editor = ({ content, onChange, onSave, filePath, themeType }) => {
        overflow: 'auto',
      },
      '.cm-gutters': {
-        backgroundColor: themeType === 'dark' ? '#1e1e1e' : '#f5f5f5',
-        color: themeType === 'dark' ? '#858585' : '#999',
+        backgroundColor: settings.theme === 'dark' ? '#1e1e1e' : '#f5f5f5',
+        color: settings.theme === 'dark' ? '#858585' : '#999',
        border: 'none',
      },
      '.cm-activeLineGutter': {
-        backgroundColor: themeType === 'dark' ? '#2c313a' : '#e8e8e8',
+        backgroundColor: settings.theme === 'dark' ? '#2c313a' : '#e8e8e8',
      },
    });

@@ -44,17 +46,17 @@ const Editor = ({ content, onChange, onSave, filePath, themeType }) => {
        keymap.of([
          {
            key: 'Ctrl-s',
-            run: handleSave,
+            run: handleEditorSave,
            preventDefault: true,
          },
        ]),
        EditorView.updateListener.of((update) => {
          if (update.docChanged) {
-            onChange(update.state.doc.toString());
+            handleContentChange(update.state.doc.toString());
          }
        }),
        theme,
-        themeType === 'dark' ? oneDark : [],
+        settings.theme === 'dark' ? oneDark : [],
      ],
    });

@@ -68,7 +70,7 @@ const Editor = ({ content, onChange, onSave, filePath, themeType }) => {
    return () => {
      view.destroy();
    };
-  }, [filePath, themeType]);
+  }, [settings.theme, handleContentChange]);

  useEffect(() => {
    if (viewRef.current && content !== viewRef.current.state.doc.toString()) {
--- a/frontend/src/components/FileActions.js
+++ b/frontend/src/components/FileActions.js
@@ -1,16 +1,21 @@
 import React from 'react';
 import { Button, Tooltip, ButtonGroup, Spacer } from '@geist-ui/core';
 import { Plus, Trash, GitPullRequest, GitCommit } from '@geist-ui/icons';
+import { useSettings } from '../contexts/SettingsContext';
+import { useModalContext } from '../contexts/ModalContext';
+
+const FileActions = ({ handlePullChanges, selectedFile }) => {
+  const { settings } = useSettings();
+  const {
+    setNewFileModalVisible,
+    setDeleteFileModalVisible,
+    setCommitMessageModalVisible,
+  } = useModalContext();
+
+  const handleCreateFile = () => setNewFileModalVisible(true);
+  const handleDeleteFile = () => setDeleteFileModalVisible(true);
+  const handleCommitAndPush = () => setCommitMessageModalVisible(true);

-const FileActions = ({
-  selectedFile,
-  gitEnabled,
-  gitAutoCommit,
-  onPull,
-  onCommitAndPush,
-  onCreateFile,
-  onDeleteFile,
-}) => {
  return (
    <ButtonGroup className="file-actions">
      <Tooltip text="Create new file" type="dark">
@@ -18,7 +23,7 @@ const FileActions = ({
          icon={<Plus />}
          auto
          scale={2 / 3}
-          onClick={onCreateFile}
+          onClick={handleCreateFile}
          px={0.6}
        />
      </Tooltip>
@@ -31,7 +36,7 @@ const FileActions = ({
          icon={<Trash />}
          auto
          scale={2 / 3}
-          onClick={onDeleteFile}
+          onClick={handleDeleteFile}
          disabled={!selectedFile}
          type="error"
          px={0.6}
@@ -39,24 +44,28 @@ const FileActions = ({
      </Tooltip>
      <Spacer w={0.5} />
      <Tooltip
-        text={gitEnabled ? 'Pull changes from remote' : 'Git is not enabled'}
+        text={
+          settings.gitEnabled
+            ? 'Pull changes from remote'
+            : 'Git is not enabled'
+        }
        type="dark"
      >
        <Button
          icon={<GitPullRequest />}
          auto
          scale={2 / 3}
-          onClick={onPull}
-          disabled={!gitEnabled}
+          onClick={handlePullChanges}
+          disabled={!settings.gitEnabled}
          px={0.6}
        />
      </Tooltip>
      <Spacer w={0.5} />
      <Tooltip
        text={
-          !gitEnabled
+          !settings.gitEnabled
            ? 'Git is not enabled'
-            : gitAutoCommit
+            : settings.gitAutoCommit
            ? 'Auto-commit is enabled'
            : 'Commit and push changes'
        }
@@ -66,8 +75,8 @@ const FileActions = ({
          icon={<GitCommit />}
          auto
          scale={2 / 3}
-          onClick={onCommitAndPush}
-          disabled={!gitEnabled || gitAutoCommit}
+          onClick={handleCommitAndPush}
+          disabled={!settings.gitEnabled || settings.gitAutoCommit}
          px={0.6}
        />
      </Tooltip>
--- a/frontend/src/components/FileTree.js
+++ b/frontend/src/components/FileTree.js
@@ -1,45 +1,27 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Tree } from '@geist-ui/core';
 import { File, Folder, Image } from '@geist-ui/icons';
+import { isImageFile } from '../utils/fileHelpers';

-const FileTree = ({
-  files = [],
-  onFileSelect = () => {},
-  selectedFile = null,
-}) => {
+const FileTree = ({ files, handleFileSelect }) => {
  if (files.length === 0) {
    return <div>No files to display</div>;
  }

-  const handleSelect = (filePath) => {
-    onFileSelect(filePath);
-  };
-
-  const renderLabel = (node) => {
-    const path = node.extra;
-    return (
-      <span style={{ color: path === selectedFile ? '#0070f3' : 'inherit' }}>
-        {node.name}
-      </span>
-    );
-  };
-
-  const isImageFile = (fileName) => {
-    const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.svg'];
-    return imageExtensions.some((ext) => fileName.toLowerCase().endsWith(ext));
-  };
-
-  const renderIcon = ({ type, name }) => {
-    if (type === 'directory') return <Folder />;
-    return isImageFile(name) ? <Image /> : <File />;
-  };
+  const renderIcon = useMemo(
+    () =>
+      ({ type, name }) => {
+        if (type === 'directory') return <Folder />;
+        return isImageFile(name) ? <Image /> : <File />;
+      },
+    []
+  );

  return (
    <Tree
      value={files}
-      onClick={handleSelect}
+      onClick={(filePath) => handleFileSelect(filePath)}
      renderIcon={renderIcon}
-      renderLabel={renderLabel}
    />
  );
 };
--- a/frontend/src/components/Header.js
+++ b/frontend/src/components/Header.js
@@ -1,13 +1,13 @@
-import React, { useState } from 'react';
+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 { useModalContext } from '../contexts/ModalContext';

-const Header = ({ currentTheme, onThemeChange }) => {
-  const [settingsVisible, setSettingsVisible] = useState(false);
+const Header = () => {
+  const { setSettingsModalVisible } = useModalContext();

-  const openSettings = () => setSettingsVisible(true);
-  const closeSettings = () => setSettingsVisible(false);
+  const openSettings = () => setSettingsModalVisible(true);

  return (
    <Page.Header className="custom-navbar">
@@ -16,12 +16,7 @@ const Header = ({ currentTheme, onThemeChange }) => {
      <User src="https://via.placeholder.com/40" name="User" />
      <Spacer w={0.5} />
      <Button auto icon={<SettingsIcon />} onClick={openSettings} />
-      <Settings
-        visible={settingsVisible}
-        onClose={closeSettings}
-        currentTheme={currentTheme}
-        onThemeChange={onThemeChange}
-      />
+      <Settings />
    </Page.Header>
  );
 };
--- a/frontend/src/components/MainContent.js
+++ b/frontend/src/components/MainContent.js
@@ -1,132 +1,79 @@
-import React, { useState, useEffect } from 'react';
-import {
-  Grid,
-  Breadcrumbs,
-  Tabs,
-  Dot,
-  useTheme,
-  useToasts,
-} from '@geist-ui/core';
+import React, { useState, useCallback, useEffect } from 'react';
+import { Breadcrumbs, Grid, Tabs, Dot } from '@geist-ui/core';
 import { Code, Eye } from '@geist-ui/icons';
-import FileTree from './FileTree';
+
 import FileActions from './FileActions';
+import FileTree from './FileTree';
+import ContentView from './ContentView';
 import CreateFileModal from './modals/CreateFileModal';
 import DeleteFileModal from './modals/DeleteFileModal';
 import CommitMessageModal from './modals/CommitMessageModal';
-import ContentView from './ContentView';
-import { commitAndPush, saveFileContent, deleteFile } from '../services/api';
-import { isImageFile } from '../utils/fileHelpers';

-const MainContent = ({
-  content,
-  files,
-  selectedFile,
-  hasUnsavedChanges,
-  onFileSelect,
-  onContentChange,
-  onSave,
-  settings,
-  pullLatestChanges,
-  onLinkClick,
-  lookupFileByName,
-}) => {
+import { useFileContent } from '../hooks/useFileContent';
+import { useFileList } from '../hooks/useFileList';
+import { useFileOperations } from '../hooks/useFileOperations';
+import { useGitOperations } from '../hooks/useGitOperations';
+import { useFileNavigation } from '../hooks/useFileNavigation';
+import { useSettings } from '../contexts/SettingsContext';
+
+const MainContent = () => {
  const [activeTab, setActiveTab] = useState('source');
-  const { type: themeType } = useTheme();
-  const { setToast } = useToasts();
-  const [newFileModalVisible, setNewFileModalVisible] = useState(false);
-  const [newFileName, setNewFileName] = useState('');
-  const [deleteFileModalVisible, setDeleteFileModalVisible] = useState(false);
-  const [commitMessageModalVisible, setCommitMessageModalVisible] =
-    useState(false);
+  const { settings } = useSettings();
+  const { files, loadFileList } = useFileList();
+  const { handleLinkClick, selectedFile, handleFileSelect } =
+    useFileNavigation();
+  const {
+    content,
+    hasUnsavedChanges,
+    setHasUnsavedChanges,
+    handleContentChange,
+  } = useFileContent(selectedFile);
+  const { handleSave, handleCreate, handleDelete } = useFileOperations();
+  const { handleCommitAndPush, handlePull } = useGitOperations();

  useEffect(() => {
-    if (isImageFile(selectedFile)) {
-      setActiveTab('preview');
-    }
-  }, [selectedFile]);
+    loadFileList();
+  }, [settings.gitEnabled]);

  const handleTabChange = (value) => {
-    if (!isImageFile(selectedFile) || value === 'preview') {
-      setActiveTab(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 handleNewFileSubmit = async () => {
-    if (newFileName) {
-      try {
-        await saveFileContent(newFileName, '');
-        setToast({ text: 'New file created successfully', type: 'success' });
-        await pullLatestChanges();
-        onFileSelect(newFileName);
-      } catch (error) {
-        setToast({
-          text: 'Failed to create new file: ' + error.message,
-          type: 'error',
-        });
+  const handleSaveFile = useCallback(
+    async (filePath, content) => {
+      const success = await handleSave(filePath, content);
+      if (success) {
+        setHasUnsavedChanges(false);
      }
-    }
-    setNewFileModalVisible(false);
-    setNewFileName('');
-  };
+      return success;
+    },
+    [handleSave, setHasUnsavedChanges]
+  );

-  const handleDeleteFile = () => {
-    setDeleteFileModalVisible(true);
-  };
+  const handleCreateFile = useCallback(
+    async (fileName) => {
+      const success = await handleCreate(fileName);
+      if (success) {
+        await loadFileList();
+        handleFileSelect(fileName);
+      }
+    },
+    [handleCreate, loadFileList, handleFileSelect]
+  );

-  const confirmDeleteFile = async () => {
-    try {
-      await deleteFile(selectedFile);
-      setToast({ text: 'File deleted successfully', type: 'success' });
-      await pullLatestChanges();
-      onFileSelect(null);
-    } catch (error) {
-      setToast({
-        text: 'Failed to delete file: ' + error.message,
-        type: 'error',
-      });
-    }
-    setDeleteFileModalVisible(false);
-  };
-
-  const handleCommitAndPush = () => {
-    setCommitMessageModalVisible(true);
-  };
-
-  const confirmCommitAndPush = async (message) => {
-    try {
-      await commitAndPush(message);
-      setToast({
-        text: 'Changes committed and pushed successfully',
-        type: 'success',
-      });
-      await pullLatestChanges();
-    } catch (error) {
-      setToast({
-        text: 'Failed to commit and push changes: ' + error.message,
-        type: 'error',
-      });
-    }
-    setCommitMessageModalVisible(false);
-  };
+  const handleDeleteFile = useCallback(
+    async (filePath) => {
+      const success = await handleDelete(filePath);
+      if (success) {
+        await loadFileList();
+        handleFileSelect(null);
+      }
+    },
+    [handleDelete, loadFileList, handleFileSelect]
+  );

  const renderBreadcrumbs = () => {
-    if (!selectedFile) return null;
+    if (!selectedFile) return <div className="breadcrumbs-container"></div>;
    const pathParts = selectedFile.split('/');
    return (
      <div className="breadcrumbs-container">
@@ -148,18 +95,13 @@ const MainContent = ({
        <Grid xs={24} sm={6} md={5} lg={4} height="100%" className="sidebar">
          <div className="file-tree-container">
            <FileActions
+              handlePullChanges={handlePull}
              selectedFile={selectedFile}
-              gitEnabled={settings.gitEnabled}
-              gitAutoCommit={settings.gitAutoCommit}
-              onPull={handlePull}
-              onCommitAndPush={handleCommitAndPush}
-              onCreateFile={handleCreateFile}
-              onDeleteFile={handleDeleteFile}
            />
            <FileTree
              files={files}
-              onFileSelect={onFileSelect}
              selectedFile={selectedFile}
+              handleFileSelect={handleFileSelect}
            />
          </div>
        </Grid>
@@ -174,46 +116,28 @@ const MainContent = ({
          <div className="content-header">
            {renderBreadcrumbs()}
            <Tabs value={activeTab} onChange={handleTabChange}>
-              <Tabs.Item
-                label={<Code />}
-                value="source"
-                disabled={isImageFile(selectedFile)}
-              />
+              <Tabs.Item label={<Code />} value="source" />
              <Tabs.Item label={<Eye />} value="preview" />
            </Tabs>
          </div>
          <div className="content-body">
            <ContentView
              activeTab={activeTab}
-              content={content}
              selectedFile={selectedFile}
-              onContentChange={onContentChange}
-              onSave={onSave}
-              themeType={themeType}
-              onLinkClick={onLinkClick}
-              lookupFileByName={lookupFileByName}
+              content={content}
+              handleContentChange={handleContentChange}
+              handleSave={handleSaveFile}
+              handleLinkClick={handleLinkClick}
            />
          </div>
        </Grid>
      </Grid.Container>
-      <CreateFileModal
-        visible={newFileModalVisible}
-        onClose={() => setNewFileModalVisible(false)}
-        onSubmit={handleNewFileSubmit}
-        fileName={newFileName}
-        setFileName={setNewFileName}
-      />
+      <CreateFileModal onCreateFile={handleCreateFile} />
      <DeleteFileModal
-        visible={deleteFileModalVisible}
-        onClose={() => setDeleteFileModalVisible(false)}
-        onConfirm={confirmDeleteFile}
-        fileName={selectedFile}
-      />
-      <CommitMessageModal
-        visible={commitMessageModalVisible}
-        onClose={() => setCommitMessageModalVisible(false)}
-        onSubmit={confirmCommitAndPush}
+        onDeleteFile={handleDeleteFile}
+        selectedFile={selectedFile}
      />
+      <CommitMessageModal onCommitAndPush={handleCommitAndPush} />
    </>
  );
 };
--- a/frontend/src/components/MarkdownPreview.js
+++ b/frontend/src/components/MarkdownPreview.js
@@ -5,14 +5,11 @@ 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 { lookupFileByName } from '../services/api';

-const MarkdownPreview = ({
-  content,
-  baseUrl,
-  onLinkClick,
-  lookupFileByName,
-}) => {
+const MarkdownPreview = ({ content, handleLinkClick }) => {
  const [processedContent, setProcessedContent] = useState(content);
+  const baseUrl = window.API_BASE_URL;

  useEffect(() => {
    const processContent = async (rawContent) => {
@@ -82,7 +79,7 @@ const MarkdownPreview = ({
    };

    processContent(content).then(setProcessedContent);
-  }, [content, baseUrl, lookupFileByName]);
+  }, [content, baseUrl]);

  const handleImageError = (event) => {
    console.error('Failed to load image:', event.target.src);
@@ -125,7 +122,7 @@ const MarkdownPreview = ({
                  href="#"
                  onClick={(e) => {
                    e.preventDefault();
-                    onLinkClick(filePath, heading);
+                    handleLinkClick(filePath, heading);
                  }}
                >
                  {children}
@@ -141,7 +138,7 @@ const MarkdownPreview = ({
                  style={{ color: 'red', textDecoration: 'underline' }}
                  onClick={(e) => {
                    e.preventDefault();
-                    onLinkClick(fileName);
+                    handleLinkClick(fileName);
                  }}
                >
                  {children}
--- a/frontend/src/components/Settings.js
+++ b/frontend/src/components/Settings.js
@@ -1,77 +1,91 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { Modal, Spacer, useTheme, Dot, useToasts } from '@geist-ui/core';
-import { saveUserSettings, fetchUserSettings } from '../services/api';
+import React, { useReducer, useEffect, useCallback, useRef } from 'react';
+import { Modal, Spacer, Dot, useToasts } from '@geist-ui/core';
+import { useSettings } from '../contexts/SettingsContext';
 import AppearanceSettings from './settings/AppearanceSettings';
 import EditorSettings from './settings/EditorSettings';
 import GitSettings from './settings/GitSettings';
+import { useModalContext } from '../contexts/ModalContext';

-const Settings = ({ visible, onClose, currentTheme, onThemeChange }) => {
-  const theme = useTheme();
+const initialState = {
+  localSettings: {},
+  initialSettings: {},
+  hasUnsavedChanges: false,
+};
+
+function settingsReducer(state, action) {
+  switch (action.type) {
+    case 'INIT_SETTINGS':
+      return {
+        ...state,
+        localSettings: action.payload,
+        initialSettings: action.payload,
+        hasUnsavedChanges: false,
+      };
+    case 'UPDATE_LOCAL_SETTINGS':
+      const newLocalSettings = { ...state.localSettings, ...action.payload };
+      const hasChanges =
+        JSON.stringify(newLocalSettings) !==
+        JSON.stringify(state.initialSettings);
+      return {
+        ...state,
+        localSettings: newLocalSettings,
+        hasUnsavedChanges: hasChanges,
+      };
+    case 'MARK_SAVED':
+      return {
+        ...state,
+        initialSettings: state.localSettings,
+        hasUnsavedChanges: false,
+      };
+    case 'RESET':
+      return {
+        ...state,
+        localSettings: state.initialSettings,
+        hasUnsavedChanges: false,
+      };
+    default:
+      return state;
+  }
+}
+
+const Settings = () => {
+  const { settings, updateSettings, updateTheme } = useSettings();
+  const { settingsModalVisible, setSettingsModalVisible } = useModalContext();
  const { setToast } = useToasts();
-  const [settings, setSettings] = useState({
-    autoSave: false,
-    gitEnabled: false,
-    gitUrl: '',
-    gitUser: '',
-    gitToken: '',
-    gitAutoCommit: false,
-    gitCommitMsgTemplate: '',
-  });
-  const [themeSettings, setThemeSettings] = useState(currentTheme);
-  const [originalSettings, setOriginalSettings] = useState({});
-  const [originalTheme, setOriginalTheme] = useState(currentTheme);
-  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
-  const [isInitialized, setIsInitialized] = useState(false);
+  const [state, dispatch] = useReducer(settingsReducer, initialState);
+  const isInitialMount = useRef(true);
+  const updateThemeTimeoutRef = useRef(null);

-  const loadSettings = useCallback(async () => {
-    try {
-      const userSettings = await fetchUserSettings(1); // Assuming user ID 1 for now
-      const { theme, ...otherSettings } = userSettings.settings;
-      setSettings(otherSettings);
-      setThemeSettings(theme);
-      setOriginalSettings(otherSettings);
-      setOriginalTheme(theme);
-      setHasUnsavedChanges(false);
-      setIsInitialized(true);
-    } catch (error) {
-      console.error('Failed to load user settings:', error);
+  useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      dispatch({ type: 'INIT_SETTINGS', payload: settings });
    }
+  }, [settings]);
+
+  const handleInputChange = useCallback((key, value) => {
+    dispatch({ type: 'UPDATE_LOCAL_SETTINGS', payload: { [key]: value } });
  }, []);

-  useEffect(() => {
-    if (!isInitialized) {
-      loadSettings();
+  const handleThemeChange = useCallback(() => {
+    const newTheme = state.localSettings.theme === 'dark' ? 'light' : 'dark';
+    dispatch({ type: 'UPDATE_LOCAL_SETTINGS', payload: { theme: newTheme } });
+
+    // Debounce the theme update
+    if (updateThemeTimeoutRef.current) {
+      clearTimeout(updateThemeTimeoutRef.current);
    }
-  }, [isInitialized, loadSettings]);
-
-  useEffect(() => {
-    const settingsChanged =
-      JSON.stringify(settings) !== JSON.stringify(originalSettings);
-    const themeChanged = themeSettings !== originalTheme;
-    setHasUnsavedChanges(settingsChanged || themeChanged);
-  }, [settings, themeSettings, originalSettings, originalTheme]);
-
-  const handleInputChange = (key, value) => {
-    setSettings((prev) => ({ ...prev, [key]: value }));
-  };
-
-  const handleThemeChange = () => {
-    const newTheme = themeSettings === 'dark' ? 'light' : 'dark';
-    setThemeSettings(newTheme);
-    onThemeChange(newTheme);
-  };
+    updateThemeTimeoutRef.current = setTimeout(() => {
+      updateTheme(newTheme);
+    }, 0);
+  }, [state.localSettings.theme, updateTheme]);

  const handleSubmit = async () => {
    try {
-      await saveUserSettings({
-        userId: 1, // Assuming user ID 1 for now
-        settings: { ...settings, theme: themeSettings },
-      });
-      setOriginalSettings(settings);
-      setOriginalTheme(themeSettings);
-      setHasUnsavedChanges(false);
+      await updateSettings(state.localSettings);
+      dispatch({ type: 'MARK_SAVED' });
      setToast({ text: 'Settings saved successfully', type: 'success' });
-      onClose();
+      setSettingsModalVisible(false);
    } catch (error) {
      console.error('Failed to save settings:', error);
      setToast({
@@ -81,36 +95,57 @@ const Settings = ({ visible, onClose, currentTheme, onThemeChange }) => {
    }
  };

+  const handleClose = useCallback(() => {
+    if (state.hasUnsavedChanges) {
+      updateTheme(state.initialSettings.theme); // Revert theme if not saved
+      dispatch({ type: 'RESET' });
+    }
+    setSettingsModalVisible(false);
+  }, [
+    state.hasUnsavedChanges,
+    state.initialSettings.theme,
+    updateTheme,
+    setSettingsModalVisible,
+  ]);
+
+  useEffect(() => {
+    return () => {
+      if (updateThemeTimeoutRef.current) {
+        clearTimeout(updateThemeTimeoutRef.current);
+      }
+    };
+  }, []);
+
  return (
-    <Modal visible={visible} onClose={onClose}>
+    <Modal visible={settingsModalVisible} onClose={handleClose}>
      <Modal.Title>
        Settings
-        {hasUnsavedChanges && (
+        {state.hasUnsavedChanges && (
          <Dot type="warning" style={{ marginLeft: '8px' }} />
        )}
      </Modal.Title>
      <Modal.Content>
        <AppearanceSettings
-          themeSettings={themeSettings}
+          themeSettings={state.localSettings.theme}
          onThemeChange={handleThemeChange}
        />
        <Spacer h={1} />
        <EditorSettings
-          autoSave={settings.autoSave}
+          autoSave={state.localSettings.autoSave}
          onAutoSaveChange={(value) => handleInputChange('autoSave', value)}
        />
        <Spacer h={1} />
        <GitSettings
-          gitEnabled={settings.gitEnabled}
-          gitUrl={settings.gitUrl}
-          gitUser={settings.gitUser}
-          gitToken={settings.gitToken}
-          gitAutoCommit={settings.gitAutoCommit}
-          gitCommitMsgTemplate={settings.gitCommitMsgTemplate}
+          gitEnabled={state.localSettings.gitEnabled}
+          gitUrl={state.localSettings.gitUrl}
+          gitUser={state.localSettings.gitUser}
+          gitToken={state.localSettings.gitToken}
+          gitAutoCommit={state.localSettings.gitAutoCommit}
+          gitCommitMsgTemplate={state.localSettings.gitCommitMsgTemplate}
          onInputChange={handleInputChange}
        />
      </Modal.Content>
-      <Modal.Action passive onClick={onClose}>
+      <Modal.Action passive onClick={handleClose}>
        Cancel
      </Modal.Action>
      <Modal.Action onClick={handleSubmit}>Save Changes</Modal.Action>
--- a/frontend/src/components/modals/CommitMessageModal.js
+++ b/frontend/src/components/modals/CommitMessageModal.js
@@ -1,16 +1,25 @@
 import React, { useState } from 'react';
 import { Modal, Input } from '@geist-ui/core';
+import { useModalContext } from '../../contexts/ModalContext';

-const CommitMessageModal = ({ visible, onClose, onSubmit }) => {
+const CommitMessageModal = ({ onCommitAndPush }) => {
  const [message, setMessage] = useState('');
+  const { commitMessageModalVisible, setCommitMessageModalVisible } =
+    useModalContext();

-  const handleSubmit = () => {
-    onSubmit(message);
-    setMessage('');
+  const handleSubmit = async () => {
+    if (message) {
+      await onCommitAndPush(message);
+      setMessage('');
+      setCommitMessageModalVisible(false);
+    }
  };

  return (
-    <Modal visible={visible} onClose={onClose}>
+    <Modal
+      visible={commitMessageModalVisible}
+      onClose={() => setCommitMessageModalVisible(false)}
+    >
      <Modal.Title>Enter Commit Message</Modal.Title>
      <Modal.Content>
        <Input
@@ -20,7 +29,7 @@ const CommitMessageModal = ({ visible, onClose, onSubmit }) => {
          onChange={(e) => setMessage(e.target.value)}
        />
      </Modal.Content>
-      <Modal.Action passive onClick={onClose}>
+      <Modal.Action passive onClick={() => setCommitMessageModalVisible(false)}>
        Cancel
      </Modal.Action>
      <Modal.Action onClick={handleSubmit}>Commit</Modal.Action>
--- a/frontend/src/components/modals/CreateFileModal.js
+++ b/frontend/src/components/modals/CreateFileModal.js
@@ -1,15 +1,24 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Modal, Input } from '@geist-ui/core';
+import { useModalContext } from '../../contexts/ModalContext';
+
+const CreateFileModal = ({ onCreateFile }) => {
+  const [fileName, setFileName] = useState('');
+  const { newFileModalVisible, setNewFileModalVisible } = useModalContext();
+
+  const handleSubmit = async () => {
+    if (fileName) {
+      await onCreateFile(fileName);
+      setFileName('');
+      setNewFileModalVisible(false);
+    }
+  };

-const CreateFileModal = ({
-  visible,
-  onClose,
-  onSubmit,
-  fileName,
-  setFileName,
-}) => {
  return (
-    <Modal visible={visible} onClose={onClose}>
+    <Modal
+      visible={newFileModalVisible}
+      onClose={() => setNewFileModalVisible(false)}
+    >
      <Modal.Title>Create New File</Modal.Title>
      <Modal.Content>
        <Input
@@ -19,10 +28,10 @@ const CreateFileModal = ({
          onChange={(e) => setFileName(e.target.value)}
        />
      </Modal.Content>
-      <Modal.Action passive onClick={onClose}>
+      <Modal.Action passive onClick={() => setNewFileModalVisible(false)}>
        Cancel
      </Modal.Action>
-      <Modal.Action onClick={onSubmit}>Create</Modal.Action>
+      <Modal.Action onClick={handleSubmit}>Create</Modal.Action>
    </Modal>
  );
 };
--- a/frontend/src/components/modals/DeleteFileModal.js
+++ b/frontend/src/components/modals/DeleteFileModal.js
@@ -1,17 +1,29 @@
 import React from 'react';
 import { Modal, Text } from '@geist-ui/core';
+import { useModalContext } from '../../contexts/ModalContext';
+
+const DeleteFileModal = ({ onDeleteFile, selectedFile }) => {
+  const { deleteFileModalVisible, setDeleteFileModalVisible } =
+    useModalContext();
+
+  const handleConfirm = async () => {
+    await onDeleteFile(selectedFile);
+    setDeleteFileModalVisible(false);
+  };

-const DeleteFileModal = ({ visible, onClose, onConfirm, fileName }) => {
  return (
-    <Modal visible={visible} onClose={onClose}>
+    <Modal
+      visible={deleteFileModalVisible}
+      onClose={() => setDeleteFileModalVisible(false)}
+    >
      <Modal.Title>Delete File</Modal.Title>
      <Modal.Content>
-        <Text>Are you sure you want to delete "{fileName}"?</Text>
+        <Text>Are you sure you want to delete "{selectedFile}"?</Text>
      </Modal.Content>
-      <Modal.Action passive onClick={onClose}>
+      <Modal.Action passive onClick={() => setDeleteFileModalVisible(false)}>
        Cancel
      </Modal.Action>
-      <Modal.Action onClick={onConfirm}>Delete</Modal.Action>
+      <Modal.Action onClick={handleConfirm}>Delete</Modal.Action>
    </Modal>
  );
 };
--- a/frontend/src/contexts/ModalContext.js
+++ b/frontend/src/contexts/ModalContext.js
@@ -0,0 +1,28 @@
+import React, { createContext, useContext, useState } from 'react';
+
+const ModalContext = createContext();
+
+export const ModalProvider = ({ children }) => {
+  const [newFileModalVisible, setNewFileModalVisible] = useState(false);
+  const [deleteFileModalVisible, setDeleteFileModalVisible] = useState(false);
+  const [commitMessageModalVisible, setCommitMessageModalVisible] =
+    useState(false);
+  const [settingsModalVisible, setSettingsModalVisible] = useState(false);
+
+  const value = {
+    newFileModalVisible,
+    setNewFileModalVisible,
+    deleteFileModalVisible,
+    setDeleteFileModalVisible,
+    commitMessageModalVisible,
+    setCommitMessageModalVisible,
+    settingsModalVisible,
+    setSettingsModalVisible,
+  };
+
+  return (
+    <ModalContext.Provider value={value}>{children}</ModalContext.Provider>
+  );
+};
+
+export const useModalContext = () => useContext(ModalContext);
--- a/frontend/src/contexts/SettingsContext.js
+++ b/frontend/src/contexts/SettingsContext.js
@@ -0,0 +1,69 @@
+import React, {
+  createContext,
+  useState,
+  useContext,
+  useEffect,
+  useMemo,
+} from 'react';
+import { fetchUserSettings, saveUserSettings } from '../services/api';
+import { DEFAULT_SETTINGS } from '../utils/constants';
+
+const SettingsContext = createContext();
+
+export const useSettings = () => useContext(SettingsContext);
+
+export const SettingsProvider = ({ children }) => {
+  const [settings, setSettings] = useState(DEFAULT_SETTINGS);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const loadSettings = async () => {
+      try {
+        const userSettings = await fetchUserSettings(1);
+        setSettings(userSettings.settings);
+      } catch (error) {
+        console.error('Failed to load user settings:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadSettings();
+  }, []);
+
+  const updateSettings = async (newSettings) => {
+    try {
+      await saveUserSettings({
+        userId: 1,
+        settings: newSettings,
+      });
+      setSettings(newSettings);
+    } catch (error) {
+      console.error('Failed to save settings:', error);
+      throw error;
+    }
+  };
+
+  const updateTheme = (newTheme) => {
+    setSettings((prevSettings) => ({
+      ...prevSettings,
+      theme: newTheme,
+    }));
+  };
+
+  const contextValue = useMemo(
+    () => ({
+      settings,
+      updateSettings,
+      updateTheme,
+      loading,
+    }),
+    [settings, loading]
+  );
+
+  return (
+    <SettingsContext.Provider value={contextValue}>
+      {children}
+    </SettingsContext.Provider>
+  );
+};
--- a/frontend/src/hooks/useFileContent.js
+++ b/frontend/src/hooks/useFileContent.js
@@ -0,0 +1,54 @@
+import { useState, useCallback, useEffect } from 'react';
+import { fetchFileContent } from '../services/api';
+import { isImageFile } from '../utils/fileHelpers';
+import { DEFAULT_FILE } from '../utils/constants';
+
+export const useFileContent = (selectedFile) => {
+  const [content, setContent] = useState(DEFAULT_FILE.content);
+  const [originalContent, setOriginalContent] = useState(DEFAULT_FILE.content);
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+
+  const loadFileContent = useCallback(async (filePath) => {
+    try {
+      let newContent;
+      if (filePath === DEFAULT_FILE.path) {
+        newContent = DEFAULT_FILE.content;
+      } else if (!isImageFile(filePath)) {
+        newContent = await fetchFileContent(filePath);
+      } else {
+        newContent = ''; // Set empty content for image files
+      }
+      setContent(newContent);
+      setOriginalContent(newContent);
+      setHasUnsavedChanges(false);
+    } catch (err) {
+      console.error('Error loading file content:', err);
+      setContent(''); // Set empty content on error
+      setOriginalContent('');
+      setHasUnsavedChanges(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (selectedFile) {
+      loadFileContent(selectedFile);
+    }
+  }, [selectedFile, loadFileContent]);
+
+  const handleContentChange = useCallback(
+    (newContent) => {
+      setContent(newContent);
+      setHasUnsavedChanges(newContent !== originalContent);
+    },
+    [originalContent]
+  );
+
+  return {
+    content,
+    setContent,
+    hasUnsavedChanges,
+    setHasUnsavedChanges,
+    loadFileContent,
+    handleContentChange,
+  };
+};
--- a/frontend/src/hooks/useFileList.js
+++ b/frontend/src/hooks/useFileList.js
@@ -0,0 +1,21 @@
+import { useState, useEffect, useCallback } from 'react';
+import { fetchFileList } from '../services/api';
+
+export const useFileList = () => {
+  const [files, setFiles] = useState([]);
+
+  const loadFileList = useCallback(async () => {
+    try {
+      const fileList = await fetchFileList();
+      if (Array.isArray(fileList)) {
+        setFiles(fileList);
+      } else {
+        throw new Error('File list is not an array');
+      }
+    } catch (error) {
+      console.error('Failed to load file list:', error);
+    }
+  }, []);
+
+  return { files, loadFileList };
+};
--- a/frontend/src/hooks/useFileManagement.js
+++ b/frontend/src/hooks/useFileManagement.js
@@ -1,138 +0,0 @@
-import { useState, useEffect, useCallback } from 'react';
-import { useToasts } from '@geist-ui/core';
-import {
-  fetchFileList,
-  fetchFileContent,
-  saveFileContent,
-  pullChanges,
-  lookupFileByName,
-} from '../services/api';
-import { isImageFile } from '../utils/fileHelpers';
-
-const DEFAULT_FILE = {
-  name: 'New File.md',
-  path: 'New File.md',
-  content: '# Welcome to NovaMD\n\nStart editing here!',
-};
-
-const useFileManagement = (gitEnabled = false) => {
-  const [content, setContent] = useState(DEFAULT_FILE.content);
-  const [files, setFiles] = useState([]);
-  const [selectedFile, setSelectedFile] = useState(DEFAULT_FILE.path);
-  const [isNewFile, setIsNewFile] = useState(true);
-  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
-  const [error, setError] = useState(null);
-  const { setToast } = useToasts();
-
-  const loadFileList = useCallback(async () => {
-    try {
-      const fileList = await fetchFileList();
-      if (Array.isArray(fileList)) {
-        setFiles(fileList);
-      } else {
-        throw new Error('File list is not an array');
-      }
-    } catch (error) {
-      console.error('Failed to load file list:', error);
-      setError('Failed to load file list. Please try again later.');
-    }
-  }, []);
-
-  const pullLatestChanges = useCallback(async () => {
-    if (gitEnabled) {
-      try {
-        await pullChanges();
-        setToast({
-          text: 'Latest changes pulled successfully',
-          type: 'success',
-        });
-        await loadFileList(); // Reload file list after pulling changes
-      } catch (error) {
-        console.error('Failed to pull latest changes:', error);
-        setToast({
-          text: 'Failed to pull latest changes: ' + error.message,
-          type: 'error',
-        });
-      }
-    }
-  }, [gitEnabled, loadFileList, setToast]);
-
-  useEffect(() => {
-    const initializeFileSystem = async () => {
-      if (gitEnabled) {
-        await pullLatestChanges();
-      } else {
-        await loadFileList();
-      }
-    };
-
-    initializeFileSystem();
-  }, [gitEnabled]);
-
-  const handleFileSelect = async (filePath) => {
-    if (hasUnsavedChanges) {
-      const confirmSwitch = window.confirm(
-        'You have unsaved changes. Are you sure you want to switch files?'
-      );
-      if (!confirmSwitch) return;
-    }
-
-    try {
-      if (!isImageFile(filePath)) {
-        const fileContent = await fetchFileContent(filePath);
-        setContent(fileContent);
-      } else {
-        setContent(''); // Set empty content for image files
-      }
-      setSelectedFile(filePath);
-      setIsNewFile(false);
-      setHasUnsavedChanges(false);
-      setError(null);
-    } catch (error) {
-      console.error('Failed to load file content:', error);
-      setError('Failed to load file content. Please try again.');
-    }
-  };
-
-  const handleContentChange = (newContent) => {
-    setContent(newContent);
-    setHasUnsavedChanges(true);
-  };
-
-  const handleSave = useCallback(
-    async (filePath, fileContent) => {
-      try {
-        await saveFileContent(filePath, fileContent);
-        setToast({ text: 'File saved successfully', type: 'success' });
-        setIsNewFile(false);
-        setHasUnsavedChanges(false);
-        if (isNewFile) {
-          await loadFileList();
-        }
-      } catch (error) {
-        console.error('Error saving file:', error);
-        setToast({
-          text: 'Failed to save file. Please try again.',
-          type: 'error',
-        });
-      }
-    },
-    [setToast, isNewFile, loadFileList]
-  );
-
-  return {
-    content,
-    files,
-    selectedFile,
-    isNewFile,
-    hasUnsavedChanges,
-    error,
-    handleFileSelect,
-    handleContentChange,
-    handleSave,
-    pullLatestChanges,
-    lookupFileByName,
-  };
-};
-
-export default useFileManagement;
--- a/frontend/src/hooks/useFileNavigation.js
+++ b/frontend/src/hooks/useFileNavigation.js
@@ -0,0 +1,38 @@
+import { useState, useCallback } from 'react';
+import { useToasts } from '@geist-ui/core';
+import { lookupFileByName } from '../services/api';
+import { DEFAULT_FILE } from '../utils/constants';
+
+export const useFileNavigation = () => {
+  const { setToast } = useToasts();
+
+  const [selectedFile, setSelectedFile] = useState(DEFAULT_FILE.path);
+  const [isNewFile, setIsNewFile] = useState(true);
+
+  const handleFileSelect = useCallback((filePath) => {
+    setSelectedFile(filePath);
+    setIsNewFile(filePath === DEFAULT_FILE.path);
+  }, []);
+
+  const handleLinkClick = useCallback(
+    async (filename) => {
+      try {
+        const filePaths = await lookupFileByName(filename);
+        if (filePaths.length >= 1) {
+          handleFileSelect(filePaths[0]);
+        } else {
+          setToast({ text: `File "${filename}" not found`, type: 'error' });
+        }
+      } catch (error) {
+        console.error('Error looking up file:', error);
+        setToast({
+          text: 'Failed to lookup file.',
+          type: 'error',
+        });
+      }
+    },
+    [handleFileSelect, setToast]
+  );
+
+  return { handleLinkClick, selectedFile, isNewFile, handleFileSelect };
+};
--- a/frontend/src/hooks/useFileOperations.js
+++ b/frontend/src/hooks/useFileOperations.js
@@ -0,0 +1,54 @@
+import { useCallback } from 'react';
+import { saveFileContent, deleteFile } from '../services/api';
+import { useToasts } from '@geist-ui/core';
+
+export const useFileOperations = () => {
+  const { setToast } = useToasts();
+
+  const handleSave = useCallback(
+    async (filePath, content) => {
+      try {
+        await saveFileContent(filePath, content);
+        setToast({ text: 'File saved successfully', type: 'success' });
+        return true;
+      } catch (error) {
+        console.error('Error saving file:', error);
+        setToast({ text: 'Failed to save file', type: 'error' });
+        return false;
+      }
+    },
+    [setToast]
+  );
+
+  const handleDelete = useCallback(
+    async (filePath) => {
+      try {
+        await deleteFile(filePath);
+        setToast({ text: 'File deleted successfully', type: 'success' });
+        return true;
+      } catch (error) {
+        setToast({ text: `Error deleting file`, type: 'error' });
+        console.error('Error deleting file:', error);
+        return false;
+      }
+    },
+    [setToast]
+  );
+
+  const handleCreate = useCallback(
+    async (fileName, initialContent = '') => {
+      try {
+        await saveFileContent(fileName, initialContent);
+        setToast({ text: 'File created successfully', type: 'success' });
+        return true;
+      } catch (error) {
+        setToast({ text: `Error creating new file`, type: 'error' });
+        console.error('Error creating new file:', error);
+        return false;
+      }
+    },
+    [setToast]
+  );
+
+  return { handleSave, handleDelete, handleCreate };
+};
--- a/frontend/src/hooks/useGitOperations.js
+++ b/frontend/src/hooks/useGitOperations.js
@@ -0,0 +1,38 @@
+import { useCallback } from 'react';
+import { pullChanges, commitAndPush } from '../services/api';
+
+export const useGitOperations = (gitEnabled) => {
+  const handlePull = useCallback(async () => {
+    if (!gitEnabled) return false;
+    try {
+      await pullChanges();
+      setToast({ text: 'Successfully pulled latest changes', type: 'success' });
+      return true;
+    } catch (error) {
+      console.error('Failed to pull latest changes:', error);
+      setToast({ text: 'Failed to pull latest changes', type: 'error' });
+      return false;
+    }
+  }, [gitEnabled]);
+
+  const handleCommitAndPush = useCallback(
+    async (message) => {
+      if (!gitEnabled) return false;
+      try {
+        await commitAndPush(message);
+        setToast({
+          text: 'Successfully committed and pushed changes',
+          type: 'success',
+        });
+        return true;
+      } catch (error) {
+        console.error('Failed to commit and push changes:', error);
+        setToast({ text: 'Failed to commit and push changes', type: 'error' });
+        return false;
+      }
+    },
+    [gitEnabled]
+  );
+
+  return { handlePull, handleCommitAndPush };
+};
--- a/frontend/src/utils/constants.js
+++ b/frontend/src/utils/constants.js
@@ -0,0 +1,48 @@
+export const API_BASE_URL = window.API_BASE_URL;
+
+export const THEMES = {
+  LIGHT: 'light',
+  DARK: 'dark',
+};
+
+export const FILE_ACTIONS = {
+  CREATE: 'create',
+  DELETE: 'delete',
+  RENAME: 'rename',
+};
+
+export const MODAL_TYPES = {
+  NEW_FILE: 'newFile',
+  DELETE_FILE: 'deleteFile',
+  COMMIT_MESSAGE: 'commitMessage',
+};
+
+export const IMAGE_EXTENSIONS = [
+  '.jpg',
+  '.jpeg',
+  '.png',
+  '.gif',
+  '.webp',
+  '.svg',
+];
+
+export const DEFAULT_SETTINGS = {
+  theme: THEMES.LIGHT,
+  autoSave: false,
+  gitEnabled: false,
+  gitUrl: '',
+  gitUser: '',
+  gitToken: '',
+  gitAutoCommit: false,
+  gitCommitMsgTemplate: 'Update ${filename}',
+};
+
+export const DEFAULT_FILE = {
+  name: 'New File.md',
+  path: 'New File.md',
+  content: '# Welcome to NovaMD\n\nStart editing here!',
+};
+
+export const MARKDOWN_REGEX = {
+  WIKILINK: /(!?)\[\[(.*?)\]\]/g,
+};
--- a/frontend/src/utils/fileHelpers.js
+++ b/frontend/src/utils/fileHelpers.js
@@ -1,4 +1,5 @@
+import { IMAGE_EXTENSIONS } from './constants';
+
 export const isImageFile = (filePath) => {
-  const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.svg'];
-  return imageExtensions.some((ext) => filePath.toLowerCase().endsWith(ext));
+  return IMAGE_EXTENSIONS.some((ext) => filePath.toLowerCase().endsWith(ext));
 };