Bump version to 0.2.2

- Fixed category rename to move notes between folders - Added support for nested subdirectories (categories with slashes) - Fixed attachment folder moving during category rename - Fixed attachment folder sanitization to match upload logic - Hybrid favorite sync working bidirectionally
Fix attachment folder sanitization to match upload logic
2026-03-26 10:20:57 +01:00 · 2026-03-26 10:02:36 +01:00 · 2026-03-26 09:51:43 +01:00 · 2026-03-26 09:39:45 +01:00 · 2026-03-26 09:30:39 +01:00 · 2026-03-26 09:23:36 +01:00
26 changed files with 1926 additions and 303 deletions
--- a/index.html
+++ b/index.html
@@ -4,13 +4,9 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Tauri + React + Typescript</title>
+    <title>Nextcloud Notes</title>
-    <!-- Editor fonts (monospace) -->
+    <!-- Local fonts for offline support -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="stylesheet" href="/fonts/fonts.css">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet">
    <!-- Preview fonts (serif) -->
    <link href="https://fonts.googleapis.com/css2?family=Average&family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&display=swap" rel="stylesheet">
  </head>
  <body>
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "nextcloud-notes-tauri",
-  "version": "0.1.0",
+  "version": "0.2.2",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "nextcloud-notes-tauri",
-      "version": "0.1.0",
+      "version": "0.2.2",
      "dependencies": {
        "@tauri-apps/api": "^2",
        "@tauri-apps/plugin-dialog": "^2.6.0",
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "nextcloud-notes-tauri",
  "private": true,
-  "version": "0.1.0",
+  "version": "0.2.2",
  "type": "module",
  "scripts": {
    "dev": "vite",
--- a/public/fonts/Average-Regular.ttf
+++ b/public/fonts/Average-Regular.ttf
--- a/public/fonts/CrimsonPro-Italic-VariableFont_wght.ttf
+++ b/public/fonts/CrimsonPro-Italic-VariableFont_wght.ttf
--- a/public/fonts/CrimsonPro-VariableFont_wght.ttf
+++ b/public/fonts/CrimsonPro-VariableFont_wght.ttf
--- a/public/fonts/Inconsolata-VariableFont_wdth,wght.ttf
+++ b/public/fonts/Inconsolata-VariableFont_wdth,wght.ttf
--- a/public/fonts/Merriweather-Italic-VariableFont_opsz,wdth,wght.ttf
+++ b/public/fonts/Merriweather-Italic-VariableFont_opsz,wdth,wght.ttf
--- a/public/fonts/Merriweather-VariableFont_opsz,wdth,wght.ttf
+++ b/public/fonts/Merriweather-VariableFont_opsz,wdth,wght.ttf
--- a/public/fonts/RobotoMono-VariableFont_wght.ttf
+++ b/public/fonts/RobotoMono-VariableFont_wght.ttf
--- a/public/fonts/RobotoSerif-Italic-VariableFont_GRAD,opsz,wdth,wght.ttf
+++ b/public/fonts/RobotoSerif-Italic-VariableFont_GRAD,opsz,wdth,wght.ttf
--- a/public/fonts/RobotoSerif-VariableFont_GRAD,opsz,wdth,wght.ttf
+++ b/public/fonts/RobotoSerif-VariableFont_GRAD,opsz,wdth,wght.ttf
--- a/public/fonts/SourceCodePro-VariableFont_wght.ttf
+++ b/public/fonts/SourceCodePro-VariableFont_wght.ttf
--- a/public/fonts/fonts.css
+++ b/public/fonts/fonts.css
@@ -0,0 +1,90 @@
 /* Editor Fonts (Monospace) */
 /* Source Code Pro */
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('./SourceCodePro-VariableFont_wght.ttf') format('truetype');
 }
 /* Roboto Mono */
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('./RobotoMono-VariableFont_wght.ttf') format('truetype');
 }
 /* Inconsolata */
@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('./Inconsolata-VariableFont_wdth,wght.ttf') format('truetype');
 }
 /* Preview Fonts (Serif) */
 /* Merriweather */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('./Merriweather-VariableFont_opsz,wdth,wght.ttf') format('truetype');
 }
@font-face {
  font-family: 'Merriweather';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url('./Merriweather-Italic-VariableFont_opsz,wdth,wght.ttf') format('truetype');
 }
 /* Crimson Pro */
@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('./CrimsonPro-VariableFont_wght.ttf') format('truetype');
 }
@font-face {
  font-family: 'Crimson Pro';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('./CrimsonPro-Italic-VariableFont_wght.ttf') format('truetype');
 }
 /* Roboto Serif */
@font-face {
  font-family: 'Roboto Serif';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./RobotoSerif-VariableFont_GRAD,opsz,wdth,wght.ttf') format('truetype');
 }
@font-face {
  font-family: 'Roboto Serif';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('./RobotoSerif-Italic-VariableFont_GRAD,opsz,wdth,wght.ttf') format('truetype');
 }
 /* Average */
