adding more info to templates.

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

@@ -10,6 +10,7 @@ import { RemixUIGridSection } from '@remix-ui/remix-ui-grid-section'
 import { RemixUIGridCell } from '@remix-ui/remix-ui-grid-cell'
 import isElectron from 'is-electron'
 import type { TemplateGroup } from '@remix-ui/workspace'
+import './templates-selection-plugin.css'
 import { templates } from './templates'
 
 //@ts-ignore
@@ -160,10 +161,26 @@ export class TemplatesSelectionPlugin extends ViewPlugin {
                 return <RemixUIGridCell
                   plugin={this}
                   title={item.displayName}
+                  hideTitle={true}
                   tagList={item.tagList}
+                  classList='TSCellStyle'
                 >
-                  <div>
-                    {item.displayName}
+                  <div className='d-flex justify-content-between h-100 flex-column'>
+                    <div className='d-flex flex-column'>
+                    <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'>
+                        {(item.opts && item.opts.upgradeable && item.opts.upgradeable === 'uupds') && <span className='badgeForCell badge text-secondary'>Upgradeable-UUPS</span>}
+                        {(item.opts && item.opts.mintable) && <span className='badgeForCell text-secondary'>mintable</span>}
+                        {(item.opts && item.opts.burnable) && <span className='badgeForCell text-secondary'>burnable</span>}
+                        {(item.opts && item.opts.pausable) && <span className='badgeForCell text-secondary'>pausable</span>}
+                      </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"

apps/remix-ide/src/app/providers/environment-explorer.tsx

@@ -107,6 +107,7 @@ export class EnvironmentExplorer extends ViewPlugin {
               plugin={this}
               title={provider.displayName}
               logos={provider.logos}
+              hideTitle={true}
               classList='EECellStyle'
               payload={provider.description}
               pinned={this.pinnedProviders.includes(provider.name)}
@@ -143,6 +144,7 @@ export class EnvironmentExplorer extends ViewPlugin {
               logos={provider.logos}
               classList='EECellStyle'
               payload={provider.description}
+              hideTitle={true}
               pinned={this.pinnedProviders.includes(provider.name)}
               id={provider.name}
               pinStateCallback={async (pinned: boolean) => {
@@ -176,6 +178,7 @@ export class EnvironmentExplorer extends ViewPlugin {
               logos={provider.logos}
               payload={provider.description}
               classList='EECellStyle'
+              hideTitle={true}
               pinned={this.pinnedProviders.includes(provider.name)}
               id={provider.name}
               pinStateCallback={async (pinned: boolean) => {

libs/remix-ui/grid-view/src/lib/remix-ui-grid-cell.css

@@ -41,8 +41,8 @@
 
 .remixui_grid_cell_tags_no_pin {
   position: relative;
-  right: 0rem;
-  top: -6.5rem;
+  right: 0.45rem;
+  top: 1px
 }
 
 .remixui_grid_cell_tag {

libs/remix-ui/grid-view/src/lib/remix-ui-grid-cell.tsx

@@ -18,7 +18,7 @@ interface RemixUIGridCellProps {
   logo?: string
   logos?: string[]
   title: string
-  payload?: string
+  hideTitle?: boolean
   tagList?: string[] // max 8, others will be ignored
   classList?: string
   styleList?: any
@@ -70,8 +70,8 @@ export const RemixUIGridCell = (props: RemixUIGridCellProps) => {
       { anyEnabled && <div className='mr-2 mt-3 d-flex flex-column'>
         <div className='d-flex flex-grid'>
           <div className={"d-flex mx-0 p-2 bg-light border border-secondary remixui_grid_cell_container " + props.classList || ''} data-id={"remixUIGS" + props.title}>
-            <div className="d-flex remixui_grid_cell flex-column">
-              <div className='d-flex flex-row pb-1 align-items-end' style={{ width: '8rem', height: '1rem' }}>
+            <div className="d-flex remixui_grid_cell w-100 flex-column">
+              { !props.hideTitle && <div className='d-flex flex-row pb-1 align-items-end' style={{ width: '8rem', height: '1rem' }}>
                 { props.logo && <img className='remixui_grid_view_logo mr-1' src={props.logo} style={{ width: '1rem', height: '1rem' }}/> }
                 { props.logos && props.logos.map((logo) => <img className='remixui_grid_view_logo mr-1' src={logo} style={{ width: '1rem', height: '1rem' }}/>)}
                 { props.title && <label
@@ -80,7 +80,7 @@ export const RemixUIGridCell = (props: RemixUIGridCellProps) => {
                 >
                   { props.title }
                 </label> }
-              </div>
+              </div> }
               { props.children }
             </div>
           </div>
@@ -111,7 +111,7 @@ export const RemixUIGridCell = (props: RemixUIGridCellProps) => {
             )) }
           </div> }
           { !props.tagList && <span
-            className={'remixui_grid_cell_tags'}>
+            className={'px-1 remixui_grid_cell_tags'}>
           </span> }
         </div>
         { expand && <div>

libs/remix-ui/grid-view/src/lib/remix-ui-grid-section.tsx

@@ -32,7 +32,7 @@ const hasChildCell = (children: ReactNode): boolean => {
     if (found) return
 
     if (isElement(child)) {
-      if (child.props.classList === 'EECellStyle') {
+      if (child.props.classList === 'remixui_grid_cell_container') {
         found = true
         return
       }