<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Notes</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    :root {
      --sidebar-width: 260px;
      --primary-color: #2196F3;
      --bg-color: #ffffff;
      --text-color: #2c3e50;
      --border-color: #eaeaea;
      --hover-color: #f5f5f5;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      display: flex;
      height: 100vh;
      color: var(--text-color);
      background: var(--bg-color);
    }
    
    .sidebar {
      width: var(--sidebar-width);
      border-right: 1px solid var(--border-color);
      display: flex;
      flex-direction: column;
      height: 100%;
      background: var(--bg-color);
    }

    .content {
      flex: 1;
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .toolbar {
      padding: 10px;
      border-bottom: 1px solid var(--border-color);
      display: flex;
      gap: 8px;
      align-items: center;
      justify-content: space-between;
    }

    .toolbar-group {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .search-box {
      flex: 1;
      padding: 6px 12px;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      font-size: 14px;
      outline: none;
    }

    .search-box:focus {
      border-color: var(--primary-color);
    }

    .notes-list {
      flex: 1;
      overflow-y: auto;
      padding: 8px;
    }

    .note-item {
      padding: 8px 10px;
      cursor: pointer;
      border-radius: 4px;
      margin-bottom: 2px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
    }

    .note-item:hover {
      background: var(--hover-color);
    }

    .note-item.active {
      background: var(--primary-color);
      color: white;
    }

    .note-actions {
      opacity: 0;
      display: flex;
      gap: 4px;
    }

    .note-item:hover .note-actions {
      opacity: 1;
    }

    .note-title {
      padding: 10px 20px;
      font-size: 16px;
      border: none;
      border-bottom: 1px solid var(--border-color);
      outline: none;
      width: 100%;
    }

    #editor {
      flex: 1;
      width: 100%;
      padding: 20px;
      border: none;
      resize: none;
      font-size: 15px;
      line-height: 1.6;
      outline: none;
    }

    .icon-button {
      padding: 4px 8px;
      background: transparent;
      border: none;
      cursor: pointer;
      color: inherit;
      border-radius: 4px;
      font-size: 13px;
      transition: background 0.2s ease;
    }

    .icon-button:hover {
      background: rgba(0,0,0,0.1);
    }

    .tooltip {
      position: relative;
    }

    .tooltip:hover::after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      padding: 4px 8px;
      background: rgba(0,0,0,0.8);
      color: white;
      border-radius: 4px;
      font-size: 12px;
      white-space: nowrap;
      pointer-events: none;
      margin-bottom: 5px;
    }

    .vault-selection {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.5);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .vault-dialog {
      background: white;
      padding: 20px;
      border-radius: 8px;
      text-align: center;
    }

    .hidden {
      display: none;
    }

    .empty-state {
      text-align: center;
      padding: 20px;
      color: #666;
      font-size: 14px;
    }

    @media (max-width: 768px) {
      .sidebar {
        width: 100%;
        position: fixed;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
      }

      .sidebar.show {
        transform: translateX(0);
      }
    }
  </style>
