Add attachment upload and InsertToolbar for quick link/file insertion

- Add uploadAttachment method to NextcloudAPI (WebDAV PUT to .attachments directory)
- Add InsertToolbar component that appears on cursor placement in editor
- InsertToolbar provides quick access to insert links (with modal) and files
- Add Attach button to main toolbar as alternative upload method
- Insert markdown references at cursor position after upload

src/api/nextcloud.ts

@@ -101,4 +101,55 @@ export class NextcloudAPI {
   getServerURL(): string {
     return this.serverURL;
   }
+
+  async uploadAttachment(noteId: number, 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
+    
+    let webdavPath = `/remote.php/dav/files/${this.username}/Notes`;
+    
+    if (noteCategory) {
+      webdavPath += `/${noteCategory}`;
+    }
+    
+    const attachmentDir = `.attachments.${noteId}`;
+    const fileName = file.name.replace(/[^a-zA-Z0-9._-]/g, '_'); // Sanitize filename
+    const fullPath = `${webdavPath}/${attachmentDir}/${fileName}`;
+    
+    const url = `${this.serverURL}${fullPath}`;
+    console.log('Uploading attachment via WebDAV:', url);
+    
+    // First, try to create the attachments directory (MKCOL)
+    // This may fail if it already exists, which is fine
+    try {
+      await tauriFetch(`${this.serverURL}${webdavPath}/${attachmentDir}`, {
+        method: 'MKCOL',
+        headers: {
+          'Authorization': this.authHeader,
+        },
+      });
+    } catch (e) {
+      // Directory might already exist, continue
+    }
+    
+    // Read file as ArrayBuffer
+    const arrayBuffer = await file.arrayBuffer();
+    
+    // Upload the file via PUT
+    const response = await tauriFetch(url, {
+      method: 'PUT',
+      headers: {
+        'Authorization': this.authHeader,
+        'Content-Type': file.type || 'application/octet-stream',
+      },
+      body: arrayBuffer,
+    });
+
+    if (!response.ok && response.status !== 201 && response.status !== 204) {
+      throw new Error(`Failed to upload attachment: ${response.status}`);
+    }
+
+    // Return the relative path for markdown
+    return `${attachmentDir}/${fileName}`;
+  }
 }

src/components/InsertToolbar.tsx

