lordmathis · lordmathis · May 25, 2025 · May 25, 2025 · May 25, 2025 · May 25, 2025
diff --git a/.github/workflows/typescript.yml b/.github/workflows/typescript.yml
@@ -12,6 +12,9 @@ jobs:
   type-check:
     name: TypeScript Type Check
     runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./app
 
     steps:
       - name: Checkout code
@@ -22,17 +25,14 @@ jobs:
         with:
           node-version: "22"
           cache: "npm"
+          cache-dependency-path: "./app/package-lock.json"
 
       - name: Install dependencies
         run: npm ci
-        working-directory: ./app
 
       - name: Run TypeScript type check
         run: npm run type-check
-        working-directory: ./app
 
-      # Optional: Run ESLint if you have it configured
       - name: Run ESLint
         run: npm run lint
-        working-directory: ./app
-        continue-on-error: true # Make this optional for now
+        continue-on-error: true
diff --git a/app/src/api/api.ts b/app/src/api/api.ts
@@ -1,5 +1,22 @@
 import { refreshToken } from './auth';
 
+/**
+ * Gets the CSRF token from cookies
+ * @returns {string} The CSRF token or an empty string if not found
+ */
+const getCsrfToken = (): string => {
+  const cookies = document.cookie.split(';');
+  let csrfToken = '';
+  for (const cookie of cookies) {
+    const [name, value] = cookie.trim().split('=');
+    if (name === 'csrf_token' && value) {
+      csrfToken = decodeURIComponent(value);
+      break;
+    }
+  }
+  return csrfToken;
+};
+
 /**
  * Makes an API call with proper cookie handling and error handling
  */
