From f256aef4077c113d1ac349ddee5e74f54e7b3161 Mon Sep 17 00:00:00 2001
From: Gamosoft <gamosoft@users.noreply.github.com>
Date: Wed, 26 Nov 2025 14:38:47 +0100
Subject: [PATCH] contextual new item

---
 frontend/app.js     | 27 ++++++++++---
 frontend/index.html | 99 +++++++++++++++++++++++----------------------
 2 files changed, 72 insertions(+), 54 deletions(-)

diff --git a/frontend/app.js b/frontend/app.js
index 9d7fc7e..811f718 100644
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -100,6 +100,7 @@ function noteApp() {
         // Dropdown state
         showNewDropdown: false,
         dropdownTargetFolder: '', // Folder context for "New" dropdown (empty = root)
+        dropdownPosition: { top: 0, left: 0 }, // Position for contextual dropdown
         
         // Template state
         showTemplateModal: false,
@@ -982,7 +983,7 @@ function noteApp() {
                         </div>
                         <div class="hover-buttons flex gap-1 transition-opacity absolute right-2 top-1/2 transform -translate-y-1/2" style="opacity: 0; pointer-events: none; background: linear-gradient(to right, transparent, var(--bg-hover) 20%, var(--bg-hover)); padding-left: 20px;" @click.stop>
                             <button 
-                                @click="dropdownTargetFolder = '${folder.path.replace(/'/g, "\\'")}'; showNewDropdown = !showNewDropdown"
+                                @click="dropdownTargetFolder = '${folder.path.replace(/'/g, "\\'")}'; toggleNewDropdown($event)"
                                 class="px-1.5 py-0.5 text-xs rounded hover:brightness-110"
                                 style="background-color: var(--bg-tertiary); color: var(--text-secondary);"
                                 title="Add item here"
@@ -1965,10 +1966,26 @@ function noteApp() {
         // DROPDOWN MENU SYSTEM
         // =====================================================
         
-        toggleNewDropdown() {
-            this.showNewDropdown = !this.showNewDropdown;
-            if (this.showNewDropdown) {
-                this.dropdownTargetFolder = ''; // Set to root when opening main dropdown
+        toggleNewDropdown(event) {
+            this.showNewDropdown = true; // Always open (or keep open)
+            
+            if (event && event.target) {
+                const rect = event.target.getBoundingClientRect();
+                // Position dropdown next to the clicked element
+                let top = rect.bottom + 4; // 4px spacing
+                let left = rect.left;
+                
+                // Keep dropdown on screen
+                const dropdownWidth = 200;
+                const dropdownHeight = 150;
+                if (left + dropdownWidth > window.innerWidth) {
+                    left = rect.right - dropdownWidth;
+                }
+                if (top + dropdownHeight > window.innerHeight) {
+                    top = rect.top - dropdownHeight - 4;
+                }
+                
+                this.dropdownPosition = { top, left };
             }
         },
         
diff --git a/frontend/index.html b/frontend/index.html
index 54114cb..9d89623 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -903,9 +903,9 @@
             </div>
             
             <!-- New Item Dropdown -->
-            <div class="p-3 border-b relative" style="border-color: var(--border-primary);">
+            <div class="p-3 border-b" style="border-color: var(--border-primary);">
                 <button 
-                    @click="toggleNewDropdown()"
+                    @click="dropdownTargetFolder = ''; toggleNewDropdown($event)"
                     class="w-full px-4 py-2 text-sm font-medium text-white rounded-lg focus:outline-none focus:ring-2 flex items-center justify-center gap-2"
                     style="background-color: var(--accent-primary);"
                     onmouseover="this.style.backgroundColor='var(--accent-hover)'"
@@ -916,53 +916,6 @@
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                     </svg>
                 </button>
-                
-                <!-- Dropdown Menu -->
-                <div 
-                    x-show="showNewDropdown"
-                    @click.outside="closeDropdown()"
-                    x-transition:enter="transition ease-out duration-100"
-                    x-transition:enter-start="transform opacity-0 scale-95"
-                    x-transition:enter-end="transform opacity-100 scale-100"
-                    x-transition:leave="transition ease-in duration-75"
-                    x-transition:leave-start="transform opacity-100 scale-100"
-                    x-transition:leave-end="transform opacity-0 scale-95"
-                    class="absolute left-3 right-3 mt-2 rounded-lg shadow-lg z-50"
-                    style="background-color: var(--bg-secondary); border: 1px solid var(--border-primary);"
-                >
-                    <div class="py-1">
-                <button 
-                            @click="createNote()"
-                            class="w-full px-4 py-2.5 text-sm text-left flex items-center gap-3 transition-colors"
-                            style="color: var(--text-primary);"
-                            onmouseover="this.style.backgroundColor='var(--bg-hover)'"
-                            onmouseout="this.style.backgroundColor='transparent'"
-                        >
-                            <span class="text-lg">📝</span>
-                            <span>New Note</span>
-                        </button>
-                        <button 
-                            @click="createFolder()"
-                            class="w-full px-4 py-2.5 text-sm text-left flex items-center gap-3 transition-colors"
-                            style="color: var(--text-primary);"
-                            onmouseover="this.style.backgroundColor='var(--bg-hover)'"
-                            onmouseout="this.style.backgroundColor='transparent'"
-                        >
-                            <span class="text-lg">📁</span>
-                            <span>New Folder</span>
-                        </button>
-                        <button 
-                            @click.stop="showTemplateModal = true; showNewDropdown = false; mobileSidebarOpen = false"
-                            class="w-full px-4 py-2.5 text-sm text-left flex items-center gap-3 transition-colors"
-                            style="color: var(--text-primary);"
-                            onmouseover="this.style.backgroundColor='var(--bg-hover)'"
-                            onmouseout="this.style.backgroundColor='transparent'"
-                        >
-                            <span class="text-lg">📄</span>
-                            <span>New from Template</span>
-                        </button>
-                    </div>
-                </div>
             </div>
             
             <!-- Notes List -->
@@ -1650,6 +1603,54 @@
         </div>
     </div>
     
+    <!-- Contextual New Item Dropdown -->
+    <div 
+        x-show="showNewDropdown"
+        @click.outside="closeDropdown()"
+        x-transition:enter="transition ease-out duration-100"
+        x-transition:enter-start="transform opacity-0 scale-95"
+        x-transition:enter-end="transform opacity-100 scale-100"
+        x-transition:leave="transition ease-in duration-75"
+        x-transition:leave-start="transform opacity-100 scale-100"
+        x-transition:leave-end="transform opacity-0 scale-95"
+        class="rounded-lg shadow-lg"
+        :style="`position: fixed; top: ${dropdownPosition.top}px; left: ${dropdownPosition.left}px; z-index: 1000; background-color: var(--bg-secondary); border: 1px solid var(--border-primary); min-width: 200px;`"
+        x-cloak
+    >
+        <div class="py-1">
+            <button 
+                @click="createNote()"
+                class="w-full px-4 py-2.5 text-sm text-left flex items-center gap-3 transition-colors"
+                style="color: var(--text-primary);"
+                onmouseover="this.style.backgroundColor='var(--bg-hover)'"
+                onmouseout="this.style.backgroundColor='transparent'"
+            >
+                <span class="text-lg">📝</span>
+                <span>New Note</span>
+            </button>
+            <button 
+                @click="createFolder()"
+                class="w-full px-4 py-2.5 text-sm text-left flex items-center gap-3 transition-colors"
+                style="color: var(--text-primary);"
+                onmouseover="this.style.backgroundColor='var(--bg-hover)'"
+                onmouseout="this.style.backgroundColor='transparent'"
+            >
+                <span class="text-lg">📁</span>
+                <span>New Folder</span>
+            </button>
+            <button 
+                @click.stop="showTemplateModal = true; showNewDropdown = false; mobileSidebarOpen = false"
+                class="w-full px-4 py-2.5 text-sm text-left flex items-center gap-3 transition-colors"
+                style="color: var(--text-primary);"
+                onmouseover="this.style.backgroundColor='var(--bg-hover)'"
+                onmouseout="this.style.backgroundColor='transparent'"
+            >
+                <span class="text-lg">📄</span>
+                <span>New from Template</span>
+            </button>
+        </div>
+    </div>
+    
     <!-- Template Selection Modal -->
     <div x-show="showTemplateModal" 
          @click.self="showTemplateModal = false; selectedTemplate = ''; newTemplateNoteName = ''"