04/26 Folder tag

app/static/css/app.css

@@ -2123,3 +2123,88 @@ html.sidebar-open {
   color: #dc2626;
   border: 1px solid #fecaca;
 }
+
+/* ── Collapsible vault folder groups ───────────────────────────────────────── */
+
+.vault-group-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  user-select: none;
+  transition: color 0.12s;
+}
+
+.vault-group-header:hover { color: var(--color-primary); }
+
+.group-name { flex: 1; }
+
+.group-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+}
+
+.group-count {
+  background: #e5e7eb;
+  color: #374151;
+  border-radius: 999px;
+  padding: 1px 7px;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.group-chevron {
+  font-size: 10px;
+  color: var(--color-text-muted);
+  width: 14px;
+  text-align: center;
+  transition: transform 0.15s;
+}
+
+.vault-group-header.collapsed .group-chevron { color: var(--color-primary); }
+
+/* ── Vault item tags ────────────────────────────────────────────────────────── */
+
+.item-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: 3px;
+}
+
+.item-tag {
+  display: inline-block;
+  background: #ede9fe;
+  color: #6d28d9;
+  font-size: 10px;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: 999px;
+  letter-spacing: 0.2px;
+}
+
+.tag-preview {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: 6px;
+  min-height: 20px;
+}
+
+/* ── Sidebar tags ────────────────────────────────────────────────────────────── */
+
+.sidebar-tag-list {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 4px;
+}
+
+.sidebar-tag-empty {
+  font-size: 12px;
+  color: var(--color-text-muted);
+  padding: 4px 16px 8px;
+}
+
+.sidebar-tag-item .sidebar-icon { font-size: 14px; }