Split large components

frontend/src/App.scss

@@ -14,11 +14,6 @@ $navbar-height: 64px;
 
   .file-tree-container {
     width: 100%;
-
-    & > div {
-      padding: 0;
-      margin: 0;
-    }
   }
 }
 

frontend/src/components/ContentView.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import Editor from './Editor';
+import MarkdownPreview from './MarkdownPreview';
+import { getFileUrl } from '../services/api';
+import { isImageFile } from '../utils/fileHelpers';
+
+const ContentView = ({
+  activeTab,
+  content,
+  selectedFile,
+  onContentChange,
+  onSave,
+  themeType,
+  onLinkClick,
+  lookupFileByName,
+}) => {
+  if (isImageFile(selectedFile)) {
+    return (
+      <div className="image-preview">
+        <img
+          src={getFileUrl(selectedFile)}
+          alt={selectedFile}
+          style={{
+            maxWidth: '100%',
+            maxHeight: '100%',
+            objectFit: 'contain',
+          }}
+        />
+      </div>
+    );
+  }
+
+  return activeTab === 'source' ? (
+    <Editor
+      content={content}
+      onChange={onContentChange}
+      onSave={onSave}
+      filePath={selectedFile}
+      themeType={themeType}
+    />
+  ) : (
+    <MarkdownPreview
+      content={content}
+      baseUrl={window.API_BASE_URL}
+      onLinkClick={onLinkClick}
+      lookupFileByName={lookupFileByName}
+    />
+  );
+};
+
+export default ContentView;

frontend/src/components/FileActions.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import { Button, Tooltip, ButtonGroup, Spacer } from '@geist-ui/core';
+import { Plus, Trash, GitPullRequest, GitCommit } from '@geist-ui/icons';
+
+const FileActions = ({
+  selectedFile,
+  gitEnabled,
+  gitAutoCommit,
+  onPull,
+  onCommitAndPush,
+  onCreateFile,
+  onDeleteFile,
+}) => {
+  return (
+    <ButtonGroup className="file-actions">
+      <Tooltip text="Create new file" type="dark">
+        <Button
+          icon={<Plus />}
+          auto
+          scale={2 / 3}
+          onClick={onCreateFile}
+          px={0.6}
+        />
+      </Tooltip>
+      <Spacer w={0.5} />
+      <Tooltip
+        text={selectedFile ? 'Delete current file' : 'No file selected'}
+        type="dark"
+      >
+        <Button
+          icon={<Trash />}
+          auto
+          scale={2 / 3}
+          onClick={onDeleteFile}
+          disabled={!selectedFile}
+          type="error"
+          px={0.6}
+        />
+      </Tooltip>
+      <Spacer w={0.5} />
+      <Tooltip
+        text={gitEnabled ? 'Pull changes from remote' : 'Git is not enabled'}
+        type="dark"
+      >
+        <Button
+          icon={<GitPullRequest />}
+          auto
+          scale={2 / 3}
+          onClick={onPull}
+          disabled={!gitEnabled}
+          px={0.6}
+        />
+      </Tooltip>
+      <Spacer w={0.5} />
+      <Tooltip
+        text={
+          !gitEnabled
+            ? 'Git is not enabled'
+            : gitAutoCommit
+            ? 'Auto-commit is enabled'
+            : 'Commit and push changes'
+        }
+        type="dark"
+      >
+        <Button
+          icon={<GitCommit />}
+          auto
+          scale={2 / 3}
+          onClick={onCommitAndPush}
+          disabled={!gitEnabled || gitAutoCommit}
+          px={0.6}
+        />
+      </Tooltip>
+    </ButtonGroup>
+  );
+};
+
+export default FileActions;

frontend/src/components/FileTree.js

@@ -1,26 +1,11 @@
 import React from 'react';