@@ -0,0 +1,244 @@
+import { useEffect, useState, useRef, RefObject } from 'react';
+
+interface InsertToolbarProps {
+  textareaRef: RefObject<HTMLTextAreaElement | null>;
+  onInsertLink: (text: string, url: string) => void;
+  onInsertFile: () => void;
+  isUploading?: boolean;
+}
+
+interface LinkModalState {
+  isOpen: boolean;
+  text: string;
+  url: string;
+}
+
+export function InsertToolbar({ textareaRef, onInsertLink, onInsertFile, isUploading }: InsertToolbarProps) {
+  const [position, setPosition] = useState<{ top: number; left: number } | null>(null);
+  const [isVisible, setIsVisible] = useState(false);
+  const [linkModal, setLinkModal] = useState<LinkModalState>({ isOpen: false, text: '', url: '' });
+  const toolbarRef = useRef<HTMLDivElement>(null);
+  const modalRef = useRef<HTMLDivElement>(null);
+  const urlInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+
+    const updatePosition = () => {
+      const textarea = textareaRef.current;
+      if (!textarea || linkModal.isOpen) return;
+
+      const start = textarea.selectionStart;
+      const end = textarea.selectionEnd;
+      
+      // Only show when cursor is placed (no selection)
+      if (start !== end) {
+        setIsVisible(false);
+        return;
+      }
+
+      const textareaRect = textarea.getBoundingClientRect();
+      const computedStyle = window.getComputedStyle(textarea);
+      const lineHeight = parseFloat(computedStyle.lineHeight) || 24;
+      const paddingTop = parseFloat(computedStyle.paddingTop) || 0;
+      const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;
+      const fontSize = parseFloat(computedStyle.fontSize) || 16;
+      
+      const textBeforeCursor = textarea.value.substring(0, start);
+      const lines = textBeforeCursor.split('\n');
+      const currentLineIndex = lines.length - 1;
+      const currentLineText = lines[currentLineIndex];
+      
+      const charWidth = fontSize * 0.6;
+      const scrollTop = textarea.scrollTop;
+      
+      // Position to the right of cursor
+      const top = textareaRect.top + paddingTop + (currentLineIndex * lineHeight) - scrollTop + lineHeight / 2;
+      const left = textareaRect.left + paddingLeft + (currentLineText.length * charWidth) + 20;
+
+      // Keep toolbar within viewport
+      const toolbarWidth = 100;
+      const adjustedLeft = Math.min(left, window.innerWidth - toolbarWidth - 20);
+      let adjustedTop = top - 16; // Center vertically with cursor line
+      
+      if (adjustedTop < 10) {
+        adjustedTop = 10;
+      }
+
+      setPosition({ top: adjustedTop, left: adjustedLeft });
+      setIsVisible(true);
+    };
+
+    const handleClick = () => {
+      setTimeout(updatePosition, 10);
+    };
+
+    const handleKeyUp = (e: KeyboardEvent) => {
+      // Update on arrow keys or other navigation
+      if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(e.key)) {
+        updatePosition();
+      }
+    };
+
+    const handleInput = () => {
+      // Hide briefly during typing, show after a pause
+      setIsVisible(false);
+    };
+
+    const handleBlur = () => {
+      // Don't hide if clicking on toolbar or modal
+      setTimeout(() => {
+        const activeElement = document.activeElement;
+        if (
+          activeElement !== textarea && 
+          !toolbarRef.current?.contains(activeElement) &&
+          !modalRef.current?.contains(activeElement)
+        ) {
+          setIsVisible(false);
+        }
+      }, 150);
+    };
+
+    textarea.addEventListener('click', handleClick);
+    textarea.addEventListener('keyup', handleKeyUp);
+    textarea.addEventListener('input', handleInput);
+    textarea.addEventListener('blur', handleBlur);
+
+    return () => {
+      textarea.removeEventListener('click', handleClick);
+      textarea.removeEventListener('keyup', handleKeyUp);
+      textarea.removeEventListener('input', handleInput);
+      textarea.removeEventListener('blur', handleBlur);
+    };
+  }, [textareaRef, linkModal.isOpen]);
+
+  const handleLinkClick = () => {
+    setLinkModal({ isOpen: true, text: '', url: '' });
+    setTimeout(() => urlInputRef.current?.focus(), 50);
+  };
+
+  const handleLinkSubmit = () => {
+    if (linkModal.url) {
+      onInsertLink(linkModal.text || linkModal.url, linkModal.url);
+      setLinkModal({ isOpen: false, text: '', url: '' });
+      setIsVisible(false);
+      textareaRef.current?.focus();
+    }
+  };
+
+  const handleLinkCancel = () => {
+    setLinkModal({ isOpen: false, text: '', url: '' });
+    textareaRef.current?.focus();
+  };
+
+  const handleFileClick = () => {
+    onInsertFile();
+    setIsVisible(false);
+  };
+
+  if (!isVisible || !position) return null;
+
+  // Link Modal
+  if (linkModal.isOpen) {
+    return (
+      <div
+        ref={modalRef}
+        className="fixed z-50 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 p-4 w-72"
+        style={{ top: `${position.top}px`, left: `${position.left}px` }}
+      >
+        <div className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Insert Link</div>
+        
+        <div className="space-y-3">
+          <div>
+            <label className="block text-xs text-gray-500 dark:text-gray-400 mb-1">URL</label>
+            <input
+              ref={urlInputRef}
+              type="url"
+              value={linkModal.url}
+              onChange={(e) => setLinkModal({ ...linkModal, url: e.target.value })}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') handleLinkSubmit();
+                if (e.key === 'Escape') handleLinkCancel();
+              }}
+              placeholder="https://example.com"
+              className="w-full px-3 py-1.5 text-sm rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            />
+          </div>
+          
+          <div>
+            <label className="block text-xs text-gray-500 dark:text-gray-400 mb-1">Text (optional)</label>
+            <input
+              type="text"
+              value={linkModal.text}
+              onChange={(e) => setLinkModal({ ...linkModal, text: e.target.value })}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') handleLinkSubmit();
+                if (e.key === 'Escape') handleLinkCancel();
+              }}
+              placeholder="Link text"
+              className="w-full px-3 py-1.5 text-sm rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            />
+          </div>
+        </div>
+        
+        <div className="flex justify-end gap-2 mt-4">
+          <button
+            onClick={handleLinkCancel}
+            className="px-3 py-1.5 text-sm rounded-md text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleLinkSubmit}
+            disabled={!linkModal.url}
+            className="px-3 py-1.5 text-sm rounded-md bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            Insert
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  // Insert Toolbar
+  return (
+    <div
+      ref={toolbarRef}
+      className="fixed z-50 bg-gray-800 dark:bg-gray-700 rounded-lg shadow-xl px-1 py-1 flex items-center gap-0.5"
+      style={{ top: `${position.top}px`, left: `${position.left}px` }}
+    >
+      <button
+        onClick={handleLinkClick}
+        className="p-2 rounded hover:bg-gray-700 dark:hover:bg-gray-600 text-white transition-colors"
+        title="Insert Link"
+      >
+        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
+        </svg>
+      </button>
+      
+      <button
+        onClick={handleFileClick}
+        disabled={isUploading}
+        className={`p-2 rounded transition-colors ${
+          isUploading 
+            ? 'text-gray-500 cursor-not-allowed' 
+            : 'hover:bg-gray-700 dark:hover:bg-gray-600 text-white'
+        }`}
+        title="Insert Image/File"
+      >
+        {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>
+        ) : (
+          <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>
+        )}
+      </button>
+    </div>
+  );
+}

