Merge pull request #701 from pharuq411/feat/685-signal-search-filter-discoverability

fix(signals): repair broken filter/feed files and debounce search fil…

Author: Mathews-25

components/SignalFeedFilters.tsx

@@ -1,9 +1,7 @@
 "use client";
 
-import { useMemo, useRef } from "react";
-import { Bookmark, SlidersHorizontal, X } from "lucide-react";
-import { useRef, useState } from "react";
-import { Bookmark, Save, SlidersHorizontal, Trash2, X } from "lucide-react";
+import { useMemo, useRef, useState } from "react";
+import { Bookmark, ListFilter, Save, SlidersHorizontal, Trash2, X } from "lucide-react";
 import { cn } from "@/lib/utils";
 import type { Signal } from "@/lib/api";
 import {
@@ -81,6 +79,17 @@ export function SignalFeedFilters({
   const assetInputRef = useRef<HTMLInputElement>(null);
   const [presetName, setPresetName] = useState("");
   const [showPresetInput, setShowPresetInput] = useState(false);
+  const [savedFiltersOpen, setSavedFiltersOpen] = useState(false);
+
+  const counts = useMemo(() => {
+    if (!signals) return null;
+    return {
+      direction: (value: FilterDirection) =>
+        value === "ALL" ? signals.length : signals.filter((s) => s.action === value).length,
+      asset: (value: string) => signals.filter((s) => s.asset === value).length,
+      provider: (value: string) => signals.filter((s) => s.providerId === value).length,
+    };
+  }, [signals]);
 
   // Render a neutral placeholder until persisted filters are loaded.
   // This prevents filter state from flickering from defaults to saved values.
@@ -106,16 +115,6 @@ export function SignalFeedFilters({
     );
   }
 
-  const counts = useMemo(() => {
-    if (!signals) return null;
-    return {
-      direction: (value: FilterDirection) =>
-        value === "ALL" ? signals.length : signals.filter((s) => s.action === value).length,
-      asset: (value: string) => signals.filter((s) => s.asset === value).length,
-      provider: (value: string) => signals.filter((s) => s.providerId === value).length,
-    };
-  }, [signals]);
-
   const isActive =
     direction !== "ALL" || asset !== "" || provider !== "" || bookmarkedOnly;
 
@@ -203,50 +202,6 @@ export function SignalFeedFilters({
         {quickProviders.map((providerLabel) => {
           const count = counts ? counts.provider(providerLabel) : null;
           return (
-        {quickAssets.map((assetLabel) => (
-          <button
-            key={assetLabel}
-            type="button"
-            onClick={() => setAsset(asset === assetLabel ? "" : assetLabel)}
-            aria-pressed={asset === assetLabel}
-            className={cn(
-              "rounded-full px-3 py-1 text-xs font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500",
-              asset === assetLabel
-                ? "bg-emerald-500/15 text-emerald-300 border border-emerald-500/40"
-                : "bg-surface text-foreground border border-border hover:border-border-strong hover:text-foreground"
-            )}
-          >
-            {assetLabel}
-          </button>
-        ))}
-
-        {quickProviders.map((providerLabel) => (
-          <button
-            key={providerLabel}
-            type="button"
-            onClick={() =>
-              setProvider(provider === providerLabel ? "" : providerLabel)
-            }
-            aria-pressed={provider === providerLabel}
-            className={cn(
-              "rounded-full px-3 py-1 text-xs font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500",
-              provider === providerLabel
-                ? "bg-orange-500/15 text-orange-300 border border-orange-500/40"
-                : "bg-surface text-foreground border border-border hover:border-border-strong hover:text-foreground"
-            )}
-          >
-            {providerLabel}
-          </button>
-        ))}
-      </div>
-
-      <div className="flex flex-wrap items-center gap-3">
-        {/* Direction pills */}
-        <fieldset
-          className="flex items-center gap-1"
-          aria-label="Filter by direction"
-        >
-          {DIRECTIONS.map(({ label, value }) => (
             <button
               key={providerLabel}
               type="button"

components/signal/SignalFeed.tsx

@@ -24,8 +24,17 @@ import { Search, X, SlidersHorizontal } from "lucide-react";
 import { useSyncStatus } from "@/hooks/useSyncStatus";
 import { SyncStatusIndicator } from "@/components/SyncStatusIndicator";
 import { RelativeTimestamp } from "@/components/RelativeTimestamp";
-import { DataPanelError } from "@/components/DataPanelError";
-import { classifyError } from "@/hooks/usePanelError";
+import { NetworkErrorState } from "@/components/NetworkErrorState";
+import { useI18n } from "@/hooks/useI18n";
+import { fetchSignals } from "@/lib/api";
+import { queryOptions } from "@/lib/queryOptions";
+import { usePullToRefresh } from "@/hooks/usePullToRefresh";
+import {
+  readPersistedSplitRatio,
+  persistSplitRatio,
+  clampSplitRatio,
+  computeSplitRatioFromClientX,
+} from "@/lib/splitView";
 
 interface SignalResponse {
   items: Signal[];
@@ -60,6 +69,10 @@ export function SignalFeed({ initialData }: SignalFeedProps = {}) {
   const snoozedMap = useSnoozeStore((state) => state.snoozed);
   const pruneExpiredSnoozes = useSnoozeStore((state) => state.pruneExpired);
   const [providerSearch, setProviderSearch] = useState(provider);
+  // #685: debounce the free-text search term used for filtering so a fast
+  // typist doesn't trigger a full re-filter of the signal list on every
+  // keystroke. The input itself still updates instantly via providerSearch.
+  const [debouncedSearch, setDebouncedSearch] = useState(provider);
   const [filterSheetOpen, setFilterSheetOpen] = useState(false);
   const { addView } = useRecentlyViewedStore();
   // Bumped on a timer so expired snoozes are re-evaluated and signals return.
@@ -100,7 +113,7 @@ export function SignalFeed({ initialData }: SignalFeedProps = {}) {
     },
     getNextPageParam: (lastPage: SignalResponse) => lastPage.nextPage,
     initialPageParam: 1,
-    staleTime: queryOpts.signal.staleTime,
+    staleTime: queryOptions.signal.staleTime,
     placeholderData: (prev) => prev,
     // Seed the cache with the server-fetched first page so no client waterfall occurs
     ...(initialData && {
@@ -116,6 +129,11 @@ export function SignalFeed({ initialData }: SignalFeedProps = {}) {
     [data]
   );
 
+  useEffect(() => {
+    const handle = setTimeout(() => setDebouncedSearch(providerSearch), 150);
+    return () => clearTimeout(handle);
+  }, [providerSearch]);
+
   const availableProviders = useMemo(
     () => [...new Set(allSignals.map((s) => s.ticker))].sort(),
     [allSignals]
@@ -128,7 +146,7 @@ export function SignalFeed({ initialData }: SignalFeedProps = {}) {
 
   const filteredSignals = useMemo<Signal[]>(() => {
     let filtered = [...allSignals];
-    const searchTerm = providerSearch.trim().toLowerCase();
+    const searchTerm = debouncedSearch.trim().toLowerCase();
 
     if (direction !== "ALL") {
       filtered = filtered.filter((s) => s.action === direction);
@@ -168,7 +186,7 @@ export function SignalFeed({ initialData }: SignalFeedProps = {}) {
     direction,
     asset,
     provider,
-    providerSearch,
+    debouncedSearch,
     bookmarkedOnly,
     bookmarkedIds,
     snoozedMap,
@@ -421,8 +439,12 @@ export function SignalFeed({ initialData }: SignalFeedProps = {}) {
         <div className="flex flex-col items-end gap-2">
           {/* Sort controls — persistent across browsing */}
           <SignalSortControls />
-          {/* Price precision toggle */}
-          <PricePrecisionToggle />
+          <div className="flex items-center gap-2">
+            {/* Price precision toggle */}
+            <PricePrecisionToggle />
+            {/* Density toggle — persisted across sessions */}
+            <FeedDensityToggle />
+          </div>
           {/* #574: last-updated / stale status, with a manual refresh action */}
           <div className="flex items-center gap-2">
             <SyncStatusIndicator status={syncStatus} />
@@ -435,11 +457,6 @@ export function SignalFeed({ initialData }: SignalFeedProps = {}) {
             >
               Refresh
             </button>
-          <div className="flex items-center gap-2">
-            {/* Price precision toggle */}
-            <PricePrecisionToggle />
-            {/* Density toggle — persisted across sessions */}
-            <FeedDensityToggle />
           </div>
           {/* #98: show consistent loading state */}
           <div
@@ -545,41 +562,6 @@ export function SignalFeed({ initialData }: SignalFeedProps = {}) {
         availableMarkets={availableAssets}
       />
 
-      <div
-        ref={parentRef}
-        className="max-h-[70vh] overflow-auto"
-        role="feed"
-        aria-busy={isLoading}
-        aria-label="Signal list"
-        onKeyDown={(e) => {
-          if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
-          const articles = Array.from(
-            (e.currentTarget as HTMLElement).querySelectorAll<HTMLElement>("article[tabindex]")
-          );
-          const idx = articles.indexOf(document.activeElement as HTMLElement);
-          if (idx === -1) return;
-          e.preventDefault();
-          const next = e.key === "ArrowDown" ? articles[idx + 1] : articles[idx - 1];
-          next?.focus();
-        }}
-      >
-        {isError && (
-          <DataPanelError
-            errorInfo={classifyError(error)}
-            onRetry={() => refetch()}
-          />
-        )}
-
-      {isError && signals.length > 0 && (
-        <div className="mb-3">
-          <NetworkErrorState
-            context="the latest signals"
-            onRetry={() => refetch()}
-            variant="banner"
-          />
-        </div>
-      )}
-
       <div
         ref={splitContainerRef}
         className="lg:grid lg:items-start lg:gap-0"
@@ -595,7 +577,10 @@ export function SignalFeed({ initialData }: SignalFeedProps = {}) {
       >
         <div className="min-w-0">
           <div
-            ref={setScrollEl}
+            ref={(el) => {
+              setScrollEl(el);
+              parentRef.current = el;
+            }}
             className="max-h-[70vh] overflow-auto"
             role="feed"
             aria-busy={isLoading}