Add file deletion endpoint with multi-tag filtering support and redesigned editor UI with icon-only buttons

frontend/style.css

@@ -177,38 +177,6 @@ a:hover {
   pointer-events: none;
 }
 
-.active-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  margin-top: 8px;
-  min-height: 0;
-}
-
-.active-tag {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 3px 8px;
-  background: var(--tag-bg);
-  color: var(--tag-text);
-  border-radius: 4px;
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 0.75rem;
-  cursor: pointer;
-  transition: opacity 150ms ease;
-}
-.active-tag:hover {
-  opacity: 0.7;
-}
-.active-tag .remove-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 14px;
-  height: 14px;
-}
-
 .header-menu {
   position: relative;
 }
@@ -832,8 +800,44 @@ a:hover {
   font-size: 0.85rem;
   color: var(--text-muted);
   margin-bottom: 16px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+.search-results-summary-text {
+  display: inline;
+}
+.search-results-active-tags {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: center;
+}
+.search-results-active-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px;
+  background: var(--tag-bg);
+  color: var(--tag-text);
+  border-radius: 999px;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.75rem;
+  line-height: 1.2;
+}
+.search-results-active-tag-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  padding: 0;
 }
-
 .search-result-item {
   padding: 14px 16px;
   border: 1px solid var(--border);
@@ -846,7 +850,6 @@ a:hover {
   background: var(--bg-hover);
   border-color: var(--accent);
 }
-
 .search-result-title {
   font-family: 'JetBrains Mono', monospace;
   font-size: 0.92rem;
@@ -854,20 +857,17 @@ a:hover {
   color: var(--text-primary);
   margin-bottom: 4px;
 }
-
 .search-result-vault {
   font-family: 'JetBrains Mono', monospace;
   font-size: 0.72rem;
   color: var(--accent-green);
   margin-bottom: 4px;
 }
-
 .search-result-snippet {
   font-size: 0.85rem;
   color: var(--text-secondary);
   line-height: 1.5;
 }
-
 .search-result-tags {
   margin-top: 6px;
   display: flex;
@@ -918,7 +918,6 @@ a:hover {
 .editor-modal.active {
   display: flex;
 }
-
 .editor-container {
   background: var(--bg-secondary);
   border: 1px solid var(--border);
@@ -931,7 +930,6 @@ a:hover {
   overflow: hidden;
   box-shadow: 0 8px 32px rgba(0,0,0,0.4);
 }
-
 .editor-header {
   display: flex;
   align-items: center;
@@ -940,24 +938,24 @@ a:hover {
   border-bottom: 1px solid var(--border);
   background: var(--bg-primary);
   flex-shrink: 0;
+  position: sticky;
+  top: 0;
+  z-index: 10;
 }
-
 .editor-title {
   font-family: 'JetBrains Mono', monospace;
   font-size: 0.9rem;
   color: var(--text-primary);
   font-weight: 600;
 }
-
 .editor-actions {
   display: flex;
-  gap: 8px;
+  gap: 6px;
 }
-
 .editor-btn {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 0.8rem;
-  padding: 6px 12px;
+  width: 36px;
+  height: 36px;
+  padding: 0;
   border: 1px solid var(--border);
   border-radius: 6px;
   background: transparent;
@@ -966,7 +964,8 @@ a:hover {
   transition: all 150ms ease;
   display: inline-flex;
   align-items: center;
-  gap: 4px;
+  justify-content: center;
+  flex: 0 0 auto;
 }
 .editor-btn:hover {
   color: var(--accent);
@@ -980,7 +979,10 @@ a:hover {
 .editor-btn.primary:hover {
   opacity: 0.9;
 }
-
+.editor-btn.danger:hover {
+  color: #ff7b72;
+  border-color: #ff7b72;
+}
 .editor-body {
   flex: 1;
   min-height: 0;
@@ -988,13 +990,11 @@ a:hover {
   overflow-y: auto;
   overflow-x: hidden;
 }
-
 .cm-editor {
   height: auto;
   min-height: 100%;
   font-size: 0.9rem;
 }
-
 .cm-scroller {
   font-family: 'JetBrains Mono', monospace;
   overflow-y: auto !important;
@@ -1003,7 +1003,6 @@ a:hover {
   min-height: 100%;
   max-width: 100%;
 }
-
 .fallback-editor {
   width: 100%;
   min-height: 100%;
@@ -1028,60 +1027,58 @@ a:hover {
 @media (max-width: 768px) {
   .editor-modal {
     padding: 0;
+    align-items: stretch;
   }
-  
   .editor-container {
     max-width: 100%;
     max-height: 100vh;
     border-radius: 0;
     height: 100vh;
+    overflow: hidden;
   }
-  
   .editor-header {
     padding: 10px 12px;
     position: sticky;
     top: 0;
-    z-index: 10;
+    z-index: 20;
+    background: var(--bg-primary);
   }
-  
   .editor-title {
     font-size: 0.85rem;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
-  
   .editor-actions {
-    gap: 6px;
+    gap: 4px;
   }
-  
   .editor-btn {
-    font-size: 0.75rem;
-    padding: 8px;
+    width: 36px;
+    height: 36px;
     min-width: 36px;
   }
-  
-  .editor-btn-text {
-    display: none;
-  }
-  
   .editor-body {
-    height: calc(100vh - 50px);
+    flex: 1;
+    min-height: 0;
     overflow: auto;
   }
-  
   .cm-editor {
     height: auto;
     min-height: 100%;
   }
-  
   .cm-scroller {
     overflow: auto !important;
     height: auto;
     min-height: 100%;
   }
-  
   .fallback-editor {
-    min-height: calc(100vh - 50px);
+    min-height: 100%;
     height: auto;
   }
+  .search-results-header {
+    align-items: flex-start;
+  }
 }
 
 /* --- No-select during resize --- */