fix: small fixes

libs/client-shared/src/lib/components/common.ts

@@ -1,6 +1,6 @@
-import { WithReactChildren } from '@code-gear/client-shared'
+import { WithChildren } from '../../types'
 
-type DisplayProps<T> = WithReactChildren<{ when: T }>
+type DisplayProps<T> = WithChildren<{ when: T }>
 
 export const Display = <T>({ when, children }: DisplayProps<T>) => {
   return when ? children : null

libs/editor/src/app/providers/editor-store/config/editor.store.ts

@@ -10,6 +10,7 @@ import EditorGetters from './editor.getters'
 import EditorServices from './editor.services'
 
 import { Hex, LocalStorageClient } from '$/client-shared'
+import { defaultCodeLang, defaultCodeTemplate } from '../lib/default-code-template';
 
 class EditorStore {
   activeKey = ''
@@ -58,7 +59,9 @@ class EditorStore {
     )
 
     if (savedContent.length === 0) {
-      this.actions.tabs.createTab()
+      const newTab = this.actions.tabs.createTab()
+      newTab!.lang = defaultCodeLang
+      newTab?.setTabContent(defaultCodeTemplate)
     }
 
     for (const instance of savedContent) {

libs/editor/src/app/providers/editor-store/lib/default-code-template.ts

@@ -0,0 +1,13 @@
+import { LanguagesValues } from '@/shared/consts'
+
+export const defaultCodeTemplate = `// Hello World! Here you can edit the code in 10 different languages. 😎
+
+const camel = 'I like apples'
+
+// Run the code and look in the terminal.
+console.log(camel)
+
+// You can edit and run the code in real time
+// and your friends will see it! Sign in if you want to see more features.
+`
+export const defaultCodeLang: LanguagesValues = 'javascript'

libs/editor/src/app/providers/modals-provider/ui/modals-context-provider.tsx

@@ -10,7 +10,7 @@ const ModalsContextProvider = ({ children }: WithChildren) => {
   const initialState: ModalsState = useMemo<ModalsState>(
     () => ({
       isSettingsOpened: false,
-      isHtmlPreviewOpened: true,
+      isHtmlPreviewOpened: false,
       isTerminalOpened: true,
       selectedTerminalTab: 'terminal'
     }),

libs/editor/src/app/providers/theme-loader/hooks/use-custom-theme/use-custom-theme.ts

@@ -12,7 +12,7 @@ export const useCustomTheme = () => {
   const monaco = useMonaco()
 
   return ({ background, color }: CustomTheme) => {
-    monaco.editor.defineTheme(CUSTOM_THEME, {
+    monaco?.editor.defineTheme(CUSTOM_THEME, {
       base: 'vs',
       inherit: true,
       rules: [],

libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/use-theme-loader.ts

@@ -26,7 +26,7 @@ export const useThemeLoader = () => {
 
         assertThemeObject(json)
 
-        monaco.editor.defineTheme(theme, json)
+        monaco?.editor.defineTheme(theme, json)
       } catch (error) {
         console.log(EditorErrors.ThemeUpload(theme))
       }
@@ -35,7 +35,7 @@ export const useThemeLoader = () => {
 
       if (processed === themes.length) {
         defineCustomTheme({ background: customBackground, color: customColor })
-        monaco.editor.setTheme(selectedTheme)
+        monaco?.editor.setTheme(selectedTheme)
 
         loader.on()
       }

libs/editor/src/components/tabs/store/content-tab.ts

@@ -55,29 +55,8 @@ export class ContentTab {
     return this._label
   }
 
-  private updateLabel() {
-    // TODO: refactor
-
-    if (this._fileHandle) {
-      if (!this.wasChanged) {
-        this.setLabel(`${this.getLabel()}  •`)
-      }
-      this.wasChanged = true
-
-      return
-    }
-    const firstLine = this._content.split('\n')[0].slice(0, 10)
-    const cropped = firstLine.replace(' ', '').replace('\n', '')
-    const newLabel = `${cropped.length > 1 ? firstLine : 'Untitled'} •`
-    this.wasChanged = true
-
-    this.setLabel(newLabel)
-  }
-
   public setTabContent(content: string) {
     this._content = content
-
-    this.updateLabel()
   }
 
   public getContent() {

libs/editor/src/components/tabs/store/tabs.actions.ts

@@ -3,6 +3,7 @@ import { makeAutoObservable } from 'mobx'
 import { EditorStore } from '@/app'
 import { ContentTab, isMaxTabsLength } from '@/components/tabs/lib'
 import { FileHandlerData } from '@/modules/editor-content/types'
+import { Nullable } from '$/client-shared';
 
 class TabsActions {
   private state: EditorStore
@@ -12,18 +13,20 @@ class TabsActions {
     this.state = root
   }
 
-  createTab(fileData?: FileHandlerData): void {
+  createTab(fileData?: FileHandlerData): Nullable<ContentTab> {
     const content = this.state.content
 
     if (isMaxTabsLength(content)) {
-      return
+      return null
     }
     const lastNumber = content.at(-1)?.idx
 
     const newTab = new ContentTab({ fileData, lastNumber })
 
     this.state.activeKey = newTab.getKeyId()
     this.state.content.push(newTab)
+
+    return newTab
   }
 
   removeTab(targetKey?: string): void {

libs/editor/src/components/tabs/ui/tabs.tsx

@@ -21,6 +21,9 @@ const Tabs = observer(() => {
       if (action === 'add') {
         actions.tabs.createTab()
       } else {
+        if (content.length === 1) {
+          return
+        }
         confirm.on(targetKey as string)
       }
     }

libs/editor/src/components/terminal/ui/ui/terminal.styles.ts

@@ -45,3 +45,9 @@ export const Navigation = styled(Tabs)`
 
   font-size: ${({ theme }) => theme.fz6};
 `
+
+export const TerminalTitle = styled.h3`
+  color: ${color('light')};
+  font-size: ${({ theme }) => theme.fz7};
+
+`

libs/editor/src/components/terminal/ui/ui/terminal.tsx

@@ -9,7 +9,7 @@ import {
 } from '@/components/terminal-output'
 import { useActions, useModalsContext } from '@/shared/hooks'
 
-import { Navigation, TerminalButtons } from './terminal.styles'
+import { Navigation, TerminalButtons, TerminalTitle } from './terminal.styles'
 
 import { Display, Popover } from '$/client-shared'
 import { AiOutlineClose, GrClear } from '$/icons'
@@ -46,7 +46,9 @@ const Terminal = observer(() => {
       <Display when={terminalTabs.key === 'terminal'}>
         <TerminalOutput ref={terminalOutputRef} />
       </Display>
-      <Display when={terminalTabs.key === 'test_cases'}>test cases</Display>
+      <Display when={terminalTabs.key === 'test_cases'}>
+        <TerminalTitle>Test cases are not supported yet.</TerminalTitle>
+      </Display>
 
       <TerminalButtons>
         <GrClear onClick={clearTerminal} />

libs/editor/src/modules/editor-content/ui/editor-content/editor-content.tsx

@@ -40,7 +40,7 @@ export const EditorContent = observer(() => {
   }
 
   useEffect(() => {
-    monaco.editor.setTheme(theme)
+    monaco?.editor.setTheme(theme)
   }, [theme])
 
   useEffect(() => {

libs/editor/src/shared/consts.ts

@@ -27,7 +27,12 @@ export const languages = {
   html: 'html',
   htm: 'html',
   txt: 'text',
-  css: 'css'
+  css: 'css',
+  py: 'python',
+  cpp: 'cpp',
+  go: 'go',
+  c: 'c',
+  java: 'java'
 } as const
 
 export type LanguagesValues = ValueOf<typeof languages>
@@ -36,13 +41,12 @@ export type LanguagesKeys = keyof typeof languages
 
 export const maxTabsLength = 9 as const
 
-export const executorAllowedLanguages = [
+export const executorAllowedLanguages: LanguagesValues[] = [
   'java',
   'python',
   'cpp',
   'c',
   'go',
-  'cs',
   'javascript'
 ]
 

libs/editor/src/shared/hooks/use-editor.ts

@@ -5,5 +5,5 @@ import { useMonaco } from '@monaco-editor/react'
 export const useEditor = () => {
   const monaco = useMonaco()
 
-  return monaco.editor.getEditors()[0] as editor.ICodeEditor
+  return monaco?.editor.getEditors()[0] as editor.ICodeEditor
 }