Add searchbox for extensions panel (#1675)

src/components/dialog/content/setting/ExtensionPanel.vue

@@ -1,6 +1,35 @@
 <template>
   <PanelTemplate value="Extension" class="extension-panel">
-    <DataTable :value="extensionStore.extensions" stripedRows size="small">
+    <template #header>
+      <SearchBox
+        v-model="filters['global'].value"
+        :placeholder="$t('searchExtensions') + '...'"
+      />
+      <Message v-if="hasChanges" severity="info" pt:text="w-full">
+        <ul>
+          <li v-for="ext in changedExtensions" :key="ext.name">
+            <span>
+              {{ extensionStore.isExtensionEnabled(ext.name) ? '[-]' : '[+]' }}
+            </span>
+            {{ ext.name }}
+          </li>
+        </ul>
+        <div class="flex justify-end">
+          <Button
+            :label="$t('reloadToApplyChanges')"
+            @click="applyChanges"
+            outlined
+            severity="danger"
+          />
+        </div>
+      </Message>
+    </template>
+    <DataTable
+      :value="extensionStore.extensions"
+      stripedRows
+      size="small"
+      :filters="filters"
+    >
       <Column field="name" :header="$t('extensionName')" sortable></Column>
       <Column
         :pt="{
@@ -15,27 +44,6 @@
         </template>
       </Column>
     </DataTable>
-    <div class="mt-4">
-      <Message v-if="hasChanges" severity="info">
-        <ul>
-          <li v-for="ext in changedExtensions" :key="ext.name">
-            <span>
-              {{ extensionStore.isExtensionEnabled(ext.name) ? '[-]' : '[+]' }}
-            </span>
-            {{ ext.name }}
-          </li>
-        </ul>
-      </Message>
-      <Button
-        :label="$t('reloadToApplyChanges')"
-        icon="pi pi-refresh"
-        @click="applyChanges"
-        :disabled="!hasChanges"
-        text
-        fluid
-        severity="danger"
-      />
-    </div>
   </PanelTemplate>
 </template>
 
@@ -48,7 +56,13 @@ import Column from 'primevue/column'
 import ToggleSwitch from 'primevue/toggleswitch'
 import Button from 'primevue/button'
 import Message from 'primevue/message'
+import { FilterMatchMode } from '@primevue/core/api'
 import PanelTemplate from './PanelTemplate.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
+
+const filters = ref({
+  global: { value: '', matchMode: FilterMatchMode.CONTAINS }
+})
 
 const extensionStore = useExtensionStore()
 const settingStore = useSettingStore()

src/i18n.ts

@@ -129,6 +129,7 @@ const messages = {
     searchNodes: 'Search Nodes',
     searchModels: 'Search Models',
     searchKeybindings: 'Search Keybindings',
+    searchExtensions: 'Search Extensions',
     noResultsFound: 'No Results Found',
     searchFailedMessage:
       "We couldn't find any settings matching your search. Try adjusting your search terms.",
@@ -263,6 +264,7 @@ const messages = {
     searchNodes: '搜索节点',
     searchModels: '搜索模型',
     searchKeybindings: '搜索键位',
+    searchExtensions: '搜索插件',
     noResultsFound: '未找到结果',
     searchFailedMessage:
       '我们找不到与您的搜索匹配的任何设置。请尝试调整搜索条件。',
@@ -380,6 +382,7 @@ const messages = {
     searchNodes: 'Поиск узлов',
     searchModels: 'Поиск моделей',
     searchKeybindings: 'Поиск сочетаний клавиш',
+    searchExtensions: 'Поиск расширений',
     noResultsFound: 'Ничего не найдено',
     searchFailedMessage:
       'Не удалось найти ни одной настройки, соответствующей вашему запросу. Попробуйте скорректировать поисковый запрос.',