src/components/NoteEditor.tsx

@@ -5,6 +5,7 @@ import { message } from '@tauri-apps/plugin-dialog';
 import { Note } from '../types';
 import { NextcloudAPI } from '../api/nextcloud';
 import { FloatingToolbar } from './FloatingToolbar';
+import { InsertToolbar } from './InsertToolbar';
 
 interface NoteEditorProps {
   note: Note | null;
@@ -35,8 +36,10 @@ export function NoteEditor({ note, onUpdateNote, onUnsavedChanges, categories, i
   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 textareaRef = useRef<HTMLTextAreaElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     onUnsavedChanges?.(hasUnsavedChanges);
@@ -295,6 +298,80 @@ export function NoteEditor({ note, onUpdateNote, onUnsavedChanges, categories, i
     setHasUnsavedChanges(true);
   };
 
+  const handleAttachmentUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file || !note || !api) return;
+
+    setIsUploading(true);
+    try {
+      const relativePath = await api.uploadAttachment(note.id, file, note.category);
+      
+      // Determine if it's an image or other file
+      const isImage = file.type.startsWith('image/');
+      const markdownLink = isImage 
+        ? `![${file.name}](${relativePath})`
+        : `[${file.name}](${relativePath})`;
+      
+      // Insert at cursor position or end of content
+      const textarea = textareaRef.current;
+      if (textarea) {
+        const cursorPos = textarea.selectionStart;
+        const newContent = localContent.slice(0, cursorPos) + markdownLink + localContent.slice(cursorPos);
+        setLocalContent(newContent);
+        setHasUnsavedChanges(true);
+        
+        // Move cursor after inserted text
+        setTimeout(() => {
+          textarea.focus();
+          const newPos = cursorPos + markdownLink.length;
+          textarea.setSelectionRange(newPos, newPos);
+        }, 0);
+      } else {
+        // Append to end
+        setLocalContent(localContent + '\n' + markdownLink);
+        setHasUnsavedChanges(true);
+      }
+      
+      await message(`Attachment uploaded successfully!`, {
+        title: 'Upload Complete',
+        kind: 'info',
+      });
+    } catch (error) {
+      console.error('Upload failed:', error);
+      await message(`Failed to upload attachment: ${error}`, {
+        title: 'Upload Failed',
+        kind: 'error',
+      });
+    } finally {
+      setIsUploading(false);
+      // Reset file input
+      if (fileInputRef.current) {
+        fileInputRef.current.value = '';
+      }
+    }
+  };
+
+  const handleInsertLink = (text: string, url: string) => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    
+    const cursorPos = textarea.selectionStart;
+    const markdownLink = `[${text}](${url})`;
+    const newContent = localContent.slice(0, cursorPos) + markdownLink + localContent.slice(cursorPos);
+    setLocalContent(newContent);
+    setHasUnsavedChanges(true);
+    
+    setTimeout(() => {
+      textarea.focus();
+      const newPos = cursorPos + markdownLink.length;
+      textarea.setSelectionRange(newPos, newPos);
+    }, 0);
+  };
+
+  const handleInsertFile = () => {
+    fileInputRef.current?.click();
+  };
+
   const handleFormat = (format: 'bold' | 'italic' | 'strikethrough' | 'code' | 'codeblock' | 'quote' | 'ul' | 'ol' | 'link' | 'h1' | 'h2' | 'h3') => {
     if (!textareaRef.current) return;
     
@@ -507,6 +584,42 @@ 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)}
@@ -653,6 +766,12 @@ export function NoteEditor({ note, onUpdateNote, onUnsavedChanges, categories, i
           ) : (
             <div className="min-h-full p-8">
               <FloatingToolbar onFormat={handleFormat} textareaRef={textareaRef} />
+              <InsertToolbar 
+                textareaRef={textareaRef} 
+                onInsertLink={handleInsertLink} 
+                onInsertFile={handleInsertFile}
+                isUploading={isUploading}
+              />
               <textarea
                 ref={textareaRef}
                 value={localContent}