@@ -9,14 +26,26 @@ export const apiCall = async (
 ): Promise<Response> => {
   console.debug(`Making API call to: ${url}`);
   try {
+    // Set up headers with CSRF token for non-GET requests
+    const method = options.method || 'GET';
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json',
+      ...(options.headers as Record<string, string>),
+    };
+
+    // Add CSRF token for non-GET methods
+    if (method !== 'GET') {
+      const csrfToken = getCsrfToken();
+      if (csrfToken) {
+        headers['X-CSRF-Token'] = csrfToken;
+      }
+    }
+
     const response = await fetch(url, {
       ...options,
       // Include credentials to send/receive cookies
       credentials: 'include',
-      headers: {
-        'Content-Type': 'application/json',
-        ...options.headers,
-      },
+      headers,
     });
     console.debug(`Response status: ${response.status} for URL: ${url}`);
 

diff --git a/app/src/components/editor/Editor.tsx b/app/src/components/editor/Editor.tsx
@@ -5,7 +5,7 @@ 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 { useWorkspace } from '../../contexts/WorkspaceContext';
+import { useWorkspace } from '../../hooks/useWorkspace';
 
 interface EditorProps {
   content: string;

diff --git a/app/src/components/editor/MarkdownPreview.tsx b/app/src/components/editor/MarkdownPreview.tsx
@@ -9,7 +9,7 @@ import rehypePrism from 'rehype-prism';
 import * as prod from 'react/jsx-runtime';
 import { notifications } from '@mantine/notifications';
 import { remarkWikiLinks } from '../../utils/remarkWikiLinks';
-import { useWorkspace } from '../../contexts/WorkspaceContext';
+import { useWorkspace } from '../../hooks/useWorkspace';
 
 interface MarkdownPreviewProps {
   content: string;

diff --git a/app/src/components/files/FileActions.tsx b/app/src/components/files/FileActions.tsx
@@ -7,7 +7,7 @@ import {
   IconGitCommit,
 } from '@tabler/icons-react';
 import { useModalContext } from '../../contexts/ModalContext';
-import { useWorkspace } from '../../contexts/WorkspaceContext';
+import { useWorkspace } from '../../hooks/useWorkspace';
 
 interface FileActionsProps {
   handlePullChanges: () => Promise<boolean>;

diff --git a/app/src/components/layout/Layout.tsx b/app/src/components/layout/Layout.tsx
@@ -5,7 +5,7 @@ import Sidebar from './Sidebar';
 import MainContent from './MainContent';
 import { useFileNavigation } from '../../hooks/useFileNavigation';
 import { useFileList } from '../../hooks/useFileList';
-import { useWorkspace } from '../../contexts/WorkspaceContext';
+import { useWorkspace } from '../../hooks/useWorkspace';
 
 const Layout: React.FC = () => {
   const { currentWorkspace, loading: workspaceLoading } = useWorkspace();

diff --git a/app/src/components/layout/Sidebar.tsx b/app/src/components/layout/Sidebar.tsx
@@ -3,7 +3,7 @@ import { Box } from '@mantine/core';
 import FileActions from '../files/FileActions';
 import FileTree from '../files/FileTree';
 import { useGitOperations } from '../../hooks/useGitOperations';
-import { useWorkspace } from '../../contexts/WorkspaceContext';
+import { useWorkspace } from '../../hooks/useWorkspace';
 import type { FileNode } from '@/types/models';
 
 interface SidebarProps {

diff --git a/app/src/components/navigation/UserMenu.tsx b/app/src/components/navigation/UserMenu.tsx
@@ -102,7 +102,10 @@ const UserMenu: React.FC = () => {
             )}
 
             <UnstyledButton
-              onClick={() => void handleLogout}
+              onClick={() => {
+                void handleLogout();
+                setOpened(false);
+              }}
               px="sm"
               py="xs"
               color="red"

diff --git a/app/src/components/navigation/WorkspaceSwitcher.tsx b/app/src/components/navigation/WorkspaceSwitcher.tsx
@@ -15,7 +15,7 @@ import {
   useMantineTheme,
 } from '@mantine/core';
 import { IconFolders, IconSettings, IconFolderPlus } from '@tabler/icons-react';
-import { useWorkspace } from '../../contexts/WorkspaceContext';
+import { useWorkspace } from '../../hooks/useWorkspace';
 import { useModalContext } from '../../contexts/ModalContext';
 import { listWorkspaces } from '../../api/workspace';
 import CreateWorkspaceModal from '../modals/workspace/CreateWorkspaceModal';

diff --git a/app/src/components/settings/workspace/AppearanceSettings.tsx b/app/src/components/settings/workspace/AppearanceSettings.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Text, Switch, Group, Box } from '@mantine/core';
-import { useWorkspace } from '../../../contexts/WorkspaceContext';
+import { useTheme } from '../../../contexts/ThemeContext';
 import { Theme } from '@/types/models';
 
 interface AppearanceSettingsProps {
@@ -10,7 +10,7 @@ interface AppearanceSettingsProps {
 const AppearanceSettings: React.FC<AppearanceSettingsProps> = ({
   onThemeChange,
 }) => {
-  const { colorScheme, updateColorScheme } = useWorkspace();
+  const { colorScheme, updateColorScheme } = useTheme();
 
   const handleThemeChange = (): void => {
     const newTheme = colorScheme === 'dark' ? Theme.Light : Theme.Dark;

diff --git a/app/src/components/settings/workspace/DangerZoneSettings.tsx b/app/src/components/settings/workspace/DangerZoneSettings.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Box, Button } from '@mantine/core';
 import DeleteWorkspaceModal from '../../modals/workspace/DeleteWorkspaceModal';
-import { useWorkspace } from '../../../contexts/WorkspaceContext';
+import { useWorkspace } from '../../../hooks/useWorkspace';
 import { useModalContext } from '../../../contexts/ModalContext';
 
 const DangerZoneSettings: React.FC = () => {

diff --git a/app/src/components/settings/workspace/WorkspaceSettings.tsx b/app/src/components/settings/workspace/WorkspaceSettings.tsx
@@ -9,7 +9,7 @@ import {
   Accordion,
 } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
-import { useWorkspace } from '../../../contexts/WorkspaceContext';
+import { useWorkspace } from '../../../hooks/useWorkspace';
 import AppearanceSettings from './AppearanceSettings';
 import EditorSettings from './EditorSettings';
 import GitSettings from './GitSettings';

diff --git a/app/src/contexts/ThemeContext.tsx b/app/src/contexts/ThemeContext.tsx
@@ -0,0 +1,46 @@
+import React, {
+  createContext,
+  useContext,
+  useCallback,
+  type ReactNode,
+} from 'react';
+import { useMantineColorScheme, type MantineColorScheme } from '@mantine/core';
+
+interface ThemeContextType {
+  colorScheme: MantineColorScheme;
+  updateColorScheme: (newTheme: MantineColorScheme) => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | null>(null);
+
+interface ThemeProviderProps {
+  children: ReactNode;
+}
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
+  const { colorScheme, setColorScheme } = useMantineColorScheme();
+
+  const updateColorScheme = useCallback(
+    (newTheme: MantineColorScheme): void => {
+      setColorScheme(newTheme);
+    },
+    [setColorScheme]
+  );
+
+  const value: ThemeContextType = {
+    colorScheme,
+    updateColorScheme,
+  };
+
+  return (
+    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+  );
+};
+
+export const useTheme = (): ThemeContextType => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+};