Move icons to old position and pass initial state to parent.

libs/remix-ui/panel/src/lib/plugins/panel-header.tsx

@@ -44,19 +44,6 @@ const RemixUIPanelHeader = (props: RemixPanelProps) => {
           {plugin?.profile?.name && <FormattedMessage id={`${plugin.profile.name}.displayName`} defaultMessage={plugin?.profile?.displayName || plugin?.profile?.name} />}
         </h6>
         <div className="d-flex flex-row">
-          {
-            plugin && plugin.profile.name !== 'filePanel' && (
-              <RenderIfNot condition={plugin.profile.name === 'filePanel'}>
-                <RenderIf condition={plugin.pinned}>
-                  <div className='d-flex' data-id="movePluginToLeft" onClick={unPinPlugin}>
-                    <CustomTooltip placement="auto-end" tooltipId="unPinnedMsg" tooltipClasses="text-nowrap" tooltipText={<FormattedMessage id="panel.unPinnedMsg" />}>
-                      <i aria-hidden="true" className="mt-1 px-2 fas fa-solid fa-square-left"></i>
-                    </CustomTooltip>
-                  </div>
-                </RenderIf>
-              </RenderIfNot>
-            )
-          }
           <div className="d-flex flex-row">
             {plugin?.profile?.maintainedBy?.toLowerCase() === 'remix' ? (
               <CustomTooltip placement="auto-end" tooltipId="maintainedByTooltip" tooltipClasses="text-nowrap" tooltipText={<FormattedMessage id="panel.maintainedByRemix" />}>
@@ -75,6 +62,14 @@ const RemixUIPanelHeader = (props: RemixPanelProps) => {
           {
             plugin && plugin.profile.name !== 'filePanel' && (
               <RenderIfNot condition={plugin.profile.name === 'filePanel'}>
+                <>
+                  <RenderIf condition={plugin.pinned}>
+                    <div className='d-flex' data-id="movePluginToLeft" onClick={unPinPlugin}>
+                      <CustomTooltip placement="auto-end" tooltipId="unPinnedMsg" tooltipClasses="text-nowrap" tooltipText={<FormattedMessage id="panel.unPinnedMsg" />}>
+                        <i aria-hidden="true" className="mt-1 px-2 fas fa-solid fa-square-left"></i>
+                      </CustomTooltip>
+                    </div>
+                  </RenderIf>
                   <RenderIfNot condition={plugin.pinned}>
                     <div className='d-flex' data-id="movePluginToRight" onClick={pinPlugin}>
                       <CustomTooltip placement="auto-end" tooltipId="pinnedMsg" tooltipClasses="text-nowrap" tooltipText={<FormattedMessage id="panel.pinnedMsg" />}>
@@ -82,6 +77,7 @@ const RemixUIPanelHeader = (props: RemixPanelProps) => {
                       </CustomTooltip>
                     </div>
                   </RenderIfNot>
+                </>
               </RenderIfNot>
             )
           }

libs/remix-ui/panel/src/lib/plugins/panel-plugin.tsx

@@ -19,8 +19,11 @@ const RemixUIPanelPlugin = (props: panelPLuginProps, panelRef: any) => {
           let view = props.pluginRecord.view
 
           if (props.initialState) {
+            let hasInitialProps = false
+
             view = React.Children.map((props.pluginRecord.view.props as any).children, child => {
-              if (React.isValidElement(child) && typeof child.type === 'function') {
+              if (React.isValidElement(child) && typeof child.type === 'function' && !hasInitialProps) {
+                hasInitialProps = true
                 // Safe to clone and pass `initialState`
                 return React.cloneElement(child, { ...props, initialState: props.initialState } as any)
               }