Improve notes search bar.

templates/notes_list.html

@@ -120,34 +120,38 @@
             <input type="hidden" name="visibility" id="visibility" value="{{ visibility_filter or '' }}">
             
             <div class="filter-row">
-                <div class="filter-group search-group">
+                <div class="search-container">
-                    <input type="text" name="search" id="search" placeholder="Search notes by title or content..." 
+                    <div class="search-bar">
-                           value="{{ request.args.get('search', '') }}" class="search-input">
-                    <button type="submit" class="btn btn-sm btn-primary">Search</button>
-                </div>
-                
                         {% if folder_filter or tag_filter or visibility_filter %}
-                <div class="active-filters">
+                        <div class="active-filters-inline">
-                    <span class="filter-label">Active filters:</span>
                             {% if folder_filter %}
-                    <span class="filter-badge" onclick="clearFilter('folder')">
+                            <span class="filter-chip" onclick="clearFilter('folder')">
                                 📁 {{ folder_filter }} <span class="remove">×</span>
                             </span>
                             {% endif %}
                             {% if tag_filter %}
-                    <span class="filter-badge" onclick="clearFilter('tag')">
+                            <span class="filter-chip" onclick="clearFilter('tag')">
                                 🏷️ {{ tag_filter }} <span class="remove">×</span>
                             </span>
                             {% endif %}
                             {% if visibility_filter %}
-                    <span class="filter-badge" onclick="clearFilter('visibility')">
+                            <span class="filter-chip" onclick="clearFilter('visibility')">
                                 {% if visibility_filter == 'private' %}🔒{% elif visibility_filter == 'team' %}👥{% else %}🏢{% endif %}
                                 {{ visibility_filter|title }} <span class="remove">×</span>
                             </span>
                             {% endif %}
-                    <button type="button" class="btn btn-xs btn-link" onclick="clearAllFilters()">Clear all</button>
                         </div>
                         {% endif %}
+                        <input type="text" name="search" id="search" 
+                               placeholder="{% if folder_filter or tag_filter or visibility_filter %}Add search terms...{% else %}Search notes by title or content...{% endif %}" 
+                               value="{{ request.args.get('search', '') }}" class="search-input">
+                        <button type="submit" class="btn-search" title="Search">
+                            <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                                <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
+                            </svg>
+                        </button>
+                    </div>
+                </div>
             </div>
         </form>
     </div>
@@ -627,58 +631,87 @@
     flex-wrap: wrap;
 }
 
-.search-group {
+.search-container {
     flex: 1;
+    min-width: 400px;
+}
+
+.search-bar {
+    position: relative;
     display: flex;
-    gap: 0.5rem;
+    align-items: center;
-    min-width: 300px;
+    background: white;
-}
-
-.search-input {
-    flex: 1;
-    padding: 0.5rem 1rem;
     border: 2px solid #e9ecef;
-    border-radius: 6px;
+    border-radius: 8px;
-    font-size: 0.95rem;
+    padding: 0.25rem;
+    transition: border-color 0.2s;
 }
 
-.search-input:focus {
+.search-bar:focus-within {
-    outline: none;
     border-color: var(--primary-color);
 }
 
-.active-filters {
+.active-filters-inline {
     display: flex;
-    align-items: center;
     gap: 0.5rem;
-    flex-wrap: wrap;
+    padding-left: 0.5rem;
+    flex-shrink: 0;
 }
 
-.filter-label {
+.filter-chip {
-    font-size: 0.85rem;
-    color: #666;
-}
-
-.filter-badge {
     background: #e3f2fd;
     color: #333;
-    padding: 0.25rem 0.75rem;
+    padding: 0.2rem 0.6rem;
-    border-radius: 20px;
+    border-radius: 16px;
-    font-size: 0.85rem;
+    font-size: 0.8rem;
     cursor: pointer;
     transition: background 0.2s;
     display: inline-flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: 0.4rem;
+    white-space: nowrap;
 }
 
-.filter-badge:hover {
+.filter-chip:hover {
     background: #bbdefb;
 }
 
-.filter-badge .remove {
+.filter-chip .remove {
     font-weight: bold;
     color: #666;
+    font-size: 0.9rem;
+}
+
+.search-input {
+    flex: 1;
+    padding: 0.4rem 0.75rem;
+    border: none;
+    background: transparent;
+    font-size: 0.95rem;
+    outline: none;
+}
+
+.btn-search {
+    padding: 0.4rem;
+    background: transparent;
+    color: #666;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+    flex-shrink: 0;
+}
+
+.btn-search:hover {
+    background: #e9ecef;
+    color: var(--primary-color, #007bff);
+}
+
+.btn-search svg {
+    display: block;
 }
 
 .btn-xs {
@@ -1016,13 +1049,18 @@
         flex-direction: column;
     }
     
-    .filter-group {
+    .search-container {
         min-width: 100%;
     }
     
-    .search-group {
+    .search-bar {
-        flex-direction: column;
+        flex-wrap: wrap;
-        align-items: stretch;
+        padding: 0.5rem;
+    }
+    
+    .active-filters-inline {
+        width: 100%;
+        padding: 0 0 0.5rem 0;
     }
     
     .notes-grid {
@@ -1037,6 +1075,10 @@
     .notes-table {
         font-size: 0.85rem;
     }
+    
+    .folder-sidebar {
+        width: 200px;
+    }
 }
 
 /* Modal styles */