From 869b392818ce62a8d9f0bad533fd2cb4f98d0818 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Wed, 1 May 2024 23:51:51 +0100
Subject: [PATCH] change text for translation. working on file section

---
 .../src/app/tabs/locales/en/home.json         |   2 +-
 .../src/lib/components/homeTabFile.tsx        | 106 +++++++++---------
 .../src/lib/components/homeTabGetStarted.tsx  |  40 ++++++-
 3 files changed, 90 insertions(+), 58 deletions(-)

diff --git a/apps/remix-ide/src/app/tabs/locales/en/home.json b/apps/remix-ide/src/app/tabs/locales/en/home.json
index 6bb00dfdc9..fb593c9aac 100644
--- a/apps/remix-ide/src/app/tabs/locales/en/home.json
+++ b/apps/remix-ide/src/app/tabs/locales/en/home.json
@@ -61,7 +61,7 @@
   "home.startCodingPlayground": "Open a playground for prototyping and simple learning",
   "home.openFile": "Open File",
   "home.openFileTooltip": "Open a File from your File System",
-  "home.accessFileSystem": "Access File System",
+  "home.accessFileSystem": "Connect to local filesystem",
   "home.loadFrom": "Load from",
   "home.resources": "Resources",
   "home.connectToLocalhost": "Connect to Localhost",
