Migrate hooks

frontend/package-lock.json

@@ -9,14 +9,11 @@
       "version": "0.1.0",
       "license": "Apache-2.0",
       "dependencies": {
-        "@babel/runtime": "^7.25.7",
         "@codemirror/commands": "^6.6.2",
         "@codemirror/lang-markdown": "^6.2.5",
         "@codemirror/state": "^6.4.1",
         "@codemirror/theme-one-dark": "^6.1.2",
         "@codemirror/view": "^6.34.0",
-        "@geist-ui/core": "^2.3.8",
-        "@geist-ui/icons": "^1.0.2",
         "@mantine/core": "^7.13.2",
         "@mantine/hooks": "^7.13.2",
         "@mantine/modals": "^7.13.2",
@@ -2230,29 +2227,6 @@
       "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==",
       "license": "MIT"
     },
-    "node_modules/@geist-ui/core": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/@geist-ui/core/-/core-2.3.8.tgz",
-      "integrity": "sha512-OKwGgTA4+fBM41eQbqDoUj4XBycZbYH7Ynrn6LPO5yKX7zeWPu/R7HN3vB4/oHt34VTDQI5sDNb1SirHvNyB5w==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.16.7"
-      },
-      "peerDependencies": {
-        "react": ">=16.9.0",
-        "react-dom": ">=16.9.0"
-      }
-    },
-    "node_modules/@geist-ui/icons": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@geist-ui/icons/-/icons-1.0.2.tgz",
-      "integrity": "sha512-Npfa0NW6fQ31qw/+iMPWbs1hAcJ/3FqBjSLYgEfITDqy/3TJFpFKeVyK04AC/hTmYTsdNruVYczqPNcham5FOQ==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@geist-ui/core": ">=1.0.0",
-        "react": ">=16.13.0"
-      }
-    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",

frontend/package.json

@@ -22,14 +22,11 @@
   },
   "homepage": "https://github.com/LordMathis/NovaMD#readme",
   "dependencies": {
-    "@babel/runtime": "^7.25.7",
     "@codemirror/commands": "^6.6.2",
     "@codemirror/lang-markdown": "^6.2.5",
     "@codemirror/state": "^6.4.1",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.34.0",
-    "@geist-ui/core": "^2.3.8",
-    "@geist-ui/icons": "^1.0.2",
     "@mantine/core": "^7.13.2",
     "@mantine/hooks": "^7.13.2",
     "@mantine/modals": "^7.13.2",

frontend/src/App.js

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { GeistProvider, CssBaseline } from '@geist-ui/core';
 import {
   MantineProvider,
   createTheme,
@@ -29,24 +28,21 @@ function AppContent() {
   }
 
   return (
-    <GeistProvider themeType={settings.theme}>
+    <MantineProvider theme={mantineTheme} defaultColorScheme={settings.theme}>
-      <CssBaseline />
+      <Notifications />
-      <MantineProvider theme={mantineTheme} defaultColorScheme={settings.theme}>
+      <ModalsProvider>
-        <Notifications />
+        <AppShell header={{ height: 60 }} padding="md">
-        <ModalsProvider>
+          <AppShell.Header>
-          <AppShell header={{ height: 60 }} padding="md">
+            <Header />
-            <AppShell.Header>
+          </AppShell.Header>
-              <Header />
+          <AppShell.Main>
-            </AppShell.Header>
+            <Container size="xl">
-            <AppShell.Main>
+              <MainContent />
-              <Container size="xl">
+            </Container>
-                <MainContent />
+          </AppShell.Main>
-              </Container>
+        </AppShell>
-            </AppShell.Main>
+      </ModalsProvider>
-          </AppShell>
+    </MantineProvider>
-        </ModalsProvider>
-      </MantineProvider>
-    </GeistProvider>
   );
 }
 

frontend/src/App.scss

@@ -108,26 +108,3 @@ $navbar-height: 64px;
 .tree {
   padding-top: $padding;
 }
-
-// Geist UI Tree component customization
-:global {
-  .file-tree {
-    .label {
-      display: flex;
-      align-items: center;
-    }
-
-    .icon {
-      margin-right: 8px;
-    }
-
-    .name {
-      font-size: 14px;
-    }
-
-    .selected {
-      color: #0070f3;
-      font-weight: bold;
-    }
-  }
-}

frontend/src/hooks/useFileList.js

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useCallback } from 'react';
 import { fetchFileList } from '../services/api';
 
 export const useFileList = () => {

frontend/src/hooks/useFileNavigation.js

@@ -1,11 +1,9 @@
 import { useState, useCallback } from 'react';
-import { useToasts } from '@geist-ui/core';
+import { notifications } from '@mantine/notifications';
 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);
 
