### src\index.html

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Notes</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Titlebar -->
  <div data-tauri-drag-region class="titlebar">
    <div class="titlebar-button" id="titlebar-minimize">
      <img src="https://api.iconify.design/mdi:window-minimize.svg" alt="minimize" />
    </div>
    <div class="titlebar-button" id="titlebar-maximize">
      <img src="https://api.iconify.design/mdi:window-maximize.svg" alt="maximize" />
    </div>
    <div class="titlebar-button" id="titlebar-close">
      <img src="https://api.iconify.design/mdi:close.svg" alt="close" />
    </div>
  </div>

  <!-- App Content -->
  <div id="app">
    <!-- Notes Sidebar -->
    <div id="notes-sidebar">
      <ul id="notes-list"></ul>
    </div>
    <!-- Note Editor -->
    <div id="note-editor">
      <textarea id="note-content" placeholder="Select or create a note to begin..."></textarea>
    </div>
  </div>

  <!-- Scripts -->
  <script src="main.js"></script>
  <script>
    // Existing titlebar script
    const { getCurrentWindow } = window.__TAURI__.window;
    const appWindow = getCurrentWindow();

    document.getElementById('titlebar-minimize')?.addEventListener('click', () => appWindow.minimize());
    document.getElementById('titlebar-maximize')?.addEventListener('click', () => appWindow.toggleMaximize());
    document.getElementById('titlebar-close')?.addEventListener('click', () => appWindow.close());

    // App Initialization
    (async () => {
      const fileManager = new FileManager('');
      const vaultManager = new VaultManager(fileManager);
      await vaultManager.initialize();

      let needVaultSelection = false;

      if (vaultManager.isInitialized()) {
        // Check if the vault path actually exists
        const pathExists = await fileManager.fs.exists(vaultManager.getPath());
        if (!pathExists) {
          console.log('Vault path does not exist. Prompting user to select a new vault.');
          needVaultSelection = true;
        }
      } else {
        // Vault is not initialized
        needVaultSelection = true;
      }

      if (needVaultSelection) {
        // First-time launch or vault path does not exist, prompt the user to select a vault directory
        const vaultSelected = await vaultManager.selectVault();
        if (!vaultSelected) {
          alert('A vault directory is required to use this app.');
          return;
        }
      }

      // Proceed to initialize the app
      await initializeApp(fileManager);
    })();

    // Generate UID function
    function generateUID() {
      return Date.now().toString();
    }

    // Main app functionality
    async function initializeApp(fileManager) {
      const notesListElement = document.getElementById('notes-list');
      const noteContentElement = document.getElementById('note-content');
      let currentNoteFilename = null;
      let isNewNote = true;

      // Load and display the list of notes
      await loadNotes(fileManager, notesListElement);

      // Handle automatic saving of the note
      noteContentElement.addEventListener('input', async () => {
        try {
          if (!currentNoteFilename || isNewNote) {
            // Create a new note if none is open or it's a new note
            const uid = generateUID();
            currentNoteFilename = uid + '.txt';
            isNewNote = false;
            await fileManager.createFile(currentNoteFilename, noteContentElement.value);
            await loadNotes(fileManager, notesListElement);
          } else {
            await fileManager.updateFile(currentNoteFilename, noteContentElement.value);
          }
        } catch (error) {
          console.error('Error saving note:', error);
          // Optionally, display error message
        }
      });

      // Handle keyboard shortcuts
      document.addEventListener('keydown', async (event) => {
        if (event.ctrlKey && !event.shiftKey && !event.altKey) {
          switch (event.key.toLowerCase()) {
            case 'n':
              event.preventDefault();
              createNewNote();
              break;
            case 'b':
              event.preventDefault();
              toggleSidebar();
              break;
            default:
              break;
          }
        }
        // Handle Ctrl + Backspace for deleting the current note
        if (event.ctrlKey && !event.shiftKey && !event.altKey && event.key === 'Backspace') {
          event.preventDefault();
          await deleteCurrentNote();
        }
      });

      // Function to create a new note
      function createNewNote() {
        currentNoteFilename = null;
        isNewNote = true;
        noteContentElement.value = '';
        noteContentElement.focus();
      }

      // Function to delete the current note
      async function deleteCurrentNote() {
        try {
          if (currentNoteFilename) {
            if (confirm('Are you sure you want to delete this note?')) {
              await fileManager.deleteFile(currentNoteFilename);
              currentNoteFilename = null;
              noteContentElement.value = '';
              isNewNote = true;
              await loadNotes(fileManager, notesListElement);
              alert('Note deleted.');
            }
          } else {
            alert('No note is currently open.');
          }
        } catch (error) {
          console.error('Error deleting note:', error);
          alert('An error occurred while deleting the note.');
        }
      }

      // Function to toggle the sidebar visibility
      function toggleSidebar() {
        const sidebar = document.getElementById('notes-sidebar');
        sidebar.classList.toggle('hidden');
      }

      // Function to load notes and populate the list
      async function loadNotes(fileManager, notesListElement) {
        try {
          notesListElement.innerHTML = '';
          const files = await fileManager.listFiles();
          // Filter out non-txt files if necessary
          const noteFiles = files.filter(file => file.name.endsWith('.txt'));
          for (const file of noteFiles) {
            const listItem = document.createElement('li');
            listItem.textContent = file.name.replace('.txt', '');
            listItem.title = file.name; // Show full filename on hover
            listItem.addEventListener('click', () => openNote(file.name));
            notesListElement.appendChild(listItem);
          }
        } catch (error) {
          console.error('Error loading notes:', error);
          alert('An error occurred while loading notes.');
        }
      }

      // Function to open a note
      async function openNote(filename) {
        try {
          currentNoteFilename = filename;
          const content = await fileManager.readFile(filename);
          noteContentElement.value = content;
          noteContentElement.focus();
          isNewNote = false;
        } catch (error) {
          console.error('Error opening note:', error);
          alert('An error occurred while opening the note.');
        }
      }
    }
  </script>