-import { Tree, Button, Tooltip, Spacer, ButtonGroup } from '@geist-ui/core';
-import {
-  File,
-  Folder,
-  GitPullRequest,
-  GitCommit,
-  Plus,
-  Trash,
-  Image,
-} from '@geist-ui/icons';
-import { isImageFile } from '../utils/fileHelpers';
+import { Tree } from '@geist-ui/core';
+import { File, Folder, Image } from '@geist-ui/icons';
 
 const FileTree = ({
   files = [],
   onFileSelect = () => {},
   selectedFile = null,
-  gitEnabled = false,
-  gitAutoCommit = false,
-  onPull = () => {},
-  onCommitAndPush = () => {},
-  onCreateFile = () => {},
-  onDeleteFile = () => {},
 }) => {
   if (files.length === 0) {
     return <div>No files to display</div>;
@@ -39,80 +24,23 @@ const FileTree = ({
     );
   };
 
+  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 />;
   };
 
   return (
-    <div>
-      <ButtonGroup className="file-tree-buttons">
-        <Tooltip text="Create new file" type="dark">
-          <Button
-            icon={<Plus />}
-            auto
-            scale={2 / 3}
-            onClick={onCreateFile}
-            px={0.6}
-          />
-        </Tooltip>
-        <Spacer w={0.5} />
-        <Tooltip
-          text={selectedFile ? 'Delete current file' : 'No file selected'}
-          type="dark"
-        >
-          <Button
-            icon={<Trash />}
-            auto
-            scale={2 / 3}
-            onClick={onDeleteFile}
-            disabled={!selectedFile}
-            type="error"
-            px={0.6}
-          />
-        </Tooltip>
-        <Spacer w={0.5} />
-        <Tooltip
-          text={gitEnabled ? 'Pull changes from remote' : 'Git is not enabled'}
-          type="dark"
-        >
-          <Button
-            icon={<GitPullRequest />}
-            auto
-            scale={2 / 3}
-            onClick={onPull}
-            disabled={!gitEnabled}
-            px={0.6}
-          />
-        </Tooltip>
-        <Spacer w={0.5} />
-        <Tooltip
-          text={
-            !gitEnabled
-              ? 'Git is not enabled'
-              : gitAutoCommit
-              ? 'Auto-commit is enabled'
-              : 'Commit and push changes'
-          }
-          type="dark"
-        >
-          <Button
-            icon={<GitCommit />}
-            auto
-            scale={2 / 3}
-            onClick={onCommitAndPush}
-            disabled={!gitEnabled || gitAutoCommit}
-            px={0.6}
-          />
-        </Tooltip>
-      </ButtonGroup>
-      <Tree
-        value={files}
-        onClick={handleSelect}
-        renderIcon={renderIcon}
-        renderLabel={renderLabel}
-      />
-    </div>
+    <Tree
+      value={files}
+      onClick={handleSelect}
+      renderIcon={renderIcon}
+      renderLabel={renderLabel}
+    />
   );
 };
 

frontend/src/components/MainContent.js

@@ -11,16 +11,10 @@ import {
   Button,
 } from '@geist-ui/core';
 import { Code, Eye } from '@geist-ui/icons';
-import Editor from './Editor';
 import FileTree from './FileTree';
