Initial commit: Nextcloud Notes Tauri app with WYSIWYG editor

Features: - WYSIWYG markdown editor with TipTap - Manual save with unsaved changes indicator - Auto-title derivation from first line (with manual override) - Manual sync button with visual feedback - Auto-sync every 5 minutes - Full formatting toolbar (bold, italic, headings, lists, code) - Note creation, editing, deletion - Search and favorites filter - Cross-platform desktop app built with Tauri + React + TypeScript
2026-03-16 23:49:51 +01:00
commit 2ad076c052
47 changed files with 5294 additions and 0 deletions
--- a/src/components/LoginView.tsx
+++ b/src/components/LoginView.tsx
@@ -0,0 +1,117 @@
+import { useState } from 'react';
+import { NextcloudAPI } from '../api/nextcloud';
+
+interface LoginViewProps {
+  onLogin: (serverURL: string, username: string, password: string) => void;
+}
+
+export function LoginView({ onLogin }: LoginViewProps) {
+  const [serverURL, setServerURL] = useState('');
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      console.log('Attempting to connect to:', serverURL);
+      const api = new NextcloudAPI({ serverURL, username, password });
+      const notes = await api.fetchNotes();
+      console.log('Successfully fetched notes:', notes.length);
+      onLogin(serverURL, username, password);
+    } catch (err) {
+      console.error('Login error:', err);
+      const errorMsg = err instanceof Error ? err.message : 'Failed to connect';
+      setError(`Connection failed: ${errorMsg}. Check console for details.`);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4">
+      <div className="bg-white rounded-2xl shadow-xl p-8 w-full max-w-md">
+        <div className="text-center mb-8">
+          <div className="inline-flex items-center justify-center w-16 h-16 bg-blue-500 rounded-full mb-4">
+            <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
+            </svg>
+          </div>
+          <h1 className="text-3xl font-bold text-gray-900">Nextcloud Notes</h1>
+          <p className="text-gray-600 mt-2">Connect to your Nextcloud instance</p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Server URL
+            </label>
+            <input
+              type="url"
+              value={serverURL}
+              onChange={(e) => setServerURL(e.target.value)}
+              placeholder="https://cloud.example.com"
+              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              required
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Username
+            </label>
+            <input
+              type="text"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              placeholder="your.username"
+              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              required
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Password / App Password
+            </label>
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="••••••••"
+              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              required
+            />
+          </div>
+
+          {error && (
+            <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg flex items-start">
+              <svg className="w-5 h-5 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+              </svg>
+              <span className="text-sm">{error}</span>
+            </div>
+          )}
+
+          <button
+            type="submit"
+            disabled={isLoading}
+            className="w-full bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 text-white font-semibold py-3 px-4 rounded-lg transition-colors"
+          >
+            {isLoading ? 'Connecting...' : 'Connect'}
+          </button>
+        </form>
+
+        <p className="text-xs text-gray-500 text-center mt-6">
+          <a href="https://docs.nextcloud.com/server/latest/user_manual/en/session_management.html" target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline">
+            Using an App Password is recommended →
+          </a>
+        </p>
+      </div>
+    </div>
+  );
+}
--- a/src/components/NoteEditor.tsx
+++ b/src/components/NoteEditor.tsx
@@ -0,0 +1,343 @@
+import { useState, useEffect, useRef } from 'react';
+import { useEditor, EditorContent } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import Underline from '@tiptap/extension-underline';
+import Strike from '@tiptap/extension-strike';
+import TurndownService from 'turndown';
+import { marked } from 'marked';
+import { Note } from '../types';
+
+interface NoteEditorProps {
+  note: Note | null;
+  onUpdateNote: (note: Note) => void;
+  fontSize: number;
+}
+
+const turndownService = new TurndownService({
+  headingStyle: 'atx',
+  codeBlockStyle: 'fenced',
+});
+
+export function NoteEditor({ note, onUpdateNote, fontSize }: NoteEditorProps) {
+  const [localTitle, setLocalTitle] = 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 previousNoteIdRef = useRef<number | null>(null);
+
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Underline,
+      Strike,
+    ],
+    content: '',
+    editorProps: {
+      attributes: {
+        class: 'prose prose-slate max-w-none focus:outline-none p-6',
+        style: `font-size: ${fontSize}px`,
+      },
+    },
+    onUpdate: ({ editor }) => {
+      setHasUnsavedChanges(true);
+      
+      if (!titleManuallyEdited) {
+        const text = editor.getText();
+        const firstLine = text.split('\n')[0].trim();
+        if (firstLine) {
+          setLocalTitle(firstLine.substring(0, 50));
+        }
+      }
+    },
+  });
+
+  useEffect(() => {
+    if (previousNoteIdRef.current !== null && previousNoteIdRef.current !== note?.id) {
+      handleSave();
+    }
+    
+    if (note && editor) {
+      setLocalTitle(note.title);
+      setLocalCategory(note.category);
+      setLocalFavorite(note.favorite);
+      setHasUnsavedChanges(false);
+      
+      // Only reset titleManuallyEdited when switching to a different note
+      // Check if the current title matches the first line of content
+      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;
+      
+      // Convert markdown to HTML using marked library
+      const html = marked.parse(note.content || '', { async: false }) as string;
+      editor.commands.setContent(html);
+    }
+  }, [note?.id, editor]);
+
+  const handleSave = () => {
+    if (!note || !hasUnsavedChanges || !editor) return;
+    
+    // Convert HTML to markdown
+    const html = editor.getHTML();
+    const markdown = turndownService.turndown(html);
+    
+    console.log('Saving note content length:', markdown.length);
+    console.log('Last 50 chars:', markdown.slice(-50));
+    setIsSaving(true);
+    setHasUnsavedChanges(false);
+    onUpdateNote({
+      ...note,
+      title: localTitle,
+      content: markdown,
+      category: localCategory,
+      favorite: localFavorite,
+    });
+    setTimeout(() => setIsSaving(false), 500);
+  };
+
+  const handleTitleChange = (value: string) => {
+    setLocalTitle(value);
+    setTitleManuallyEdited(true);
+    setHasUnsavedChanges(true);
+  };
+
+  const handleCategoryChange = (value: string) => {
+    setLocalCategory(value);
+    setHasUnsavedChanges(true);
+  };
+
+  const handleFavoriteToggle = () => {
+    setLocalFavorite(!localFavorite);
+    if (note) {
+      onUpdateNote({
+        ...note,
+        title: localTitle,
+        content: editor ? turndownService.turndown(editor.getHTML()) : note.content,
+        category: localCategory,
+        favorite: !localFavorite,
+      });
+    }
+  };
+
+  if (!note) {
+    return (
+      <div className="flex-1 flex items-center justify-center bg-white text-gray-400">
+        <div className="text-center">
+          <svg className="w-20 h-20 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+          </svg>
+          <p className="text-lg font-medium">No Note Selected</p>
+          <p className="text-sm mt-2">Select a note from the sidebar or create a new one</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!editor) {
+    return null;
+  }
+
+  return (
+    <div className="flex-1 flex flex-col bg-white">
+      <div className="border-b border-gray-200 p-4 flex items-center justify-between">
+        <input
+          type="text"
+          value={localTitle}
+          onChange={(e) => handleTitleChange(e.target.value)}
+          placeholder="Note Title"
+          className="flex-1 text-2xl font-bold border-none outline-none focus:ring-0"
+        />
+        
+        <div className="flex items-center space-x-2 ml-4">
+          {hasUnsavedChanges && (
+            <span className="text-sm text-orange-500">Unsaved changes</span>
+          )}
+          {isSaving && (
+            <span className="text-sm text-gray-500">Saving...</span>
+          )}
+          
+          <button
+            onClick={handleSave}
+            disabled={!hasUnsavedChanges || isSaving}
+            className={`p-2 rounded-lg transition-colors ${
+              hasUnsavedChanges && !isSaving
+                ? 'bg-blue-500 text-white hover:bg-blue-600'
+                : 'bg-gray-200 text-gray-400 cursor-not-allowed'
+            }`}
+            title="Save Note"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+            </svg>
+          </button>
+          
+          <button
+            onClick={handleFavoriteToggle}
+            className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+            title={localFavorite ? "Remove from Favorites" : "Add to Favorites"}
+          >
+            <svg 
+              className={`w-6 h-6 ${localFavorite ? 'text-yellow-500 fill-current' : '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>
+
+          <input
+            type="text"
+            value={localCategory}
+            onChange={(e) => handleCategoryChange(e.target.value)}
+            placeholder="Category"
+            className="w-32 px-3 py-1 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+      </div>
+
+      {/* Formatting Toolbar */}
+      <div className="border-b border-gray-200 px-4 py-2 flex items-center space-x-1 bg-gray-50">
+        <button
+          onClick={() => editor.chain().focus().toggleBold().run()}
+          className={`p-2 rounded transition-colors ${
+            editor.isActive('bold') ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-200'
+          }`}
+          title="Bold"
+        >
+          <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M13.5,15.5H10V12.5H13.5A1.5,1.5 0 0,1 15,14A1.5,1.5 0 0,1 13.5,15.5M10,6.5H13A1.5,1.5 0 0,1 14.5,8A1.5,1.5 0 0,1 13,9.5H10M15.6,10.79C16.57,10.11 17.25,9 17.25,8C17.25,5.74 15.5,4 13.25,4H7V18H14.04C16.14,18 17.75,16.3 17.75,14.21C17.75,12.69 16.89,11.39 15.6,10.79Z" />
+          </svg>
+        </button>
+
+        <button
+          onClick={() => editor.chain().focus().toggleItalic().run()}
+          className={`p-2 rounded transition-colors ${
+            editor.isActive('italic') ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-200'
+          }`}
+          title="Italic"
+        >
+          <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M10,4V7H12.21L8.79,15H6V18H14V15H11.79L15.21,7H18V4H10Z" />
+          </svg>
+        </button>
+
+        <button
+          onClick={() => editor.chain().focus().toggleStrike().run()}
+          className={`p-2 rounded transition-colors ${
+            editor.isActive('strike') ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-200'
+          }`}
+          title="Strikethrough"
+        >
+          <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M3,14H21V12H3M5,4V7H10V10H14V7H19V4M10,19H14V16H10V19Z" />
+          </svg>
+        </button>
+
+        <button
+          onClick={() => editor.chain().focus().toggleUnderline().run()}
+          className={`p-2 rounded transition-colors ${
+            editor.isActive('underline') ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-200'
+          }`}
+          title="Underline"
+        >
+          <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M5,21H19V19H5V21M12,17A6,6 0 0,0 18,11V3H15.5V11A3.5,3.5 0 0,1 12,14.5A3.5,3.5 0 0,1 8.5,11V3H6V11A6,6 0 0,0 12,17Z" />
+          </svg>
+        </button>
+
+        <div className="w-px h-6 bg-gray-300 mx-1"></div>
+
+        <button
+          onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
+          className={`px-2 py-1 rounded transition-colors font-bold text-sm ${
+            editor.isActive('heading', { level: 1 }) ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-200'
+          }`}
+          title="Heading 1"
+        >
+          H1
+        </button>
+
+        <button
+          onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+          className={`px-2 py-1 rounded transition-colors font-bold text-sm ${
+            editor.isActive('heading', { level: 2 }) ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-200'
+          }`}
+          title="Heading 2"
+        >
+          H2
+        </button>
+
+        <button
+          onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
+          className={`px-2 py-1 rounded transition-colors font-bold text-sm ${
+            editor.isActive('heading', { level: 3 }) ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-200'
+          }`}
+          title="Heading 3"
+        >
+          H3
+        </button>
+
+        <div className="w-px h-6 bg-gray-300 mx-1"></div>
+
+        <button
+          onClick={() => editor.chain().focus().toggleBulletList().run()}
+          className={`p-2 rounded transition-colors ${
+            editor.isActive('bulletList') ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-200'
+          }`}
+          title="Bullet List"
+        >
+          <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M7,5H21V7H7V5M7,13V11H21V13H7M4,4.5A1.5,1.5 0 0,1 5.5,6A1.5,1.5 0 0,1 4,7.5A1.5,1.5 0 0,1 2.5,6A1.5,1.5 0 0,1 4,4.5M4,10.5A1.5,1.5 0 0,1 5.5,12A1.5,1.5 0 0,1 4,13.5A1.5,1.5 0 0,1 2.5,12A1.5,1.5 0 0,1 4,10.5M7,19V17H21V19H7M4,16.5A1.5,1.5 0 0,1 5.5,18A1.5,1.5 0 0,1 4,19.5A1.5,1.5 0 0,1 2.5,18A1.5,1.5 0 0,1 4,16.5Z" />
+          </svg>
+        </button>
+
+        <button
+          onClick={() => editor.chain().focus().toggleOrderedList().run()}
+          className={`p-2 rounded transition-colors ${
+            editor.isActive('orderedList') ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-200'
+          }`}
+          title="Numbered List"
+        >
+          <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M7,13V11H21V13H7M7,19V17H21V19H7M7,7V5H21V7H7M3,8V5H2V4H4V8H3M2,17V16H5V20H2V19H4V18.5H3V17.5H4V17H2M4.25,10A0.75,0.75 0 0,1 5,10.75C5,10.95 4.92,11.14 4.79,11.27L3.12,13H5V14H2V13.08L4,11H2V10H4.25Z" />
+          </svg>
+        </button>
+
+        <div className="w-px h-6 bg-gray-300 mx-1"></div>
+
+        <button
+          onClick={() => editor.chain().focus().toggleCode().run()}
+          className={`p-2 rounded transition-colors ${
+            editor.isActive('code') ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-200'
+          }`}
+          title="Inline Code"
+        >
+          <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M8.5,18L3.5,13L8.5,8L9.91,9.41L6.33,13L9.91,16.59L8.5,18M15.5,18L14.09,16.59L17.67,13L14.09,9.41L15.5,8L20.5,13L15.5,18Z" />
+          </svg>
+        </button>
+
+        <button
+          onClick={() => editor.chain().focus().toggleCodeBlock().run()}
+          className={`p-2 rounded transition-colors ${
+            editor.isActive('codeBlock') ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-200'
+          }`}
+          title="Code Block"
+        >
+          <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M15,4V6H18V18H15V20H20V4M4,4V20H9V18H6V6H9V4H4Z" />
+          </svg>
+        </button>
+      </div>
+      
+      <div className="flex-1 overflow-auto">
+        <EditorContent editor={editor} />
+      </div>
+    </div>
+  );
+}
--- a/src/components/NotesList.tsx
+++ b/src/components/NotesList.tsx
@@ -0,0 +1,173 @@
+import React from 'react';
+import { Note } from '../types';
+
+interface NotesListProps {
+  notes: Note[];
+  selectedNoteId: number | null;
+  onSelectNote: (id: number) => void;
+  onCreateNote: () => void;
+  onDeleteNote: (note: Note) => void;
+  onSync: () => void;
+  searchText: string;
+  onSearchChange: (text: string) => void;
+  showFavoritesOnly: boolean;
+  onToggleFavorites: () => void;
+}
+
+export function NotesList({
+  notes,
+  selectedNoteId,
+  onSelectNote,
+  onCreateNote,
+  onDeleteNote,
+  onSync,
+  searchText,
+  onSearchChange,
+  showFavoritesOnly,
+  onToggleFavorites,
+}: NotesListProps) {
+  const [isSyncing, setIsSyncing] = React.useState(false);
+
+  const handleSync = async () => {
+    setIsSyncing(true);
+    await onSync();
+    setTimeout(() => setIsSyncing(false), 500);
+  };
+  const formatDate = (timestamp: number) => {
+    const date = new Date(timestamp * 1000);
+    const now = new Date();
+    const diff = now.getTime() - date.getTime();
+    const minutes = Math.floor(diff / 60000);
+    const hours = Math.floor(diff / 3600000);
+    const days = Math.floor(diff / 86400000);
+
+    if (minutes < 1) return 'just now';
+    if (minutes < 60) return `${minutes}m ago`;
+    if (hours < 24) return `${hours}h ago`;
+    if (days < 7) return `${days}d ago`;
+    return date.toLocaleDateString();
+  };
+
+  const getPreview = (content: string) => {
+    const lines = content.split('\n').filter(l => l.trim());
+    return lines.slice(1, 3).join(' ').substring(0, 100);
+  };
+
+  return (
+    <div className="w-80 bg-gray-50 border-r border-gray-200 flex flex-col">
+      <div className="p-4 border-b border-gray-200">
+        <div className="flex items-center justify-between mb-3">
+          <h2 className="text-lg font-semibold text-gray-900">Notes</h2>
+          <div className="flex items-center space-x-1">
+            <button
+              onClick={handleSync}
+              disabled={isSyncing}
+              className="p-2 hover:bg-gray-200 rounded-lg transition-colors disabled:opacity-50"
+              title="Sync with Server"
+            >
+              <svg 
+                className={`w-5 h-5 ${isSyncing ? 'animate-spin' : ''}`} 
+                fill="none" 
+                stroke="currentColor" 
+                viewBox="0 0 24 24"
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+              </svg>
+            </button>
+            <button
+              onClick={onCreateNote}
+              className="p-2 hover:bg-gray-200 rounded-lg transition-colors"
+              title="New Note"
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        <input
+          type="text"
+          value={searchText}
+          onChange={(e) => onSearchChange(e.target.value)}
+          placeholder="Search notes..."
+          className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+        />
+
+        <div className="flex items-center justify-between mt-3">
+          <button
+            onClick={onToggleFavorites}
+            className="text-xs text-gray-600 hover:text-gray-900 flex items-center"
+          >
+            <svg className="w-4 h-4 mr-1" fill={showFavoritesOnly ? "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>
+            {showFavoritesOnly ? 'All Notes' : 'Favorites'}
+          </button>
+          <span className="text-xs text-gray-500">{notes.length} notes</span>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto">
+        {notes.length === 0 ? (
+          <div className="flex flex-col items-center justify-center h-full text-gray-400 p-8">
+            <svg className="w-16 h-16 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+            </svg>
+            <p className="text-sm">No notes found</p>
+          </div>
+        ) : (
+          notes.map((note) => (
+            <div
+              key={note.id}
+              onClick={() => onSelectNote(note.id)}
+              className={`p-4 border-b border-gray-200 cursor-pointer hover:bg-gray-100 transition-colors ${
+                selectedNoteId === note.id ? 'bg-blue-50 hover:bg-blue-50' : ''
+              }`}
+            >
+              <div className="flex items-start justify-between mb-1">
+                <div className="flex items-center flex-1 min-w-0">
+                  {note.favorite && (
+                    <svg className="w-4 h-4 text-yellow-500 mr-1 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+                    </svg>
+                  )}
+                  <h3 className="font-medium text-gray-900 truncate">
+                    {note.title || 'Untitled'}
+                  </h3>
+                </div>
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onDeleteNote(note);
+                  }}
+                  className="ml-2 p-1 hover:bg-red-100 rounded text-red-600 opacity-0 group-hover:opacity-100 transition-opacity"
+                  title="Delete"
+                >
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                  </svg>
+                </button>
+              </div>
+
+              <div className="flex items-center text-xs text-gray-500 mb-2">
+                {note.category && (
+                  <span className="bg-gray-200 px-2 py-0.5 rounded-full mr-2">
+                    {note.category}
+                  </span>
+                )}
+                <span>{formatDate(note.modified)}</span>
+              </div>
+
+              {getPreview(note.content) && (
+                <p className="text-sm text-gray-600 line-clamp-2">
+                  {getPreview(note.content)}
+                </p>
+              )}
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}