diff --git a/libs/remix-ui/home-tab/src/lib/components/homeTabFile.tsx b/libs/remix-ui/home-tab/src/lib/components/homeTabFile.tsx
index ef07b97aaa..bae39600de 100644
--- a/libs/remix-ui/home-tab/src/lib/components/homeTabFile.tsx
+++ b/libs/remix-ui/home-tab/src/lib/components/homeTabFile.tsx
@@ -253,6 +253,28 @@ contract HelloWorld {
       </ModalDialog>
       <Toaster message={state.toasterMsg} />
       <div className="justify-content-start mt-1 p-2 d-flex flex-column" id="hTFileSection">
+        {(state.recentWorkspaces[0] || state.recentWorkspaces[1] || state.recentWorkspaces[2]) && (
+          <div className="d-flex flex-column mb-3">
+            <label style={{ fontSize: '0.8rem' }} className="mt-3">
+                Recent workspaces
+            </label>
+            {state.recentWorkspaces[0] && state.recentWorkspaces[0] !== '' && (
+              <a className="cursor-pointer mb-1 ml-2" href="#" onClick={(e) => handleSwichToRecentWorkspace(e, state.recentWorkspaces[0])}>
+                {state.recentWorkspaces[0]}
+              </a>
+            )}
+            {state.recentWorkspaces[1] && state.recentWorkspaces[1] !== '' && (
+              <a className="cursor-pointer mb-1 ml-2" href="#" onClick={(e) => handleSwichToRecentWorkspace(e, state.recentWorkspaces[1])}>
+                {state.recentWorkspaces[1]}
+              </a>
+            )}
+            {state.recentWorkspaces[2] && state.recentWorkspaces[2] !== '' && (
+              <a className="cursor-pointer ml-2" href="#" onClick={(e) => handleSwichToRecentWorkspace(e, state.recentWorkspaces[2])}>
+                {state.recentWorkspaces[2]}
+              </a>
+            )}
+          </div>
+        )}
         <label style={{ fontSize: '1.2rem' }}>
           <FormattedMessage id="home.files" />
         </label>
@@ -293,63 +315,32 @@ contract HelloWorld {
                 />
               </span>
             </CustomTooltip>
-            <CustomTooltip
-              placement={'top'}
-              tooltipId="overlay-tooltip"
-              tooltipClasses="text-nowrap"
-              tooltipText={<FormattedMessage id="home.connectToLocalhost" />}
-              tooltipTextClasses="border bg-light text-dark p-1 pr-3"
+            <button
+              className="btn text-nowrap p-2 mr-2 border my-1"
+              data-id="landingPageImportFromGitHubButton"
+              onClick={() =>
+                showFullMessage('GitHub', 'github URL', [
+                  'https://github.com/0xcert/ethereum-erc721/src/contracts/tokens/nf-token-metadata.sol',
+                  'https://github.com/OpenZeppelin/openzeppelin-solidity/blob/67bca857eedf99bf44a4b6a0fc5b5ed553135316/contracts/access/Roles.sol',
+                ])
+              }
             >
-              <button className="btn text-nowrap p-2 border my-1" style={{ width: 'fit-content' }} onClick={() => connectToLocalhost()}>
-                <FormattedMessage id="home.accessFileSystem" />
-              </button>
-            </CustomTooltip>
+            GitHub
+            </button>
+            <button className="btn text-nowrap p-2 mr-2 border my-1" onClick={() => showFullMessage('Ipfs', 'ipfs hash', ['ipfs://QmQQfBMkpDgmxKzYaoAtqfaybzfgGm9b2LWYyT56Chv6xH'], 'ipfs://')}>
+            IPFS
+            </button>
           </div>
-          {(state.recentWorkspaces[0] || state.recentWorkspaces[1] || state.recentWorkspaces[2]) && (
-            <div className="d-flex flex-column">
-              <label style={{ fontSize: '0.8rem' }} className="mt-3">
-                Recent workspaces
-              </label>
-              {state.recentWorkspaces[0] && state.recentWorkspaces[0] !== '' && (
-                <a className="cursor-pointer mb-1 ml-2" href="#" onClick={(e) => handleSwichToRecentWorkspace(e, state.recentWorkspaces[0])}>
-                  {state.recentWorkspaces[0]}
-                </a>
-              )}
-              {state.recentWorkspaces[1] && state.recentWorkspaces[1] !== '' && (
-                <a className="cursor-pointer mb-1 ml-2" href="#" onClick={(e) => handleSwichToRecentWorkspace(e, state.recentWorkspaces[1])}>
-                  {state.recentWorkspaces[1]}
-                </a>
-              )}
-              {state.recentWorkspaces[2] && state.recentWorkspaces[2] !== '' && (
-                <a className="cursor-pointer ml-2" href="#" onClick={(e) => handleSwichToRecentWorkspace(e, state.recentWorkspaces[2])}>
-                  {state.recentWorkspaces[2]}
-                </a>
-              )}
-            </div>
-          )}
+
         </div>
-        <label style={{ fontSize: '0.8rem' }} className="pt-3">
+        {/* <label style={{ fontSize: '0.8rem' }} className="pt-3">
           <FormattedMessage id="home.loadFrom" />
-        </label>
-        <div className="d-flex">
-          <button
-            className="btn p-2 border mr-2"
-            data-id="landingPageImportFromGitHubButton"
-            onClick={() =>
-              showFullMessage('GitHub', 'github URL', [
-                'https://github.com/0xcert/ethereum-erc721/src/contracts/tokens/nf-token-metadata.sol',
-                'https://github.com/OpenZeppelin/openzeppelin-solidity/blob/67bca857eedf99bf44a4b6a0fc5b5ed553135316/contracts/access/Roles.sol',
-              ])
-            }
-          >
-            GitHub
-          </button>
-          <button className="btn p-2 border mr-2" data-id="landingPageImportFromGistButton" onClick={() => importFromGist()}>
+        </label> */}
+        <div className="d-flex mt-2">
+          {/* <button className="btn p-2 border mr-2" data-id="landingPageImportFromGistButton" onClick={() => importFromGist()}>
             Gist
           </button>
-          <button className="btn p-2 border mr-2" onClick={() => showFullMessage('Ipfs', 'ipfs hash', ['ipfs://QmQQfBMkpDgmxKzYaoAtqfaybzfgGm9b2LWYyT56Chv6xH'], 'ipfs://')}>
-            IPFS
-          </button>
+
           <button
             className="btn p-2 border"
             onClick={() =>
@@ -357,7 +348,18 @@ contract HelloWorld {
             }
           >
             HTTPS
-          </button>
+          </button> */}
+          <CustomTooltip
+            placement={'top'}
+            tooltipId="overlay-tooltip"
+            tooltipClasses="text-nowrap"
+            tooltipText={<FormattedMessage id="home.connectToLocalhost" />}
+            tooltipTextClasses="border bg-light text-dark p-1 pr-3"
+          >
+            <button className="btn btn-block w-100 text-nowrap p-2 border my-1" style={{ width: 'fit-content' }} onClick={() => connectToLocalhost()}>
+              <FormattedMessage id="home.accessFileSystem" />
+            </button>
+          </CustomTooltip>
         </div>
       </div>
     </>
diff --git a/libs/remix-ui/home-tab/src/lib/components/homeTabGetStarted.tsx b/libs/remix-ui/home-tab/src/lib/components/homeTabGetStarted.tsx
index 58e71c8f52..efc2716222 100644
--- a/libs/remix-ui/home-tab/src/lib/components/homeTabGetStarted.tsx
+++ b/libs/remix-ui/home-tab/src/lib/components/homeTabGetStarted.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import React, { useEffect, useRef, useContext } from 'react'
+import React, { useEffect, useRef, useContext, SyntheticEvent, useState } from 'react'
 import { useIntl, FormattedMessage } from 'react-intl'
 import { TEMPLATE_NAMES,TEMPLATE_METADATA } from '@remix-ui/workspace'
 import { ThemeContext } from '../themeContext'
@@ -144,6 +144,33 @@ function HomeTabGetStarted({ plugin }: HomeTabGetStartedProps) {
     _paq.push(['trackEvent', 'hometab', 'homeGetStarted', templateName])
   }
 
+  const [activeButtonClass, setActiveButtonClass] = useState('')
+  const [activeButton, setActiveButton] = useState('homeTabGetStartedPlayground')
+
+  useEffect(() => {
+    const checkWorkspaceName = async () => {
+      const currentWorkspace = await plugin.call('filePanel', 'getCurrentWorkspace')
+      const getWorkspaces = await plugin.call('filePanel', 'getWorkspaces')
+      // setActiveButton(currentWorkspace.name)
+      console.log('activeButton', { activeButton, currentWorkspace, getWorkspaces })
+    }
+    checkWorkspaceName()
+  }, [])
+  const manipulateClasses = async (e: SyntheticEvent) => {
+    const target = e.target as HTMLButtonElement
+    // if btn-primary is active, remove it based on the following conditions:
+    // 1. Most importantly, if the  activeButton is the same as the data-id of any of the buttons
+    // then that button should be active
+    // 2. If the activeButton is not the same as the data-id of any of the buttons
+    // then the first button should be active
+    const currentWorkspace = await plugin.call('filePanel', 'getCurrentWorkspace')
+    const allworkspaces = await plugin.call('filePanel', 'getWorkspaces')
+    console.log('currentWorkspace', { currentWorkspace, allworkspaces })
+    if (target.classList.contains('btn-primary') && target.dataset.id === activeButton) {
+
+    }
+  }
+
   return (
     <div className="pl-2" id="hTGetStartedSection">
       <label className="pt-3" style={{ fontSize: '1.2rem' }}>
@@ -154,11 +181,13 @@ function HomeTabGetStarted({ plugin }: HomeTabGetStartedProps) {
           <div className="pt-2">
             <div className="d-flex flex-row align-items-center mb-3 flex-nowrap">
               {workspaceTemplates.slice(0, 3).map((template, index) => (
-                <CustomTooltip tooltipText={template.description} tooltipId={template.gsID} tooltipClasses="text-nowrap" tooltipTextClasses="border bg-light text-dark p-1 pr-3" placement="top-start">
+                <CustomTooltip tooltipText={template.description} tooltipId={template.gsID} tooltipClasses="text-nowrap" tooltipTextClasses="border bg-light text-dark p-1 pr-3" placement="top-start" key={`${template.gsID}-${template.workspaceTitle}-${index}`}>
                   <button key={index} className={index === 0 ? "btn btn-primary border p-2 text-nowrap mr-3" : index === workspaceTemplates.length - 1 ? "btn border p-2 text-nowrap mr-2" : "btn border p-2 text-nowrap mr-3"}
-                    onClick={() => {
-                      createWorkspace(template.templateName)
+                    onClick={(e) => {
+                      manipulateClasses(e)
+                      // createWorkspace(template.templateName)
                     }}
+                    data-id={`homeTabGetStarted${template.workspaceTitle}`}
                   >
                     {template.workspaceTitle}
                   </button>
@@ -167,13 +196,14 @@ function HomeTabGetStarted({ plugin }: HomeTabGetStartedProps) {
             </div>
             <div className="d-flex flex-row align-items-center mb-3 flex-nowrap">
               {workspaceTemplates.slice(3, workspaceTemplates.length).map((template, index) => (
-                <CustomTooltip tooltipText={template.description} tooltipId={template.gsID} tooltipClasses="text-nowrap" tooltipTextClasses="border bg-light text-dark p-1 pr-3" placement="bottom-start">
+                <CustomTooltip tooltipText={template.description} tooltipId={template.gsID} tooltipClasses="text-nowrap" tooltipTextClasses="border bg-light text-dark p-1 pr-3" placement="bottom-start" key={`${template.gsID}-${template.workspaceTitle}-${index}`}>
                   <button
                     key={index}
                     className={"btn border p-2 text-nowrap mr-3"}
                     onClick={() => {
                       createWorkspace(template.templateName)
                     }}
+                    data-id={`homeTabGetStarted${template.workspaceTitle}`}
                   >
                     {template.workspaceTitle}
                   </button>