Add theme property to mock user in ProfileSettings tests

Fix file upload

.gitignore

@@ -162,3 +162,6 @@ go.work.sum
 main
 *.db
 data
+
+# Feature specifications
+spec.md

app/src/App.scss

@@ -108,29 +108,3 @@ $navbar-height: 64px;
 .tree {
   padding-top: $padding;
 }
-
-// Syntax highlighting themes
-@import 'highlight.js/styles/github.css' layer(light-theme);
-@import 'highlight.js/styles/github-dark.css' layer(dark-theme);
-
-// Show light theme by default
-@layer light-theme {
-  [data-mantine-color-scheme='light'] .markdown-preview {
-    pre code.hljs {
-      display: block;
-      overflow-x: auto;
-      padding: 1em;
-    }
-  }
-}
-
-// Show dark theme in dark mode
-@layer dark-theme {
-  [data-mantine-color-scheme='dark'] .markdown-preview {
-    pre code.hljs {
-      display: block;
-      overflow-x: auto;
-      padding: 1em;
-    }
-  }
-}

app/src/api/api.ts

@@ -29,10 +29,16 @@ export const apiCall = async (
     // 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>),
     };
 
+    // Only set Content-Type to application/json if not already set and body is not FormData
+    // FormData requires the browser to set Content-Type with the boundary parameter
+    const isFormData = options.body instanceof FormData;
+    if (!headers['Content-Type'] && !isFormData) {
+      headers['Content-Type'] = 'application/json';
+    }
+
     // Add CSRF token for non-GET methods
     if (method !== 'GET') {
       const csrfToken = getCsrfToken();
@@ -41,11 +47,18 @@ export const apiCall = async (
       }
     }
 
+    // For FormData, don't include Content-Type in headers - let the browser set it
+    const fetchHeaders = isFormData
+      ? Object.fromEntries(
+          Object.entries(headers).filter(([key]) => key !== 'Content-Type')
+        )
+      : headers;
+
     const response = await fetch(url, {
       ...options,
       // Include credentials to send/receive cookies
       credentials: 'include',
-      headers,
+      headers: fetchHeaders,
     });
     console.debug(`Response status: ${response.status} for URL: ${url}`);
 

app/src/components/editor/MarkdownPreview.test.tsx

@@ -120,6 +120,34 @@ describe('MarkdownPreview', () => {
     });
   });
 
