fix search to filter and filter by tag. fix order of components

Author: ci-bot

apps/remix-ide/src/app.ts

@@ -269,6 +269,7 @@ class AppComponent {
     this.gistHandler = new GistHandler()
     // ----------------- theme service ---------------------------------
     this.themeModule = new ThemeModule()
+    this.templateExplorerModal = new TemplateExplorerModalPlugin(this.themeModule)
     // ----------------- locale service ---------------------------------
     this.localeModule = new LocaleModule()
     Registry.getInstance().put({ api: this.themeModule, name: 'themeModule' })
@@ -403,7 +404,7 @@ class AppComponent {
 
     const templateSelection = new TemplatesSelectionPlugin()
 
-    const templateExplorerModal = new TemplateExplorerModalPlugin()
+    const templateExplorerModal = this.templateExplorerModal
 
     const walletConnect = new WalletConnect()
 
@@ -460,10 +461,10 @@ class AppComponent {
       pluginStateLogger,
       matomo,
       templateSelection,
-      templateExplorerModal,
       scriptRunnerUI,
       remixAI,
       remixAiAssistant,
+      templateExplorerModal,
       walletConnect
     ])
 
@@ -616,6 +617,7 @@ class AppComponent {
     await this.appManager.activatePlugin(['mainPanel', 'menuicons', 'tabs'])
     await this.appManager.activatePlugin(['topbar'])
     await this.appManager.activatePlugin(['statusBar'])
+    // await this.appManager.activatePlugin(['remix-template-explorer-modal'])
     await this.appManager.activatePlugin(['bottomBar'])
     await this.appManager.activatePlugin(['sidePanel']) // activating  host plugin separately
     await this.appManager.activatePlugin(['pinnedPanel'])

apps/remix-ide/src/app/plugins/remix-template-explorer-modal.tsx

@@ -4,7 +4,8 @@ import { AppAction, AppState } from '@remix-ui/app'
 import { PluginViewWrapper } from '@remix-ui/helper'
 import { Plugin } from '@remixproject/engine'
 import { EventEmitter } from 'events'
-import { RemixUiTemplateExplorerModal, RemixUiTemplateExplorerModalProps } from 'libs/remix-ui/template-explorer-modal/src/lib/remix-ui-template-explorer-modal'
+import { ThemeModule } from '../tabs/theme-module'
+import { TemplateExplorerProvider } from 'libs/remix-ui/template-explorer-modal/context/template-explorer-context'
 
 const pluginProfile = {
   name: 'remix-template-explorer-modal',
@@ -18,16 +19,20 @@ export class TemplateExplorerModalPlugin extends Plugin {
   dispatch: React.Dispatch<any> = () => { }
   event: any
   appStateDispatch: any
-  constructor() {
+  theme: any = null
+  constructor(theme: ThemeModule) {
     super(pluginProfile)
     this.element = document.createElement('div')
-    this.element.setAttribute('id', 'remix-template-explorer-modal')
+    this.element.setAttribute('id', 'template-explorer-modal')
     this.dispatch = () => { }
     this.event = new EventEmitter()
+    this.theme = theme
   }
 
   async onActivation(): Promise<void> {
-
+    this.on('theme', 'themeChanged', (theme: any) => {
+      this.theme = theme
+    })
   }
 
   onDeactivation(): void {
@@ -53,17 +58,13 @@ export class TemplateExplorerModalPlugin extends Plugin {
 
   renderComponent(): void {
     this.dispatch({
-      element: this.element,
+      plugins: this,
     })
   }
 
-  updateComponent(state: RemixUiTemplateExplorerModalProps, appState: AppState) {
+  updateComponent() {
     return (
-      <RemixUiTemplateExplorerModal
-        appState={appState}
-        dispatch={this.dispatch}
-        plugin={this}
-      />
+      <TemplateExplorerProvider plugin={this} />
     )
   }
 }

libs/remix-ui/app/src/lib/remix-app/remix-app.tsx

@@ -16,6 +16,7 @@ import { appInitialState } from './state/app'
 import isElectron from 'is-electron'
 import { desktopConnectionType } from '@remix-api'
 import { RemixUiTemplateExplorerModal } from 'libs/remix-ui/template-explorer-modal/src/lib/remix-ui-template-explorer-modal'
+import { TemplateExplorerProvider } from 'libs/remix-ui/template-explorer-modal/context/template-explorer-context'
 
 declare global {
   interface Window {
@@ -233,7 +234,9 @@ const RemixApp = (props: IRemixAppUi) => {
             </div>
             <AppDialogs></AppDialogs>
             <DialogViewPlugin></DialogViewPlugin>
-            {appState.genericModalState.showModal && <RemixUiTemplateExplorerModal appState={appState} dispatch={appStateDispatch} plugin={props.app.templateExplorerModal}></RemixUiTemplateExplorerModal>}
+            {appState.genericModalState.showModal &&
+              <TemplateExplorerProvider plugin={props.app.templateExplorerModal}></TemplateExplorerProvider>
+            }
           </AppProvider>
         </onLineContext.Provider>
       </platformContext.Provider>

libs/remix-ui/template-explorer-modal/context/template-explorer-context.tsx

@@ -1,25 +1,36 @@
+/* eslint-disable @nrwl/nx/enforce-module-boundaries */
 import React, { createContext, useContext, useEffect, useMemo, useReducer, useState } from 'react'
 import { TemplateCategory, TemplateExplorerContextType, TemplateExplorerWizardAction, TemplateItem } from '../types/template-explorer-types'
 import { initialState, templateExplorerReducer } from '../reducers/template-explorer-reducer'
 import { metadata, templatesRepository } from '../src/utils/helpers'
 import { AppContext } from '@remix-ui/app'
+import { TemplateExplorerModalPlugin } from 'apps/remix-ide/src/app/plugins/remix-template-explorer-modal'
+import { RemixUiTemplateExplorerModal } from '@remix-ui/template-explorer-modal'
 
 export const TemplateExplorerContext = createContext<TemplateExplorerContextType>({} as any)
 
-export const TemplateExplorerProvider = ({ children }: { children: React.ReactNode }) => {
+export const TemplateExplorerProvider = (props: { plugin: TemplateExplorerModalPlugin }) => {
   // const [templateRepository, setTemplateRepository] = useState<TemplateCategory[]>([])
   // const [metadata, setMetadata] = useState<any[]>([])
   // const [selectedTag, setSelectedTag] = useState<string | null>(null)
   // const [recentBump, setRecentBump] = useState<number>(0)
   const [state, dispatch] = useReducer(templateExplorerReducer, initialState)
   const appContext = useContext(AppContext)
+  const { plugin } = props
 
   useEffect(() => {
-    dispatch({ type: TemplateExplorerWizardAction.SET_METADATA, payload: metadata })
     dispatch({ type: TemplateExplorerWizardAction.SET_TEMPLATE_REPOSITORY, payload: templatesRepository })
+  }, [])
 
+  useEffect(() => {
+    dispatch({ type: TemplateExplorerWizardAction.SET_METADATA, payload: metadata })
   }, [])
 
+  const setSearchTerm = (term: string) => {
+    console.log('setSearchTerm', { term, state })
+    dispatch({ type: TemplateExplorerWizardAction.SET_SEARCH_TERM, payload: term })
+  }
+
   const allTags = useMemo((): string[] => {
     const tags: string[] = []
 
@@ -42,7 +53,6 @@ export const TemplateExplorerProvider = ({ children }: { children: React.ReactNo
     return tags.sort()
   }, [])
 
-  // Recent templates (before filteredTemplates so it can be referenced later)
   const recentTemplates = useMemo((): TemplateItem[] => {
     try {
       const raw = typeof window !== 'undefined' ? window.localStorage.getItem(RECENT_KEY) : null
@@ -71,21 +81,33 @@ export const TemplateExplorerProvider = ({ children }: { children: React.ReactNo
     }
   }, [state.selectedTag, state.recentBump])
 
-  // Filter templates based on selected tag
   const filteredTemplates = useMemo((): TemplateCategory[] => {
-    if (!state.selectedTag || !state.templateRepository || !Array.isArray(state.templateRepository)) {
-      return state.templateRepository as TemplateCategory[] || []
-    }
+    const repo = (state.templateRepository as TemplateCategory[]) || []
+    if (!Array.isArray(repo)) return []
+
+    const searchTerm = (state.searchTerm || '').trim().toLowerCase()
+    const selectedTag = state.selectedTag
+
+    return repo
+      .map((template: TemplateCategory) => ({
+        ...template,
+        items: (template.items || []).filter((item: TemplateItem) => {
+          // Filter by search term
+          const matchesSearch = !searchTerm ||
+            (item.displayName || item.value || '').toLowerCase().includes(searchTerm)
 
-    return (state.templateRepository as TemplateCategory[]).map((template: any) => ({
-      ...template,
-      items: template.items.filter((item: any) =>
-        item && item.tagList && Array.isArray(item.tagList) && item.tagList.includes(state.selectedTag)
+          // Filter by selected tag
+          const matchesTag = !selectedTag ||
+            (item.tagList && item.tagList.includes(selectedTag))
+
+          return matchesSearch && matchesTag
+        })
+      }))
+      .filter((template: TemplateCategory) =>
+        template && template.items && template.items.length > 0
       )
-    })).filter((template: any) => template && template.items && template.items.length > 0)
-  }, [state.selectedTag])
+  }, [state.selectedTag, state.searchTerm, state.templateRepository])
 
-  // Dedupe templates across the whole page and avoid showing ones already in recents
   const dedupedTemplates = useMemo((): TemplateCategory[] => {
     const recentSet = new Set<string>((recentTemplates || []).map((t: any) => t && t.value))
     const seen = new Set<string>()
@@ -131,9 +153,15 @@ export const TemplateExplorerProvider = ({ children }: { children: React.ReactNo
     }
   }
 
+  const contextValue = { templateRepository: state.templateRepository, metadata: state.metadata, selectedTag: state.selectedTag, recentTemplates, filteredTemplates, dedupedTemplates, handleTagClick, clearFilter, addRecentTemplate, RECENT_KEY, allTags, plugin, setSearchTerm }
+
   return (
-    <TemplateExplorerContext.Provider value={{ templateRepository: state.templateRepository, metadata: state.metadata, selectedTag: state.selectedTag, recentTemplates, filteredTemplates, dedupedTemplates, handleTagClick, clearFilter, addRecentTemplate, RECENT_KEY, allTags }}>
-      {children}
+    <TemplateExplorerContext.Provider value={contextValue}>
+      <RemixUiTemplateExplorerModal
+        appState={appContext.appState}
+        dispatch={appContext.appStateDispatch}
+        plugin={plugin}
+      />
     </TemplateExplorerContext.Provider>
   )
 }

libs/remix-ui/template-explorer-modal/reducers/template-explorer-reducer.tsx

@@ -1,9 +1,8 @@
 import React from 'react'
-import { MetadataType, TemplateExplorerWizardAction, TemplateExplorerWizardState, TemplateExplorerWizardSteps } from '../types/template-explorer-types'
+import { MetadataType, TemplateExplorerWizardAction, TemplateExplorerWizardState, TemplateRepository } from '../types/template-explorer-types'
 import { metadata, templatesRepository } from '../src/utils/helpers'
 
 export const initialState: TemplateExplorerWizardState = {
-  steps: TemplateExplorerWizardSteps.SELECT_TEMPLATE,
   workspaceTemplateChosen: '',
   workspaceTemplateGroupChosen: '',
   workspaceName: '',
@@ -13,15 +12,18 @@ export const initialState: TemplateExplorerWizardState = {
   workspaceGeneratedWithAi: false,
   searchTerm: '',
   metadata: metadata as MetadataType,
-  templateRepository: templatesRepository,
-  selectedTag: null
+  templateRepository: templatesRepository as TemplateRepository || [],
+  selectedTag: null,
+  setSearchTerm: (term: string) => {}
 }
 
 export const templateExplorerReducer = (state: TemplateExplorerWizardState, action: any) => {
   switch (action.type) {
-  case TemplateExplorerWizardAction.SET_WORKSPACE_TEMPLATE:
-    return action.payload
-  case TemplateExplorerWizardAction.SET_WORKSPACE_TEMPLATE_WIZARD_STEP:
+  case TemplateExplorerWizardAction.SET_TEMPLATE_REPOSITORY:
+    return { ...state, templateRepository: action.payload }
+  case TemplateExplorerWizardAction.SET_METADATA:
+    return { ...state, metadata: action.payload }
+  case TemplateExplorerWizardAction.SELECT_TEMPLATE:
     return action.payload
   case TemplateExplorerWizardAction.SET_WORKSPACE_TEMPLATE_GROUP:
     return action.payload
@@ -43,7 +45,19 @@ export const templateExplorerReducer = (state: TemplateExplorerWizardState, acti
   case TemplateExplorerWizardAction.CLEAR_SELECTED_TAG: {
     return { ...state, selectedTag: null }
   }
+  case TemplateExplorerWizardAction.SET_SEARCH_TERM: {
+    return { ...state, searchTerm: action.payload }
+  }
   default:
     return state
   }
 }
+
+function doTemplateSearch (searchTerm: string, repo: TemplateRepository) {
+  if (!searchTerm) return repo
+  return repo.filter(template => template.name.toLowerCase().includes(searchTerm.toLowerCase()))
+    .map(template => ({
+      ...template,
+      items: template.items.filter(item => item.displayName.toLowerCase().includes(searchTerm.toLowerCase()))
+    }))
+}

libs/remix-ui/template-explorer-modal/src/components/template-explorer-body.tsx

@@ -1,21 +1,49 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import { TopCard } from './topCard'
 import { TopCardProps } from '../../types/template-explorer-types'
 import { TemplateExplorer } from './template-explorer'
 import { TopCards } from './topCards'
+import { TemplateExplorerContext } from '../../context/template-explorer-context'
 
 export interface TemplateExplorerBodyProps {
-  topCards: TopCardProps[]
   plugin: any
 }
 
-export function TemplateExplorerBody({ topCards, plugin }: TemplateExplorerBodyProps) {
+export function TemplateExplorerBody({ plugin }: TemplateExplorerBodyProps) {
+  const { selectedTag, allTags, handleTagClick, clearFilter } = useContext(TemplateExplorerContext)
+
+  const filterTheseTags = tag => tag !== 'Circom' && tag !== 'All' && tag !== 'Noir' && tag !== 'AI'
   return (
     <section>
       <TopCards />
       <div className="body overflow-y-hidden">
         <label className="text-dark fs-5">Workspace Templates</label>
-        <TemplateExplorer plugin={plugin} />
+        {/* Tag Filter Row */}
+        <div className="">
+          <div className="d-flex flex-wrap align-items-center gap-2">
+
+            {allTags?.filter(filterTheseTags)?.reverse()?.map((tag: any) => (
+              <span
+                key={tag as any}
+                className={`badge rounded-pill p-2 fw-light ${selectedTag === tag ? 'badge rounded-pill text-info p-2 fw-light' : 'badge rounded-pill text-bg-light p-2 fw-light'}`}
+                onClick={() => handleTagClick(tag as any)}
+              >
+                {tag as any}
+              </span>
+            ))}
+            {selectedTag && (
+              <small>
+                <span
+                  className="p-0 ms-2 text-warning fw-light"
+                  onClick={clearFilter}
+                >
+                Clear filter
+                </span>
+              </small>
+            )}
+          </div>
+        </div>
+        <TemplateExplorer />
       </div>
     </section>
   )