wider cells and pins

apps/remix-ide/src/app/plugins/remixGuide.tsx

@@ -1,3 +1,4 @@
+
 import React from 'react'
 import { ViewPlugin } from '@remixproject/engine-web'
 import { PluginViewWrapper } from '@remix-ui/helper'
@@ -88,6 +89,7 @@ export class RemixGuidePlugin extends ViewPlugin {
         logo='/assets/img/YouTubeLogo.webp'
         enableFilter={true}
         showUntagged={true}
+        showPin={true}
         tagList={[
           ['beginner', 'danger'],
           ['advanced', 'warning'],
@@ -117,12 +119,14 @@ export class RemixGuidePlugin extends ViewPlugin {
           <RemixUIGridCell
             plugin={this}
             title="next"
+            pinned={true}
             tagList={['L2', 'plugins']}
           >
             <img src={'/assets/img/soliditySurvey2023.webp'} style={{height: '70px', width: '70px'}} alt=""></img>
           </RemixUIGridCell> <RemixUIGridCell
             plugin={this}
             title="something"
+            pinned={false}
             tagList={['solidity', 'plugins']}
           >
             <img src={'/assets/img/soliditySurvey2023.webp'} style={{height: '70px', width: '70px'}} alt=""></img>

libs/remix-ui/grid-view/src/lib/components/customCheckbox.tsx

@@ -16,7 +16,7 @@ export const CustomCheckbox = (props: CustomCheckboxProps) => {
   if (!textColor || textColor == '') textColor = filterCon.keyValueMap[props.label].color
 
   return (
-    <div className="h-80 mx-1 align-items-center custom-control custom-checkbox" style={{minWidth: '4rem'}}>
+    <div id={textColor + props.label} className="h-80 mx-1 align-items-center custom-control custom-checkbox" style={{minWidth: '4rem'}}>
       <input
         className="custom-control-input"
         id={"GVCheckbox" + props.label}

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

@@ -2,12 +2,14 @@ import React, { createContext, useState, useContext } from 'react';
 
 interface FilterContextType {
   showUntagged: boolean
+  showPin: boolean
   keyValueMap: Record<string, { enabled: boolean; color: string; }>;
   updateValue: (key: string, enabled: boolean, color: string) => void
   addValue: (key: string, enabled: boolean, color: string) => void
 }
 const FiltersContext = createContext<FilterContextType>({
   showUntagged: false,
+  showPin: false,
   keyValueMap: {},
   updateValue: () => {},
   addValue: () => {},

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

@@ -19,3 +19,28 @@
   width: 3rem;
   height: 3rem;
 }
+
+.remixui_grid_cell_pin:focus {
+  outline: none;
+}
+.remixui_grid_cell_pin {
+   width: 1rem;
+  height: 1rem;
+  position: relative;
+  right: 1rem;
+  top: -0.5rem;
+  background: transparent;
+}
+
+.remixui_grid_cell_tags {
+  position: relative;
+  right: 1rem;
+  top: 0.1rem;
+}
+
+.remixui_grid_cell_tag {
+  font-size: x-small;
+  font-weight: bolder;
+  width: 0.4rem;
+  height: 1.2rem;
+}

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

@@ -14,6 +14,8 @@ const _paq = window._paq = window._paq || []
 
 interface RemixUIGridCellProps {
   plugin: any
+  pinned?: boolean
+  pinStateCallback?: any
   logo?: string
   title?: string       
   tagList?: string[] // max 8, others will be ignored
@@ -25,6 +27,7 @@ interface RemixUIGridCellProps {
 export const RemixUIGridCell = (props: RemixUIGridCellProps) => {
   const filterCon = useContext(FiltersContext)
   const [anyEnabled, setAnyEnabled] = useState(false)
+  const [pinned, setPinned] = useState<boolean>(props.pinned)
 
   useEffect(() => {
     if (props.tagList) setAnyEnabled(props.tagList.some((key) => filterCon.keyValueMap[key]?.enabled))
@@ -32,18 +35,30 @@ export const RemixUIGridCell = (props: RemixUIGridCellProps) => {
   }, [filterCon, props.tagList])
 
   return (
-    <div className='mr-2 mt-2'>
+    <div className='mr-2 mt-3'>
       { anyEnabled && <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: '4.4rem', height: '1rem'}}>
+            <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.title && <label className='m-0 p-0 align-items-left'  style={{overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontSize: 'xx-small'}}>{ props.title }</label> }
+              { props.title && <label
+                className='m-0 p-0 align-items-left'
+                style={{overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontSize: 'xx-small'}}
+              >
+                { props.title }
+              </label> }
             </div>
             { props.children }
           </div>
         </div>
-        { props.tagList && <div className='d-flex flex-column align-items-begin' style={{position: 'relative', right: '0.4rem', top: '0.1rem'}}>
+        { filterCon.showPin && <button
+          className={`${pinned ? 'fa-duotone' : 'fa-light'}` + ` fa-map-pin text-info border-0 mb-0 remixui_grid_cell_pin`}
+          onClick={() => {
+            setPinned(!pinned)
+            props.pinStateCallback()
+          }}
+        ></button>}
+        { props.tagList && <div className='d-flex flex-column align-items-begin remixui_grid_cell_tags'>
           { Object.keys(props.tagList).map((key) => (
             filterCon.keyValueMap[props.tagList[key]].enabled && (
               <CustomTooltip
@@ -53,15 +68,15 @@ export const RemixUIGridCell = (props: RemixUIGridCellProps) => {
                 tooltipText={props.tagList[key]}
               >
                 <span key={props.tagList[key]}
-                  className={'bg-' + filterCon.keyValueMap[props.tagList[key]].color}
+                  className={'remixui_grid_cell_tag bg-' + filterCon.keyValueMap[props.tagList[key]].color}
-                  style={{ fontSize: 'x-small', fontWeight: 'bolder' , width: '0.4rem', height: '1.2rem'}}>
+                >
                 </span>
               </CustomTooltip>
             )
           )) }
         </div> }
         { !props.tagList &&  <span
-          style={{ fontSize: 'x-small', fontWeight: 'bolder' , width: '0.4rem', height: '1.2rem'}}>
+          className={'remixui_grid_cell_tags'}>
         </span> }
       </div> }
     </div>

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

@@ -1,7 +1,6 @@
 import React, {useState, useEffect, useContext, useRef, ReactNode} from 'react' // eslint-disable-line
 
 import './remix-ui-grid-section.css'
-import {ThemeContext, themes} from './themeContext'
 
 declare global {
   interface Window {
@@ -20,37 +19,6 @@ interface RemixUIGridSectionProps {
 }
 
 export const RemixUIGridSection = (props: RemixUIGridSectionProps) => {
-  const {plugin} = props.plugin
-  const searchInputRef = useRef(null)
-
-  console.log('props.hScrollable ', props.hScrollable)
-  const [state, setState] = useState<{
-    themeQuality: {filter: string; name: string}
-  }>({
-    themeQuality: themes.light
-  })
-
-  useEffect(() => {
-    plugin?.call('theme', 'currentTheme').then((theme) => {
-      // update theme quality. To be used for for images
-      setState((prevState) => {
-        return {
-          ...prevState,
-          themeQuality: theme.quality === 'dark' ? themes.dark : themes.light
-        }
-      })
-    })
-    plugin?.on('theme', 'themeChanged', (theme) => {
-      // update theme quality. To be used for for images
-      setState((prevState) => {
-        return {
-          ...prevState,
-          themeQuality: theme.quality === 'dark' ? themes.dark : themes.light
-        }
-      })
-    })
-  }, [plugin])
-
   return (
     <div
       className={`d-flex px-4 py-2 flex-column w-100 remixui_grid_section_container ${props.classList}`}

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

@@ -19,6 +19,7 @@ interface RemixUIGridViewProps {
   enableFilter?: boolean
   tagList?: [string, string][] // max 8, others will be ignored
   showUntagged?: boolean
+  showPin?: boolean
   classList?: string
   styleList?: any
   description?: string
@@ -29,6 +30,7 @@ export const RemixUIGridView = (props: RemixUIGridViewProps) => {
   const [keyValueMap, setKeyValueMap] = useState<Record<string, { enabled: boolean; color: string; }>>({});
 
   const showUntagged = props.showUntagged || false
+  const showPin = props.showPin || false
   const updateValue = (key: string, enabled: boolean, color?: string) => {
     if (!color || color === '') color = setKeyValueMap[key].color
     setKeyValueMap((prevMap) => ({
@@ -96,7 +98,7 @@ export const RemixUIGridView = (props: RemixUIGridViewProps) => {
   }, [plugin])
 
   return (
-    <FiltersContext.Provider value={{ showUntagged, keyValueMap, updateValue, addValue }}>
+    <FiltersContext.Provider value={{ showUntagged, showPin, keyValueMap, updateValue, addValue }}>
       <div className={"d-flex flex-column bg-dark w-100 h-100 remixui_grid_view_container " + props.classList || ''} data-id="remixUIGV">
         <ThemeContext.Provider value={state.themeQuality}>
           <div className="d-flex flex-column w-100 remixui_grid_view">