tag colors

frontend/src/sidebar/Sidebar.tsx

@@ -380,6 +380,13 @@ const Sidebar: React.FC<SidebarProps> = ({
     [activeTagIds],
   );
   const untaggedActive = untaggedFilterId ? activeTagSet.has(untaggedFilterId) : false;
+  const untaggedButtonClassName = ['badge', 'tag-chip', 'tag-chip--untagged', untaggedActive ? 'active' : null]
+    .filter(Boolean)
+    .join(' ');
+  const getTagChipClassName = (isActive: boolean) =>
+    ['badge', 'tag-chip', isActive ? 'active' : null]
+      .filter(Boolean)
+      .join(' ');
   const handleManageTags = useCallback(() => {
     onManageTags?.();
   }, [onManageTags]);
@@ -933,9 +940,7 @@ const Sidebar: React.FC<SidebarProps> = ({
               <button
                 type="button"
                 role="listitem"
-                className={`sidebar-tag-pill sidebar-tag-pill--untagged${
-                  untaggedActive ? ' active' : ''
-                }`}
+                className={untaggedButtonClassName}
                 onClick={() => handleToggleTag(untaggedFilterId)}
                 aria-pressed={untaggedActive}
                 draggable={false}
@@ -946,7 +951,7 @@ const Sidebar: React.FC<SidebarProps> = ({
             {tags.map((tag) => {
               const isActive = activeTagSet.has(tag.id);
               const style = getTagColorStyle(tag.color);
-              const className = `sidebar-tag-pill${isActive ? ' active' : ''}`;
+              const className = getTagChipClassName(isActive);
               return (
                 <button
                   key={tag.id}