refactor(feed): let the caller decide where the mode's name fits

The xl breakpoint was a fact about the FEED's toolbar, hard-coded into
the switcher that E4's managers are meant to reuse — their rows are far
emptier and would have hidden the label for no reason. It's a prop now,
defaulting to icon-only.

The two views spans collapse into one builder, which also fixes a
regression I'd just added: splitting them put the exact-count tooltip on
the number alone, so hovering the word gave nothing.

frontend/src/components/ViewSwitcher.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import { Check, ChevronDown, type LucideIcon } from "lucide-react";
+import clsx from "clsx";
 import { useDismiss } from "../lib/useDismiss";
 
 export interface ViewOption<T extends string> {
@@ -20,11 +21,17 @@ export default function ViewSwitcher<T extends string>({
   options,
   onChange,
   label,
+  labelClassName = "hidden",
 }: {
   value: T;
   options: readonly ViewOption<T>[];
   onChange: (v: T) => void;
   label: string;
+  /** Where the current mode's NAME is visible beside the icon — a Tailwind display class, e.g.
+   * `"hidden xl:inline"`. The caller sets it because only it knows how crowded its own toolbar is:
+   * the feed's is packed (show chips, content chips, source, count, sort) and can't spare the room
+   * until xl, while an emptier one could show it always. Defaults to icon-only. */
+  labelClassName?: string;
 }) {
   const [open, setOpen] = useState(false);
   // Which item holds the roving tabindex; seeded to the active one when the menu opens.
@@ -103,9 +110,7 @@ export default function ViewSwitcher<T extends string>({
         className="shrink-0 inline-flex items-center gap-1 pl-2 pr-1 py-1.5 rounded-lg border border-border bg-card text-fg hover:border-accent hover:text-accent active:translate-y-px transition"
       >
         <CurrentIcon className="w-4 h-4 shrink-0" />
-        {/* Name the current mode where the toolbar has room; below xl it's a busy row (show chips,
-            content chips, source, count, sort) and the icon has to carry it alone. */}
-        <span className="hidden xl:inline text-sm whitespace-nowrap">{current.label}</span>
+        <span className={clsx("text-sm whitespace-nowrap", labelClassName)}>{current.label}</span>
         <ChevronDown className={`w-3 h-3 shrink-0 transition-transform ${open ? "rotate-180" : ""}`} />
       </button>
       {open && (