@font-face {
  font-family: 'Average';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./Average-Regular.ttf') format('truetype');
 }
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -1,7 +1,7 @@
 {
  "$schema": "https://schema.tauri.app/config/2",
  "productName": "Nextcloud Notes",
-  "version": "0.1.0",
+  "version": "0.2.2",
  "identifier": "com.davidrelich.nextcloud-notes",
  "build": {
    "beforeDevCommand": "npm run dev",
@@ -15,7 +15,7 @@
        "title": "Nextcloud Notes",
        "width": 1200,
        "height": 800,
-        "minWidth": 800,
+        "minWidth": 900,
        "minHeight": 600,
        "devtools": true
      }
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,12 +5,16 @@ import { NoteEditor } from './components/NoteEditor';
 import { CategoriesSidebar } from './components/CategoriesSidebar';
 import { NextcloudAPI } from './api/nextcloud';
 import { Note } from './types';
 import { syncManager, SyncStatus } from './services/syncManager';
 import { localDB } from './db/localDB';
 import { useOnlineStatus } from './hooks/useOnlineStatus';
 import { categoryColorsSync } from './services/categoryColorsSync';
 function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [api, setApi] = useState<NextcloudAPI | null>(null);
  const [notes, setNotes] = useState<Note[]>([]);
-  const [selectedNoteId, setSelectedNoteId] = useState<number | null>(null);
+  const [selectedNoteId, setSelectedNoteId] = useState<number | string | null>(null);
  const [searchText, setSearchText] = useState('');
  const [showFavoritesOnly, setShowFavoritesOnly] = useState(false);
  const [selectedCategory, setSelectedCategory] = useState('');
@@ -25,8 +29,14 @@ function App() {
  const [editorFontSize, setEditorFontSize] = useState(14);
  const [previewFont, setPreviewFont] = useState('Merriweather');
  const [previewFontSize, setPreviewFontSize] = useState(16);
  const [syncStatus, setSyncStatus] = useState<SyncStatus>('idle');
  const [pendingSyncCount, setPendingSyncCount] = useState(0);
  const isOnline = useOnlineStatus();
  useEffect(() => {
    const initApp = async () => {
      await localDB.init();
      const savedServer = localStorage.getItem('serverURL');
      const savedUsername = localStorage.getItem('username');
      const savedPassword = localStorage.getItem('password');
@@ -59,9 +69,14 @@ function App() {
          password: savedPassword,
        });
        setApi(apiInstance);
        syncManager.setAPI(apiInstance);
        categoryColorsSync.setAPI(apiInstance);
        setUsername(savedUsername);
        setIsLoggedIn(true);
      }
    };
    initApp();
  }, []);
  useEffect(() => {
@@ -88,43 +103,70 @@ function App() {
    document.documentElement.classList.toggle('dark', effectiveTheme === 'dark');
  }, [effectiveTheme]);
  useEffect(() => {
    syncManager.setStatusCallback((status, count) => {
      setSyncStatus(status);
      setPendingSyncCount(count);
    });
    syncManager.setSyncCompleteCallback(async () => {
      // Reload notes from cache after background sync completes
      // Don't call loadNotes() as it triggers another sync - just reload from cache
      const cachedNotes = await localDB.getAllNotes();
      setNotes(cachedNotes.sort((a, b) => b.modified - a.modified));
    });
  }, []);
  useEffect(() => {
    if (api && isLoggedIn) {
-      syncNotes();
+      loadNotes();
-      const interval = setInterval(syncNotes, 300000);
+      const interval = setInterval(() => syncNotes(), 300000);
      return () => clearInterval(interval);
    }
  }, [api, isLoggedIn]);
-  const syncNotes = async () => {
+  const loadNotes = async () => {
    if (!api) return;
    try {
-      const fetched = await api.fetchNotes();
+      const loadedNotes = await syncManager.loadNotes();
-      setNotes(fetched.sort((a, b) => b.modified - a.modified));
+      setNotes(loadedNotes.sort((a, b) => b.modified - a.modified));
-      if (!selectedNoteId && fetched.length > 0) {
+      if (!selectedNoteId && loadedNotes.length > 0) {
-        setSelectedNoteId(fetched[0].id);
+        setSelectedNoteId(loadedNotes[0].id);
      }
    } catch (error) {
      console.error('Failed to load notes:', error);
    }
  };
  const syncNotes = async () => {
    try {
      await syncManager.syncWithServer();
      await loadNotes();
    } catch (error) {
      console.error('Sync failed:', error);
    }
  };
-  const handleLogin = (serverURL: string, username: string, password: string) => {
+  const handleLogin = async (serverURL: string, username: string, password: string) => {
    localStorage.setItem('serverURL', serverURL);
    localStorage.setItem('username', username);
    localStorage.setItem('password', password);
    const apiInstance = new NextcloudAPI({ serverURL, username, password });
    setApi(apiInstance);
    syncManager.setAPI(apiInstance);
    categoryColorsSync.setAPI(apiInstance);
    setUsername(username);
    setIsLoggedIn(true);
  };
-  const handleLogout = () => {
+  const handleLogout = async () => {
    localStorage.removeItem('serverURL');
    localStorage.removeItem('username');
    localStorage.removeItem('password');
    await localDB.clearNotes();
    setApi(null);
    syncManager.setAPI(null);
    categoryColorsSync.setAPI(null);
    setUsername('');
    setNotes([]);
    setSelectedNoteId(null);
@@ -156,8 +198,19 @@ function App() {
    localStorage.setItem('previewFontSize', size.toString());
  };
  const handleToggleFavorite = async (note: Note, favorite: boolean) => {
    try {
      await syncManager.updateFavoriteStatus(note, favorite);
      // Update local state
      setNotes(prevNotes => 
        prevNotes.map(n => n.id === note.id ? { ...n, favorite } : n)
      );
    } catch (error) {
      console.error('Toggle favorite failed:', error);
    }
  };
  const handleCreateNote = async () => {
    if (!api) return;
    try {
      const timestamp = new Date().toLocaleString('en-US', {
        year: 'numeric',
@@ -168,7 +221,7 @@ function App() {
        hour12: false,
      }).replace(/[/:]/g, '-').replace(', ', ' ');
-      const note = await api.createNote(`New Note ${timestamp}`, '', selectedCategory);
+      const note = await syncManager.createNote(`New Note ${timestamp}`, '', selectedCategory);
      setNotes([note, ...notes]);
      setSelectedNoteId(note.id);
    } catch (error) {
@@ -182,29 +235,65 @@ function App() {
    }
  };
-  const handleUpdateNote = async (updatedNote: Note) => {
+  const handleRenameCategory = async (oldName: string, newName: string) => {
-    if (!api) return;
+    // Move all notes from old category to new category
    const notesToMove = notes.filter(note => note.category === oldName);
    for (const note of notesToMove) {
      try {
-      console.log('Sending to API - content length:', updatedNote.content.length);
+        const movedNote = await syncManager.moveNote(note, newName);
-      console.log('Sending to API - last 50 chars:', updatedNote.content.slice(-50));
+        setNotes(prevNotes => prevNotes.map(n => n.id === note.id ? movedNote : n));
-      const result = await api.updateNote(updatedNote);
+      } catch (error) {
-      console.log('Received from API - content length:', result.content.length);
+        console.error(`Failed to move note ${note.id}:`, error);
-      console.log('Received from API - last 50 chars:', result.content.slice(-50));
+      }
-      // Update notes array with server response now that we have manual save
+    }
-      setNotes(notes.map(n => n.id === result.id ? result : n));
+
    // Update manual categories list
    setManualCategories(prev => 
      prev.map(cat => cat === oldName ? newName : cat)
    );
    // Update selected category if it was the renamed one
    if (selectedCategory === oldName) {
      setSelectedCategory(newName);
    }
  };
  const handleUpdateNote = async (updatedNote: Note) => {
    try {
      const originalNote = notes.find(n => n.id === updatedNote.id);
      // If category changed, use moveNote instead of updateNote
      if (originalNote && originalNote.category !== updatedNote.category) {
        const movedNote = await syncManager.moveNote(originalNote, updatedNote.category);
        // If content/title also changed, update the moved note
        if (originalNote.content !== updatedNote.content || originalNote.title !== updatedNote.title || originalNote.favorite !== updatedNote.favorite) {
          const finalNote = await syncManager.updateNote({
            ...movedNote,
            title: updatedNote.title,
            content: updatedNote.content,
            favorite: updatedNote.favorite,
          });
          setNotes(notes.map(n => n.id === originalNote.id ? finalNote : n.id === movedNote.id ? finalNote : n));
        } else {
          setNotes(notes.map(n => n.id === originalNote.id ? movedNote : n));
        }
      } else {
        const updated = await syncManager.updateNote(updatedNote);
        setNotes(notes.map(n => n.id === updatedNote.id ? updated : n));
      }
    } catch (error) {
      console.error('Update note failed:', error);
    }
  };
  const handleDeleteNote = async (note: Note) => {
    if (!api) return;
    try {
-      await api.deleteNote(note.id);
+      await syncManager.deleteNote(note);
-      setNotes(notes.filter(n => n.id !== note.id));
+      const remainingNotes = notes.filter(n => n.id !== note.id);
      setNotes(remainingNotes);
      if (selectedNoteId === note.id) {
-        setSelectedNoteId(notes[0]?.id || null);
+        setSelectedNoteId(remainingNotes[0]?.id || null);
      }
    } catch (error) {
      console.error('Delete note failed:', error);
@@ -240,6 +329,7 @@ function App() {
            selectedCategory={selectedCategory}
            onSelectCategory={setSelectedCategory}
            onCreateCategory={handleCreateCategory}
            onRenameCategory={handleRenameCategory}
            isCollapsed={isCategoriesCollapsed}
            onToggleCollapse={() => setIsCategoriesCollapsed(!isCategoriesCollapsed)}
            username={username}
@@ -267,12 +357,16 @@ function App() {
            showFavoritesOnly={showFavoritesOnly}
            onToggleFavorites={() => setShowFavoritesOnly(!showFavoritesOnly)}
            hasUnsavedChanges={hasUnsavedChanges}
            syncStatus={syncStatus}
            pendingSyncCount={pendingSyncCount}
            isOnline={isOnline}
          />
        </>
      )}
      <NoteEditor
        note={selectedNote}
        onUpdateNote={handleUpdateNote}
        onToggleFavorite={handleToggleFavorite}
        onUnsavedChanges={setHasUnsavedChanges}
        categories={categories}
        isFocusMode={isFocusMode}
--- a/src/api/nextcloud.ts
+++ b/src/api/nextcloud.ts
@@ -61,7 +61,52 @@ export class NextcloudAPI {
    await this.request<void>(`/notes/${id}`, { method: 'DELETE' });
  }
-  async fetchAttachment(_noteId: number, path: string, noteCategory?: string): Promise<string> {
+  // Fetch lightweight note list with IDs and favorites for hybrid sync
  async fetchNotesMetadata(): Promise<Array<{id: number, title: string, category: string, favorite: boolean, modified: number}>> {
    const notes = await this.request<Note[]>('/notes');
    return notes.map(note => ({
      id: note.id as number,
      title: note.title,
      category: note.category,
      favorite: note.favorite,
      modified: note.modified,
    }));
  }
  // Update only favorite status via API
  async updateFavoriteStatus(noteId: number, favorite: boolean): Promise<void> {
    await this.request<Note>(`/notes/${noteId}`, {
      method: 'PUT',
      body: JSON.stringify({ favorite }),
    });
  }
  // Map WebDAV note to API ID by matching modified timestamp and category
  // We can't use title because API title and WebDAV first-line title can differ
  async findApiIdForNote(title: string, category: string, modified: number): Promise<number | null> {
    try {
      const metadata = await this.fetchNotesMetadata();
      // First try exact title + category match
      let match = metadata.find(note => 
        note.title === title && note.category === category
      );
      // If no title match, try modified timestamp + category (more reliable)
      if (!match) {
        match = metadata.find(note => 
          note.modified === modified && note.category === category
        );
      }
      return match ? match.id : null;
    } catch (error) {
      console.error('Failed to find API ID for note:', error);
      return null;
    }
  }
  async fetchAttachment(_noteId: number | string, path: string, noteCategory?: string): Promise<string> {
    // Build WebDAV path: /remote.php/dav/files/{username}/Notes/{category}/.attachments.{noteId}/{filename}
    // The path from markdown is like: .attachments.38479/Screenshot.png
    // We need to construct the full WebDAV URL
@@ -77,7 +122,7 @@ export class NextcloudAPI {
    webdavPath += `/${path}`;
    const url = `${this.serverURL}${webdavPath}`;
-    console.log('Fetching attachment via WebDAV:', url);
+    console.log(`[Note ${_noteId}] Fetching attachment via WebDAV:`, url);
    const response = await tauriFetch(url, {
      headers: {
@@ -102,7 +147,7 @@ export class NextcloudAPI {
    return this.serverURL;
  }
-  async uploadAttachment(noteId: number, file: File, noteCategory?: string): Promise<string> {
+  async uploadAttachment(noteId: number | string, file: File, noteCategory?: string): Promise<string> {
    // Create .attachments.{noteId} directory path and upload file via WebDAV PUT
    // Returns the relative path to insert into markdown
@@ -112,7 +157,14 @@ export class NextcloudAPI {
      webdavPath += `/${noteCategory}`;
    }
-    const attachmentDir = `.attachments.${noteId}`;
+    // Sanitize note ID: extract just the filename without extension and remove invalid chars
    // noteId might be "category/filename.md" or just "filename.md"
    const noteIdStr = String(noteId);
    const justFilename = noteIdStr.split('/').pop() || noteIdStr;
    const filenameWithoutExt = justFilename.replace(/\.(md|txt)$/, '');
    const sanitizedNoteId = filenameWithoutExt.replace(/[^a-zA-Z0-9_-]/g, '_');
    const attachmentDir = `.attachments.${sanitizedNoteId}`;
    const fileName = file.name.replace(/[^a-zA-Z0-9._-]/g, '_'); // Sanitize filename
    const fullPath = `${webdavPath}/${attachmentDir}/${fileName}`;
@@ -152,4 +204,350 @@ export class NextcloudAPI {
    // Return the relative path for markdown
    return `${attachmentDir}/${fileName}`;
  }
  async fetchCategoryColors(): Promise<Record<string, number>> {
    const webdavPath = `/remote.php/dav/files/${this.username}/Notes/.category-colors.json`;
    const url = `${this.serverURL}${webdavPath}`;
    try {
      const response = await tauriFetch(url, {
        headers: {
          'Authorization': this.authHeader,
        },
      });
      if (!response.ok) {
        if (response.status === 404) {
          // File doesn't exist yet, return empty object
          return {};
        }
        throw new Error(`Failed to fetch category colors: ${response.status}`);
      }
      const text = await response.text();
      return JSON.parse(text);
    } catch (error) {
      console.warn('Could not fetch category colors, using empty:', error);
      return {};
    }
  }
  async saveCategoryColors(colors: Record<string, number>): Promise<void> {
    const webdavPath = `/remote.php/dav/files/${this.username}/Notes/.category-colors.json`;
    const url = `${this.serverURL}${webdavPath}`;
    const content = JSON.stringify(colors, null, 2);
    const response = await tauriFetch(url, {
      method: 'PUT',
      headers: {
        'Authorization': this.authHeader,
        'Content-Type': 'application/json',
      },
      body: content,
    });
    if (!response.ok && response.status !== 201 && response.status !== 204) {
      throw new Error(`Failed to save category colors: ${response.status}`);
    }
  }
  // WebDAV-based note operations
  private parseNoteFromContent(content: string, filename: string, category: string, etag: string, modified: number): Note {
    // Extract title from first line
    const firstLine = content.split('\n')[0].replace(/^#+\s*/, '').trim();
    const title = firstLine || filename.replace(/\.(md|txt)$/, '');
    return {
      id: `${category}/${filename}`,
      filename,
      path: category ? `${category}/${filename}` : filename,
      etag,
      readonly: false,
      content, // Store full content including first line
      title,
      category,
      favorite: false,
      modified,
    };
  }
  private formatNoteContent(note: Note): string {
    // Content already includes the title as first line
    return note.content;
  }
  async fetchNotesWebDAV(): Promise<Note[]> {
    const webdavPath = `/remote.php/dav/files/${this.username}/Notes`;
    const url = `${this.serverURL}${webdavPath}`;
    const response = await tauriFetch(url, {
      method: 'PROPFIND',
      headers: {
        'Authorization': this.authHeader,
        'Depth': 'infinity',
        'Content-Type': 'application/xml',
      },
      body: `<?xml version="1.0"?>
        <d:propfind xmlns:d="DAV:">
          <d:prop>
            <d:getlastmodified/>
            <d:getetag/>
            <d:getcontenttype/>
            <d:resourcetype/>
          </d:prop>
        </d:propfind>`,
    });
    if (!response.ok) {
      throw new Error(`Failed to list notes: ${response.status}`);
    }
    const xmlText = await response.text();
    const notes: Note[] = [];
    // Parse XML response
    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(xmlText, 'text/xml');
    const responses = xmlDoc.getElementsByTagNameNS('DAV:', 'response');
    for (let i = 0; i < responses.length; i++) {
      const responseNode = responses[i];
      const href = responseNode.getElementsByTagNameNS('DAV:', 'href')[0]?.textContent || '';
      // Skip if not a .md or .txt file
      if (!href.endsWith('.md') && !href.endsWith('.txt')) continue;
      // Skip hidden files
      const filename = decodeURIComponent(href.split('/').pop() || '');
      if (filename.startsWith('.')) continue;
      const propstat = responseNode.getElementsByTagNameNS('DAV:', 'propstat')[0];
      const prop = propstat?.getElementsByTagNameNS('DAV:', 'prop')[0];
      const etag = prop?.getElementsByTagNameNS('DAV:', 'getetag')[0]?.textContent || '';
      const lastModified = prop?.getElementsByTagNameNS('DAV:', 'getlastmodified')[0]?.textContent || '';
      const modified = lastModified ? Math.floor(new Date(lastModified).getTime() / 1000) : 0;
      // Extract category from path and decode URL encoding
      const pathParts = href.split('/Notes/')[1]?.split('/');
      const category = pathParts && pathParts.length > 1 
        ? pathParts.slice(0, -1).map(part => decodeURIComponent(part)).join('/') 
        : '';
      // Create note with empty content - will be loaded on-demand
      const title = filename.replace(/\.(md|txt)$/, '');
      const note: Note = {
        id: category ? `${category}/${filename}` : filename,
        filename,
        path: category ? `${category}/${filename}` : filename,
        etag,
        readonly: false,
        content: '', // Empty - load on demand
        title,
        category,
        favorite: false,
        modified,
      };
      notes.push(note);
    }
    return notes;
  }
  async fetchNoteContentWebDAV(note: Note): Promise<Note> {
    const categoryPath = note.category ? `/${note.category}` : '';
    const filename = note.filename || String(note.id).split('/').pop() || 'note.md';
    const webdavPath = `/remote.php/dav/files/${this.username}/Notes${categoryPath}/${filename}`;
    const url = `${this.serverURL}${webdavPath}`;
    const response = await tauriFetch(url, {
      headers: { 'Authorization': this.authHeader },
    });
    if (!response.ok) {
      throw new Error(`Failed to fetch note content: ${response.status}`);
    }
    const content = await response.text();
    return this.parseNoteFromContent(content, filename, note.category, note.etag, note.modified);
  }
  async createNoteWebDAV(title: string, content: string, category: string): Promise<Note> {
    const filename = `${title.replace(/[^a-zA-Z0-9\s-]/g, '').replace(/\s+/g, ' ').trim()}.md`;
    const categoryPath = category ? `/${category}` : '';
    const webdavPath = `/remote.php/dav/files/${this.username}/Notes${categoryPath}/${filename}`;
    const url = `${this.serverURL}${webdavPath}`;
    // Ensure category directory exists
    if (category) {
      try {
        const categoryUrl = `${this.serverURL}/remote.php/dav/files/${this.username}/Notes/${category}`;
        await tauriFetch(categoryUrl, {
          method: 'MKCOL',
          headers: { 'Authorization': this.authHeader },
        });
      } catch (e) {
        // Directory might already exist
      }
    }
    const noteContent = `${title}\n${content}`;
    const response = await tauriFetch(url, {
      method: 'PUT',
      headers: {
        'Authorization': this.authHeader,
        'Content-Type': 'text/plain',
      },
      body: noteContent,
    });
    if (!response.ok && response.status !== 201 && response.status !== 204) {
      throw new Error(`Failed to create note: ${response.status}`);
    }
    const etag = response.headers.get('etag') || '';
    const modified = Math.floor(Date.now() / 1000);
    return {
      id: `${category}/${filename}`,
      filename,
      path: category ? `${category}/${filename}` : filename,
      etag,
      readonly: false,
      content,
      title,
      category,
      favorite: false,
      modified,
    };
  }
  async updateNoteWebDAV(note: Note): Promise<Note> {
    const categoryPath = note.category ? `/${note.category}` : '';
    const webdavPath = `/remote.php/dav/files/${this.username}/Notes${categoryPath}/${note.filename}`;
    const url = `${this.serverURL}${webdavPath}`;
    const noteContent = this.formatNoteContent(note);
    const response = await tauriFetch(url, {
      method: 'PUT',
      headers: {
        'Authorization': this.authHeader,
        'Content-Type': 'text/plain',
        'If-Match': note.etag, // Prevent overwriting if file changed
      },
      body: noteContent,
    });
    if (!response.ok && response.status !== 204) {
      if (response.status === 412) {
        throw new Error('Note was modified by another client. Please refresh.');
      }
      throw new Error(`Failed to update note: ${response.status}`);
    }
    const etag = response.headers.get('etag') || note.etag;
    return {
      ...note,
      etag,
      modified: Math.floor(Date.now() / 1000),
    };
  }
  async deleteNoteWebDAV(note: Note): Promise<void> {
    const categoryPath = note.category ? `/${note.category}` : '';
    const webdavPath = `/remote.php/dav/files/${this.username}/Notes${categoryPath}/${note.filename}`;
    const url = `${this.serverURL}${webdavPath}`;
    const response = await tauriFetch(url, {
      method: 'DELETE',
      headers: { 'Authorization': this.authHeader },
    });
    if (!response.ok && response.status !== 204) {
      throw new Error(`Failed to delete note: ${response.status}`);
    }
  }
  async moveNoteWebDAV(note: Note, newCategory: string): Promise<Note> {
    const oldCategoryPath = note.category ? `/${note.category}` : '';
    const newCategoryPath = newCategory ? `/${newCategory}` : '';
    const oldPath = `/remote.php/dav/files/${this.username}/Notes${oldCategoryPath}/${note.filename}`;
    const newPath = `/remote.php/dav/files/${this.username}/Notes${newCategoryPath}/${note.filename}`;
    // Ensure new category directory exists (including nested subdirectories)
    if (newCategory) {
      const parts = newCategory.split('/');
      let currentPath = '';
      for (const part of parts) {
        currentPath += (currentPath ? '/' : '') + part;
        try {
          const categoryUrl = `${this.serverURL}/remote.php/dav/files/${this.username}/Notes/${currentPath}`;
          await tauriFetch(categoryUrl, {
            method: 'MKCOL',
            headers: { 'Authorization': this.authHeader },
          });
        } catch (e) {
          // Directory might already exist, continue
        }
      }
    }
    const response = await tauriFetch(`${this.serverURL}${oldPath}`, {
      method: 'MOVE',
      headers: {
        'Authorization': this.authHeader,
        'Destination': `${this.serverURL}${newPath}`,
      },
    });
    if (!response.ok && response.status !== 201 && response.status !== 204) {
      throw new Error(`Failed to move note: ${response.status}`);
    }
    // Move attachment folder if it exists
    const noteIdStr = String(note.id);
    const justFilename = noteIdStr.split('/').pop() || noteIdStr;
    const filenameWithoutExt = justFilename.replace(/\.(md|txt)$/, '');
    const sanitizedNoteId = filenameWithoutExt.replace(/[^a-zA-Z0-9_-]/g, '_');
    const attachmentFolder = `.attachments.${sanitizedNoteId}`;
    const oldAttachmentPath = `/remote.php/dav/files/${this.username}/Notes${oldCategoryPath}/${attachmentFolder}`;
    const newAttachmentPath = `/remote.php/dav/files/${this.username}/Notes${newCategoryPath}/${attachmentFolder}`;
    console.log(`Attempting to move attachment folder:`);
    console.log(`  From: ${oldAttachmentPath}`);
    console.log(`  To: ${newAttachmentPath}`);
    try {
      const attachmentResponse = await tauriFetch(`${this.serverURL}${oldAttachmentPath}`, {
        method: 'MOVE',
        headers: {
          'Authorization': this.authHeader,
          'Destination': `${this.serverURL}${newAttachmentPath}`,
        },
      });
      console.log(`Attachment folder MOVE response status: ${attachmentResponse.status}`);
      if (attachmentResponse.ok || attachmentResponse.status === 201 || attachmentResponse.status === 204) {
        console.log(`✓ Successfully moved attachment folder: ${attachmentFolder}`);
      } else {
        console.log(`✗ Failed to move attachment folder (status ${attachmentResponse.status})`);
      }
    } catch (e) {
      console.log(`✗ Error moving attachment folder:`, e);
    }
    return {
      ...note,
      category: newCategory,
      path: newCategory ? `${newCategory}/${note.filename}` : note.filename || '',
      id: `${newCategory}/${note.filename}`,
    };
  }
 }
--- a/src/components/CategoriesSidebar.tsx
+++ b/src/components/CategoriesSidebar.tsx
@@ -1,4 +1,5 @@
 import { useState, useEffect, useRef } from 'react';
 import { categoryColorsSync } from '../services/categoryColorsSync';
 const EDITOR_FONTS = [
  { name: 'Source Code Pro', value: 'Source Code Pro' },
@@ -20,6 +21,7 @@ interface CategoriesSidebarProps {
  selectedCategory: string;
  onSelectCategory: (category: string) => void;
  onCreateCategory: (name: string) => void;
  onRenameCategory: (oldName: string, newName: string) => void;
  isCollapsed: boolean;
  onToggleCollapse: () => void;
  username: string;
@@ -36,11 +38,25 @@ interface CategoriesSidebarProps {
  onPreviewFontSizeChange: (size: number) => void;
 }
 const CATEGORY_COLORS = [
  { name: 'Blue', bg: 'bg-blue-100 dark:bg-blue-900/30', text: 'text-blue-700 dark:text-blue-300', preview: '#dbeafe', dot: '#3b82f6' },
  { name: 'Green', bg: 'bg-green-100 dark:bg-green-900/30', text: 'text-green-700 dark:text-green-300', preview: '#dcfce7', dot: '#22c55e' },
  { name: 'Purple', bg: 'bg-purple-100 dark:bg-purple-900/30', text: 'text-purple-700 dark:text-purple-300', preview: '#f3e8ff', dot: '#a855f7' },
  { name: 'Pink', bg: 'bg-pink-100 dark:bg-pink-900/30', text: 'text-pink-700 dark:text-pink-300', preview: '#fce7f3', dot: '#ec4899' },
  { name: 'Yellow', bg: 'bg-yellow-100 dark:bg-yellow-900/30', text: 'text-yellow-700 dark:text-yellow-300', preview: '#fef9c3', dot: '#eab308' },
  { name: 'Red', bg: 'bg-red-100 dark:bg-red-900/30', text: 'text-red-700 dark:text-red-300', preview: '#fee2e2', dot: '#ef4444' },
  { name: 'Orange', bg: 'bg-orange-100 dark:bg-orange-900/30', text: 'text-orange-700 dark:text-orange-300', preview: '#ffedd5', dot: '#f97316' },
  { name: 'Teal', bg: 'bg-teal-100 dark:bg-teal-900/30', text: 'text-teal-700 dark:text-teal-300', preview: '#ccfbf1', dot: '#14b8a6' },
  { name: 'Indigo', bg: 'bg-indigo-100 dark:bg-indigo-900/30', text: 'text-indigo-700 dark:text-indigo-300', preview: '#e0e7ff', dot: '#6366f1' },
  { name: 'Cyan', bg: 'bg-cyan-100 dark:bg-cyan-900/30', text: 'text-cyan-700 dark:text-cyan-300', preview: '#cffafe', dot: '#06b6d4' },
 ];
 export function CategoriesSidebar({ 
  categories, 
  selectedCategory, 
  onSelectCategory,
  onCreateCategory,
  onRenameCategory,
  isCollapsed,
  onToggleCollapse,
  username,
@@ -58,7 +74,31 @@ export function CategoriesSidebar({
 }: CategoriesSidebarProps) {
  const [isCreating, setIsCreating] = useState(false);
  const [newCategoryName, setNewCategoryName] = useState('');
  const [renamingCategory, setRenamingCategory] = useState<string | null>(null);
  const [renameCategoryValue, setRenameCategoryValue] = useState('');
  const [categoryColors, setCategoryColors] = useState<Record<string, number>>(() => categoryColorsSync.getAllColors());
  const [colorPickerCategory, setColorPickerCategory] = useState<string | null>(null);
  const [isSettingsCollapsed, setIsSettingsCollapsed] = useState(true);
  const inputRef = useRef<HTMLInputElement>(null);
  const renameInputRef = useRef<HTMLInputElement>(null);
  useEffect(() => {
    const handleColorChange = () => {
      setCategoryColors(categoryColorsSync.getAllColors());
    };
    categoryColorsSync.setChangeCallback(handleColorChange);
    window.addEventListener('categoryColorChanged', handleColorChange);
    return () => {
      window.removeEventListener('categoryColorChanged', handleColorChange);
    };
  }, []);
  const setCategoryColor = async (category: string, colorIndex: number | null) => {
    await categoryColorsSync.setColor(category, colorIndex);
    setColorPickerCategory(null);
  };
  useEffect(() => {
    if (isCreating && inputRef.current) {
@@ -66,6 +106,13 @@ export function CategoriesSidebar({
    }
  }, [isCreating]);
  useEffect(() => {
    if (renamingCategory && renameInputRef.current) {
      renameInputRef.current.focus();
      renameInputRef.current.select();
    }
  }, [renamingCategory]);
  const handleCreateCategory = () => {
    if (newCategoryName.trim()) {
      onCreateCategory(newCategoryName.trim());
@@ -74,6 +121,19 @@ export function CategoriesSidebar({
    }
  };
  const handleRenameCategory = () => {
    if (renameCategoryValue.trim() && renamingCategory && renameCategoryValue.trim() !== renamingCategory) {
      onRenameCategory(renamingCategory, renameCategoryValue.trim());
    }
    setRenamingCategory(null);
    setRenameCategoryValue('');
  };
  const startRenaming = (category: string) => {
    setRenamingCategory(category);
    setRenameCategoryValue(category);
  };
  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      handleCreateCategory();
@@ -83,6 +143,15 @@ export function CategoriesSidebar({
    }
  };
  const handleRenameKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      handleRenameCategory();
    } else if (e.key === 'Escape') {
      setRenamingCategory(null);
      setRenameCategoryValue('');
    }
  };
  if (isCollapsed) {
    return (
      <button
@@ -142,20 +211,104 @@ export function CategoriesSidebar({
          </button>
          {categories.map((category) => (
-            <button
+            renamingCategory === category ? (
-              key={category}
+              <div key={category} className="space-y-1">
-              onClick={() => onSelectCategory(category)}
+                <div className="flex items-center gap-2 px-3 py-2 bg-white dark:bg-gray-700 rounded-lg border border-blue-500">
-              className={`w-full text-left px-3 py-2 rounded-lg transition-colors flex items-center ${
+                  <svg className="w-4 h-4 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
                  </svg>
                  <input
                    ref={renameInputRef}
                    type="text"
                    value={renameCategoryValue}
                    onChange={(e) => setRenameCategoryValue(e.target.value)}
                    onKeyDown={handleRenameKeyDown}
                    onBlur={handleRenameCategory}
                    className="flex-1 text-sm px-2 py-1 border-none bg-transparent text-gray-900 dark:text-gray-100 focus:outline-none"
                  />
                </div>
                <div className="px-3 text-xs text-gray-500 dark:text-gray-400">
                  Press <kbd className="px-1 py-0.5 bg-gray-200 dark:bg-gray-600 rounded text-xs">Enter</kbd> to save, <kbd className="px-1 py-0.5 bg-gray-200 dark:bg-gray-600 rounded text-xs">Esc</kbd> to cancel
                </div>
              </div>
            ) : (
              <div key={category} className="relative">
                <div
                  className={`group w-full px-3 py-2 rounded-lg transition-colors flex items-center ${
                    selectedCategory === category 
                      ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300' 
                      : 'hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300'
                  }`}
                >
-              <svg className="w-4 h-4 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <button
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
+                    onClick={() => onSelectCategory(category)}
                    className="flex items-center flex-1 min-w-0 text-left"
                  >
                    {(() => {
                      const colorIndex = categoryColors[category];
                      const color = colorIndex !== undefined ? CATEGORY_COLORS[colorIndex] : null;
                      return (
                        <svg 
                          className="w-4 h-4 mr-2 flex-shrink-0" 
                          fill={color ? color.dot : "currentColor"}
                          viewBox="0 0 24 24"
                        >
                          <path d="M3 7c0-1.1.9-2 2-2h4l2 2h6c1.1 0 2 .9 2 2v10c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V7z" />
                        </svg>
                      );
                    })()}
                    <span className="text-sm truncate">{category}</span>
                  </button>
                  <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                    <button
                      onClick={(e) => {
                        e.stopPropagation();
                        setColorPickerCategory(colorPickerCategory === category ? null : category);
                      }}
                      className="p-1 hover:bg-gray-300 dark:hover:bg-gray-600 rounded flex-shrink-0"
                      title="Change color"
                    >
                      <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
                      </svg>
                    </button>
                    <button
                      onClick={(e) => {
                        e.stopPropagation();
                        startRenaming(category);
                      }}
                      className="p-1 hover:bg-gray-300 dark:hover:bg-gray-600 rounded flex-shrink-0"
                      title="Rename category"
                    >
                      <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
                      </svg>
                    </button>
                  </div>
                </div>
                {colorPickerCategory === category && (
                  <div className="absolute left-0 right-0 top-full mt-1 bg-white dark:bg-gray-700 rounded-lg shadow-lg border border-gray-200 dark:border-gray-600 p-2 z-10">
                    <div className="grid grid-cols-5 gap-1.5 mb-2">
                      {CATEGORY_COLORS.map((color, idx) => (
                        <button
                          key={idx}
                          onClick={() => setCategoryColor(category, idx)}
                          className="w-7 h-7 rounded hover:scale-110 transition-transform border-2 border-gray-300 dark:border-gray-600"
                          style={{ backgroundColor: color.preview }}
                          title={color.name}
                        />
                      ))}
                    </div>
                    <button
                      onClick={() => setCategoryColor(category, null)}
                      className="w-full text-xs py-1.5 px-2 bg-gray-100 dark:bg-gray-600 hover:bg-gray-200 dark:hover:bg-gray-500 rounded text-gray-700 dark:text-gray-200 transition-colors"
                    >
                      Remove Color
                    </button>
                  </div>
                )}
              </div>
            )
          ))}
          {isCreating && (
@@ -185,14 +338,24 @@ export function CategoriesSidebar({
      </div>
      {/* User Info and Settings */}
-      <div className="border-t border-gray-200 dark:border-gray-700 p-4 bg-white dark:bg-gray-900">
+      <div className="border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900">
-        <div className="flex items-center justify-between mb-3">
+        <div className="flex items-center justify-between p-4 pb-3">
          <div className="flex items-center space-x-2 min-w-0">
            <div className="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white font-semibold flex-shrink-0">
              {username.charAt(0).toUpperCase()}
            </div>
            <span className="text-sm text-gray-700 dark:text-gray-200 truncate font-medium">{username}</span>
          </div>
          <div className="flex items-center gap-1">
            <button
              onClick={() => setIsSettingsCollapsed(!isSettingsCollapsed)}
              className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors flex-shrink-0"
              title={isSettingsCollapsed ? "Show Settings" : "Hide Settings"}
            >
              <svg className={`w-4 h-4 text-gray-600 dark:text-gray-300 transition-transform ${isSettingsCollapsed ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
              </svg>
            </button>
            <button
              onClick={onLogout}
              className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors flex-shrink-0"
@@ -203,7 +366,10 @@ export function CategoriesSidebar({
              </svg>
            </button>
          </div>
        </div>
        {!isSettingsCollapsed && (
          <div className="px-4 pb-4">
            {/* Theme Toggle */}
            <div className="flex items-center justify-between mb-3">
          <span className="text-xs text-gray-500 dark:text-gray-400">Theme</span>
@@ -322,6 +488,8 @@ export function CategoriesSidebar({
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
 }
--- a/src/components/NoteEditor.tsx
+++ b/src/components/NoteEditor.tsx
@@ -10,6 +10,7 @@ import { InsertToolbar } from './InsertToolbar';
 interface NoteEditorProps {
  note: Note | null;
  onUpdateNote: (note: Note) => void;
  onToggleFavorite?: (note: Note, favorite: boolean) => void;
  onUnsavedChanges?: (hasChanges: boolean) => void;
  categories: string[];
  isFocusMode?: boolean;
@@ -24,20 +25,19 @@ interface NoteEditorProps {
 const imageCache = new Map<string, string>();
-export function NoteEditor({ note, onUpdateNote, onUnsavedChanges, categories, isFocusMode, onToggleFocusMode, editorFont = 'Source Code Pro', editorFontSize = 14, previewFont = 'Merriweather', previewFontSize = 16, api }: NoteEditorProps) {
+export function NoteEditor({ note, onUpdateNote, onToggleFavorite, onUnsavedChanges, categories, isFocusMode, onToggleFocusMode, editorFont = 'Source Code Pro', editorFontSize = 14, previewFont = 'Merriweather', previewFontSize = 16, api }: NoteEditorProps) {
  const [localTitle, setLocalTitle] = useState('');
  const [localContent, setLocalContent] = useState('');
  const [localCategory, setLocalCategory] = useState('');
  const [localFavorite, setLocalFavorite] = useState(false);
  const [isSaving, setIsSaving] = useState(false);
  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
  const [titleManuallyEdited, setTitleManuallyEdited] = useState(false);
  const [isExportingPDF, setIsExportingPDF] = useState(false);
  const [isPreviewMode, setIsPreviewMode] = useState(false);
  const [processedContent, setProcessedContent] = useState('');
  const [isLoadingImages, setIsLoadingImages] = useState(false);
  const [isUploading, setIsUploading] = useState(false);
-  const previousNoteIdRef = useRef<number | null>(null);
+  const previousNoteIdRef = useRef<number | string | null>(null);
  const previousNoteContentRef = useRef<string>('');
  const textareaRef = useRef<HTMLTextAreaElement>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);
@@ -63,8 +63,16 @@ export function NoteEditor({ note, onUpdateNote, onUnsavedChanges, categories, i
      // Use setTimeout to ensure DOM has updated
      setTimeout(() => {
        if (textareaRef.current) {
          // Save cursor position and scroll position
          const cursorPosition = textareaRef.current.selectionStart;
          const scrollTop = textareaRef.current.scrollTop;
          textareaRef.current.style.height = 'auto';
          textareaRef.current.style.height = textareaRef.current.scrollHeight + 'px';
          // Restore cursor position and scroll position
          textareaRef.current.setSelectionRange(cursorPosition, cursorPosition);
          textareaRef.current.scrollTop = scrollTop;
        }
      }, 0);
    }
@@ -77,13 +85,23 @@ export function NoteEditor({ note, onUpdateNote, onUnsavedChanges, categories, i
      return;
    }
    // Guard: Only process if localContent has been updated for the current note
    // This prevents processing stale content from the previous note
    if (previousNoteIdRef.current !== note.id) {
      console.log(`[Note ${note.id}] Skipping image processing - waiting for content to sync (previousNoteIdRef: ${previousNoteIdRef.current})`);
      return;
    }
    const processImages = async () => {
      console.log(`[Note ${note.id}] Processing images in preview mode. Content length: ${localContent.length}`);
      setIsLoadingImages(true);
      setProcessedContent(''); // Clear old content immediately
      // Find all image references in markdown: ![alt](path)
      const imageRegex = /!\[([^\]]*)\]\(([^)]+)\)/g;
      let content = localContent;
      const matches = [...localContent.matchAll(imageRegex)];
      console.log(`[Note ${note.id}] Found ${matches.length} images to process`);
      for (const match of matches) {
        const [fullMatch, alt, imagePath] = match;
@@ -121,29 +139,39 @@ export function NoteEditor({ note, onUpdateNote, onUnsavedChanges, categories, i
  useEffect(() => {
    const loadNewNote = () => {
      if (note) {
        setLocalTitle(note.title);
        setLocalContent(note.content);
        setLocalCategory(note.category || '');
        setLocalFavorite(note.favorite);
        setHasUnsavedChanges(false);
        const firstLine = note.content.split('\n')[0].replace(/^#+\s*/, '').trim();
        const titleMatchesFirstLine = note.title === firstLine || note.title === firstLine.substring(0, 50);
        setTitleManuallyEdited(!titleMatchesFirstLine);
        previousNoteIdRef.current = note.id;
        previousNoteContentRef.current = note.content;
      }
    };
    // Switching to a different note
    if (previousNoteIdRef.current !== null && previousNoteIdRef.current !== note?.id) {
      console.log(`Switching from note ${previousNoteIdRef.current} to note ${note?.id}`);
      setProcessedContent('');
      if (hasUnsavedChanges) {
        handleSave();
      }
      setTimeout(loadNewNote, 100);
    } else {
      loadNewNote();
    } 
-  }, [note?.id]);
+    // Same note but content changed from server (and no unsaved local changes)
    else if (note && previousNoteIdRef.current === note.id && !hasUnsavedChanges && previousNoteContentRef.current !== note.content) {
      console.log(`Note ${note.id} content changed from server (prev: ${previousNoteContentRef.current.length} chars, new: ${note.content.length} chars)`);
      loadNewNote();
    }
    // Initial load
    else if (!note || previousNoteIdRef.current === null) {
      loadNewNote();
    }
    // Favorite status changed (e.g., from sync)
    else if (note && note.favorite !== localFavorite) {
      setLocalFavorite(note.favorite);
    }
  }, [note?.id, note?.content, note?.modified, note?.favorite]);
  const handleSave = () => {
    if (!note || !hasUnsavedChanges) return;
@@ -152,9 +180,13 @@ export function NoteEditor({ note, onUpdateNote, onUnsavedChanges, categories, i
    console.log('Last 50 chars:', localContent.slice(-50));
    setIsSaving(true);
    setHasUnsavedChanges(false);
    const firstLine = localContent.split('\n')[0].replace(/^#+\s*/, '').trim();
    const title = firstLine || 'Untitled';
    onUpdateNote({
      ...note,
-      title: localTitle,
+      title,
      content: localContent,
      category: localCategory,
      favorite: localFavorite,
@@ -162,36 +194,33 @@ export function NoteEditor({ note, onUpdateNote, onUnsavedChanges, categories, i
    setTimeout(() => setIsSaving(false), 500);
  };
  const handleTitleChange = (value: string) => {
    setLocalTitle(value);
    setTitleManuallyEdited(true);
    setHasUnsavedChanges(true);
  };
  const handleContentChange = (value: string) => {
    setLocalContent(value);
    setHasUnsavedChanges(true);
    if (!titleManuallyEdited) {
      const firstLine = value.split('\n')[0].replace(/^#+\s*/, '').trim();
      if (firstLine) {
        setLocalTitle(firstLine.substring(0, 50));
      }
    }
  };
  const handleDiscard = () => {
    if (!note) return;
    setLocalTitle(note.title);
    setLocalContent(note.content);
    setLocalCategory(note.category || '');
    setLocalFavorite(note.favorite);
    setHasUnsavedChanges(false);
  };
-    const firstLine = note.content.split('\n')[0].replace(/^#+\s*/, '').trim();
+  const loadFontAsBase64 = async (fontPath: string): Promise<string> => {
-    const titleMatchesFirstLine = note.title === firstLine || note.title === firstLine.substring(0, 50);
+    const response = await fetch(fontPath);
-    setTitleManuallyEdited(!titleMatchesFirstLine);
+    const blob = await response.blob();
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onloadend = () => {
        const base64 = reader.result as string;
        // Remove data URL prefix to get just the base64 string
        resolve(base64.split(',')[1]);
      };
      reader.onerror = reject;
      reader.readAsDataURL(blob);
    });
  };
  const handleExportPDF = async () => {
@@ -200,14 +229,105 @@ export function NoteEditor({ note, onUpdateNote, onUnsavedChanges, categories, i
    setIsExportingPDF(true);
    try {
      // Create PDF
      const pdf = new jsPDF({
        orientation: 'portrait',
        unit: 'mm',
        format: 'a4',
      });
      // Load and add custom fonts based on preview font selection
      const fontMap: { [key: string]: { regular: string; italic: string; name: string } } = {
        'Merriweather': {
          regular: '/fonts/Merriweather-VariableFont_opsz,wdth,wght.ttf',
          italic: '/fonts/Merriweather-Italic-VariableFont_opsz,wdth,wght.ttf',
          name: 'Merriweather'
        },
        'Crimson Pro': {
          regular: '/fonts/CrimsonPro-VariableFont_wght.ttf',
          italic: '/fonts/CrimsonPro-Italic-VariableFont_wght.ttf',
          name: 'CrimsonPro'
        },
        'Roboto Serif': {
          regular: '/fonts/RobotoSerif-VariableFont_GRAD,opsz,wdth,wght.ttf',
          italic: '/fonts/RobotoSerif-Italic-VariableFont_GRAD,opsz,wdth,wght.ttf',
          name: 'RobotoSerif'
        },
        'Average': {
          regular: '/fonts/Average-Regular.ttf',
          italic: '/fonts/Average-Regular.ttf', // No italic variant
          name: 'Average'
        }
      };
      const selectedFont = fontMap[previewFont];
      if (selectedFont) {
        try {
          const regularBase64 = await loadFontAsBase64(selectedFont.regular);
          pdf.addFileToVFS(`${selectedFont.name}-normal.ttf`, regularBase64);
          pdf.addFont(`${selectedFont.name}-normal.ttf`, selectedFont.name, 'normal');
          const italicBase64 = await loadFontAsBase64(selectedFont.italic);
          pdf.addFileToVFS(`${selectedFont.name}-italic.ttf`, italicBase64);
          pdf.addFont(`${selectedFont.name}-italic.ttf`, selectedFont.name, 'italic');
          // Set the custom font as default
          pdf.setFont(selectedFont.name, 'normal');
        } catch (fontError) {
          console.error('Failed to load custom font, using default:', fontError);
        }
      }
      // Add Source Code Pro for code blocks
      try {
        const codeFont = await loadFontAsBase64('/fonts/SourceCodePro-VariableFont_wght.ttf');
        pdf.addFileToVFS('SourceCodePro-normal.ttf', codeFont);
        pdf.addFont('SourceCodePro-normal.ttf', 'SourceCodePro', 'normal');
      } catch (codeFontError) {
        console.error('Failed to load code font:', codeFontError);
      }
      // Process images to embed them as data URLs
      let contentForPDF = localContent;
      if (api) {
        const imageRegex = /!\[([^\]]*)\]\(([^)]+)\)/g;
        const matches = [...localContent.matchAll(imageRegex)];
        for (const match of matches) {
          const [fullMatch, alt, imagePath] = match;
          // Skip external URLs
          if (imagePath.startsWith('http://') || imagePath.startsWith('https://')) {
            continue;
          }
          // Check cache first
          const cacheKey = `${note.id}:${imagePath}`;
          if (imageCache.has(cacheKey)) {
            const dataUrl = imageCache.get(cacheKey)!;
            contentForPDF = contentForPDF.replace(fullMatch, `![${alt}](${dataUrl})`);
            continue;
          }
          try {
            const dataUrl = await api.fetchAttachment(note.id, imagePath, note.category);
            imageCache.set(cacheKey, dataUrl);
            contentForPDF = contentForPDF.replace(fullMatch, `![${alt}](${dataUrl})`);
          } catch (error) {
            console.error(`Failed to fetch attachment for PDF: ${imagePath}`, error);
          }
        }
      }
      const container = document.createElement('div');
      container.style.fontFamily = `"${previewFont}", Georgia, serif`;
-      container.style.fontSize = '12px';
+      container.style.fontSize = `${previewFontSize}px`;
      container.style.lineHeight = '1.6';
      container.style.color = '#000000';
      const titleElement = document.createElement('h1');
-      titleElement.textContent = localTitle || 'Untitled';
+      const firstLine = localContent.split('\n')[0].replace(/^#+\s*/, '').trim();
      titleElement.textContent = firstLine || 'Untitled';
      titleElement.style.marginTop = '0';
      titleElement.style.marginBottom = '20px';
      titleElement.style.fontSize = '24px';
@@ -218,37 +338,40 @@ export function NoteEditor({ note, onUpdateNote, onUnsavedChanges, categories, i
      container.appendChild(titleElement);
      const contentElement = document.createElement('div');
-      const html = marked.parse(localContent || '', { async: false }) as string;
+      const html = marked.parse(contentForPDF || '', { async: false }) as string;
      contentElement.innerHTML = html;
-      contentElement.style.fontSize = '12px';
+      contentElement.style.fontSize = `${previewFontSize}px`;
      contentElement.style.lineHeight = '1.6';
      contentElement.style.color = '#000000';
      container.appendChild(contentElement);
      // Apply monospace font to code elements
      const style = document.createElement('style');
      style.textContent = `
-        code, pre { font-family: "Source Code Pro", ui-monospace, monospace !important; }
+        body, p, h1, h2, h3, div { font-family: "${previewFont}", Georgia, serif !important; }
        code, pre, pre * { font-family: "Source Code Pro", "Courier New", monospace !important; }
        pre { background: #f5f5f5; padding: 10px; border-radius: 4px; overflow-x: auto; }
-        code { background: #f0f0f0; padding: 2px 4px; border-radius: 2px; }
+        code { padding: 0; }
        h1 { font-size: 2em; font-weight: bold; margin-top: 0.67em; margin-bottom: 0.67em; }
        h2 { font-size: 1.5em; font-weight: bold; margin-top: 0.83em; margin-bottom: 0.83em; }
        h3 { font-size: 1.17em; font-weight: bold; margin-top: 1em; margin-bottom: 1em; }
        p { margin: 0.5em 0; }
        ul, ol { margin: 0.5em 0; padding-left: 2em; list-style-position: outside; font-family: "${previewFont}", Georgia, serif !important; }
        ul { list-style-type: disc; }
        ol { list-style-type: decimal; }
        li { margin: 0.25em 0; display: list-item; font-family: "${previewFont}", Georgia, serif !important; }
        em { font-style: italic; vertical-align: baseline; }
        strong { font-weight: bold; vertical-align: baseline; line-height: inherit; }
        img { max-width: 100%; height: auto; display: block; margin: 1em 0; }
      `;
      container.appendChild(style);
-      // Create PDF using jsPDF's html() method (like dompdf)
+      // Use jsPDF's html() method with custom font set
      const pdf = new jsPDF({
        orientation: 'portrait',
        unit: 'mm',
        format: 'a4',
      });
      // Use jsPDF's html() method which handles pagination automatically
      await pdf.html(container, {
        callback: async (doc) => {
-          // Save the PDF
+          const firstLine = localContent.split('\n')[0].replace(/^#+\s*/, '').trim();
-          const fileName = `${localTitle || 'note'}.pdf`;
+          const fileName = `${firstLine || 'note'}.pdf`;
          doc.save(fileName);
          // Show success message using Tauri dialog
          setTimeout(async () => {
            try {
              await message(`PDF exported successfully!\n\nFile: ${fileName}\nLocation: Downloads folder`, {
@@ -261,10 +384,10 @@ export function NoteEditor({ note, onUpdateNote, onUnsavedChanges, categories, i
            setIsExportingPDF(false);
          }, 500);
        },
-        margin: [20, 20, 20, 20], // top, right, bottom, left margins in mm
+        margin: [20, 20, 20, 20],
-        autoPaging: 'text', // Enable automatic page breaks
+        autoPaging: 'text',
-        width: 170, // Content width in mm (A4 width 210mm - 40mm margins)
+        width: 170,
-        windowWidth: 650, // Rendering width in pixels (matches content width ratio)
+        windowWidth: 650,
      });
    } catch (error) {
      console.error('PDF export failed:', error);
@@ -281,14 +404,23 @@ export function NoteEditor({ note, onUpdateNote, onUnsavedChanges, categories, i
  };
  const handleFavoriteToggle = () => {
-    setLocalFavorite(!localFavorite);
+    const newFavorite = !localFavorite;
-    if (note) {
+    setLocalFavorite(newFavorite);
    if (note && onToggleFavorite) {
      // Use dedicated favorite toggle callback if provided
      onToggleFavorite(note, newFavorite);
    } else if (note) {
      // Fallback to full update if no callback provided
      const firstLine = localContent.split('\n')[0].replace(/^#+\s*/, '').trim();
      const title = firstLine || 'Untitled';
      onUpdateNote({
        ...note,
-        title: localTitle,
+        title,
        content: localContent,
        category: localCategory,
-        favorite: !localFavorite,
+        favorite: newFavorite,
      });
    }
  };
@@ -528,36 +660,6 @@ export function NoteEditor({ note, onUpdateNote, onUnsavedChanges, categories, i
  return (
    <div className="flex-1 flex flex-col bg-white dark:bg-gray-900">
      {/* Header */}
      <div className="border-b border-gray-200 dark:border-gray-700 px-6 py-4">
        <div className="flex items-start justify-between gap-4">
          <div className="flex-1 min-w-0">
            <input
              type="text"
              value={localTitle}
              onChange={(e) => handleTitleChange(e.target.value)}
              placeholder="Note Title"
              className="w-full text-2xl font-semibold border-none outline-none focus:ring-0 bg-transparent text-gray-900 dark:text-gray-100 placeholder-gray-400"
            />
          </div>
          <button
            onClick={handleFavoriteToggle}
            className="p-1.5 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors flex-shrink-0"
            title={localFavorite ? "Remove from Favorites" : "Add to Favorites"}
          >
            <svg 
              className={`w-5 h-5 ${localFavorite ? 'text-yellow-500 fill-current' : 'text-gray-400 dark:text-gray-500'}`}
              fill={localFavorite ? "currentColor" : "none"}
              stroke="currentColor" 
              viewBox="0 0 24 24"
            >
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
            </svg>
          </button>
        </div>
      </div>
      {/* Toolbar */}
      <div className="border-b border-gray-200 dark:border-gray-700 px-6 py-3 bg-gray-50 dark:bg-gray-800/50">
        <div className="flex items-center justify-between">
@@ -584,42 +686,6 @@ export function NoteEditor({ note, onUpdateNote, onUnsavedChanges, categories, i
              </svg>
            </div>
            {/* Attachment Upload */}
            <input
              ref={fileInputRef}
              type="file"
              onChange={handleAttachmentUpload}
              className="hidden"
              accept="image/*,.pdf,.doc,.docx,.txt,.md"
            />
            <button
              onClick={() => fileInputRef.current?.click()}
              disabled={isUploading || isPreviewMode}
              className={`px-3 py-1.5 rounded-full transition-colors flex items-center gap-1.5 text-sm ${
                isUploading || isPreviewMode
                  ? 'bg-gray-100 dark:bg-gray-700 text-gray-400 dark:text-gray-500 cursor-not-allowed'
                  : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
              }`}
              title={isPreviewMode ? "Switch to Edit mode to upload" : "Upload Image/Attachment"}
            >
              {isUploading ? (
                <>
                  <svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                  </svg>
                  <span>Uploading...</span>
                </>
              ) : (
                <>
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                  </svg>
                  <span>Attach</span>
                </>
              )}
            </button>
            {/* Preview Toggle */}
            <button
              onClick={() => setIsPreviewMode(!isPreviewMode)}
@@ -663,6 +729,21 @@ export function NoteEditor({ note, onUpdateNote, onUnsavedChanges, categories, i
            {/* Action Buttons */}
            <div className="flex items-center gap-1 pl-2 border-l border-gray-200 dark:border-gray-700">
              <button
                onClick={handleFavoriteToggle}
                className="p-1.5 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
                title={localFavorite ? "Remove from Favorites" : "Add to Favorites"}
              >
                <svg 
                  className={`w-5 h-5 ${localFavorite ? 'text-yellow-500 fill-current' : 'text-gray-600 dark:text-gray-400'}`}
                  fill={localFavorite ? "currentColor" : "none"}
                  stroke="currentColor" 
                  viewBox="0 0 24 24"
                >
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
                </svg>
              </button>
              <button
                onClick={handleSave}
                disabled={!hasUnsavedChanges || isSaving}
@@ -756,7 +837,7 @@ export function NoteEditor({ note, onUpdateNote, onUnsavedChanges, categories, i
                </div>
              )}
              <div 
-                className={`prose prose-slate dark:prose-invert p-8 ${isFocusMode ? '' : 'max-w-none'} [&_code]:font-mono [&_pre]:font-mono [&_img]:max-w-full [&_img]:rounded-lg [&_img]:shadow-md`}
+                className={`prose prose-slate dark:prose-invert p-8 ${isFocusMode ? '' : 'max-w-none'} [&_code]:font-mono [&_pre]:font-mono [&_code]:py-0 [&_code]:px-1 [&_code]:align-baseline [&_code]:leading-none [&_img]:max-w-full [&_img]:rounded-lg [&_img]:shadow-md`}
                style={{ fontSize: `${previewFontSize}px`, fontFamily: previewFont }}
                dangerouslySetInnerHTML={{ 
                  __html: marked.parse(processedContent || '', { async: false }) as string 
@@ -772,6 +853,13 @@ export function NoteEditor({ note, onUpdateNote, onUnsavedChanges, categories, i
                onInsertFile={handleInsertFile}
                isUploading={isUploading}
              />
              <input
                ref={fileInputRef}
                type="file"
                onChange={handleAttachmentUpload}
                className="hidden"
                accept="image/*,.pdf,.doc,.docx,.txt,.md"
              />
              <textarea
                ref={textareaRef}
                value={localContent}
--- a/src/components/NotesList.tsx
+++ b/src/components/NotesList.tsx
@@ -1,10 +1,12 @@
 import React from 'react';
 import { Note } from '../types';
 import { SyncStatus } from '../services/syncManager';
 import { categoryColorsSync } from '../services/categoryColorsSync';
 interface NotesListProps {
  notes: Note[];
-  selectedNoteId: number | null;
+  selectedNoteId: number | string | null;
-  onSelectNote: (id: number) => void;
+  onSelectNote: (id: number | string) => void;
  onCreateNote: () => void;
  onDeleteNote: (note: Note) => void;
  onSync: () => void;
@@ -13,6 +15,9 @@ interface NotesListProps {
  showFavoritesOnly: boolean;
  onToggleFavorites: () => void;
  hasUnsavedChanges: boolean;
  syncStatus: SyncStatus;
  pendingSyncCount: number;
  isOnline: boolean;
 }
 export function NotesList({
@@ -27,16 +32,64 @@ export function NotesList({
  showFavoritesOnly,
  onToggleFavorites,
  hasUnsavedChanges,
  syncStatus,
  pendingSyncCount,
  isOnline,
 }: NotesListProps) {
-  const [isSyncing, setIsSyncing] = React.useState(false);
+  const [deleteClickedId, setDeleteClickedId] = React.useState<number | string | null>(null);
-  const [deleteClickedId, setDeleteClickedId] = React.useState<number | null>(null);
+  const [width, setWidth] = React.useState(() => {
    const saved = localStorage.getItem('notesListWidth');
    return saved ? parseInt(saved) : 300;
  });
  const [isResizing, setIsResizing] = React.useState(false);
  const containerRef = React.useRef<HTMLDivElement>(null);
  const isSyncing = syncStatus === 'syncing';
  const [, forceUpdate] = React.useReducer(x => x + 1, 0);
  const handleSync = async () => {
    setIsSyncing(true);
    await onSync();
    setTimeout(() => setIsSyncing(false), 500);
  };
  // Listen for category color changes
  React.useEffect(() => {
    const handleCustomEvent = () => forceUpdate();
    window.addEventListener('categoryColorChanged', handleCustomEvent);
    return () => {
      window.removeEventListener('categoryColorChanged', handleCustomEvent);
    };
  }, []);
  React.useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      if (!isResizing) return;
      const newWidth = e.clientX - (containerRef.current?.getBoundingClientRect().left || 0);
      if (newWidth >= 240 && newWidth <= 600) {
        setWidth(newWidth);
        localStorage.setItem('notesListWidth', newWidth.toString());
      }
    };
    const handleMouseUp = () => {
      setIsResizing(false);
    };
    if (isResizing) {
      document.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('mouseup', handleMouseUp);
      document.body.style.cursor = 'ew-resize';
      document.body.style.userSelect = 'none';
    }
    return () => {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
      document.body.style.cursor = '';
      document.body.style.userSelect = '';
    };
  }, [isResizing]);
  const handleDeleteClick = (note: Note, e: React.MouseEvent) => {
    e.stopPropagation();
@@ -78,11 +131,55 @@ export function NotesList({
    return cleanedPreview;
  };
  const getCategoryColor = (category: string) => {
    // Color palette matching CategoriesSidebar
    const colors = [
      { bg: 'bg-blue-100 dark:bg-blue-900/30', text: 'text-blue-700 dark:text-blue-300' },
      { bg: 'bg-green-100 dark:bg-green-900/30', text: 'text-green-700 dark:text-green-300' },
      { bg: 'bg-purple-100 dark:bg-purple-900/30', text: 'text-purple-700 dark:text-purple-300' },
      { bg: 'bg-pink-100 dark:bg-pink-900/30', text: 'text-pink-700 dark:text-pink-300' },
      { bg: 'bg-yellow-100 dark:bg-yellow-900/30', text: 'text-yellow-700 dark:text-yellow-300' },
      { bg: 'bg-red-100 dark:bg-red-900/30', text: 'text-red-700 dark:text-red-300' },
      { bg: 'bg-orange-100 dark:bg-orange-900/30', text: 'text-orange-700 dark:text-orange-300' },
      { bg: 'bg-teal-100 dark:bg-teal-900/30', text: 'text-teal-700 dark:text-teal-300' },
      { bg: 'bg-indigo-100 dark:bg-indigo-900/30', text: 'text-indigo-700 dark:text-indigo-300' },
      { bg: 'bg-cyan-100 dark:bg-cyan-900/30', text: 'text-cyan-700 dark:text-cyan-300' },
    ];
    // Only return color if explicitly set by user
    const colorIndex = categoryColorsSync.getColor(category);
    if (colorIndex !== undefined) {
      return colors[colorIndex];
    }
    // No color set - return null to indicate no badge should be shown
    return null;
  };
  return (
-    <div className="w-80 bg-gray-50 dark:bg-gray-900 border-r border-gray-200 dark:border-gray-700 flex flex-col">
+    <div 
      ref={containerRef}
      className="bg-gray-50 dark:bg-gray-900 border-r border-gray-200 dark:border-gray-700 flex flex-col relative flex-shrink-0"
      style={{ width: `${width}px`, minWidth: '240px', maxWidth: '600px' }}
    >
      <div className="p-4 border-b border-gray-200 dark:border-gray-700">
        <div className="flex items-center justify-between mb-3">
          <div className="flex items-center gap-2">
            <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">Notes</h2>
            {!isOnline && (
              <span className="px-2 py-0.5 text-xs font-medium bg-orange-100 dark:bg-orange-900 text-orange-700 dark:text-orange-300 rounded-full flex items-center gap-1">
                <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18.364 5.636a9 9 0 010 12.728m0 0l-2.829-2.829m2.829 2.829L21 21M15.536 8.464a5 5 0 010 7.072m0 0l-2.829-2.829m-4.243 2.829a4.978 4.978 0 01-1.414-2.83m-1.414 5.658a9 9 0 01-2.167-9.238m7.824 2.167a1 1 0 111.414 1.414m-1.414-1.414L3 3" />
                </svg>
                Offline
              </span>
            )}
            {pendingSyncCount > 0 && (
              <span className="px-2 py-0.5 text-xs font-medium bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 rounded-full">
                {pendingSyncCount} pending
              </span>
            )}
          </div>
          <div className="flex items-center space-x-1">
            <button
              onClick={handleSync}
@@ -194,8 +291,24 @@ export function NotesList({
                </div>
              </div>
-              <div className="flex items-center text-xs text-gray-500 dark:text-gray-400 mb-2">
+              <div className="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400 mb-2">
                <span>{formatDate(note.modified)}</span>
                {note.category && (() => {
                  const colors = getCategoryColor(note.category);
                  if (colors) {
                    return (
                      <span className={`px-2 py-0.5 ${colors.bg} ${colors.text} rounded-full text-xs font-medium`}>
                        {note.category}
                      </span>
                    );
                  }
                  // Show neutral badge when no color is set
                  return (
                    <span className="px-2 py-0.5 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 rounded-full text-xs font-medium">
                      {note.category}
                    </span>
                  );
                })()}
              </div>
              {getPreview(note.content) && (
@@ -207,6 +320,17 @@ export function NotesList({
          ))
        )}
      </div>
      {/* Resize Handle */}
      <div
        className="absolute top-0 right-0 w-1 h-full cursor-ew-resize hover:bg-blue-500 transition-colors group"
        onMouseDown={(e) => {
          e.preventDefault();
          setIsResizing(true);
        }}
      >
        <div className="absolute inset-y-0 -right-1 w-3" />
      </div>
    </div>
  );
 }
--- a/src/db/localDB.ts
+++ b/src/db/localDB.ts
@@ -0,0 +1,155 @@
 import { Note } from '../types';
 const DB_NAME = 'nextcloud-notes-db';
 const DB_VERSION = 2; // Bumped to clear old cache with URL-encoded categories
 const NOTES_STORE = 'notes';
 const SYNC_QUEUE_STORE = 'syncQueue';
 export interface SyncOperation {
  id: string;
  type: 'create' | 'update' | 'delete';
  noteId: number | string;
  note?: Note;
  timestamp: number;
  retryCount: number;
 }
 class LocalDB {
  private db: IDBDatabase | null = null;
  async init(): Promise<void> {
    return new Promise((resolve, reject) => {
      const request = indexedDB.open(DB_NAME, DB_VERSION);
      request.onerror = () => reject(request.error);
      request.onsuccess = () => {
        this.db = request.result;
        resolve();
      };
      request.onupgradeneeded = (event) => {
        const db = (event.target as IDBOpenDBRequest).result;
        const oldVersion = event.oldVersion;
        if (!db.objectStoreNames.contains(NOTES_STORE)) {
          const notesStore = db.createObjectStore(NOTES_STORE, { keyPath: 'id' });
          notesStore.createIndex('modified', 'modified', { unique: false });
          notesStore.createIndex('category', 'category', { unique: false });
        } else if (oldVersion < 2) {
          // Clear notes store when upgrading to v2 to remove old cached notes
          // with stripped first lines
          const transaction = (event.target as IDBOpenDBRequest).transaction!;
          const notesStore = transaction.objectStore(NOTES_STORE);
          notesStore.clear();
        }
        if (!db.objectStoreNames.contains(SYNC_QUEUE_STORE)) {
          db.createObjectStore(SYNC_QUEUE_STORE, { keyPath: 'id' });
        }
      };
    });
  }
  private getStore(storeName: string, mode: IDBTransactionMode = 'readonly'): IDBObjectStore {
    if (!this.db) throw new Error('Database not initialized');
    const transaction = this.db.transaction(storeName, mode);
    return transaction.objectStore(storeName);
  }
  // Notes operations
  async getAllNotes(): Promise<Note[]> {
    return new Promise((resolve, reject) => {
      const store = this.getStore(NOTES_STORE);
      const request = store.getAll();
      request.onsuccess = () => resolve(request.result);
      request.onerror = () => reject(request.error);
    });
  }
  async getNote(id: number | string): Promise<Note | undefined> {
    return new Promise((resolve, reject) => {
      const store = this.getStore(NOTES_STORE);
      const request = store.get(id);
      request.onsuccess = () => resolve(request.result);
      request.onerror = () => reject(request.error);
    });
  }
  async saveNote(note: Note): Promise<void> {
    return new Promise((resolve, reject) => {
      const store = this.getStore(NOTES_STORE, 'readwrite');
      const request = store.put(note);
      request.onsuccess = () => resolve();
      request.onerror = () => reject(request.error);
    });
  }
  async saveNotes(notes: Note[]): Promise<void> {
    return new Promise((resolve, reject) => {
      const store = this.getStore(NOTES_STORE, 'readwrite');
      const transaction = store.transaction;
      notes.forEach(note => store.put(note));
      transaction.oncomplete = () => resolve();
      transaction.onerror = () => reject(transaction.error);
    });
  }
  async deleteNote(id: number | string): Promise<void> {
    return new Promise((resolve, reject) => {
      const store = this.getStore(NOTES_STORE, 'readwrite');
      const request = store.delete(id);
      request.onsuccess = () => resolve();
      request.onerror = () => reject(request.error);
    });
  }
  async clearNotes(): Promise<void> {
    return new Promise((resolve, reject) => {
      const store = this.getStore(NOTES_STORE, 'readwrite');
      const request = store.clear();
      request.onsuccess = () => resolve();
      request.onerror = () => reject(request.error);
    });
  }
  // Sync queue operations
  async addToSyncQueue(operation: SyncOperation): Promise<void> {
    return new Promise((resolve, reject) => {
      const store = this.getStore(SYNC_QUEUE_STORE, 'readwrite');
      const request = store.put(operation);
      request.onsuccess = () => resolve();
      request.onerror = () => reject(request.error);
    });
  }
  async getSyncQueue(): Promise<SyncOperation[]> {
    return new Promise((resolve, reject) => {
      const store = this.getStore(SYNC_QUEUE_STORE);
      const request = store.getAll();
      request.onsuccess = () => resolve(request.result);
      request.onerror = () => reject(request.error);
    });
  }
  async removeFromSyncQueue(id: string): Promise<void> {
    return new Promise((resolve, reject) => {
      const store = this.getStore(SYNC_QUEUE_STORE, 'readwrite');
      const request = store.delete(id);
      request.onsuccess = () => resolve();
      request.onerror = () => reject(request.error);
    });
  }
  async clearSyncQueue(): Promise<void> {
    return new Promise((resolve, reject) => {
      const store = this.getStore(SYNC_QUEUE_STORE, 'readwrite');
      const request = store.clear();
      request.onsuccess = () => resolve();
      request.onerror = () => reject(request.error);
    });
  }
 }
 export const localDB = new LocalDB();
--- a/src/hooks/useOnlineStatus.ts
+++ b/src/hooks/useOnlineStatus.ts
@@ -0,0 +1,20 @@
 import { useState, useEffect } from 'react';
 export function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(navigator.onLine);
  useEffect(() => {
    const handleOnline = () => setIsOnline(true);
    const handleOffline = () => setIsOnline(false);
    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);
    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);
  return isOnline;
 }
--- a/src/index.css
+++ b/src/index.css
@@ -16,6 +16,19 @@ code {
    monospace;
 }
 /* Override Tailwind prose inline code styling to prevent overlap */
 .prose code {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  vertical-align: baseline !important;
  line-height: 1 !important;
 }
 .prose code::before,
 .prose code::after {
  content: none !important;
 }
 /* TipTap Editor Styles */
 .ProseMirror {
  min-height: 100%;
@@ -113,11 +126,13 @@ code {
 .ProseMirror code {
  background-color: #f3f4f6;
-  padding: 0.125rem 0.25rem;
+  padding: 0.05rem 0.25rem;
  border-radius: 0.25rem;
  font-family: 'Courier New', monospace;
  font-size: 1.1em;
  color: #1f2937;
  vertical-align: baseline;
  line-height: 1;
 }
 .dark .ProseMirror code {
--- a/src/services/categoryColorsSync.ts
+++ b/src/services/categoryColorsSync.ts
@@ -0,0 +1,98 @@
 import { NextcloudAPI } from '../api/nextcloud';
 export class CategoryColorsSync {
  private api: NextcloudAPI | null = null;
  private colors: Record<string, number> = {};
  private syncInProgress: boolean = false;
  private changeCallback: (() => void) | null = null;
  constructor() {
    this.loadFromLocalStorage();
  }
  setAPI(api: NextcloudAPI | null) {
    this.api = api;
    if (api) {
      this.syncFromServer();
    }
  }
  setChangeCallback(callback: () => void) {
    this.changeCallback = callback;
  }
  private loadFromLocalStorage() {
    const saved = localStorage.getItem('categoryColors');
    if (saved) {
      try {
        this.colors = JSON.parse(saved);
      } catch (e) {
        console.error('Failed to parse category colors from localStorage:', e);
        this.colors = {};
      }
    }
  }
  private saveToLocalStorage() {
    localStorage.setItem('categoryColors', JSON.stringify(this.colors));
  }
  private notifyChange() {
    if (this.changeCallback) {
      this.changeCallback();
    }
    window.dispatchEvent(new Event('categoryColorChanged'));
  }
  async syncFromServer(): Promise<void> {
    if (!this.api || this.syncInProgress) return;
    this.syncInProgress = true;
    try {
      const serverColors = await this.api.fetchCategoryColors();
      // Merge: server wins for conflicts
      const hasChanges = JSON.stringify(this.colors) !== JSON.stringify(serverColors);
      if (hasChanges) {
        this.colors = serverColors;
        this.saveToLocalStorage();
        this.notifyChange();
      }
    } catch (error) {
      console.error('Failed to sync category colors from server:', error);
    } finally {
      this.syncInProgress = false;
    }
  }
  async setColor(category: string, colorIndex: number | null): Promise<void> {
    if (colorIndex === null) {
      delete this.colors[category];
    } else {
      this.colors[category] = colorIndex;
    }
    this.saveToLocalStorage();
    this.notifyChange();
    // Sync to server if online
    if (this.api) {
      try {
        await this.api.saveCategoryColors(this.colors);
      } catch (error) {
        console.error('Failed to save category colors to server:', error);
      }
    }
  }
  getColor(category: string): number | undefined {
    return this.colors[category];
  }
  getAllColors(): Record<string, number> {
    return { ...this.colors };
  }
 }
 export const categoryColorsSync = new CategoryColorsSync();
--- a/src/services/syncManager.ts
+++ b/src/services/syncManager.ts
@@ -0,0 +1,375 @@
 import { Note } from '../types';
 import { NextcloudAPI } from '../api/nextcloud';
 import { localDB } from '../db/localDB';
 export type SyncStatus = 'idle' | 'syncing' | 'error' | 'offline';
 export class SyncManager {
  private api: NextcloudAPI | null = null;
  private isOnline: boolean = navigator.onLine;
  private syncInProgress: boolean = false;
  private statusCallback: ((status: SyncStatus, pendingCount: number) => void) | null = null;
  private syncCompleteCallback: (() => void) | null = null;
  constructor() {
    window.addEventListener('online', () => {
      this.isOnline = true;
      this.notifyStatus('idle', 0);
    });
    window.addEventListener('offline', () => {
      this.isOnline = false;
      this.notifyStatus('offline', 0);
    });
  }
  setAPI(api: NextcloudAPI | null) {
    this.api = api;
  }
  setStatusCallback(callback: (status: SyncStatus, pendingCount: number) => void) {
    this.statusCallback = callback;
  }
  setSyncCompleteCallback(callback: () => void) {
    this.syncCompleteCallback = callback;
  }
  private notifyStatus(status: SyncStatus, pendingCount: number) {
    if (this.statusCallback) {
      this.statusCallback(status, pendingCount);
    }
  }
  // Load notes: cache-first, then sync in background
  async loadNotes(): Promise<Note[]> {
    // Try to load from cache first (instant)
    const cachedNotes = await localDB.getAllNotes();
    // If we have cached notes and we're offline, return them
    if (!this.isOnline) {
      this.notifyStatus('offline', 0);
      return cachedNotes;
    }
    // If we have cached notes, return them immediately
    // Then sync in background
    if (cachedNotes.length > 0) {
      this.syncInBackground();
      return cachedNotes;
    }
    // No cache - must fetch from server
    if (!this.api) {
      throw new Error('API not initialized');
    }
    try {
      this.notifyStatus('syncing', 0);
      const notes = await this.fetchAndCacheNotes();
      this.notifyStatus('idle', 0);
      return notes;
    } catch (error) {
      this.notifyStatus('error', 0);
      throw error;
    }
  }
  // Background sync: compare etags and only fetch changed content
  private async syncInBackground(): Promise<void> {
    if (!this.api || this.syncInProgress) return;
    this.syncInProgress = true;
    try {
      this.notifyStatus('syncing', 0);
      // Get metadata for all notes (fast - no content)
      const serverNotes = await this.api.fetchNotesWebDAV();
      const cachedNotes = await localDB.getAllNotes();
      // Build maps for comparison
      const serverMap = new Map(serverNotes.map(n => [n.id, n]));
      const cachedMap = new Map(cachedNotes.map(n => [n.id, n]));
      // Find notes that need content fetched (new or changed etag)
      const notesToFetch: Note[] = [];
      for (const serverNote of serverNotes) {
        const cached = cachedMap.get(serverNote.id);
        if (!cached || cached.etag !== serverNote.etag) {
          notesToFetch.push(serverNote);
        }
      }
      // Fetch content for changed notes
      for (const note of notesToFetch) {
        try {
          const fullNote = await this.api.fetchNoteContentWebDAV(note);
          await localDB.saveNote(fullNote);
        } catch (error) {
          console.error(`Failed to fetch note ${note.id}:`, error);
        }
      }
      // Remove deleted notes from cache
      for (const cachedNote of cachedNotes) {
        if (!serverMap.has(cachedNote.id)) {
          await localDB.deleteNote(cachedNote.id);
        }
      }
      // Sync favorite status from API
      await this.syncFavoriteStatus();
      this.notifyStatus('idle', 0);
      // Notify that sync is complete so UI can reload
      if (this.syncCompleteCallback) {
        this.syncCompleteCallback();
      }
    } catch (error) {
      console.error('Background sync failed:', error);
      this.notifyStatus('error', 0);
    } finally {
      this.syncInProgress = false;
    }
  }
  // Sync favorite status from API to local cache
  private async syncFavoriteStatus(): Promise<void> {
    if (!this.api) return;
    try {
      console.log('Syncing favorite status from API...');
      const apiMetadata = await this.api.fetchNotesMetadata();
      const cachedNotes = await localDB.getAllNotes();
      // Map API notes by modified timestamp + category for reliable matching
      // (titles can differ between API and WebDAV)
      const apiByTimestamp = new Map<string, {id: number, title: string, favorite: boolean}>();
      const apiByTitle = new Map<string, {id: number, title: string, favorite: boolean}>();
      for (const apiNote of apiMetadata) {
        const timestampKey = `${apiNote.modified}:${apiNote.category}`;
        const titleKey = `${apiNote.category}/${apiNote.title}`;
        const noteData = { id: apiNote.id, title: apiNote.title, favorite: apiNote.favorite };
        apiByTimestamp.set(timestampKey, noteData);
        apiByTitle.set(titleKey, noteData);
      }
      // Update favorite status in cache for matching notes
      for (const cachedNote of cachedNotes) {
        // Try timestamp match first (most reliable)
        const timestampKey = `${cachedNote.modified}:${cachedNote.category}`;
        let apiData = apiByTimestamp.get(timestampKey);
        // Fallback to title match if timestamp doesn't work
        if (!apiData) {
          const titleKey = `${cachedNote.category}/${cachedNote.title}`;
          apiData = apiByTitle.get(titleKey);
        }
        if (apiData && cachedNote.favorite !== apiData.favorite) {
          console.log(`Updating favorite status for "${cachedNote.title}": ${cachedNote.favorite} -> ${apiData.favorite}`);
          cachedNote.favorite = apiData.favorite;
          await localDB.saveNote(cachedNote);
        }
      }
      console.log('Favorite status sync complete');
    } catch (error) {
      console.error('Failed to sync favorite status:', error);
      // Don't throw - favorite sync is non-critical
    }
  }
  // Fetch all notes and cache them
  private async fetchAndCacheNotes(): Promise<Note[]> {
    if (!this.api) throw new Error('API not initialized');
    const serverNotes = await this.api.fetchNotesWebDAV();
    const notesWithContent: Note[] = [];
    for (const note of serverNotes) {
      try {
        const fullNote = await this.api.fetchNoteContentWebDAV(note);
        notesWithContent.push(fullNote);
        await localDB.saveNote(fullNote);
      } catch (error) {
        console.error(`Failed to fetch note ${note.id}:`, error);
      }
    }
    return notesWithContent;
  }
  // Fetch content for a specific note on-demand
  async fetchNoteContent(note: Note): Promise<Note> {
    if (!this.api) {
      throw new Error('API not initialized');
    }
    if (!this.isOnline) {
      throw new Error('Cannot fetch note content while offline');
    }
    try {
      const fullNote = await this.api.fetchNoteContentWebDAV(note);
      await localDB.saveNote(fullNote);
      return fullNote;
    } catch (error) {
      throw error;
    }
  }
  // Create note on server and cache
  async createNote(title: string, content: string, category: string): Promise<Note> {
    if (!this.api) {
      throw new Error('API not initialized');
    }
    if (!this.isOnline) {
      this.notifyStatus('offline', 0);
      throw new Error('Cannot create note while offline');
    }
    try {
      this.notifyStatus('syncing', 0);
      const note = await this.api.createNoteWebDAV(title, content, category);
      await localDB.saveNote(note);
      this.notifyStatus('idle', 0);
      // Trigger background sync to fetch any other changes
      this.syncInBackground().catch(err => console.error('Background sync failed:', err));
      return note;
    } catch (error) {
      this.notifyStatus('error', 0);
      throw error;
    }
  }
  // Update favorite status via API
  async updateFavoriteStatus(note: Note, favorite: boolean): Promise<void> {
    if (!this.api) {
      throw new Error('API not initialized');
    }
    if (!this.isOnline) {
      // Update locally, will sync when back online
      note.favorite = favorite;
      await localDB.saveNote(note);
      return;
    }
    try {
      // Find API ID for this note
      const apiId = await this.api.findApiIdForNote(note.title, note.category, note.modified);
      if (apiId) {
        // Update via API
        await this.api.updateFavoriteStatus(apiId, favorite);
        console.log(`Updated favorite status for "${note.title}" (API ID: ${apiId})`);
      } else {
        console.warn(`Could not find API ID for note: "${note.title}"`);
      }
      // Update local cache
      note.favorite = favorite;
      await localDB.saveNote(note);
    } catch (error) {
      console.error('Failed to update favorite status:', error);
      // Still update locally
      note.favorite = favorite;
      await localDB.saveNote(note);
    }
  }
  // Update note on server and cache
  async updateNote(note: Note): Promise<Note> {
    if (!this.api) {
      throw new Error('API not initialized');
    }
    if (!this.isOnline) {
      this.notifyStatus('offline', 0);
      throw new Error('Cannot update note while offline');
    }
    try {
      this.notifyStatus('syncing', 0);
      const updatedNote = await this.api.updateNoteWebDAV(note);
      await localDB.saveNote(updatedNote);
      this.notifyStatus('idle', 0);
      // Trigger background sync to fetch any other changes
      this.syncInBackground().catch(err => console.error('Background sync failed:', err));
      return updatedNote;
    } catch (error) {
      this.notifyStatus('error', 0);
      throw error;
    }
  }
  // Delete note from server and cache
  async deleteNote(note: Note): Promise<void> {
    if (!this.api) {
      throw new Error('API not initialized');
    }
    if (!this.isOnline) {
      this.notifyStatus('offline', 0);
      throw new Error('Cannot delete note while offline');
    }
    try {
      this.notifyStatus('syncing', 0);
      await this.api.deleteNoteWebDAV(note);
      await localDB.deleteNote(note.id);
      this.notifyStatus('idle', 0);
    } catch (error) {
      this.notifyStatus('error', 0);
      throw error;
    }
  }
  // Move note to different category on server and cache
  async moveNote(note: Note, newCategory: string): Promise<Note> {
    if (!this.api) {
      throw new Error('API not initialized');
    }
    if (!this.isOnline) {
      this.notifyStatus('offline', 0);
      throw new Error('Cannot move note while offline');
    }
    try {
      this.notifyStatus('syncing', 0);
      const movedNote = await this.api.moveNoteWebDAV(note, newCategory);
      await localDB.deleteNote(note.id);
      await localDB.saveNote(movedNote);
      this.notifyStatus('idle', 0);
      // Trigger background sync to fetch any other changes
      this.syncInBackground().catch(err => console.error('Background sync failed:', err));
      return movedNote;
    } catch (error) {
      this.notifyStatus('error', 0);
      throw error;
    }
  }
  // Manual sync with server
  async syncWithServer(): Promise<void> {
    if (!this.api || !this.isOnline || this.syncInProgress) return;
    await this.syncInBackground();
  }
  getOnlineStatus(): boolean {
    return this.isOnline;
  }
 }
 export const syncManager = new SyncManager();
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,5 +1,5 @@
 export interface Note {
-  id: number;
+  id: number | string; // number for API, string (filename) for WebDAV
  etag: string;
  readonly: boolean;
  content: string;
@@ -7,6 +7,8 @@ export interface Note {
  category: string;
  favorite: boolean;
  modified: number;
  filename?: string; // WebDAV: actual filename on server
  path?: string; // WebDAV: full path including category
 }
 export interface APIConfig {