feat: add search functionality across multiple components for improved user experience

x0sina · x0sina · commit 147df6e879bb · 2025-11-19T15:25:35.000+03:30
diff --git a/dashboard/public/statics/locales/en.json b/dashboard/public/statics/locales/en.json
@@ -60,6 +60,7 @@
     "noNodes": "No nodes configured",
     "noNodesDescription": "Master Panel doesn't have any cores configured. You need to add and configure a node from",
     "noNodesDescription2": "connect and configure it to the panel.",
+    "noSearchResults": "No nodes match your search criteria. Try adjusting your search terms.",
     "logs": {
       "title": "Logs",
       "description": "View and monitor node logs",
diff --git a/dashboard/public/statics/locales/fa.json b/dashboard/public/statics/locales/fa.json
@@ -1283,6 +1283,7 @@
     "noNodes": "هیچ گره ای پیکربندی نشده",
     "noNodesDescription": "پنل اصلی هیچ هسته‌ای ندارد. شما باید یک گره از",
     "noNodesDescription2": "پیکربندی کرده و آن را به پنل متصل کنید.",
+    "noSearchResults": "هیچ گره‌ای با معیارهای جستجوی شما مطابقت ندارد. لطفاً عبارات جستجوی خود را تغییر دهید.",
     "logs": {
       "title": "لاگ‌ها",
       "description": "مشاهده و نظارت بر لاگ‌های گره‌ها",
diff --git a/dashboard/public/statics/locales/ru.json b/dashboard/public/statics/locales/ru.json
@@ -87,6 +87,7 @@
     "noNodes": "Узлы не настроены",
     "noNodesDescription": "Главная панель не имеет настроенных ядер. Вам нужно добавить и настроить узел из",
     "noNodesDescription2": "подключить и настроить его к панели.",
+    "noSearchResults": "Нет узлов, соответствующих вашим критериям поиска. Попробуйте изменить условия поиска.",
     "logs": {
       "title": "Журналы",
       "description": "Просмотр и мониторинг журналов узла",
diff --git a/dashboard/public/statics/locales/zh.json b/dashboard/public/statics/locales/zh.json
@@ -56,6 +56,7 @@
     "noNodes": "未配置节点",
     "noNodesDescription": "主面板没有配置任何核心。您需要从",
     "noNodesDescription2": "连接和配置节点，并将其连接到面板。",
+    "noSearchResults": "没有节点匹配您的搜索条件。请尝试调整搜索词。",
     "logs": {
       "title": "日志",
       "description": "查看和监控节点日志",
diff --git a/dashboard/src/components/groups/groups-list.tsx b/dashboard/src/components/groups/groups-list.tsx
@@ -1,7 +1,7 @@
 import { useGetAllGroups, useModifyGroup } from '@/service/api'
 import { GroupResponse } from '@/service/api'
 import Group from './group'
-import { useState } from 'react'
+import { useState, useMemo } from 'react'
 import GroupModal, { groupFormSchema, GroupFormValues } from '@/components/dialogs/group-modal'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
@@ -12,6 +12,9 @@ import { queryClient } from '@/utils/query-client'
 import useDirDetection from '@/hooks/use-dir-detection'
 import { Skeleton } from '@/components/ui/skeleton'
 import { Card } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Search, X } from 'lucide-react'
+import { cn } from '@/lib/utils'
 
 const initialDefaultValues: Partial<GroupFormValues> = {
   name: '',
@@ -26,6 +29,7 @@ interface GroupsListProps {
 
 export default function GroupsList({ isDialogOpen, onOpenChange }: GroupsListProps) {
   const [editingGroup, setEditingGroup] = useState<GroupResponse | null>(null)
+  const [searchQuery, setSearchQuery] = useState('')
   const { t } = useTranslation()
   const modifyGroupMutation = useModifyGroup()
   const dir = useDirDetection()
@@ -78,8 +82,32 @@ export default function GroupsList({ isDialogOpen, onOpenChange }: GroupsListPro
     }
   }
 
+  const filteredGroups = useMemo(() => {
+    if (!groupsData?.groups || !searchQuery.trim()) return groupsData?.groups
+    const query = searchQuery.toLowerCase().trim()
+    return groupsData.groups.filter((group: GroupResponse) => group.name?.toLowerCase().includes(query))
+  }, [groupsData?.groups, searchQuery])
+
   return (
     <div className="w-full flex-1 space-y-4 pt-4">
+      {/* Search Input */}
+      <div className="relative w-full md:w-[calc(100%/3-10px)]" dir={dir}>
+        <Search className={cn('absolute', dir === 'rtl' ? 'right-2' : 'left-2', 'top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground')} />
+        <Input
+          placeholder={t('search')}
+          value={searchQuery}
+          onChange={e => setSearchQuery(e.target.value)}
+          className={cn('pl-8 pr-10', dir === 'rtl' && 'pr-8 pl-10')}
+        />
+        {searchQuery && (
+          <button
+            onClick={() => setSearchQuery('')}
+            className={cn('absolute', dir === 'rtl' ? 'left-2' : 'right-2', 'top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground')}
+          >
+            <X className="h-4 w-4" />
+          </button>
+        )}
+      </div>
       <ScrollArea className="h-[calc(100vh-8rem)]">
         <div dir={dir} className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
           {isLoading
@@ -95,7 +123,7 @@ export default function GroupsList({ isDialogOpen, onOpenChange }: GroupsListPro
                   </div>
                 </Card>
               ))
-            : groupsData?.groups.map(group => <Group key={group.id} group={group} onEdit={handleEdit} onToggleStatus={handleToggleStatus} />)}
+            : filteredGroups?.map(group => <Group key={group.id} group={group} onEdit={handleEdit} onToggleStatus={handleToggleStatus} />)}
         </div>
       </ScrollArea>
 
diff --git a/dashboard/src/components/hosts/hosts-list.tsx b/dashboard/src/components/hosts/hosts-list.tsx
@@ -3,13 +3,17 @@ import { queryClient } from '@/utils/query-client'
 import { closestCenter, DndContext, DragEndEvent, KeyboardSensor, PointerSensor, UniqueIdentifier, useSensor, useSensors } from '@dnd-kit/core'
 import { arrayMove, rectSortingStrategy, SortableContext, sortableKeyboardCoordinates } from '@dnd-kit/sortable'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useMemo } from 'react'
 import { useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
 import * as z from 'zod'
 import HostModal from '../dialogs/host-modal'
 import SortableHost from './sortable-host'
+import { Input } from '@/components/ui/input'
+import { Search, X } from 'lucide-react'
+import useDirDetection from '@/hooks/use-dir-detection'
+import { cn } from '@/lib/utils'
 
 interface Brutal {
   enable?: boolean
@@ -440,7 +444,9 @@ export interface HostsListProps {
 export default function HostsList({ data, onAddHost, isDialogOpen, onSubmit, editingHost, setEditingHost }: HostsListProps) {
   const [hosts, setHosts] = useState<BaseHost[] | undefined>()
   const [isUpdatingPriorities, setIsUpdatingPriorities] = useState(false)
+  const [searchQuery, setSearchQuery] = useState('')
   const { t } = useTranslation()
+  const dir = useDirDetection()
 
   // Set up hosts data from props
   useEffect(() => {
@@ -792,14 +798,47 @@ export default function HostsList({ data, onAddHost, isDialogOpen, onSubmit, edi
     return idA - idB
   })
 
+  // Filter hosts by search query
+  const filteredHosts = useMemo(() => {
+    if (!searchQuery.trim()) return sortedHosts
+    const query = searchQuery.toLowerCase().trim()
+    return sortedHosts.filter(host => {
+      const remarkMatch = host.remark?.toLowerCase().includes(query)
+      const addressMatch = Array.isArray(host.address) ? host.address.some(addr => addr.toLowerCase().includes(query)) : false
+      const inboundTagMatch = host.inbound_tag?.toLowerCase().includes(query)
+      const hostMatch = Array.isArray(host.host) ? host.host.some(h => h.toLowerCase().includes(query)) : false
+      return remarkMatch || addressMatch || inboundTagMatch || hostMatch
+    })
+  }, [sortedHosts, searchQuery])
+
   return (
     <div>
+      {/* Search Input */}
+      <div className="mb-4">
+        <div className="relative w-full md:w-[calc(100%/3-10px)]" dir={dir}>
+          <Search className={cn('absolute', dir === 'rtl' ? 'right-2' : 'left-2', 'top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground')} />
+          <Input
+            placeholder={t('search')}
+            value={searchQuery}
+            onChange={e => setSearchQuery(e.target.value)}
+            className={cn('pl-8 pr-10', dir === 'rtl' && 'pr-8 pl-10')}
+          />
+          {searchQuery && (
+            <button
+              onClick={() => setSearchQuery('')}
+              className={cn('absolute', dir === 'rtl' ? 'left-2' : 'right-2', 'top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground')}
+            >
+              <X className="h-4 w-4" />
+            </button>
+          )}
+        </div>
+      </div>
       <div>
         <DndContext sensors={isUpdatingPriorities ? [] : sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
           <SortableContext items={sortableHosts} strategy={rectSortingStrategy}>
             <div className="max-w-screen-[2000px] min-h-screen overflow-hidden">
               <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-                {sortedHosts.map(host => (
+                {filteredHosts.map(host => (
                   <SortableHost key={host.id ?? 'new'} host={host} onEdit={handleEdit} onDuplicate={handleDuplicate} onDataChanged={refreshHostsData} disabled={isUpdatingPriorities} />
                 ))}
               </div>
diff --git a/dashboard/src/components/nodes/nodes-list.tsx b/dashboard/src/components/nodes/nodes-list.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Node from '@/components/nodes/node'
 import { useGetNodes, useModifyNode, NodeResponse, NodeConnectionType } from '@/service/api'
@@ -10,6 +10,10 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { nodeFormSchema, NodeFormValues } from '@/components/dialogs/node-modal'
 import { Card, CardContent } from '@/components/ui/card'
 import { Skeleton } from '@/components/ui/skeleton'
+import { Input } from '@/components/ui/input'
+import { Search, X } from 'lucide-react'
+import useDirDetection from '@/hooks/use-dir-detection'
+import { cn } from '@/lib/utils'
 
 const initialDefaultValues: Partial<NodeFormValues> = {
   name: '',
@@ -25,7 +29,9 @@ export default function NodesList() {
   const { t } = useTranslation()
   const [isDialogOpen, setIsDialogOpen] = useState(false)
   const [editingNode, setEditingNode] = useState<NodeResponse | null>(null)
+  const [searchQuery, setSearchQuery] = useState('')
   const modifyNodeMutation = useModifyNode()
+  const dir = useDirDetection()
 
   const { data: nodesData, isLoading } = useGetNodes(undefined, {
     query: {
@@ -99,9 +105,39 @@ export default function NodesList() {
     }
   }
 
+  const filteredNodes = useMemo(() => {
+    if (!nodesData || !searchQuery.trim()) return nodesData
+    const query = searchQuery.toLowerCase().trim()
+    return nodesData.filter(
+      node =>
+        node.name?.toLowerCase().includes(query) ||
+        node.address?.toLowerCase().includes(query) ||
+        node.connection_type?.toLowerCase().includes(query),
+    )
+  }, [nodesData, searchQuery])
+
   return (
     <div className="flex w-full flex-col items-start gap-2">
       <div className="w-full flex-1 space-y-4 pt-6">
+        {/* Search Input */}
+        <div className="relative w-full md:w-[calc(100%/3-10px)]" dir={dir}>
+          <Search className={cn('absolute', dir === 'rtl' ? 'right-2' : 'left-2', 'top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground')} />
+          <Input
+            placeholder={t('search')}
+            value={searchQuery}
+            onChange={e => setSearchQuery(e.target.value)}
+            className={cn('pl-8 pr-10', dir === 'rtl' && 'pr-8 pl-10')}
+          />
+          {searchQuery && (
+            <button
+              onClick={() => setSearchQuery('')}
+              className={cn('absolute', dir === 'rtl' ? 'left-2' : 'right-2', 'top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground')}
+            >
+              <X className="h-4 w-4" />
+            </button>
+          )}
+        </div>
+
         <div
           className="mb-12 grid transform-gpu animate-slide-up grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"
           style={{ animationDuration: '500ms', animationDelay: '100ms', animationFillMode: 'both' }}
@@ -122,7 +158,7 @@ export default function NodesList() {
                   </div>
                 </Card>
               ))
-            : nodesData?.map(node => <Node key={node.id} node={node} onEdit={handleEdit} onToggleStatus={handleToggleStatus} />)}
+            : filteredNodes?.map(node => <Node key={node.id} node={node} onEdit={handleEdit} onToggleStatus={handleToggleStatus} />)}
         </div>
 
         {!isLoading && (!nodesData || nodesData.length === 0) && (
@@ -142,6 +178,19 @@ export default function NodesList() {
           </Card>
         )}
 
+        {!isLoading && nodesData && nodesData.length > 0 && (!filteredNodes || filteredNodes.length === 0) && (
+          <Card className="mb-12">
+            <CardContent className="p-8 text-center">
+              <div className="space-y-4">
+                <h3 className="text-lg font-semibold">{t('noResults')}</h3>
+                <p className="mx-auto max-w-2xl text-muted-foreground">
+                  {t('nodes.noSearchResults', { defaultValue: 'No nodes match your search criteria. Try adjusting your search terms.' })}
+                </p>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
         <NodeModal
           isDialogOpen={isDialogOpen}
           onOpenChange={open => {
diff --git a/dashboard/src/components/settings/cores.tsx b/dashboard/src/components/settings/cores.tsx
@@ -1,7 +1,7 @@
 import { useGetAllCores, useModifyCoreConfig } from '@/service/api'
 import { CoreResponse } from '@/service/api'
 import Core from './core'
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useMemo } from 'react'
 import CoreConfigModal, { coreConfigFormSchema, CoreConfigFormValues } from '@/components/dialogs/core-config-modal'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
@@ -12,6 +12,9 @@ import { queryClient } from '@/utils/query-client'
 import useDirDetection from '@/hooks/use-dir-detection'
 import { Skeleton } from '@/components/ui/skeleton'
 import { Card } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Search, X } from 'lucide-react'
+import { cn } from '@/lib/utils'
 
 const initialDefaultValues: Partial<CoreConfigFormValues> = {
   name: '',
@@ -30,6 +33,7 @@ interface CoresProps {
 
 export default function Cores({ isDialogOpen, onOpenChange, cores, onEditCore, onDuplicateCore, onDeleteCore }: CoresProps) {
   const [editingCore, setEditingCore] = useState<CoreResponse | null>(null)
+  const [searchQuery, setSearchQuery] = useState('')
   const { t } = useTranslation()
   const modifyCoreMutation = useModifyCoreConfig()
   const dir = useDirDetection()
@@ -105,10 +109,38 @@ export default function Cores({ isDialogOpen, onOpenChange, cores, onEditCore, o
     onOpenChange?.(open)
   }
 
+  const coresList = cores || coresData?.cores || []
+
+  const filteredCores = useMemo(() => {
+    if (!searchQuery.trim()) return coresList
+    const query = searchQuery.toLowerCase().trim()
+    return coresList.filter((core: CoreResponse) => core.name?.toLowerCase().includes(query))
+  }, [coresList, searchQuery])
+
   return (
-    <div className="w-full flex-1">
+    <div className={cn('flex w-full flex-col gap-4 py-4', dir === 'rtl' && 'rtl')}>
+      <div className='mt-2'>
+        {/* Search Input */}
+        <div className="relative w-full md:w-[calc(100%/3-10px)]" dir={dir}>
+          <Search className={cn('absolute', dir === 'rtl' ? 'right-2' : 'left-2', 'top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground')} />
+          <Input
+            placeholder={t('search')}
+            value={searchQuery}
+            onChange={e => setSearchQuery(e.target.value)}
+            className={cn('pl-8 pr-10', dir === 'rtl' && 'pr-8 pl-10')}
+          />
+          {searchQuery && (
+            <button
+              onClick={() => setSearchQuery('')}
+              className={cn('absolute', dir === 'rtl' ? 'left-2' : 'right-2', 'top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground')}
+            >
+              <X className="h-4 w-4" />
+            </button>
+          )}
+        </div>
+      </div>
       <ScrollArea dir={dir} className="h-[calc(100vh-8rem)]">
-        <div className="grid w-full grid-cols-1 gap-4 pt-6 md:grid-cols-2 lg:grid-cols-3">
+        <div className="grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
           {isLoading
             ? [...Array(6)].map((_, i) => (
                 <Card key={i} className="px-4 py-5">
@@ -121,7 +153,7 @@ export default function Cores({ isDialogOpen, onOpenChange, cores, onEditCore, o
                   </div>
                 </Card>
               ))
-            : (cores || coresData?.cores)?.map((core: CoreResponse) => (
+            : filteredCores.map((core: CoreResponse) => (
                 <Core
                   key={core.id}
                   core={core}
diff --git a/dashboard/src/pages/_dashboard.templates.tsx b/dashboard/src/pages/_dashboard.templates.tsx
