Merge pull request #851 from Lemoncode/feature/#849-hide-open-save-toolbar-vscode

Feature/#849 hide open and save buttons on vscode

Author: manudous

apps/web/src/pods/toolbar/toolbar.pod.tsx

@@ -1,46 +1,54 @@
-import { DeleteButton } from './components/delete-button';
+import { isVSCodeEnv } from '#common/utils/env.utils.ts';
+import { useInteractionModeContext } from '#core/providers';
 import { CopyButton } from './components/copy-paste-button';
+import { DeleteButton } from './components/delete-button';
 import {
-  ZoomInButton,
-  ZoomOutButton,
+  AboutButton,
   ExportButton,
   NewButton,
   OpenButton,
+  RedoButton,
   SaveButton,
   UndoButton,
-  RedoButton,
-  AboutButton,
+  ZoomInButton,
+  ZoomOutButton,
 } from './components/index';
-import classes from './toolbar.pod.module.css';
 import { SettingsButton } from './components/settings-button';
-import { useInteractionModeContext } from '#core/providers';
+import classes from './toolbar.pod.module.css';
 
 export const ToolbarPod: React.FC = () => {
   const { interactionMode } = useInteractionModeContext();
   const isEditMode = interactionMode === 'edit';
+  const isVSCode = isVSCodeEnv();
   return (
     <header className={classes.container}>
-      <ul className={classes.buttonGroup}>
-        {isEditMode && (
-          <li>
-            <NewButton />
-          </li>
-        )}
-        <li>
-          <OpenButton />
-        </li>
-        {isEditMode && (
-          <>
+      {(isEditMode || !isVSCode) && (
+        <ul className={classes.buttonGroup}>
+          {isEditMode && (
+            <li>
+              <NewButton />
+            </li>
+          )}
+
+          {!isVSCode && (
+            <li>
+              <OpenButton />
+            </li>
+          )}
+
+          {isEditMode && !isVSCode && (
             <li>
               <SaveButton />
             </li>
+          )}
 
+          {isEditMode && (
             <li>
               <ExportButton />
             </li>
-          </>
-        )}
-      </ul>
+          )}
+        </ul>
+      )}
       {isEditMode && (
         <ul className={classes.buttonGroup}>
           <li>