Eye on the Tags header hides all tags, also tags added later

src/components/RefTree.vue

@@ -46,7 +46,15 @@ function toggleFolder(n: TreeNode) {
         <path d="M1.5 4a1 1 0 0 1 1-1h3.5l1.5 1.5h6a1 1 0 0 1 1 1V12a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1z" />
       </svg>
       <span class="name" :title="n.ref?.name ?? n.path">{{ n.label }}</span>
-      <EyeButton :shut="allHidden(n)" @click.stop="emit('toggle', refsUnder(n).map((r) => r.name))" />
+      <EyeButton
+        v-if="kind === 'tag' && filters.hideTags"
+        class="locked"
+        :shut="true"
+        disabled
+        title="all tags are hidden: use the eye next to Tags"
+        @click.stop
+      />
+      <EyeButton v-else :shut="allHidden(n)" @click.stop="emit('toggle', refsUnder(n).map((r) => r.name))" />
     </div>
     <RefTree
       v-if="n.children.length && !closed.has(key(n))"
@@ -80,4 +88,5 @@ function toggleFolder(n: TreeNode) {
 .arrow.open { transform: rotate(90deg); }
 .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .item:hover :deep(.eye) { opacity: 1; }
+.item :deep(.eye.locked) { opacity: 0.35; cursor: default; }
 </style>

src/components/Sidebar.vue

@@ -3,6 +3,7 @@ import { computed, reactive, ref } from "vue";
 import { refKind, shortName } from "../lib/filter";
 import { buildTree, type TreeNode } from "../lib/tree";
 import type { FilterState, Ref, RefKind } from "../lib/types";
+import EyeButton from "./EyeButton.vue";
 import RefTree from "./RefTree.vue";
 
 const props = defineProps<{
@@ -98,7 +99,15 @@ function onPatternKey(e: KeyboardEvent) {
     </section>
 
     <section v-for="g in groups" v-show="byKind[g.kind].length" :key="g.kind" class="group">
-      <h3>{{ g.title }} <span class="count">{{ byKind[g.kind].length }}</span></h3>
+      <h3>
+        {{ g.title }} <span class="count">{{ byKind[g.kind].length }}</span>
+        <EyeButton
+          v-if="g.kind === 'tag'"
+          :shut="!!filters.hideTags"
+          :title="filters.hideTags ? 'show all tags' : 'hide all tags, also tags added later'"
+          @click="filters.hideTags = !filters.hideTags"
+        />
+      </h3>
       <RefTree
         :nodes="trees[g.kind]"
         :kind="g.kind"
@@ -122,6 +131,9 @@ function onPatternKey(e: KeyboardEvent) {
   padding: 10px 0 20px;
 }
 h3 {
+  display: flex;
+  align-items: center;
+  gap: 4px;
   margin: 12px 14px 6px;
   font-size: 11px;
   text-transform: uppercase;
@@ -129,6 +141,8 @@ h3 {
   color: var(--text-dim);
 }
 .count { font-weight: normal; opacity: 0.7; }
+h3 :deep(.eye) { margin-left: auto; margin-right: -6px; }
+h3:hover :deep(.eye) { opacity: 1; }
 .rules { padding: 0 14px; }
 .rules h3 { margin-left: 0; margin-top: 2px; }
 .rules input { width: 100%; }