</head>
<body>
  <div id="vault-selection" class="vault-selection">
    <div class="vault-dialog">
      <h2>Select Your Notes Folder</h2>
      <button class="icon-button" id="select-vault">Choose Folder</button>
    </div>
  </div>

  <div class="sidebar">
    <div class="toolbar">
      <div class="toolbar-group">
        <input type="text" class="search-box" id="search-notes" placeholder="Search notes...">
        <button class="icon-button tooltip" id="new-note" data-tooltip="New note (Ctrl+N)">New</button>
      </div>
      <div class="toolbar-group">
        <button class="icon-button tooltip" id="change-vault" data-tooltip="Change vault folder">📁</button>
      </div>
    </div>
    <div class="notes-list" id="notes-list">
      <div class="empty-state">No notes yet</div>
    </div>
  </div>

  <div class="content">
    <input type="text" class="note-title" id="note-title" placeholder="Note title">
    <textarea id="editor" placeholder="Start writing..."></textarea>
  </div>

  <script>
    (function() {
      const { dialog, fs, path } = window.__TAURI__;
      
      let vaultPath = null;
      let currentNote = null;
      let saveTimeout = null;
      let notes = [];

      const editor = document.getElementById('editor');
      const titleInput = document.getElementById('note-title');
      const notesList = document.getElementById('notes-list');
      const newNoteBtn = document.getElementById('new-note');
      const selectVaultBtn = document.getElementById('select-vault');
      const vaultSelection = document.getElementById('vault-selection');
      const searchInput = document.getElementById('search-notes');
      const changeVaultBtn = document.getElementById('change-vault');

      // Load vault path from localStorage on startup
      document.addEventListener('DOMContentLoaded', async () => {
        vaultPath = await localStorage.getItem('vaultPath');
        console.log(vaultPath);
        
        if (vaultPath) {
          vaultSelection.classList.add('hidden');
          await loadNotes();
        }
      });

      // Select vault folder
      selectVaultBtn.addEventListener('click', async () => {
        const selected = await dialog.open({ directory: true });
        if (selected) {
          vaultPath = selected;
          console.log(await path.normalize(vaultPath));
          await localStorage.setItem('vaultPath', vaultPath);
          vaultSelection.classList.add('hidden');
          await loadNotes();
        }
      });

      // Change vault folder
      changeVaultBtn.addEventListener('click', async () => {
        const selected = await dialog.open({ directory: true });
        if (selected) {
          if (currentNote) {
            await saveNote();
          }
          vaultPath = selected; console.log(vaultPath);
          
          localStorage.setItem('vaultPath', vaultPath);
          currentNote = null;
          editor.value = '';
          titleInput.value = '';
          await loadNotes();
        }
      });

      // Create new note
      newNoteBtn.addEventListener('click', async () => {
        const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
        const noteName = `Untitled Note.txt`;
        const notePath = await path.join(vaultPath, noteName);
        
        await fs.writeTextFile(notePath, '');
        await loadNotes();
        openNote(notePath);
      });

      // Auto-save on typing
      editor.addEventListener('input', () => {
        if (currentNote) {
          clearTimeout(saveTimeout);
          saveTimeout = setTimeout(async () => {
            await saveNote();
          }, 300);
        }
      });

      // Handle title changes
      titleInput.addEventListener('input', async () => {
        if (currentNote) {
          clearTimeout(saveTimeout);
          saveTimeout = setTimeout(async () => {
            await renameNote();
          }, 300);
        }
      });

      async function renameNote() {
        if (currentNote) {
          const newTitle = titleInput.value.trim() || 'Untitled Note';
          const newPath = await path.join(vaultPath, `${newTitle}.txt`);
          
          if (newPath !== currentNote) {
            try {
              await fs.rename(currentNote, newPath);
              currentNote = newPath;
              await loadNotes();
            } catch (error) {
              console.error('Error renaming note:', error);
            }
          }
        }
      }

      async function saveNote() {
        if (currentNote && editor.value !== undefined) {
          try {
            await fs.writeTextFile(currentNote, editor.value);
          } catch (error) {
            console.error('Error saving note:', error);
          }
        }
      }

      async function deleteNote(notePath) {
        if (confirm('Are you sure you want to delete this note?')) {
          try {
            await fs.remove(notePath);
            if (currentNote === notePath) {
              currentNote = null;
              editor.value = '';
              titleInput.value = '';
            }
            await loadNotes();
          } catch (error) {
            console.error('Error deleting note:', error);
          }
        }
      }

      async function loadNotes() {
        notesList.innerHTML = '';
        console.log(vaultPath);
        const entries = await fs.readDir(vaultPath); console.log(vaultPath);
          
          notes = entries.filter(entry => !entry.children && entry.name.endsWith('.txt'));
          
          if (notes.length === 0) {
            notesList.innerHTML = `
              <div class="empty-state">
                No notes yet in:<br>
                <small style="color: #999; word-break: break-all;">${vaultPath}</small>
              </div>
            `;
            return;
          }

          notes.sort((a, b) => {
            return b.name.localeCompare(a.name);
          }).forEach(async entry => {
            console.log(entry);
            const entrypath = await path.join(vaultPath, entry.name);
            const noteElement = document.createElement('div');
            noteElement.className = 'note-item';
            
            const noteName = document.createElement('span');
            noteName.className = 'note-name';
            noteName.textContent = entry.name.replace('.txt', '');
            
            const actions = document.createElement('div');
            actions.className = 'note-actions';
            
            const deleteBtn = document.createElement('button');
            deleteBtn.className = 'icon-button';
            deleteBtn.textContent = 'Delete';
            deleteBtn.onclick = (e) => {
              e.stopPropagation();
              deleteNote(entrypath);
            };
            
            actions.appendChild(deleteBtn);
            noteElement.appendChild(noteName);
            noteElement.appendChild(actions);
            
            noteElement.addEventListener('click', () => openNote(entrypath));
            notesList.appendChild(noteElement);
          });
      }

      async function openNote(notePath) {
        try {
          console.log(await path.resolve(notePath));
          
          const content = await fs.readTextFile(notePath);
          editor.value = content;
          currentNote = notePath;
          
          const fileName = await path.basename(notePath);
          titleInput.value = fileName.replace('.txt', '');

          document.querySelectorAll('.note-item').forEach(item => {
            item.classList.remove('active');
            if (item.querySelector('.note-name').textContent === titleInput.value) {
              item.classList.add('active');
            }
          });
        } catch (error) {
          console.error('Error opening note:', error);
        }
      }

      // Keyboard shortcuts
      document.addEventListener('keydown', (e) => {
        if ((e.ctrlKey || e.metaKey) && e.key === 'n') {
          e.preventDefault();
          newNoteBtn.click();
        }
      });
    })();
  </script>
</body>
</html>


```

Improve the code structure, avoid IIFE, but don't modify the tauri APIs since they are from v2, and they work perfect as they are set up, also remove the try and catch, at debugging state they are not needed.