@@ -21,17 +19,22 @@ export const useFileNavigation = () => {
         if (filePaths.length >= 1) {
           handleFileSelect(filePaths[0]);
         } else {
-          setToast({ text: `File "${filename}" not found`, type: 'error' });
+          notifications.show({
+            title: 'File Not Found',
+            message: `File "${filename}" not found`,
+            color: 'red',
+          });
         }
       } catch (error) {
         console.error('Error looking up file:', error);
-        setToast({
+        notifications.show({
-          text: 'Failed to lookup file.',
+          title: 'Error',
-          type: 'error',
+          message: 'Failed to lookup file.',
+          color: 'red',
         });
       }
     },
-    [handleFileSelect, setToast]
+    [handleFileSelect]
   );
 
   return { handleLinkClick, selectedFile, isNewFile, handleFileSelect };

frontend/src/hooks/useFileOperations.js

@@ -1,54 +1,67 @@
 import { useCallback } from 'react';
+import { notifications } from '@mantine/notifications';
 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);
+      notifications.show({
+        title: 'Success',
+        message: 'File saved successfully',
+        color: 'green',
+      });
+      return true;
+    } catch (error) {
+      console.error('Error saving file:', error);
+      notifications.show({
+        title: 'Error',
+        message: 'Failed to save file',
+        color: 'red',
+      });
+      return false;
+    }
+  }, []);
 
-  const handleSave = useCallback(
+  const handleDelete = useCallback(async (filePath) => {
-    async (filePath, content) => {
+    try {
-      try {
+      await deleteFile(filePath);
-        await saveFileContent(filePath, content);
+      notifications.show({
-        setToast({ text: 'File saved successfully', type: 'success' });
+        title: 'Success',
-        return true;
+        message: 'File deleted successfully',
-      } catch (error) {
+        color: 'green',
-        console.error('Error saving file:', error);
+      });
-        setToast({ text: 'Failed to save file', type: 'error' });
+      return true;
-        return false;
+    } catch (error) {
-      }
+      console.error('Error deleting file:', error);
-    },
+      notifications.show({
-    [setToast]
+        title: 'Error',
-  );
+        message: 'Failed to delete file',
+        color: 'red',
+      });
+      return false;
+    }
+  }, []);
 
-  const handleDelete = useCallback(
+  const handleCreate = useCallback(async (fileName, initialContent = '') => {
-    async (filePath) => {
+    try {
-      try {
+      await saveFileContent(fileName, initialContent);
-        await deleteFile(filePath);
+      notifications.show({
-        setToast({ text: 'File deleted successfully', type: 'success' });
+        title: 'Success',
-        return true;
+        message: 'File created successfully',
-      } catch (error) {
+        color: 'green',
-        setToast({ text: `Error deleting file`, type: 'error' });
+      });
-        console.error('Error deleting file:', error);
+      return true;
-        return false;
+    } catch (error) {
-      }
+      console.error('Error creating new file:', error);
-    },
+      notifications.show({
-    [setToast]
+        title: 'Error',
-  );
+        message: 'Failed to create new file',
-
+        color: 'red',
-  const handleCreate = useCallback(
+      });
-    async (fileName, initialContent = '') => {
+      return false;
-      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 };
 };

frontend/src/hooks/useGitOperations.js

@@ -1,4 +1,5 @@
 import { useCallback } from 'react';
+import { notifications } from '@mantine/notifications';
 import { pullChanges, commitAndPush } from '../services/api';
 
 export const useGitOperations = (gitEnabled) => {
@@ -6,11 +7,19 @@ export const useGitOperations = (gitEnabled) => {
     if (!gitEnabled) return false;
     try {
       await pullChanges();
-      setToast({ text: 'Successfully pulled latest changes', type: 'success' });
+      notifications.show({
+        title: 'Success',
+        message: 'Successfully pulled latest changes',
+        color: 'green',
+      });
       return true;
     } catch (error) {
       console.error('Failed to pull latest changes:', error);
-      setToast({ text: 'Failed to pull latest changes', type: 'error' });
+      notifications.show({
+        title: 'Error',
+        message: 'Failed to pull latest changes',
+        color: 'red',
+      });
       return false;
     }
   }, [gitEnabled]);
@@ -20,14 +29,19 @@ export const useGitOperations = (gitEnabled) => {
       if (!gitEnabled) return false;
       try {
         await commitAndPush(message);
-        setToast({
+        notifications.show({
-          text: 'Successfully committed and pushed changes',
+          title: 'Success',
-          type: 'success',
+          message: 'Successfully committed and pushed changes',
+          color: 'green',
         });
         return true;
       } catch (error) {
         console.error('Failed to commit and push changes:', error);
-        setToast({ text: 'Failed to commit and push changes', type: 'error' });
+        notifications.show({
+          title: 'Error',
+          message: 'Failed to commit and push changes',
+          color: 'red',
+        });
         return false;
       }
     },