</body>
</html>
```

### src\main.js

```javascript
class FileManager {
  
    constructor(basePath) {
      const { dialog, fs, path } = window.__TAURI__;
      this.fs = fs;
      this.path = path;
      this.dialog = dialog;
      this.basePath = basePath;
    }

    async selectDirectory() {
      const selected = await this.dialog.open({ directory: true });
      if (selected) {
        this.basePath = selected;
        return selected;
      }
      return null;
    }

    async createFile(filename, content = '') {
      const filePath = await this.path.join(this.basePath, filename);
      await this.fs.writeTextFile(filePath, content);
      return filePath;
    }

    async readFile(filename) {
      const filePath = await this.path.join(this.basePath, filename);
      return await this.fs.readTextFile(filePath);
    }

    async updateFile(filename, content) {
      const filePath = await this.path.join(this.basePath, filename);
      await this.fs.writeTextFile(filePath, content);
      return filePath;
    }

    async renameFile(oldFilename, newFilename) {
      const oldPath = await this.path.join(this.basePath, oldFilename);
      const newPath = await this.path.join(this.basePath, newFilename);
      await this.fs.rename(oldPath, newPath);
      return newPath;
    }

    async deleteFile(filename) {
      const filePath = await this.path.join(this.basePath, filename);
      await this.fs.remove(filePath);
    }

    async listFiles() {
      const entries = await this.fs.readDir(this.basePath);
      return entries.filter(entry => !entry.children);
    }
  }

  class VaultManager {

    constructor(fileManager) {
      this.fileManager = fileManager;
      this.vaultPath = '';
      this.onVaultChange = null;
    }

    async initialize() {
      const savedPath = await localStorage.getItem('vaultPath');
      if (savedPath) {
        this.vaultPath = savedPath;
        this.fileManager.basePath = savedPath;
        return true;
      }
      return false;
    }

    async selectVault() {
      const selected = await this.fileManager.selectDirectory();
      if (selected) {
        this.vaultPath = selected;
        this.fileManager.basePath = selected;
        await localStorage.setItem('vaultPath', selected);
        if (this.onVaultChange) {
          await this.onVaultChange();
        }
        return true;
      }
      return false;
    }

    async changeVault() {
      const selected = await this.fileManager.selectDirectory();
      if (selected) {
        this.vaultPath = selected;
        this.fileManager.basePath = selected;
        await localStorage.setItem('vaultPath', selected);
        if (this.onVaultChange) {
          await this.onVaultChange();
        }
        return true;
      }
      return false;
    }

    getPath() {
      return this.vaultPath;
    }

    isInitialized() {
      return !!this.vaultPath;
    }
  }

```

### src\styles.css

```css
    /* Existing styles for the titlebar */
    .titlebar {
      -webkit-app-region: drag;
      height: 30px;
      width: 100%;
      background: #1e1e1e;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    .titlebar-button {
      -webkit-app-region: no-drag;
      width: 46px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .titlebar-button img {
      width: 16px;
      height: 16px;
      filter: invert(100%);
    }

    /* New styles for the app */
    #app {
      display: flex;
      height: calc(100vh - 30px); /* Adjust for titlebar height */
    }
    #notes-sidebar {
      width: 200px;
      min-width: 200px;
      border-right: 1px solid #ccc;
      padding: 10px;
      box-sizing: border-box;
      overflow-y: auto;
      transition: all 0.3s ease;
    }
    #notes-sidebar.hidden {
      width: 0;
      min-width: 0;
      padding: 0;
      border: none;
      overflow: hidden;
    }
    #note-editor {
      flex-grow: 1;
      padding: 10px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
    }
    #notes-list {
      list-style: none;
      padding: 0;
      margin-top: 10px;
    }
    #notes-list li {
      cursor: pointer;
      padding: 5px;
      border-bottom: 1px solid #eee;
      word-break: break-all;
    }
    #notes-list li:hover {
      background-color: #f0f0f0;
    }
    #note-content {
      width: 100%;
      flex-grow: 1;
      box-sizing: border-box;
      resize: none;
    }
    /* Remove margins and paddings from body and html to prevent scroll bars */
    body, html {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
```

The UI it's going to be simple.

Sidebar, list of files. Can be shown or hide.
The rest of the available space it's going to be the "desk".
When a note it's created, appears a white card, where I can type.
The notes can be drag and placed anywhere on the "desk", also resizable.

Important: main.js it's not editable, it's our core API.

Output the files.