feat(feed): move the Mine/Library scope toggle beside the header search box

The scope toggle used to sit at the top of the filter rail, which is buried when the rail is collapsed/unpinned. Relocate it to the header, just right of the feed search box — mirroring Plex's scope toggle placement — so the primary 'what am I browsing' control is always visible. New FeedScopeToggle adapter (SegmentedToggle over filters.scope, same as the Plex one over its scope); rendered in Header on the feed page between the search box and the sync chip. Removed the toggle from the Sidebar rail's now-unused `top` slot and dropped the dead `top` prop from FilterRail. Same filters.scope field, so behaviour is unchanged. Verified live: the toggle sits beside the feed search and switches scope; the rail no longer carries it.
2026-08-22 03:29:15 +02:00
parent af08a7850b
commit 8f08073564
4 changed files with 47 additions and 32 deletions
@@ -0,0 +1,39 @@
+import { useTranslation } from "react-i18next";
+import { Library, User } from "lucide-react";
+import SegmentedToggle from "./SegmentedToggle";
+import { useFeedFilters, useFeedFiltersActions } from "./FeedFiltersProvider";
+
+// The feed's Mine/Library scope, relocated from the filter sidebar to sit just right of the header
+// search box — mirroring PlexScopeToggle's placement, so the primary "what am I browsing" control is
+// always in reach instead of buried in the (possibly collapsed) filter rail. Same `filters.scope`
+// field, so behaviour is unchanged. The `pointer-events-auto`/`shrink-0` wrapper matches the other
+// header pills: the header band is `pointer-events-none`, and the pill must not collapse in the flex row.
+export default function FeedScopeToggle() {
+  const { t } = useTranslation();
+  const filters = useFeedFilters();
+  const { setFilters } = useFeedFiltersActions();
+  return (
+    <div className="pointer-events-auto shrink-0">
+      <SegmentedToggle
+        size="md"
+        ariaLabel={t("header.scope.label")}
+        options={[
+          {
+            value: "my",
+            label: t("header.scope.my"),
+            icon: <User className="w-3.5 h-3.5" />,
+            title: t("header.scope.myTip"),
+          },
+          {
+            value: "all",
+            label: t("header.scope.all"),
+            icon: <Library className="w-3.5 h-3.5" />,
+            title: t("header.scope.allTip"),
+          },
+        ]}
+        value={filters.scope}
+        onChange={(scope) => setFilters({ ...filters, scope })}
+      />
+    </div>
+  );
+}