Merge pull request #742 from aibtcdev/feat/search

Feat/search

Author: biwasxyz

src/components/aidaos/DAOTabLayout.tsx

@@ -29,27 +29,25 @@ export function DAOTabLayout({
     <div className="mx-auto space-y-4 rounded-sm">
       {/* Header Section */}
       <div className="space-y-2 px-2">
-        <div className="flex items-center gap-3 px-2">
-          {Icon && (
-            <div className="w-10 h-10 rounded-sm bg-gradient-to-br from-secondary/20 to-secondary/10 flex items-center justify-center">
-              <Icon className="h-5 w-5 text-secondary" />
-            </div>
-          )}
-          <div>
-            <h2 className="text-2xl font-bold tracking-tight text-foreground">
-              {title}
-            </h2>
-            {description && (
-              <p className="text-muted-foreground mt-1">{description}</p>
+        <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 px-2">
+          <div className="flex items-center gap-3 min-w-0">
+            {Icon && (
+              <div className="w-10 h-10 rounded-sm bg-gradient-to-br from-secondary/20 to-secondary/10 flex items-center justify-center flex-shrink-0">
+                <Icon className="h-5 w-5 text-secondary" />
+              </div>
             )}
+            <div className="min-w-0">
+              <h2 className="text-2xl font-bold tracking-tight text-foreground">
+                {title}
+              </h2>
+              {description && (
+                <p className="text-muted-foreground mt-1">{description}</p>
+              )}
+            </div>
           </div>
+          {/* Toolbar Section */}
+          {toolbar && <div className="w-full lg:w-[400px]">{toolbar}</div>}
         </div>
-        {/* Toolbar Section */}
-        {toolbar && (
-          <div className="flex flex-col space-y-4 sm:flex-row sm:items-center sm:justify-between sm:space-y-0">
-            {toolbar}
-          </div>
-        )}
       </div>
 
       {/* Content Section */}

src/components/proposals/DAOProposals.tsx

@@ -3,12 +3,14 @@
 import { useMemo, useState, useEffect, useRef, useCallback } from "react";
 import ProposalCard from "@/components/proposals/ProposalCard";
 import type { Proposal } from "@/types";
-import { FileText, Loader2 } from "lucide-react";
+import { FileText, Loader2, Search, X } from "lucide-react";
 import { DAOTabLayout } from "@/components/aidaos/DAOTabLayout";
 import { enableSingleDaoMode, singleDaoName } from "@/config/features";
 import { useBatchProposalVotes } from "@/hooks/useBatchProposalVotes";
 import { useQuery } from "@tanstack/react-query";
 import { fetchLatestChainState } from "@/services/chain-state.service";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
 
 const ITEMS_PER_BATCH = 5;
 
@@ -25,9 +27,10 @@ const DAOProposals = ({
 }: DAOProposalsProps) => {
   const [visibleCount, setVisibleCount] = useState(ITEMS_PER_BATCH);
   const [isLoading, setIsLoading] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
   const loaderRef = useRef<HTMLDivElement>(null);
 
-  // Filter deployed proposals
+  // Filter deployed proposals with search and status filter
   const deployedProposals = useMemo(() => {
     let filtered = proposals.filter(
       (proposal) => proposal.status === "DEPLOYED"
@@ -38,8 +41,24 @@ const DAOProposals = ({
     ) {
       filtered = [];
     }
+
+    // Apply search filter (search by username in reference link)
+    if (searchQuery.trim()) {
+      const query = searchQuery.toLowerCase();
+      filtered = filtered.filter((proposal) => {
+        // Extract reference link from content
+        const referenceMatch = proposal.content?.match(
+          /Reference:\s*(https?:\/\/\S+)/i
+        );
+        const referenceLink = referenceMatch?.[1] || "";
+
+        // Search in the reference link for username
+        return referenceLink.toLowerCase().includes(query);
+      });
+    }
+
     return filtered;
-  }, [proposals, daoName]);
+  }, [proposals, daoName, searchQuery]);
 
   // Fetch chain state once for all proposals
   const { data: chainState } = useQuery({
@@ -99,19 +118,72 @@ const DAOProposals = ({
     setVisibleCount(ITEMS_PER_BATCH);
   }, [proposals]);
 
+  // Reset visible count when search changes
+  useEffect(() => {
+    setVisibleCount(ITEMS_PER_BATCH);
+  }, [searchQuery]);
+
+  const clearSearch = () => {
+    setSearchQuery("");
+  };
+
+  const hasActiveSearch = searchQuery.trim() !== "";
+
   return (
     <DAOTabLayout
       title="Submission History"
       description="Explore all the work that has been submitted to AIBTC."
-      isEmpty={deployedProposals.length === 0}
+      isEmpty={deployedProposals.length === 0 && !hasActiveSearch}
       emptyTitle="No Contributions Found"
       emptyIcon={FileText}
+      toolbar={
+        <div className="relative w-full">
+          <Search className="absolute left-3 sm:left-4 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
+          <Input
+            placeholder="Search contributions by X username"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="pl-9 border-none py-7"
+          />
+          {hasActiveSearch && (
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={clearSearch}
+              className="absolute right-1 top-1/2 -translate-y-1/2 h-7 w-7"
+              title="Clear search"
+            >
+              <X className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+      }
     >
       <div className="space-y-4">
+        {/* Results count */}
+        {hasActiveSearch && (
+          <div className="text-sm text-muted-foreground px-4">
+            Found {deployedProposals.length}{" "}
+            {deployedProposals.length === 1 ? "contribution" : "contributions"}
+          </div>
+        )}
         {isLoadingData && visibleProposals.length === 0 ? (
           <div className="flex justify-center py-12">
             <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
           </div>
+        ) : deployedProposals.length === 0 && hasActiveSearch ? (
+          <div className="flex flex-col items-center justify-center py-12 text-center">
+            <FileText className="h-12 w-12 text-muted-foreground mb-4" />
+            <h3 className="text-lg font-semibold mb-2">
+              No contributions found
+            </h3>
+            <p className="text-sm text-muted-foreground mb-4">
+              Try adjusting your search
+            </p>
+            <Button variant="outline" onClick={clearSearch}>
+              Clear search
+            </Button>
+          </div>
         ) : (
           <div className="divide-y">
             {visibleProposals.map((proposal) => {