+  it('renders code blocks with correct structure for theme switching', async () => {
+    const content = '```javascript\nconst hello = "world";\n```';
+
+    render(
+      <MarkdownPreview
+        content={content}
+        handleFileSelect={mockHandleFileSelect}
+      />
+    );
+
+    await waitFor(() => {
+      // Check that rehype-highlight generates the correct structure
+      const preElement = screen
+        .getByRole('code', { hidden: true })
+        .closest('pre');
+      const codeElement = preElement?.querySelector('code');
+
+      expect(preElement).toBeInTheDocument();
+      expect(codeElement).toBeInTheDocument();
+
+      // The code element should have hljs class for theme switching to work
+      expect(codeElement).toHaveClass('hljs');
+
+      // Should also have language class
+      expect(codeElement).toHaveClass('language-javascript');
+    });
+  });
+
   it('handles image loading errors gracefully', async () => {
     const content = '![Test Image](invalid-image.jpg)';
 

app/src/components/editor/MarkdownPreview.tsx

@@ -10,6 +10,7 @@ import * as prod from 'react/jsx-runtime';
 import { notifications } from '@mantine/notifications';
 import { remarkWikiLinks } from '../../utils/remarkWikiLinks';
 import { useWorkspace } from '../../hooks/useWorkspace';
+import { useHighlightTheme } from '../../hooks/useHighlightTheme';
 
 interface MarkdownPreviewProps {
   content: string;
@@ -28,12 +29,6 @@ interface MarkdownLinkProps {
   [key: string]: unknown;
 }
 
-interface MarkdownCodeProps {
-  children: ReactNode;
-  className?: string;
-  [key: string]: unknown;
-}
-
 const MarkdownPreview: React.FC<MarkdownPreviewProps> = ({
   content,
   handleFileSelect,
@@ -42,7 +37,10 @@ const MarkdownPreview: React.FC<MarkdownPreviewProps> = ({
     null
   );
   const baseUrl = window.API_BASE_URL;
-  const { currentWorkspace } = useWorkspace();
+  const { currentWorkspace, colorScheme } = useWorkspace();
+
+  // Use the highlight theme hook
+  useHighlightTheme(colorScheme === 'auto' ? 'light' : colorScheme);
 
   const processor = useMemo(() => {
     const handleLinkClick = (
@@ -107,13 +105,6 @@ const MarkdownPreview: React.FC<MarkdownPreviewProps> = ({
               {children}
             </a>
           ),
-          code: ({ children, className, ...props }: MarkdownCodeProps) => {
-            return (
-              <pre className={className}>
-                <code {...props}>{children}</code>
-              </pre>
-            );
-          },
         },
       } as Options);
   }, [currentWorkspace?.name, baseUrl, handleFileSelect]);

app/src/components/modals/user/DeleteUserModal.test.tsx

@@ -8,7 +8,7 @@ import {
 import React from 'react';
 import { MantineProvider } from '@mantine/core';
 import DeleteUserModal from './DeleteUserModal';
-import { UserRole, type User } from '@/types/models';
+import { UserRole, Theme, type User } from '@/types/models';
 
 // Mock notifications
 vi.mock('@mantine/notifications', () => ({
@@ -36,6 +36,7 @@ describe('DeleteUserModal', () => {
     email: 'test@example.com',
     displayName: 'Test User',
     role: UserRole.Editor,
+    theme: Theme.Dark,
     createdAt: '2024-01-01T00:00:00Z',
     lastWorkspaceId: 1,
   };

app/src/components/modals/user/EditUserModal.test.tsx

@@ -8,7 +8,7 @@ import {
 import React from 'react';
 import { MantineProvider } from '@mantine/core';
 import EditUserModal from './EditUserModal';
-import { UserRole, type User } from '@/types/models';
+import { UserRole, Theme, type User } from '@/types/models';
 
 // Mock notifications
 vi.mock('@mantine/notifications', () => ({
@@ -36,6 +36,7 @@ describe('EditUserModal', () => {
     email: 'test@example.com',
     displayName: 'Test User',
     role: UserRole.Editor,
+    theme: Theme.Dark,
     createdAt: '2024-01-01T00:00:00Z',
     lastWorkspaceId: 1,
   };
@@ -187,6 +188,7 @@ describe('EditUserModal', () => {
         email: 'newuser@example.com',
         displayName: 'New User',
         role: UserRole.Admin,
+        theme: Theme.Dark,
       };
 
       rerender(

app/src/components/navigation/UserMenu.test.tsx

@@ -2,7 +2,7 @@ import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { fireEvent, waitFor } from '@testing-library/react';
 import { render } from '../../test/utils';
 import UserMenu from './UserMenu';
-import { UserRole } from '../../types/models';
+import { UserRole, Theme } from '../../types/models';
 
 // Mock the contexts
 vi.mock('../../contexts/AuthContext', () => ({
@@ -37,6 +37,7 @@ describe('UserMenu', () => {
     email: 'test@example.com',
     displayName: 'Test User',
     role: UserRole.Editor,
+    theme: Theme.Dark,
     createdAt: '2024-01-01T00:00:00Z',
     lastWorkspaceId: 1,
   };
@@ -53,6 +54,7 @@ describe('UserMenu', () => {
       login: vi.fn(),
       refreshToken: vi.fn(),
       refreshUser: vi.fn(),
+      updateProfile: vi.fn(),
     });
   });
 
@@ -84,6 +86,7 @@ describe('UserMenu', () => {
       login: vi.fn(),
       refreshToken: vi.fn(),
       refreshUser: vi.fn(),
+      updateProfile: vi.fn(),
     });
 
     const { getByLabelText, getByText } = render(
@@ -145,6 +148,7 @@ describe('UserMenu', () => {
       id: mockUser.id,
       email: mockUser.email,
       role: mockUser.role,
+      theme: mockUser.theme,
       createdAt: mockUser.createdAt,
       lastWorkspaceId: mockUser.lastWorkspaceId,
     };
@@ -157,6 +161,7 @@ describe('UserMenu', () => {
       login: vi.fn(),
       refreshToken: vi.fn(),
       refreshUser: vi.fn(),
+      updateProfile: vi.fn(),
     });
 
     const { getByLabelText, getByText } = render(

app/src/components/settings/account/AccountSettings.tsx

@@ -89,6 +89,7 @@ const AccountSettings: React.FC<AccountSettingsProps> = ({
         email: user.email,
         currentPassword: '',
         newPassword: '',
+        theme: user.theme,
       };
       dispatch({
         type: SettingsActionType.INIT_SETTINGS,
@@ -107,6 +108,13 @@ const AccountSettings: React.FC<AccountSettingsProps> = ({
     });
   };
 
+  const handleThemeChange = (theme: string): void => {
+    dispatch({
+      type: SettingsActionType.UPDATE_LOCAL_SETTINGS,
+      payload: { theme } as UserProfileSettings,
+    });
+  };
+
   const handleSubmit = async (): Promise<void> => {
     const updates: UserProfileSettings = {};
     const needsPasswordConfirmation =
@@ -117,6 +125,14 @@ const AccountSettings: React.FC<AccountSettingsProps> = ({
       updates.displayName = state.localSettings.displayName || '';
     }
 
+    // Add theme if changed
+    if (
+      state.localSettings.theme &&
+      state.localSettings.theme !== state.initialSettings.theme
+    ) {
+      updates.theme = state.localSettings.theme;
+    }
+
     // Handle password change
     if (state.localSettings.newPassword) {
       if (!state.localSettings.currentPassword) {
@@ -216,6 +232,7 @@ const AccountSettings: React.FC<AccountSettingsProps> = ({
                 <ProfileSettings
                   settings={state.localSettings}
                   onInputChange={handleInputChange}
+                  onThemeChange={handleThemeChange}
                 />
               </Accordion.Panel>
             </Accordion.Item>

app/src/components/settings/account/ProfileSettings.test.tsx

@@ -4,6 +4,25 @@ import React from 'react';
 import { MantineProvider } from '@mantine/core';
 import ProfileSettings from './ProfileSettings';
 import type { UserProfileSettings } from '@/types/models';
+import { Theme, UserRole, type User } from '@/types/models';
+
+// Mock user for AuthContext
+const mockUser: User = {
+  id: 1,
+  email: 'test@example.com',
+  displayName: 'Test User',
+  role: UserRole.Editor,
+  theme: Theme.Dark,
+  createdAt: '2024-01-01T00:00:00Z',
+  lastWorkspaceId: 1,
+};
+
+// Mock the auth context
+vi.mock('../../../contexts/AuthContext', () => ({
+  useAuth: () => ({
+    user: mockUser,
+  }),
+}));
 
 // Helper wrapper component for testing
 const TestWrapper = ({ children }: { children: React.ReactNode }) => (

app/src/components/settings/account/ProfileSettings.tsx

@@ -1,36 +1,66 @@
 import React from 'react';
-import { Box, Stack, TextInput } from '@mantine/core';
-import type { UserProfileSettings } from '@/types/models';
+import { Box, Stack, TextInput, Group, Text, Switch } from '@mantine/core';
+import { useAuth } from '@/contexts/AuthContext';
+import { Theme, type UserProfileSettings } from '@/types/models';
 
 interface ProfileSettingsProps {
   settings: UserProfileSettings;
   onInputChange: (key: keyof UserProfileSettings, value: string) => void;
+  onThemeChange?: (theme: Theme) => void;
 }
 
 const ProfileSettings: React.FC<ProfileSettingsProps> = ({
   settings,
   onInputChange,
-}) => (
-  <Box>
-    <Stack gap="md">
-      <TextInput
-        label="Display Name"
-        type="text"
-        value={settings.displayName || ''}
-        onChange={(e) => onInputChange('displayName', e.currentTarget.value)}
-        placeholder="Enter display name"
-        data-testid="display-name-input"
-      />
-      <TextInput
-        label="Email"
-        type="email"
-        value={settings.email || ''}
-        onChange={(e) => onInputChange('email', e.currentTarget.value)}
-        placeholder="Enter email"
-        data-testid="email-input"
-      />
-    </Stack>
-  </Box>
-);
+  onThemeChange,
+}) => {
+  const { user } = useAuth();
+  const currentTheme = settings.theme || user?.theme || Theme.Dark;
+
+  const handleThemeToggle = () => {
+    const newTheme = currentTheme === Theme.Dark ? Theme.Light : Theme.Dark;
+    if (onThemeChange) {
+      onThemeChange(newTheme);
+    }
+  };
+
+  return (
+    <Box>
+      <Stack gap="md">
+        <TextInput
+          label="Display Name"
+          type="text"
+          value={settings.displayName || ''}
+          onChange={(e) => onInputChange('displayName', e.currentTarget.value)}
+          placeholder="Enter display name"
+          data-testid="display-name-input"
+        />
+        <TextInput
+          label="Email"
+          type="email"
+          value={settings.email || ''}
+          onChange={(e) => onInputChange('email', e.currentTarget.value)}
+          placeholder="Enter email"
+          data-testid="email-input"
+        />
+        <Box mb="md">
+          <Group justify="space-between" align="center">
+            <div>
+              <Text size="sm">Default Dark Mode</Text>
+              <Text size="xs" c="dimmed">
+                Sets the default theme for new workspaces
+              </Text>
+            </div>
+            <Switch
+              checked={currentTheme === Theme.Dark}
+              onChange={handleThemeToggle}
+              data-testid="theme-toggle"
+            />
+          </Group>
+        </Box>
+      </Stack>
+    </Box>
+  );
+};
 
 export default ProfileSettings;

app/src/components/settings/admin/AdminDashboard.test.tsx

@@ -3,7 +3,7 @@ import { render as rtlRender, screen, fireEvent } from '@testing-library/react';
 import React from 'react';
 import { MantineProvider } from '@mantine/core';
 import AdminDashboard from './AdminDashboard';
-import { UserRole, type User } from '@/types/models';
+import { UserRole, Theme, type User } from '@/types/models';
 
 // Mock the auth context
 const mockCurrentUser: User = {
@@ -11,6 +11,7 @@ const mockCurrentUser: User = {
   email: 'admin@example.com',
   displayName: 'Admin User',
   role: UserRole.Admin,
+  theme: Theme.Dark,
   createdAt: '2024-01-01T00:00:00Z',
   lastWorkspaceId: 1,
 };

app/src/components/settings/admin/AdminUsersTab.test.tsx

@@ -8,7 +8,7 @@ import {
 import React from 'react';
 import { MantineProvider } from '@mantine/core';
 import AdminUsersTab from './AdminUsersTab';
-import { UserRole, type User } from '@/types/models';
+import { UserRole, Theme, type User } from '@/types/models';
 
 // Mock the user admin hook
 const mockCreate = vi.fn();
@@ -123,6 +123,7 @@ describe('AdminUsersTab', () => {
     email: 'admin@example.com',
     displayName: 'Admin User',
     role: UserRole.Admin,
+    theme: Theme.Dark,
     createdAt: '2024-01-01T00:00:00Z',
     lastWorkspaceId: 1,
   };
@@ -134,6 +135,7 @@ describe('AdminUsersTab', () => {
       email: 'editor@example.com',
       displayName: 'Editor User',
       role: UserRole.Editor,
+      theme: Theme.Dark,
       createdAt: '2024-01-15T00:00:00Z',
       lastWorkspaceId: 2,
     },
@@ -142,6 +144,7 @@ describe('AdminUsersTab', () => {
       email: 'viewer@example.com',
       displayName: 'Viewer User',
       role: UserRole.Viewer,
+      theme: Theme.Dark,
       createdAt: '2024-02-01T00:00:00Z',
       lastWorkspaceId: 3,
     },

app/src/contexts/AuthContext.test.tsx

@@ -2,7 +2,7 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { renderHook, act, waitFor } from '@testing-library/react';
 import React from 'react';
 import { AuthProvider, useAuth } from './AuthContext';
-import { UserRole, type User } from '@/types/models';
+import { UserRole, Theme, type User } from '@/types/models';
 
 // Set up mocks before imports are used
 vi.mock('@/api/auth', () => {
@@ -42,6 +42,7 @@ const mockUser: User = {
   email: 'test@example.com',
   displayName: 'Test User',
   role: UserRole.Editor,
+    theme: Theme.Dark,
   createdAt: '2024-01-01T00:00:00Z',
   lastWorkspaceId: 1,
 };

app/src/contexts/AuthContext.tsx

@@ -12,7 +12,8 @@ import {
   refreshToken as apiRefreshToken,
   getCurrentUser,
 } from '@/api/auth';
-import type { User } from '@/types/models';
+import { updateProfile as apiUpdateProfile } from '@/api/user';
+import type { User, UserProfileSettings } from '@/types/models';
 
 interface AuthContextType {
   user: User | null;
@@ -22,6 +23,7 @@ interface AuthContextType {
   logout: () => Promise<void>;
   refreshToken: () => Promise<boolean>;
   refreshUser: () => Promise<void>;
+  updateProfile: (updates: UserProfileSettings) => Promise<User>;
 }
 
 const AuthContext = createContext<AuthContextType | null>(null);
@@ -109,6 +111,31 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
     }
   }, []);
 
+  const updateProfile = useCallback(
+    async (updates: UserProfileSettings): Promise<User> => {
+      try {
+        const updatedUser = await apiUpdateProfile(updates);
+        setUser(updatedUser);
+        notifications.show({
+          title: 'Success',
+          message: 'Profile updated successfully',
+          color: 'green',
+        });
+        return updatedUser;
+      } catch (error) {
+        console.error('Failed to update profile:', error);
+        notifications.show({
+          title: 'Error',
+          message:
+            error instanceof Error ? error.message : 'Failed to update profile',
+          color: 'red',
+        });
+        throw error;
+      }
+    },
+    []
+  );
+
   const value: AuthContextType = {
     user,
     loading,
@@ -117,6 +144,7 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
     logout,
     refreshToken,
     refreshUser,
+    updateProfile,
   };
 
   return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;

app/src/hooks/useAdminData.test.ts

@@ -4,6 +4,7 @@ import { useAdminData } from './useAdminData';
 import * as adminApi from '@/api/admin';
 import {
   UserRole,
+  Theme,
   type SystemStats,
   type User,
   type WorkspaceStats,
@@ -35,6 +36,7 @@ const mockUsers: User[] = [
     email: 'admin@example.com',
     displayName: 'Admin User',
     role: UserRole.Admin,
+    theme: Theme.Dark,
     createdAt: '2024-01-01T00:00:00Z',
     lastWorkspaceId: 1,
   },
@@ -43,6 +45,7 @@ const mockUsers: User[] = [
     email: 'editor@example.com',
     displayName: 'Editor User',
     role: UserRole.Editor,
+    theme: Theme.Dark,
     createdAt: '2024-01-02T00:00:00Z',
     lastWorkspaceId: 2,
   },

app/src/hooks/useFileOperations.ts

@@ -122,7 +122,8 @@ export const useFileOperations = (): UseFileOperationsResult => {
       if (!currentWorkspace) return false;
 
       try {
-        await uploadFile(currentWorkspace.name, targetPath || '', files);
+        // Default to '.' (root directory) if no target path is provided
+        await uploadFile(currentWorkspace.name, targetPath || '.', files);
 
         notifications.show({
           title: 'Success',

app/src/hooks/useHighlightTheme.ts

@@ -0,0 +1,36 @@
+import { useEffect } from 'react';
+// Import theme CSS as text that will be bundled
+import atomOneLightTheme from 'highlight.js/styles/atom-one-light.css?inline';
+import atomOneDarkTheme from 'highlight.js/styles/atom-one-dark.css?inline';
+
+export const useHighlightTheme = (colorScheme: 'light' | 'dark') => {
+  useEffect(() => {
+    // Remove existing highlight theme
+    const existingStylesheet = document.querySelector(
+      'style[data-highlight-theme]'
+    );
+    if (existingStylesheet) {
+      existingStylesheet.remove();
+    }
+
+    // Add new theme stylesheet using bundled CSS
+    const style = document.createElement('style');
+    style.setAttribute('data-highlight-theme', 'true');
+
+    if (colorScheme === 'dark') {
+      style.textContent = atomOneDarkTheme as string;
+    } else {
+      style.textContent = atomOneLightTheme as string;
+    }
+
+    document.head.appendChild(style);
+
+    return () => {
+      // Cleanup on unmount
+      const stylesheet = document.querySelector('style[data-highlight-theme]');
+      if (stylesheet) {
+        stylesheet.remove();
+      }
+    };
+  }, [colorScheme]);
+};

app/src/hooks/useProfileSettings.test.ts

@@ -3,7 +3,7 @@ import { renderHook, act } from '@testing-library/react';
 import { useProfileSettings } from './useProfileSettings';
 import * as userApi from '@/api/user';
 import type { UpdateProfileRequest } from '@/types/api';
-import { UserRole, type User } from '@/types/models';
+import { UserRole, Theme, type User } from '@/types/models';
 
 // Mock dependencies
 vi.mock('@/api/user');
@@ -22,6 +22,7 @@ const mockUser: User = {
   email: 'test@example.com',
   displayName: 'Test User',
   role: UserRole.Editor,
+    theme: Theme.Dark,
   createdAt: '2024-01-01T00:00:00Z',
   lastWorkspaceId: 1,
 };

app/src/hooks/useUserAdmin.test.ts

@@ -3,7 +3,7 @@ import { renderHook, act } from '@testing-library/react';
 import { useUserAdmin } from './useUserAdmin';
 import * as adminApi from '@/api/admin';
 import type { CreateUserRequest, UpdateUserRequest } from '@/types/api';
-import { UserRole, type User } from '@/types/models';
+import { UserRole, Theme, type User } from '@/types/models';
 
 // Mock dependencies
 vi.mock('@/api/admin');
@@ -35,6 +35,7 @@ const mockUsers: User[] = [
     email: 'admin@example.com',
     displayName: 'Admin User',
     role: UserRole.Admin,
+    theme: Theme.Dark,
     createdAt: '2024-01-01T00:00:00Z',
     lastWorkspaceId: 1,
   },
@@ -43,6 +44,7 @@ const mockUsers: User[] = [
     email: 'editor@example.com',
     displayName: 'Editor User',
     role: UserRole.Editor,
+    theme: Theme.Dark,
     createdAt: '2024-01-02T00:00:00Z',
     lastWorkspaceId: 1,
   },
@@ -112,6 +114,7 @@ describe('useUserAdmin', () => {
         email: 'newuser@example.com',
         displayName: 'New User',
         role: UserRole.Viewer,
+    theme: Theme.Dark,
         createdAt: '2024-01-03T00:00:00Z',
         lastWorkspaceId: 1,
       };
@@ -124,6 +127,7 @@ describe('useUserAdmin', () => {
         displayName: 'New User',
         password: 'password123',
         role: UserRole.Viewer,
+    theme: Theme.Dark,
       };
 
       let createResult: boolean | undefined;
@@ -152,6 +156,7 @@ describe('useUserAdmin', () => {
         displayName: 'Test User',
         password: 'password123',
         role: UserRole.Editor,
+    theme: Theme.Dark,
       };
 
       let createResult: boolean | undefined;
@@ -179,6 +184,7 @@ describe('useUserAdmin', () => {
         displayName: 'Test User',
         password: 'password123',
         role: UserRole.Editor,
+    theme: Theme.Dark,
       };
 
       let createResult: boolean | undefined;
@@ -204,6 +210,7 @@ describe('useUserAdmin', () => {
         email: user.email,
         displayName: 'Updated Editor',
         role: user.role,
+        theme: user.theme,
         createdAt: user.createdAt,
         lastWorkspaceId: user.lastWorkspaceId,
       };
@@ -238,6 +245,7 @@ describe('useUserAdmin', () => {
         email: 'newemail@example.com',
         displayName: user.displayName || '',
         role: UserRole.Admin,
+    theme: Theme.Dark,
         createdAt: user.createdAt,
         lastWorkspaceId: user.lastWorkspaceId,
       };
@@ -248,6 +256,7 @@ describe('useUserAdmin', () => {
       const updateRequest: UpdateUserRequest = {
         email: 'newemail@example.com',
         role: UserRole.Admin,
+    theme: Theme.Dark,
       };
 
       let updateResult: boolean | undefined;
@@ -436,6 +445,7 @@ describe('useUserAdmin', () => {
           displayName: 'Test',
           password: 'pass',
           role: UserRole.Viewer,
+    theme: Theme.Dark,
         });
       });
 
@@ -474,6 +484,7 @@ describe('useUserAdmin', () => {
           displayName: 'Test',
           password: 'pass',
           role: UserRole.Viewer,
+    theme: Theme.Dark,
         });
       });
 
@@ -500,6 +511,7 @@ describe('useUserAdmin', () => {
           email: 'user1@example.com',
           displayName: 'User 1',
           role: UserRole.Viewer,
+    theme: Theme.Dark,
           createdAt: '2024-01-03T00:00:00Z',
           lastWorkspaceId: 1,
         })
@@ -508,6 +520,7 @@ describe('useUserAdmin', () => {
           email: 'user2@example.com',
           displayName: 'User 2',
           role: UserRole.Editor,
+    theme: Theme.Dark,
           createdAt: '2024-01-04T00:00:00Z',
           lastWorkspaceId: 1,
         });
@@ -520,12 +533,14 @@ describe('useUserAdmin', () => {
           displayName: 'User 1',
           password: 'pass1',
           role: UserRole.Viewer,
+    theme: Theme.Dark,
         },
         {
           email: 'user2@example.com',
           displayName: 'User 2',
           password: 'pass2',
           role: UserRole.Editor,
+    theme: Theme.Dark,
         },
       ];
 
@@ -555,12 +570,14 @@ describe('useUserAdmin', () => {
           displayName: 'Success User',
           password: 'pass1',
           role: UserRole.Viewer,
+    theme: Theme.Dark,
         },
         {
           email: 'fail@example.com',
           displayName: 'Fail User',
           password: 'pass2',
           role: UserRole.Editor,
+    theme: Theme.Dark,
         },
       ];
 

app/src/types/api.test.ts

@@ -9,7 +9,7 @@ import {
   type SaveFileResponse,
   type UploadFilesResponse,
 } from './api';
-import { UserRole, type User } from './models';
+import { UserRole, Theme, type User } from './models';
 
 // Mock user data for testing
 const mockUser: User = {
@@ -17,6 +17,7 @@ const mockUser: User = {
   email: 'test@example.com',
   displayName: 'Test User',
   role: UserRole.Editor,
+  theme: Theme.Dark,
   createdAt: '2024-01-01T00:00:00Z',
   lastWorkspaceId: 1,
 };

app/src/types/api.ts

@@ -1,4 +1,4 @@
-import { isUser, type User, type UserRole } from './models';
+import { isUser, type User, type UserRole, type Theme } from './models';
 
 declare global {
   interface Window {
@@ -55,6 +55,7 @@ export interface CreateUserRequest {
   displayName: string;
   password: string;
   role: UserRole;
+  theme?: Theme;
 }
 
 // UpdateUserRequest holds the request fields for updating a user
@@ -63,6 +64,7 @@ export interface UpdateUserRequest {
   displayName?: string;
   password?: string;
   role?: UserRole;
+  theme?: Theme;
 }
 
 export interface LookupResponse {
@@ -126,6 +128,7 @@ export interface UpdateProfileRequest {
   email?: string;
   currentPassword?: string;
   newPassword?: string;
+  theme?: Theme;
 }
 
 // DeleteAccountRequest represents a user account deletion request

app/src/types/css-inline.d.ts

@@ -0,0 +1,5 @@
+// Type declarations for CSS imports with ?inline modifier
+declare module '*.css?inline' {
+  const content: string;
+  export default content;
+}

app/src/types/models.test.ts

@@ -63,6 +63,7 @@ describe('Models Type Guards', () => {
       email: 'test@example.com',
       displayName: 'Test User',
       role: UserRole.Editor,
+      theme: Theme.Dark,
       createdAt: '2024-01-01T00:00:00Z',
       lastWorkspaceId: 1,
     };
@@ -76,6 +77,7 @@ describe('Models Type Guards', () => {
         id: 1,
         email: 'test@example.com',
         role: UserRole.Editor,
+        theme: Theme.Dark,
         createdAt: '2024-01-01T00:00:00Z',
         lastWorkspaceId: 1,
       };
@@ -186,6 +188,7 @@ describe('Models Type Guards', () => {
         id: 1,
         email: 'test@example.com',
         role: UserRole.Editor,
+        theme: Theme.Dark,
         createdAt: '2024-01-01T00:00:00Z',
         lastWorkspaceId: 1,
         __proto__: { malicious: true },
@@ -771,6 +774,7 @@ describe('Models Type Guards', () => {
         id: 1,
         email: 'test@example.com',
         role: UserRole.Editor,
+        theme: Theme.Dark,
         createdAt: '2024-01-01T00:00:00Z',
         lastWorkspaceId: 1,
       };
@@ -804,6 +808,7 @@ describe('Models Type Guards', () => {
         id: 1,
         email: 'test@example.com',
         role: UserRole.Editor,
+        theme: Theme.Dark,
         createdAt: '2024-01-01T00:00:00Z',
         lastWorkspaceId: 1,
       });
@@ -852,6 +857,7 @@ describe('Models Type Guards', () => {
         id: 1,
         email: longString,
         role: UserRole.Editor,
+        theme: Theme.Dark,
         createdAt: '2024-01-01T00:00:00Z',
         lastWorkspaceId: 1,
       };

app/src/types/models.ts

@@ -8,6 +8,7 @@ export interface User {
   email: string;
   displayName?: string;
   role: UserRole;
+  theme: Theme;
   createdAt: string;
   lastWorkspaceId: number;
 }
@@ -28,6 +29,9 @@ export function isUser(value: unknown): value is User {
       : true) &&
     'role' in value &&
     isUserRole((value as User).role) &&
+    'theme' in value &&
+    typeof (value as User).theme === 'string' &&
+    Object.values(Theme).includes((value as User).theme) &&
     'createdAt' in value &&
     typeof (value as User).createdAt === 'string' &&
     'lastWorkspaceId' in value &&
@@ -309,6 +313,7 @@ export interface UserProfileSettings {
   email?: string;
   currentPassword?: string;
   newPassword?: string;
+  theme?: Theme;
 }
 
 export interface ProfileSettingsState {

server/internal/app/init.go

@@ -118,6 +118,7 @@ func setupAdminUser(database db.Database, storageManager storage.Manager, cfg *C
 		DisplayName:  "Admin",
 		PasswordHash: string(hashedPassword),
 		Role:         models.RoleAdmin,
+		Theme:        "dark", // default theme
 	}
 
 	createdUser, err := database.CreateUser(adminUser)
@@ -132,7 +133,8 @@ func setupAdminUser(database db.Database, storageManager storage.Manager, cfg *C
 
 	logging.Info("admin user setup completed",
 		"userId", createdUser.ID,
-		"workspaceId", createdUser.LastWorkspaceID)
+		"workspaceId", createdUser.LastWorkspaceID,
+		"theme", createdUser.Theme)
 
 	return nil
 }

server/internal/app/routes.go

@@ -152,7 +152,9 @@ func setupRouter(o Options) *chi.Mux {
 	})
 
 	// Handle all other routes with static file server
-	r.Get("/*", handlers.NewStaticHandler(o.Config.StaticPath).ServeHTTP)
+	staticHandler := handlers.NewStaticHandler(o.Config.StaticPath)
+	r.Get("/*", staticHandler.ServeHTTP)
+	r.Head("/*", staticHandler.ServeHTTP)
 
 	return r
 }

server/internal/db/migrations/postgres/001_initial_schema.up.sql

@@ -7,6 +7,7 @@ CREATE TABLE IF NOT EXISTS users (
     display_name TEXT,
     password_hash TEXT NOT NULL,
     role TEXT NOT NULL CHECK(role IN ('admin', 'editor', 'viewer')),
+    theme TEXT NOT NULL DEFAULT 'dark' CHECK(theme IN ('light', 'dark')),
     created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
     last_workspace_id INTEGER
 );
@@ -19,7 +20,7 @@ CREATE TABLE IF NOT EXISTS workspaces (
     created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
     last_opened_file_path TEXT,
     -- Settings fields
-    theme TEXT NOT NULL DEFAULT 'light' CHECK(theme IN ('light', 'dark')),
+    theme TEXT NOT NULL DEFAULT 'dark' CHECK(theme IN ('light', 'dark')),
     auto_save BOOLEAN NOT NULL DEFAULT FALSE,
     git_enabled BOOLEAN NOT NULL DEFAULT FALSE,
     git_url TEXT,

server/internal/db/migrations/sqlite/001_initial_schema.up.sql

@@ -6,6 +6,7 @@ CREATE TABLE IF NOT EXISTS users (
     display_name TEXT,
     password_hash TEXT NOT NULL,
     role TEXT NOT NULL CHECK(role IN ('admin', 'editor', 'viewer')),
+    theme TEXT NOT NULL DEFAULT 'dark' CHECK(theme IN ('light', 'dark')),
     created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
     last_workspace_id INTEGER
 );
@@ -18,7 +19,7 @@ CREATE TABLE IF NOT EXISTS workspaces (
     created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
     last_opened_file_path TEXT,
     -- Settings fields
-    theme TEXT NOT NULL DEFAULT 'light' CHECK(theme IN ('light', 'dark')),
+    theme TEXT NOT NULL DEFAULT 'dark' CHECK(theme IN ('light', 'dark')),
     auto_save BOOLEAN NOT NULL DEFAULT 0,
     git_enabled BOOLEAN NOT NULL DEFAULT 0,
     git_url TEXT,

server/internal/db/sessions_test.go

@@ -29,6 +29,7 @@ func TestSessionOperations(t *testing.T) {
 		DisplayName:  "Test User",
 		PasswordHash: "hash",
 		Role:         "editor",
+		Theme:        "dark",
 	})
 	if err != nil {
 		t.Fatalf("failed to create test user: %v", err)

server/internal/db/struct_query_test.go

@@ -156,6 +156,7 @@ func TestStructQueries(t *testing.T) {
 		DisplayName:  "Struct Query Test",
 		PasswordHash: "hashed_password",
 		Role:         models.RoleEditor,
+		Theme:        "dark",
 	}
 
 	t.Run("InsertStructQuery", func(t *testing.T) {
@@ -243,6 +244,7 @@ func TestStructQueries(t *testing.T) {
 			DisplayName:  "Struct Query Test 2",
 			PasswordHash: "hashed_password2",
 			Role:         models.RoleViewer,
+			Theme:        "light",
 		}
 
 		createdUser2, err := database.CreateUser(secondUser)
@@ -437,6 +439,7 @@ func TestEncryptedFields(t *testing.T) {
 		DisplayName:  "Encryption Test",
 		PasswordHash: "hash",
 		Role:         models.RoleEditor,
+		Theme:        "dark",
 	})
 	if err != nil {
 		t.Fatalf("Failed to create test user: %v", err)

server/internal/db/system_test.go

@@ -31,12 +31,14 @@ func TestSystemOperations(t *testing.T) {
 				DisplayName:  "User 1",
 				PasswordHash: "hash1",
 				Role:         "editor",
+				Theme:        "dark",
 			},
 			{
 				Email:        "user2@test.com",
 				DisplayName:  "User 2",
 				PasswordHash: "hash2",
 				Role:         "viewer",
+				Theme:        "light",
 			},
 		}
 

server/internal/db/users_test.go

@@ -34,6 +34,7 @@ func TestUserOperations(t *testing.T) {
 					DisplayName:  "Test User",
 					PasswordHash: "hashed_password",
 					Role:         models.RoleEditor,
+					Theme:        "dark",
 				},
 				wantErr: false,
 			},
@@ -44,6 +45,7 @@ func TestUserOperations(t *testing.T) {
 					DisplayName:  "Another User",
 					PasswordHash: "different_hash",
 					Role:         models.RoleViewer,
+					Theme:        "light",
 				},
 				wantErr:     true,
 				errContains: "UNIQUE constraint failed",
@@ -108,6 +110,7 @@ func TestUserOperations(t *testing.T) {
 			DisplayName:  "Get By ID User",
 			PasswordHash: "hash",
 			Role:         models.RoleEditor,
+			Theme:        "dark",
 		})
 		if err != nil {
 			t.Fatalf("failed to create test user: %v", err)
@@ -159,6 +162,7 @@ func TestUserOperations(t *testing.T) {
 			DisplayName:  "Get By Email User",
 			PasswordHash: "hash",
 			Role:         models.RoleEditor,
+			Theme:        "dark",
 		})
 		if err != nil {
 			t.Fatalf("failed to create test user: %v", err)
@@ -210,6 +214,7 @@ func TestUserOperations(t *testing.T) {
 			DisplayName:  "Original Name",
 			PasswordHash: "original_hash",
 			Role:         models.RoleEditor,
+			Theme:        "dark",
 		})
 		if err != nil {
 			t.Fatalf("failed to create test user: %v", err)
@@ -249,12 +254,14 @@ func TestUserOperations(t *testing.T) {
 				DisplayName:  "User One",
 				PasswordHash: "hash1",
 				Role:         models.RoleEditor,
+				Theme:        "dark",
 			},
 			{
 				Email:        "user2@example.com",
 				DisplayName:  "User Two",
 				PasswordHash: "hash2",
 				Role:         models.RoleViewer,
+				Theme:        "light",
 			},
 		}
 
@@ -305,6 +312,7 @@ func TestUserOperations(t *testing.T) {
 			DisplayName:  "Workspace User",
 			PasswordHash: "hash",
 			Role:         models.RoleEditor,
+			Theme:        "dark",
 		})
 		if err != nil {
 			t.Fatalf("failed to create test user: %v", err)
@@ -343,6 +351,7 @@ func TestUserOperations(t *testing.T) {
 			DisplayName:  "Delete User",
 			PasswordHash: "hash",
 			Role:         models.RoleEditor,
+			Theme:        "dark",
 		})
 		if err != nil {
 			t.Fatalf("failed to create test user: %v", err)
@@ -377,18 +386,21 @@ func TestUserOperations(t *testing.T) {
 				DisplayName:  "Admin One",
 				PasswordHash: "hash1",
 				Role:         models.RoleAdmin,
+				Theme:        "dark",
 			},
 			{
 				Email:        "admin2@example.com",
 				DisplayName:  "Admin Two",
 				PasswordHash: "hash2",
 				Role:         models.RoleAdmin,
+				Theme:        "light",
 			},
 			{
 				Email:        "editor@example.com",
 				DisplayName:  "Editor",
 				PasswordHash: "hash3",
 				Role:         models.RoleEditor,
+				Theme:        "dark",
 			},
 		}
 

server/internal/db/workspaces_test.go

@@ -26,6 +26,7 @@ func TestWorkspaceOperations(t *testing.T) {
 		DisplayName:  "Test User",
 		PasswordHash: "hash",
 		Role:         models.RoleEditor,
+		Theme:        "dark",
 	})
 	if err != nil {
 		t.Fatalf("failed to create test user: %v", err)

server/internal/handlers/admin_handlers.go

@@ -22,6 +22,7 @@ type CreateUserRequest struct {
 	DisplayName string          `json:"displayName"`
 	Password    string          `json:"password"`
 	Role        models.UserRole `json:"role"`
+	Theme       string          `json:"theme,omitempty"`
 }
 
 // UpdateUserRequest holds the request fields for updating a user
@@ -30,6 +31,7 @@ type UpdateUserRequest struct {
 	DisplayName string          `json:"displayName,omitempty"`
 	Password    string          `json:"password,omitempty"`
 	Role        models.UserRole `json:"role,omitempty"`
+	Theme       string          `json:"theme,omitempty"`
 }
 
 // WorkspaceStats holds workspace statistics
@@ -164,11 +166,24 @@ func (h *Handler) AdminCreateUser() http.HandlerFunc {
 			return
 		}
 
+		// Handle theme with validation and default
+		theme := req.Theme
+		if theme == "" {
+			theme = "dark" // Default theme
+		} else if theme != "light" && theme != "dark" {
+			// Invalid theme, fallback to dark
+			log.Debug("invalid theme value in user creation, falling back to dark",
+				"theme", theme,
+			)
+			theme = "dark"
+		}
+
 		user := &models.User{
 			Email:        req.Email,
 			DisplayName:  req.DisplayName,
 			PasswordHash: string(hashedPassword),
 			Role:         req.Role,
+			Theme:        theme,
 		}
 
 		insertedUser, err := h.DB.CreateUser(user)
@@ -196,6 +211,7 @@ func (h *Handler) AdminCreateUser() http.HandlerFunc {
 			"newUserID", insertedUser.ID,
 			"email", insertedUser.Email,
 			"role", insertedUser.Role,
+			"theme", insertedUser.Theme,
 		)
 		respondJSON(w, insertedUser)
 	}
@@ -322,6 +338,17 @@ func (h *Handler) AdminUpdateUser() http.HandlerFunc {
 			user.Role = req.Role
 			updates["role"] = req.Role
 		}
+		if req.Theme != "" {
+			// Validate theme value, fallback to "dark" if invalid
+			if req.Theme != "light" && req.Theme != "dark" {
+				log.Debug("invalid theme value, falling back to dark",
+					"theme", req.Theme,
+				)
+				req.Theme = "dark"
+			}
+			user.Theme = req.Theme
+			updates["theme"] = req.Theme
+		}
 		if req.Password != "" {
 			hashedPassword, err := bcrypt.GenerateFromPassword([]byte(req.Password), bcrypt.DefaultCost)
 			if err != nil {

server/internal/handlers/file_handlers.go

@@ -410,7 +410,8 @@ func (h *Handler) UploadFile() http.HandlerFunc {
 				}
 			}()
 
-			filePath := decodedPath + "/" + formFile.Filename
+			// Use filepath.Join to properly construct the path
+		filePath := filepath.Join(decodedPath, formFile.Filename)
 
 			content, err := io.ReadAll(file)
 			if err != nil {

server/internal/handlers/file_handlers_integration_test.go

@@ -352,15 +352,6 @@ func testFileHandlers(t *testing.T, dbConfig DatabaseConfig) {
 				assert.Equal(t, http.StatusBadRequest, rr.Code)
 			})
 
-			t.Run("upload with missing file_path parameter", func(t *testing.T) {
-				fileName := "test.txt"
-				fileContent := "test content"
-				files := map[string]string{fileName: fileContent}
-
-				rr := h.makeUploadRequest(t, baseURL+"/upload", files, h.RegularTestUser)
-				assert.Equal(t, http.StatusBadRequest, rr.Code)
-			})
-
 			t.Run("upload with invalid file_path", func(t *testing.T) {
 				fileName := "test.txt"
 				fileContent := "test content"

server/internal/handlers/integration_test.go

@@ -213,6 +213,7 @@ func (h *testHarness) createTestUser(t *testing.T, email, password string, role
 		DisplayName:  "Test User",
 		PasswordHash: string(hashedPassword),
 		Role:         role,
+		Theme:        "dark",
 	}
 
 	user, err = h.DB.CreateUser(user)

server/internal/handlers/user_handlers.go

@@ -16,6 +16,7 @@ type UpdateProfileRequest struct {
 	Email           string `json:"email"`
 	CurrentPassword string `json:"currentPassword"`
 	NewPassword     string `json:"newPassword"`
+	Theme           string `json:"theme"`
 }
 
 // DeleteAccountRequest represents a user account deletion request
@@ -149,6 +150,19 @@ func (h *Handler) UpdateProfile() http.HandlerFunc {
 			updates["displayNameChanged"] = true
 		}
 
+		// Update theme if provided
+		if req.Theme != "" {
+			// Validate theme value, fallback to "dark" if invalid
+			if req.Theme != "light" && req.Theme != "dark" {
+				log.Debug("invalid theme value, falling back to dark",
+					"theme", req.Theme,
+				)
+				req.Theme = "dark"
+			}
+			user.Theme = req.Theme
+			updates["themeChanged"] = true
+		}
+
 		// Update user in database
 		if err := h.DB.UpdateUser(user); err != nil {
 			log.Error("failed to update user in database",

server/internal/handlers/workspace_handlers.go

@@ -87,7 +87,7 @@ func (h *Handler) CreateWorkspace() http.HandlerFunc {
 			"clientIP", r.RemoteAddr,
 		)
 
-		var workspace models.Workspace
+			var workspace models.Workspace
 		if err := json.NewDecoder(r.Body).Decode(&workspace); err != nil {
 			log.Debug("invalid request body received",
 				"error", err.Error(),
@@ -104,7 +104,21 @@ func (h *Handler) CreateWorkspace() http.HandlerFunc {
 			return
 		}
 
+		// Get user to access their theme preference
+		user, err := h.DB.GetUserByID(ctx.UserID)
+		if err != nil {
+			log.Error("failed to fetch user from database",
+				"error", err.Error(),
+			)
+			respondError(w, "Failed to get user", http.StatusInternalServerError)
+			return
+		}
+
 		workspace.UserID = ctx.UserID
+		// Use user's theme as default if not provided
+		if workspace.Theme == "" {
+			workspace.Theme = user.Theme
+		}
 		if err := h.DB.CreateWorkspace(&workspace); err != nil {
 			log.Error("failed to create workspace in database",
 				"error", err.Error(),
@@ -145,6 +159,7 @@ func (h *Handler) CreateWorkspace() http.HandlerFunc {
 		log.Info("workspace created",
 			"workspaceID", workspace.ID,
 			"workspaceName", workspace.Name,
+			"theme", workspace.Theme,
 			"gitEnabled", workspace.GitEnabled,
 		)
 		respondJSON(w, workspace)

server/internal/models/user.go

@@ -25,6 +25,7 @@ type User struct {
 	DisplayName     string    `json:"displayName" db:"display_name"`
 	PasswordHash    string    `json:"-" db:"password_hash"`
 	Role            UserRole  `json:"role" db:"role" validate:"required,oneof=admin editor viewer"`
+	Theme           string    `json:"theme" db:"theme" validate:"required,oneof=light dark"`
 	CreatedAt       time.Time `json:"createdAt" db:"created_at,default"`
 	LastWorkspaceID int       `json:"lastWorkspaceId" db:"last_workspace_id"`
 }

server/internal/models/workspace.go

@@ -13,7 +13,7 @@ type Workspace struct {
 	LastOpenedFilePath string    `json:"lastOpenedFilePath" db:"last_opened_file_path"`
 
 	// Integrated settings
-	Theme                string `json:"theme" db:"theme" validate:"oneof=light dark"`
+	Theme                string `json:"theme" db:"theme" validate:"required,oneof=light dark"`
 	AutoSave             bool   `json:"autoSave" db:"auto_save"`
 	ShowHiddenFiles      bool   `json:"showHiddenFiles" db:"show_hidden_files"`
 	GitEnabled           bool   `json:"gitEnabled" db:"git_enabled"`
@@ -40,7 +40,7 @@ func (w *Workspace) ValidateGitSettings() error {
 func (w *Workspace) SetDefaultSettings() {
 
 	if w.Theme == "" {
-		w.Theme = "light"
+		w.Theme = "dark"
 	}
 
 	w.AutoSave = w.AutoSave || false