-import MarkdownPreview from './MarkdownPreview';
-import {
-  commitAndPush,
-  saveFileContent,
-  deleteFile,
-  getFileUrl,
-  lookupFileByName,
-} from '../services/api';
+import FileActions from './FileActions';
+import ContentView from './ContentView';
+import { commitAndPush, saveFileContent, deleteFile } from '../services/api';
 import { isImageFile } from '../utils/fileHelpers';
 
 const MainContent = ({
@@ -33,33 +27,31 @@ const MainContent = ({
   onContentChange,
   onSave,
   settings,
-  onPullLatestChanges,
+  pullLatestChanges,
   onLinkClick,
+  lookupFileByName,
 }) => {
   const [activeTab, setActiveTab] = useState('source');
   const { type: themeType } = useTheme();
   const { setToast } = useToasts();
   const [newFileModalVisible, setNewFileModalVisible] = useState(false);
   const [newFileName, setNewFileName] = useState('');
-  const [isCurrentFileImage, setIsCurrentFileImage] = useState(false);
 
   useEffect(() => {
-    const currentFileIsImage = isImageFile(selectedFile);
-    setIsCurrentFileImage(currentFileIsImage);
-    if (currentFileIsImage) {
+    if (isImageFile(selectedFile)) {
       setActiveTab('preview');
     }
   }, [selectedFile]);
 
   const handleTabChange = (value) => {
-    if (!isCurrentFileImage || value === 'preview') {
+    if (!isImageFile(selectedFile) || value === 'preview') {
       setActiveTab(value);
     }
   };
 
   const handlePull = async () => {
     try {
-      await onPullLatestChanges();
+      await pullLatestChanges();
       setToast({ text: 'Successfully pulled latest changes', type: 'success' });
     } catch (error) {
       setToast({
@@ -78,7 +70,7 @@ const MainContent = ({
           text: 'Changes committed and pushed successfully',
           type: 'success',
         });
-        await onPullLatestChanges(); // Pull changes after successful push
+        await pullLatestChanges();
       }
     } catch (error) {
       setToast({
@@ -97,8 +89,8 @@ const MainContent = ({
       try {
         await saveFileContent(newFileName, '');
         setToast({ text: 'New file created successfully', type: 'success' });
-        await onPullLatestChanges(); // Refresh file list
-        onFileSelect(newFileName); // Select the new file
+        await pullLatestChanges();
+        onFileSelect(newFileName);
       } catch (error) {
         setToast({
           text: 'Failed to create new file: ' + error.message,
@@ -119,8 +111,8 @@ const MainContent = ({
         try {
           await deleteFile(selectedFile);
           setToast({ text: 'File deleted successfully', type: 'success' });
-          await onPullLatestChanges(); // Refresh file list
-          onFileSelect(null); // Deselect the file
+          await pullLatestChanges();
+          onFileSelect(null);
         } catch (error) {
           setToast({
             text: 'Failed to delete file: ' + error.message,
@@ -153,9 +145,7 @@ 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">
-            <FileTree
-              files={files}
-              onFileSelect={onFileSelect}
+            <FileActions
               selectedFile={selectedFile}
               gitEnabled={settings.gitEnabled}
               gitAutoCommit={settings.gitAutoCommit}
@@ -164,6 +154,11 @@ const MainContent = ({
               onCreateFile={handleCreateFile}
               onDeleteFile={handleDeleteFile}
             />
+            <FileTree
+              files={files}
+              onFileSelect={onFileSelect}
+              selectedFile={selectedFile}
+            />
           </div>
         </Grid>
         <Grid
@@ -180,40 +175,22 @@ const MainContent = ({
               <Tabs.Item
                 label={<Code />}
                 value="source"
-                disabled={isCurrentFileImage}
+                disabled={isImageFile(selectedFile)}
               />
               <Tabs.Item label={<Eye />} value="preview" />
             </Tabs>
           </div>
           <div className="content-body">
-            {activeTab === 'source' && !isCurrentFileImage ? (
-              <Editor
-                content={content}
-                onChange={onContentChange}
-                onSave={onSave}
-                filePath={selectedFile}
-                themeType={themeType}
-              />
-            ) : isCurrentFileImage ? (
-              <div className="image-preview">
-                <img
-                  src={getFileUrl(selectedFile)}
-                  alt={selectedFile}
-                  style={{
-                    maxWidth: '100%',
-                    maxHeight: '100%',
-                    objectFit: 'contain',
-                  }}
-                />
-              </div>
-            ) : (
-              <MarkdownPreview
-                content={content}
-                baseUrl={window.API_BASE_URL}
-                onLinkClick={onLinkClick}
-                lookupFileByName={lookupFileByName}
-              />
-            )}
+            <ContentView
+              activeTab={activeTab}
+              content={content}
+              selectedFile={selectedFile}
+              onContentChange={onContentChange}
+              onSave={onSave}
+              themeType={themeType}
+              onLinkClick={onLinkClick}
+              lookupFileByName={lookupFileByName}
+            />
           </div>
         </Grid>
       </Grid.Container>

frontend/src/components/Settings.js

@@ -1,16 +1,9 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import {
-  Modal,
-  Text,
-  Toggle,
-  Input,
-  Spacer,
-  useTheme,
-  Button,
-  Dot,
-  useToasts,
-} from '@geist-ui/core';
+import { Modal, Spacer, useTheme, Dot, useToasts } from '@geist-ui/core';
 import { saveUserSettings, fetchUserSettings } from '../services/api';
+import AppearanceSettings from './settings/AppearanceSettings';
+import EditorSettings from './settings/EditorSettings';
+import GitSettings from './settings/GitSettings';
 
 const Settings = ({ visible, onClose, currentTheme, onThemeChange }) => {
   const theme = useTheme();
@@ -97,86 +90,25 @@ const Settings = ({ visible, onClose, currentTheme, onThemeChange }) => {
         )}
       </Modal.Title>
       <Modal.Content>
-        <div className="setting-group">
-          <Text h4>Appearance</Text>
-          <div className="setting-item">
-            <Text>Dark Mode</Text>
-            <Toggle
-              checked={themeSettings === 'dark'}
-              onChange={handleThemeChange}
-            />
-          </div>
-        </div>
+        <AppearanceSettings
+          themeSettings={themeSettings}
+          onThemeChange={handleThemeChange}
+        />
         <Spacer h={1} />
-        <div className="setting-group">
-          <Text h4>Editor</Text>
-          <div className="setting-item">
-            <Text>Auto Save</Text>
-            <Toggle
-              checked={settings.autoSave}
-              onChange={(e) => handleInputChange('autoSave', e.target.checked)}
-            />
-          </div>
-        </div>
+        <EditorSettings
+          autoSave={settings.autoSave}
+          onAutoSaveChange={(value) => handleInputChange('autoSave', value)}
+        />
         <Spacer h={1} />
-        <div className="setting-group">
-          <Text h4>Git Integration</Text>
-          <div className="setting-item">
-            <Text>Enable Git</Text>
-            <Toggle
-              checked={settings.gitEnabled}
-              onChange={(e) =>
-                handleInputChange('gitEnabled', e.target.checked)
-              }
-            />
-          </div>
-          <div className={settings.gitEnabled ? '' : 'disabled'}>
-            <Input
-              width="100%"
-              label="Git URL"
-              value={settings.gitUrl}
-              onChange={(e) => handleInputChange('gitUrl', e.target.value)}
-              disabled={!settings.gitEnabled}
-            />
-            <Spacer h={0.5} />
-            <Input
-              width="100%"
-              label="Git Username"
-              value={settings.gitUser}
-              onChange={(e) => handleInputChange('gitUser', e.target.value)}
-              disabled={!settings.gitEnabled}
-            />
-            <Spacer h={0.5} />
-            <Input.Password
-              width="100%"
-              label="Git Token"
-              value={settings.gitToken}
-              onChange={(e) => handleInputChange('gitToken', e.target.value)}
-              disabled={!settings.gitEnabled}
-            />
-            <Spacer h={0.5} />
-            <div className="setting-item">
-              <Text>Auto Commit</Text>
-              <Toggle
-                checked={settings.gitAutoCommit}
-                onChange={(e) =>
-                  handleInputChange('gitAutoCommit', e.target.checked)
-                }
-                disabled={!settings.gitEnabled}
-              />
-            </div>
-            <Spacer h={0.5} />
-            <Input
-              width="100%"
-              label="Commit Message Template"
-              value={settings.gitCommitMsgTemplate}
-              onChange={(e) =>
-                handleInputChange('gitCommitMsgTemplate', e.target.value)
-              }
-              disabled={!settings.gitEnabled}
-            />
-          </div>
-        </div>
+        <GitSettings
+          gitEnabled={settings.gitEnabled}
+          gitUrl={settings.gitUrl}
+          gitUser={settings.gitUser}
+          gitToken={settings.gitToken}
+          gitAutoCommit={settings.gitAutoCommit}
+          gitCommitMsgTemplate={settings.gitCommitMsgTemplate}
+          onInputChange={handleInputChange}
+        />
       </Modal.Content>
       <Modal.Action passive onClick={onClose}>
         Cancel

frontend/src/components/settings/AppearanceSettings.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Text, Toggle } from '@geist-ui/core';
+
+const AppearanceSettings = ({ themeSettings, onThemeChange }) => {
+  return (
+    <div className="setting-group">
+      <Text h4>Appearance</Text>
+      <div className="setting-item">
+        <Text>Dark Mode</Text>
+        <Toggle checked={themeSettings === 'dark'} onChange={onThemeChange} />
+      </div>
+    </div>
+  );
+};
+
+export default AppearanceSettings;

frontend/src/components/settings/EditorSettings.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Text, Toggle, Tooltip } from '@geist-ui/core';
+
+const EditorSettings = ({ autoSave, onAutoSaveChange }) => {
+  return (
+    <div className="setting-group">
+      <Text h4>Editor</Text>
+      <div className="setting-item">
+        <Text>Auto Save</Text>
+        <Tooltip
+          text="Auto Save feature is coming soon!"
+          type="dark"
+          placement="left"
+        >
+          <Toggle
+            checked={autoSave}
+            onChange={(e) => onAutoSaveChange(e.target.checked)}
+            disabled
+          />
+        </Tooltip>
+      </div>
+    </div>
+  );
+};
+
+export default EditorSettings;

frontend/src/components/settings/GitSettings.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Text, Toggle, Input, Spacer } from '@geist-ui/core';
+
+const GitSettings = ({
+  gitEnabled,
+  gitUrl,
+  gitUser,
+  gitToken,
+  gitAutoCommit,
+  gitCommitMsgTemplate,
+  onInputChange,
+}) => {
+  return (
+    <div className="setting-group">
+      <Text h4>Git Integration</Text>
+      <div className="setting-item">
+        <Text>Enable Git</Text>
+        <Toggle
+          checked={gitEnabled}
+          onChange={(e) => onInputChange('gitEnabled', e.target.checked)}
+        />
+      </div>
+      <div className={gitEnabled ? '' : 'disabled'}>
+        <Input
+          width="100%"
+          label="Git URL"
+          value={gitUrl}
+          onChange={(e) => onInputChange('gitUrl', e.target.value)}
+          disabled={!gitEnabled}
+        />
+        <Spacer h={0.5} />
+        <Input
+          width="100%"
+          label="Git Username"
+          value={gitUser}
+          onChange={(e) => onInputChange('gitUser', e.target.value)}
+          disabled={!gitEnabled}
+        />
+        <Spacer h={0.5} />
+        <Input.Password
+          width="100%"
+          label="Git Token"
+          value={gitToken}
+          onChange={(e) => onInputChange('gitToken', e.target.value)}
+          disabled={!gitEnabled}
+        />
+        <Spacer h={0.5} />
+        <div className="setting-item">
+          <Text>Auto Commit</Text>
+          <Toggle
+            checked={gitAutoCommit}
+            onChange={(e) => onInputChange('gitAutoCommit', e.target.checked)}
+            disabled={!gitEnabled}
+          />
+        </div>
+        <Spacer h={0.5} />
+        <Input
+          width="100%"
+          label="Commit Message Template"
+          value={gitCommitMsgTemplate}
+          onChange={(e) =>
+            onInputChange('gitCommitMsgTemplate', e.target.value)
+          }
+          disabled={!gitEnabled}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default GitSettings;