🚧 Show a message in Project inspecto panel when there is no project open

languages/english.json

@@ -232,6 +232,9 @@
 		"sidepanels": {
 			"sourceTracker": {
 				"noRepositoryOpen": "No repository open."
+			},
+			"projectInspector": {
+				"noProjectOpen": "No project open."
 			}
 		}
 	}

src/interface/components/container_panel.ts

@@ -0,0 +1,27 @@
+import { element } from '@mkenzo_8/puffin'
+import { css as style } from '@emotion/css'
+
+const panelStyled = style`
+	&[empty=true]{
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 100%;
+		& > p {
+			text-align: center;
+			font-size: 13px;
+			user-select: none;
+		}
+	}
+	&[empty=false]{
+		& > p{
+			display: none;
+		}
+	}
+`
+
+export default function ContainerPanel() {
+	return element`
+		<div class="${panelStyled}"/>
+	`
+}

src/interface/defaults/initial.ts

@@ -18,7 +18,7 @@ import ExperimentalFeatureDialog from './dialogs/feature_experimental'
 import './environment.inspectors/npm'
 import './project.services/npm'
 import './side.panels/files_explorer'
-import './side.panels/env.explorer'
+import './side.panels/project_inspector'
 import './side.panels/source_tracker'
 import './shortcuts'
 import './status.bar.items/tab.size'

src/interface/defaults/side.panels/env.explorer.js → src/interface/defaults/side.panels/project_inspector.ts

@@ -13,6 +13,9 @@ import { createProcess } from '../terminal_shells/local'
 const {
 	childProcess: { exec },
 } = Core
+import { ExplorerItemOptions } from 'Types/explorer'
+import { Text } from '@mkenzo_8/puffin-drac'
+import ContainerPanel from '../../components/container_panel'
 
 /*
  * Only display it in Desktop version
@@ -21,13 +24,27 @@ if (!RunningConfig.data.isBrowser && StaticConfig.data.appEnableProjectInspector
 	RunningConfig.on('appLoaded', () => {
 		const { panelNode } = new SidePanel({
 			icon: EnvOutlined,
-			panel: () => element`<div/>`,
+			panel: () => {
+				return element({
+					components: {
+						Text,
+						ContainerPanel,
+					},
+				})`
+				<ContainerPanel empty="true">
+					<Text lang-string="sidepanels.projectInspector.noProjectOpen"></Text>
+				</ContainerPanel>
+				`
+			},
 			hint: 'Project inspector',
 		})
 		RunningConfig.on('addFolderToRunningWorkspace', async ({ folderPath }) => {
+			//Hide "No project open" message
+			panelNode.children[0].setAttribute('empty', 'false')
+
 			const { env, prefix, info } = await detectEnv(folderPath)
 			if (env && info) {
-				const envExplorer = new Explorer({
+				const envExplorer = Explorer({
 					items: [
 						{
 							label: basename(folderPath),
@@ -53,7 +70,7 @@ if (!RunningConfig.data.isBrowser && StaticConfig.data.appEnableProjectInspector
 function getKeysToItems(keys, folder, fromKey, prefix = '') {
 	return Object.keys(keys).map(key => {
 		const keyValue = keys[key]
-		const item = {
+		const item: ExplorerItemOptions = {
 			label: key,
 		}
 		if (fromKey == 'scripts') {

src/interface/defaults/side.panels/source_tracker.ts

@@ -13,25 +13,7 @@ import InputDialog from '../../utils/dialogs/dialog_input'
 import Notification from 'Constructors/notification'
 import * as path from 'path'
 import { css as style } from '@emotion/css'
-
-const panelStyled = style`
-	&[empty=true]{
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		height: 100%;
-		& > p {
-			text-align: center;
-			font-size: 13px;
-			user-select: none;
-		}
-	}
-	&[empty=false]{
-		& > p{
-			display: none;
-		}
-	}
-`
+import ContainerPanel from '../../components/container_panel'
 
 /*
  * Return total count of changes, if is bigger than 25, return "25+"
@@ -158,13 +140,13 @@ if (!RunningConfig.data.isBrowser && StaticConfig.data.experimentalSourceTracker
 			 * When a folder is loaded
 			 */
 			RunningConfig.on('addFolderToRunningWorkspace', async ({ folderPath }) => {
-				this.setAttribute('empty', 'false')
-
 				/*
 				 * When that folder's repository (if exists) gets loaded
 				 */
 				const loadedGitRepoListener = RunningConfig.on('loadedGitRepo', async ({ parentFolder, gitChanges, anyChanges, explorerProvider }) => {
 					if (folderPath !== parentFolder) return
+					//Hide "No repository open" message
+					this.setAttribute('empty', 'false')
 					//Load the current commits
 					let { all: allCommits } = await explorerProvider.getGitAllCommits(parentFolder)
 
@@ -421,11 +403,12 @@ if (!RunningConfig.data.isBrowser && StaticConfig.data.experimentalSourceTracker
 				return element({
 					components: {
 						Text,
+						ContainerPanel,
 					},
 				})`
-				<div mounted="${mounted}" class="${panelStyled}" empty="true">
+				<ContainerPanel mounted="${mounted}" empty="true">
 					<Text lang-string="sidepanels.sourceTracker.noRepositoryOpen"></Text>
-				</div>
+				</ContainerPanel>
 				`
 			},
 			hint: 'Source Tracker',

src/interface/utils/detect_env.ts

@@ -5,7 +5,13 @@ import RunningConfig from 'RunningConfig'
  * This function is used to display the first-matched environment filter in the Environments Panel when a folder is created.
  */
 
-function detectEnv(folder) {
+interface EnvResult {
+	env: string
+	prefix: string
+	info: any
+}
+
+function detectEnv(folder): Promise<EnvResult> {
 	return new Promise(resolve => {
 		const registeredEnvs = RunningConfig.data.envs
 		for (const { name, prefix, filter } of registeredEnvs) {