sidebar tags style

frontend/src/sidebar/Sidebar.jsx

@@ -208,7 +208,10 @@ const Sidebar = ({
           <h3>Tags</h3>
           <span className="meta">{tags.length}</span>
         </div>
-        <div className="sidebar-tag-cloud" role="list">
+        <div
+          className={`sidebar-tag-cloud${activeTagSet.size ? ' sidebar-tag-cloud--has-active' : ''}`}
+          role="list"
+        >
           {tags.length ? (
             tags.map((tag) => {
               const isActive = activeTagSet.has(tag.id);

frontend/src/styles.css

@@ -993,7 +993,8 @@ button.icon-button.ghost:hover:not([disabled]) {
   cursor: pointer;
   background: var(--surface-soft);
   color: var(--fg);
-  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
+  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease,
+    opacity 0.12s ease;
   box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
 }
 
@@ -1010,7 +1011,11 @@ button.icon-button.ghost:hover:not([disabled]) {
 
 .sidebar-tag-pill.active {
   border-color: var(--accent);
-  box-shadow: 0 0 0 1px var(--accent);
+  box-shadow: 0 0 0 1.5px var(--accent);
+}
+
+.sidebar-tag-cloud--has-active .sidebar-tag-pill:not(.active) {
+  opacity: 0.45;
 }
 
 .sidebar-correspondent-list {