add description

apps/remix-ide/src/app/plugins/templates-selection/templates-selection-plugin.tsx

@@ -162,26 +162,30 @@ export class TemplatesSelectionPlugin extends ViewPlugin {
                   plugin={this}
                   title={item.displayName}
                   hideTitle={true}
-                  searchKeywords={[item.displayName, template.name]}
+                  searchKeywords={[JSON.stringify(item), template.name]}
                   tagList={item.tagList}
                   classList='TSCellStyle'
                 >
                   <div className='d-flex justify-content-between h-100 flex-column'>
                     <div className='d-flex flex-column'>
-                      <CustomTooltip
+                      {false && <CustomTooltip
                         placement="auto"
                         tooltipId={`overlay-tooltip-new${item.displayName}`}
                         tooltipText={item.displayName}
                       >
                         <span className='text-truncate overflow-hidden whitespace-nowrap'>{item.displayName}</span>
-                      </CustomTooltip>
-                      <div className='d-flex flex-wrap'>
+                      </CustomTooltip>}
+                      <div className=''>
+                        {(item.displayName && !item.description) && <span className=''>{item.displayName}</span>}
+                        {item.description && <span className=''>{item.description}</span>}
+                        <div>
                           {(item.opts && item.opts.upgradeable && item.opts.upgradeable === 'uups') && <span className='badgeForCell text-dark'>Upgradeable-UUPS</span>}
                           {(item.opts && item.opts.mintable) && <span className='badgeForCell text-dark'>mintable</span>}
                           {(item.opts && item.opts.burnable) && <span className='badgeForCell text-dark'>burnable</span>}
                           {(item.opts && item.opts.pausable) && <span className='badgeForCell text-dark'>pausable</span>}
                         </div>                   
                       </div>
+                    </div>
                     <div className='align-items-center justify-content-between w-100 d-flex pt-2 flex-row'>
                       {(!template.IsArtefact || !item.isArtefact) && <CustomTooltip
                         placement="auto"
@@ -193,7 +197,7 @@ export class TemplatesSelectionPlugin extends ViewPlugin {
                           onClick={async () => createWorkspace(item)}
                           className="btn btn-sm mr-2 border border-primary"
                         >
-                          Create
+                          New
                         </span>
                       </CustomTooltip>}
                       <CustomTooltip

apps/remix-ide/src/app/plugins/templates-selection/templates.ts

@@ -1,10 +1,11 @@
+
 export const templates = (intl) => {
   return [
     {
       name: "Generic",
       items: [
-        { value: "remixDefault", tagList: ["Solidity"], displayName: intl.formatMessage({ id: 'filePanel.basic' }) },
-        { value: "blank", displayName: intl.formatMessage({ id: 'filePanel.blank' }), IsArtefact: true }
+        { value: "remixDefault", tagList: ["Solidity"], displayName: intl.formatMessage({ id: 'filePanel.basic' }), description: 'A default project' },
+        { value: "blank", displayName: intl.formatMessage({ id: 'filePanel.blank' }), IsArtefact: true, description: 'A blank project' }
       ]
     },
     {
@@ -13,17 +14,20 @@ export const templates = (intl) => {
         {
           value: "ozerc20",
           displayName: "ERC20",
-          tagList: ["ERC20", "Solidity"]
+          tagList: ["ERC20", "Solidity"],
+          description: 'A simple ERC20 project'
         },
         {
           value: "ozerc721",
           displayName: "ERC721 (NFT)",
-          tagList: ["ERC721", "Solidity"]
+          tagList: ["ERC721", "Solidity"],
+          description: 'A simple ERC721 (aka NFT) project'
         },
         {
           value: "ozerc1155",
           tagList: ["Solidity"],
-          displayName: "ERC1155"
+          displayName: "ERC1155",
+          description: 'A simple ERC1155 (multi token) project'
         },
         {
           value: "ozerc20",
@@ -235,56 +239,95 @@ export const templates = (intl) => {
     {
       name: "OxProject",
       items: [
-        { value: "zeroxErc20", displayName: "ERC20", tagList: ["ERC20", "Solidity"]}
+        { value: "zeroxErc20", displayName: "ERC20", tagList: ["ERC20", "Solidity"], description: 'ERC20 by 0xProject'}
       ]
     },
     {
       name: "Gnosis Safe",
       items: [
-        { value: "gnosisSafeMultisig", tagList: ["Solidity"], displayName: intl.formatMessage({ id: 'filePanel.multiSigWallet' }) }
+        { value: "gnosisSafeMultisig", tagList: ["Solidity"], displayName: intl.formatMessage({ id: 'filePanel.multiSigWallet' }), description: 'Deploy or Customize the Gnosis Safe.' }
       ]
     },
     {
       name: "Circom ZKP",
       items: [
-        { value: "semaphore", tagList: ["ZKP"], displayName: intl.formatMessage({ id: 'filePanel.semaphore' }) },
-        { value: "hashchecker", tagList: ["ZKP"], displayName: intl.formatMessage({ id: 'filePanel.hashchecker' }) },
-        { value: "rln", tagList: ["ZKP"], displayName: intl.formatMessage({ id: 'filePanel.rln' }) }
+        { value: "semaphore", tagList: ["ZKP"], displayName: intl.formatMessage({ id: 'filePanel.semaphore' }), description: 'Run a ZK Semaphore circom circuit.' },
+        { value: "hashchecker", tagList: ["ZKP"], displayName: intl.formatMessage({ id: 'filePanel.hashchecker' }), description: 'Run a ZK Hash checker circom circuit.' },
+        { value: "rln", tagList: ["ZKP"], displayName: intl.formatMessage({ id: 'filePanel.rln' }), description: 'Run a Rate Limiting Nullifier circom circuit.' }
       ]
     },
     {
       name: "Generic ZKP",
       items: [
-        { value: "sindriScripts", tagList: ["ZKP"], displayName: intl.formatMessage({ id: 'filePanel.addscriptsindri' }) },
+        { 
+          value: "sindriScripts",
+          tagList: ["ZKP"],
+          displayName: intl.formatMessage({ id: 'filePanel.addscriptsindri' }),
+          description: 'Use the Sindri API to compile and generate proof.'
+        },
       ],
     },
     {
       name: "Uniswap V4",
       items: [
-        { value: "uniswapV4Template", displayName: intl.formatMessage({ id: 'filePanel.uniswapV4Template' }) },
-        { value: "breakthroughLabsUniswapv4Hooks", displayName: intl.formatMessage({ id: 'filePanel.breakthroughLabsUniswapv4Hooks' }) },
-        { value: "uniswapV4HookBookMultiSigSwapHook", displayName: intl.formatMessage({ id: 'filePanel.uniswapV4HookBookMultiSigSwapHook' }) }
+        { value: "uniswapV4Template",
+          displayName: intl.formatMessage({ id: 'filePanel.uniswapV4Template' }),
+          description: 'Compile and Deploy an Uniswap hook'
+        },
+        { 
+          value: "breakthroughLabsUniswapv4Hooks",
+          displayName: intl.formatMessage({ id: 'filePanel.breakthroughLabsUniswapv4Hooks' }), 
+          description: 'Compile and Deploy an Uniswap hook developed by Breakthrough Labs'
+        },
+        { 
+          value: "uniswapV4HookBookMultiSigSwapHook", 
+          displayName: intl.formatMessage({ id: 'filePanel.uniswapV4HookBookMultiSigSwapHook' }),
+          description: 'Compile and Deploy a MultiSigSwapHook developed by Breakthrough Labs'
+        }
       ]
     },
     {
       name: "Solidity CREATE2",
       items: [
-        { value: "contractCreate2Factory", tagList: ["Solidity"], displayName: intl.formatMessage({ id: 'filePanel.addcreate2solidityfactory' }) },
-        { value: "contractDeployerScripts", displayName: intl.formatMessage({ id: 'filePanel.addscriptdeployer' }) }
+        { 
+          value: "contractCreate2Factory",
+          tagList: ["Solidity"], 
+          displayName: intl.formatMessage({ id: 'filePanel.addcreate2solidityfactory' }),
+          description: 'Factory for deploying a Contract in Solidity using the CREATE2 opcode.'
+        },
+        { 
+          value: "contractDeployerScripts",
+          displayName: intl.formatMessage({ id: 'filePanel.addscriptdeployer' }),
+          description: 'Script for deploying a Contract using the CREATE2 opcode.'  
+        }
       ]
     },
     {
       name: "Contract Verification",
       items: [
-        { value: "etherscanScripts", displayName: intl.formatMessage({ id: 'filePanel.addscriptetherscan' }) },
+        { 
+          value: "etherscanScripts", 
+          displayName: intl.formatMessage({ id: 'filePanel.addscriptetherscan' }),
+          description: 'Script for verifying a Contract in Etherscan.' 
+        },
       ],
     },
     {
       name: 'Github Actions',
       items: [
-        { value: "runJsTestAction", displayName: intl.formatMessage({ id: 'filePanel.tssoltestghaction' }) },
-        { value: "runSolidityUnittestingAction", displayName: intl.formatMessage({ id: 'filePanel.solghaction' }) },
-        { value: "runSlitherAction", displayName: intl.formatMessage({ id: 'filePanel.slitherghaction' }) }
+        { value: "runJsTestAction",
+          displayName: intl.formatMessage({ id: 'filePanel.tssoltestghaction' }),
+          description: 'a Mocha Chai Test Workflow in a GitHub CI.'
+        },
+        { value: "runSolidityUnittestingAction",
+          displayName: intl.formatMessage({ id: 'filePanel.solghaction' }),
+          description: 'Run a Solidity Unittest Workflow in a GitHub CI.' 
+        },
+        { 
+          value: "runSlitherAction",
+          displayName: intl.formatMessage({ id: 'filePanel.slitherghaction' }),
+          description: 'Run a Slither Security Analysis in a GitHub CI.'
+        }
       ],
       IsArtefact: true
     }